/* Makoauto — shared design tokens */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Zeyada&display=swap'); :root { color-scheme: light; --bg: #F5F0E3; --bg-2: #EDE6D3; --ink: #0F0F0F; --ink-soft: #2A2A2A; --muted: #6B6558; --line: #0F0F0F; --paper: #FFFBF0; --lime: #C6F24E; --pink: #FF4D8D; --cobalt: #2E4CFF; --tangerine: #FF8A3D; --lavender: #C9B8FF; --silver: linear-gradient(135deg,#E8E8E8 0%,#B8B8B8 40%,#FFFFFF 55%,#9A9A9A 100%); --gold: linear-gradient(135deg,#F9D77B 0%,#B8862E 45%,#FFF1B8 60%,#8C5F1A 100%); --black-chrome: linear-gradient(135deg,#4A4A4A 0%,#0A0A0A 45%,#6B6B6B 60%,#000 100%); --rose: linear-gradient(135deg,#F7C7C1 0%,#B8685A 45%,#FFE3DD 60%,#8A4A3E 100%); --radius-lg: 22px; --radius-md: 14px; --radius-sm: 8px; --shadow-hard: 4px 4px 0 0 var(--ink); --shadow-hard-lg: 6px 6px 0 0 var(--ink); --shadow-soft: 0 10px 30px rgba(15,15,15,0.08); --border: 2px solid var(--ink); --border-thick: 3px solid var(--ink); } /* ─── Dark mode ──────────────────────────────────────────────── Activated by setting data-theme="dark" on . We override the neutral tokens (bg / paper / ink / muted) and let the existing var(--ink) borders + shadows reinterpret as cream-on-dark, which keeps the neobrutalist outlined-block look intact. Brand accents (lime / pink / cobalt) stay identical. */ [data-theme="dark"] { color-scheme: dark; --bg: #0E0D0A; /* warm near-black, the cream paper hue inverted */ --bg-2: #19170F; --ink: #F2EDDC; /* cream foreground */ --ink-soft: #D8D2BD; --muted: #9B9277; --line: #F2EDDC; /* === --ink, so 1.5px solid var(--line) borders stay visible */ --paper: #1A1812; /* card surface — one notch lighter than --bg */ /* Constants — colors that should NOT invert. Used for text on colored fills (pink / cobalt / ink buttons + cards) and for the always-dark text on lime/yellow fills. Reference these via the fixed-text overrides below. */ --on-color-light: #FFFBF0; --on-color-dark: #0F0F0F; } /* Text-on-colored-fill: in light mode these read color: var(--paper) or var(--ink). In dark mode --paper flips dark and --ink flips light, so we pin them back to fixed values wherever they sit on a brand-accent fill. */ [data-theme="dark"] .btn.pink, [data-theme="dark"] .btn.cobalt, [data-theme="dark"] .step:nth-child(2), [data-theme="dark"] .step:nth-child(3), [data-theme="dark"] .step:nth-child(2) h3, [data-theme="dark"] .step:nth-child(3) h3, [data-theme="dark"] .channel:nth-child(2) .icon, [data-theme="dark"] .channel:nth-child(3) .icon, [data-theme="dark"] .sticker.s1, [data-theme="dark"] .sticker.s2, [data-theme="dark"] .faq-hero, [data-theme="dark"] .faq-hero h1, [data-theme="dark"] .faq-hero p, [data-theme="dark"] .stage-toolbar .ttl-btn.danger:hover, [data-theme="dark"] .pattern-controls button:hover, [data-theme="dark"] .hole .placed-pin.remove-hint::after, [data-theme="dark"] .t-step.current .t-dot, [data-theme="dark"] .status-pill.assembling, [data-theme="dark"] .pink, /* sitemap.html group */ [data-theme="dark"] .pink h2, [data-theme="dark"] .cobalt, /* sitemap.html group */ [data-theme="dark"] .cobalt h2 { color: var(--on-color-light) !important; } [data-theme="dark"] .step:nth-child(2) p, [data-theme="dark"] .step:nth-child(3) p, [data-theme="dark"] .pink p, [data-theme="dark"] .cobalt p { color: rgba(255,251,240,.85) !important; } /* Lime fills: text must STAY dark (cream-on-lime is unreadable). */ [data-theme="dark"] .step:nth-child(1), [data-theme="dark"] .step:nth-child(1) h3, [data-theme="dark"] .sticker.s3, [data-theme="dark"] .price-card[style*="lime"], [data-theme="dark"] .price-card[style*="lime"] .price, [data-theme="dark"] .price-card[style*="lime"] li, [data-theme="dark"] .lime, [data-theme="dark"] .lime h2 { color: var(--on-color-dark) !important; } [data-theme="dark"] .step:nth-child(1) p, [data-theme="dark"] .lime p { color: rgba(15,15,15,.7) !important; } [data-theme="dark"] .price-card[style*="lime"] .mono { color: rgba(15,15,15,.65) !important; } [data-theme="dark"] .price-card[style*="lime"] li { border-bottom-color: rgba(15,15,15,.3) !important; } [data-theme="dark"] .price-card[style*="lime"] li::before { color: var(--on-color-dark) !important; } /* POPULAR chip on the lime card carries inline color:var(--lime); override because cream bg (inverted --ink) + lime text reads at ~1.1 contrast. */ [data-theme="dark"] .price-card[style*="lime"] .chip { color: var(--on-color-dark) !important; background: var(--on-color-dark) !important; } [data-theme="dark"] .price-card[style*="lime"] .chip { color: var(--lime) !important; background: #0F0F0F !important; border-color: #0F0F0F !important; } /* .cta-block: bg=var(--ink) flips to cream in dark, color=var(--bg) flips to dark — h2 reads. But its

