/* ==================================================================== */ /* GT Tools — shared theme (Brushed Titanium / Brushed Aluminium) */ /* */ /* CANONICAL FILE. Single source of truth for the GT day/night schemes */ /* and brushed-metal treatments, consumed by: */ /* - the Next.js portal (synced copy at src/app/theme.css) */ /* - every Flask app via */ /* */ /* Night (Brushed Titanium) = default on :root. */ /* Day (Brushed Aluminium) = `day` class on . */ /* Palettes ported verbatim from the approved prototype's applyTheme(). */ /* To retheme every app at once, edit the two variable blocks below. */ /* */ /* Fonts (load separately in each app's ): */ /* Space Grotesk (display/numbers) + Manrope (UI/body) via Google */ /* Fonts; Inter only as local fallback. Primary accent #F15D05 */ /* (official GT CI orange — supersedes the prototype's #EA6A1D, */ /* design ruling 2026-07-04). */ /* ==================================================================== */ :root { --text: #efe9e2; --muted: #a89e92; --hair: rgba(255, 255, 255, 0.09); --accent: #f15d05; --pageBg: linear-gradient(160deg, #2a2521, #1a1613 55%, #241f1b); --barBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3c3630, #282320 55%, #211d19); --railBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #332e29, #232019 60%, #2b2621); --panelBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3a352f, #2a2622 48%, #332e29); --tileBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #453f38, #2f2a25 50%, #3a342e); --inset: linear-gradient(180deg, #211d19, #2c2723); --frameBg: #1a1613; --frameBar: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3a342e, #241f1b); --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 18px 42px rgba(0, 0, 0, 0.5); --tileShadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.45); --chip: linear-gradient(180deg, #413b34, #2c2823); /* status colors (same in both schemes) */ --ok: #3fb984; --warn: #e0a93b; --ready: #4a90d9; --down: #e4894a; /* official GT CI blue — for links / sign-in hero accents when needed */ --brand-blue: #0035a4; } html.day, html[data-theme="day"], html[data-theme="light"] { --text: #2a2622; --muted: #7d7469; --hair: rgba(45, 38, 30, 0.14); --accent: #f15d05; --pageBg: linear-gradient(160deg, #edeae5, #dad5cd 55%, #e6e2db); --barBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fbfaf7, #e7e2da 55%, #dcd6cd); --railBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f4f1eb, #e2ddd4 60%, #ece8e1); --panelBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fcfbf8, #efeae2 48%, #e4dfd6); --tileBg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 3px), linear-gradient(180deg, #ffffff, #f0ece4 50%, #e6e1d8); --inset: linear-gradient(180deg, #ded8cf, #f1eee8); --frameBg: #dad5cd; --frameBar: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f1ede6, #dcd6cd); --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(70, 58, 44, 0.1), 0 16px 38px rgba(120, 110, 92, 0.2); --tileShadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 14px rgba(120, 110, 92, 0.16); --chip: linear-gradient(180deg, #ffffff, #e8e3db); } /* ---------------- base ---------------- */ @keyframes gtSheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } html.day ::-webkit-scrollbar-thumb, html[data-theme="day"] ::-webkit-scrollbar-thumb, html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(45, 38, 30, 0.2); } /* ---------------- surface utilities ---------------- */ .bg-page { background: var(--pageBg); } .bg-bar { background: var(--barBg); } .bg-rail { background: var(--railBg); } .bg-panel { background: var(--panelBg); } .bg-tile { background: var(--tileBg); } .bg-inset { background: var(--inset); } .bg-chip { background: var(--chip); } .shadow-bevel { box-shadow: var(--bevel); } .shadow-tile { box-shadow: var(--tileShadow); } .shadow-well { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } .border-hairline { border: 1px solid var(--hair); } /* ---------------- brushed-metal components ---------------- */ /* Card = --panelBg + --hair border + --bevel shadow, radius ~14px */ .gt-panel { border-radius: 14px; background: var(--panelBg); border: 1px solid var(--hair); box-shadow: var(--bevel); } .gt-tile { border-radius: 13px; background: var(--tileBg); border: 1px solid var(--hair); box-shadow: var(--tileShadow); } .gt-well { background: var(--inset); border: 1px solid var(--hair); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } .gt-chip { background: var(--chip); border: 1px solid var(--hair); box-shadow: var(--tileShadow); } /* Primary button — orange gradient with inset highlight */ .btn-accent { display: flex; align-items: center; justify-content: center; gap: 9px; border: none; cursor: pointer; font-family: Manrope, Inter, sans-serif; font-weight: 700; color: #fff; background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 78%, #000) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 5px rgba(0, 0, 0, 0.25), 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent); } .btn-accent:active { filter: brightness(0.94); } /* Selected / unselected option tiles */ .opt-on { background: var(--accent); color: #fff; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); } .opt-off { background: var(--tileBg); color: var(--text); border: 1px solid var(--hair); box-shadow: var(--tileShadow); } /* Progress bar with accent glow */ .gt-track { height: 7px; border-radius: 6px; background: var(--hair); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); } .gt-fill { height: 100%; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 55%), var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } /* Glowing status dot */ .gt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; } /* Moving sheen highlight (logo, brand hero, glass preview) */ .gt-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 240, 220, 0.4) 50%, transparent 58%); background-size: 250% 100%; animation: gtSheen 6.5s linear infinite; pointer-events: none; } /* Metallic avatar */ .gt-avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #2a2622; background: linear-gradient(150deg, #e6ddd0, #a89a86 45%, #6d6151 75%, #cabfae); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.35); } /* Brand hero panel (sign-in) — stays dark in both schemes */ .gt-hero { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px), linear-gradient(150deg, #3a342e, #241f1b 55%, #1a1613); }