/* Firnox design tokens — warm dark, builder-friendly */ :root { /* Backgrounds */ --bg: oklch(0.18 0.012 60); /* deep warm ink */ --bg-elev: oklch(0.22 0.014 60); /* card surface */ --bg-elev-2: oklch(0.26 0.014 60); /* hover / nested */ --bg-code: oklch(0.14 0.014 60); /* code wells */ --bg-input: oklch(0.16 0.012 60); /* Foregrounds */ --fg: oklch(0.96 0.012 80); /* warm cream */ --fg-muted: oklch(0.78 0.012 75); --fg-dim: oklch(0.58 0.012 70); --fg-faint: oklch(0.42 0.012 70); /* Borders */ --border: oklch(0.30 0.012 60); --border-strong: oklch(0.40 0.012 60); --border-faint: oklch(0.24 0.012 60); /* Brand — warm primary (Firnox) */ --primary: oklch(0.74 0.16 55); /* warm amber-orange */ --primary-hover: oklch(0.80 0.16 55); --primary-fg: oklch(0.18 0.012 60); /* Track accents */ --unity: oklch(0.78 0.15 75); /* warm amber/yellow */ --unity-bg: oklch(0.26 0.04 75); --leetcode: oklch(0.72 0.14 230); /* electric blue */ --leetcode-bg: oklch(0.26 0.04 230); /* Status */ --success: oklch(0.74 0.14 150); --warn: oklch(0.78 0.15 75); --danger: oklch(0.68 0.18 25); /* Syntax */ --syn-keyword: oklch(0.78 0.13 320); /* magenta */ --syn-string: oklch(0.80 0.14 130); /* green */ --syn-number: oklch(0.80 0.14 75); /* amber */ --syn-comment: oklch(0.55 0.012 70); --syn-fn: oklch(0.78 0.13 230); /* blue */ --syn-type: oklch(0.78 0.13 190); /* teal */ /* Type */ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-hero: "Space Grotesk", "Inter", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Radius */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; /* Accent — track-aware. Defaults to brand primary; overridden per-track on . Used by primary buttons, the logo mark, the card-ribbon, and the chapter-accordion caret. */ --accent: var(--primary); --accent-hover: var(--primary-hover); --accent-fg: var(--primary-fg); --accent-deep: oklch(0.52 0.10 55); } body[data-track="leetcode"] { --accent: var(--leetcode); --accent-hover: var(--leetcode); --accent-fg: oklch(0.18 0.012 60); --accent-deep: var(--leetcode-bg); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; } /* Common building blocks for all artboards */ .fx-page { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; width: 100%; height: 100%; overflow: hidden; } .fx-mono { font-family: var(--font-mono); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); padding: 10px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary-outline { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-primary-outline:hover { background: var(--accent); color: var(--accent-fg); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-elev); } .btn-ghost { background: transparent; color: var(--fg-muted); border-color: transparent; } .btn-ghost:hover { color: var(--fg); background: var(--bg-elev); } /* Tags / badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); } .badge-unity { color: var(--unity); border-color: oklch(0.40 0.07 75); background: var(--unity-bg); } .badge-leetcode { color: var(--leetcode); border-color: oklch(0.40 0.07 230); background: var(--leetcode-bg); } .badge-free { color: var(--success); border-color: oklch(0.40 0.07 150); background: oklch(0.24 0.04 150); } .badge-sub { color: var(--primary); border-color: oklch(0.42 0.10 55); background: oklch(0.26 0.05 55); } .badge-library { color: oklch(0.82 0.10 200); border-color: oklch(0.40 0.07 200); background: oklch(0.24 0.04 200); } /* Account chip — badge-as-link in the header. Single pill that combines "go to my account" + "current status" into one element. Hover/active brightens the pill uniformly via filter, so we don't need per-variant colour rules. */ .fx-account-chip { display: inline-flex; align-items: center; text-decoration: none; transition: filter 120ms ease, transform 120ms ease; } .fx-account-chip:hover { filter: brightness(1.15); transform: translateY(-1px); } .fx-account-chip.active { filter: brightness(1.15); } .fx-account-chip .badge { /* Sized to match the Sign-in button + search input height so the authed/anon and search/account nav slots all feel of-a-piece. Zero left padding: the avatar provides the left cap. */ padding: 0 14px 0 0; gap: 8px; font-size: 13px; height: 34px; box-sizing: border-box; } .fx-account-avatar { /* Sized to match the pill's outer height so the avatar IS the left rounded end. Negative margins pull it flush with the pill's outer edge, sharing the border line. */ width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid currentColor; font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; margin: -1px 0 -1px -1px; } /* Track dot */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* Inputs */ .input { background: var(--bg-input); border: 1px solid var(--border); color: var(--fg); padding: 10px 12px; border-radius: var(--r); font-family: var(--font-sans); font-size: 14px; width: 100%; } .input:focus { outline: none; border-color: var(--primary); } /* Card */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } a.card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 24px -16px oklch(0 0 0 / 0.5); } a.card.card--free:hover { border-color: var(--success); } /* Striped placeholder for imagery */ .placeholder { background: repeating-linear-gradient( 135deg, oklch(0.24 0.012 60) 0 12px, oklch(0.20 0.012 60) 12px 24px ); border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.04em; text-transform: uppercase; } /* Code blocks */ .code-block { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--fg); overflow: hidden; } .code-block .ln { color: var(--fg-faint); display: inline-block; width: 24px; user-select: none; } .tk-k { color: var(--syn-keyword); } .tk-s { color: var(--syn-string); } .tk-n { color: var(--syn-number); } .tk-c { color: var(--syn-comment); font-style: italic; } .tk-f { color: var(--syn-fn); } .tk-t { color: var(--syn-type); } .tk-p { color: var(--fg-muted); } /* Subtle scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Top nav (shared) */ .fx-nav { display: flex; align-items: center; gap: 24px; padding: 18px 40px; border-bottom: 1px solid var(--border-faint); background: var(--bg); flex-wrap: wrap; } .fx-nav-collapsible { display: flex; align-items: center; flex: 1; gap: 32px; justify-content: space-between; min-width: 0; } .fx-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .fx-nav-toggle { display: none; align-items: center; justify-content: center; cursor: pointer; width: 38px; height: 38px; border-radius: var(--r); color: var(--fg-muted); background: transparent; border: 1px solid var(--border); } .fx-nav-toggle:hover { color: var(--fg); background: var(--bg-elev); } .fx-nav-toggle-icon { display: inline-block; } .fx-nav-toggle-icon--close { display: none; } .fx-nav-search { position: relative; flex-shrink: 0; } .fx-nav-search input { width: 260px; padding-left: 36px; font-size: 13px; } .fx-nav-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-dim); pointer-events: none; } .fx-logo { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; } .fx-logo-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .fx-nav-links { display: flex; gap: 20px; align-items: center; } .fx-nav-link { color: var(--fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; } .fx-nav-link:hover, .fx-nav-link.active { color: var(--fg); } .fx-nav-link .dot { width: 6px; height: 6px; margin-right: 6px; } /* Footer (shared) */ .fx-footer { border-top: 1px solid var(--border-faint); padding: 32px 40px; font-size: 13px; color: var(--fg-dim); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fx-footer a { color: var(--fg-muted); text-decoration: none; } .fx-footer a:hover { color: var(--fg); } /* Section labels */ .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }