:root { --bg: #ffffff; --ink: #16181d; --ink-dim: #4a4d57; --ink-faint: #8a8d97; --orange: #e84e1b; --orange-dim: rgba(232, 78, 27, 0.12); --border: #eceef1; --panel: #f7f7f9; --max: 1120px; } * { box-sizing: border-box; } /* Forces light rendering unconditionally — without this, a browser in system dark mode can still dark-style native chrome this page doesn't explicitly control (scrollbars, form control chrome, default focus rings) even though every background/text color below is already a hardcoded light-theme value, not a dark-mode-adaptive one. */ html { color-scheme: only light; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; } /* Headers/accents use Exo 2 throughout, per brand spec */ h1, h2, h3, .logo-wordmark, .kicker, .eyebrow, nav.site .links a, .btn { font-family: "Exo 2", -apple-system, BlinkMacSystemFont, sans-serif; } /* Headers specifically (not the kicker/eyebrow labels, nav links, or buttons above — those stay upright) are italic, matching the wordmark's own Black Italic treatment. Needs the actual italic font file loaded at whatever weight each header renders at (see each header's own font-weight below) — the in every page's was widened to cover this; without a matching italic weight loaded, the browser falls back to a synthetic slant instead of the real font. */ h1, h2, h3 { font-style: italic; } a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } /* Nav / logo */ header.site { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--border); } nav.site { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--max); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand img.app-icon { width: 38px; height: 38px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } /* The wordmark: Exo 2 Black Italic, "Gala" white / "Spo" brand orange, on a dark chip — matches the real app icon's own wordmark treatment exactly (white text needs a dark backing to read on a white page). */ .logo-wordmark { font-weight: 900; font-style: italic; font-size: 19px; letter-spacing: -0.3px; background: var(--ink); padding: 5px 12px 6px; border-radius: 7px; line-height: 1; } .logo-wordmark .gala { color: #ffffff; } .logo-wordmark .spo { color: var(--orange); } .logo-wordmark, .logo-wordmark .gala, .logo-wordmark .spo { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } /* Plain-text "Stream" suffix next to the wordmark chip — keeps the crafted logo asset itself untouched as "GalaSpo", while still giving both automated crawlers and human reviewers a visible, unstyled "GalaSpo Stream" reading for OAuth brand-verification matching. */ .brand-suffix { font-weight: 800; font-style: italic; font-size: 17px; color: var(--ink); letter-spacing: -0.2px; } /* Larger hero version of the same wordmark */ .logo-wordmark.lg { font-size: 34px; padding: 10px 20px 12px; border-radius: 11px; display: inline-block; } .logo-wordmark.lg, .logo-wordmark.lg .gala, .logo-wordmark.lg .spo { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); } nav.site .links { display: flex; gap: 28px; font-size: 14px; font-weight: 700; } nav.site .links a { color: var(--ink-dim); } nav.site .links a:hover { color: var(--orange); text-decoration: none; } /* Hero */ .hero { padding: 80px 24px 0; text-align: center; } /* Scoped to .hero specifically, not the shared .wrap class (used elsewhere for full-width grids that must NOT be flex-centered) — belt-and-suspenders centering for the hero's own children alongside each element's individual margin: 0 auto. */ .hero .wrap { display: flex; flex-direction: column; align-items: center; } .hero .wrap > * { max-width: 100%; } .hero .eyebrow { display: inline-block; color: var(--orange); font-weight: 800; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; border: 1px solid var(--orange); border-radius: 999px; padding: 6px 14px; margin-bottom: 28px; } .hero-icon { display: block; width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 28px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .hero h1 { font-size: clamp(32px, 6vw, 54px); font-weight: 900; margin: 0 0 18px; letter-spacing: -0.5px; color: var(--ink); } .hero h1 .accent { color: var(--orange); } .hero p.punchline { font-weight: 800; font-size: clamp(17px, 2.4vw, 21px); color: var(--ink); margin: 0 0 16px; } .hero p.lead { max-width: 620px; margin: 0 auto 36px; color: var(--ink-dim); font-size: clamp(16px, 2.2vw, 19px); } .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; } .btn { display: inline-block; padding: 14px 28px; border-radius: 10px; font-weight: 800; font-size: 15px; text-decoration: none; } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: #cf4416; text-decoration: none; } .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--orange); text-decoration: none; color: var(--orange); } .status-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--ink-dim); margin-bottom: 56px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; animation: status-pulse 2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .hero-image { max-width: 880px; margin: 0 auto; } .hero-image img, .hero-image svg { width: 100%; height: auto; } /* Sections */ section { padding: 88px 24px; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .section-head .kicker { color: var(--orange); font-weight: 800; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } .section-head h2 { font-size: clamp(26px, 4vw, 36px); margin: 10px 0 12px; font-weight: 900; color: var(--ink); } .section-head p { color: var(--ink-dim); font-size: 16px; } /* Image-heavy alternating feature rows */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--border); } .feature-row:last-child { border-bottom: none; } .feature-row.reverse .feature-media { order: 2; } .feature-row.reverse .feature-text { order: 1; } @media (max-width: 780px) { .feature-row, .feature-row.reverse .feature-media, .feature-row.reverse .feature-text { grid-template-columns: 1fr; order: initial; } .feature-row { grid-template-columns: 1fr; gap: 28px; } } .feature-media { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 28px; display: flex; align-items: center; justify-content: center; } .feature-media svg { width: 100%; height: auto; max-width: 360px; } .feature-text .num { color: var(--orange); font-weight: 900; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; display: block; } .feature-text h3 { font-size: 24px; font-weight: 900; margin: 0 0 12px; color: var(--ink); } .feature-text p { color: var(--ink-dim); font-size: 16px; margin: 0; } /* Gallery */ .gallery-section { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .gallery-item { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #fff; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-empty { aspect-ratio: 4 / 3; border-radius: 12px; border: 1.5px dashed #d7d9de; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-faint); font-size: 13px; padding: 16px; background: #fff; } /* Footer */ footer.site { padding: 48px 24px; border-top: 1px solid var(--border); text-align: center; color: var(--ink-faint); font-size: 13px; } footer.site .links { display: flex; gap: 20px; justify-content: center; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; } footer.site .links a { color: var(--ink-dim); } footer.site .links a:hover { color: var(--orange); } /* Simple content pages (privacy/support) */ .doc { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; } .doc h1 { font-size: 34px; font-weight: 900; margin-bottom: 6px; color: var(--ink); } .doc .updated { color: var(--ink-faint); font-size: 13px; margin-bottom: 40px; } .doc h2 { font-size: 20px; font-weight: 900; margin-top: 40px; color: var(--ink); } .doc p, .doc li { color: var(--ink-dim); font-size: 15.5px; } .doc ul { padding-left: 20px; }