/* --------------------------------------------------------------- 01 · THE GUIDE SIGN — one green, owned outright. Yellow is rationed: availability only. Never anywhere else. --------------------------------------------------------------- */ :root[data-brand="guide-sign"]{ --page:#FAFAF8; --surface:#FFFFFF; --surface-2:#E7EAE8; --inset:#DDEEE8; --text:#141715; --text-2:#2A2E2C; --text-muted:#5D6360; --line:#E7EAE8; --line-2:#B8C4BE; --primary:#00694E; --primary-hi:#003D2E; --on-primary:#FFFFFF; --accent:#00694E; --accent-hi:#003D2E; --accent-soft:#DDEEE8; --on-accent:#FFFFFF; --gold:#5D6360; --gold-fill:#FFD335; --gold-soft:#FFF6D6; /* stars are NOT the signal yellow — that colour means "available", nothing else */ --star:#8A6206; /* the yellow law: available is the ONLY yellow surface */ --ok:#141715; --ok-soft:#FFD335; --warn:#5D6360; --warn-soft:#FFFFFF; --bad:#5D6360; --bad-soft:#E7EAE8; --font-body:'Overpass',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-display:'Overpass',-apple-system,BlinkMacSystemFont,sans-serif; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:8px; --sh-1:0 1px 3px rgba(20,23,21,.08); --shadow-1:0 1px 3px rgba(20,23,21,.08); --shadow-2:0 8px 24px rgba(20,23,21,.16); --shadow-3:0 12px 34px rgba(20,23,21,.20); } /* buttons are panels; the keyline appears on focus */ :root[data-brand="guide-sign"] .btn-primary{border:2px solid transparent} :root[data-brand="guide-sign"] .btn-primary:focus-visible{ border-color:#FFFFFF; box-shadow:0 0 0 3px var(--primary)} :root[data-brand="guide-sign"] .btn-ghost{border-color:var(--primary);color:var(--primary);font-weight:700} :root[data-brand="guide-sign"] .chip{border-radius:6px;font-weight:700;letter-spacing:.01em} :root[data-brand="guide-sign"] .chip-avail{background:#FFD335;color:#141715} :root[data-brand="guide-sign"] .chip-reserved{background:transparent;color:#5D6360;box-shadow:inset 0 0 0 1.5px #B8C4BE} :root[data-brand="guide-sign"] .chip-out{background:#E7EAE8;color:#5D6360} :root[data-brand="guide-sign"] .chip-black{background:#141715;color:#FFFFFF} :root[data-brand="guide-sign"] h1,:root[data-brand="guide-sign"] h2, :root[data-brand="guide-sign"] h3,:root[data-brand="guide-sign"] .display{ font-weight:800;letter-spacing:-.01em} :root[data-brand="guide-sign"] .m-fab{background:#00694E} :root[data-brand="guide-sign"] .m-pbar i{background:#00694E} /* --------------------------------------------------------------- 02 · THE ROUTE — ink, paper, and one reserved green. Green appears on money and availability. Buttons are ink. --------------------------------------------------------------- */ /* rule 8: buttons are ink. If a button turns green, the law is broken. */ /* money is the only green text */ /* --------------------------------------------------------------- 03 · THE DOUBLE F — oxblood, gold hairlines, plain paperwork. Gold is a line, never a field. The serif never asks for money. --------------------------------------------------------------- */ /* rule 4: the serif never asks for money — display face for titles only */ /* gold is a hairline, never a field */ @media(max-width:520px){} /* ---- rule compliance fixes ---- */ /* Route rule 8: green never appears on navigation. Active nav is ink. */ /* Double F rule 3: gold never carries small text/icons on cream — oxblood does. */ /* the preview switcher must not sit on top of content */ .m-app{padding-bottom:calc(146px + env(safe-area-inset-bottom))} @media(min-width:820px){ .ftr{padding-bottom:88px} } /* ================================================================ DARK MODE — one per brand, taken from each guideline's own dark panel: Guide Sign "in-car hours", Route "dark + earnings calculator", Double F "evening hours". Applied via [data-mode="dark"]; [data-mode="auto"] follows the OS. ================================================================ */ :root{ --chrome:rgba(255,255,255,.94); --scrim:rgba(12,18,24,.45); } /* ---- Guide Sign, dark ---- Night, not moss. The ground was a green-tinted charcoal, which put the brand's green against a slightly-green backdrop and killed it. This is a near-neutral black with only a whisper of green in the greys, so the mark and the green type are the only saturated things on the page and they carry it. A road sign at night is exactly this: green and white, lit, against black — so the brand is more itself here than in light mode. The panel still never reverses (rule 1). Its own white keyline is what separates it from the ground, which is why it needs no treatment. */ :root[data-brand="guide-sign"][data-mode="dark"]{ --page:#0A0B0A; --surface:#171A18; --surface-2:#212523; --inset:#121412; --text:#FFFFFF; --text-2:#D6DAD7; --text-muted:#98A09B; /* on a true black ground the card is separated by its BORDER, not its fill — a fill light enough to read as a card would grey the whole page out */ --line:#2E332F; --line-2:#454B47; /* the green has to lift off black — #00694E is unreadable on it. This is the same hue carried up in value, so it still reads as the brand. */ --primary:#00694E; --primary-hi:#008A66; --on-primary:#FFFFFF; --accent:#3FBF92; --accent-hi:#5FD6AB; --accent-soft:#0E1A15; --on-accent:#06110C; --gold:#98A09B; --gold-fill:#FFD335; --gold-soft:#2A2618; --ok:#0A0B0A; --ok-soft:#FFD335; /* the yellow law survives the dark */ --star:#E4B65A; --warn:#E4C25A; --warn-soft:#231F12; --bad:#E88E7C; --bad-soft:#231412; --chrome:rgba(10,11,10,.94); --scrim:rgba(0,0,0,.72); --shadow-1:0 1px 3px rgba(0,0,0,.6); --shadow-2:0 8px 24px rgba(0,0,0,.7); --shadow-3:0 12px 34px rgba(0,0,0,.8); } /* Headings and the eyebrow carry the green on black — this is the thing the light theme cannot do, because #00694E on white is a body colour, not a display one. */ :root[data-brand="guide-sign"][data-mode="dark"] .eyebrow{color:var(--accent)} :root[data-brand="guide-sign"][data-mode="dark"] .brandmark{ filter:drop-shadow(0 0 0 transparent)} /* on asphalt the panel always carries the white keyline (§03) */ /* On black a #00694E button reads as a dark hole. Fill it with the lifted green and drop the white outline the asphalt ground needed. */ :root[data-brand="guide-sign"][data-mode="dark"] .btn-primary{ background:var(--accent); color:#06110C; border:0} :root[data-brand="guide-sign"][data-mode="dark"] .btn-primary:hover{background:var(--accent-hi)} :root[data-brand="guide-sign"][data-mode="dark"] .btn-ghost{ border-color:var(--line-2); color:#FFFFFF} :root[data-brand="guide-sign"][data-mode="dark"] .btn-ghost:hover{ border-color:var(--accent); color:var(--accent)} :root[data-brand="guide-sign"][data-mode="dark"] .chip-out{background:#2A2E2C;color:#B8C4BE} :root[data-brand="guide-sign"][data-mode="dark"] .chip-black{background:#FFFFFF;color:#141715} /* buttons invert to paper on ink — still never green */ /* ---- chrome surfaces follow the mode instead of hardcoded white ---- */ .hdr,.m-hdr{background:var(--chrome)} .m-tabs,.stickybar,.m-actionbar{background:var(--chrome)} .drawer{background:var(--scrim)} .m-sheet-scrim{background:var(--scrim)} .m-wiz .wiz-nav{background:linear-gradient(180deg,transparent,var(--page) 35%)} /* the signature pad is always paper — you sign on white, in every mode */ .sigwrap{background:#FFFFFF} .sigwrap canvas{background:#FFFFFF} /* the preview banner needs its own ground — in dark modes --primary inverts to paper, which was leaving white text on white */ .demobar{background:var(--demobar-bg,var(--primary));color:var(--demobar-fg,#fff)} :root[data-mode="dark"]{ --demobar-bg:#000000; --demobar-fg:#FFFFFF; } :root[data-brand="guide-sign"][data-mode="dark"]{ --demobar-bg:#0B0D0C; } /* switcher must never clip its own controls */ /* Evidence tags must not borrow the availability semantics. Guide Sign rule 2: yellow means a car is open. Nowhere else. */ .tag.verified{background:var(--tag-ok-bg,var(--surface-2));color:var(--tag-ok-fg,var(--text-2))} .tag.reported{background:var(--tag-rep-bg,var(--surface-2));color:var(--tag-rep-fg,var(--text-muted))} :root[data-brand="guide-sign"]{ --tag-ok-bg:#DDEEE8; --tag-ok-fg:#00694E; --tag-rep-bg:#E7EAE8; --tag-rep-fg:#5D6360; } :root[data-brand="guide-sign"][data-mode="dark"]{ --tag-ok-bg:#1E2320; --tag-ok-fg:#DDEEE8; --tag-rep-bg:#2A2E2C; --tag-rep-fg:#B8C4BE; }