/* ============================================================ Grand Flip Out — shared "granary" design language ------------------------------------------------------------ ONE source of truth for the palette + type. Every page links this first, then drops its own :root colour block, so the whole site draws from the same warm-black + wheat-gold set. Canonical tokens are --gfo-*. The aliases below map every older name a page already uses (--bg, --bg2, --orange, --accent, --gold, --bg-primary, --text-secondary, ...) onto the canonical values, so existing var(--x) references keep working and just converge to the shared colours. ============================================================ */ /* Fonts are loaded via a + preconnect in each page's (faster than a render-blocking CSS @import, which forces a second serialized round-trip after this stylesheet parses). Do NOT re-add @import here — it would double-load the fonts. */ :root { /* ── Canonical palette ───────────────────────────── */ --gfo-bg: #0d0d0c; /* page — warm near-black */ --gfo-bg-1: #141312; /* raised surface / card */ --gfo-bg-2: #1a1815; /* card hover / panel */ --gfo-bg-3: #221f1a; /* elevated / input border */ --gfo-bg-4: #302b22; /* highest elevation */ --gfo-gold: #E0A82E; /* brand wheat-gold accent */ --gfo-gold-bright: #EFC04E; /* hover / emphasis */ --gfo-gold-dim: #C8922A; /* pressed / muted gold */ --gfo-text: #ece6da; /* primary text — warm white */ --gfo-text-2: #b8b0a5; /* secondary text */ --gfo-text-3: #9a907a; /* muted / hint text — AA: 5.5-6.1:1 on all surfaces (was #7a715c=4.0, sub-AA) */ --gfo-border: #221f1a; /* hairline borders */ --gfo-border-hi: #3a352c; /* hover / focus borders */ --gfo-success: #5FB85F; /* profit / up / good */ --gfo-loss: #D46A6A; /* loss / down / bad */ --gfo-info: #5FB0C8; /* neutral info / links */ --gfo-warn: #E0A82E; /* warning = gold */ --gfo-radius: 8px; --gfo-radius-lg: 14px; --gfo-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --gfo-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --gfo-gold-glow: rgba(224,168,46,0.15); /* ── Compatibility aliases (older per-page names) ──── */ --bg: var(--gfo-bg); --bg0: var(--gfo-bg); --bg1: var(--gfo-bg-1); --bg2: var(--gfo-bg-2); --bg3: var(--gfo-bg-3); --bg4: var(--gfo-bg-4); --bg-dark: var(--gfo-bg); --bg-primary: var(--gfo-bg); --bg-secondary: var(--gfo-bg-1); --bg-tertiary: var(--gfo-bg-2); --bg-card: var(--gfo-bg-1); --bg-card-hover:var(--gfo-bg-2); --bg-input: var(--gfo-bg); --surface: var(--gfo-bg-1); --surface2: var(--gfo-bg-2); --orange: var(--gfo-gold); --accent: var(--gfo-gold); --gold: var(--gfo-gold); --orange2: var(--gfo-gold-bright); --accent2: var(--gfo-gold-bright); --orange-bright: var(--gfo-gold-bright); --orange-dim: var(--gfo-gold-dim); --orange-glow: var(--gfo-gold-glow); --text: var(--gfo-text); --text2: var(--gfo-text-2); --text-secondary: var(--gfo-text-2); --text3: var(--gfo-text-3); --text-muted: var(--gfo-text-3); --t3: var(--gfo-text-3); --border: var(--gfo-border); --border-hover: var(--gfo-border-hi); --success: var(--gfo-success); --profit: var(--gfo-success); --loss: var(--gfo-loss); --danger: var(--gfo-loss); --info: var(--gfo-info); --font: var(--gfo-font); --mono: var(--gfo-mono); --radius: var(--gfo-radius); --radius-lg: var(--gfo-radius-lg); /* ── Spacing scale (4px base) ──────────────────────── */ --gfo-space-1: 4px; --gfo-space-2: 8px; --gfo-space-3: 12px; --gfo-space-4: 16px; --gfo-space-5: 20px; --gfo-space-6: 24px; --gfo-space-7: 32px; --gfo-space-8: 48px; --radius-sm: 6px; --radius-md: var(--gfo-radius); /* ── Type scale ────────────────────────────────────── */ --gfo-fs-xs: 0.72rem; --gfo-fs-sm: 0.82rem; --gfo-fs-base: 0.92rem; --gfo-fs-md: 1.05rem; --gfo-fs-lg: 1.3rem; --gfo-fs-xl: 1.7rem; --gfo-fs-2xl: 2.25rem; --gfo-lh-tight: 1.2; --gfo-lh-normal: 1.55; /* ── Elevation / shadows (warm, low-spread) ────────── */ --gfo-shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --gfo-shadow-md: 0 4px 14px rgba(0,0,0,0.40); --gfo-shadow-lg: 0 12px 36px rgba(0,0,0,0.50); --shadow-card: var(--gfo-shadow-md); } /* Shared baseline — additive only, so it never fights a page's own layout. */ ::selection { background: var(--gfo-gold); color: #000; } /* Consistent wheat-gold scrollbar across the site */ * { scrollbar-color: var(--gfo-bg-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--gfo-bg-3); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--gfo-border-hi); } ::-webkit-scrollbar-track { background: transparent; } /* Responsive headers — keep the logo on one line and let nav links wrap instead of clipping/squeezing on narrow screens (pages without a hamburger: pricing, intelligence, analytics, status, api-docs). Hamburger pages (home, dashboard) manage their own nav. */ @media (max-width: 768px) { nav, .hdr, .gfo-header { flex-wrap: wrap; row-gap: 8px; padding-left: 16px; padding-right: 16px; } nav .logo, .hdr .logo, .gfo-header .logo, .logo { white-space: nowrap; flex-shrink: 0; } .links, .hdr-right { flex-wrap: wrap; gap: 10px 14px; min-width: 0; } .links a, .hdr-right a, .hdr-link, .gfo-header a { font-size: 0.85em; } } /* ============================================================ MOBILE POLISH LAYER (shared, additive, class/element-scoped) ------------------------------------------------------------ granary.css loads first on every page, so this lifts mobile quality site-wide without touching 20 files. Every rule is defensive: it targets common structural selectors, never a page's bespoke layout, and never overrides a page's own hamburger nav (those use their own classes + !important). ============================================================ */ /* 1. No accidental sideways scroll. A single too-wide element shouldn't let the whole page pan horizontally on a phone. Use overflow-x:CLIP (not hidden): `hidden` makes body a scroll container and breaks `position:sticky` headers (6 pages use them). `clip` stops the pan WITHOUT a scroll container, so sticky survives. Pre-2022 Safari ignores `clip` and keeps today's behavior (fine). */ @media (max-width: 768px) { html, body { max-width: 100%; overflow-x: clip; } } /* 2. iOS zoom guard: any input/select/textarea < 16px makes Safari auto-zoom on focus (jarring). Force the 16px floor on mobile. */ @media (max-width: 768px) { input, select, textarea, .gfo-input, .coach-input, #coachInput, [type="text"], [type="search"], [type="email"], [type="number"], [type="password"] { font-size: 16px !important; } } /* 3. Tap targets: links/buttons should clear the ~44px guideline so they're comfortable to hit. Scoped to interactive controls only. */ @media (max-width: 768px) { button, .gfo-btn, .btn, .btn-hero, .nav-cta, .pricing-btn, a.gfo-btn, a.btn, a.nav-cta, [role="button"] { min-height: 44px; } /* nav links: comfortable vertical hit area without forcing block layout */ .links a, .hdr-right a, .nav-links a, .gfo-sidebar a { padding-top: 8px; padding-bottom: 8px; } } /* 4. Fluid headings — stop oversized desktop hero/section type from overflowing narrow screens. clamp() keeps them proportional. */ @media (max-width: 600px) { h1, .hero h1, .section-title, .section-hdr { line-height: 1.15; } h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); } h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); } .hero-sub, .section-sub { font-size: clamp(0.95rem, 4vw, 1.1rem); } } /* 5. Auto-fit grids → single column on phones. The common pattern is repeat(auto-fit, minmax(300-340px, 1fr)); at ~360px usable width that minmax can force a horizontal overflow. Collapse to 1 col. */ @media (max-width: 560px) { .gfo-grid, .card-grid, .cards, .features-grid, .pricing-cards, .stats, .stat-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } } /* 6. Tables → horizontal scroll instead of breaking the layout. Wrapped tables scroll inside their own box. min-width:max-content is scoped to WRAPPED tables only — forcing a bare (unwrapped) table wide while the body clips would hide columns. Bare tables get max-width:100% so they shrink-to-fit instead. (Wrappers seen: .table-wrap, .live-table-wrap, .comparison-table-wrap.) */ @media (max-width: 768px) { .table-wrap, .live-table-wrap, .gfo-table-wrap, .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table, .live-table-wrap table, .gfo-table-wrap table, .comparison-table-wrap table { min-width: max-content; } table { max-width: 100%; } } /* 7. Card/section breathing room — trim the big desktop paddings so content isn't squeezed into a sliver on small screens. */ @media (max-width: 560px) { .gfo-card { padding: var(--gfo-space-4); } .container, .wrap, main, section { padding-left: 16px; padding-right: 16px; } } /* 8. Respect the notch / home-bar on modern phones. */ @media (max-width: 768px) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } nav, .hdr, .gfo-header { padding-top: max(env(safe-area-inset-top), 0px); } } /* ============================================================ Shared components — one visual language across the site AND the Coach widget. Token-driven only (no per-page colours), so a page opts in by using the class; nothing here fights inline layout because every rule is class-scoped. ============================================================ */ /* Card — the base surface for stats, panels, market cards. */ .gfo-card { background: var(--gfo-bg-1); border: 1px solid var(--gfo-border); border-radius: var(--gfo-radius-lg); padding: var(--gfo-space-5); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .gfo-card:hover { border-color: var(--gfo-border-hi); box-shadow: var(--gfo-shadow-md); } /* Stat tile — label over a big value. Intentional, no decorative glow. */ .gfo-stat { background: var(--gfo-bg-1); border: 1px solid var(--gfo-border); border-radius: var(--gfo-radius-lg); padding: var(--gfo-space-4) var(--gfo-space-5); display: flex; flex-direction: column; gap: var(--gfo-space-2); position: relative; } .gfo-stat__label { font-size: var(--gfo-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gfo-text-3); } .gfo-stat__value { font-family: var(--gfo-mono); font-size: var(--gfo-fs-xl); font-weight: 700; line-height: var(--gfo-lh-tight); color: var(--gfo-text); } /* Badge / pill — statuses, tags, "powered by" chips. */ .gfo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--gfo-fs-xs); font-weight: 700; letter-spacing: .03em; background: var(--gfo-bg-3); color: var(--gfo-text-2); border: 1px solid var(--gfo-border-hi); } .gfo-badge--gold { background: var(--gfo-gold-glow); color: var(--gfo-gold-bright); border-color: transparent; } .gfo-badge--up { background: rgba(95,184,95,0.12); color: var(--gfo-success); border-color: transparent; } .gfo-badge--down { background: rgba(212,106,106,0.12); color: var(--gfo-loss); border-color: transparent; } /* Button. */ .gfo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--gfo-radius); font-family: var(--gfo-font); font-size: var(--gfo-fs-sm); font-weight: 700; border: 1px solid var(--gfo-border-hi); background: var(--gfo-bg-2); color: var(--gfo-text); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .gfo-btn:hover { background: var(--gfo-bg-3); border-color: var(--gfo-gold-dim); } .gfo-btn--gold { background: var(--gfo-gold); color: #1a1208; border-color: transparent; } .gfo-btn--gold:hover { background: var(--gfo-gold-bright); } /* Market card — shared by the dashboard and the Coach's inline citations. */ .gfo-market-card { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--gfo-space-3); background: var(--gfo-bg-1); border: 1px solid var(--gfo-border); border-left: 3px solid var(--gfo-gold-dim); border-radius: var(--gfo-radius); padding: var(--gfo-space-3) var(--gfo-space-4); } .gfo-market-card img { width: 28px; height: 28px; object-fit: contain; } .gfo-market-card .mc-name { font-weight: 600; color: var(--gfo-text); font-size: var(--gfo-fs-sm); } .gfo-market-card .mc-sub { font-size: var(--gfo-fs-xs); color: var(--gfo-text-3); font-family: var(--gfo-mono); } .gfo-market-card .mc-val { font-family: var(--gfo-mono); font-weight: 700; text-align: right; color: var(--gfo-text); } .gfo-market-card--up { border-left-color: var(--gfo-success); } .gfo-market-card--down { border-left-color: var(--gfo-loss); } /* Sidebar — vertical nav rail. */ .gfo-sidebar { background: var(--gfo-bg-1); border-right: 1px solid var(--gfo-border); } .gfo-sidebar a, .gfo-sidebar .nav-item { display: flex; align-items: center; gap: var(--gfo-space-3); padding: 10px var(--gfo-space-4); border-radius: var(--gfo-radius); color: var(--gfo-text-2); font-size: var(--gfo-fs-sm); font-weight: 500; text-decoration: none; transition: background .15s ease, color .15s ease; } .gfo-sidebar a:hover, .gfo-sidebar .nav-item:hover { background: var(--gfo-bg-2); color: var(--gfo-text); } .gfo-sidebar a.active, .gfo-sidebar .nav-item.active { background: var(--gfo-gold-glow); color: var(--gfo-gold-bright); font-weight: 700; }