has a hard-coded cream-alpha that becomes cream-on-cream. Re-tone to dark-alpha. */ [data-theme="dark"] .cta-block p { color: rgba(15,15,15,.65) !important; } /* Status pills assembled/queued on a cream bg in dark mode — keep dark text */ [data-theme="dark"] .status-pill.queued { color: var(--on-color-dark) !important; } /* Sitemap lime card sub-text */ [data-theme="dark"] .lime p { color: rgba(15,15,15,.7) !important; } [data-theme="dark"] .btn.primary { /* lime fill, always dark text */ color: var(--on-color-dark); } /* The lime-filled "POPULAR" pricing card on index.html sets color via inline style on its inner chip; the card body itself inherits from body. Force its inner text to dark since the bg is lime. */ [data-theme="dark"] .price-card[style*="lime"] { color: var(--on-color-dark); } [data-theme="dark"] .price-card[style*="lime"] .mono { color: rgba(15,15,15,.65) !important; } /* The dark "CTA block" on index.html: in light mode it's dark cream-on-dark already; in dark mode the inverted --bg makes its body bg dark too, but we keep cream text via the rule above. Tighten its inner muted line: */ [data-theme="dark"] .cta-block p { color: rgba(255,251,240,.7); } /* Solid-ink fills used as backgrounds in some places (.btn default, .stepper .s.active, etc.) — in dark mode --ink is cream, so any element that originally read "dark bg, light text" now reads correctly as "cream bg, dark text" because color: var(--bg) inverts in parallel. ✓ */ /* Smooth crossfade when toggling */ html { transition: background-color .25s ease, color .25s ease; } body, .card, .topbar, .btn, .chip, .lang, .tag, .filters, .set-card, .post-card, .channel, .form-card, .story-card, .gallery-card, .price-card, .step, .pay, .faq-quick a, details, .promo input, .field input, .field select, .form-row input, .form-row select, .form-row textarea { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* Page-level scoped overrides for spots that hard-code light values (white photo bg on FAQ, etc.) */ [data-theme="dark"] .faq-hero .photo { background-color: var(--bg-2) !important; } [data-theme="dark"] .lang-switcher { background: var(--paper) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--muted); } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-2); } /* Decorative halftone — invert the dot color so it reads against dark bg */ [data-theme="dark"] .halftone { background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.4px); } /* .btn / .btn.ghost already use var(--ink) + var(--bg) for their fill + text — those invert automatically. The shadow uses var(--shadow-hard) which references --ink, so cream offset blocks show against the dark bg. No per-element overrides needed. */ /* CA license-plate demo stays light (it's depicting a real white plate) */ .demo-plate, .demo-plate .plate-inner { color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; min-height: 100dvh; } /* iOS: avoid page zoom on focus; keep desktop sizes unchanged */ @media (max-width: 720px) { input, select, textarea, .field input, .field select, .search-box input, .promo input { font-size: 16px !important; } } h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; margin: 0; } .mono { font-family: 'JetBrains Mono', monospace; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: var(--border-thick); border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-family: 'Space Grotesk', sans-serif; box-shadow: var(--shadow-hard); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; font-size: 15px; } .btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--ink); } .btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 0 var(--ink); } .btn.primary { background: var(--lime); color: var(--ink); } .btn.pink { background: var(--pink); color: var(--paper); } .btn.cobalt { background: var(--cobalt); color: var(--paper); } .btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: var(--border); } .btn.ghost:hover { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-hard); } .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: var(--border); border-radius: 999px; background: var(--paper); font-size: 12px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; } .card { background: var(--paper); border: var(--border-thick); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard-lg); } .sticker { position: absolute; background: var(--lime); border: var(--border-thick); border-radius: 999px; padding: 8px 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-hard); } /* Global top bar */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: var(--border-thick); padding: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; } .topbar .site-badge { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--muted); text-decoration: none; padding: 4px 8px; border: 1.5px solid var(--muted); border-radius: 999px; flex: 0 0 auto; } .topbar .site-badge:hover { color: var(--ink); border-color: var(--ink); } .topbar .logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } .topbar .logo::before { content: ""; width: 18px; height: 18px; background: var(--lime); border: var(--border-thick); border-radius: 50%; display: inline-block; } .topbar nav { display: flex; flex-wrap: nowrap; gap: 4px; margin-left: 16px; min-width: 0; } .topbar nav a { color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; } .topbar nav a:hover { background: var(--ink); color: var(--bg); } .topbar nav a.active { background: var(--ink); color: var(--bg); } .topbar .right { margin-left: auto; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; flex: 0 0 auto; max-width: 100%; } @media (max-width: 900px) { .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; } .topbar .site-badge { display: none; } .topbar .logo { grid-column: 1; grid-row: 1; min-width: 0; } .topbar .right { grid-column: 2; grid-row: 1; margin-left: 0; } .topbar nav { grid-column: 1 / -1; grid-row: 2; margin-left: 0; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; border-bottom: 1px solid rgba(15, 15, 15, 0.08); } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a { min-height: 44px; } } @media (max-width: 420px) { .topbar .right { max-width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 6px; } .topbar { justify-items: stretch; } .topbar .logo { grid-column: 1 / -1; } .topbar .right { grid-column: 1 / -1; grid-row: 2; justify-content: center; } .topbar nav { grid-row: 3; } } .lang { font-family: 'JetBrains Mono', monospace; font-size: 12px; border: var(--border); border-radius: 999px; padding: 6px 10px; background: var(--paper); cursor: pointer; } /* License plate frame base visual */ .plate-frame { position: relative; background: #0B0B0B; border-radius: 16px; padding: 28px; aspect-ratio: 12/6.5; /* California plate proportion for frame */ box-shadow: inset 0 0 0 2px #1a1a1a, 0 20px 40px rgba(0,0,0,.25), 0 0 0 3px #0F0F0F; } .plate-frame .plate-inner { background: linear-gradient(180deg,#F8F5E8,#EADFBE); border-radius: 8px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(24px, 6vw, 72px); color: #1F3A8A; letter-spacing: .08em; position: relative; border: 2px solid #111; } .plate-frame .plate-inner::before { content: "California"; position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-family: 'Space Grotesk', sans-serif; font-style: italic; font-size: .22em; color: #B02A30; font-weight: 600; } /* Utility */ .row { display: flex; gap: 16px; align-items: center; } .col { display: flex; flex-direction: column; gap: 12px; } .grid { display: grid; gap: 16px; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Tag (for catalog pins) */ .tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); border: 1.5px solid var(--ink); font-size: 11px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; } /* Halftone / decoration */ .halftone { background-image: radial-gradient(var(--ink) 1px, transparent 1.4px); background-size: 8px 8px; } /* scrollbar — minimal */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; } ::-webkit-scrollbar-track { background: var(--bg-2); } /* Keyboard focus — visible only for keyboard / assistive tech */ .btn:focus:not(:focus-visible), .topbar nav a:focus:not(:focus-visible), .chip:focus:not(:focus-visible), .lang-btn:focus:not(:focus-visible) { outline: none; } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .topbar nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; } .chip:focus-visible, .lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* reduce motion: marquee + any decorative page animations (e.g. preview streak) */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; } .light-streak { animation: none !important; } } .topbar .lang-btn { min-height: 36px; min-width: 2rem; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .topbar .right .lang-btn { min-height: 40px; padding-left: 10px; padding-right: 10px; } .topbar .right .btn { min-height: 44px; } } /* ── Demo watermark: a super-large, faint QROST overlay to mark this as a prototype under qrost.github.io. Purely visual — pointer-events:none so it never blocks clicks. Uses --ink so it stays legible (low-opacity) in both light and dark themes. ── */ body::after { content: "QROST"; position: fixed; right: -0.1em; bottom: -0.18em; z-index: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(8rem, 28vw, 22rem); letter-spacing: -0.04em; line-height: 0.8; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none; white-space: nowrap; } /* Keep interactive layers above the watermark (.topbar already has position:sticky + z-index:50, so leave it untouched). */ .wrap, .promo, footer, dialog, .modal, [role="dialog"] { position: relative; z-index: 1; }