/* Gaffer marketing/legal site — styled to match the Flutter app's design system (specs/style-guide.md). Dark base, one red accent, selective glow, Chakra Petch display + Sora body. Fonts are self-hosted (see fonts.css) — no third-party CDN, so the site stays cookie/tracking-free. The @font-face rules live in fonts.css, linked alongside this file in the page . */ :root { /* Color tokens — mirror apps/mobile lib/core/theme/tokens.dart (soccer accent). */ --bg: #05080a; --panel: #0c0f12; --panel-2: #14181c; --line: #242a30; --accent: #ff2b3e; --accent-dim: #c81020; --silver: #c9d2d9; --silver-dim: #8b97a1; --gold: #ffd23f; --text: #f4f7f9; --muted: #76828c; --up: #3ad17a; /* Type families. */ --font-display: "Chakra Petch", system-ui, sans-serif; --font-body: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Corner radii (style guide). */ --r-large: 22px; --r-button: 16px; --r-chip: 14px; --r-pill: 30px; /* Accent glow — two soft layers around a brighter core (style guide). */ --glow-accent: 0 0 12px rgba(255, 43, 62, 0.6), 0 0 30px rgba(255, 43, 62, 0.28); --maxw: 64rem; } * { box-sizing: border-box; } html { font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; color: var(--text); /* Near-black base with a subtle radial lift toward the top, as in the app. */ background: radial-gradient( 120% 60% at 50% 0%, rgba(255, 43, 62, 0.06) 0%, transparent 60% ), var(--bg); min-height: 100vh; } a { color: var(--accent); } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--text); padding: 0.5rem 0.75rem; border-radius: var(--r-chip); z-index: 10; } /* Header */ .site-header { border-bottom: 1px solid var(--line); background: rgba(5, 8, 10, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-block: 1rem; } .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); text-decoration: none; } .site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .site-nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color 0.15s ease; } .site-nav a:hover { color: var(--text); } /* Hero + sections */ main section { padding-block: 2.5rem; } .hero { padding-top: 3.5rem; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 0.75rem; /* The big headline gets the app's accent glow — emphasis, used sparingly. */ text-shadow: var(--glow-accent); } .lead { font-size: 1.2rem; color: var(--silver); max-width: 42rem; } /* Section labels (Sora, uppercase, wide tracking — the app's pill/label style). */ main h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Product cards */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .product-card { /* 1px line border + subtle top-down gradient (panel-2 → panel), per style guide. */ background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%); border: 1px solid var(--line); border-radius: var(--r-large); padding: 1.75rem; transition: border-color 0.15s ease, transform 0.15s ease; } .product-card:hover { border-color: #333b45; transform: translateY(-2px); } .product-card h3 { margin-top: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; } .feature-list { margin-top: 1rem; padding-left: 1.1rem; } .feature-list li { margin-bottom: 0.4rem; color: var(--silver); } .feature-list li::marker { color: var(--accent); } .button { display: inline-block; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%); color: var(--text); padding: 0.7rem 1.25rem; border-radius: var(--r-button); text-decoration: none; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em; margin-top: 0.5rem; box-shadow: var(--glow-accent); transition: transform 0.15s ease; } .button:hover { transform: translateY(-1px); } .button:active { transform: scale(0.97); } .store-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; } .coming-soon { color: var(--muted); font-style: italic; } /* Legal / text pages */ .legal { max-width: 48rem; padding-block: 2.5rem; } .legal h2 { margin-top: 2rem; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; } .legal-placeholder { background: var(--panel); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; color: var(--muted); border-radius: var(--r-chip); } .legal .last-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; } .legal ul { padding-left: 1.25rem; } .legal li { margin-block: 0.4rem; } /* Footer */ .site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 2rem; color: var(--muted); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; } .site-footer h2 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--silver-dim); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 0.35rem; } .site-footer a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .site-footer a:hover { color: var(--text); } .lang-switcher [aria-current="true"] { color: var(--text); font-weight: 600; } .copyright { margin-top: 1.5rem; font-size: 0.85rem; }