/* Soccerfy static site: shared stylesheet (SDEV-65). * * Brand tokens are transcribed from src/theme.ts so the site and the app stay in * sync. Two greens, deliberately: --verde-mata is the primary brand green used * for type, buttons and accents (theme.ts `colors.primary`), while --verde-night * is the deeper shade reserved for large dark fills: the hero, the footer and * the app's own dark headers. See docs/WEBSITE.md. * * No @import, no web fonts, no external URL of any kind: the site must make zero * third-party requests (privacy policy claims no tracking whatsoever). */ :root { /* Brand */ --verde-mata: #1e5232; --verde-night: #073f22; --verde-deep: #0d2b1a; --dourado: #c6a15c; --creme-bola: #ead9a8; /* The brand gold only clears WCAG AA on dark fills (7.1:1 on --verde-night). * On cream it lands at ~2.2:1, so light sections use this darker bronze * instead: 5.7:1 on --neutro-5, 5.1:1 on --neutro-4, 6.2:1 on white. */ --dourado-ink: #7a5d1c; /* Neutrals (theme.ts colors.neutrals) */ --neutro-1: #10301d; --neutro-2: #1b2e20; --neutro-3: #6c756b; --neutro-4: #f3ead2; --neutro-5: #fbf6e9; --surface: #ffffff; /* Derived, site-only */ --ink: var(--neutro-1); --ink-soft: #4b5a52; --line: #e3e8e5; --line-warm: #e6dcc2; --on-dark: var(--neutro-5); --on-dark-soft: #b7c8bd; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --wrap: 1080px; --wrap-narrow: 760px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--neutro-5); color: var(--ink); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--verde-mata); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--verde-night); } :focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; border-radius: 4px; } h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } /* ---------------------------------------------------------------- language * Both languages live in the same document. lang.js sets data-active-lang on * before first paint, so only one of them is ever painted. */ /* Only the INACTIVE language is ever styled: hiding needs no undo, so the visible * side keeps whatever `display` its own component rule gives it (.eyebrow is a * block, the footer nav is a flex row, and so on). !important because component * rules further down set `display` on the very elements that carry [data-lang], and * leaking both languages onto the page at once is never acceptable. */ html[data-active-lang="pt"] [data-lang="en"], html[data-active-lang="en"] [data-lang="pt"] { display: none !important; } /* Before lang.js runs (and if JS is off), show PT-BR, the default language and * the one the canonical URL declares. */ html:not([data-active-lang]) [data-lang="en"] { display: none !important; } .lang-switch { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius-pill); background: rgba(16, 48, 29, 0.06); } .lang-switch button { border: 0; background: none; color: var(--ink-soft); font: 600 13px/1 var(--font); letter-spacing: 0.02em; padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer; } .lang-switch button[aria-pressed="true"] { background: var(--verde-mata); color: #fff; } .on-dark .lang-switch { background: rgba(251, 246, 233, 0.12); } .on-dark .lang-switch button { color: var(--on-dark-soft); } .on-dark .lang-switch button[aria-pressed="true"] { background: var(--creme-bola); color: var(--verde-night); } /* ---------------------------------------------------------------- shell */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .wrap--narrow { max-width: var(--wrap-narrow); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--verde-mata); padding: 12px 16px; z-index: 10; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 18px; } .site-header .wordmark { display: block; width: 132px; height: 63px; } .site-header--bordered { border-bottom: 1px solid var(--line); margin-bottom: 8px; } .site-footer { background: var(--verde-night); color: var(--on-dark-soft); margin-top: 72px; padding: 48px 0 40px; font-size: 14px; } /* The landing page ends in a full-bleed section, so a margin here would show a * stripe of page background between that section and the footer. */ .landing .site-footer, .site-footer--flush { margin-top: 0; } .site-footer .wordmark { width: 120px; height: 57px; margin-bottom: 20px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; } .site-footer a { color: var(--on-dark); text-decoration: none; } .site-footer a:hover { color: var(--creme-bola); text-decoration: underline; } .site-footer .legal { border-top: 1px solid rgba(251, 246, 233, 0.14); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; } /* ---------------------------------------------------------------- sections */ .section { padding: 72px 0; } .section--dark { background: var(--verde-night); color: var(--on-dark); } .section--cream { background: var(--neutro-5); } .section--warm { background: var(--neutro-4); } .section-head { max-width: 640px; margin-bottom: 40px; } .eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dourado-ink); margin-bottom: 10px; } .section--dark .eyebrow, .hero .eyebrow { color: var(--dourado); } .section h2 { font-size: clamp(26px, 4vw, 36px); } .section-head p { color: var(--ink-soft); font-size: 17px; margin: 12px 0 0; } .section--dark .section-head p { color: var(--on-dark-soft); } /* ---------------------------------------------------------------- hero */ .hero { position: relative; background: var(--verde-night); color: var(--on-dark); overflow: hidden; } /* Faint concentric rings, echoing the app's dark group/match headers. */ .hero::after { content: ""; position: absolute; top: -280px; right: -180px; width: 720px; height: 720px; border-radius: 50%; border: 2px solid rgba(234, 217, 168, 0.09); box-shadow: inset 0 0 0 90px transparent, 0 0 0 90px rgba(234, 217, 168, 0.05); pointer-events: none; } .hero > * { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 24px 0 64px; align-items: center; } .hero h1 { font-size: clamp(34px, 7vw, 56px); font-weight: 800; margin: 0 0 18px; } .hero h1 .accent { color: var(--creme-bola); display: block; } .hero .lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--on-dark-soft); margin: 0 0 32px; max-width: 30em; } .hero-note { margin: 20px 0 0; font-size: 14px; color: var(--on-dark-soft); } @media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 32px 0 88px; } } /* ---------------------------------------------------------------- device frame */ .device { --device-width: 264px; width: var(--device-width); margin: 0 auto; padding: 9px; border-radius: 40px; background: linear-gradient(160deg, #24352b, #0b160f); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(251, 246, 233, 0.08); } .device img { display: block; width: 100%; border-radius: 32px; background: var(--neutro-5); } .device--lg { --device-width: 300px; } @media (min-width: 860px) { .device--lg { --device-width: 340px; } } /* ---------------------------------------------------------------- buttons */ .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .store-btn { display: inline-flex; flex-direction: column; justify-content: center; min-width: 176px; padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; font-family: var(--font); text-align: left; cursor: pointer; } /* On narrow screens two 176px badges wrap into a ragged stack, so full width reads * as one deliberate block instead. */ @media (max-width: 479px) { .store-btn { flex: 1 1 100%; min-width: 0; } } /* No opacity here: 11px uppercase text still needs the full 4.5:1, so each * variant sets an explicit colour that clears it against its own background. */ .store-btn .kicker { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: #2b4636; } .store-btn .label { font-size: 17px; font-weight: 700; line-height: 1.25; } .store-btn--primary { background: var(--creme-bola); color: var(--verde-night); } .store-btn--primary:hover { background: #f2e5c2; color: var(--verde-night); } /* Store availability, driven by the `ios-pending` / `android-pending` classes on * : each store shows either its real link ([data-store="*-live"]) or a * disabled "coming soon" span ([data-store="*-soon"]), never both. Dropping a * class flips that store everywhere on the page, with no JS involved. */ .ios-pending [data-store="ios-live"], .android-pending [data-store="android-live"] { display: none; } body:not(.ios-pending) [data-store="ios-soon"], body:not(.android-pending) [data-store="android-soon"] { display: none; } .store-btn--soon { background: rgba(251, 246, 233, 0.07); border-color: rgba(251, 246, 233, 0.22); color: var(--on-dark-soft); cursor: default; } .store-btn--soon .kicker { color: var(--on-dark-soft); } .section--cream .store-btn--soon, .section--warm .store-btn--soon { background: rgba(16, 48, 29, 0.04); border-color: rgba(16, 48, 29, 0.16); color: var(--ink-soft); } .section--cream .store-btn--soon .kicker, .section--warm .store-btn--soon .kicker { color: var(--ink-soft); } .section--cream .store-btn--primary .kicker, .section--warm .store-btn--primary .kicker { color: #edf2ef; } .section--cream .store-btn--primary, .section--warm .store-btn--primary { background: var(--verde-mata); color: #fff; } .section--cream .store-btn--primary:hover, .section--warm .store-btn--primary:hover { background: var(--verde-night); color: #fff; } /* ---------------------------------------------------------------- steps */ .steps { display: grid; gap: 24px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; } @media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .step { background: var(--surface); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); padding: 28px 24px; } .step h3 { font-size: 19px; margin: 16px 0 8px; color: var(--verde-mata); } .step p { margin: 0; color: var(--ink-soft); } .step .num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--dourado); color: var(--verde-night); font-weight: 800; font-size: 17px; } /* ---------------------------------------------------------------- features */ .feature-row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding: 40px 0; border-top: 1px solid rgba(251, 246, 233, 0.12); } .feature-row:first-of-type { border-top: 0; padding-top: 8px; } @media (min-width: 860px) { .feature-row { grid-template-columns: 1fr 1fr; gap: 64px; padding: 56px 0; } .feature-row--flip .feature-copy { order: 2; } } .feature-copy h3 { font-size: clamp(22px, 3vw, 28px); color: var(--creme-bola); margin-bottom: 12px; } .feature-copy p { color: var(--on-dark-soft); margin: 0 0 16px; font-size: 17px; } .tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .tick-list li { position: relative; padding-left: 28px; color: var(--on-dark); } .tick-list li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--dourado); } /* Same two-column rhythm on the light sections (the invites block). */ .section--warm .feature-row, .section--cream .feature-row { border-top-color: var(--line-warm); } .invite-copy h2 { font-size: clamp(24px, 3.6vw, 32px); margin-bottom: 12px; } .invite-copy p { color: var(--ink-soft); font-size: 17px; margin: 0; } /* Small feature cards for everything that doesn't need a screenshot. */ .card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 40px; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } .card { background: rgba(251, 246, 233, 0.06); border: 1px solid rgba(251, 246, 233, 0.14); border-radius: var(--radius-lg); padding: 24px; } .card h3 { font-size: 18px; color: var(--creme-bola); margin-bottom: 8px; } .card p { margin: 0; color: var(--on-dark-soft); font-size: 15px; } /* ---------------------------------------------------------------- faq */ .faq { max-width: var(--wrap-narrow); margin: 0 auto; } .faq details { border-bottom: 1px solid var(--line-warm); padding: 4px 0; } .faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 700; font-size: 17px; color: var(--verde-mata); position: relative; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--dourado); } .faq details[open] summary::after { content: "\2013"; } .faq details p { margin: 0 0 18px; color: var(--ink-soft); padding-right: 32px; } /* ---------------------------------------------------------------- final cta */ .final-cta { text-align: center; } .final-cta h2 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 12px; } .final-cta p { color: var(--ink-soft); font-size: 17px; margin: 0 auto 28px; max-width: 34em; } .final-cta .cta-row { justify-content: center; } /* ---------------------------------------------------------------- documents * Shared layout for the legal / support pages (privacy, terms, support, * account deletion) and 404. */ .doc { background: var(--surface); } .doc main { padding-bottom: 64px; } .doc h1 { font-size: clamp(26px, 4vw, 34px); margin: 28px 0 6px; } .doc h2 { font-size: 20px; color: var(--verde-mata); margin: 32px 0 10px; } .doc h3 { font-size: 17px; margin: 24px 0 8px; } .doc p, .doc li { color: var(--ink); } .doc ul, .doc ol { padding-left: 22px; } .doc li { margin-bottom: 6px; } .muted { color: var(--ink-soft); font-size: 14px; } .callout { background: var(--neutro-5); border: 1px solid var(--line-warm); border-left: 4px solid var(--dourado); border-radius: var(--radius-md); padding: 16px 18px; margin: 20px 0; } .callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; } .contact-card { background: var(--neutro-5); border: 1px solid var(--line-warm); border-radius: var(--radius-md); padding: 18px 20px; margin: 20px 0; } .contact-card strong { display: block; margin-bottom: 4px; } .doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; } .doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); } .doc th { color: var(--verde-mata); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .table-scroll { overflow-x: auto; } /* ---------------------------------------------------------------- invite * /join/{code}, rendered on the dark hero. join.js reveals exactly one of the two * blocks, so both start hidden and neither can flash the wrong state. */ .invite { padding: 32px 0 72px; max-width: 620px; } .invite h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin-bottom: 16px; } .invite .lede { font-size: 17px; color: var(--on-dark-soft); margin: 0 0 28px; } .code-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: rgba(251, 246, 233, 0.07); border: 1px solid rgba(251, 246, 233, 0.22); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 28px; } .code-label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; /* Lighter than --dourado: the brand gold sits at 4.1:1 on this card's washed * background, just under AA for 12px text. This clears it at 5.5:1. */ color: #dcbe85; } .code-value { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: 0.06em; color: var(--creme-bola); /* Codes are typed by hand off this screen, so keep them selectable. */ user-select: all; word-break: break-all; } .code-copy { margin-left: auto; border: 1px solid rgba(251, 246, 233, 0.3); background: none; color: var(--on-dark); font: 600 14px/1 var(--font); padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer; } .code-copy:hover { background: rgba(251, 246, 233, 0.12); } /* ---------------------------------------------------------------- 404 */ .error-page { text-align: center; padding: 80px 0 40px; } .error-page .code { font-size: 64px; font-weight: 800; color: var(--creme-bola); line-height: 1; margin: 0; } .error-page h1 { font-size: clamp(26px, 4.5vw, 38px); margin-top: 12px; } .error-page .lede { margin: 12px auto 28px; max-width: 32em; color: var(--on-dark-soft); font-size: 17px; } .error-page .cta-row { justify-content: center; } .site-footer--flush { margin-top: 0; }