/* ========================================================================== Tab Truck — design system (handoff v3) Tokens + base components. Brand: "your tabs, delivered safely" — cute delivery service, privacy-first. The signature look is FLAT: 2px ink outlines + hard offset shadows with NO blur (0 4px 0 ), like a sticker. Never add blur to these. Border weights (v3): 2.5px mascot · 2px interactive · 1.5px passive. Shadow steps (v3): sm 3px · md 4px · lg 6px — always 0 blur. Colour rule (v3): orange = actions. green = state/confirmation only, never a competing CTA. ========================================================================== */ @import url('../fonts/fonts.css'); :root { /* --- brand ------------------------------------------------------------ */ --orange: #E1793F; /* primary, CTAs, brand accent */ --orange-press: #B9591F; /* shadow shade under an orange button */ --orange-press-bg: #D06A32;/* v3: pressed *fill* darkens to this */ --orange-hover: #EC8C57; --orange-link: #C25E2A; /* link text on cream */ --orange-100: #FCE7D6; --orange-200: #F6D4B8; --orange-err-text: #93441A;/* v3: error toast text */ --green: #35A07C; /* trust / encryption / success / selected */ --green-press: #257757; /* shadow shade + text on green tint */ --green-100: #CDE9DD; --green-ok-text: #1E5C43; /* v3: success toast text */ /* --- ink & surfaces ---------------------------------------------------- */ --ink: #2A2620; /* all text + 2px outlines */ --ink-soft: #6B6357; --ink-muted: #7A7060; /* v3: darkened from #9A9080 for contrast */ --cream: #FBF6EC; /* page background */ --white: #FFFFFF; /* cards */ --panel: #F3ECDC; /* panel tint */ --hairline: #EADFC9; /* 1.5px inner borders */ --hairline-strong: #C9BEA4; --shadow-neutral: #E0D5BF; /* flat shadow for neutral cards */ /* dark surfaces (trust strip, footer, code panels) */ --dark-bg: #2A2620; --dark-raised: #3A342C; --dark-muted: #C9BEA4; --dark-text: #FBF6EC; --on-accent: #fff; /* text on the orange accent (flips to navy in dark) */ /* --- type -------------------------------------------------------------- */ --font-display: 'Fredoka', system-ui, sans-serif; /* headings, buttons, brand */ --font-body: 'Public Sans', system-ui, sans-serif; /* body / UI copy */ --font-mono: 'Space Mono', ui-monospace, monospace; /* technical / privacy details */ /* --- shape ------------------------------------------------------------- */ --r-sm: 8px; --r-btn: 13px; /* buttons, inputs */ --r-card: 18px; --r-pill: 999px; --outline: 2px solid var(--ink); --hair: 1.5px solid var(--hairline); /* flat shadows — no blur, ever */ --lift-sm: 0 3px 0 var(--shadow-neutral); --lift: 0 4px 0 var(--shadow-neutral); --lift-orange: 0 4px 0 var(--orange-press); --lift-green: 0 4px 0 var(--green-press); --lift-hero: 0 8px 0 var(--shadow-neutral); /* hover grows the shadow one step (v3: rest 4 → hover 5) */ --lift-hover: 0 5px 0 var(--shadow-neutral); --lift-hover-orange: 0 5px 0 var(--orange-press); --lift-hover-green: 0 5px 0 var(--green-press); /* --- motion (v3) -------------------------------------------------------- */ --t-fast: 150ms; /* buttons, toggles, accordions */ --t-med: 300ms; /* panels, toasts */ --ease-fast: ease-out; --ease-med: ease-in-out; /* --- spacing (4pt scale) ----------------------------------------------- */ --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; } /* ========================================================================== Dark mode (v3) Driven by data-theme on , which theme.js sets before first paint — it resolves the user's choice (system / light / dark) against the OS, so this block is written once rather than duplicated across a media query. Only token VALUES flip; every rule below and in the page stylesheets is written against tokens, so the whole product themes from here. Note --ink carries both text and outline colour, so in dark it becomes cream — which is exactly v3's "mascot outlines flip to cream". ========================================================================== */ :root[data-theme="dark"] { /* Deep midnight-blue surfaces, pale-egg foreground. The brand mascot is NOT themed (its SVG fills are hard-coded), so the orange truck stays orange. */ --ink: #F1E5B0; /* text + outlines — pale yellowish egg */ --ink-soft: #CFC393; --ink-muted: #97906C; --cream: #05061C; /* page background — deep midnight, near-black navy */ --white: #0D0F30; /* cards */ --panel: #171A40; /* panel tint / raised */ --hairline: #262B58; --hairline-strong: #3A4070; --shadow-neutral: #010208; /* the flat shadow must read darker than the card */ /* Accent = egg. The "orange" role (primary buttons, links, brand text) becomes egg in dark; text ON the accent flips to navy — see --on-accent below. */ --orange: #EFDF9E; /* primary fill (the egg accent) */ --orange-hover: #F5E8B6; --orange-press: #B7A45C; /* flat-shadow shade under an egg button */ --orange-press-bg: #E3D18A;/* pressed fill */ --orange-link: #F4D98A; /* links: a warmer gold, distinct from egg body text */ --orange-100: #2C2A1A; /* faint warm tint on navy (pill / danger-hover bg) */ --orange-200: #3B371F; --orange-err-text: #F0A987;/* errors stay warm coral, distinct from the egg accent */ --green: #4FB89A; /* trust/state — teal-green reads on navy */ --green-100: #16323F; /* chip background */ --green-press: #1E5C4A; --green-ok-text: #86D3B8; --dark-bg: #030417; /* always-dark strips go navy too */ --dark-raised: #171A40; --dark-muted: #CFC393; --dark-text: #F1E5B0; --on-accent: #05061C; /* text on the egg accent = the page navy */ } /* text sitting ON a green tint must lighten, not darken */ :root[data-theme="dark"] .tt-chip--encrypted { color: var(--green-ok-text); } :root[data-theme="dark"] .tt-chip--count { color: #10241B; } /* On the egg accent, white text is invisible — flip it to navy. One block here covers every surface's primary-button class (tokens.css is loaded by all). */ :root[data-theme="dark"] .tt-btn--primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] button.primary, :root[data-theme="dark"] .btn--primary, :root[data-theme="dark"] .tt-btn--trust, :root[data-theme="dark"] .btn.active { color: var(--on-accent); } /* ========================================================================== Base ========================================================================== */ /* Every component here sizes with padding + a 2px border, so content-box would make each one overflow its container by exactly (padding + border). Owning this in the design system means a page stylesheet can't forget it — popup.css did, and its note textarea spilled straight out of the popup. */ *, *::before, *::after { box-sizing: border-box; } body.tt { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .tt h1, .tt h2, .tt h3, .tt h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; } .tt-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--ink-muted); } /* ========================================================================== Inline icons (lib/icons.js) — size to the surrounding text, inherit its colour ========================================================================== */ .ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; /* sit on the text baseline */ stroke: currentColor; } [data-icon] { display: inline-flex; align-items: center; } [data-icon] .ico { vertical-align: 0; } /* ========================================================================== Focus (v3) — "keep rest shadow + ring. Never remove." The spec writes the ring as box-shadow (0 0 0 3px cream, 0 0 0 6px green), but box-shadow would clobber the flat sticker shadow every component relies on. An outline with a 3px offset renders identically (3px gap, then a 3px green ring) and composes with the existing shadow instead of replacing it. ========================================================================== */ .tt :focus-visible, body.tt :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } /* ========================================================================== Buttons — hover lifts, press sinks into the flat shadow ========================================================================== */ .tt-btn { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); background: var(--white); border: var(--outline); border-radius: 12px; padding: 11px 18px; box-shadow: var(--lift); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; /* hit target */ transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast), background var(--t-fast) var(--ease-fast); } .tt-btn:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--lift-hover); } .tt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow-neutral); } .tt-btn--primary { background: var(--orange); color: #fff; box-shadow: var(--lift-orange); } .tt-btn--primary:hover { background: var(--orange-hover); box-shadow: var(--lift-hover-orange); } .tt-btn--primary:active { background: var(--orange-press-bg); transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-press); } /* State/confirmation only — per v3 this must never be used as a competing CTA. */ .tt-btn--trust { background: var(--green); color: #fff; box-shadow: var(--lift-green); } .tt-btn--trust:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--lift-hover-green); } .tt-btn--trust:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-press); } .tt-btn--ghost { background: transparent; border: none; box-shadow: none; color: var(--orange-link); padding: 11px 6px; min-height: 0; } .tt-btn--ghost:hover { background: transparent; text-decoration: underline; transform: none; box-shadow: none; } .tt-btn--ghost:active { transform: none; box-shadow: none; } .tt-btn--sm { font-size: 13px; padding: 8px 14px; border-radius: 10px; box-shadow: var(--lift-sm); min-height: 0; } .tt-btn--sm:hover { box-shadow: var(--lift); } .tt-btn--sm:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); } .tt-btn--danger { color: var(--orange-link); } .tt-btn--danger:hover { background: var(--orange-100); } .tt-btn:disabled, .tt-btn[disabled] { background: var(--panel); color: var(--ink-muted); border-color: var(--shadow-neutral); box-shadow: none; cursor: not-allowed; transform: none; } /* square icon button */ .tt-icon-btn { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: var(--outline); border-radius: 11px; box-shadow: var(--lift-sm); cursor: pointer; font-size: 16px; color: var(--ink); transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast), background var(--t-fast) var(--ease-fast); } .tt-icon-btn:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--lift); } .tt-icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); } /* ========================================================================== Inputs ========================================================================== */ .tt-input { width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--white); border: var(--outline); border-radius: 11px; padding: 10px 14px; transition: border-color var(--t-fast) var(--ease-fast); } .tt-input::placeholder { color: var(--ink-muted); } .tt-input:focus { border-color: var(--green); } /* focus = green ring */ .tt-input--error { border-color: var(--orange); } /* error = orange ring */ .tt-input--cream { background: var(--cream); } /* ========================================================================== Toggle — 50×28 pill, 22px knob ========================================================================== */ .tt-toggle { position: relative; display: inline-block; width: 50px; height: 28px; flex: none; } .tt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .tt-toggle .tt-track { position: absolute; inset: 0; background: var(--hairline); border: var(--outline); border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-fast) var(--ease-fast); } .tt-toggle .tt-knob { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-pill); box-sizing: border-box; transition: left var(--t-fast) var(--ease-fast); pointer-events: none; } .tt-toggle input:checked + .tt-track { background: var(--green); } .tt-toggle input:checked + .tt-track .tt-knob { left: 25px; } /* the visually-hidden input still owns focus — put the ring on the track */ .tt-toggle input:focus-visible + .tt-track { outline: 3px solid var(--green); outline-offset: 3px; } /* ========================================================================== Chips & badges — pill, 1.5px border ========================================================================== */ .tt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 5px 11px; background: var(--white); border: 1.5px solid var(--hairline); color: var(--ink-soft); white-space: nowrap; } .tt-chip--encrypted { background: var(--green-100); border-color: var(--green); color: var(--green-press); } .tt-chip--cloud { background: var(--orange-100); border-color: var(--orange); color: var(--orange-link); } .tt-chip--count { background: var(--green); border-color: var(--green); color: #fff; } .tt-chip--warn { background: var(--orange-100); border-color: var(--orange); color: var(--orange-link); } /* ========================================================================== Cards ========================================================================== */ .tt-card { background: var(--white); border: var(--outline); border-radius: var(--r-card); box-shadow: var(--lift); padding: var(--s4); } .tt-sticker { /* smaller card used in lists */ background: var(--white); border: var(--outline); border-radius: 12px; box-shadow: var(--lift-sm); padding: 11px 13px; } .tt-row { /* inner row (tab row) — hairline, no shadow */ display: flex; align-items: center; gap: 12px; background: var(--cream); border: var(--hair); border-radius: 12px; padding: 11px 13px; } /* status dot */ .tt-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; background: var(--ink-muted); } .tt-dot--ok { background: var(--green); } .tt-dot--warn { background: var(--orange); } .tt-dot--err { background: var(--orange-press); } .tt-hidden { display: none !important; } /* ========================================================================== Reduced motion (v3) — pause all loops and transitions. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }