@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ LedgerKit — design system v2.1 Built from computed styles pulled off Linear, Mercury, Stripe, and Anthropic. Seven principles those four share: 1. Black is never neutral. Linear #08090A · Mercury #171721 (blue-black) · Anthropic #141413 (warm) 2. Paper is never pure white. #FAF9F5 · #EDEDF3 · #F8FAFD 3. Display type gets LIGHTER, not bolder. Stripe runs h1 at weight 300. Mercury 480. Linear 510. Never 700. 4. Tight negative tracking on display: -0.022em to -0.032em. 5. ONE saturated accent, used sparingly and at full chroma. 6. Surfaces are alpha overlays on the base, not new solid hues. 7. Radii pick a lane and hold it. Stripe 4-6px. Linear 16px. THEMES — data-theme on : ledger | meridian | vellum MODE — data-mode on : (default light) | dark Light is the DEFAULT and does not follow the OS setting. Dark is opt-in via data-mode="dark" so the warm paper stays the identity. ============================================================ */ /* ------------------------------------------------------------ THEME 1 · LEDGER (default) Warm ivory, pine, brass — set in Inter. Reads: established, careful, paper. Modern, not antique. ------------------------------------------------------------ */ :root, :root[data-theme="ledger"] { --paper:#FAF8F3; --raise:#F2EEE5; --card:#FFFDF9; --line:#E6DFD3; --text:#191712; --muted:#5C5649; --faint:#7C7566; --accent:#1F5D48; --accent-2:#2A7A5E; --accent-fg:#FAF8F3; --accent-soft:rgba(31,93,72,.10); --accent-line:rgba(31,93,72,.28); --second:#8F6521; --second-soft:rgba(143,101,33,.12); --ink:#16150F; --on-ink:#F4F1E9; --on-ink-mu:#BAB2A2; /* Accents legible ON --ink. Dark bands render dark in BOTH modes, so they can't use --accent-2 (which is dark in light mode). */ --ink-accent:#6BBF9D; --ink-second:#D2A455; --display:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; --display-wght:300; --display-var:normal; --display-track:-0.032em; --h3-wght:560; } :root[data-mode="dark"], :root[data-theme="ledger"][data-mode="dark"] { --paper:#12110D; --raise:#211E18; --card:#1B1914; --line:#322E26; --text:#F0EDE5; --muted:#A79F91; --faint:#8B8375; --accent:#4FA383; --accent-2:#6BBF9D; --accent-fg:#0E1712; --accent-soft:rgba(79,163,131,.14); --accent-line:rgba(79,163,131,.32); --second:#D2A455; --second-soft:rgba(210,164,85,.14); --ink:#0C0B08; --on-ink:#F0EDE5; --on-ink-mu:#B0A897; } /* ------------------------------------------------------------ THEME 2 · MERIDIAN Blue-black, indigo, lavender-white. Reads: modern, technical. ------------------------------------------------------------ */ :root[data-theme="meridian"] { --paper:#FBFBFE; --raise:#F1F1F7; --card:#FFFFFF; --line:#E4E4EF; --text:#14141F; --muted:#525268; --faint:#71718C; --accent:#4F46E5; --accent-2:#6D63FF; --accent-fg:#FFFFFF; --accent-soft:rgba(79,70,229,.09); --accent-line:rgba(79,70,229,.26); --second:#C43D66; --second-soft:rgba(196,61,102,.10); --ink:#14141F; --on-ink:#EDEDF3; --on-ink-mu:#ADADC4; --ink-accent:#A9A7FF; --ink-second:#FC92B4; --display:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; --display-wght:300; --display-var:normal; --display-track:-0.032em; --h3-wght:560; } :root[data-theme="meridian"][data-mode="dark"] { --paper:#0C0C14; --raise:#1D1D28; --card:#16161F; --line:#2A2A38; --text:#EDEDF3; --muted:#9C9CB4; --faint:#7E7E98; --accent:#7F7DFC; --accent-2:#9D9BFF; --accent-fg:#0C0C14; --accent-soft:rgba(127,125,252,.13); --accent-line:rgba(127,125,252,.30); --second:#FC92B4; --second-soft:rgba(252,146,180,.13); --ink:#08080E; --on-ink:#EDEDF3; --on-ink-mu:#ADADC4; } /* ------------------------------------------------------------ THEME 3 · VELLUM Bone, oxblood, gold — set in Instrument Serif. Reads: letterpress, law library, old firm. ------------------------------------------------------------ */ :root[data-theme="vellum"] { --paper:#F6F2EA; --raise:#EDE6D9; --card:#FFFCF6; --line:#DED4C2; --text:#1C1815; --muted:#59503F; --faint:#796F60; --accent:#7B2B33; --accent-2:#9A3A42; --accent-fg:#F9F5EE; --accent-soft:rgba(123,43,51,.09); --accent-line:rgba(123,43,51,.26); --second:#8A6A26; --second-soft:rgba(138,106,38,.13); --ink:#1C1815; --on-ink:#F2EBE0; --on-ink-mu:#BCAF9E; --ink-accent:#E29AA0; --ink-second:#DFBA6E; --display:"Instrument Serif",Georgia,serif; --display-wght:400; --display-var:normal; --display-track:-0.022em; --h3-wght:400; } :root[data-theme="vellum"][data-mode="dark"] { --paper:#14110E; --raise:#251F1A; --card:#1E1A16; --line:#372F27; --text:#F2EBE0; --muted:#A99C8C; --faint:#8C8070; --accent:#C4636C; --accent-2:#D97F87; --accent-fg:#17100F; --accent-soft:rgba(196,99,108,.14); --accent-line:rgba(196,99,108,.32); --second:#D9B061; --second-soft:rgba(217,176,97,.14); --ink:#0F0C0A; --on-ink:#F2EBE0; --on-ink-mu:#B5A894; } /* ---- tokens that don't change per theme ---- */ :root { --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace; /* Principle 7: one radius lane, held. */ --r-sm:5px; --r:8px; --r-lg:14px; --r-pill:100px; /* Principle 6: shadows are barely there; depth comes from tone. */ --shadow:0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03); --shadow-lg:0 1px 3px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.07); --wrap:1140px; --ease:cubic-bezier(.22,1,.36,1); } :root[data-mode="dark"] { --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4); } /* ============================ base ============================ */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; font-family:var(--sans); font-size:16.5px; font-weight:400; line-height:1.62; letter-spacing:-0.005em; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"kern" 1,"liga" 1,"calt" 1; } img,svg { max-width:100%; display:block; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:2px; } ::selection { background:var(--accent); color:var(--accent-fg); } /* Principles 3 + 4: display type is light and tightly tracked. */ h1,h2,h3,h4 { font-family:var(--display); font-weight:var(--display-wght); font-variation-settings:var(--display-var); line-height:1.08; letter-spacing:var(--display-track); margin:0 0 .5em; color:var(--text); text-wrap:balance; } h1 { font-size:clamp(2.5rem,5.6vw,4.2rem); } h2 { font-size:clamp(1.8rem,3.7vw,2.75rem); } h3 { font-size:1.14rem; line-height:1.32; letter-spacing:-0.018em; font-weight:var(--h3-wght); } p { margin:0 0 1em; } .wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; } .narrow { max-width:760px; } section { padding:88px 0; } .section-tight { padding:52px 0; } .eyebrow { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin:0 0 1em; } .lede { font-size:1.16rem; line-height:1.6; color:var(--muted); max-width:60ch; letter-spacing:-0.01em; } .center { text-align:center; } /* .lede is capped at 60ch, so centering its TEXT is not enough - the box itself must be centered too. Match both the descendant case (.lede inside a .center wrapper) and the case where .center sits on the .lede element itself, which otherwise leaves a left-hugging box with centered text inside it. */ .center .lede, .lede.center { margin-inline:auto; } /* ============================ buttons ============================ */ .btn { display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:-0.01em; padding:.74em 1.4em; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); text-decoration:none !important; white-space:nowrap; } .btn:active { transform:scale(.985); } .btn-primary { background:var(--accent); color:var(--accent-fg); } .btn-primary:hover { background:var(--accent-2); } .btn-ghost { background:transparent; color:var(--text); border-color:var(--line); } .btn-ghost:hover { background:var(--raise); border-color:var(--faint); } .btn-dark { background:var(--ink); color:var(--on-ink); } .btn-dark:hover { opacity:.88; } .btn-lg { font-size:.98rem; padding:.88em 1.75em; } .btn-block { width:100%; justify-content:center; } .btn-row { display:flex; flex-wrap:wrap; gap:11px; } .center .btn-row { justify-content:center; } /* ============================ header ============================ */ .site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line); } .nav { display:flex; align-items:center; gap:30px; height:64px; } .brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:1.24rem; font-weight:var(--h3-wght); font-variation-settings:var(--display-var); letter-spacing:-0.03em; color:var(--text); text-decoration:none !important; } /* The LK monogram. Two files because the mark is raster, not SVG: mark-site (warm-black + pine) reads on the ivory paper; mark-brand (navy + teal) is the original palette and holds up on the dark bands. */ .brand-mark { width:26px; height:26px; flex:0 0 auto; display:block; object-fit:contain; } .brand-word b { font-weight:inherit; color:var(--accent); } .site-footer .brand-word b { color:var(--ink-accent); } .nav-links { display:flex; gap:26px; margin-left:auto; align-items:center; } /* :not(.btn) matters — `.nav-links a` (0,1,1) outranks `.btn-primary` (0,1,0), so without it the header CTA renders muted-on-accent. */ .nav-links a:not(.btn) { color:var(--muted); font-size:.9rem; font-weight:450; letter-spacing:-0.01em; text-decoration:none !important; transition:color .18s var(--ease); } .nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color:var(--text); } .nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; cursor:pointer; color:var(--text); font-size:1rem; line-height:1; } @media (max-width:880px) { .nav-toggle { display:block; } .nav-links { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--card); border-bottom:1px solid var(--line); padding:8px 24px 18px; box-shadow:var(--shadow-lg); } .nav-links.open { display:flex; } .nav-links a:not(.btn) { padding:12px 0; border-bottom:1px solid var(--line); } .nav-links .btn { margin-top:12px; justify-content:center; } } /* ============================ hero ============================ */ .hero { padding:104px 0 84px; position:relative; overflow:hidden; } .hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(680px 380px at 78% -6%, var(--accent-soft), transparent 68%), radial-gradient(520px 320px at 4% 2%, var(--second-soft), transparent 70%); } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; } @media (max-width:960px) { .hero-grid { grid-template-columns:1fr; gap:44px; } } .hero h1 { margin-bottom:.28em; } .hero .lede { font-size:1.2rem; } .trust-row { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px; font-size:.875rem; color:var(--muted); letter-spacing:-0.005em; } .trust-row span { display:flex; align-items:center; gap:7px; } .tick { color:var(--accent); font-weight:600; } /* ============================ code preview ============================ */ .preview { background:var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.06); } .preview-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.07); } .dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); } .preview-name { margin-left:8px; font-family:var(--mono); font-size:.72rem; color:var(--on-ink-mu); letter-spacing:0; } .preview-body { padding:20px 22px 24px; font-family:var(--mono); font-size:.775rem; line-height:1.8; color:var(--on-ink); white-space:pre-wrap; margin:0; max-height:400px; overflow:hidden; letter-spacing:0; } .c-key { color:var(--ink-accent); } .c-cmt { color:var(--on-ink-mu); } .c-str { color:var(--ink-second); } /* ============================ grids & cards ============================ */ .grid { display:grid; gap:20px; } .g-2 { grid-template-columns:repeat(2,1fr); } .g-3 { grid-template-columns:repeat(3,1fr); } .g-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:960px) { .g-3,.g-4 { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px) { .g-2,.g-3,.g-4 { grid-template-columns:1fr; } } .card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow); } .card h3 { margin-bottom:.45em; } .card p { color:var(--muted); font-size:.95rem; } .card p:last-child { margin-bottom:0; } .card-num { font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--accent); letter-spacing:.06em; margin-bottom:16px; display:block; } /* ============================ product cards ============================ */ .product-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); text-decoration:none !important; color:inherit; transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .product-card:hover { transform:translateY(-2px); border-color:var(--accent-line); box-shadow:var(--shadow-lg); } .product-card h3 { font-size:1.04rem; margin:0; } .product-card .blurb { font-size:.895rem; color:var(--muted); margin:0; flex:1; line-height:1.55; } .product-foot { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); margin-top:2px; } .price { font-family:var(--display); font-size:1.28rem; font-weight:var(--h3-wght); font-variation-settings:var(--display-var); letter-spacing:-0.035em; } .price small { font-family:var(--sans); font-size:.72rem; color:var(--faint); font-weight:400; letter-spacing:0; } /* ============================ tags ============================ */ .tags { display:flex; flex-wrap:wrap; gap:6px; } .tag { font-family:var(--sans); font-size:.685rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-sm); border:1px solid var(--line); color:var(--muted); background:transparent; white-space:nowrap; } .tag-accent { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); } .tag-gold { color:var(--second); background:var(--second-soft); border-color:color-mix(in srgb,var(--second) 30%,transparent); } /* ============================ filters ============================ */ .filters { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:28px; box-shadow:var(--shadow); } .filter-row { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; } .filter-row + .filter-row { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .filter-label { font-size:.685rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); min-width:82px; } .chip { font-family:var(--sans); font-size:.845rem; font-weight:450; letter-spacing:-0.008em; padding:5.5px 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:all .18s var(--ease); } .chip:hover { border-color:var(--faint); color:var(--text); } .chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:500; } .search-input { flex:1; min-width:220px; padding:9px 14px; font-size:.92rem; font-family:var(--sans); border:1px solid var(--line); border-radius:var(--r); background:var(--paper); color:var(--text); letter-spacing:-0.008em; } .search-input::placeholder { color:var(--faint); } .search-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .result-count { font-size:.875rem; color:var(--faint); margin-bottom:18px; } /* ============================ product detail ============================ */ .detail-grid { display:grid; grid-template-columns:1fr 336px; gap:52px; align-items:start; } @media (max-width:960px) { .detail-grid { grid-template-columns:1fr; gap:34px; } } .buy-box { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-lg); position:sticky; top:88px; } .buy-price { font-family:var(--display); font-size:2.7rem; line-height:1; font-weight:var(--display-wght); font-variation-settings:var(--display-var); letter-spacing:-0.04em; margin-bottom:6px; } .spec { display:flex; justify-content:space-between; gap:14px; padding:10px 0; font-size:.875rem; border-bottom:1px solid var(--line); } .spec:last-child { border-bottom:0; } .spec dt { color:var(--faint); } .spec dd { margin:0; text-align:right; font-weight:450; } .checklist { list-style:none; padding:0; margin:0 0 1.2em; } .checklist li { position:relative; padding-left:26px; margin-bottom:10px; color:var(--muted); font-size:.95rem; line-height:1.55; } .checklist li::before { content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); } .breadcrumb { font-size:.85rem; color:var(--faint); margin-bottom:20px; } .breadcrumb a { color:var(--muted); } /* ============================ pricing ============================ */ .tier { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative; } .tier.featured { border-color:var(--accent); box-shadow:var(--shadow-lg); } .tier-flag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-fg); font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:4px 12px; border-radius:var(--r-pill); } .tier-price { font-family:var(--display); font-size:2.9rem; line-height:1; font-weight:var(--display-wght); font-variation-settings:var(--display-var); letter-spacing:-0.042em; margin:14px 0 6px; } .tier-price small { font-family:var(--sans); font-size:.85rem; color:var(--faint); font-weight:400; letter-spacing:0; } .tier .checklist { flex:1; margin-top:18px; } /* ============================ bands ============================ */ .band-dark { background:var(--ink); color:var(--on-ink); } .band-dark h1,.band-dark h2,.band-dark h3 { color:var(--on-ink); } .band-dark p,.band-dark .lede { color:var(--on-ink-mu); } .band-dark .eyebrow { color:var(--ink-accent); } .band-dark a { color:var(--ink-accent); } .band-dark .checklist li { color:var(--on-ink-mu); } .band-dark .checklist li::before { background:var(--ink-accent); } .band-dark .btn-primary { background:var(--ink-accent); color:var(--ink); } .band-dark .btn-primary:hover { filter:brightness(1.08); } .band-dark .btn-ghost { color:var(--on-ink); border-color:rgba(255,255,255,.24); } .band-dark .btn-ghost:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.4); } /* Principle 6: surfaces on dark are alpha overlays, not new hues. */ .band-dark .card { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.09); box-shadow:none; } .band-dark .card:hover { background:rgba(255,255,255,.055); } .band-dark .card h3 { color:var(--on-ink); } .band-dark .card p { color:var(--on-ink-mu); } .band-dark .card-num { color:var(--ink-accent); } .band-raise { background:var(--raise); } /* ============================ faq ============================ */ .faq-item { border-bottom:1px solid var(--line); } .faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--display); font-size:1.06rem; font-weight:var(--h3-wght); font-variation-settings:var(--display-var); letter-spacing:-0.02em; color:var(--text); padding:20px 36px 20px 0; position:relative; line-height:1.35; transition:color .18s var(--ease); } .faq-q:hover { color:var(--accent); } .faq-q::after { content:""; position:absolute; right:8px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg); transition:transform .24s var(--ease); } .faq-item.open .faq-q::after { transform:rotate(-135deg); margin-top:-2px; } .faq-a { display:none; padding:0 44px 22px 0; color:var(--muted); font-size:.95rem; } .faq-item.open .faq-a { display:block; } .faq-a p:last-child { margin-bottom:0; } /* ============================ notice ============================ */ .notice { border-left:2px solid var(--second); background:var(--second-soft); padding:16px 20px; border-radius:0 var(--r) var(--r) 0; font-size:.92rem; color:var(--muted); line-height:1.6; } .notice strong { color:var(--text); font-weight:550; } /* ============================ footer ============================ */ .site-footer { background:var(--ink); color:var(--on-ink-mu); padding:64px 0 32px; } .footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; } @media (max-width:840px) { .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width:520px) { .footer-grid { grid-template-columns:1fr; } } .site-footer .brand { color:var(--on-ink); } .footer-col h4 { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-mu); margin-bottom:15px; } .footer-col ul { list-style:none; padding:0; margin:0; } .footer-col li { margin-bottom:10px; } .footer-col a { color:var(--on-ink); font-size:.89rem; opacity:.78; transition:opacity .18s var(--ease); } .footer-col a:hover { opacity:1; } .footer-bottom { margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; } .footer-bottom a { color:var(--ink-accent); } .footer-note { max-width:600px; font-size:.875rem; line-height:1.6; opacity:.8; margin-top:16px; } /* ============ theme switcher — PREVIEW ONLY ============ Remove this block + initThemeSwitch() in site.js before launch. */ .theme-switch { position:fixed; bottom:20px; right:20px; z-index:100; display:flex; align-items:center; gap:3px; padding:5px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-lg); } .theme-switch b { font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); padding:0 7px 0 10px; } .theme-switch button { font-family:var(--sans); font-size:.78rem; font-weight:450; padding:6px 12px; border-radius:var(--r-pill); border:0; cursor:pointer; background:transparent; color:var(--muted); transition:all .18s var(--ease); } .theme-switch button:hover { color:var(--text); } .theme-switch button.on { background:var(--accent); color:var(--accent-fg); font-weight:500; } .theme-switch .sep { width:1px; height:18px; background:var(--line); margin:0 4px; } @media (max-width:700px) { .theme-switch b { display:none; } .theme-switch button { padding:6px 9px; font-size:.72rem; } } /* ============================ email capture ============================ */ .signup { margin:0; } .signup-row { display:flex; gap:9px; flex-wrap:wrap; } .signup-input { flex:1; min-width:200px; padding:.72em 1em; font-size:.93rem; font-family:var(--sans); letter-spacing:-0.008em; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:var(--r); } .signup-input::placeholder { color:var(--faint); } .signup-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .signup-msg { margin:10px 0 0; font-size:.86rem; line-height:1.5; min-height:0; } .signup-msg:empty { display:none; } .signup-msg.is-err { color:var(--accent); } .signup-msg.is-ok { color:var(--muted); } .signup-fine { margin:10px 0 0; font-size:.78rem; line-height:1.5; color:var(--faint); } /* panel — home page block */ .signup-panel { max-width:520px; } .signup-panel .signup-input { padding:.85em 1.1em; font-size:.98rem; } /* compact — footer */ .footer-signup { margin-top:26px; max-width:340px; } .footer-signup h4 { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-mu); margin:0 0 12px; } .signup-compact .signup-input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--on-ink); min-width:0; font-size:.88rem; } .signup-compact .signup-input::placeholder { color:var(--on-ink-mu); } .signup-compact .btn { background:var(--ink-accent); color:var(--ink); font-size:.86rem; padding:.6em 1.1em; } .signup-compact .signup-fine { color:var(--on-ink-mu); opacity:.75; font-size:.74rem; } .signup-compact .signup-msg.is-ok, .signup-compact .signup-msg.is-err { color:var(--on-ink); } /* notify — coming-soon buy box */ .signup-notify .signup-row { flex-direction:column; } .signup-notify .signup-input { width:100%; } .signup-notify .btn { width:100%; justify-content:center; } /* ============================ coming soon ============================ */ .tag-soon { color:var(--second); background:var(--second-soft); border-color:color-mix(in srgb, var(--second) 34%, transparent); } .product-card.is-soon { border-style:dashed; } .product-card.is-soon .price { color:var(--muted); } .tier.is-soon { border-style:dashed; } .tier-flag-soon { background:var(--second); color:var(--paper); } /* ============================ background art ============================ Abstract ledger geometry — fixed behind everything, never interactive. Inline SVG (injected by site.js) so strokes follow the active theme. */ .bg-art { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; user-select:none; } /* ============================ misc ============================ */ .empty { text-align:center; padding:64px 20px; color:var(--muted); } .stack > * + * { margin-top:14px; } .hr { height:1px; background:var(--line); border:0; margin:0; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } html { scroll-behavior:auto; } }