/* ============================================================ SKIN LAYER — Gracie Barra (Global Brand Manual v1.3) This file + the .tt-source section in index.html + media/ are the ONLY places a brand lives. styles.css never names a hex. ============================================================ */ @font-face { font-family: 'AdihausDIN'; src: url('../fonts/AdihausDIN-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AdihausDIN'; src: url('../fonts/AdihausDIN-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'AdihausDIN Condensed'; src: url('../fonts/AdihausDIN-CnBold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Type */ --tt-font-display: 'AdihausDIN Condensed', 'Barlow Condensed', 'Arial Narrow', sans-serif; --tt-font-body: 'AdihausDIN', 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Surfaces (never pure #000/#FFF — brand rule) */ --tt-surface: #FCFCFC; /* page */ --tt-surface-2: #F3F3F3; /* canvas / wells */ --tt-surface-3: #EDEDED; /* deeper well */ --tt-surface-inverse: #1A1A1A; /* header band / rail */ --tt-surface-inverse-2: #242424; /* Ink */ --tt-ink: #1A1A1A; --tt-ink-2: #333333; --tt-ink-3: #575756; --tt-ink-inverse: #FCFCFC; --tt-ink-inverse-2: rgba(252, 252, 252, 0.72); /* Accent — GB Official Red: CTA + today marker ONLY, never a program */ --tt-accent: #E2211C; --tt-accent-hover: #7C1313; --tt-accent-pressed: #5E0F0F; --tt-accent-ink: #FCFCFC; /* Filter dim treatment (full-opacity; pale per-program tint + this ink) */ --tt-dim-surface: #EDEDED; --tt-dim-ink: #575756; --tt-dim-edge: #C6C6C6; /* Today column wash (accent-family, near-white) */ --tt-today-wash: #FBF1F0; /* Neutral atmospherics (dark skins swap these with the surfaces) */ --tt-scroll-shadow: rgba(26, 26, 26, 0.14); --tt-scrim: rgba(26, 26, 26, 0.55); /* Card edge: invisible on light skins; dark skins set it to a hairline so programs coloured near the page surface (e.g. GB3 black) keep a visible card shape. */ --tt-card-edge: transparent; /* Lines + focus */ --tt-hairline: rgba(26, 26, 26, 0.08); --tt-line: #DADADA; --tt-hairline-inverse: rgba(255, 255, 255, 0.12); --tt-focus: #0046AD; /* Cobalt — brand secondary */ --tt-focus-inverse: #FCFCFC; /* Shape ("rounded corners" per manual p.59) */ --tt-radius-sm: 4px; --tt-radius: 8px; --tt-radius-lg: 12px; --tt-radius-pill: 999px; /* Shadows (minimal — brand is "clean, timeless") */ --tt-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06); --tt-shadow-sm: 0 2px 6px rgba(26, 26, 26, 0.08); --tt-shadow-md: 0 6px 18px rgba(26, 26, 26, 0.10); --tt-shadow-lg: 0 14px 36px rgba(26, 26, 26, 0.16); } /* ============================================================ GB dark skin — applied via . On the demo, ?theme=dark in the URL sets it. A dark client site would instead make these values the :root defaults. ============================================================ */ :root[data-theme="dark"] { --tt-surface: #161616; --tt-surface-2: #222222; --tt-surface-3: #2A2A2A; --tt-surface-inverse: #050505; --tt-surface-inverse-2: #111111; --tt-ink: #FCFCFC; --tt-ink-2: #DADADA; --tt-ink-3: #AFAFAF; --tt-ink-inverse: #FCFCFC; --tt-ink-inverse-2: rgba(252, 252, 252, 0.72); --tt-dim-surface: #2A2A2A; --tt-dim-ink: #AFAFAF; --tt-hairline: rgba(255, 255, 255, 0.10); --tt-line: #3C3C3B; --tt-today-wash: #2B1D1C; --tt-scroll-shadow: rgba(0, 0, 0, 0.5); --tt-scrim: rgba(0, 0, 0, 0.65); --tt-focus: #5BA3F8; --tt-card-edge: rgba(255, 255, 255, 0.14); }