/* ============================================================================= SMFFL — CORE STYLESHEET Design tokens + bespoke components (liquid-glass nav, hero, footer, grain). This is the whole styling layer — pure CSS + variables, zero Tailwind. Every piece lives here so it reads clearly and hands off cleanly. ACCENT ▸ Brand turquoise: --accent:#5EC4B8 / --accent-d:#3DA396 The league's brand hue (official IG @smffl). #5EC4B8 is a placeholder until the exact crest value is confirmed. Single-accent discipline: re-theme by changing ONLY the two --accent tokens in :root below. CONTRAST NOTE: turquoise is light, so CTAs use DARK INK (#0B0E14) on the fill (ink-on-turquoise ~9.3:1). NEVER white on turquoise. ============================================================================= */ /* --- Design tokens (LOCKED) ------------------------------------------------ */ :root { --bg: #0B0E14; --bg2: #121A28; /* alt-section surface — stepped up so the rhythm reads */ --card: #141A27; --card2: #192232; --line: rgba(255,255,255,.11); /* hairline dividers (promoted from .09) */ --line2: rgba(255,255,255,.16); /* card / interactive borders */ --hi: rgba(255,255,255,.06); /* inner top-edge highlight on raised cards */ --ink: #F4F6FA; /* text: primary */ --ink2: #C4CCD8; /* text: secondary (body / leads / nav chrome) */ --muted: #93A0B4; /* text: tertiary / labels */ --accent: #5EC4B8; /* brand turquoise — the single accent */ --accent-d: #3DA396; /* turquoise, pressed/hover */ --turq: #5EC4B8; /* STABLE turquoise — never hijacked by the champions colour-takeover (which rewrites --accent on ). Home-base honors chrome uses this, not --accent. */ /* depth — dark-tuned shadow scale (transparent black, large soft blur) */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 10px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 20px 50px -16px rgba(0,0,0,.8); /* radius — one scale: --r for cards/inputs/images, --r-pill for pills. Buttons intentionally stay 2px (a deliberate sharp brand edge). */ --r: 3px; --r-pill: 999px; --maxw: 1280px; /* Announcement-bar row reserved at the top of the document on first paint so site.js injecting the (absolute, out-of-flow) .announce never shifts the hero down (CLS gate). Values = the bar's rendered height per breakpoint; JS never rewrites this token (it only sets --ann-h for the nav offset), so there is no correction shift. See body padding-top + .announce below. */ --ann-reserve: 43px; /* --- Motion vocabulary (one system; every section composes from these) ----- Easing: reveals use --ease-out, structural slides use --ease-standard, and --ease-spring (overshoot) is reserved for RARE delight only (crest pop, lightbox open) — never on high-frequency targets like nav hover. Distance tiers scale the reveal travel to the element's weight: text/leads move least, hero moves most. Durations: 180ms for hover, ~600ms for enters. */ --ease-out: cubic-bezier(.2,.7,.2,1); /* reveals / settle */ --ease-standard: cubic-bezier(.4,0,.2,1); /* structural transitions */ --ease-spring: cubic-bezier(.34,1.56,.64,1); /* rare delight only */ --reveal-sm: 16px; /* text, leads, headings */ --reveal-md: 28px; /* cards, sections, figures (default) */ --reveal-lg: 34px; /* hero only */ --dur-hover: 180ms; --dur-enter: 600ms; } /* --- Reset / base ---------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* scroll-padding-top clears the fixed glass nav pill (~80px) + 16px breathing room so #teams, #gallery, etc. don't hide under it when jumped to. */ html { scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font-family: "Barlow", system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Hold the announcement bar's row from first paint (CLS). The bar is position:absolute and overlays this padding; site.js sets .ann-off to collapse it when there is no bar (announcement disabled or dismissed). */ padding-top: var(--ann-reserve, 0px); } /* When there is no announcement bar, zero the reserve token — collapses the body padding AND lets the hero reclaim the full viewport height (see .hero calc). */ body.ann-off { --ann-reserve: 0px; } /* Bar wraps as it narrows (text + CTA pill): ~74px around 430–540px, ~91px below 430px. These match the measured rendered heights so the reserved row equals the bar at the captured breakpoints (1440 = 43, 390 = 91) — zero shift on first paint. */ @media (max-width: 540px) { :root { --ann-reserve: 74px; } } @media (max-width: 430px) { :root { --ann-reserve: 91px; } } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1, h2, h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .5px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .22em; font-weight: 600; font-size: .72rem; color: var(--accent); } .muted { color: var(--muted); } .accent { color: var(--accent); } /* --- Accessibility: visible focus ----------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); } /* visually hidden but available to screen readers (e.g. section headings used only for document structure) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--bg); padding: 10px 16px; border-radius: var(--r); font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: top .2s ease; } .skip-link:focus { top: 12px; } /* --- Grain overlay (fixed, never intercepts input) ------------------------- */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================================= BUTTONS ============================================================================= */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .9rem; padding: 13px 26px; border-radius: 2px; cursor: pointer; border: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; } .btn:active { transform: scale(.97); } /* ink-on-turquoise for AA: #0B0E14 on #5EC4B8 = ~9.3:1 (never white-on-turquoise). */ .btn-pri { background: var(--accent); color: var(--bg); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-pri:hover { background: var(--accent-d); transform: translateY(-2px); } .btn-ghost { background: transparent; color: #fff; border: 1.5px solid var(--line2); } .btn-ghost:hover { border-color: #fff; transform: translateY(-2px); } .btn svg { width: 1em; height: 1em; flex: 0 0 auto; } /* ============================================================================= ANNOUNCEMENT BAR — thin full-width strip above the nav; in normal flow so it scrolls away (NOT sticky). Accent-tinted dark surface, white copy, a turquoise dark-ink CTA pill, and a quiet dismiss ×. ============================================================================= */ .announce { position: absolute; top: 0; left: 0; right: 0; z-index: 101; background: color-mix(in srgb, var(--accent) 13%, #0A0D12); border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); animation: ann-in .4s var(--ease-out) both; /* opacity/transform only; auto-off under reduced-motion */ } @keyframes ann-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .announce-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 9px 52px; /* room on the right for the × */ display: flex; align-items: center; justify-content: center; gap: 16px; } .announce-text { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: "Barlow Semi Condensed", sans-serif; font-size: .88rem; letter-spacing: .03em; color: var(--ink); text-align: center; } /* dark-ink CTA on turquoise (≈9.3:1, contrast-safe) */ .announce-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #0B0E14; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; padding: 5px 14px; border-radius: 999px; white-space: nowrap; transition: background .2s ease, transform .15s ease; } .announce-cta:hover { background: var(--accent-d); transform: translateY(-1px); } .announce-cta:active { transform: scale(.96); } .announce-cta svg { width: .9em; height: .9em; } .announce-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 7px; border: none; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; line-height: 0; transition: color .2s ease, background .2s ease; } .announce-x:hover { color: #fff; background: rgba(255,255,255,.10); } .announce-x svg { width: 16px; height: 16px; } /* ============================================================================= HEADER — floating liquid-glass pill ============================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 18px 20px; transition: padding .3s ease, top .3s ease; } /* with an announcement bar present, the pill starts just below it and slides to the top once the bar has scrolled away (the .scrolled state). */ body.has-ann .site-header { top: var(--ann-h, 0px); } body.has-ann .site-header.scrolled { top: 0; } .navpill { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 980px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(17,21,30,.5); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,.10); /* 1px refraction border */ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), /* top inner highlight */ inset 0 -1px 0 rgba(0,0,0,.30), /* bottom inner shade */ 0 14px 40px -14px rgba(0,0,0,.70); transition: max-width .4s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease; } /* scroll: pill shrinks and re-centers, glass goes denser */ .site-header.scrolled { padding: 12px 20px; } .site-header.scrolled .navpill { max-width: 880px; background: rgba(11,14,20,.66); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -10px rgba(0,0,0,.80); } .brand { display: flex; align-items: center; gap: 11px; padding-right: 6px; } .brand img { height: 34px; width: 34px; object-fit: contain; } .brand .brand-name { font-family: "Anton", sans-serif; font-size: 1.02rem; letter-spacing: 1px; color: #fff; } .brand .brand-name b { color: var(--accent); font-weight: 400; } /* navlinks own the middle band (flex:1) and centre their items, with a guaranteed gap on each side so the brand lockup and the Register CTA can never collide with the first/last link — even when the pill shrinks on scroll. min-width:0 lets the band shrink before any overflow/wrap. */ .navlinks { flex: 1 1 auto; min-width: 0; display: flex; gap: clamp(4px, 1vw, 16px); align-items: center; justify-content: center; margin: 0 clamp(16px, 2.2vw, 28px); } .navlinks a { position: relative; z-index: 1; font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: .82rem; color: var(--ink2); white-space: nowrap; padding: 9px 15px; border-radius: 999px; transition: color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); } /* the glass highlight that grows under a link on hover. Nav is a high-frequency target, so the fill settles with --ease-out (no spring overshoot — that jitters on rapid re-hover). Spring is reserved for rare moments: crest pop, lightbox. */ .navlinks a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.08); transform: scale(.7); opacity: 0; transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out); } .navlinks a:hover { color: #fff; transform: translateY(-1px); } .navlinks a:hover::before { transform: scale(1); opacity: 1; } /* active page link wears the glass highlight permanently */ .navlinks a[aria-current="page"] { color: #fff; } .navlinks a[aria-current="page"]::before { transform: scale(1); opacity: 1; } .nav-reg { font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .82rem; background: var(--accent); color: var(--bg); white-space: nowrap; padding: 10px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .15s ease, background .2s ease; } .nav-reg:hover { background: var(--accent-d); transform: translateY(-1px); } .nav-reg:active { transform: scale(.96); } /* burger (mobile) */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 9px 12px; background: none; border: none; min-width: 44px; min-height: 44px; /* WCAG 2.5.5 — ≥44px tap target */ } .burger span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .burger.x span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger.x span:nth-child(2) { opacity: 0; } .burger.x span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* mobile glass dropdown */ .mobpanel { position: absolute; top: 78px; left: 20px; right: 20px; display: none; flex-direction: column; gap: 2px; padding: 14px; background: rgba(13,17,24,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.80); transform-origin: top; } .mobpanel.open { display: flex; animation: rise .2s ease-out; } .mobpanel a { font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 1rem; padding: 14px 12px; border-radius: 12px; color: var(--ink2); } .mobpanel a:hover { background: rgba(255,255,255,.06); } /* the mobile Register pill is btn-pri (turquoise) — force ink text so the .mobpanel a light-gray color doesn't win on specificity (would be 1.3:1). */ .mobpanel a.btn-pri { color: var(--bg); } .mobpanel a.btn { margin-top: 10px; border-radius: 999px; justify-content: center; } /* ============================================================================= HERO ============================================================================= */ .hero { position: relative; /* Fill the viewport MINUS the announcement-bar reserve so the hero + bar together equal one screen — keeps bottom-anchored items (meta, credit, carousel dots) inside the fold instead of overflowing by the reserve height. */ min-height: calc(100svh - var(--ann-reserve, 0px)); min-height: calc(100dvh - var(--ann-reserve, 0px)); display: flex; align-items: flex-end; overflow: hidden; } /* base layer — guarantees a dark cinematic field even before media loads */ .hero-base { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 18% 110%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%), radial-gradient(90% 80% at 85% -10%, rgba(21,35,59,.55) 0%, transparent 60%), linear-gradient(180deg, #0d1119 0%, var(--bg) 100%); } /* the hero