/* Shared across every converted page: colour tokens (light + dark), the debug grid overlay, and the two corner toggles (grid, dark mode). Values and rules are ported byte-for-byte from automate-spike.css, the page this pattern was proven and verified on this session — not re-derived per page, so there is exactly one place to fix if any of it is ever wrong. Each converted page's own inline styles reference these tokens by name (color: var(--c-ink-text) etc.) instead of literal hex, so light mode renders pixel-identical to what the page looked like before conversion, and [data-theme="dark"] on is the only thing that changes anything. --c-action-transact (the Pay-now/Subscribe purple) and its hover pair are included below: counsel.html's Subscribe button and automate.html's pay/checkout buttons both need it as of the six-page conversion that added them. Hover shades are this rollout's own choice (a lighter tint of the resting purple in each mode) — the base #4c3575/#6B4E9E pair was specified directly, the hover was not. */ :root { --row: 21px; --cols: 12; --rgb-ink: 20, 24, 31; --c-ink-text: #14181F; --c-panel-dark: #14181F; --c-action-dark: #14181F; --c-on-action: #FBFBF9; --c-on-accent: #14181F; --c-accent-on-panel: #AD7A1E; --c-ink-2: #22282F; --c-ink-3: #2A303A; --c-ink-4: #1B212B; --c-ink-5: #2C3440; --c-muted-1: #5B6470; --c-muted-2: #6A665A; --c-muted-3: #6E6959; --c-muted-4: #75705D; --c-muted-5: #8A93A0; --c-muted-6: #A8B0BA; --c-muted-7: #C7CDD4; --c-border-1: #E4E1D8; --c-border-2: #EFEDE6; --c-border-3: #EAE8E1; --c-border-4: #D8D5CB; --c-border-5: #DCD9CF; --c-border-6: #DCD8CE; --c-border-7: #F1EFE8; --c-border-8: #F2F0EA; --c-border-gold-1: #EDE3CE; --c-border-gold-2: #F0DFB8; --c-bg-1: #FBFBF9; --c-bg-2: #F4F3EE; --c-bg-3: #F1F0EA; --c-bg-4: #FAFAF7; --c-bg-5: #FEFEFC; --c-bg-6: #FDF6E7; --c-bg-7: #EAF4F5; --c-surface-flush: #FFFFFF; --c-surface-raised: #FFFFFF; --c-surface-float: #FFFFFF; --c-gold: #D99A28; --c-gold-hover: #C4871A; --c-action-transact: #4c3575; --c-action-transact-hover: #5d4189; /* automate-spike.html's own dark value for this token (#B8862A, via --dark-gold-ink) was only ever checked against --dark-bg-0/1/2 -- harmless there since its only two consumers, the discovery band's list-dashes and eyebrow text, use --c-accent-on-panel instead (specifically because gold-ink-on-a-gold-flipped-panel would be illegible), and never sit on --dark-bg-3. impact.html uses --c-gold-ink directly on real --dark-bg-3 surfaces (era-dashes, download-tray tags), where #B8862A measured 4.10:1, short of 4.5:1. #CC9838 clears it at 5.13:1. Backported into automate-spike.css's own --dark-gold-ink alongside this. */ --c-gold-ink: #95660F; --c-teal: #1B6E79; --c-red: #B4442F; /* --c-text-on-panel: text that needs to stay dark-ink even in dark mode because the panel it's actually on top of turns gold rather than staying dark (--c-panel-dark's behaviour) -- a scoped override applied per-selector in dark mode, not a token with its own light value, since in light mode this text just uses whatever its own base muted/ink token already gives it. */ --c-text-on-panel: #2A2010; } [data-theme="dark"] { --c-ink-text: #E8E6E0; --c-panel-dark: #D99A28; --c-action-dark: #2A303A; --c-on-action: #E8E6E0; /* --c-on-accent NOT overridden -- #14181F in both modes, on purpose: it sits on --c-gold/--c-teal, neither of which changes. */ --c-accent-on-panel: #14181F; --c-ink-2: #E8E6E0; --c-ink-3: #333B47; --c-ink-4: #333B47; --c-ink-5: #2E3540; --c-muted-1: #A8AFB9; /* -2/-3 (#9DA2A6) and -4 (#999EA2) lifted again from automate-spike's own dark-text-mute/-faint values (#8F9498/#868B92) -- those only clear --dark-bg-0/1/2 (4.33-5.81:1); impact.html's download-tray panels sit on --c-surface-float = --dark-bg-3, where the old values landed at 3.87-4.33:1. Same background cluster --dark-line- soft was checked against earlier this session, just missed for this token pair since automate-spike.html itself never puts muted text on that specific surface. */ --c-muted-2: #9DA2A6; --c-muted-3: #9DA2A6; --c-muted-4: #999EA2; --c-muted-5: #A8AFB9; --c-muted-6: #A8AFB9; --c-muted-7: #E8E6E0; --c-border-1: #2E3540; --c-border-2: #3A4250; --c-border-3: #2E3540; --c-border-4: #2E3540; --c-border-5: #2E3540; --c-border-6: #3A4250; --c-border-7: #3A4250; --c-border-8: #3A4250; --c-border-gold-1: #4A3D1F; --c-border-gold-2: #4A3D1F; --c-bg-1: #14181F; --c-bg-2: #1A1F28; --c-bg-3: #1A1F28; --c-bg-4: #222832; --c-bg-5: #2A303A; --c-bg-6: #2B2418; --c-bg-7: #1C3438; --c-surface-flush: #1A1F28; --c-surface-raised: #222832; --c-surface-float: #2A303A; --c-gold: #D99A28; --c-gold-hover: #E5AC42; --c-action-transact: #6B4E9E; --c-action-transact-hover: #7d5cb0; /* Lifted from automate-spike's own #B8862A -- see the light-mode comment above. #CC9838 clears the worst case (--dark-bg-3, 4.10:1 -> 5.13:1) with real margin, not a bare pass. */ --c-gold-ink: #CC9838; --c-teal: #4FA9B4; --c-red: #D97A63; /* Dark-mode-only pair for a gold/accent-styled button that sits directly on --c-panel-dark (e.g. impact.html's "Book a discovery call") -- --c-panel-dark flips to the same gold as --c-gold here, so a button that just keeps --c-gold/--c-on-accent nearly vanishes into its own panel. A border-only outline was tried first and judged too weak for a primary CTA; this is a full solid-fill swap instead. Deliberately no :root/light-mode counterpart -- light mode keeps whatever gold/on-accent styling the button's own inline style already gives it, completely untouched, and these tokens are applied only from inside a [data-theme="dark"] rule, never from a resting/hover inline style that would need a light-mode fallback to stay theme-safe. */ --c-btn-on-gold-bg: #14181F; --c-btn-on-gold-text: #E8E6E0; } /* ---------- grid overlay ---------- */ /* Corner controls -- the two places a spreadsheet actually keeps view controls: the corner cell where the row gutter meets the column strip (.tk-corner-toggle--grid, inside .tk-row-gutter__head) and the bottom-left of the tab bar (.tk-corner-toggle--theme, inside .tk-tabbar__gutter). Checkbox nested inside its own label and stretched to fill it -- native hit area, no for="" pairing needed, and reliably clickable/keyboard-focusable (a 1x1px hidden-checkbox version tried first on automate-spike.html was not). */ .tk-corner-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-muted-3); cursor: pointer; } .tk-corner-toggle:hover { color: var(--c-ink-text); } .tk-corner-toggle__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .tk-corner-toggle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .tk-corner-toggle:has(.tk-corner-toggle__input:checked) { background: var(--c-action-dark); color: var(--c-on-action); } .tk-corner-toggle:has(.tk-corner-toggle__input:checked):hover { color: var(--c-on-action); } .tk-corner-toggle:has(.tk-corner-toggle__input:focus-visible) { outline: 2px solid var(--c-gold); outline-offset: -2px; } .tk-corner-toggle__icon { display: block; pointer-events: none; } /* .tk-row-gutter__head is taller than one row (a sticky spacer matching the header's own height) -- only its bottom var(--row) is the actual visual cell, so the toggle is pinned to that sliver. */ .tk-corner-toggle--grid { position: absolute; bottom: 0; left: 0; right: 0; height: var(--row); } /* Debug grid lines: pale hairlines matching the letter strip/row gutter's own border weight, behind content (negative z-index, .tk-main needs its own stacking context -- see each page's own .tk-main-equivalent rule), full page height (top/height set by _measureGridOverlay from real DOM, not a formula), columns read directly off the live letter strip's own cells so there is exactly one source of truth for where a column line actually is. */ .tk-grid-lines { display: none; position: absolute; left: 0; right: 0; pointer-events: none; z-index: -1; } body:has(#tk-grid-check:checked) .tk-grid-lines { display: block; } .tk-grid-lines__cols { position: absolute; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } .tk-grid-lines__col { border-left: 1px solid rgba(var(--rgb-ink), .09); } .tk-grid-lines__col:first-child { border-left: 0; } .tk-grid-lines__rows { position: absolute; inset: 0; background-image: repeating-linear-gradient(rgba(var(--rgb-ink), .07) 0 1px, transparent 1px var(--row)); } [data-theme="dark"] .tk-grid-lines__col { border-left-color: rgba(232, 230, 224, .10); } [data-theme="dark"] .tk-grid-lines__col:first-child { border-left: 0; } [data-theme="dark"] .tk-grid-lines__rows { background-image: repeating-linear-gradient(rgba(232, 230, 224, .07) 0 1px, transparent 1px var(--row)); } /* Base (light-mode) border for the letter-strip and row-gutter cells -- moved here from each page's own inline style so the dark override below can actually win (inline style beats any class selector, so the border had to leave the inline attribute to become themeable at all). Same rgba/--rgb-ink weight the cells already used. */ .tk-colstrip__cell { border-left: 1px solid rgba(var(--rgb-ink), .09); } .tk-colstrip__cell:first-child { border-left: 0; } .tk-row-gutter__n { border-bottom: 1px solid rgba(var(--rgb-ink), .07); } [data-theme="dark"] .tk-colstrip__cell { border-color: rgba(232, 230, 224, .12); } [data-theme="dark"] .tk-row-gutter__n { border-color: rgba(232, 230, 224, .12); } /* ---------- header/nav touch targets ---------- */ /* Same invisible ::before hit-area technique as .tk-tray-hit and .tk-corner-toggle above, applied to the header logo link, the "Talk to us" CTA, and the three tab-bar product links -- all flagged by the QA harness's touch-target check on every page, width and engine (27-42px tall at their own visible size, all under the 44x44 minimum). Deliberately NOT a fixed 44x44 like .tk-tray-hit's own rule: that's safe there because those buttons are 30x30, smaller than 44 in both axes, so a fixed 44x44 box only ever enlarges the hit area. These five elements are already wider than 44px (116-170px) -- a fixed 44px-wide box centered on them would be NARROWER than their own visible width, shrinking the tappable area at the left/right edges instead of only fixing the height deficit. max(44px, 100%) in each axis fixes only the dimension that's actually short (height, in every case here) and never shrinks a dimension already >=44px -- the element's own visible size and position are unchanged, this is purely an invisible, non-layout-affecting hit-area addition. */ .tk-nav-hit { position: relative; } .tk-nav-hit::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(44px, 100%); height: max(44px, 100%); transform: translate(-50%, -50%); } /* ---------- switch toggle ---------- */ /* Checkbox styled as a track+thumb switch rather than a native checkbox -- same underlying "real checkbox, opacity 0, sibling paints the visible control" pattern as .tk-corner-toggle above, so this stays consistent with the one toggle pattern already proven on every page rather than inventing a second one. Colour comes entirely from existing tokens (--c-border-5 off, --c-action-transact on -- the purple already used for CTA buttons -- --c-on-action for the thumb, which resolves to a near-white value in both themes, unlike most tokens, so the thumb reads correctly against both the grey off-state and the purple on-state in light and dark alike). No new dependency, nothing beyond CSS. Originally built page-scoped on automate.html; moved here once profile.html needed the same control -- a second consumer is what makes a pattern actually shared, not just page-specific CSS that happens to be reusable in theory. The switch itself is 34x20 -- deliberately not the touch-target box. The *row* (or label) it's placed inside is the real hit target, native label-click semantics activate the input regardless of where in the row the click lands, so the visual control can stay a normal, recognisable switch size without shrinking the actual tap area. */ .tk-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 34px; height: 20px; } .tk-switch__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .tk-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--c-border-5); transition: background .15s ease; pointer-events: none; } .tk-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-on-action); box-shadow: 0 1px 2px rgba(var(--rgb-ink), .3); transition: transform .15s ease; } .tk-switch__input:checked + .tk-switch__track { background: var(--c-action-transact); } .tk-switch__input:checked + .tk-switch__track .tk-switch__thumb { transform: translateX(14px); } .tk-switch__input:focus-visible + .tk-switch__track { outline: 2px solid var(--c-gold); outline-offset: 2px; }