/* Self-hosted fonts (latin subset) — CSP-safe, no external requests. */ @font-face{ font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fonts/jetbrains-mono-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Hall of Fame — Salón de la Fama Premium showcase page for elpia.app. Self-contained dark navy/gold theme. Source: Claude Design handoff (Hall of Fame.html), recreated 1:1. Fonts: Plus Jakarta Sans + JetBrains Mono (loaded in ). */ :root{ --navy:#0d1628; --navy-2:#111d33; --navy-3:#1a2848; --cream:#f7f1e0; --cream-2:#efe7d1; --gold:#fcd34d; --gold-2:#f5b820; --gold-deep:#b88600; --olive:#3a4419; --olive-2:#5a6a26; --ink:#0c1426; --ink-soft:#3b465f; --muted-on-dark:#8a96b3; --muted-on-cream:#5d6b4a; --line-dark:rgba(255,255,255,.08); --line-cream:rgba(0,0,0,.08); } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--navy);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{overflow-x:hidden} /* The shared site.css (header/footer chrome) is loaded BEFORE this file. Scope this page's dark theme + display fonts to #main so the chrome keeps the site's Nunito typography, and neutralize the few home-only site.css rules (.hero/.hero-inner/.eyebrow) that would otherwise leak into the body. */ #main{color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif} #main .hero{min-height:0;display:block;background:transparent} #main .hero::after{content:none;display:none} #main .hero-inner{display:block;grid-template-columns:none;gap:0} #main .eyebrow{margin:0} .container{max-width:1280px;margin:0 auto;padding:0 32px} .eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)} .eyebrow.on-dark{color:var(--gold)} #main h1,#main h2,#main h3,#main h4{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.025em;line-height:1.02;font-weight:800} .h-display{font-size:clamp(56px,7.5vw,112px);font-weight:800;letter-spacing:-.04em;line-height:.95} .h-section{font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em} .h-card{font-size:22px;font-weight:800;letter-spacing:-.01em} p{font-size:17px;line-height:1.55} a{color:inherit;text-decoration:none} /* ============ NAV ============ */ /* Header/nav/footer come from the shared site.css chrome. Only the active state for the current page ("Salón de la Fama") is added here. */ .nav-links a.active, .nav-links a[aria-current="page"]{color:#fcd34d} /* Buttons used by the page body (hero / CTA) */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:12px;padding:12px 18px;font-size:15px;cursor:pointer;border:0;transition:.16s transform,.16s box-shadow,.16s filter} .btn-gold{background:linear-gradient(180deg,#fde07c,#f5b820);color:#221a00;box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px -8px rgba(252,211,77,.5), 0 1px 0 #8a6300} .btn-gold:hover{filter:brightness(1.04);transform:translateY(-1px)} .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.18)} .btn-ghost:hover{background:rgba(255,255,255,.05)} .btn-ghost-dark{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.18)} /* ============ HERO ============ */ .hero{position:relative;padding:88px 0 0;overflow:hidden} .hero-bg{position:absolute;inset:0;pointer-events:none} .hero-glow{position:absolute;left:50%;top:-10%;transform:translateX(-50%);width:1200px;height:780px; background:radial-gradient(ellipse at center, rgba(252,211,77,.32) 0%, rgba(252,211,77,.08) 30%, transparent 60%); filter:blur(20px)} .hero-shaft{position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:340px;height:760px; background:linear-gradient(180deg,rgba(252,211,77,.55),rgba(252,211,77,0));filter:blur(40px);opacity:.75} .hero-grid{position:absolute;inset:0;background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.4) 50%, transparent 100%), radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,.3) 50%, transparent 100%), radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.5) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 35% 80%, rgba(252,211,77,.6) 50%, transparent 100%), radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,.35) 50%, transparent 100%); background-size:300px 300px;opacity:.55} .hero-inner{position:relative;padding:80px 0 56px;text-align:center} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(252,211,77,.08);border:1px solid rgba(252,211,77,.28);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)} .hero h1{margin:22px auto 18px;max-width:14ch} .hero h1 .gold{background:linear-gradient(180deg,#ffe78a 0%,#f5b820 60%,#b88600 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{color:#bcc4d6;max-width:62ch;margin:0 auto 36px;font-size:19px} .hero-meta{display:flex;justify-content:center;gap:34px;color:#a4adc2;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .hero-meta span{display:flex;align-items:center;gap:8px} .hero-meta .sep{width:4px;height:4px;border-radius:50%;background:#3a4663} /* ============ PODIUM ============ */ .podium{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:24px;max-width:1080px;margin:64px auto 0;padding:0 16px;align-items:end} .podium-card{position:relative;border-radius:24px;padding:28px 22px 26px;background:linear-gradient(180deg,#fde07c 0%,#f3b41d 55%,#a47200 100%); box-shadow:0 28px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -28px 36px -16px rgba(0,0,0,.18); color:#1c1300} .podium-card.silver{background:linear-gradient(180deg,#eef1f6 0%,#b6bccb 60%,#6c7587 100%);color:#101725} .podium-card.bronze{background:linear-gradient(180deg,#f4caa6 0%,#c98852 60%,#7a4717 100%);color:#1f1003} .podium-card .rank{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:#0d1628;color:#fff;font-weight:800;font-size:14px;letter-spacing:.05em;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18)} .podium-card.gold .rank{background:#0d1628;color:#fcd34d;border-color:rgba(252,211,77,.5);box-shadow:0 0 0 4px rgba(252,211,77,.18)} .podium-card .crown{position:absolute;top:-44px;left:50%;transform:translateX(-50%);width:44px;height:44px;display:none} .podium-card.gold .crown{display:block} .avatar-ring{position:relative;width:160px;height:160px;margin:6px auto 14px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #fffbe0, #c98e1a 65%, #5a3a00 100%); box-shadow:0 14px 30px -10px rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.25); display:grid;place-items:center} .avatar-ring::before, .avatar-ring::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a1a00,#0a0500);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .avatar-ring::before{left:-2px;top:50%;transform:translateY(-50%)} .avatar-ring::after{right:-2px;top:50%;transform:translateY(-50%)} .avatar-disc{width:124px;height:124px;border-radius:50%;background:linear-gradient(160deg,#1a2238,#0a1024);display:grid;place-items:center;position:relative;overflow:hidden;border:2px solid rgba(0,0,0,.4)} .avatar-disc .letter{font-family:'Plus Jakarta Sans';font-weight:800;font-size:64px;color:#fcd34d;line-height:1;letter-spacing:-.04em;text-shadow:0 2px 0 rgba(0,0,0,.35)} .avatar-disc .lvl{position:absolute;right:-6px;top:6px;width:38px;height:42px;background:linear-gradient(180deg,#0d1628,#1a2848);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);display:grid;place-items:center;color:#fcd34d;font-weight:800;font-size:11px;line-height:1;border:1px solid rgba(252,211,77,.4)} .avatar-disc .lvl small{display:block;font-size:7px;letter-spacing:.1em;opacity:.7;margin-bottom:2px} .podium-name{text-align:center;font-size:24px;font-weight:800;letter-spacing:-.015em} .podium-handle{text-align:center;font-size:13px;font-weight:600;opacity:.7;margin-top:2px} .podium-stats{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px} .podium-stat{background:rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.18);border-radius:12px;padding:10px 12px} .podium-stat .v{font-weight:800;font-size:20px;letter-spacing:-.015em} .podium-stat .l{font-size:11px;font-weight:600;opacity:.7;letter-spacing:.06em;text-transform:uppercase;margin-top:2px} .podium-card.gold{transform:translateY(-32px) scale(1.03)} .podium-base{height:64px;margin-top:-8px;border-radius:0 0 24px 24px;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.18));position:relative} .podium-base .num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'JetBrains Mono';font-weight:700;font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.6)} /* ============ STATS STRIP ============ */ .stats{position:relative;background:var(--cream);color:var(--ink);padding:72px 0} .stats::before{content:"";position:absolute;top:-1px;left:0;right:0;height:80px;background:linear-gradient(180deg,var(--navy),transparent 100%);pointer-events:none} .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px} .stat-card{background:#fff;border:1px solid var(--line-cream);border-radius:18px;padding:26px 24px} .stat-card .num{font-weight:800;font-size:44px;letter-spacing:-.03em;color:var(--olive);line-height:1} .stat-card .lbl{margin-top:8px;color:var(--ink-soft);font-weight:600;font-size:14px} .stat-card .delta{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(56,116,53,.1);color:#2e6a2a} /* ============ LEADERBOARD ============ */ .leaderboard{background:var(--cream);color:var(--ink);padding:32px 0 96px} .lb-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;gap:32px;flex-wrap:wrap} .lb-head h2{max-width:18ch} .lb-toolbar{display:flex;flex-direction:column;gap:14px;align-items:flex-end} .tabs{display:flex;padding:5px;background:#fff;border:1px solid var(--line-cream);border-radius:14px;gap:2px} .tabs button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:14px;padding:9px 16px;border-radius:10px;color:var(--ink-soft);cursor:pointer;transition:.16s} .tabs button.active{background:var(--ink);color:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.3)} .tabs button:hover:not(.active){color:var(--ink)} .lb-filters{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-soft);font-weight:600} .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:#fff;border:1px solid var(--line-cream);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink)} .chip.gold-chip{background:#fff7d1;border-color:#f3d877;color:var(--olive)} .lb-table{background:#fff;border:1px solid var(--line-cream);border-radius:22px;overflow:hidden} .lb-row{display:grid;grid-template-columns:64px 1fr 160px 130px;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line-cream)} .lb-row:last-child{border-bottom:0} .lb-row.head{background:#faf5e3;color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:14px 24px} .lb-row.head .lb-name{font-weight:700} .lb-rank{font-family:'JetBrains Mono';font-weight:700;font-size:18px;color:var(--ink-soft);letter-spacing:.05em} .lb-rank.gold{color:var(--gold-deep);font-size:22px} .lb-rank.silver{color:#5a6477;font-size:22px} .lb-rank.bronze{color:#8a4f1d;font-size:22px} .lb-user{display:flex;align-items:center;gap:14px;min-width:0} .lb-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(160deg,#1a2238,#0a1024);display:grid;place-items:center;color:#fcd34d;font-weight:800;font-size:18px;flex-shrink:0;position:relative;overflow:hidden;border:2px solid var(--cream-2)} .lb-av.has-ring{box-shadow:0 0 0 2px var(--gold)} .lb-name{min-width:0} .lb-name .n{font-weight:800;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px} .lb-name .h{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:2px;display:flex;gap:8px;align-items:center} .badge-mini{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .badge-mini.founder{background:#2d3514;color:#fcd34d} .badge-mini.beta{background:#fff2c2;color:#7d5d00} .badge-mini.streak{background:#ffe9d6;color:#a94f00} .lb-num{font-family:'JetBrains Mono';font-weight:700;font-size:15px;color:var(--ink)} .lb-num small{color:var(--ink-soft);font-weight:600;margin-left:3px;font-size:11px} .lb-pts{font-family:'JetBrains Mono';font-weight:700;font-size:17px;color:var(--olive);letter-spacing:-.01em} .lb-streak{display:flex;align-items:center;gap:6px;color:#a94f00;font-weight:700} .lb-region{font-weight:700;font-size:14px;color:var(--ink)} .lb-region small{display:block;color:var(--ink-soft);font-size:11px;font-weight:600} .lb-foot{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;background:#faf5e3;border-top:1px solid var(--line-cream);font-size:13px;color:var(--ink-soft);font-weight:600} .lb-foot a{color:var(--olive);font-weight:800;display:inline-flex;align-items:center;gap:6px} /* ============ LEGENDS (dark) ============ */ .legends{position:relative;background:var(--navy);padding:120px 0;overflow:hidden} .legends::before{content:"";position:absolute;top:-1px;left:0;right:0;height:80px;background:linear-gradient(180deg,var(--cream),transparent);pointer-events:none} .legends-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px;flex-wrap:wrap} .legends-head h2{max-width:14ch;color:#fff} .legends-head p{color:#a8b1c8;max-width:42ch;font-size:17px} .legend-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px} .legend-card{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#172143,#0f172e);border:1px solid var(--line-dark);padding:28px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between} .legend-card.hero-card{background:linear-gradient(160deg,#3a2f0a 0%,#1f1804 60%,#0d0a02 100%);border-color:rgba(252,211,77,.25)} .legend-card .lc-rank{font-family:'JetBrains Mono';font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase} .legend-card .lc-name{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:.98;margin-top:12px;color:#fff} .legend-card.hero-card .lc-name{font-size:56px} .legend-card .lc-handle{margin-top:6px;color:#a8b1c8;font-size:14px;font-weight:600} .legend-card .lc-deco{position:absolute;right:-20px;top:-20px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(252,211,77,.25),transparent 60%);pointer-events:none} .legend-card.hero-card .lc-deco{width:380px;height:380px;background:radial-gradient(circle at 40% 40%,rgba(252,211,77,.5),rgba(252,211,77,.05) 50%,transparent 70%)} .lc-portrait{position:absolute;right:0;bottom:0;width:80%;height:78%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.4)), repeating-linear-gradient(135deg, rgba(252,211,77,.12) 0 8px, transparent 8px 18px), radial-gradient(circle at 50% 30%, rgba(252,211,77,.25), transparent 60%); border-top-left-radius:24px;mask:radial-gradient(circle at 65% 45%, #000 30%, transparent 75%);pointer-events:none} .lc-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:2} .lc-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px} .lc-stat .v{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.015em;font-family:'Plus Jakarta Sans'} .lc-stat .l{font-size:12px;font-weight:700;color:#7d88a4;letter-spacing:.08em;text-transform:uppercase;margin-top:2px} .lc-medal{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 25%, #fff1ad, #d49a14 60%, #6b4500);display:grid;place-items:center;font-weight:800;color:#1f1300;font-size:22px;letter-spacing:-.02em;box-shadow:0 8px 18px -6px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.25)} /* ============ ACHIEVEMENTS ============ */ .achievements{background:var(--navy);padding:0 0 120px} .ach-head{margin-bottom:32px} .ach-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .ach{position:relative;border-radius:18px;padding:22px 18px;background:linear-gradient(180deg,#1a253f,#101a31);border:1px solid var(--line-dark);text-align:center;color:#fff;transition:.18s} .ach:hover{transform:translateY(-3px);border-color:rgba(252,211,77,.35)} .ach.locked{opacity:.45} .ach .ic{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#fde07c,#f5b820);color:#221a00;font-weight:800;font-size:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .ach.locked .ic{background:linear-gradient(180deg,#3a4663,#1f2b48);color:#5a6685} .ach .nm{font-weight:800;font-size:14px;letter-spacing:-.01em;line-height:1.15} .ach .ds{font-size:11.5px;color:#7d88a4;margin-top:6px;font-weight:600;line-height:1.3} .ach .ct{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;color:var(--gold);font-family:'JetBrains Mono';letter-spacing:.06em} /* ============ GROUPS (cream) ============ */ .groups{background:var(--cream);color:var(--ink);padding:120px 0} .groups::before{content:"";position:absolute} .groups-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px;flex-wrap:wrap} .groups-head h2{max-width:18ch} .groups-head p{max-width:42ch;color:var(--ink-soft);font-size:17px;margin-top:6px} .group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .group{background:#fff;border:1px solid var(--line-cream);border-radius:22px;padding:26px;position:relative;overflow:hidden;transition:.18s} .group:hover{transform:translateY(-3px);box-shadow:0 16px 40px -16px rgba(0,0,0,.18)} .group .gr-rank{font-family:'JetBrains Mono';font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase} .group .gr-name{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:8px;line-height:1.05} .group .gr-meta{margin-top:6px;font-size:13px;color:var(--ink-soft);font-weight:600;display:flex;gap:10px;align-items:center} .gr-bar{height:6px;background:#f3ecd6;border-radius:99px;margin-top:22px;overflow:hidden;position:relative} .gr-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));border-radius:99px} .gr-stats{margin-top:18px;display:flex;justify-content:space-between;gap:12px} .gr-stat{flex:1} .gr-stat .v{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--olive)} .gr-stat .l{font-size:11px;color:var(--ink-soft);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px} .gr-roster{margin-top:18px;display:flex;align-items:center;gap:-8px} .gr-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(160deg,#1a2238,#0a1024);border:2px solid #fff;color:#fcd34d;display:grid;place-items:center;font-weight:800;font-size:11px;margin-left:-8px} .gr-av:first-child{margin-left:0} .gr-extra{margin-left:8px;font-size:13px;color:var(--ink-soft);font-weight:700} /* ============ TIMELINE ============ */ .timeline{background:var(--cream);padding:0 0 120px;color:var(--ink)} .tl-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start} .tl-side{position:sticky;top:120px} .tl-side h2{max-width:16ch} .tl-side p{margin-top:14px;color:var(--ink-soft);max-width:38ch;font-size:17px} .tl{position:relative} .tl::before{content:"";position:absolute;left:16px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--gold),transparent)} .tl-item{position:relative;padding:0 0 36px 56px} .tl-dot{position:absolute;left:8px;top:6px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 0 0 4px rgba(252,211,77,.18)} .tl-when{font-family:'JetBrains Mono';font-size:12px;color:var(--gold-deep);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .tl-h{font-weight:800;font-size:22px;letter-spacing:-.015em;margin-top:6px;line-height:1.15;max-width:36ch} .tl-d{margin-top:8px;color:var(--ink-soft);font-size:15px;max-width:48ch} .tl-d strong{color:var(--olive);font-weight:800} /* ============ CTA ============ */ .cta{position:relative;background:var(--navy);padding:140px 0;overflow:hidden;text-align:center} .cta-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%, rgba(252,211,77,.18), transparent 50%);pointer-events:none} .cta h2{font-size:clamp(48px,5.5vw,84px);max-width:18ch;margin:0 auto;color:#fff} .cta h2 .gold{background:linear-gradient(180deg,#ffe78a 0%,#f5b820 70%);-webkit-background-clip:text;background-clip:text;color:transparent} .cta p{margin:22px auto 36px;max-width:54ch;color:#bcc4d6;font-size:19px} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============ FOOTER ============ */ /* Footer comes from the shared site.css chrome (.site-footer). */ /* responsive */ @media (max-width:980px){ .podium{grid-template-columns:1fr;gap:48px;margin-top:48px} .podium-card.gold{transform:none} .stats-grid{grid-template-columns:repeat(2,1fr)} .lb-row{grid-template-columns:44px 1fr 96px;gap:10px;padding:14px} .lb-row .col-region{display:none} .legend-grid{grid-template-columns:1fr} .ach-grid{grid-template-columns:repeat(3,1fr)} .group-grid{grid-template-columns:1fr} .tl-grid{grid-template-columns:1fr} .tl-side{position:static} } /* Language switcher styling comes from the shared site.css (.language-select). */ /* Skip link (a11y) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#221a00;font-weight:800;padding:10px 16px;border-radius:0 0 10px 0} .skip-link:focus{left:0} /* Reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} } /* ===== Utility & modifier classes (CSP-clean: replaces inline styles) ===== */ .ta-right{text-align:right} .c-white{color:#fff} .mt14{margin-top:14px} .lb-pts{text-align:right} .ach-h2{color:#fff;margin-top:14px;max-width:18ch} .delta.delta--amber{background:rgba(184,134,0,.12);color:#7d5d00} .tabs.tabs--light{background:#fff} .gr-bar i.w96{width:96%} .gr-bar i.w82{width:82%} .gr-bar i.w71{width:71%} .gr-bar i.w62{width:62%} .gr-bar i.w54{width:54%} .gr-bar i.w47{width:47%} .lc-medal.lc-medal--silver{background:radial-gradient(circle at 30% 25%,#eef1f6,#aab2c4 60%,#5a637a)} .lc-medal.lc-medal--bronze{background:radial-gradient(circle at 30% 25%,#f4caa6,#c98852 60%,#7a4717)} .lb-empty{grid-column:1 / -1;text-align:center;color:var(--ink-soft);font-weight:600;padding:10px 0} .avatar-disc .lvl.is-hidden{display:none}