/* KubeLab — mission-control / editorial UI Dark: SpaceX density + x.com timeline. Light: uncoated paper, ink, vermillion — cider-label print. No cards, no pills, no glass. Hairlines, lists, mono meta. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Condensed gothic for light-theme display type (landing first). */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Structure tokens only — no colors on :root. Colors live on the two explicit themes below. Inline color-scheme + background on (see base.html) beat the UA grey canvas; CSS here is the fallback. */ :root { --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --display: "Barlow Condensed", "Liberation Sans Narrow", "Arial Narrow", Impact, sans-serif; --max: 1080px; --pad: 1.25rem; --ease: 0.12s ease; --link: #1d9bf0; --radius: 0; --radius-sm: 0; --radius-pill: 0; } html[data-theme="light"] { /* Uncoated label stock + ink + cider vermillion. */ --bg: #F4EFE6; --fg: #161412; --mute: #5A534A; --faint: #8A8378; --line: #DDD6C8; --line-strong: #161412; --soft: #EBE4D6; --ok: #1F7A3A; --err: #C41E1C; --warn: #F64543; --accent: #F64543; --link: #F64543; color-scheme: light; color-scheme: only light; forced-color-adjust: none; } html[data-theme="dark"] { --bg: #000000; --fg: #ededed; --mute: #888; --faint: #555; --line: #222; --line-strong: #ededed; --soft: #0d0d0d; --ok: #3c3; --err: #f44; --warn: #00D1DE; /* inverse of #F64543 */ --accent: var(--fg); color-scheme: dark; color-scheme: only dark; forced-color-adjust: none; } /* Legacy token aliases (templates / flashcards) */ html[data-theme="light"], html[data-theme="dark"] { --text: var(--fg); --text-body: var(--fg); --heading: var(--fg); --muted: var(--mute); --border: var(--line); --border-strong: var(--line-strong); --border-subtle: var(--line); --surface: var(--bg); --surface-2: var(--soft); --surface-hover: var(--soft); --cta: var(--fg); --cta-text: var(--bg); --cta-hover: var(--mute); --navy: var(--fg); --navy-light: var(--mute); --green-600: var(--ok); --red-600: var(--err); --amber-700: var(--warn); --orange: var(--warn); --orange-dark: var(--warn); --font-sans: var(--font); --font-mono: var(--mono); } /* Light CTAs take the vermillion; dark stays ink-on-paper inverted. */ html[data-theme="light"] { --cta: var(--accent); --cta-text: var(--bg); } /* Dark landing/pricing = light cider-label, inverted (cyan punch is inverse of #F64543). */ [data-theme="dark"] .page-landing, [data-theme="dark"] .page-pricing { --accent: #00D1DE; --warn: #00D1DE; --link: #00D1DE; --cta: var(--accent); --cta-text: var(--bg); --serif: Georgia, "Times New Roman", Times, serif; } html { scroll-behavior: smooth; } html[data-theme="light"], html[data-theme="light"] body { background-color: #F4EFE6; color: #161412; } html[data-theme="dark"], html[data-theme="dark"] body { background-color: #000000; color: #ededed; } body { font-family: var(--font); font-size: 15px; line-height: 1.5; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } main { flex: 1; width: 100%; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ═══════════ SHELL ═══════════ */ .shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* ═══════════ HEADER ═══════════ */ header.site { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 40; } .header-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); min-height: 52px; height: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: -0.02em; } .logo:hover { color: var(--fg); text-decoration: none; } .logo-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; } .logo-mark-img { display: block; width: 28px; height: 28px; object-fit: contain; border-radius: 0; } /* One 56px mark (black on white). Invert for dark instead of a second 512px PNG. */ [data-theme="dark"] .logo-mark-img { filter: invert(1); } .logo-word span { color: var(--mute); font-weight: 500; } .logo-word .logo-plus { color: var(--fg); font-weight: 500; } .header-nav { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: flex-end; } .header-nav a { color: var(--mute); font-size: 13px; font-weight: 400; text-decoration: none; padding: 0.35rem 0.55rem; } .header-nav a:hover { color: var(--fg); text-decoration: none; } .header-nav a[aria-current="page"] { color: var(--fg); } .header-nav .btn { margin-left: 0.5rem; } .header-nav .nav-resume { margin-left: 0.5rem; margin-right: 0.25rem; } .lang-switch { display: inline-flex; align-items: center; gap: 0; margin: 0 0.15rem 0 0.35rem; border-left: 1px solid var(--line); padding-left: 0.35rem; } .lang-switch a { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; padding: 0.35rem 0.4rem; } .lang-switch a[aria-current="true"] { color: var(--fg); font-weight: 600; } .theme-toggle { appearance: none; background: none; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--mute); font: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.65rem; cursor: pointer; margin: 0 0.15rem; } .theme-toggle:hover { color: var(--fg); } .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-sun { display: inline; } [data-theme="dark"] .theme-icon-moon { display: none; } /* ═══════════ BUTTONS — raw bars ═══════════ */ /* Author display rules beat the UA [hidden] stylesheet. */ [hidden] { display: none !important; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.7rem 1.1rem; border: 1px solid var(--fg); border-radius: 0; background: transparent; color: var(--fg); cursor: pointer; text-decoration: none; line-height: 1; text-align: center; transition: background var(--ease), color var(--ease); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { opacity: 0.85; } .btn:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; } .btn-primary { background: var(--cta); color: var(--cta-text); border-color: var(--cta); } .btn-primary:hover { background: transparent; color: var(--cta); border-color: var(--cta); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); } .btn-ghost:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); } .btn-amber { border-color: var(--warn); color: var(--warn); background: transparent; } .btn-amber:hover { background: var(--warn); color: var(--bg); } /* Light: amber was the dark-theme yellow. Same slot, cider vermillion. Dark landing uses the inverted punch. */ [data-theme="light"] .btn-amber, [data-theme="dark"] .page-landing .btn-amber, [data-theme="dark"] .page-pricing .btn-amber { background: var(--accent); color: var(--bg); border-color: var(--accent); } [data-theme="light"] .btn-amber:hover, [data-theme="dark"] .page-landing .btn-amber:hover, [data-theme="dark"] .page-pricing .btn-amber:hover { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-danger { border-color: var(--err); color: var(--err); background: transparent; } .btn-danger:hover { background: var(--err); color: var(--bg); } .btn-sm { font-size: 11px; padding: 0.5rem 0.8rem; } .btn-play { font-family: var(--mono); font-weight: 600; letter-spacing: 0; text-transform: none; } .btn-block { width: 100%; } .btn[disabled], .btn[disabled]:hover { opacity: 0.3; cursor: not-allowed; background: transparent; color: var(--mute); border-color: var(--line); } /* Form / page notes. Not toasts. */ main > .notices { max-width: var(--max); margin: 0 auto; padding: 1.1rem var(--pad) 0; } .notice { font-size: 14px; color: var(--mute); margin: 0 0 0.35rem; } .notice--err { color: var(--err); } .auth-card .notices { margin: -0.85rem 0 1.25rem; } .auth-card .notice { font-size: 14px; } /* Gift overlay — first connect after a grant. */ @keyframes gift-tip-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes gift-tip-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } .gift-tip { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 0.75rem; } .gift-tip[hidden] { display: none !important; } .gift-tip-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); animation: gift-tip-fade 0.18s ease; } .gift-tip-card { position: relative; z-index: 1; width: min(26rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); overflow: auto; padding: 1.35rem 1.35rem 1.4rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation: gift-tip-in 0.38s cubic-bezier(0.16, 1, 0.3, 1); } .gift-tip-mascot { width: 4.5rem; height: 4.5rem; margin: 0 0 0.85rem; overflow: hidden; } .gift-tip-mascot img { display: block; width: 7.5rem; max-width: none; height: auto; margin: -0.85rem 0 0 -1.4rem; pointer-events: none; user-select: none; } .gift-tip-card .kicker { margin: 0 0 0.4rem; color: var(--accent); } .gift-tip-card h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.55rem, 4vw, 2.05rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin: 0 0 0.65rem; } .gift-tip-card .sub { font-size: 15px; line-height: 1.5; color: var(--mute); margin: 0 0 1.15rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--line); } .gift-tip-close { position: absolute; top: 0.45rem; right: 0.5rem; border: 0; background: transparent; color: var(--mute); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.35rem; } .gift-tip-close:hover { color: var(--fg); } /* ═══════════ TYPE ═══════════ */ .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 1rem; } .overline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 1rem; } /* ═══════════ HERO — title left, copy right; art fills dead space under title ═══════════ */ .hero { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--pad) 2.5rem; text-align: left; border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2.5rem; align-items: start; } .landing-mast { position: relative; overflow-x: clip; } .page-landing .section.label-band { padding-top: 0; padding-bottom: 0; } .page-landing .label-band .funnel-strip { position: relative; z-index: 1; } .hero-main { min-width: 0; display: flex; flex-direction: column; gap: 0; } .hero-main .kicker { margin-bottom: 0.85rem; } .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; color: var(--fg); max-width: 14ch; margin: 0; } .hero h1 em { font-style: italic; font-weight: 400; color: var(--mute); } /* The gap under the short headline — landscape art lives here */ .hero-gap-art { margin: 1.35rem 0 0; width: 100%; max-width: 100%; } .ascii-frame { width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 1px solid var(--fg); background: var(--bg); border-radius: 0; overflow: hidden; line-height: 0; /* landscape band under the title */ min-height: 7.5rem; height: clamp(7.5rem, 14vw, 10.5rem); } .ascii-art { display: block; margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; font-family: var(--mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 8px; line-height: 1; letter-spacing: 0; color: var(--fg); background: transparent; border: 0; white-space: pre; overflow: hidden; user-select: none; cursor: crosshair; border-radius: 0; text-rendering: geometricPrecision; -webkit-font-smoothing: none; font-smooth: never; tab-size: 1; } .ascii-statement { margin: 0 0 0.65rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; color: var(--fg); } .hero-exam-lang { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--mute); line-height: 1.4; } .curriculum-line { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--faint); line-height: 1.4; } [data-theme="dark"] .ascii-frame { border-color: #ededed; background: #000; } [data-theme="dark"] .ascii-art { color: #ededed; } [data-theme="light"] .ascii-frame { border-color: var(--fg); background: var(--bg); } [data-theme="light"] .ascii-art { color: var(--fg); } .hero-side { border-left: 1px solid var(--line); padding-left: 1rem; min-width: 0; position: relative; overflow: visible; align-self: stretch; } .hero-side picture { display: contents; } .hero-mascot { display: block; width: 222%; max-width: none; height: auto; margin: -106px 0 -50% -105%; pointer-events: none; user-select: none; position: relative; z-index: 0; } .lede { font-size: 15px; line-height: 1.55; color: var(--mute); margin: 0 0 1.5rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .hero-meta { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; } .hero-meta li { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; } .hero-meta .mk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .hero-meta .mv { color: var(--fg); } .landing-brief { display: grid; grid-template-columns: 1.25fr 1fr 0.9fr; gap: 2rem 2.5rem; align-items: start; } .landing-brief .lede { max-width: none; margin: 0 0 1rem; } .landing-brief .hero-actions { margin-bottom: 0; } .landing-brief .hero-exam-lang { margin-top: 0; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-side { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.5rem; } .hero-mascot { width: 100%; margin: 0; } .ascii-frame { min-height: 6.5rem; height: 7.5rem; } .landing-brief { grid-template-columns: 1fr; } } /* Compact page hero (catalog, etc.) */ .page-hero { max-width: var(--max); margin: 0 auto; padding: 2.75rem var(--pad) 1.75rem; border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--fg); } .page-hero h1 em { font-style: italic; font-weight: 400; color: var(--mute); } .page-hero .lede { margin-top: 0.75rem; color: var(--mute); font-size: 15px; max-width: 48ch; } /* ═══════════ SECTION ═══════════ */ .section { max-width: var(--max); margin: 0 auto; padding: 2rem var(--pad) 4rem; } .section--account { padding-top: 1.15rem; } .section-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0; padding-bottom: 0.85rem; border-bottom: 1px solid var(--fg); } .section-bar h2 { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); } .section-bar a { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.04em; text-transform: uppercase; } .section-bar a:hover { color: var(--fg); } /* ═══════════ MANIFEST LIST (tracks) ═══════════ */ .manifest { list-style: none; border-bottom: 1px solid var(--line); } .manifest-item, .track-card { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; padding: 1.35rem 0; border-top: 1px solid var(--line); background: transparent; text-decoration: none; color: inherit; transition: background var(--ease); } a.manifest-item:hover, .track-card:hover { background: var(--soft); text-decoration: none; color: inherit; } /* when track-card is article wrapping content */ .track-card { display: block; padding: 0; border: 0; } .track-card > a.manifest-item { display: grid; grid-template-columns: 4.25rem 1fr auto; gap: 1rem 1.25rem; padding: 1.35rem 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; align-items: start; } .manifest-art-wrap { width: 4.5rem; aspect-ratio: 1 / 1; color: var(--fg); flex-shrink: 0; } .manifest-art-wrap .track-mark { display: block; width: 100%; height: 100%; } .track-card:first-child > a.manifest-item, .manifest > .manifest-item:first-child, .manifest > li:first-child .manifest-item { border-top: 0; } .manifest-body { min-width: 0; } .manifest-top { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .manifest-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); line-height: 1.25; } .manifest-item:hover .manifest-title, .track-card:hover .manifest-title { text-decoration: underline; text-underline-offset: 3px; } .manifest-summary { font-size: 13px; line-height: 1.5; color: var(--mute); max-width: 62ch; margin-top: 0.35rem; } .manifest-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.75rem; text-align: right; min-width: 7.5rem; } .manifest-price { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); } .price-was { font-weight: 500; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; } .manifest-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.02em; line-height: 1.5; } /* One price for every mock — tall subscribe slab, or a Start cell per row. */ .track-board--offer { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); } .track-board--offer .track-board-list { flex: 1; min-width: 0; border-bottom: 0; } .track-board .track-card > a.manifest-item { grid-template-columns: 4.25rem minmax(0, 1fr); } .track-board .manifest-side { grid-column: 2; align-items: flex-start; text-align: left; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 0.75rem; } .track-board-offer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; width: 13.5rem; flex-shrink: 0; margin: 0; padding: 1.35rem 1.1rem; text-align: center; text-decoration: none; background: var(--cta); color: var(--cta-text); border: 0; line-height: 1.15; } .track-board-offer:hover { text-decoration: none; filter: brightness(1.06); } .track-board-offer-kicker { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .track-board-offer-price { font-family: var(--display, var(--font)); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: 0.02em; line-height: 0.9; } .track-board-offer-price small { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .track-board-offer-price .price-was { display: block; font-size: 0.95rem; color: inherit; opacity: 0.65; margin-bottom: 0.15rem; } .track-board-offer-one { font-size: 13px; max-width: 12ch; opacity: 0.9; } .track-board-offer-cta { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; padding: 0.55rem 0.7rem; margin-top: 0.25rem; } .track-board-offer:hover .track-board-offer-cta { background: var(--cta-text); color: var(--cta); border-color: var(--cta-text); } .track-board--starts { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; align-items: stretch; border-bottom: 1px solid var(--line); } .track-board-slot { display: flex; align-items: stretch; padding: 1.35rem 0 1.35rem 1rem; border-top: 1px solid var(--line); } .track-board--starts > .track-card:first-child + .track-board-slot { border-top: 0; } .track-board-slot .btn { width: 100%; flex: 1; } [data-theme="light"] .track-board-offer, [data-theme="dark"] .page-landing .track-board-offer { background: var(--accent); color: var(--bg); } [data-theme="light"] .track-board-offer:hover .track-board-offer-cta, [data-theme="dark"] .page-landing .track-board-offer:hover .track-board-offer-cta { background: var(--bg); color: var(--accent); border-color: var(--bg); } /* badge as mono tag */ .badge { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); padding: 0.15rem 0.4rem; border-radius: 0; background: transparent; } .badge.free { color: var(--fg); border-color: var(--fg); } .badge.level { color: var(--mute); } /* Account achievement badges — square art, mono editorial vibe */ .achievements { margin: 2.5rem 0 0; } .achievement-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 1.35rem 1rem; } .achievement-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0; border: none; background: transparent; min-height: 0; } .achievement-art-wrap { aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--line); background: var(--bg); display: block; overflow: hidden; } .achievement-card.is-earned .achievement-art-wrap { border-color: var(--fg); } .achievement-art { display: block; width: 100%; height: 100%; object-fit: contain; /* SVGs are black-on-transparent; invert for dark theme */ filter: none; } [data-theme="dark"] .achievement-art { filter: invert(1); } .achievement-card.is-locked .achievement-art-wrap { opacity: 0.38; } .achievement-card.is-locked .achievement-title, .achievement-card.is-locked .achievement-blurb, .achievement-card.is-locked .achievement-date { opacity: 0.55; } .achievement-title { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.02em; line-height: 1.2; margin-top: 0.3rem; } .achievement-blurb { font-size: 0.78rem; line-height: 1.4; color: var(--mute); } .achievement-date { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .score-new-badges { margin: 1rem 0 1.5rem; padding: 0.85rem 1rem; border: 1px solid var(--line); background: var(--soft, transparent); } .score-new-badges[hidden] { display: none !important; } .score-new-badges-label { margin: 0 0 0.5rem; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint, var(--mute)); } .score-new-badges-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .score-new-badge-item { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 0.65rem; row-gap: 0.1rem; align-items: center; } .score-new-badge-art { grid-row: 1 / span 2; width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--line); background: var(--bg); } [data-theme="dark"] .score-new-badge-art { filter: invert(1); } .score-new-badge-title { font-weight: 600; font-size: 0.95rem; } .score-new-badge-blurb { grid-column: 2; font-size: 0.8rem; color: var(--mute); } /* legacy track bits (dashboard etc.) */ .track-grid { /* becomes vertical stack */ display: flex; flex-direction: column; } .track-top { display: none; } /* handled in new card markup */ .track-meta { display: none; } .track-foot { display: none; } .price { font-weight: 600; } .summary { color: var(--mute); font-size: 13px; } /* ═══════════ PROGRESS ═══════════ */ .progress { height: 1px; background: var(--line); border: 0; overflow: hidden; width: 100%; max-width: 200px; } .progress > span { display: block; height: 100%; background: var(--fg); } .progress-label { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: 0.4rem; letter-spacing: 0.02em; } /* ═══════════ DETAIL / TRACK PAGE ═══════════ */ .detail-hero { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--pad) 1.5rem; border-bottom: 1px solid var(--line); } .detail-art-wrap { width: 6.5rem; aspect-ratio: 1 / 1; color: var(--fg); margin: 1.15rem 0 0; } .detail-art-wrap .track-mark { display: block; width: 100%; height: 100%; } .detail-hero h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 0.75rem 0 0.75rem; } .detail-hero .summary { font-size: 15px; color: var(--mute); max-width: 56ch; line-height: 1.55; } .detail-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } .detail-layout { max-width: var(--max); margin: 0 auto; padding: 1.5rem var(--pad) 4rem; display: grid; gap: 0; } .access-box { border: 1px solid var(--line); border-left: 2px solid var(--fg); padding: 1.15rem 1.25rem; margin-bottom: 1.5rem; background: var(--bg); } .access-box.locked { border-left-color: var(--warn); } .access-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* steps as timeline rows */ .step-list { list-style: none; border-top: 1px solid var(--fg); } .step-row { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); background: transparent; text-decoration: none; color: inherit; border-radius: 0; } a.step-row:hover { background: var(--soft); text-decoration: none; color: inherit; } .step-num { font-family: var(--mono); font-size: 11px; color: var(--faint); width: auto; height: auto; border: 0; background: none; border-radius: 0; display: block; text-align: left; } .step-row.done .step-num { color: var(--fg); } .step-row .step-title { font-size: 14px; font-weight: 500; color: var(--fg); } .step-row .step-lock { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-left: 0; } .step-row.locked { opacity: 0.62; } .step-row.locked .step-title { color: var(--mute); } .step-row.is-current { box-shadow: inset 2px 0 0 var(--fg); padding-left: 0.65rem; margin-left: -0.65rem; } .step-row.is-cleared .step-lock { color: var(--ok); } .step-row.is-close .step-lock { color: var(--warn); } .step-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .step-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.02em; } .step-list--sections .step-row { grid-template-columns: 2.5rem 1fr auto; align-items: start; padding: 1rem 0; } /* 4-node section path — hairline, mono, no pills */ .section-path { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); margin: 0 0 0.25rem; } .section-node { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.55rem 0.75rem; border-right: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; background: transparent; } .section-node:last-child { border-right: 0; } a.section-node:hover { background: var(--soft); text-decoration: none; color: inherit; } .section-node-num { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; } .section-node-name { font-size: 13px; font-weight: 550; color: var(--fg); } .section-node-stat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .section-node.is-current { box-shadow: inset 0 2px 0 var(--fg); } .section-node.is-current .section-node-num, .section-node.is-current .section-node-name { color: var(--fg); } .section-node.is-cleared .section-node-stat { color: var(--ok); } [data-theme="light"] .section-node.is-cleared .section-node-stat { color: var(--accent); font-weight: 600; } [data-theme="light"] .section-node.is-cleared { box-shadow: inset 0 -2px 0 var(--accent); } .section-node.is-close .section-node-stat { color: var(--warn); } .section-node.is-locked { opacity: 0.5; } .section-path--compact { margin: 0 0 0.75rem; } .section-path--compact .section-node { padding: 0.45rem 0.35rem 0.5rem; align-items: center; text-align: center; } .section-path--compact .section-node-stat { font-size: 9px; } @media (max-width: 640px) { .section-node-name { display: none; } .section-path:not(.section-path--compact) .section-node { padding: 0.55rem 0.35rem; align-items: center; text-align: center; } } /* ═══════════ LESSON ═══════════ */ .lesson-body { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.5rem 0; } .lesson-body h1, .lesson-body h2, .lesson-body h3 { color: var(--fg); letter-spacing: -0.02em; margin: 1.5rem 0 0.55rem; line-height: 1.2; } .lesson-body h1:first-child, .lesson-body h2:first-child { margin-top: 0; } .lesson-body h2 { font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; } .lesson-body h3 { font-size: 1rem; font-weight: 600; } .lesson-body p { margin: 0.7rem 0; line-height: 1.65; } .lesson-body ul, .lesson-body ol { margin: 0.7rem 0 0.7rem 1.25rem; } .lesson-body li { margin: 0.3rem 0; line-height: 1.55; } .lesson-body a { color: var(--link); } .lesson-body code { font-family: var(--mono); font-size: 0.88em; background: var(--soft); border: 1px solid var(--line); padding: 0.05em 0.3em; } .lesson-body pre { background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 0.9rem 1rem; overflow-x: auto; margin: 1rem 0; font-size: 12.5px; line-height: 1.55; } .lesson-body pre code { background: none; border: none; padding: 0; } .lesson-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 13px; } .lesson-body th, .lesson-body td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; } .lesson-body th { background: var(--soft); font-weight: 600; } .lesson-body blockquote { border-left: 2px solid var(--fg); padding-left: 0.9rem; margin: 0.9rem 0; color: var(--mute); font-style: italic; } .lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--line); } .back-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); text-decoration: none; } .back-link:hover { color: var(--fg); text-decoration: none; } .step-overline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0.75rem 0 0.3rem; } /* ═══════════ PRICING — pick a plan, then compare ═══════════ */ .page-hero--pricing { border-bottom: 0; padding-bottom: 1.5rem; } .page-hero--pricing .lede { max-width: 40rem; } .section--plans { padding-top: 0; padding-bottom: 2.25rem; } .pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); align-items: stretch; } .plan { padding: 1.6rem 1.4rem 1.75rem; display: flex; flex-direction: column; min-width: 0; background: transparent; } .plan + .plan { border-left: 1px solid var(--line); } .plan.featured { background: var(--soft); box-shadow: inset 0 2px 0 var(--fg); } .plan-tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); margin: 0 0 0.85rem; } .plan h2 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 0.7rem; } .plan .plan-price { font-size: 2.15rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; } .plan:not(.featured) .plan-price { font-size: 1.85rem; } .plan .plan-price-was { font-size: 1.1rem; font-weight: 500; color: var(--faint); letter-spacing: -0.02em; text-decoration: line-through; text-decoration-thickness: 1.5px; } .plan .plan-price small { font-size: 13px; font-weight: 400; color: var(--mute); letter-spacing: 0; } .plan .plan-sale { font-family: var(--mono); font-size: 11px; color: var(--warn); margin: 0.5rem 0 0; letter-spacing: 0.02em; } .plan .plan-desc { font-size: 14px; color: var(--mute); margin: 0.7rem 0 1.15rem; line-height: 1.4; } .plan ul { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 0; flex: 1; } .plan li { font-size: 13.5px; color: var(--fg); padding: 0.5rem 0; border-bottom: 1px solid var(--line); line-height: 1.35; } .plan li:last-child { border-bottom: 0; } .plan .plan-cta { margin-top: auto; padding-top: 1.25rem; } .plan-note { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.02em; margin: 0.55rem 0 0; text-align: center; } .section--compare { padding-top: 0; } .compare-wrap { overflow-x: auto; } .compare { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--line); } .compare th, .compare td { padding: 0.7rem 0.75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; } .compare th:first-child, .compare td:first-child { padding-left: 0; } .compare .compare-mark { width: 9rem; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; } .compare th.compare-mark, .compare td.compare-mark { border-left: 1px solid var(--line); } .compare th.compare-mark:last-child, .compare td.compare-mark:last-child { background: var(--soft); border-left-color: var(--fg); } .compare thead th { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); padding-top: 1.1rem; padding-bottom: 1rem; border-bottom-color: var(--fg); vertical-align: bottom; } .compare--prose .compare-mark { width: auto; min-width: 10rem; text-align: left; font-size: 13px; color: var(--mute); } .compare--prose td.compare-mark:last-child { color: var(--fg); font-weight: 600; } .compare-feat { font-family: var(--mono); font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--mute) !important; } .compare-plan-name { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.45rem; } .compare .plan-price { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.35rem; } .compare .plan-price-was { font-size: 0.9rem; font-weight: 500; color: var(--faint); letter-spacing: -0.02em; text-decoration: line-through; text-decoration-thickness: 1.5px; } .compare .plan-price small { font-size: 12px; font-weight: 400; color: var(--mute); letter-spacing: 0; } .compare tbody th[scope="row"] { font-weight: 500; color: var(--fg); } .compare-split th, .compare-split td { border-top: 1px solid var(--fg); } .mark { display: inline-block; font-size: 1.15rem; font-weight: 700; line-height: 1; font-family: var(--mono); } .mark--yes { color: var(--ok); } .mark--no { color: var(--faint); font-weight: 500; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } /* ═══════════ AUTH ═══════════ */ .auth-card { max-width: 380px; margin: 3.5rem auto; padding: 0 var(--pad); background: transparent; border: 0; border-radius: 0; } .auth-card h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 0.35rem; } .auth-card .sub { font-size: 14px; color: var(--mute); margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .field { margin-bottom: 1.1rem; } .field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.4rem; } .field input { width: 100%; font: inherit; font-size: 15px; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--fg); } .field input::placeholder { color: var(--faint); } .field input:focus { outline: none; border-bottom-color: var(--fg); } .auth-alt { text-align: left; font-size: 13px; color: var(--mute); margin-top: 1.25rem; } .auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0.85rem; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; } .btn-google-logo { flex: 0 0 auto; display: block; } /* ═══════════ BANNERS ═══════════ */ .stub-banner { background: transparent; border: 0; border-left: 2px solid var(--mute); border-radius: 0; padding: 0.5rem 0 0.5rem 0.9rem; font-size: 13px; color: var(--mute); margin-bottom: 1.25rem; } .stub-banner strong { color: var(--fg); } /* ═══════════ FUNNEL (in-app conversion / retention, no email) ═══════════ */ .funnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; } .funnel-card { border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.15rem 1.2rem; background: var(--panel, transparent); } .funnel-card--primary { border-color: var(--accent, var(--line)); box-shadow: inset 3px 0 0 var(--accent, #c9a227); } .funnel-card--priority { border-color: color-mix(in srgb, var(--warn, #c9a227) 55%, var(--line)); } .funnel-card--score { margin: 1.25rem 0 1.75rem; } .funnel-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint, var(--mute)); margin: 0 0 0.4rem; } .funnel-title { font-size: 1.15rem; margin: 0 0 0.5rem; line-height: 1.25; } .funnel-copy { font-size: 14px; color: var(--mute); margin: 0 0 1rem; line-height: 1.45; } .funnel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .funnel-footnote { font-size: 13px; color: var(--mute); margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); } .funnel-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1.1rem; font-size: 14px; color: var(--mute); margin-bottom: 0.5rem; } .funnel-strip strong { color: var(--fg); } .funnel-strip-sep { opacity: 0.45; margin: 0 0.35rem; } .funnel-welcome { font-size: 13px; line-height: 1.4; color: var(--mute); padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent, #888) 8%, transparent); } .funnel-welcome strong { color: var(--fg); } .funnel-welcome--priority { background: color-mix(in srgb, var(--ok, #3a7) 12%, transparent); } .funnel-welcome--soft { background: transparent; } /* ═══════════ FOOTER ═══════════ */ footer.site { border-top: 1px solid var(--line); padding: 1.75rem var(--pad) 2.5rem; margin-top: auto; } .footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); } footer.site a { color: var(--mute); text-decoration: none; } footer.site a:hover { color: var(--fg); } footer.site .sep { margin: 0 0.4rem; color: var(--line); } footer.site p { margin: 0; } /* ═══════════ SEO copy / FAQ (public pages) ═══════════ */ .seo-block { padding-top: 0; } .seo-lead { margin: 1.15rem 0 0; color: var(--mute); font-size: 15px; max-width: 62ch; } .seo-steps { list-style: none; margin: 0; } .seo-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--line); } .seo-steps li:first-child { border-top: 0; } .seo-step-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); padding-top: 0.2rem; } .seo-steps h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.25rem; } .seo-steps p { margin: 0; color: var(--mute); font-size: 14px; max-width: 56ch; } .seo-steps code { font-family: var(--mono); font-size: 12px; } .seo-topics { list-style: none; margin: 1rem 0 0; } .seo-topics li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); } .seo-topics li:first-child { border-top: 0; } .seo-topics strong { display: block; color: var(--fg); font-weight: 600; margin-bottom: 0.15rem; } .seo-topic-w { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); padding-top: 0.2rem; } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--faint); margin-right: 0.75rem; } .faq-item[open] summary::before { content: "–"; } .faq-item p { margin: 0 0 1.1rem; padding-left: 1.35rem; color: var(--mute); font-size: 14px; max-width: 62ch; line-height: 1.55; } /* ═══════════ PAGE HEAD (dashboard) ═══════════ */ .page-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--fg); } .page-head h1 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 600; letter-spacing: -0.03em; } .page-head .sub { color: var(--mute); margin-top: 0.35rem; font-size: 13px; } .page-head--tight { align-items: flex-end; } .page-head--tight .kicker { margin-bottom: 0.45rem; } .page-head-link { appearance: none; background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); cursor: pointer; text-decoration: none; } .page-head-link:hover { color: var(--fg); text-decoration: none; } /* Post-checkout: same type as the landing hero, not a flash. */ .thanks { padding: 0 0 1.75rem; margin: 0 0 1.75rem; border-bottom: 1px solid var(--fg); } .thanks .kicker { margin-bottom: 0.75rem; } .thanks h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; margin: 0; } .thanks .lede { color: var(--mute); font-size: 16px; margin: 0.9rem 0 1.35rem; max-width: 28ch; } .dash-row--next { border-bottom: 1px solid var(--line); margin-bottom: 2rem; } .dash-group-bar { margin-top: 2rem; } .dash-group-lede { margin: 0.65rem 0 0; color: var(--mute); font-size: 14px; line-height: 1.45; max-width: 42ch; } .dash-list { border-bottom: 0; } .dash-score-kicker { margin: 1.25rem 0 0; color: var(--faint, var(--mute)); } .dash-row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } /* dashboard row reuse — 2-col unless a crest is present (flashcard decks have title + Review only; squeezing them into 3.25rem crushed the list). */ .dash-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: center; } .dash-row:has(.dash-art-wrap) { grid-template-columns: 3.25rem 1fr auto; } .dash-art-wrap { width: 3.5rem; aspect-ratio: 1 / 1; color: var(--fg); } .dash-art-wrap .track-mark { display: block; width: 100%; height: 100%; } .dash-row h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; } .dash-row h3 a { color: inherit; text-decoration: none; } .dash-row h3 a:hover { text-decoration: underline; } /* ═══════════ UTILS ═══════════ */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .narrow { max-width: 640px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pills { display: none; } /* removed from vibe */ .pill { display: none; } .feature-grid { display: none; } /* ═══════════ RESPONSIVE ═══════════ */ @media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; } .plan.featured { order: -1; box-shadow: inset 0 2px 0 var(--fg); margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding-left: var(--pad); padding-right: var(--pad); } .plan:not(.featured) { border-top: 1px solid var(--line); } .compare th, .compare td { font-size: 13px; padding: 0.65rem 0.4rem; } .compare .compare-mark { width: 6.25rem; } .compare .plan-price { font-size: 1.15rem; } .manifest-item, .track-card > a.manifest-item { grid-template-columns: 3.5rem 1fr; } .track-board--offer { flex-direction: column; } .track-board-offer { width: 100%; min-height: 9.5rem; padding: 1.4rem 1.2rem 1.55rem; flex-direction: column; justify-content: center; text-align: center; } .track-board-offer-one { max-width: 28ch; } .track-board .track-card > a.manifest-item { grid-template-columns: 3.5rem minmax(0, 1fr); } .track-board--starts { grid-template-columns: 1fr; } .track-board-slot { padding: 0 0 1.25rem; border-top: 0; } .manifest-side { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; } .dash-row:has(.dash-art-wrap) { grid-template-columns: 2.75rem 1fr; } .dash-row:has(.dash-art-wrap) .btn, .dash-row:has(.dash-art-wrap) .dash-row-actions { grid-column: 2; justify-self: start; } } @media (max-width: 640px) { :root { --pad: 1rem; } .header-inner { height: auto; min-height: 52px; padding-top: 0.55rem; padding-bottom: 0.55rem; } .hero { padding-top: 2.75rem; } .hero h1 { max-width: none; } .header-nav a { padding: 0.3rem 0.4rem; font-size: 12px; } .plan { padding-top: 1.4rem; padding-bottom: 1.55rem; } .compare th, .compare td { font-size: 12px; } .compare .compare-mark { width: 5.5rem; } .compare .plan-price { font-size: 1.05rem; } } /* ═══════════ LEGAL PAGES ═══════════ */ .legal-doc { max-width: 40rem; margin: 0 auto; padding: 2rem var(--pad) 3.5rem; } .legal-doc h1 { font-size: 1.6rem; letter-spacing: -0.03em; margin: 0.35rem 0 1.25rem; } .legal-body h2 { font-size: 1.05rem; margin: 1.4rem 0 0.45rem; } .legal-body p { color: var(--mute); margin: 0 0 0.75rem; } .legal-incomplete { border: 1px solid var(--warn); color: var(--fg); padding: 0.65rem 0.75rem; margin-bottom: 1rem; } .legal-dl { margin: 1rem 0 1.25rem; } .legal-dl dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-top: 0.65rem; } .legal-dl dd { margin: 0.15rem 0 0; } .about { max-width: 40rem; margin: 0 auto; padding: 2.75rem var(--pad) 4rem; } .about h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 0.35rem 0 0.75rem; } .about .lede { color: var(--mute); font-size: 15px; max-width: 36rem; } .about-banner { margin: 1.35rem 0 0; border: 1px solid var(--fg); line-height: 0; } .about-banner img { display: block; width: 100%; height: auto; } .about-banner picture { display: contents; } .about-body { margin-top: 1.75rem; } .about-body p { color: var(--mute); margin: 0 0 1rem; } .about-body p:last-child { margin-bottom: 0; } .about-cta { margin-top: 2rem; } .contact-page .lede { max-width: 36rem; } .contact-email { margin: 1.25rem 0 1rem; font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.01em; } .contact-email a { color: var(--fg); } /* ═══════════ FIELD MANUAL (/ref) ═══════════ */ .ref-shell { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2.75rem; max-width: 76rem; margin: 0 auto; padding: 0 var(--pad) 4rem; align-items: start; } .ref-tree { position: sticky; top: 4.25rem; max-height: calc(100dvh - 5rem); overflow-y: auto; padding: 2rem 0 1rem; font-size: 14px; } .ref-tree-root { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); text-decoration: none; margin-bottom: 1.15rem; } .ref-tree-root:hover, .ref-tree-root[aria-current="page"] { color: var(--fg); text-decoration: none; } .ref-search { position: relative; margin: 0 0 1.05rem; } .ref-search input { width: 100%; appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.35rem 1.35rem 0.4rem 0; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--fg); outline: none; } .ref-search input::placeholder { color: var(--faint); } .ref-search input:focus { border-bottom-color: var(--fg); } .ref-search input::-webkit-search-cancel-button { appearance: none; } .ref-search-key { position: absolute; right: 0; top: 0.4rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); pointer-events: none; } .ref-search:focus-within .ref-search-key { visibility: hidden; } .ref-hits { list-style: none; margin: 0.35rem 0 0; padding: 0; } .ref-hits a { display: block; padding: 0.45rem 0 0.5rem; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; } .ref-hits a:hover, .ref-hits a[aria-selected="true"] { color: var(--link); text-decoration: none; } .ref-hits strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; } .ref-hits span { display: block; margin-top: 0.12rem; font-size: 12px; line-height: 1.35; color: var(--mute); } .ref-hits mark { background: none; color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .ref-hits-empty { margin: 0.45rem 0 0; font-size: 13px; line-height: 1.4; color: var(--mute); } .ref-tree.is-searching .ref-tree-group { display: none; } .ref-tree-group { margin: 0 0 1.05rem; } .ref-tree-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.3rem; } .ref-tree ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .ref-tree li { margin: 0; } .ref-tree li a { display: block; padding: 0.22rem 0 0.22rem 0.75rem; color: var(--mute); text-decoration: none; line-height: 1.35; } .ref-tree li a:hover { color: var(--fg); text-decoration: none; } .ref-tree li a[aria-current="page"] { color: var(--fg); box-shadow: inset 2px 0 0 var(--fg); } .ref-hero { padding: 2.75rem 0 1.5rem; border-bottom: 1px solid var(--line); } .ref-hero .kicker { margin-bottom: 0.85rem; } .ref-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--fg); } .ref-hero .lede { margin-top: 0.75rem; font-size: 17px; line-height: 1.55; color: var(--fg); max-width: none; } /* Resource banners: full-bleed WebP, no frame. Never add a border. */ .ref-banner { margin: 1.35rem 0 0; line-height: 0; } .ref-banner img { display: block; width: 100%; height: auto; border: 0; background: transparent; } .ref-banner .ref-banner-on-light { display: none; } html[data-theme="light"] .ref-banner .ref-banner-on-dark { display: none; } html[data-theme="light"] .ref-banner .ref-banner-on-light { display: block; } .ref-body { padding-top: 1.75rem; } .ref-story { margin: 0 0 2.75rem; font-size: 17px; line-height: 1.65; } .ref-hole { margin: 0 0 0.3rem; color: var(--fg); } .ref-fill { margin: 0 0 1.35rem; color: var(--mute); } .ref-fill a { font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ref-fill a:hover { text-decoration-thickness: 2px; } .ref-hole a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .ref-pages-head { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 0.15rem; } .ref-index { list-style: none; margin: 0; border-top: 1px solid var(--line); } .ref-index li { border-bottom: 1px solid var(--line); } .ref-index a { display: grid; gap: 0.2rem; padding: 1.15rem 0; color: var(--fg); text-decoration: none; } .ref-index a:hover { text-decoration: none; } .ref-index a:hover strong { text-decoration: underline; text-underline-offset: 2px; } .ref-index strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .ref-index span { color: var(--mute); font-size: 16px; line-height: 1.45; } .ref-snip { margin: 0 0 1.5rem; } .ref-tip { margin: 0; padding: 0.65rem 1.15rem 0.75rem; border: 1px solid var(--line); border-top: 0; background: var(--soft); font-size: 15px; line-height: 1.45; color: var(--fg); } .ref-tip[hidden] { display: none; } [data-theme="dark"] .ref-tip { background: #111; } .ref-tip strong { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--link); margin-bottom: 0.15rem; } .ref-snip figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; } .ref-snip figcaption span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .ref-copy { appearance: none; background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); cursor: pointer; } .ref-copy:hover, .ref-copy:focus-visible { color: var(--fg); } .ref-copy.is-copied { color: var(--ok); } .ref-snip pre { margin: 0; padding: 0.55rem 0; background: var(--soft); border: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.65; color: var(--fg); tab-size: 2; cursor: copy; } [data-theme="dark"] .ref-snip pre { background: #111; } .ref-snip code { display: block; font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; white-space: pre; } .ref-line { display: block; padding: 0 4.5rem 0 1.15rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ref-line.is-empty { min-height: 1.65em; } .ref-snip pre.has-hot .ref-line { color: var(--faint); } .ref-snip pre.has-hot .ref-line.is-hot { color: var(--fg); background: rgba(29, 155, 240, 0.12); box-shadow: inset 2px 0 0 var(--link); } [data-theme="dark"] .ref-snip pre.has-hot .ref-line.is-hot { background: rgba(29, 155, 240, 0.16); } .ref-line.is-hot-start { position: relative; } .ref-line.is-hot-start::after { content: attr(data-hint); position: absolute; right: 0.85rem; top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); pointer-events: none; } .ref-line.is-hot-start.is-copied::after { color: var(--ok); } .ref-gotchas { margin: 2rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line); } .ref-gotchas h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.75rem; } .ref-gotchas ul { margin: 0; padding-left: 1.2rem; } .ref-gotchas li { margin: 0.5rem 0; font-size: 16px; line-height: 1.55; color: var(--fg); max-width: 62ch; } .ref-fields dl { margin: 0; } .ref-fields dt { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--link); margin: 0.85rem 0 0.2rem; } .ref-fields dt:first-child { margin-top: 0; } .ref-fields dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg); max-width: 62ch; } .seo-topics a { color: var(--link); } .ref-docs { margin: 1.75rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; align-items: baseline; } .ref-docs span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .ref-docs a { color: var(--link); } .ref-cta { margin: 1.75rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line); font-size: 16px; } .ref-cta a { color: var(--link); } @media (max-width: 860px) { .ref-shell { grid-template-columns: 1fr; gap: 0; padding-bottom: 3rem; } .ref-tree { position: static; max-height: none; overflow: visible; padding: 1.25rem 0 0.85rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem; border-bottom: 1px solid var(--line); } .ref-tree-root, .ref-search { grid-column: 1 / -1; } .ref-tree-root { margin-bottom: 0.5rem; } .ref-hero { padding-top: 1.75rem; } } /* ═══════════ LIGHT THEME — cider-label print ═══════════ Cream stock, ink etching, one vermillion punch (#F64543). Dark landing and pricing reuse this type with the inverted punch. */ [data-theme="light"] { --serif: Georgia, "Times New Roman", Times, serif; } [data-theme="light"] .logo-word span, [data-theme="dark"] .page-landing .logo-word span, [data-theme="dark"] .page-pricing .logo-word span { color: var(--accent); } [data-theme="light"] .logo-word .logo-plus, [data-theme="dark"] .page-landing .logo-word .logo-plus, [data-theme="dark"] .page-pricing .logo-word .logo-plus { color: var(--fg); } [data-theme="light"] .header-nav a[aria-current="page"], [data-theme="dark"] .page-landing .header-nav a[aria-current="page"], [data-theme="dark"] .page-pricing .header-nav a[aria-current="page"] { color: var(--accent); } [data-theme="light"] footer.site, [data-theme="dark"] .page-landing footer.site, [data-theme="dark"] .page-pricing footer.site { border-top: 3px solid var(--accent); } [data-theme="light"] .section-bar, [data-theme="dark"] .page-landing .section-bar, [data-theme="dark"] .page-pricing .section-bar { border-bottom: 3px solid var(--accent); padding-bottom: 0.55rem; margin-bottom: 0.15rem; align-items: flex-end; } [data-theme="light"] .section-bar h2, [data-theme="dark"] .page-landing .section-bar h2, [data-theme="dark"] .page-pricing .section-bar h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); line-height: 0.95; } [data-theme="light"] .section-bar a, [data-theme="dark"] .page-landing .section-bar a, [data-theme="dark"] .page-pricing .section-bar a { font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--fg); } [data-theme="light"] .section-bar a:hover, [data-theme="dark"] .page-landing .section-bar a:hover, [data-theme="dark"] .page-pricing .section-bar a:hover { color: var(--accent); } [data-theme="light"] .page-hero, [data-theme="light"] .detail-hero, [data-theme="light"] .ref-hero, [data-theme="dark"] .page-pricing .page-hero { border-bottom: 3px solid var(--accent); } [data-theme="light"] .page-head, [data-theme="light"] .thanks { border-bottom-color: var(--accent); border-bottom-width: 3px; } [data-theme="light"] .page-hero h1, [data-theme="light"] .about h1, [data-theme="light"] .auth-card h1, [data-theme="light"] .detail-hero h1, [data-theme="light"] .ref-hero h1, [data-theme="light"] .legal-doc h1, [data-theme="light"] .gift-tip-card h2, [data-theme="light"] .thanks h1, [data-theme="light"] .score-header h1, [data-theme="dark"] .page-pricing .page-hero h1 { font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; line-height: 0.95; } [data-theme="light"] .page-hero h1, [data-theme="light"] .about h1, [data-theme="light"] .ref-hero h1, [data-theme="dark"] .page-pricing .page-hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); } [data-theme="light"] .detail-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); } [data-theme="light"] .auth-card h1, [data-theme="light"] .legal-doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); } [data-theme="light"] .page-head h1 { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; } [data-theme="light"] .page-hero .lede, [data-theme="light"] .about .lede, [data-theme="dark"] .page-pricing .page-hero .lede { color: var(--fg); } [data-theme="light"] .about h1 { padding-bottom: 0.55rem; border-bottom: 3px solid var(--accent); } [data-theme="light"] .auth-card .sub { border-bottom-color: var(--accent); border-bottom-width: 3px; } [data-theme="light"] .contact-email a { color: var(--accent); } [data-theme="light"] .track-card:hover .track-mark, [data-theme="dark"] .page-landing .track-card:hover .track-mark { color: var(--accent); } [data-theme="light"] .track-card:hover .manifest-title, [data-theme="dark"] .page-landing .track-card:hover .manifest-title { color: var(--accent); text-decoration: none; } [data-theme="light"] .badge.free, [data-theme="dark"] .page-landing .badge.free { color: var(--accent); border-color: var(--accent); } [data-theme="light"] .manifest-title, [data-theme="dark"] .page-landing .manifest-title { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; } [data-theme="light"] .seo-step-n, [data-theme="light"] .seo-topic-w, [data-theme="dark"] .page-landing .seo-step-n, [data-theme="dark"] .page-landing .seo-topic-w { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--accent); padding-top: 0.05rem; } [data-theme="light"] .seo-steps h3, [data-theme="light"] .seo-topics strong, [data-theme="light"] .faq-item summary, [data-theme="dark"] .page-landing .seo-steps h3, [data-theme="dark"] .page-landing .seo-topics strong, [data-theme="dark"] .page-landing .faq-item summary, [data-theme="dark"] .page-pricing .faq-item summary { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; font-size: 1.08rem; } [data-theme="light"] .faq-item summary::before, [data-theme="dark"] .page-landing .faq-item summary::before, [data-theme="dark"] .page-pricing .faq-item summary::before { color: var(--accent); font-weight: 700; } [data-theme="light"] .plan.featured, [data-theme="dark"] .page-pricing .plan.featured { box-shadow: inset 0 3px 0 var(--accent); } [data-theme="light"] .plan-tag, [data-theme="dark"] .page-pricing .plan-tag { color: var(--accent); } [data-theme="light"] .plan .plan-price, [data-theme="dark"] .page-pricing .plan .plan-price { font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; } [data-theme="light"] .funnel-card--primary { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } [data-theme="light"] .funnel-title { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; } [data-theme="light"] .progress > span { background: var(--accent); } [data-theme="light"] .field input:focus, [data-theme="light"] .ref-search input:focus { border-bottom-color: var(--accent); } [data-theme="light"] .ref-tree li a[aria-current="page"] { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); } [data-theme="light"] .back-link:hover { color: var(--accent); } [data-theme="light"] .dash-row h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; } /* Landing shout + belly-band. Same layout both themes; punch follows --accent. */ .page-landing .hero { border-bottom: 0; padding-top: 2.75rem; padding-bottom: 2.15rem; } .page-landing .hero .kicker { color: var(--fg); letter-spacing: 0.2em; margin-bottom: 0.7rem; } .page-landing .hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(4.2rem, 13.5vw, 8.1rem); line-height: 0.8; letter-spacing: -0.02em; text-transform: uppercase; color: var(--accent); max-width: none; position: relative; z-index: 2; } .page-landing .hero h1 em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.22em; line-height: 1.15; letter-spacing: -0.02em; text-transform: none; color: var(--fg); margin-top: 0.22em; max-width: 16em; } .page-landing .hero-gap-art { margin-top: 0.85rem; } .page-landing .ascii-frame { border: 0; background: transparent; min-height: 6.5rem; height: clamp(6.5rem, 12vw, 9.5rem); } .page-landing .ascii-art { color: var(--fg); } .page-landing .ascii-statement { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.1vw, 1.35rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--fg); margin-top: 0; margin-bottom: 0.7rem; } .page-landing .hero-side { border-left-color: var(--line); } .page-landing .landing-brief .lede { color: var(--fg); font-size: 16px; line-height: 1.5; } .page-landing .label-band { max-width: none; width: 100%; margin: 0; padding: 0; background: var(--accent); } .page-landing .label-band .funnel-strip { max-width: var(--max); margin: 0 auto; border: 0; border-radius: 0; background: transparent; color: var(--bg); padding: 1.05rem var(--pad); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; } .page-landing .label-band .funnel-strip strong { color: var(--bg); } .page-landing .label-band .btn-amber { background: var(--bg); color: var(--accent); border-color: var(--bg); font-weight: 600; } .page-landing .label-band .btn-amber:hover { background: transparent; color: var(--bg); border-color: var(--bg); } .page-landing .header-nav .btn-primary, .page-pricing .header-nav .btn-primary { color: var(--cta-text); } .page-landing .header-nav .btn-primary:hover, .page-pricing .header-nav .btn-primary:hover { color: var(--cta); } @media (max-width: 860px) { .page-landing .hero-side { border-top-color: var(--line); } .page-landing .hero h1 { font-size: clamp(3.4rem, 18vw, 5.5rem); } [data-theme="light"] .plan.featured, [data-theme="dark"] .page-pricing .plan.featured { box-shadow: inset 0 3px 0 var(--accent); } } /* ═══════════ ACTIVITY HEATMAP (account + flashcards) ═══════════ */ .activity { margin: 2rem 0 2.25rem; } .heatmap-board { display: flex; align-items: flex-start; gap: 6px; } .heatmap-wdays { display: grid; grid-template-rows: 14px repeat(7, 11px); gap: 3px; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; line-height: 11px; color: var(--faint, var(--mute)); padding-top: 0; } .heatmap-month-spacer { display: block; } .heatmap-scroll { overflow-x: auto; flex: 1 1 auto; padding-bottom: 0.35rem; } .heatmap { display: flex; gap: 3px; width: max-content; } .heatmap-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; } .heatmap-month { height: 14px; font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--faint, var(--mute)); white-space: nowrap; overflow: visible; } .heatmap-week { display: flex; flex-direction: column; gap: 3px; } .heatmap-day { width: 11px; height: 11px; border-radius: 0; background: #222; border: 0; display: inline-block; flex: 0 0 auto; } .heatmap-day--empty { background: transparent; } .heatmap-day.heat-1 { background: #3a3a3a; } .heatmap-day.heat-2 { background: #6a6a6a; } .heatmap-day.heat-3 { background: #a3a3a3; } .heatmap-day.heat-4 { background: #ededed; } .heatmap-day.kind-practice, .heatmap-day.kind-both { box-shadow: inset 2px 0 0 var(--fg); } .heatmap-legend { display: flex; align-items: center; gap: 4px; margin: 0.35rem 0 0; font-family: var(--mono); font-size: 10px; color: var(--faint, var(--mute)); } .heatmap-legend .heatmap-day { flex: 0 0 auto; } @media (max-width: 720px) { /* Overflowing year: start on the recent weeks. */ .heatmap-scroll { direction: rtl; } .heatmap { direction: ltr; } } [data-theme="light"] .heatmap-day { background: #E4DCCD; } [data-theme="light"] .heatmap-day.heat-1 { background: #F7C9C8; } [data-theme="light"] .heatmap-day.heat-2 { background: #F48A88; } [data-theme="light"] .heatmap-day.heat-3 { background: #F64543; } [data-theme="light"] .heatmap-day.heat-4 { background: #C41E1C; } [data-theme="light"] .heatmap-day.kind-practice.heat-1 { background: #C9C2B4; } [data-theme="light"] .heatmap-day.kind-practice.heat-2 { background: #8A8378; } [data-theme="light"] .heatmap-day.kind-practice.heat-3 { background: #5A534A; } [data-theme="light"] .heatmap-day.kind-practice.heat-4 { background: #161412; } [data-theme="light"] .heatmap-day.kind-practice, [data-theme="light"] .heatmap-day.kind-both { box-shadow: inset 2px 0 0 #161412; }