/* ============ TOKENS ============ */ :root{ --void:#08090b; --panel:#121317; --panel-2:#191b20; --line:#24262c; --line-soft:#1a1c21; --text:#f2f2f0; --muted:#8b8e96; --muted-2:#5c5f68; --core:#f2d5a1; /* NOVA gold-white — exact star-core highlight from logo */ --core-soft:#f6e3c0; --pulse:#ae8850; /* NOVA GOLD — exact brand hex, sampled from logo ring/star */ --pulse-2:#c7a66e; /* lighter gold tint — secondary text/icons */ --pulse-dim:#123056; /* NOVA navy — sampled from logo figure/wordmark */ --live:#ff4f6d; /* pulsar red-pink, for LIVE state only */ --ok:#57e6a1; --radius:2px; --container:1240px; --ease:cubic-bezier(.16,.8,.24,1); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--void); color:var(--text); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em; } .mono{font-family:'JetBrains Mono',monospace;} p{margin:0;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} ul{list-style:none;margin:0;padding:0;} img{max-width:100%;display:block;} ::selection{background:var(--pulse);color:var(--void);} .wrap{max-width:var(--container);margin:0 auto;padding:0 32px;} @media(max-width:640px){.wrap{padding:0 20px;}} .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--pulse-2); display:flex;align-items:center;gap:10px; margin-bottom:18px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--pulse-2);display:block;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; border-radius:var(--radius); border:1px solid transparent; transition:all .35s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--pulse); color:#161104; box-shadow:0 0 0 0 rgba(174,136,80,.4); } .btn-primary:hover{ background:var(--pulse-2); box-shadow:0 0 30px rgba(174,136,80,.4); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--pulse-2); color:var(--pulse-2); } .btn-sm{padding:11px 20px;font-size:12px;} /* ============ SECTION SCAFFOLD ============ */ section{position:relative;padding:120px 0;border-top:1px solid var(--line-soft);} @media(max-width:800px){section{padding:80px 0;}} .section-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:40px; margin-bottom:56px; } .section-head h2{font-size:clamp(28px,4vw,44px);font-weight:600;} .section-head .sub{color:var(--muted);max-width:420px;font-size:15px;line-height:1.6;} @media(max-width:760px){.section-head{flex-direction:column;align-items:flex-start;gap:14px;}} /* Reveal-on-scroll is progressive enhancement: content is visible by default, and only becomes hidden-then-fades-in once we know JS (added the .js class to ) is actually running. This guarantees content is never stuck invisible if a script fails, is blocked, or is unsupported. */ .reveal, .reveal-stagger > *{opacity:1;transform:none;} .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);} .js .reveal.in{opacity:1;transform:translateY(0);} .js .reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .js .reveal-stagger.in > *{opacity:1;transform:translateY(0);} .reveal-stagger.in > *:nth-child(1){transition-delay:.03s} .reveal-stagger.in > *:nth-child(2){transition-delay:.11s} .reveal-stagger.in > *:nth-child(3){transition-delay:.19s} .reveal-stagger.in > *:nth-child(4){transition-delay:.27s} .reveal-stagger.in > *:nth-child(5){transition-delay:.35s} @media(prefers-reduced-motion: reduce){ .reveal,.reveal-stagger>*{opacity:1 !important;transform:none !important;transition:none !important;} html{scroll-behavior:auto;} } /* ============ ORBIT — SIGNATURE ELEMENT ============ */ .orbit{ position:relative; display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; } .orbit svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);} .orbit .ring-bg{fill:none;stroke:var(--line);stroke-width:2;} .orbit .ring-fg{fill:none;stroke:var(--pulse-2);stroke-width:2;stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(159,140,255,.7)); transition:stroke-dashoffset 1.1s var(--ease);} .orbit .core{position:relative;z-index:1;text-align:center;} /* ============ HEADER ============ */ header{ position:fixed;top:0;left:0;right:0;z-index:100; padding:26px 0; transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease); border-bottom:1px solid transparent; } header.scrolled{ padding:16px 0; background:rgba(8,9,11,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;} .logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:.04em; display:flex;align-items:center;gap:12px; } .logo .mark{ height:36px;width:auto;flex-shrink:0; filter:drop-shadow(0 0 8px rgba(170,131,74,.45)); } .foot-logo{height:230px;width:auto;margin-bottom:6px;} @media(max-width:560px){.foot-logo{height:190px;}} .logo .sub{color:var(--muted-2);font-weight:500;letter-spacing:.06em;font-size:11px;font-family:'JetBrains Mono',monospace;} nav.primary-nav{display:flex;gap:36px;} nav.primary-nav a{ font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase; color:var(--muted);position:relative;padding:4px 0; transition:color .3s; } nav.primary-nav a:hover{color:var(--text);} nav.primary-nav a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--core);transition:width .3s var(--ease); } nav.primary-nav a:hover::after{width:100%;} .header-actions{display:flex;align-items:center;gap:22px;} .login-link{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;} .login-link:hover{color:var(--text);} .burger{display:none;width:26px;height:18px;position:relative;background:none;border:0;} .burger span{position:absolute;left:0;right:0;height:1px;background:var(--text);transition:all .3s var(--ease);} .burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:8px;} .burger span:nth-child(3){top:16px;} .burger.open span:nth-child(1){top:8px;transform:rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){top:8px;transform:rotate(-45deg);} @media(max-width:980px){ nav.primary-nav{ position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw); background:var(--panel); flex-direction:column;justify-content:center;gap:0; padding:0 40px; transform:translateX(100%);transition:transform .5s var(--ease); border-left:1px solid var(--line); } nav.primary-nav.open{transform:translateX(0);} nav.primary-nav a{padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:15px;} .login-link{display:none;} .burger{display:block;} } /* ============ HERO ============ */ .hero{ position:relative; min-height:100vh; display:flex;align-items:flex-end; padding-top:140px;padding-bottom:90px; border-top:none; overflow:hidden; background: radial-gradient(ellipse 60% 50% at 78% 18%, rgba(170,131,74,.22), transparent 60%), radial-gradient(ellipse 50% 40% at 15% 85%, rgba(174,136,80,.10), transparent 60%), linear-gradient(180deg,#0b0c0f 0%, #08090b 55%, #08090b 100%); } #stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8;} .hero-horizon{ position:absolute;left:0;right:0;bottom:0;height:46%; background:linear-gradient(180deg, transparent 0%, rgba(8,9,11,.4) 40%, var(--void) 100%); z-index:1;pointer-events:none; } .hero-rings{ position:absolute;right:-40px;top:46%;transform:translateY(-50%); width:620px;z-index:0;opacity:.9; pointer-events:none; } .hero-rings img{width:100%;height:auto;filter:drop-shadow(0 0 60px rgba(170,131,74,.18));} @media(max-width:1150px){.hero-rings{opacity:.4;width:480px;right:-140px;}} @media(max-width:760px){.hero-rings{display:none;}} .hero .wrap{position:relative;z-index:2;width:100%;} .hero-eyebrow{ font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em; text-transform:uppercase;color:var(--core-soft);margin-bottom:26px; display:flex;align-items:center;gap:12px; } .hero-eyebrow .dot{width:6px;height:6px;background:var(--live);border-radius:50%;box-shadow:0 0 8px var(--live);animation:pulse-dot 1.8s infinite;} h1.hero-title{ font-size:clamp(40px,7vw,88px); font-weight:700; line-height:.98; letter-spacing:-0.02em; max-width:920px; text-transform:uppercase; } h1.hero-title .accent{ background:linear-gradient(92deg,var(--core) 0%,var(--pulse) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-sub{ margin-top:28px; max-width:520px; font-size:17px;line-height:1.65; color:var(--muted); } .hero-cta{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;} .hero-stats{ display:flex;gap:52px;margin-top:88px;padding-top:32px;border-top:1px solid var(--line-soft); max-width:720px;flex-wrap:wrap; } .hero-stats .stat b{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;display:block;color:var(--core-soft);} .hero-stats .stat span{font-size:12px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;} @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.25;}} .scroll-cue{ position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:8px; color:var(--muted-2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em; } .scroll-cue .line{width:1px;height:34px;background:linear-gradient(180deg,var(--muted-2),transparent);animation:cue 2s infinite;} @keyframes cue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}} /* ============ NEXT COMPETITION ============ */ .next-card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:56px; display:grid; grid-template-columns:1.3fr auto 1fr; gap:56px; position:relative; overflow:hidden; } .next-card::before{ content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%; background:radial-gradient(circle,rgba(170,131,74,.16),transparent 65%); pointer-events:none; } @media(max-width:980px){.next-card{grid-template-columns:1fr;padding:36px;gap:36px;}} .next-status{ display:inline-flex;align-items:center;gap:8px; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ok);border:1px solid rgba(87,230,161,.3);background:rgba(87,230,161,.06); padding:6px 12px;border-radius:20px;margin-bottom:24px; } .next-status .dot{width:6px;height:6px;background:var(--ok);border-radius:50%;} .next-title{font-size:clamp(26px,3.4vw,38px);font-weight:600;margin-bottom:28px;line-height:1.1;} .next-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-bottom:36px;} .next-meta div span{display:block;color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;} .next-meta div b{font-size:15px;font-weight:600;} .next-actions{display:flex;gap:14px;flex-wrap:wrap;} .divider-v{width:1px;background:var(--line);} @media(max-width:980px){.divider-v{display:none;}} .countdown-box{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;} .countdown-box .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);} .countdown-grid{display:flex;gap:14px;} .countdown-grid .cd-unit{ width:66px;height:66px; border:1px solid var(--line); border-radius:2px; display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--panel-2); } .countdown-grid .cd-unit b{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--core-soft);} .countdown-grid .cd-unit span{font-size:9px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;} .entrants{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);} .entrants .avatars{display:flex;} .entrants .avatars span{ width:26px;height:26px;border-radius:50%;background:var(--pulse-dim);border:2px solid var(--panel); margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--pulse-2); } .entrants .avatars span:first-child{margin-left:0;} /* ============ LIVE ============ */ .live-panel{ background:linear-gradient(160deg,var(--panel) 0%, #0e0f13 100%); border:1px solid var(--line);border-radius:4px;overflow:hidden; } .live-top{ display:flex;align-items:center;justify-content:space-between; padding:22px 32px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:12px; } .live-badge{ display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.06em;font-size:14px; } .live-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:pulse-dot 1.6s infinite;} .live-meta{color:var(--muted);font-size:13px;} table.live-table{width:100%;border-collapse:collapse;min-width:520px;} table.live-table th{ text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-2);padding:16px 32px 12px;font-weight:500; } table.live-table td{padding:16px 32px;border-top:1px solid var(--line-soft);font-size:14px;} table.live-table tr:hover td{background:rgba(255,255,255,.015);} .pos-cell{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--muted);width:40px;} .pos-cell.top{color:var(--core-soft);} .pts-cell{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--pulse-2);text-align:right;} .trend-up{color:var(--ok);font-size:11px;margin-left:8px;} .trend-down{color:var(--live);font-size:11px;margin-left:8px;} @media(max-width:640px){ table.live-table th,table.live-table td{padding:14px 18px;} } /* Tables scroll horizontally on narrow screens instead of hiding columns — works for every table shape (4, 5 or 6 columns) without per-table rules. */ .live-panel{overflow-x:auto;-webkit-overflow-scrolling:touch;} .live-footer{padding:22px 32px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;} /* ============ RATING ============ */ .tabs{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;} .tab-btn{ padding:11px 22px;border:1px solid var(--line);background:transparent;color:var(--muted); font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase; border-radius:2px;transition:all .3s var(--ease); } .tab-btn.active{background:var(--core);color:#161104;border-color:var(--core);} .tab-btn:not(.active):hover{border-color:var(--pulse-2);color:var(--text);} .rating-list{border:1px solid var(--line);border-radius:4px;overflow:hidden;} .rating-row{ display:flex;align-items:center;gap:24px; padding:20px 28px; border-bottom:1px solid var(--line-soft); background:var(--panel); transition:background .3s; } .rating-row:last-child{border-bottom:none;} .rating-row:hover{background:var(--panel-2);} .rating-row .rank-orbit{width:52px;height:52px;} .rating-row .rank-orbit .core b{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;} .rating-row .rname{flex:1;min-width:0;} .rating-row .rname b{display:block;font-size:15px;font-weight:600;} .rating-row .rname span{font-size:12px;color:var(--muted-2);} .rating-row .rpts{text-align:right;} .rating-row .rpts b{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--core-soft);display:block;} .rating-row .rpts span{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;} @media(max-width:600px){.rating-row{gap:14px;padding:16px 18px;}.rating-row .rank-orbit{width:40px;height:40px;}} .rating-foot{display:flex;justify-content:center;margin-top:32px;} /* ============ ABOUT ============ */ .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .about-card{background:var(--void);padding:44px 38px;position:relative;overflow:hidden;transition:background .4s;} .about-card:hover{background:var(--panel);} .about-card .icon{width:44px;height:44px;margin-bottom:28px;color:var(--pulse-2);} .about-card h3{font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;} .about-card p{color:var(--muted);font-size:14px;line-height:1.7;} .about-card .num{ position:absolute;top:36px;right:38px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2); } @media(max-width:820px){.about-grid{grid-template-columns:1fr;}} /* ============ CALENDAR ============ */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;} .filter-btn{ padding:9px 18px;border:1px solid var(--line);background:transparent;color:var(--muted); font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:20px; transition:all .3s; } .filter-btn.active{background:var(--pulse);border-color:var(--pulse);color:#161104;} .filter-btn:not(.active):hover{border-color:var(--pulse-2);color:var(--text);} .cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:980px){.cal-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.cal-grid{grid-template-columns:1fr;}} .cal-card{ border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:28px; transition:transform .35s var(--ease),border-color .35s; display:flex;flex-direction:column;gap:18px; } .cal-card:hover{transform:translateY(-4px);border-color:var(--pulse-dim);} .cal-date{ display:flex;align-items:baseline;gap:8px;font-family:'JetBrains Mono',monospace;color:var(--core-soft); } .cal-date b{font-size:26px;font-weight:700;} .cal-date span{font-size:12px;color:var(--muted-2);text-transform:uppercase;} .cal-card h4{font-size:17px;font-weight:600;line-height:1.3;} .cal-tags{display:flex;gap:8px;flex-wrap:wrap;} .cal-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:4px 10px;border-radius:20px;} .cal-place{font-size:13px;color:var(--muted);} .cal-status{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);} .cal-status.open{color:var(--ok);} .cal-status.soon{color:var(--core-soft);} .cal-status.closed{color:var(--muted-2);} .cal-foot{display:flex;justify-content:center;margin-top:40px;} /* ============ ATHLETES ============ */ .ath-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} @media(max-width:980px){.ath-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.ath-grid{grid-template-columns:1fr;}} .ath-card{border:1px solid var(--line);background:var(--panel);border-radius:4px;overflow:hidden;transition:border-color .3s;} .ath-card:hover{border-color:var(--pulse-dim);} .ath-photo{ aspect-ratio:4/5;position:relative;display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:42px;color:rgba(255,255,255,.12); overflow:hidden; } .ath-photo .rank-flag{ position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; background:rgba(8,9,11,.7);border:1px solid var(--line);padding:4px 9px;border-radius:2px;color:var(--core-soft); backdrop-filter:blur(4px); } .ath-info{padding:18px 20px;} .ath-info b{display:block;font-size:15px;font-weight:600;} .ath-info .team{font-size:12px;color:var(--muted-2);margin-top:2px;} .ath-info .pts{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line-soft);} .ath-info .pts b{font-family:'JetBrains Mono',monospace;color:var(--pulse-2);} .ath-info .pts span{font-size:10px;color:var(--muted-2);text-transform:uppercase;} .ath-foot{display:flex;justify-content:center;margin-top:40px;} /* ============ NEWS ============ */ .news-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px;} @media(max-width:980px){.news-grid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.news-grid{grid-template-columns:1fr;}} .news-card{border:1px solid var(--line);background:var(--panel);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease);} .news-card:hover{transform:translateY(-4px);} .news-card:first-child{grid-row:span 2;} .news-img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--pulse-dim),#0e0f13);position:relative;} .news-card:first-child .news-img{aspect-ratio:16/12;} .news-cat{ position:absolute;bottom:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;background:rgba(8,9,11,.75);padding:5px 10px;border-radius:2px;color:var(--core-soft); border:1px solid var(--line); } .news-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;} .news-date{font-size:11px;color:var(--muted-2);font-family:'JetBrains Mono',monospace;} .news-body h4{font-size:16px;line-height:1.35;font-weight:600;} .news-card:first-child .news-body h4{font-size:21px;} .news-body p{font-size:13px;color:var(--muted);line-height:1.6;} /* ============ MEDIA ============ */ .media-block{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);} .media-hero{ padding:80px 56px; background: radial-gradient(circle at 25% 30%, rgba(170,131,74,.30), transparent 55%), radial-gradient(circle at 80% 75%, rgba(174,136,80,.16), transparent 50%), #0d0e12; text-align:center; } .media-hero h2{font-size:clamp(30px,5vw,56px);text-transform:uppercase;} .media-hero .sub{color:var(--muted);margin-top:16px;font-size:16px;} .media-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);} .media-tile{aspect-ratio:1;background:var(--panel-2);position:relative;overflow:hidden;cursor:pointer;} .media-tile::before{ content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(28,41,66,.55),transparent 60%); transition:opacity .4s; } .media-tile:hover::before{opacity:0;background:rgba(174,136,80,.18);} .media-tile .play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .3s;color:var(--core-soft); } .media-tile:hover .play{opacity:1;} .social-row{display:flex;justify-content:center;gap:28px;padding:30px 0;background:#0d0e12;flex-wrap:wrap;} .social-row a{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;transition:color .3s;} .social-row a:hover{color:var(--core-soft);} .social-row svg{width:18px;height:18px;} /* ============ PARTNERS ============ */ .partners-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .partner-cell{ aspect-ratio:2/1;display:flex;align-items:center;justify-content:center; border-right:1px solid var(--line);border-bottom:1px solid var(--line); font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.05em;color:var(--muted-2); transition:color .3s;font-size:14px; } .partner-cell:hover{color:var(--text);} @media(max-width:820px){.partners-grid{grid-template-columns:repeat(2,1fr);}} .partners-foot{display:flex;justify-content:space-between;align-items:center;margin-top:32px;flex-wrap:wrap;gap:16px;} .partners-foot p{color:var(--muted);font-size:14px;} /* ============ FINAL CTA ============ */ .final-cta{ position:relative;padding:150px 0;text-align:center;overflow:hidden; background:radial-gradient(ellipse 70% 90% at 50% 100%, rgba(170,131,74,.20), transparent 60%); } .final-cta .burst{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:900px;height:900px;pointer-events:none;opacity:.5; } .final-cta .wrap{position:relative;z-index:1;} .final-cta h2{font-size:clamp(32px,6vw,64px);text-transform:uppercase;line-height:1.05;max-width:820px;margin:0 auto;} .final-cta .sub{margin-top:22px;color:var(--muted);font-size:17px;} .final-cta .hero-cta{justify-content:center;margin-top:44px;} /* ============ FOOTER ============ */ footer{padding:80px 0 34px;border-top:1px solid var(--line-soft);} .foot-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line-soft);} @media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.foot-top{grid-template-columns:1fr;}} .foot-brand p{color:var(--muted);font-size:13px;line-height:1.7;margin-top:18px;max-width:280px;} .foot-col h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;} .foot-col li{margin-bottom:12px;} .foot-col a{font-size:14px;color:var(--muted);transition:color .3s;} .foot-col a:hover{color:var(--core-soft);} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:16px;} .foot-bottom p{font-size:12px;color:var(--muted-2);} .foot-social{display:flex;gap:18px;} .foot-social a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;} .foot-social a:hover{border-color:var(--pulse-2);color:var(--pulse-2);} .foot-social svg{width:15px;height:15px;} :focus-visible{outline:2px solid var(--pulse-2);outline-offset:3px;} /* ============================================================ INTERIOR PAGES — shared design-system extensions (page-hero, breadcrumb, profile, kpi, forms, misc cards) ============================================================ */ .primary-nav a.active{color:var(--text);} .primary-nav a.active::after{width:100%;background:var(--pulse);} .page-hero{ position:relative; padding:168px 0 72px; overflow:hidden; background: radial-gradient(ellipse 55% 70% at 82% 0%, rgba(174,136,80,.16), transparent 60%), radial-gradient(ellipse 40% 50% at 8% 100%, rgba(18,48,86,.5), transparent 60%), var(--void); border-top:none;border-bottom:1px solid var(--line-soft); } .page-hero::before{ content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image: radial-gradient(1px 1px at 12% 22%, rgba(230,225,240,.9), transparent), radial-gradient(1px 1px at 28% 65%, rgba(230,225,240,.7), transparent), radial-gradient(1.5px 1.5px at 45% 15%, rgba(230,225,240,.8), transparent), radial-gradient(1px 1px at 62% 78%, rgba(230,225,240,.6), transparent), radial-gradient(1px 1px at 78% 32%, rgba(230,225,240,.9), transparent), radial-gradient(1.5px 1.5px at 91% 58%, rgba(230,225,240,.6), transparent), radial-gradient(1px 1px at 96% 12%, rgba(230,225,240,.7), transparent); background-repeat:no-repeat; } .breadcrumb{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-2);margin-bottom:22px;position:relative;z-index:1; } .breadcrumb a{color:var(--muted);transition:color .3s;} .breadcrumb a:hover{color:var(--pulse-2);} .page-hero-body{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;} .page-hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:700;text-transform:uppercase;line-height:1.05;max-width:760px;} .page-hero .sub{margin-top:16px;color:var(--muted);font-size:15.5px;max-width:560px;line-height:1.65;} .page-hero-meta{display:flex;gap:36px;flex-wrap:wrap;} .page-hero-meta div span{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;} .page-hero-meta div b{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--core-soft);} /* profile header (athlete/team page) */ .profile-header{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap;} .profile-photo{ width:176px;height:220px;border-radius:4px;flex-shrink:0; background:linear-gradient(150deg,var(--panel-2),#0e0f13); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:56px;color:rgba(255,255,255,.1); position:relative;overflow:hidden; } .profile-photo .rank-flag{position:absolute;top:14px;left:14px;} .profile-id{flex:1;min-width:240px;} .profile-id .team-tag{ display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--pulse-2);border:1px solid rgba(199,166,110,.3); background:rgba(199,166,110,.08);padding:5px 12px;border-radius:20px;margin-bottom:16px; } .profile-id h1{font-size:clamp(28px,4vw,42px);text-transform:none;} .profile-id .region{color:var(--muted);font-size:14px;margin-top:8px;} .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px;} .kpi-card{background:var(--panel);padding:26px 24px;} .kpi-card span{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;} .kpi-card b{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--core-soft);} @media(max-width:760px){.kpi-grid{grid-template-columns:repeat(2,1fr);}} /* generic info / contact card */ .info-card{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:32px;} .info-card h4{font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;color:var(--muted-2);} .info-card p, .info-card a{font-size:15px;line-height:1.7;color:var(--text);} .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:860px){.info-grid{grid-template-columns:1fr;}} /* forms */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .form-grid .full{grid-column:1/-1;} @media(max-width:700px){.form-grid{grid-template-columns:1fr;}} .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);margin-bottom:10px;} .field input, .field textarea, .field select{ width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text); padding:14px 16px;font-family:'Manrope',sans-serif;font-size:14px;border-radius:2px; transition:border-color .3s; } .field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--pulse);} .field textarea{resize:vertical;min-height:130px;} /* simple content prose (alliance / regulations) */ .prose{max-width:760px;color:var(--muted);font-size:15.5px;line-height:1.85;} .prose h3{color:var(--text);font-size:20px;margin:36px 0 14px;font-weight:600;} .prose p + h3{margin-top:36px;} .prose ul{padding-left:20px;list-style:disc;margin-top:10px;} .prose li{margin-bottom:8px;} /* timeline (alliance history) */ .timeline{border-left:1px solid var(--line);padding-left:32px;display:flex;flex-direction:column;gap:36px;} .timeline-item{position:relative;} .timeline-item::before{ content:"";position:absolute;left:-37px;top:4px;width:9px;height:9px;border-radius:50%; background:var(--pulse);box-shadow:0 0 0 4px rgba(174,136,80,.18); } .timeline-item .year{font-family:'JetBrains Mono',monospace;color:var(--core-soft);font-size:13px;margin-bottom:6px;display:block;} .timeline-item h4{font-size:17px;font-weight:600;margin-bottom:6px;} .timeline-item p{color:var(--muted);font-size:14px;line-height:1.6;max-width:560px;} /* pagination */ .pagination{display:flex;justify-content:center;gap:10px;margin-top:44px;} .pagination button{ width:38px;height:38px;border:1px solid var(--line);background:transparent;color:var(--muted); font-family:'JetBrains Mono',monospace;font-size:13px;border-radius:2px;transition:all .3s; } .pagination button.active{background:var(--pulse);border-color:var(--pulse);color:#161104;font-weight:700;} .pagination button:not(.active):hover{border-color:var(--pulse-2);color:var(--text);} /* result table cell alignment helper already covered by .live-table */ .table-wrap{border:1px solid var(--line);border-radius:4px;overflow-x:auto;overflow-y:hidden;background:var(--panel);} .table-wrap .live-top{border-bottom:1px solid var(--line);} /* leadership / people cards (alliance) */ .people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} @media(max-width:900px){.people-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.people-grid{grid-template-columns:1fr;}} .person-card{text-align:center;} .person-photo{ aspect-ratio:1;border-radius:4px;background:linear-gradient(150deg,var(--panel-2),#0e0f13); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;color:rgba(255,255,255,.1); margin-bottom:14px; } .person-card b{display:block;font-size:15px;} .person-card span{font-size:12px;color:var(--muted-2);} /* map placeholder (competition detail) */ .map-block{ aspect-ratio:16/8;border-radius:4px;border:1px solid var(--line); background: radial-gradient(circle at 30% 30%, rgba(174,136,80,.14), transparent 55%), repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.03) 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.03) 39px), var(--panel-2); display:flex;align-items:center;justify-content:center;color:var(--muted-2); font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase; } /* video/photo tile with label (media page) */ .media-tile.labeled{display:flex;align-items:flex-end;padding:14px;} .media-tile.labeled span.tlabel{position:relative;z-index:1;color:var(--core-soft);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;} /* ============================================================ STAGE 2 — data-driven pages: stage badges, rank-change, clickable table rows, card images, compact filter selects ============================================================ */ /* competition-lifecycle stage badge (upcoming / live / finished) — distinct from the existing registration badge (open/soon/closed) */ .stage-badge{ display:inline-flex;align-items:center;gap:7px; font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:5px 11px;border-radius:20px;border:1px solid var(--line); } .stage-badge.upcoming{color:var(--pulse-2);border-color:rgba(199,166,110,.35);background:rgba(199,166,110,.08);} .stage-badge.live{color:var(--live);border-color:rgba(255,79,109,.35);background:rgba(255,79,109,.08);} .stage-badge.live .dot{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:pulse-dot 1.6s infinite;} .stage-badge.finished{color:var(--muted-2);border-color:var(--line);background:rgba(255,255,255,.02);} /* card image placeholder (competitions grid) — no stock photos; a quiet gradient panel carrying the stage badge + discipline label */ .cal-image{ aspect-ratio:16/9;border-radius:3px;position:relative;overflow:hidden;margin:-28px -28px 18px; background: radial-gradient(circle at 25% 20%, rgba(174,136,80,.16), transparent 60%), linear-gradient(150deg,var(--panel-2),#0e0f13); display:flex;align-items:flex-end;justify-content:space-between;padding:14px; } .cal-image .stage-badge{position:relative;} .cal-image .disc-tag{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-2); } /* compact filter select (no label) — reuses .field input theming */ .select-compact{ background:var(--panel-2);border:1px solid var(--line);color:var(--text); padding:11px 14px;font-family:'Manrope',sans-serif;font-size:13px;border-radius:2px; transition:border-color .3s;min-width:160px; } .select-compact:focus{outline:none;border-color:var(--pulse);} /* clickable generic rows/cards (participants, results, cards linking to profiles) */ a.row-link{color:inherit;display:table-row;} .live-table tr.is-link{cursor:pointer;transition:background .25s;} .live-table tr.is-link:hover td{background:rgba(174,136,80,.05);} .live-table td a.entity-link{color:var(--text);font-weight:600;transition:color .3s;} .live-table td a.entity-link:hover{color:var(--pulse-2);} .live-table .sub{display:block;font-size:11px;color:var(--muted-2);margin-top:2px;font-weight:400;} /* rank-change indicator (rating.html) */ .rank-change{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px;} .rank-change.up{color:var(--ok);} .rank-change.down{color:var(--live);} .rank-change.same{color:var(--muted-2);} /* status pill used inside participants table */ .status-pill{font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid var(--line);} .status-pill.confirmed{color:var(--ok);border-color:rgba(87,230,161,.3);background:rgba(87,230,161,.06);} .status-pill.pending{color:var(--muted-2);} /* empty-state message for filtered lists with zero results */ .empty-state{padding:60px 20px;text-align:center;color:var(--muted-2);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border:1px dashed var(--line);border-radius:4px;} /* documents list (competition.html) */ .doc-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .doc-row{background:var(--panel);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .3s;} .doc-row:hover{background:var(--panel-2);} .doc-row .doc-name{display:flex;align-items:center;gap:12px;font-size:14px;} .doc-row .doc-type{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);border:1px solid var(--line);padding:3px 8px;border-radius:2px;} /* rank-orbit reused at small size inside table cells */ .rank-orbit-sm{width:34px;height:34px;display:inline-flex;vertical-align:middle;} .rank-orbit-sm .core b{font-size:12px;} /* ============================================================ STAGE 3 — registration wizard ============================================================ */ /* step-by-step progress indicator */ .reg-stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:56px;flex-wrap:wrap;} .reg-step{display:flex;align-items:center;gap:12px;} .reg-step .num{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel); display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--muted-2); transition:all .4s var(--ease);flex-shrink:0; } .reg-step .label{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);transition:color .4s;white-space:nowrap;} .reg-step.active .num{background:var(--pulse);border-color:var(--pulse);color:#161104;box-shadow:0 0 16px rgba(174,136,80,.4);} .reg-step.active .label{color:var(--text);} .reg-step.done .num{background:transparent;border-color:var(--ok);color:var(--ok);} .reg-step.done .label{color:var(--muted);} .reg-connector{width:44px;height:1px;background:var(--line);margin:0 10px;flex-shrink:0;} .reg-connector.done{background:var(--ok);} @media(max-width:700px){ .reg-step .label{display:none;} .reg-connector{width:22px;margin:0 6px;} } /* wizard step visibility */ .wizard-step{display:none;} .wizard-step.active{display:block;} /* participant-type choice cards */ .type-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} @media(max-width:700px){.type-choice-grid{grid-template-columns:1fr;}} .type-card{ border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:36px 30px; cursor:pointer;transition:all .35s var(--ease);text-align:left;position:relative; } .type-card:hover{border-color:var(--pulse-dim);transform:translateY(-2px);} .type-card.selected{border-color:var(--pulse);background:var(--panel-2);box-shadow:0 0 0 1px var(--pulse), 0 0 30px rgba(174,136,80,.15);} .type-card .icon{width:40px;height:40px;color:var(--pulse-2);margin-bottom:22px;} .type-card h3{font-size:18px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;} .type-card p{color:var(--muted);font-size:13.5px;line-height:1.6;} .type-card .check{ position:absolute;top:24px;right:24px;width:22px;height:22px;border-radius:50%; border:1px solid var(--line);display:flex;align-items:center;justify-content:center; font-size:12px;color:transparent;transition:all .3s; } .type-card.selected .check{background:var(--pulse);border-color:var(--pulse);color:#161104;} /* form validation states */ .field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--live);} .field-error{display:block;color:var(--live);font-size:12px;margin-top:7px;font-family:'Manrope',sans-serif;} .field-hint{display:block;color:var(--muted-2);font-size:12px;margin-top:7px;} /* review (step 3) key-value rows */ .review-block{margin-bottom:32px;} .review-block h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:16px;} .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;} @media(max-width:600px){.review-grid{grid-template-columns:1fr;}} .review-grid div span{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;} .review-grid div b{font-size:14.5px;font-weight:600;} .review-agree{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:13px;} .review-agree .ok{color:var(--ok);margin-right:8px;} /* confirmation (step 4) */ .confirm-card{text-align:center;padding:60px 40px;position:relative;overflow:hidden;} .confirm-card .burst-sm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;height:520px;opacity:.4;pointer-events:none;} .confirm-card .content{position:relative;z-index:1;} .confirm-icon{width:64px;height:64px;margin:0 auto 28px;color:var(--ok);} .confirm-number{font-family:'JetBrains Mono',monospace;font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--core-soft);letter-spacing:.02em;margin:18px 0;} .confirm-meta{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin:32px 0;text-align:left;} .confirm-meta div span{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;} .confirm-meta div b{font-size:15px;font-weight:600;} .confirm-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px;} .reg-banner{ border:1px solid rgba(174,136,80,.3);background:rgba(174,136,80,.06);border-radius:4px; padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-bottom:36px;font-size:14px; } .reg-banner b{color:var(--core-soft);} .reg-banner-error{border-color:rgba(255,79,109,.4);background:rgba(255,79,109,.07);} .reg-banner-error b{color:#ff8fa3;} .reg-banner-warn{border-color:rgba(242,213,161,.4);background:rgba(242,213,161,.07);} .reg-banner-warn b{color:var(--core-soft);} .reg-banner-ok{border-color:rgba(46,204,113,.4);background:rgba(46,204,113,.07);} .reg-banner-ok b{color:#57e6a1;} /* ============ ADMIN (organizer dashboard) ============ */ .admin-shell{min-height:100vh;display:flex;flex-direction:column;} .admin-header{ position:sticky;top:0;z-index:50; background:rgba(8,9,11,.92);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .admin-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;min-height:72px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;} @media(max-width:860px){ .admin-header .wrap{padding-top:12px;padding-bottom:12px;} .admin-user{width:100%;justify-content:space-between;order:3;border-top:1px solid var(--line-soft);padding-top:10px;} .admin-user span{font-size:12px;} } .admin-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;} .admin-nav a{ font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);padding:10px 14px;border-radius:var(--radius);transition:all .25s var(--ease); } .admin-nav a:hover{color:var(--text);} .admin-nav a.active{color:var(--core-soft);background:rgba(174,136,80,.1);} .admin-user{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);} .admin-user b{color:var(--text);font-weight:600;} .admin-main{flex:1;padding:48px 0 80px;} .admin-footer{border-top:1px solid var(--line-soft);padding:26px 0;color:var(--muted-2);font-size:12.5px;} .admin-title{font-size:clamp(24px,3.4vw,36px);font-weight:600;margin-bottom:6px;} .admin-sub{color:var(--muted);font-size:14.5px;margin-bottom:36px;} .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:48px;} @media(max-width:960px){.kpi-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.kpi-grid{grid-template-columns:1fr;}} .kpi-card{ background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:24px; position:relative;overflow:hidden; } .kpi-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--pulse),transparent);} .kpi-card .kpi-value{font-family:'JetBrains Mono',monospace;font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--core-soft);line-height:1;} .kpi-card .kpi-label{margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .admin-grid-2{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start;} @media(max-width:960px){.admin-grid-2{grid-template-columns:1fr;}} .admin-card{ background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:26px; } .admin-card h3{font-size:16px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;} .admin-card h3 .count{font-family:'JetBrains Mono',monospace;color:var(--muted-2);font-size:13px;} .mini-row{ display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line-soft); font-size:13.5px;text-decoration:none;color:inherit;flex-wrap:wrap; } .mini-row:first-of-type{border-top:none;} .mini-row .mono{color:var(--muted);} .mini-row b{font-weight:600;} .mini-row .grow{flex:1;min-width:140px;} .pill{font-size:10.5px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid var(--line);white-space:nowrap;} .pill.submitted{color:var(--muted);} .pill.under_review{color:var(--pulse-2);border-color:rgba(199,166,110,.4);background:rgba(174,136,80,.08);} .pill.approved{color:var(--ok);border-color:rgba(87,230,161,.3);background:rgba(87,230,161,.06);} .pill.needs_changes{color:#ffd47f;border-color:rgba(255,212,127,.35);background:rgba(255,212,127,.06);} .pill.rejected{color:var(--live);border-color:rgba(255,79,109,.35);background:rgba(255,79,109,.06);} .pill.withdrawn{color:var(--muted-2);} .pill.open{color:var(--ok);border-color:rgba(87,230,161,.3);background:rgba(87,230,161,.06);} .pill.soon{color:var(--pulse-2);} .pill.closed{color:var(--muted-2);} /* admin table */ .admin-table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow-x:auto;} .admin-table{width:100%;border-collapse:collapse;min-width:760px;} .admin-table th{ text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-2);padding:16px 18px;border-bottom:1px solid var(--line);white-space:nowrap; } .admin-table td{padding:15px 18px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle;} .admin-table tr:last-child td{border-bottom:none;} .admin-table tbody tr{transition:background .2s;} .admin-table tbody tr:hover{background:rgba(255,255,255,.02);} .admin-table .row-title{font-weight:600;color:var(--text);} .admin-table .row-sub{display:block;color:var(--muted-2);font-size:12px;margin-top:3px;} .admin-table a.row-link:hover{color:var(--pulse-2);} .admin-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px;} .admin-input,.admin-select{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); color:var(--text);font-family:'Manrope',sans-serif;font-size:14px;padding:11px 14px;outline:none; transition:border-color .2s; } .admin-input:focus,.admin-select:focus{border-color:var(--pulse-2);} .admin-input::placeholder{color:var(--muted-2);} .admin-search{flex:1;min-width:220px;} .seat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px;} @media(max-width:860px){.seat-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.seat-grid{grid-template-columns:1fr;}} /* application detail */ .detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;} .detail-grid > div{padding:18px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);background:var(--panel);} .detail-grid > div span{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;} .detail-grid > div b{font-size:14.5px;font-weight:600;word-break:break-word;} .detail-section{margin-top:34px;} .detail-section h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pulse-2);margin-bottom:16px;font-family:'JetBrains Mono',monospace;} /* history timeline */ .timeline{display:flex;flex-direction:column;gap:0;} .timeline-item{display:flex;gap:18px;position:relative;padding-bottom:26px;} .timeline-item:last-child{padding-bottom:0;} .timeline-item::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:1px;background:var(--line);} .timeline-item:last-child::before{display:none;} .timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--pulse);flex-shrink:0;margin-top:4px;box-shadow:0 0 0 4px rgba(174,136,80,.15);} .timeline-item.sys .timeline-dot{background:var(--muted-2);box-shadow:0 0 0 4px rgba(92,95,104,.12);} .timeline-body{font-size:13.5px;} .timeline-body .t{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);margin-top:4px;} .timeline-body .c{color:var(--muted);margin-top:5px;} /* status actions */ .status-actions{display:flex;gap:10px;flex-wrap:wrap;} .btn-approve{background:rgba(87,230,161,.1);color:var(--ok);border-color:rgba(87,230,161,.35);} .btn-approve:hover{background:rgba(87,230,161,.18);border-color:var(--ok);color:var(--ok);} .btn-reject{background:rgba(255,79,109,.08);color:var(--live);border-color:rgba(255,79,109,.3);} .btn-reject:hover{background:rgba(255,79,109,.16);border-color:var(--live);color:var(--live);} .btn-current{opacity:.45;pointer-events:none;} /* comment box */ .comment-box textarea{ width:100%;min-height:90px;resize:vertical; background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius); color:var(--text);font-family:'Manrope',sans-serif;font-size:14px;padding:13px 15px;outline:none; } .comment-box textarea:focus{border-color:var(--pulse-2);} /* login screen */ .login-wrap{max-width:420px;margin:6vh auto 0;} .login-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:38px 34px;} .login-card h1{font-size:24px;margin-bottom:6px;} .login-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:28px;} .login-card .field{margin-bottom:16px;} .login-card label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);margin-bottom:8px;font-family:'JetBrains Mono',monospace;} .login-card input{ width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius); color:var(--text);font-size:15px;padding:13px 15px;outline:none;font-family:'Manrope',sans-serif; } .login-card input:focus{border-color:var(--pulse-2);} .login-hint{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:12.5px;line-height:1.7;} .login-hint .mono{color:var(--muted);} .pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:18px;font-size:13px;color:var(--muted);} .pager button{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--text); font-family:'Space Grotesk',sans-serif;font-size:12px;padding:9px 14px;transition:all .25s; } .pager button:hover:not(:disabled){border-color:var(--pulse-2);color:var(--pulse-2);} .pager button:disabled{opacity:.35;cursor:default;} /* ============================================================ STAGE 5 — CABINET СПОРТСМЕНА (cab-*) ============================================================ */ .cab-avatar{ width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--pulse),var(--pulse-dim)); color:var(--core-soft);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px; display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; letter-spacing:.04em; } .cab-avatar-lg{width:72px;height:72px;font-size:22px;box-shadow:0 0 0 1px var(--line),0 0 34px rgba(174,136,80,.22);} .cab-hero{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; background:var(--panel);border:1px solid var(--line);border-radius:4px; padding:24px 26px;margin-top:36px; position:relative;overflow:hidden; } .cab-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--pulse),transparent);} .cab-hero-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;} .cab-hero-info b{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-0.01em;} .cab-hero-info span{color:var(--muted);font-size:13.5px;} .cab-tabs{display:flex;gap:6px;margin-bottom:24px;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:5px;} .cab-tab{ flex:1;background:transparent;border:1px solid transparent;border-radius:var(--radius); color:var(--muted);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px; letter-spacing:.05em;text-transform:uppercase;padding:11px 10px;transition:all .3s var(--ease); } .cab-tab:hover{color:var(--text);} .cab-tab.active{background:var(--pulse);color:#161104;} .cab-loading{color:var(--muted-2);font-size:13.5px;} /* карточка заявки */ .cab-app{margin-bottom:22px;} .cab-app-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;} .cab-app-number{font-size:12px;color:var(--pulse-2);letter-spacing:.08em;} .cab-app-body{display:flex;gap:34px;margin-top:24px;flex-wrap:wrap;} .cab-app-col{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px;} .cab-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);} /* хронология статусов */ .cab-timeline{display:flex;flex-direction:column;gap:0;margin-top:6px;} .cab-tl-row{display:flex;gap:14px;position:relative;padding:0 0 16px 0;} .cab-tl-row:not(:last-child)::before{ content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:1px;background:var(--line); } .cab-tl-dot{ width:11px;height:11px;border-radius:50%;background:var(--panel-2); border:2px solid var(--line);flex-shrink:0;margin-top:3px;z-index:1; } .cab-tl-dot.approved{border-color:var(--ok);background:rgba(87,230,161,.25);} .cab-tl-dot.rejected{border-color:var(--live);background:rgba(255,79,109,.2);} .cab-tl-dot.under_review{border-color:var(--pulse-2);} .cab-tl-dot.needs_changes{border-color:var(--core);} .cab-tl-body{display:flex;flex-direction:column;gap:3px;font-size:13.5px;} .cab-tl-comment{color:var(--muted);font-size:13px;font-style:italic;} .cab-tl-date{color:var(--muted-2);font-size:11.5px;} /* документы */ .cab-dropzone{ border:1px dashed var(--line);border-radius:4px;background:var(--panel-2); padding:30px 20px;text-align:center;cursor:pointer;transition:all .3s var(--ease); display:flex;flex-direction:column;gap:8px;align-items:center;outline:none; } .cab-dropzone span:first-child{font-size:22px;color:var(--pulse-2);} .cab-dropzone b{font-size:14px;font-weight:600;} .cab-dropzone:hover,.cab-dropzone:focus,.cab-dropzone.drag{border-color:var(--pulse);background:rgba(174,136,80,.06);} .cab-dropzone.has-file{border-style:solid;border-color:var(--ok);} .cab-dz-sub{color:var(--muted-2);font-size:12px;} .cab-doc{ display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap; padding:16px 0;border-bottom:1px solid var(--line-soft); } .cab-doc:last-child{border-bottom:none;} .cab-doc-main{display:flex;flex-direction:column;gap:5px;flex:1;min-width:200px;} .cab-doc-main b{font-size:14.5px;} .cab-doc-reject{color:#ff8fa3;font-size:12.5px;} .cab-doc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} /* поля форм кабинета — общие с логином */ .admin-card .field{margin-bottom:16px;} .admin-card .field input, .admin-card .field select{ width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius); color:var(--text);font-size:15px;padding:13px 15px;outline:none;font-family:'Manrope',sans-serif; } .admin-card .field input:disabled{opacity:.55;cursor:not-allowed;} .admin-card .field input:focus, .admin-card .field select:focus{border-color:var(--pulse-2);} .admin-card .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);margin-bottom:8px;font-family:'JetBrains Mono',monospace;} .admin-card .field input[type="date"]{color-scheme:dark;} @media(max-width:760px){ .cab-hero{padding:20px;} .cab-app-body{gap:22px;} }