/* Wordmark serif — loaded once here so the italic "Indie" is identical on every
page that links this file (root-smart; no per-page font tags needed). The opsz
axis is loaded so the small wordmark can be pinned to Fraunces' creamy DISPLAY
optical size (144) — the same soft, bold look the big hero headline gets. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,500;1,9..144,600;1,9..144,700&display=swap");
/*
* FSLaunch App Chrome Theme System
* =================================
* Token contract — every variable below is consumed by the app pages.
* Pages should link this file in and remove their local :root color block.
* Theme is driven by data-theme on ; font face by data-font on .
*
* Primary token vocabulary (pages already use these names):
* --bg page / canvas background
* --bg2 secondary background (storefront uses for slight offset)
* --bar top-bar / nav rail background (build page alias for --panel)
* --panel surface panel (cards, sidebar, modal, AI panel)
* --panel2 raised / nested panel surface
* --glass frosted / translucent panel overlay (panelSoft in design)
* --line default border / divider
* --line2 stronger / visible border (lineSoft in design inverted — see note)
* --ink body text (on bg)
* --mute muted / de-emphasized text
* --sub sub-label text (admin page alias — same weight as --mute)
* --soft mid-weight secondary text
* --gold primary accent (a1 in design; renamed per brand: gold on dark, amber/teal on light)
* --gold2 dimmed / hover variant of primary accent
* --violet secondary accent (a2)
* --cyan tertiary accent (a3)
* --acc text color on top of an accent-filled surface (ink-on-accent)
* --r default border-radius
* --sans body font stack
* --mono monospace font stack
* --red status / danger (admin page)
* --green status / success (admin page)
* --blue status / info (admin page)
*
* Note on --line vs --line2:
* The design's `line` is the default border; `lineSoft` is lighter.
* The pages use --line (lighter) and --line2 (slightly stronger), so:
* --line = design's `line` (the standard divider)
* --line2 = design's `lineSoft` pushed to be the "emphasis" border on light themes
* On dark themes the existing mapping (line weaker, line2 stronger) is preserved.
*
* Font pickers (data-font on ):
* "sans" — Inter Tight (default)
* "editorial" — Playfair Display (editorial serif)
* "mono" — JetBrains Mono (code/terminal feel)
*/
/* ─── DEFAULT: fsnoir → Indie10 (dark + international orange) ────────────
* Repainted 2026-07-04 for the Indie10 brand launch — this IS the app's
* root identity now; every other theme below is unchanged and still fully
* selectable (Light/Notebook/White Orange/Dark Orange/Modern Flat). Only
* the DEFAULT's values changed — the token contract/names did not, so no
* page that already consumes these vars needs an edit to pick this up. */
:root {
/* backgrounds */
--bg: #0e0e10;
--bg2: #141416;
--bar: #121214;
--panel: #151517;
--panel2: #1a1a1d;
--glass: rgba(243, 241, 236, .045);
--raised: rgba(243, 241, 236, .09);
/* borders */
--line: rgba(243, 241, 236, .09);
--line2: rgba(243, 241, 236, .16);
/* text */
--ink: #f3f1ec;
--mute: rgba(243, 241, 236, .55);
--sub: rgba(243, 241, 236, .62);
--soft: rgba(243, 241, 236, .78);
/* accents — international orange, the one Indie10 brand color */
--gold: #ff4f00;
--gold2: #e64700;
--violet: #8a7bff;
--cyan: #5ad6e0;
--acc: #0e0e10; /* text on accent surface — dark on orange */
/* semantic status */
--red: #ff7a7a;
--green: #5bd08a;
--blue: #7d9bff;
/* structure */
--r: 18px;
--sans: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
}
/* ─── fslight (clean light) ─────────────────────────────────────────────── */
[data-theme="fslight"] {
--bg: #eceae3;
--bg2: #e3e1d9;
--bar: #ffffff;
--panel: #ffffff;
--panel2: #f6f4ee;
--raised: #ffffff;
--glass: rgba(0, 0, 0, .03);
--line: rgba(0, 0, 0, .12);
--line2: rgba(0, 0, 0, .06);
--ink: #1a1a20;
--mute: #6c6963;
--sub: #7a7874;
--soft: #3f3b35;
--gold: #caa544;
--gold2: #a88830;
--violet: #6b5fe0;
--cyan: #2a8aaa;
--acc: #15130c;
--red: #c0392b;
--green: #27ae60;
--blue: #2980b9;
}
/* ─── notebook (warm paper) ─────────────────────────────────────────────── */
[data-theme="notebook"] {
--bg: #f4ede0;
--bg2: #ebe2d0;
--bar: #fffdf8;
--panel: #fffdf8;
--panel2: #ebe2d1;
--raised: #fffdf8;
--glass: rgba(26, 24, 20, .04);
--line: #c9bfa9;
--line2: #ddd2bb;
--ink: #1a1814;
--mute: #7a6f5c;
--sub: #8a7e6a;
--soft: #4a4338;
--gold: #a87c3d;
--gold2: #8f6830;
--violet: #7a1f2b;
--cyan: #4a5d3a;
--acc: #f4ede0;
--red: #9a2318;
--green: #3d6e38;
--blue: #2a4a7a;
}
/* ─── whiteorange (warm white + orange) ─────────────────────────────────── */
[data-theme="whiteorange"] {
--bg: #faf6ef;
--bg2: #f3ece0;
--bar: #ffffff;
--panel: #ffffff;
--panel2: #f3ece0;
--raised: #ffffff;
--glass: rgba(0, 0, 0, .025);
--line: #e3d8c8;
--line2: #efe7da;
--ink: #211712;
--mute: #8a7560;
--sub: #998166;
--soft: #5a4636;
--gold: #c2691c;
--gold2: #a5581a;
--violet: #7a1f2b;
--cyan: #3a7a60;
--acc: #fff8f0;
--red: #b5280a;
--green: #2e6e3a;
--blue: #2a5080;
}
/* ─── darkorange (dark amber) ───────────────────────────────────────────── */
[data-theme="darkorange"] {
--bg: #0b0a08;
--bg2: #141208;
--bar: #16140f;
--panel: #16140f;
--panel2: #252219;
--raised: rgba(255, 255, 255, .09);
--glass: rgba(255, 255, 255, .03);
--line: #3a3428;
--line2: #2e2a20;
--ink: #ede4d0;
--mute: #9e9280;
--sub: #ada18e;
--soft: #c8bfab;
--gold: #c9a05a;
--gold2: #a8843a;
--violet: #c44a5a;
--cyan: #6a8a58;
--acc: #0b0a08;
--red: #e05050;
--green: #7ab86a;
--blue: #6a90c8;
}
/* ─── modernflat (minimal off-white) ────────────────────────────────────── */
[data-theme="modernflat"] {
--bg: #f2f2ef;
--bg2: #e8e8e4;
--bar: #ffffff;
--panel: #ffffff;
--panel2: #e8e8e4;
--raised: #ffffff;
--glass: rgba(0, 0, 0, .03);
--line: #c8c8c2;
--line2: #d8d8d2;
--ink: #111111;
--mute: #888880;
--sub: #999990;
--soft: #444444;
--gold: #4e7a8c;
--gold2: #3a6070;
--violet: #b03040;
--cyan: #5a9aac;
--acc: #ffffff;
--red: #c0302a;
--green: #2e8040;
--blue: #2a60a0;
}
/* ─── Font face overrides (data-font on ) ─────────────────────────── */
/* default: Inter Tight — set by :root above */
[data-font="editorial"] {
--sans: "Playfair Display", Georgia, "Times New Roman", serif;
--display: "Playfair Display", Georgia, serif;
}
[data-font="mono"] {
--sans: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
--display: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}
/* ─── Light-theme utility helpers ───────────────────────────────────────── */
/* On light themes nav/backdrop blur needs an opaque-ish base */
[data-theme="fslight"] nav,
[data-theme="notebook"] nav,
[data-theme="whiteorange"] nav,
[data-theme="modernflat"] nav {
background: rgba(250, 246, 239, .88) !important;
border-bottom-color: var(--line) !important;
}
/* Aurora orbs on light themes should use a screen-blend-friendly opacity */
[data-theme="fslight"] .aurora i,
[data-theme="notebook"] .aurora i,
[data-theme="whiteorange"] .aurora i,
[data-theme="modernflat"] .aurora i {
opacity: .12;
mix-blend-mode: multiply;
}
/* Smooth theme transition (applied to app shell element) */
[data-theme] body,
[data-theme] .top,
[data-theme] nav {
transition:
background-color .35s ease,
border-color .25s ease,
color .25s ease;
}
/* ─── Brand mark — the ONE Indie10 app icon, shared by every page ──────────
A dark rounded-square tile with a white bar + orange ring inside — reads as
"IO" (Indie10). This is THE approved mark (not a CSS invention); every page
uses this exact markup, no per-instance inline overrides:
Add class="tile sm" for the compact variant (footers, dense headers). */
.tile {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
background: #1a1a1d; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
.tile .b { width: 5px; height: 17px; background: #f3f1ec; border-radius: 1.5px; }
.tile .o { width: 13px; height: 13px; border: 3.5px solid var(--gold); border-radius: 50%; }
.tile.sm { width: 30px; height: 30px; border-radius: 8px; gap: 3px; }
.tile.sm .b { width: 4px; height: 13px; }
.tile.sm .o { width: 10px; height: 10px; border-width: 2.5px; }
/* ─── Wordmark — ONE treatment, shared by every page ───────────────────────
Markup: Indie10 — "Indie" is Fraunces
italic, "10" is the accent. Optional page label: add · X.
The "10" tracks --gold, so mark + wordmark stay in the same accent per theme. */
/* Every value is !important and hard-coded (NOT theme vars) so no page container,
UI-font setting, or uppercase style can distort the wordmark. Identical on all. */
.wm {
color: var(--ink); font-size: 1.35rem !important; line-height: 1;
letter-spacing: .005em !important; white-space: nowrap;
text-transform: none !important; font-style: normal;
}
.wm em { font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif !important;
font-style: italic !important; font-weight: 600 !important; text-transform: none !important; }
.wm b { font-family: "Helvetica Neue", Arial, sans-serif !important; color: var(--gold);
font-weight: 800 !important; font-style: normal !important; letter-spacing: -.02em !important;
text-transform: none !important; }
.wm .sub { font-family: "Helvetica Neue", Arial, sans-serif !important; color: var(--mute);
font-weight: 600 !important; font-style: normal !important; }