/* ══════════════════════════════════════════════════════════════════════════════ geo-2026.css - THE SKIN. Loaded after Tailwind and geo-ui.css, before nothing. WHY IT EXISTS (Edward, 22 Sep): a competitor's entry is "clean and had amazing effects"; "we have to be 2026 design"; "some colours don't flow and some buttons are not in line"; "some backgrounds don't match"; "we need full harmony". WHERE EVERY VALUE COMES FROM - three sources, measured, never picked by eye: 1. OUR NAVIGATION CANVAS (claude.ai/artifact/3H2mzG6Xdy4Lcfkjkc6WZm) the system font stack, 40px controls, 10px corners, primary = green-on-dark-ink 2. geophii.com, read off the live page the ground people arrive from: near-black, body text rgb(156,163,175), the lavender rgb(179,161,199) with rgb(113,94,139) as its deeper partner 3. THE REFERENCE TEMPLATE Edward sent (Requests & Approvals, src/index.css) a card is the ground plus a HAIRLINE (0 0% 14%), brightening to 0 1% 28% under the pointer; muted surface 0 0% 12%; text 98% over 55%; calm status colours; a dot grid at 5%; press 0.98; fade-up staggered 50ms And one decision of Edward's own: the BUTTON is the logo's teal #00B8B5, with dark ink - measured 6.9:1, where the same teal under white text is 2.46:1. THE RULES THIS FILE KEEPS surfaces the ground, a hairline, one muted step. Nothing else. teal the one action on a screen. Never decoration. lavender the second voice: a link, a mark, the second line on a chart. green a good score. Not a button. red destroying something, and a failed state. Nothing else. every control is 40px on a laptop, 44 on a phone. HOW IT IS SAFE: the app is built from Tailwind's grey and accent utilities. This file redefines what those utilities PAINT, one level more specific (html[data-theme=...] .class), so the cascade settles it whichever order the stylesheets load in, and no page markup has to change. ══════════════════════════════════════════════════════════════════════════════ */ :root { --geo-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Headings (Edward, 26 Sep: "the bold font is a bit bulky ... a better font for our header"). Inter, self-hosted: the system face at 700-800 is heavy, and it's a different face on every device. Change this one line to try another. */ --geo-font-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Light, taken from the reference template's own light theme (Edward, 23 Sep: "the light mode needs that feel - we have the styling from Lovable"), its HSL values converted: background 210 20% 98%, card 100%, muted 210 15% 93%, border 210 15% 88%, border-hover 210 15% 70%, foreground 220 20% 15%, muted-foreground 220 10% 45%. Cooler and cleaner than the warm greys I had, and structurally identical to the dark side. */ --geo-bg: #f7f9fb; --geo-panel: #ffffff; --geo-surface: #ffffff; --geo-surface2: #e9edf1; --geo-border: #dde2e8; --geo-border2: #adb6c2; --geo-text: #1f242e; --geo-text2: #3d4452; --geo-muted: #5b6472; /* 4.11:1 measured at #6a7180 on white */ --geo-accent: #00696a; /* the logo teal, deep enough to read ON white: #00807e measured 3.7:1 */ --geo-accent-ink: #ffffff; /* The accent at low alpha, for a chosen chip or a quiet highlight. It must be built from THIS theme's accent: the roast CSS used a bright-teal tint in both, which is the dark theme's colour sitting on a white card. */ --geo-accent-soft: rgba(0, 105, 106, .10); /* Not a colour, so it is the same in both themes - but it was used with var() and never defined, which is how a font stack silently becomes the browser default. */ --geo-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --geo-good: #15803d; --geo-warn: #b45309; --geo-bad: #b91c1c; --geo-good-ink: #14532d; --geo-warn-ink: #7c2d12; --geo-bad-ink: #7f1d1d; --geo-second-ink: #4b3e5c; --geo-second: #715e8b; /* the site's lavender, deep step: 5.6:1 on light */ --geo-second-deep: #4b3e5c; --geo-info: #715e8b; --geo-r-card: 14px; --geo-r-ctrl: 8px; /* 10 -> 8 with the flat buttons (26 Sep) */ --geo-ctrl-h: 40px; /* Buttons (26 Sep, Edward: "more like high quality saas button"): flat, a hairline edge a shade darker than the fill and a one-pixel top highlight, instead of a glow underneath. */ --geo-btn-edge: color-mix(in oklab, var(--geo-accent) 78%, #000); --geo-btn-lift: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 24, 40, .12); --geo-btn-quiet: 0 1px 2px rgba(16, 24, 40, .06); --geo-btn-hover: color-mix(in oklab, var(--geo-accent) 90%, #fff); --geo-dur: .18s; --geo-ease: cubic-bezier(.2, .8, .2, 1); --geo-nav-w: 260px; } html[data-theme="dark"] { --geo-btn-lift: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .35); --geo-btn-quiet: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3); --geo-bg: #030303; --geo-panel: #000000; --geo-surface: #0a0a0a; --geo-surface2: #1f1f1f; --geo-border: #242424; --geo-border2: #474747; --geo-text: #fafafa; --geo-text2: #d9d9d9; --geo-muted: #9a9a9a; /* measured: #8c8c8c on the muted surface was 4.37:1 */ --geo-accent: #00b8b5; --geo-accent-ink: #04201f; --geo-accent-soft: rgba(0, 184, 181, .13); --geo-good: #33cc99; --geo-warn: #eaa61a; --geo-bad: #d94f4f; /* Ink for text sitting ON a 16% tint of its own colour: the status colours themselves measured 3.62:1 there, so the pill gets a lighter step. */ --geo-good-ink: #5fe3b2; --geo-warn-ink: #f2c14e; --geo-bad-ink: #f5a3a3; /* one step lighter: a red label measured 4.07:1 live */ --geo-second-ink: #cbbcdb; --geo-second: #b3a1c7; --geo-second-deep: #715e8b; --geo-info: #b3a1c7; } /* ── The face ──────────────────────────────────────────────────────────────── The system stack: it is already on the person's device, so the first paint is the real one - no flash of a different typeface while a web font downloads. */ body, .font-sans, button, input, select, textarea { font-family: var(--geo-font); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { letter-spacing: -.011em; } .main-content .text-2xl, .main-content .text-3xl, .main-content .text-4xl { letter-spacing: -.02em; font-weight: 700; } /* The heading face. Self-hosted (one 48KB variable file, Latin), swap so text shows at once in the system face and settles into Inter; nothing blocks the first paint. Headings take it and come down a step in weight: Inter at 650 reads as firmly as the system face at 800, without the bulk. Body text keeps the system face. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/inter-latin-var.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; } h1, h2, h3, h4 { font-family: var(--geo-font-head); } h1, h2 { font-weight: 650; } h3, h4 { font-weight: 600; } :is(h1, h2, h3, h4):is(.font-extrabold, .font-black) { font-weight: 700; } :is(h1, h2, h3, h4).font-bold { font-weight: 650; } :is(h1, h2, h3, h4).font-semibold { font-weight: 600; } .main-content :is(h1, h2, h3).text-2xl, .main-content :is(h1, h2, h3).text-3xl, .main-content :is(h1, h2, h3).text-4xl { font-weight: 650; } /* ── The ground, with texture ───────────────────────────────────────────────── A dot grid at 5%, 10px pitch (the reference template's). It gives the page substance from across the room and disappears at reading distance. */ html[data-theme="dark"] body { background-color: var(--geo-bg); background-image: radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 10px 10px; background-attachment: fixed; } html:not([data-theme="dark"]) body { background-color: var(--geo-bg); background-image: radial-gradient(circle at center, rgba(0,0,0,.04) 1px, transparent 1px); background-size: 10px 10px; background-attachment: fixed; } /* ── Surfaces: ground · card · one muted step ───────────────────────────────── */ /* Transparent ONLY inside the page, never on the page itself: a transparent wrapper on a page that never got a theme shows the browser's white body through it - which is exactly what "the background on many pages is still white" looked like (Edward, 23 Sep). The ground is always painted explicitly, below. */ html[data-theme="dark"] #main-content .bg-gray-900, html[data-theme="dark"] #main-content.main-content { background-color: transparent; } html[data-theme="dark"] body, html[data-theme="dark"] html { background-color: var(--geo-bg); } html[data-theme="dark"] .bg-gray-950 { background-color: var(--geo-panel); } html[data-theme="dark"] .bg-gray-800 { background-color: var(--geo-surface); } html[data-theme="dark"] .bg-gray-700 { background-color: var(--geo-surface2); } html[data-theme="dark"] .bg-gray-800\/50, html[data-theme="dark"] .bg-gray-900\/50 { background-color: var(--geo-surface); } html[data-theme="dark"] .border-gray-600, html[data-theme="dark"] .border-gray-700, html[data-theme="dark"] .border-gray-800, html[data-theme="dark"] .divide-gray-700 > * + * { border-color: var(--geo-border); } html[data-theme="dark"] .text-gray-100, html[data-theme="dark"] .text-gray-200 { color: var(--geo-text); } html[data-theme="dark"] .text-gray-300, html[data-theme="dark"] .text-gray-400 { color: var(--geo-text2); } html[data-theme="dark"] .text-gray-500 { color: var(--geo-muted); } html[data-theme="dark"] .sidebar { background-color: var(--geo-panel); border-color: var(--geo-border); } html:not([data-theme="dark"]) .main-content { background-color: transparent; } html:not([data-theme="dark"]) .bg-white { background-color: var(--geo-surface); } html:not([data-theme="dark"]) .bg-gray-50, html:not([data-theme="dark"]) .bg-gray-100 { background-color: var(--geo-surface2); } html:not([data-theme="dark"]) .border-gray-100, html:not([data-theme="dark"]) .border-gray-200, html:not([data-theme="dark"]) .border-gray-300 { border-color: var(--geo-border); } html:not([data-theme="dark"]) .text-gray-500 { color: var(--geo-muted); } html:not([data-theme="dark"]) .text-gray-600, html:not([data-theme="dark"]) .text-gray-700 { color: var(--geo-text2); } html:not([data-theme="dark"]) .sidebar { background-color: var(--geo-surface); border-color: var(--geo-border); } /* A dark card marooned in a light menu (the credits box) had its own palette. */ html:not([data-theme="dark"]) .sidebar [class*="bg-gray-8"]:not([style*="width:"]), html:not([data-theme="dark"]) .sidebar [class*="bg-gray-9"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; } html:not([data-theme="dark"]) .sidebar [class*="bg-gray-8"] *, html:not([data-theme="dark"]) .sidebar [class*="bg-gray-9"] * { color: var(--geo-text2) !important; } /* A card is the ground plus a hairline, and the hairline answers the pointer. */ html[data-theme="dark"] .main-content .bg-gray-800, html[data-theme="dark"] .main-content .bg-white { border: 1px solid var(--geo-border); } @media (hover: hover) { html[data-theme="dark"] .main-content .bg-gray-800:hover, html[data-theme="dark"] .main-content .bg-white:hover, html:not([data-theme="dark"]) .main-content .bg-white:hover { border-color: var(--geo-border2); } } .rounded-xl, .rounded-2xl { border-radius: var(--geo-r-card); } .rounded-lg { border-radius: var(--geo-r-ctrl); } html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg { box-shadow: none; } /* ── One accent, not five ───────────────────────────────────────────────────── Purple and indigo were decoration - an icon tile, a counter, a gradient behind a set of initials - competing with the one thing to press. They go quiet. The brand's own green-to-blue gradient is left alone: it means "Geophii". */ html[data-theme="dark"] .main-content [class*="bg-purple-"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-indigo-"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-violet-"]:not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-purple-5"]:not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-indigo-5"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; } html[data-theme="dark"] .main-content [class*="text-purple-"], html[data-theme="dark"] .main-content [class*="text-indigo-"], html[data-theme="dark"] .main-content [class*="text-violet-"], html[data-theme="dark"] .main-content [class*="text-pink-"] { color: var(--geo-text2) !important; } html[data-theme="dark"] body [class*="from-indigo-"], html[data-theme="dark"] body [class*="from-purple-"], html[data-theme="dark"] body [class*="from-violet-"], html[data-theme="dark"] body [class*="via-purple-"], html[data-theme="dark"] body [class*="to-purple-"], html[data-theme="dark"] body [class*="to-indigo-"], html:not([data-theme="dark"]) body [class*="from-indigo-"], html:not([data-theme="dark"]) body [class*="to-purple-"], html[data-theme="dark"] .site-head-avatar { background-image: none !important; background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; } /* ...but a bar that MEASURES something keeps a colour, or it says nothing. */ html[data-theme="dark"] body [class*="from-indigo-"][class*="h-2"], html[data-theme="dark"] body [class*="from-indigo-"][class*="h-full"] { background-color: var(--geo-accent) !important; } /* The freshness ring draws its gap in the page's own colour. */ .site-head-avatar { box-shadow: 0 0 0 2px var(--geo-bg) !important; } /* ══ BUTTONS - exactly two, and one for destroying ════════════════════════════ PRIMARY filled teal, dark ink, weight 700. One per area of a screen. SILVER transparent with a hairline. Everything else - including the solid blues that used to shout as loudly as the primary. DESTRUCTIVE red, and only for removing something. 40px tall, 44 on a phone, 10px corners, and a press you can feel. */ .geo-btn, button, .btn, a[class*="bg-green-"]:not([style*="width:"]), a[class*="bg-blue-"]:not([style*="width:"]), a[class*="bg-emerald-"]:not([style*="width:"]), a[class*="bg-teal-"]:not([style*="width:"]), button[class*="bg-green-"]:not([style*="width:"]), button[class*="bg-blue-"]:not([style*="width:"]), button[class*="bg-emerald-"]:not([style*="width:"]){ border-radius: var(--geo-r-ctrl); transition: transform .06s var(--geo-ease), filter var(--geo-dur) var(--geo-ease), background-color var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease), color var(--geo-dur) var(--geo-ease); } a[class*="bg-green-5"]:not([style*="width:"]), a[class*="bg-green-6"]:not([style*="width:"]), a[class*="bg-emerald-6"]:not([style*="width:"]), a[class*="bg-teal-6"]:not([style*="width:"]), button[class*="bg-green-5"]:not([style*="width:"]), button[class*="bg-green-6"]:not([style*="width:"]), button[class*="bg-emerald-6"]:not([style*="width:"]), input[type="submit"][class*="bg-green-"]:not([style*="width:"]), .geo-btn-primary { background-color: var(--geo-accent) !important; color: var(--geo-accent-ink) !important; border: 0 !important; font-weight: 700; box-shadow: none !important; } a[class*="bg-green-5"]:hover, button[class*="bg-green-5"]:hover, a[class*="bg-green-6"]:hover, button[class*="bg-green-6"]:hover, .geo-btn-primary:hover { filter: brightness(1.08); } /* A SOLID blue button was this app's primary action long before the teal existed ("+ Add Task", "Save", "Apply"). Turning every blue into the silver outline demoted them below the grey secondaries beside them - seen on the task board, 23 Sep. A solid blue is a primary now; only the TINTED blues stay quiet. */ a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), a[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]){ background-color: var(--geo-accent) !important; color: var(--geo-accent-ink) !important; border: 0 !important; font-weight: 700; } a[class*="bg-blue-5"]:not([style*="width:"]), a[class*="bg-blue-6"][class*="/"]:not([style*="width:"]), button[class*="bg-blue-5"]:not([style*="width:"]), button[class*="bg-blue-6"][class*="/"]:not([style*="width:"]), button[class*="bg-gray-7"]:not([style*="width:"]), a[class*="bg-gray-7"]:not([style*="width:"]), input[type="submit"][class*="bg-blue-"]:not([style*="width:"]), .geo-btn-silver, .geo-tt-btn, .btn-sm.secondary { background-color: transparent !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border2) !important; box-shadow: none !important; } a[class*="bg-blue-6"]:hover, button[class*="bg-blue-6"]:hover, .geo-btn-silver:hover, .geo-tt-btn:hover { border-color: var(--geo-accent) !important; } button[class*="bg-red-6"]:not([style*="width:"]), a[class*="bg-red-6"]:not([style*="width:"]), .btn-sm.danger, .geo-btn-danger { background-color: var(--geo-bad) !important; color: #fff !important; border: 0 !important; font-weight: 600; } button:active, .btn:active, a[class*="bg-green-"]:active, a[class*="bg-blue-"]:active { transform: scale(.98); } /* Heights. A finger is not a pointer. */ .geo-btn, .btn-sm, .geo-tt-btn, .rec-tab, a[class*="bg-green-5"], button[class*="bg-green-5"], a[class*="bg-blue-6"], button[class*="bg-blue-6"] { min-height: 36px; } @media (max-width: 767px) { .main-content button, .main-content a[class*="bg-"], .geo-btn, .btn-sm, .geo-tt-btn, .rec-tab { min-height: 44px; } } /* A row action is never the page's primary colour. */ td a[class*="bg-green-"]:not([style*="width:"]), td button[class*="bg-green-"]:not([style*="width:"]), td a[class*="bg-blue-"]:not([style*="width:"]), td button[class*="bg-blue-"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border) !important; font-weight: 600; } td a[class*="bg-green-"]:hover, td button[class*="bg-green-"]:hover { border-color: var(--geo-accent) !important; } /* A tab or a chip is not a button. */ .site-tab-btn, .geo-pill, [role="tab"] { border-radius: 999px; } /* ── The chip, from the reference template ─────────────────────────────────── A 40px chip whose ACTIVE state is a brighter border, not a coloured slab. Ready for the filters on the work lists (Type · Impact · Effort). */ .geo-chip { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 14px; font-weight: 500; background: var(--geo-surface); color: var(--geo-muted); border: 1px solid var(--geo-border); border-radius: 999px; transition: border-color var(--geo-dur) var(--geo-ease), color var(--geo-dur) var(--geo-ease); } .geo-chip:hover { border-color: var(--geo-border2); color: var(--geo-text); } .geo-chip[aria-pressed="true"], .geo-chip.is-on { border-color: var(--geo-text); color: var(--geo-text); } @media (max-width: 767px) { .geo-chip { height: 44px; } } /* ── Status: a tint of its own colour, with that colour as the ink ──────────── Edward, 22 Sep: "keep the different colour of bubbles, it helps break the site - change them slightly to harmonise". So they stay, as soft pills. */ html[data-theme="dark"] .main-content [class*="bg-green-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-emerald-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-green-5"][class*="/"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-good) 16%, var(--geo-bg)) !important; color: var(--geo-good-ink) !important; } html[data-theme="dark"] .main-content [class*="bg-yellow-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-amber-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-amber-5"][class*="/"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-yellow-5"][class*="/"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-warn) 16%, var(--geo-bg)) !important; color: var(--geo-warn-ink) !important; } html[data-theme="dark"] .main-content [class*="bg-red-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-rose-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-red-5"][class*="/"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-bad) 16%, var(--geo-bg)) !important; color: var(--geo-bad-ink) !important; } html[data-theme="dark"] .main-content [class*="bg-blue-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-blue-5"][class*="/"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-second) 16%, var(--geo-bg)) !important; color: var(--geo-second-ink) !important; } html[data-theme="dark"] .main-content [class*="text-green-"], html[data-theme="dark"] .main-content [class*="text-emerald-"] { color: var(--geo-good) !important; } html[data-theme="dark"] .main-content [class*="text-red-"], html[data-theme="dark"] .main-content [class*="text-rose-"] { color: var(--geo-bad) !important; } html[data-theme="dark"] .main-content [class*="text-yellow-"], html[data-theme="dark"] .main-content [class*="text-amber-"] { color: var(--geo-warn) !important; } /* A tinted button (bg-green-600/20, bg-indigo-600/20 and friends) measured 1.20:1 - its ink was nearly its own fill. A button is one of the two shapes; a tint is for a STATE, never for something you press. */ html .main-content button[class*="/20"], html .main-content a[class*="/20"], html .main-content button[class*="/10"], html .main-content a[class*="/10"], html .main-content button[class*="/15"], html .main-content a[class*="/15"], html .main-content button[class*="/30"], html .main-content a[class*="/30"] { background-color: transparent !important; background-image: none !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border2) !important; border-radius: var(--geo-r-ctrl) !important; } html:not([data-theme="dark"]) .main-content button[class*="/20"], html:not([data-theme="dark"]) .main-content a[class*="/20"], html:not([data-theme="dark"]) .main-content button[class*="/10"], html:not([data-theme="dark"]) .main-content a[class*="/10"], html:not([data-theme="dark"]) .main-content button[class*="/15"], html:not([data-theme="dark"]) .main-content a[class*="/15"], html:not([data-theme="dark"]) .main-content button[class*="/30"], html:not([data-theme="dark"]) .main-content a[class*="/30"] { background-color: var(--geo-surface) !important; border-color: var(--geo-border) !important; } html .main-content button[class*="/20"]:hover, html .main-content a[class*="/20"]:hover, html .main-content button[class*="/10"]:hover, html .main-content a[class*="/10"]:hover { border-color: var(--geo-accent) !important; } /* Anything else still wearing a leftover slab grey takes the card surface. */ html[data-theme="dark"] .main-content [class*="bg-gray-8"]:not(.bg-gray-800):not([style*="width:"]){ background-color: var(--geo-surface) !important; } /* A grey chip still has to be readable ("Not set" measured 2.11:1). */ html[data-theme="dark"] .main-content [class*="bg-gray-1"], html[data-theme="dark"] .main-content [class*="bg-gray-2"] { color: var(--geo-text) !important; } /* ── The second voice ───────────────────────────────────────────────────────── A link is the site's lavender. Measured: 8.2:1 on the dark ground, and the deeper step at 5.6:1 on the light one. Teal and lavender sit at almost the same lightness (1.04:1), so they never appear as two flat blocks side by side. */ .main-content a:not([class*="bg-"]):not(.site-tab-btn):not([class*="text-gray"]):not([class*="text-green"]):not([class*="text-red"]) { color: var(--geo-second); } /* ── The menu ───────────────────────────────────────────────────────────────── The row you are on is the accent on a whisper of the accent. */ html[data-theme="dark"] .sidebar a.bg-gray-700, html[data-theme="dark"] .sidebar a[aria-current="page"], html[data-theme="dark"] .sidebar .bg-gray-700 { background-color: color-mix(in oklab, var(--geo-accent) 12%, transparent) !important; color: var(--geo-accent) !important; } html[data-theme="dark"] .sidebar a:hover { background-color: var(--geo-surface2) !important; } /* A menu row is a row, not a card: no outline until it is the one you are on. */ html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .sidebar summary, html:not([data-theme="dark"]) .sidebar a, html:not([data-theme="dark"]) .sidebar summary { border-color: transparent !important; } /* A gradient BUTTON is still a button: it takes the one action colour. The brand's green-to-blue gradient stays where it is decoration, not an action. */ a[class*="bg-gradient"][class*="from-green-"]:not([style*="width:"]), button[class*="bg-gradient"][class*="from-green-"]:not([style*="width:"]), a[class*="bg-gradient"][class*="from-emerald-"]:not([style*="width:"]), button[class*="bg-gradient"][class*="from-emerald-"]:not([style*="width:"]), .ob-grad { background-image: none !important; background-color: var(--geo-accent) !important; color: var(--geo-accent-ink) !important; font-weight: 700; } /* The welcome card's wash: the brand's two colours, at a whisper. */ #ob-card .ob-hero, html[data-theme="dark"] #ob-card .ob-hero { background: linear-gradient(92deg, rgba(179,161,199,.12), rgba(0,184,181,.09)) !important; } /* ══ THE MENU THAT FOLDS AWAY ═════════════════════════════════════════════════ Edward, on the reference: "great style, even how it hides the sidebar". On a laptop the menu is 260px of permanent furniture; a work list wants that space. One button folds it to a 68px rail of icons and gives the page 192px back, and the choice is remembered. A rail, not a disappearance: every door stays on screen, one tap wide, and says its name on hover. */ @media (min-width: 768px) { .sidebar, .main-content { transition: width .22s var(--geo-ease), margin-left .22s var(--geo-ease); } body.geo-rail .sidebar { width: 68px; overflow-x: hidden; } body.geo-rail .main-content { margin-left: 68px; } /* The labels are plain text inside each row - not spans - so hiding spans left them rendering and clipped (browser check, 22 Sep). Zeroing the row's font size removes the words and keeps the icon, which is sized back explicitly. */ body.geo-rail .sidebar a, body.geo-rail .sidebar summary, body.geo-rail .sidebar button { font-size: 0 !important; justify-content: center !important; gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; position: relative; } body.geo-rail .sidebar a svg, body.geo-rail .sidebar summary svg, body.geo-rail .sidebar button svg { width: 20px !important; height: 20px !important; flex: none; margin: 0 !important; } /* The wordmark and any label with its own size: zeroed too, or they spill past the rail (browser check, 22 Sep). */ body.geo-rail .sidebar a span, body.geo-rail .sidebar a div, body.geo-rail .sidebar summary span { font-size: 0 !important; } /* Anything in the menu pinned at 260px - the account bar at the foot - follows the rail's width rather than hanging out of it. */ body.geo-rail .sidebar > *, body.geo-rail .sidebar [style*="width: 260"] { max-width: 68px !important; overflow: hidden; } /* The logo keeps its mark in the rail, at icon size. */ body.geo-rail .sidebar img { width: 28px !important; height: auto !important; object-fit: contain; } /* Group headings, the account line and any summary text step aside entirely. */ body.geo-rail .sidebar p, body.geo-rail .sidebar .text-xs.uppercase, body.geo-rail .sidebar summary > svg:last-child { display: none !important; } /* A count becomes a dot in the corner of its own icon. */ body.geo-rail .sidebar [class*="rounded-full"] { position: absolute; top: 6px; right: 12px; width: 8px !important; height: 8px !important; min-width: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0; overflow: hidden; } /* And the row says its name when the pointer rests on it. */ body.geo-rail .sidebar a[data-geo-name]:hover::after { content: attr(data-geo-name); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--geo-surface2); color: var(--geo-text); border: 1px solid var(--geo-border2); border-radius: 8px; padding: 6px 10px; font-size: 13px; white-space: nowrap; z-index: 60; } } #geo-rail-bar { display: none; position: relative; z-index: 3; } @media (min-width: 768px) { #geo-rail-bar { display: flex; justify-content: flex-end; padding: 10px 12px 0; } } body.geo-rail #geo-rail-bar { justify-content: center; padding: 10px 0 0; } #geo-rail-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--geo-surface); color: var(--geo-muted); border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl); transition: color var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease); } #geo-rail-btn:hover { color: var(--geo-text); border-color: var(--geo-border2); } /* ── Dropdowns and fields ───────────────────────────────────────────────────── A browser's own select is the one control that still looks like 2009 in a screenshot. Same height, corner and hairline as a silver button. */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-height: var(--geo-ctrl-h); padding: 8px 38px 8px 12px; border-radius: var(--geo-r-ctrl); background-color: var(--geo-surface); color: var(--geo-text); border: 1px solid var(--geo-border2); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238c8c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color var(--geo-dur) var(--geo-ease); } select:hover, input:hover, textarea:hover { border-color: var(--geo-accent); } input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input:not([type]), textarea { border-radius: var(--geo-r-ctrl); transition: border-color var(--geo-dur) var(--geo-ease); } html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input:not([type]), html[data-theme="dark"] textarea { /* A step lighter than the card with an edge you can see (30 Sep, Edward: text boxes were "just dark"; --geo-surface2 is within a shade of the navy card). Mixed from the text colour, so it sits above whatever surface the skin uses. */ background-color: color-mix(in srgb, var(--geo-text) 8%, var(--geo-surface)) !important; border-color: color-mix(in srgb, var(--geo-text) 22%, var(--geo-surface)) !important; color: var(--geo-text) !important; } html[data-theme="dark"] input[type="text"]:focus, html[data-theme="dark"] input[type="email"]:focus, html[data-theme="dark"] input[type="url"]:focus, html[data-theme="dark"] input[type="search"]:focus, html[data-theme="dark"] input[type="number"]:focus, html[data-theme="dark"] input[type="password"]:focus, html[data-theme="dark"] input:not([type]):focus, html[data-theme="dark"] textarea:focus { border-color: var(--geo-accent) !important; } input::placeholder, textarea::placeholder { color: var(--geo-muted); } /* Native controls follow the theme (26 Sep, Edward: the calendar icon was black on the dark page). Without color-scheme the browser draws date pickers, their pop-up calendar, time and number spinners and scrollbars in its light style whatever the page's theme. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* The calendar icon in the app's colours, not the browser's: the muted text colour at rest, the accent on hover and focus, drawn from one mask so both themes get it. (Firefox draws its own icon, which color-scheme above already makes light on dark.) */ input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; width: 16px; height: 16px; padding: 2px; border-radius: 4px; background: var(--geo-muted); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } input:is(:hover, :focus)::-webkit-calendar-picker-indicator { background: var(--geo-accent); } @media (max-width: 767px) { select, input, textarea { min-height: 44px; } } /* ── A page that ships its own light-only stylesheet ───────────────────────── Integrations was written light-only: in dark mode its text measured 1.10:1. Its own file now uses these tokens; this is the safety net for anything else. */ html[data-theme="dark"] .main-content pre, html[data-theme="dark"] .main-content code { background-color: var(--geo-panel) !important; color: var(--geo-text) !important; } html[data-theme="dark"] .main-content summary, html[data-theme="dark"] .main-content .muted { color: var(--geo-text2) !important; } html[data-theme="dark"] .main-content th { color: var(--geo-text2) !important; } /* ── Motion ─────────────────────────────────────────────────────────────────── Blocks arrive once, staggered; a press answers in 60ms; a wait has a shape. Every rule is inside a reduced-motion guard, and the arrival only runs with JavaScript on (html.geo-anim), so a stylesheet can never leave a page blank. */ @media (prefers-reduced-motion: no-preference) { /* backwards, not both: a fill that outlives the animation keeps a transform on the page, and every position:fixed popup inside it then opens against the page, off screen (29 Sep). */ html.geo-anim #main-content > * { animation: geoUp .34s var(--geo-ease) backwards; } html.geo-anim #main-content > *:nth-child(2) { animation-delay: .05s; } html.geo-anim #main-content > *:nth-child(3) { animation-delay: .1s; } html.geo-anim #main-content > *:nth-child(n+4) { animation-delay: .15s; } } @keyframes geoUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .geo-skel { background: linear-gradient(90deg, var(--geo-surface2) 25%, var(--geo-border2) 37%, var(--geo-surface2) 63%); background-size: 400% 100%; border-radius: 8px; color: transparent !important; } @media (prefers-reduced-motion: no-preference) { .geo-skel { animation: geoSkel 1.4s ease infinite; } } @keyframes geoSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .geo-lift { transition: transform var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease); } @media (hover: hover) { .geo-lift:hover { transform: translateY(-2px); border-color: var(--geo-border2); } } :focus-visible { outline: 2px solid color-mix(in oklab, var(--geo-accent) 65%, transparent); outline-offset: 2px; border-radius: 6px; } .geo-num, [data-geo-count], td, .tabular { font-variant-numeric: tabular-nums; } @media (min-width: 768px) { * { scrollbar-width: thin; scrollbar-color: var(--geo-border2) transparent; } } /* ── One corner ─────────────────────────────────────────────────────────────── Two pills in the same corner covered the page's own content. Help moves into the same dock as a quiet round icon, clear of the phone bar. */ #geo-dock { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 9969; display: flex; align-items: center; gap: 8px; } @media (max-width: 767px) { #geo-dock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } #geo-dock > * { position: static !important; inset: auto !important; margin: 0 !important; } #geo-dock .geo-dock-help { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--geo-surface) !important; color: var(--geo-text2) !important; border: 1px solid var(--geo-border2) !important; box-shadow: none !important; font-size: 0 !important; } #geo-dock .geo-dock-help:hover { color: var(--geo-text) !important; border-color: var(--geo-accent) !important; } #geo-dock .geo-dock-help svg { width: 18px !important; height: 18px !important; } body:has(.sidebar.open) #geo-dock, body:has(.site-sections-m[open]) #geo-dock, body.gfd-panel-open #geo-dock { display: none !important; } /* The chat launcher and the phone bar's Ask are the same one action as every other primary button, so they wear the same colour. */ #gfd-launch { background: var(--geo-accent) !important; color: var(--geo-accent-ink) !important; } /* Phones without the phone bar (client logins, 27 Sep): two floating pills sat on top of every page's own content. The chat button becomes a round ✦ in the corner (its words stay for screen readers); "Need help?" is in the menu's ? (the same form); pages leave room at the bottom. Up to 767px, where the dock rule above assumes a phone bar clients don't have. Pages WITH the phone bar (agency) are untouched: their launcher is hidden and "Need help?" stays (27 Sep review). */ @media (max-width: 767px) { body:not(:has(#geo-phonebar)) #geo-dock { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch { width: 56px; height: 56px; padding: 0; justify-content: center; font-size: 22px; position: relative !important; } body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch > span:nth-child(2) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch #gfd-badge { position: absolute !important; top: -2px; right: -2px; } body:not(:has(#geo-phonebar)) #geo-dock:has(#gfd-launch) #support-fab { display: none !important; } body:has(#gfd-launch):not(:has(#geo-phonebar)) main { padding-bottom: 96px; } } #geo-phonebar .geo-pb-ask { background: var(--geo-fill, var(--geo-accent)) !important; } #geo-phonebar .geo-pb-ask svg { stroke: var(--geo-fill-ink, var(--geo-accent-ink)) !important; } /* ── The menu's own chips ───────────────────────────────────────────────────── Edward, 22 Sep, pointing at a mustard "SOON" beside White-Label: "see the yellow". The counts and the state chips in the menu keep their meaning, in the same tints and inks as every other status on the app - not Tailwind's raw yellow-300 on a near-black rail. */ .sidebar [class*="bg-yellow-"]:not([style*="width:"]), .sidebar [class*="bg-amber-"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-warn) 20%, var(--geo-bg)) !important; color: var(--geo-warn-ink) !important; } .sidebar [class*="bg-blue-"]:not([style*="width:"]), .sidebar [class*="bg-violet-"]:not([style*="width:"]), .sidebar [class*="bg-indigo-"]:not([style*="width:"]), .sidebar [class*="bg-purple-"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-second) 22%, var(--geo-bg)) !important; color: var(--geo-second-ink) !important; } .sidebar [class*="bg-green-"]:not([style*="width:"]), .sidebar [class*="bg-emerald-"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-good) 20%, var(--geo-bg)) !important; color: var(--geo-good-ink) !important; } .sidebar [class*="bg-orange-"]:not([style*="width:"]), .sidebar [class*="bg-red-"]:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-bad) 20%, var(--geo-bg)) !important; color: var(--geo-bad-ink) !important; } /* The light page keeps its own ground under the cards (it was taking a utility's grey and matching them exactly). */ html:not([data-theme="dark"]) body { background-color: var(--geo-bg) !important; } /* ══ THE SITE SWITCHER ════════════════════════════════════════════════════════ One control at the top of the menu: the website you are on, and two taps to another. The shape is the navigation canvas's; the list behind it is decided by the server, per role. ⌘K opens it from anywhere. */ #geo-switch { padding: 10px 12px 6px; } #geo-switch-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; text-align: left; background: var(--geo-surface); color: var(--geo-text); border: 1px solid var(--geo-border); border-radius: 12px; transition: border-color var(--geo-dur) var(--geo-ease); } #geo-switch-btn:hover { border-color: var(--geo-accent); } .geo-switch-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--geo-accent) 18%, var(--geo-surface)); color: var(--geo-accent); font-size: 12px; font-weight: 700; } .geo-switch-words { flex: 1 1 auto; min-width: 0; display: block; } .geo-switch-domain { display: block; font-size: 14px; font-weight: 600; color: var(--geo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .geo-switch-sub { display: block; font-size: 12px; color: var(--geo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .geo-switch-chev { flex: none; color: var(--geo-muted); } /* In the rail it is the mark alone - still the first thing, still one tap. */ @media (min-width: 768px) { body.geo-rail #geo-switch { padding: 10px 0 6px; } body.geo-rail #geo-switch-btn { justify-content: center; padding: 8px 0; min-height: 44px; } body.geo-rail .geo-switch-words, body.geo-rail .geo-switch-chev { display: none !important; } body.geo-rail .geo-switch-mark { font-size: 12px !important; } } /* The panel: a sheet from the top on a laptop, the whole screen on a phone. */ #geo-switch-panel { position: fixed; inset: 0; z-index: 9975; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } #geo-switch-panel[hidden] { display: none; } #geo-switch-card { width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: var(--geo-r-card); overflow: hidden; } @media (prefers-reduced-motion: no-preference) { #geo-switch-card { animation: geoUp .18s var(--geo-ease) both; } } #geo-switch-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--geo-border); } #geo-switch-title { display: block; font-size: 12px; font-weight: 600; color: var(--geo-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } #geo-switch-q { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--geo-surface2); color: var(--geo-text); border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl); font-size: 15px; } .geo-switch-scope { margin: 8px 2px 0; font-size: 12px; color: var(--geo-muted); } #geo-switch-list { overflow-y: auto; padding: 6px; margin: 0; list-style: none; } #geo-switch-list .geo-switch-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--geo-muted); } #geo-switch-list li[role="option"] a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--geo-r-ctrl); color: var(--geo-text); text-decoration: none; } #geo-switch-list li[aria-selected="true"] a, #geo-switch-list li[role="option"] a:hover { background: var(--geo-surface2); } #geo-switch-empty { padding: 16px; margin: 0; color: var(--geo-muted); font-size: 14px; } /* On a phone the switcher rides in the top bar: the website you are in IS the title (the navigation canvas's shape). In the drawer it would be two taps deep and behind an overlay - measured, 22 Sep. */ #geo-switch[data-in-header] { flex: 1 1 auto; min-width: 0; padding: 0 0 0 10px; } #geo-switch[data-in-header] #geo-switch-btn { min-height: 44px; padding: 4px 8px; border-color: transparent; background: transparent; } #geo-switch[data-in-header] #geo-switch-btn:hover { border-color: var(--geo-border); } #geo-switch[data-in-header] .geo-switch-sub { display: none; } @media (max-width: 767px) { #geo-switch-panel { padding: 8px; align-items: flex-start; } #geo-switch-card { max-height: 86vh; } } /* ── A full-height wrapper is the GROUND, not a card ────────────────────────── Measured live, 22 Sep, across 13 pages: /, /notifications, /leads and /widgets wrap everything in
. In dark mode that utility became the muted surface, so those pages showed a big lighter slab where every other page showed the ground - Edward: "that white background and the dark bg seem a different css... many pages odd like that". A wrapper that tall is the page itself, so it takes no fill at all. */ html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-5"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="min-h-"][class*="bg-white"]:not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="min-h-screen"][class*="bg-gray-5"]:not([style*="width:"]){ background-color: transparent !important; } /* The same for a wash behind a whole section (analytics' purple-to-blue). */ html[data-theme="dark"] .main-content [class*="bg-gradient"][class*="/5"]:not([style*="width:"]){ background-image: none !important; background-color: transparent !important; } /* ── The brand row: logo and the fold button on ONE line ────────────────────── Edward, 22 Sep: "the logo needs to be top, next to the icon that opens and closes the menu". */ #geo-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 2px; } #geo-brandrow > a { flex: 1 1 auto; min-width: 0; } body.geo-rail #geo-brandrow { flex-direction: column; gap: 6px; padding: 10px 0 2px; } /* ══ WHAT THE LIVE SWEEP MEASURED, 22 Sep (design_sweep.cjs, 22 pages) ════════ Each rule answers a measured number, not an impression. */ /* 1. The initials tile on /clients and /tasks: white on bg-gray-600 was 3.18:1. */ html[data-theme="dark"] .main-content [class*="bg-gray-6"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-gray-5"]:not([class*="min-h"]):not([style*="width:"]){ background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; } /* 2. Amber and yellow BUTTONS ("Mark as client" measured 1.02:1, "Change Password" was pure yellow). Amber is a state; a button is one of the two shapes. */ html[data-theme="dark"] button[class*="bg-amber-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-amber-5"]:not([style*="width:"]), html[data-theme="dark"] button[class*="bg-yellow-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-yellow-5"]:not([style*="width:"]), html[data-theme="dark"] button[class*="bg-orange-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-orange-5"]:not([style*="width:"]){ background-color: transparent !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border2) !important; } html[data-theme="dark"] button[class*="bg-amber-5"]:hover, html[data-theme="dark"] button[class*="bg-yellow-5"]:hover { border-color: var(--geo-accent) !important; } /* 3. Small chips that were unreadable on their own fill ("Premium unlock" 1.60:1, "No Permission" 2.98:1): a chip takes the page's ink unless it is a status, and a status takes its own lighter ink (set further up). */ /* A chip takes the page ink - unless its fill is bright, where the ink must stay dark. This rule is more specific than the bright-chip rule below it, so without these exclusions it won: "Premium unlock" measured 1.60:1 live, 22 Sep. */ html[data-theme="dark"] .main-content span[class*="px-2"][class*="text-xs"]:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="bg-amber-4"]):not([class*="bg-amber-3"]):not([class*="bg-yellow-4"]):not([class*="bg-yellow-3"]):not([class*="bg-lime-4"]):not([class*="bg-green-4"]) { color: var(--geo-text) !important; } /* 4. Buttons the sweep measured at 24 and 30px tall. */ .work-buy, .kit-copy-btn, .main-content button[class*="py-0.5"], .main-content button[class*="py-1 "] { min-height: 36px; } @media (max-width: 767px) { .work-buy, .kit-copy-btn { min-height: 44px; } } /* 5. A bold run inside a tinted note kept its own dark ink from the note's light original (integrations, 2.18:1). Inside the app's own surfaces it inherits. */ html[data-theme="dark"] .main-content [style*="color-mix"] strong, html[data-theme="dark"] .main-content [style*="var(--geo"] strong { color: inherit !important; } /* ══ NEXT ACTIONS ═════════════════════════════════════════════════════════════ The work list on a site's Fixes tab. Borrowed shapes from the competitor screen Edward sent (states with counts, impact and effort as three bars, one progress number, an export); our colours, and our "Solve it". */ .geo-na-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--geo-muted); display: inline-block; } .geo-na-dot--todo { background: var(--geo-warn); } .geo-na-dot--done { background: var(--geo-good); } .geo-na-dot--ignored { background: var(--geo-muted); } .geo-na-count { font-variant-numeric: tabular-nums; color: var(--geo-muted); } .geo-chip[aria-pressed="true"] .geo-na-count { color: var(--geo-text); } .geo-na-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--geo-muted); } .geo-na-progress-track { width: 90px; height: 6px; border-radius: 999px; background: var(--geo-surface2); overflow: hidden; } .geo-na-progress-fill { display: block; height: 100%; background: var(--geo-accent); transition: width .3s var(--geo-ease); } .geo-na-showing { font-size: 12px; color: var(--geo-muted); } /* Impact and effort: three bars AND the word, because colour alone is not a label. */ .geo-na-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; } .geo-na-pair { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .geo-na-key { color: var(--geo-muted); } .geo-na-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .geo-na-bars i { width: 3px; height: 6px; border-radius: 1px; background: var(--geo-border2); display: block; } .geo-na-bars i:nth-child(2) { height: 9px; } .geo-na-bars i:nth-child(3) { height: 12px; } .geo-na-bar--high i.on { background: var(--geo-good); } .geo-na-bar--mid i.on { background: var(--geo-warn); } .geo-na-bar--low i.on { background: var(--geo-muted); } .geo-na-level { font-size: 12px; color: var(--geo-text2); } .geo-na-quickwin { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--geo-accent) 16%, var(--geo-bg)); color: var(--geo-accent); } [data-na-row][hidden], [data-na-group][hidden] { display: none !important; } @media (max-width: 767px) { #geo-actions-bar select { width: 100%; } } /* ── Tip banners ────────────────────────────────────────────────────────────── Measured live, 22 Sep: the "Getting started" banner was bg-blue-950/40 - rgba(23,37,84,.4), a blue slab on a neutral page (Edward: "so many inconsistencies in style"). A tip is a quiet note, not a colour event. */ html[data-theme="dark"] .main-content .bp-banner, html[data-theme="dark"] .main-content [class*="bg-blue-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-indigo-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-slate-9"]:not([style*="width:"]){ background-color: var(--geo-surface) !important; border-color: var(--geo-border) !important; color: var(--geo-text2) !important; } html[data-theme="dark"] .main-content .bp-banner strong, html[data-theme="dark"] .main-content .bp-banner b { color: var(--geo-text) !important; } html[data-theme="dark"] .main-content .bp-banner a { color: var(--geo-second) !important; } /* ── Every grey, including the ones with an opacity suffix ──────────────────── The sweep (widened to catch hue 200-230 on 22 Sep) found Tailwind's blue-tinted greys still painting inputs, table heads and panels: bg-gray-700/50 rgb(55,65,81), bg-gray-900 rgb(17,24,39), bg-gray-950 rgb(3,7,18). Those are a different temperature from our neutrals, which is exactly what "some backgrounds don't match" looks like. One mapping, every variant. */ html[data-theme="dark"] .main-content [class*="bg-gray-7"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; } html[data-theme="dark"] .main-content [class*="bg-gray-8"]:not([style*="width:"]){ background-color: var(--geo-surface) !important; } html[data-theme="dark"] .main-content [class*="bg-gray-9"]:not([style*="width:"]){ background-color: var(--geo-panel) !important; } html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-9"]:not([style*="width:"]){ background-color: transparent !important; } html[data-theme="dark"] .main-content input[class*="bg-gray-"]:not([style*="width:"]), html[data-theme="dark"] .main-content select[class*="bg-gray-"]:not([style*="width:"]), html[data-theme="dark"] .main-content textarea[class*="bg-gray-"]:not([style*="width:"]), html[data-theme="dark"] .main-content select, html[data-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]) { /* The same lift as the base dark rule (30 Sep): a step lighter than the card, a visible edge. */ background-color: color-mix(in srgb, var(--geo-text) 8%, var(--geo-surface)) !important; border-color: color-mix(in srgb, var(--geo-text) 22%, var(--geo-surface)) !important; color: var(--geo-text) !important; } html[data-theme="dark"] .main-content select:focus, html[data-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="dark"] .main-content textarea:focus { border-color: var(--geo-accent) !important; } html[data-theme="dark"] .main-content thead, html[data-theme="dark"] .main-content th { background-color: transparent !important; } /* An icon tile in a solid brand blue or pink is decoration, not a state. */ html[data-theme="dark"] .main-content [class*="bg-blue-6"]:not(a):not(button):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-pink-6"]:not(a):not(button):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-cyan-6"]:not(a):not(button):not([style*="width:"]){ background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; } /* ── The last thirteen, each one measured ───────────────────────────────────── Dashboard quick links still carried a teal-black and a pink-black tint (rgb(12,42,46) and rgb(42,15,30)); "Watch client tutorial video" wore the pink one too; the site's sandwich button kept a blue-grey (rgb(31,41,55)); "Reset" was 34px with 4px corners; and the workspace buttons were 36px on a phone. */ html[data-theme="dark"] .main-content a[class*="bg-teal-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content a[class*="bg-pink-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content a[class*="bg-cyan-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content a[class*="bg-fuchsia-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content button[class*="bg-pink-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content button[class*="bg-teal-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-rose-9"]:not([style*="width:"]){ background-color: var(--geo-surface) !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border) !important; } html[data-theme="dark"] .site-sections-m > summary, html[data-theme="dark"] .site-sections-m { background-color: var(--geo-surface) !important; border-color: var(--geo-border) !important; } .main-content button, .main-content a[class*="bg-"], .geo-btn { border-radius: var(--geo-r-ctrl); } .main-content button[class*="py-1.5"], .main-content button[class*="py-1 "] { min-height: 36px; } @media (max-width: 767px) { .work-buy, .main-content button[class*="py-1.5"] { min-height: 44px !important; } } /* The GHL mark measured 4.32:1 - one step brighter clears 4.5. */ html[data-theme="dark"] .int-card .ghl-mark, html[data-theme="dark"] .int-card.featured h3 .ghl-mark, html[data-theme="dark"] .ghl-mark { color: var(--geo-text) !important; background: var(--geo-surface2) !important; } /* ── A bright chip keeps its dark ink ───────────────────────────────────────── "Premium unlock" is bg-amber-400 with text-gray-900: a light-mode chip, dark ink on a bright fill. The dark theme flipped that ink to near-white and it measured 1.60:1 live. On a bright fill the ink stays dark, whatever the theme. */ html[data-theme="dark"] .main-content span[class*="bg-amber-4"], html[data-theme="dark"] .main-content span[class*="bg-yellow-4"], html[data-theme="dark"] .main-content span[class*="bg-lime-4"], html[data-theme="dark"] .main-content span[class*="bg-green-4"], html[data-theme="dark"] .main-content span[class*="bg-amber-3"], html[data-theme="dark"] .main-content span[class*="bg-yellow-3"], html[data-theme="dark"] .main-content div[class*="bg-amber-4"] { color: #1a1305 !important; } /* ...but a BUTTON in those classes has had its fill removed (it is the silver outline now), so it takes the page ink. Two of my own rules were fighting and the result measured 1.14:1 live, 22 Sep. */ html[data-theme="dark"] .main-content button[class*="bg-amber-"], html[data-theme="dark"] .main-content button[class*="bg-yellow-"], html[data-theme="dark"] .main-content a[class*="bg-amber-"], html[data-theme="dark"] .main-content button[class*="text-amber-9"] { color: var(--geo-text) !important; } /* A red text-only label ("Delete") measured 4.07:1: the mapped ink was still one step too dark for 12px. Text-only reds take the lighter step. */ html[data-theme="dark"] .main-content button[class*="text-red-"]:not([class*="bg-"]), html[data-theme="dark"] .main-content a[class*="text-red-"]:not([class*="bg-"]) { color: #ffb4b4 !important; } /* ══ A STATE IS AN EDGE AND A CHIP, NEVER A WASH ══════════════════════════ Edward, 23 Sep, on /actions: "even here has worn colours", and "the styling for every page needs to be universal". He is right on both counts. Cards carrying a status tint (bg-amber-50, bg-red-50 and friends) washed the WHOLE card in that colour, so a list of notices read as a row of muddy brown slabs. The rule, for every page at once: a card is always the card surface. Its state shows as a 3px edge on the left and the chip it already carries. Nothing else changes - the chips, the icons and the words keep their meaning. WHO THIS REACHES, and why it is written this way (rewritten 23 Sep). It used to say [class*="rounded-"][class*="bg-blue-5"]:not([style*="width:"]), which is not a description of a card: - [class*="rounded-"] also matches rounded-full, so the FILLED part of the "Checks Passing" progress bar was treated as a status card and painted the card surface. The surface is the page colour, so an 8/10 bar drew as almost empty. The number on screen was wrong, not just the styling. - [class*="bg-blue-5"] also matches the SOLID bg-blue-500. A solid 500 is a filled element - a bar:not([style*="width:"]), a dot, a badge - not a pale wash, so it never belonged here. Both are named now: [class~="..."] matches a whole token in the class list, and the see-through forms are matched by the trailing SLASH (bg-blue-500/), which the solid class does not have. A round-ended element is a pill, a dot or a bar, and is excluded outright - it is never a status card. Third time a [class*=] substring has done real damage, so this family is now named, not guessed. */ /* dark */ html[data-theme="dark"] .main-content [class~="bg-amber-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-amber-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-amber-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-amber-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-amber-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class~="bg-yellow-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-yellow-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-yellow-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-yellow-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-yellow-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class~="bg-orange-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-orange-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-orange-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-orange-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-orange-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-warn) !important; } html[data-theme="dark"] .main-content [class~="bg-red-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-red-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-red-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-red-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-red-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class~="bg-rose-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-rose-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-rose-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-rose-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-rose-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-bad) !important; } html[data-theme="dark"] .main-content [class~="bg-green-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-green-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-green-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-green-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-green-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class~="bg-emerald-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-emerald-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-emerald-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-emerald-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-emerald-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-good) !important; } html[data-theme="dark"] .main-content [class~="bg-blue-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-blue-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-blue-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-blue-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-blue-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class~="bg-indigo-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class~="bg-indigo-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html[data-theme="dark"] .main-content [class*="bg-indigo-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-indigo-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-indigo-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-second) !important; } /* the same in light mode, where the wash was a pastel slab */ html:not([data-theme="dark"]) .main-content [class~="bg-amber-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-amber-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-amber-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-amber-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-amber-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class~="bg-yellow-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-yellow-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-yellow-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-yellow-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-yellow-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class~="bg-orange-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-orange-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-orange-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-orange-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-orange-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-warn) !important; } html:not([data-theme="dark"]) .main-content [class~="bg-red-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-red-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-red-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-red-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-red-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class~="bg-rose-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-rose-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-rose-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-rose-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-rose-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-bad) !important; } html:not([data-theme="dark"]) .main-content [class~="bg-green-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-green-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-green-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-green-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-green-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class~="bg-emerald-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-emerald-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-emerald-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-emerald-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-emerald-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-good) !important; } html:not([data-theme="dark"]) .main-content [class~="bg-blue-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-blue-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-blue-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-blue-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-blue-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class~="bg-indigo-50"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class~="bg-indigo-100"]:not(span):not(button):not(a):not([class~="rounded-full"]), html:not([data-theme="dark"]) .main-content [class*="bg-indigo-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-indigo-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-indigo-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){ background-color: var(--geo-surface) !important; border-left: 3px solid var(--geo-second) !important; } /* ── A page that never sets a theme ─────────────────────────────────────────── The sign-in, apply, partner and public pages render their own without a data-theme, so every rule above skipped them: they kept the old blue-grey and, wherever a wrapper was transparent, the browser's white body showed through. They are dark by design, so they take the dark ground and ink directly. */ html:not([data-theme]) body { background-color: #030303; color: #fafafa; font-family: var(--geo-font); } html:not([data-theme]) .bg-gray-900, html:not([data-theme]) .bg-gray-950 { background-color: #030303 !important; } html:not([data-theme]) .bg-gray-800 { background-color: #0a0a0a !important; } html:not([data-theme]) .bg-gray-700 { background-color: #1f1f1f !important; } html:not([data-theme]) .border-gray-700, html:not([data-theme]) .border-gray-800 { border-color: #242424 !important; } html:not([data-theme]) .text-gray-300, html:not([data-theme]) .text-gray-400 { color: #d9d9d9 !important; } html:not([data-theme]) .text-gray-500 { color: #9a9a9a !important; } html:not([data-theme]) a[class*="bg-green-5"]:not([style*="width:"]), html:not([data-theme]) button[class*="bg-green-5"]:not([style*="width:"]), html:not([data-theme]) a[class*="bg-blue-6"]:not([style*="width:"]), html:not([data-theme]) button[class*="bg-blue-6"]:not([style*="width:"]), html:not([data-theme]) button[type="submit"][class*="bg-"]:not([style*="width:"]){ background-image: none !important; background-color: #00b8b5 !important; color: #04201f !important; font-weight: 700; } /* ══ THE COMPONENT LAYER ══════════════════════════════════════════════════════ Edward, 23 Sep: "many inconsistency, let's get it right", "the links white too - we need this universal to the style we have". These are the shapes that repeat on every page, so they are settled once, here, rather than page by page. */ /* 1. A LINK looks like a link. Anywhere in the page, a link that is not a button, a tab or a status carries the second voice - the site's lavender. Underline only on hover, so a list of links does not become a fence. */ .main-content a:not([class*="bg-"]):not(.site-tab-btn):not([role="tab"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-yellow"]):not(.geo-chip):not([data-na-solve]) { color: var(--geo-second); text-decoration: none; } .main-content a:not([class*="bg-"]):not(.site-tab-btn):hover { text-decoration: underline; text-underline-offset: 3px; } /* ...but a link that IS the row's title stays ink, with the lavender on hover, so a table does not read as a wall of coloured text. */ .main-content td a:not([class*="bg-"]), .main-content th a:not([class*="bg-"]), .main-content h1 a, .main-content h2 a, .main-content h3 a { color: var(--geo-text); } .main-content td a:not([class*="bg-"]):hover { color: var(--geo-second); } /* 2. A ROW OF BUTTONS is one height and one shape. Three buttons side by side at 36, 40 and 44px (View Results · View Site · Run Audit, 23 Sep) reads as three unrelated things. */ /* NOT a link that is itself a row. A whole-row link (Home's Client Health, list rows) carries a background and its own `flex`/`grid`/`block` layout; made inline-flex it sized to its content, and one long client name pushed the page 499px wide on a 390px phone (25 Sep). Nor a CARD that is a link (padding on every side, p-5): its title, number and "View billing" were laid out side by side in one row. */ .main-content button:not(.geo-chip):not(.geo-own-colour):not([class*="rounded-full"]), .main-content a[class*="bg-"]:not(.geo-chip):not([class*="rounded-full"]):not(.flex):not(.grid):not(.block):not([class^="p-"]):not([class*=" p-"]), .main-content input[type="submit"] { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--geo-r-ctrl); font-size: 14px; } @media (max-width: 767px) { .main-content button:not(.geo-chip):not(.geo-own-colour), .main-content a[class*="bg-"]:not(.geo-chip):not(.geo-own-colour) { min-height: 44px; } } /* 3. A STATUS PILL keeps its words on one line, with the date beside it rather than wrapped inside it ("Active (Sep 7, 2026)" was three lines, 23 Sep). */ .main-content [class*="rounded-full"][class*="px-"], .main-content .geo-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; } .main-content [class*="rounded-full"] small, .main-content [class*="rounded-full"] .geo-pill-when { color: var(--geo-muted); font-size: 11px; } /* 4. THE SUPPORT BUTTON says what it is. An unlabelled circle in a corner is a guess; a word above it is an invitation (Edward: "the support icon needs the text above where it says here to help"). */ #geo-dock { flex-direction: column; align-items: flex-end; gap: 10px; } #geo-dock .geo-dock-help { position: relative; } #geo-dock .geo-dock-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--geo-muted); background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 999px; padding: 3px 10px; margin-bottom: 2px; white-space: nowrap; } @media (hover: hover) { #geo-dock:hover .geo-dock-label { color: var(--geo-text); border-color: var(--geo-border2); } } /* ══ LIGHT MODE, THE SAME RULES ═══════════════════════════════════════════════ Edward, 23 Sep: "this light mode looks bad", on the services marketplace - a mid-grey slab behind the price, and four buttons in four different colours (teal, amber, grey, red) on one card. The rules are the dark ones, applied. */ /* A block behind a figure is the quiet surface, not a grey slab. */ html:not([data-theme="dark"]) .main-content [class*="bg-gray-4"]:not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-gray-5"]:not([class*="min-h"]):not([style*="width:"]), html:not([data-theme="dark"]) .main-content [class*="bg-gray-6"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; } html:not([data-theme="dark"]) .main-content [class*="bg-gray-4"] [class*="text-gray-"], html:not([data-theme="dark"]) .main-content [class*="bg-gray-5"] [class*="text-gray-"] { color: var(--geo-text2) !important; } /* Buttons: one primary, the rest silver, and destroying is an OUTLINE - a filled red block beside three other colours is the loudest thing on a calm card. */ html:not([data-theme="dark"]) button[class*="bg-amber-"]:not([style*="width:"]), html:not([data-theme="dark"]) a[class*="bg-amber-"]:not([style*="width:"]), html:not([data-theme="dark"]) button[class*="bg-yellow-"]:not([style*="width:"]), html:not([data-theme="dark"]) a[class*="bg-yellow-"]:not([style*="width:"]), html:not([data-theme="dark"]) button[class*="bg-gray-2"]:not([style*="width:"]), html:not([data-theme="dark"]) button[class*="bg-gray-3"]:not([style*="width:"]){ background-color: var(--geo-surface) !important; color: var(--geo-text) !important; border: 1px solid var(--geo-border2) !important; } button[class*="bg-red-5"]:not([style*="width:"]), button[class*="bg-red-6"]:not([style*="width:"]), a[class*="bg-red-5"]:not([style*="width:"]), a[class*="bg-red-6"]:not([style*="width:"]), button[class*="bg-rose-5"]:not([style*="width:"]), button[class*="bg-rose-6"]:not([style*="width:"]){ background-color: transparent !important; color: var(--geo-bad) !important; border: 1px solid color-mix(in oklab, var(--geo-bad) 45%, var(--geo-border)) !important; font-weight: 600; } button[class*="bg-red-5"]:hover:not([style*="width:"]), button[class*="bg-red-6"]:hover:not([style*="width:"]), a[class*="bg-red-6"]:hover:not([style*="width:"]){ background-color: color-mix(in oklab, var(--geo-bad) 14%, transparent) !important; } /* A "featured" state is a star and a quiet mark, never a filled amber button. */ html:not([data-theme="dark"]) .main-content [class*="text-amber-"], html:not([data-theme="dark"]) .main-content [class*="text-yellow-"] { color: var(--geo-warn) !important; } /* A card's top edge in light mode follows the same rule as dark: a hairline, and the state on the left edge only. */ html:not([data-theme="dark"]) .main-content [class*="border-t-4"], html:not([data-theme="dark"]) .main-content [class*="border-t-2"] { border-top-width: 1px !important; border-top-color: var(--geo-border) !important; } /* ── Light mode: the same shapes as dark ────────────────────────────────────── Edward's screens, 23 Sep: a "Run Audit" button so faint it read as disabled, and a row of buttons at three weights. In light, a secondary button is a white surface with a visible hairline and full-strength ink - never grey-on-grey. */ /* ...but never an accent button: this rule was stealing the ink off the teal ("Add the business details" measured 2.73:1 in light, 23 Sep). */ /* ...and only on something DRAWN as a button (it has a fill or a border). A bare