/* ============================================================ unknw go karting grand prix — shared design system ported from unknw-web: dark field / red energy / white ink two type voices · three colors · single weight (400) ============================================================ */ /* ---------- fonts ---------- */ @font-face{ font-family:'Grafier'; src:url('/assets/fonts/Grafier-RegularDisplay.woff2') format('woff2'), url('/assets/fonts/Grafier-RegularDisplay.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Unica77'; src:url('/assets/fonts/Unica77LLCyr-Regular.woff2') format('woff2'), url('/assets/fonts/Unica77LLCyr-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } /* ---------- tokens ---------- */ :root{ --bg:#0a0a0b; --bg-raised:#131315; --bg-overlay:rgba(10,10,11,0.72); --ink:#f4f4f2; --ink-muted:rgba(244,244,242,0.64); --ink-faint:rgba(244,244,242,0.40); --red:#ff2e1a; --red-press:#d92410; --red-deep:#5c0a05; --hairline:rgba(244,244,242,0.14); --hairline-strong:rgba(244,244,242,0.28); --font-display:'Grafier', Georgia, 'Times New Roman', serif; --font-body:'Unica77', 'Helvetica Neue', Arial, sans-serif; --text-display:clamp(52px, 9.2vw, 164px); --text-h1:clamp(40px, 6.4vw, 112px); --text-h2:clamp(30px, 4vw, 64px); --text-h3:clamp(22px, 2.4vw, 34px); --text-body-lg:clamp(18px, 1.6vw, 24px); --text-body:clamp(16px, 1.25vw, 19px); --text-small:clamp(13px, 0.95vw, 15px); --tracking-display:-0.04em; --leading-display:0.92; --leading-body:1.42; --pad-x:clamp(20px, 5vw, 120px); --pad-y:clamp(72px, 12vw, 200px); --pad-y-sm:clamp(48px, 7vw, 110px); --gap-cols:clamp(32px, 6vw, 96px); --pill-clearance:calc(140px + env(safe-area-inset-bottom)); --radius:4px; --radius-pill:999px; --ease-out:cubic-bezier(0.22, 1, 0.36, 1); --dur-fast:180ms; --dur:320ms; --dur-slow:640ms; --shadow-card:0 1px 2px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.45); --glow-red:0 0 48px rgba(255,46,26,0.18); } /* ---------- reset ---------- */ *{box-sizing:border-box; margin:0; padding:0;} html{background:var(--bg);} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:var(--text-body); font-weight:400; line-height:var(--leading-body); letter-spacing:0.005em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,h5,h6,strong,b{font-weight:400;} strong,b{color:var(--ink);} a{color:inherit; text-decoration:none;} img,video{max-width:100%; display:block;} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;} ::selection{background:var(--red); color:#fff;} :focus-visible{outline:2px solid var(--red); outline-offset:3px;} /* film grain over the whole field */ body::after{ content:""; position:fixed; inset:-50%; z-index:2; pointer-events:none; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:0.045; animation:grain 900ms steps(4) infinite; } @keyframes grain{ 0%{transform:translate(0,0);} 25%{transform:translate(-2%,1.5%);} 50%{transform:translate(1.5%,-2%);} 75%{transform:translate(-1%,-1%);} 100%{transform:translate(0,0);} } /* red field glow — drop inside a hero */ .glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .glow::before{ content:""; position:absolute; left:50%; top:-30%; width:120vw; height:120vh; transform:translateX(-50%); background: radial-gradient(ellipse 60% 45% at 50% 20%, rgba(92,10,5,0.55), transparent 70%), radial-gradient(ellipse 35% 25% at 62% 12%, rgba(255,46,26,0.10), transparent 70%); } /* fixed background race video — + .hero-bg in the hero. body must stay transparent or its background paints over the z:-1 video */ .hero-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg); } .hero-bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .hero-bg .veil{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.65) 100%); } body.has-video{background:transparent;} body.has-video .top{ background:rgba(10,10,11,0.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } body.has-video section.section:not(.section--light), body.has-video section.section--lg, body.has-video .marquee, body.has-video footer.site{background:var(--bg); position:relative;} @media (prefers-reduced-motion: reduce){ .hero-bg video{display:none;} } /* ---------- type ---------- */ .t-display, .t-h1, .t-h2, .t-h3{ font-family:var(--font-display); letter-spacing:var(--tracking-display); line-height:var(--leading-display); text-transform:lowercase; color:var(--ink); text-wrap:balance; } .t-display{font-size:var(--text-display);} .t-h1{font-size:var(--text-h1);} .t-h2{font-size:var(--text-h2); letter-spacing:-0.03em; line-height:1;} .t-h3{font-size:var(--text-h3); letter-spacing:-0.02em; line-height:1.1;} .body-lg{font-size:var(--text-body-lg); line-height:1.38;} .small{font-size:var(--text-small);} .muted{color:var(--ink-muted);} .faint{color:var(--ink-faint);} .u-red{color:var(--red);} .stop{color:var(--red);} /* section eyebrow — red index + hairline that fills the rest */ .sec-tag{ display:flex; align-items:center; gap:16px; color:var(--red); font-size:var(--text-small); letter-spacing:0.06em; text-transform:lowercase; white-space:nowrap; } .sec-tag::after{content:""; flex:1; height:1px; background:var(--hairline);} /* ---------- layout ---------- */ .wrap{padding-left:var(--pad-x); padding-right:var(--pad-x);} .section{padding-top:var(--pad-y-sm); padding-bottom:var(--pad-y-sm); position:relative;} .section--lg{padding-top:var(--pad-y); padding-bottom:var(--pad-y);} .rule{height:1px; background:var(--hairline); border:0;} /* light band — flips the field to white ink-on-paper */ .section--light{ --ink:#0a0a0b; --ink-muted:rgba(10,10,11,0.64); --ink-faint:rgba(10,10,11,0.42); --hairline:rgba(10,10,11,0.14); --hairline-strong:rgba(10,10,11,0.30); --bg-raised:#ffffff; background:#f4f4f2; color:var(--ink); } .rule-sweep{position:relative; overflow:hidden;} .rule-sweep::after{ content:""; position:absolute; top:0; bottom:0; left:-120px; width:120px; background:linear-gradient(90deg, transparent, var(--red), transparent); animation:rulesweep 1.6s var(--ease-out) 0.4s 1 forwards; } @keyframes rulesweep{ to{left:100%;} } /* ---------- top bar ---------- */ .top{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px var(--pad-x); border-bottom:1px solid var(--hairline); position:relative; z-index:5; } .top .l, .top .r{display:flex; align-items:center; gap:14px;} .dot{ width:8px; height:8px; background:var(--red); border-radius:50%; display:inline-block; animation:blink 1.6s steps(2,end) infinite; } @keyframes blink{50%{opacity:0.15;}} .top .mark{ font-size:var(--text-small); letter-spacing:0.02em; text-transform:lowercase; color:var(--ink); } .top .mark:hover{color:var(--red);} .top .r a{ font-size:var(--text-small); text-transform:lowercase; color:var(--ink-muted); transition:color var(--dur-fast) linear; } .top .r a:hover{color:var(--red);} .top .r .cta-mini{ background:var(--red); color:#fff; border-radius:var(--radius); padding:8px 14px; transition:background var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out); } .top .r .cta-mini:hover{background:var(--red-press); color:#fff; transform:translateY(-1px);} /* ---------- floating pill — unknw mark only ---------- */ .pill{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; display:flex; align-items:center; padding:14px 22px; background:rgba(19,19,21,0.78); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4); white-space:nowrap; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .pill:hover{transform:translateX(-50%) translateY(-2px); box-shadow:0 16px 48px rgba(0,0,0,0.55), var(--glow-red);} .pill img.logo{height:14px; width:auto; display:block;} main{padding-bottom:var(--pill-clearance);} /* ---------- buttons ---------- */ .btn-red{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; min-height:48px; background:var(--red); color:#fff; font-size:var(--text-body); text-transform:lowercase; letter-spacing:0; border-radius:var(--radius); transition:background var(--dur-fast) linear, transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .btn-red:hover{background:var(--red-press); transform:translateY(-2px); box-shadow:var(--glow-red);} .btn-red:active{transform:translateY(0) scale(0.99);} .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; min-height:48px; background:transparent; color:var(--ink); font-size:var(--text-body); text-transform:lowercase; border:1px solid var(--hairline-strong); border-radius:var(--radius); transition:color var(--dur-fast) linear, border-color var(--dur-fast) linear, transform var(--dur) var(--ease-out); } .btn-ghost:hover{color:var(--red); border-color:var(--red); transform:translateY(-2px);} /* sweep-underline link */ .link-sweep{ background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:left 100%; background-size:0% 1px; transition:background-size var(--dur) var(--ease-out), color var(--dur-fast) linear; } .link-sweep:hover{background-size:100% 1px; color:var(--red);} /* ---------- headline mask reveal ---------- */ .line-mask .line{display:block; overflow:hidden;} .line-mask .line > .line-in{display:block; will-change:transform;} /* ---------- meta grid (hero specs) ---------- */ .meta-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap-cols); padding-top:18px; border-top:1px solid var(--hairline); } .meta-grid .cell{display:flex; flex-direction:column; gap:6px;} .meta-grid .k{font-size:var(--text-small); color:var(--ink-faint); text-transform:lowercase;} .meta-grid .v{font-size:var(--text-small); color:var(--ink); text-transform:lowercase;} .meta-grid .v.hot{color:var(--red);} /* ---------- race list (index) ---------- */ .race-row{ position:relative; display:grid; grid-template-columns:72px 1.4fr 1fr auto; gap:24px; align-items:center; padding:clamp(24px, 3vw, 44px) 0; border-top:1px solid var(--hairline); transition:color var(--dur-fast) linear; } .race-row::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur-slow) var(--ease-out); } .race-row:hover::before{transform:scaleX(1);} .race-row:last-child{border-bottom:1px solid var(--hairline);} .race-row .idx{font-size:var(--text-small); color:var(--ink-faint);} .race-row .name{ font-family:var(--font-display); font-size:var(--text-h2); letter-spacing:-0.03em; line-height:1; text-transform:lowercase; transition:color var(--dur-fast) linear; } .race-row:hover .name{color:var(--red);} .race-row .meta{ display:flex; flex-direction:column; gap:4px; font-size:var(--text-small); color:var(--ink-muted); text-transform:lowercase; } .race-row .end{display:flex; align-items:center; gap:14px; justify-self:end;} .race-row .arr{ color:var(--ink-faint); font-size:var(--text-h3); transition:color var(--dur-fast) linear, transform var(--dur) var(--ease-out); } .race-row:hover .arr{color:var(--red); transform:translateX(6px);} /* status chip */ .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--hairline); font-size:12px; color:var(--ink-muted); text-transform:lowercase; white-space:nowrap; } .chip.hot{border-color:var(--red); color:var(--red);} .chip.hot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red); animation:blink 1.6s steps(2,end) infinite;} /* ---------- cards & media ---------- */ .card{ background:var(--bg-raised); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow-card); } .photo{ position:relative; overflow:hidden; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--bg-raised); } .photo img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out); } a.photo:hover img, .photo.zoom:hover img{transform:scale(1.03);} .photo .cap{ position:absolute; left:12px; bottom:10px; z-index:2; font-size:12px; color:var(--ink); text-transform:lowercase; text-shadow:0 1px 8px rgba(0,0,0,0.8); } .photo .cap .u-red{margin-right:6px;} .photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, transparent 60%, rgba(10,10,11,0.55)); } /* ---------- marquee ---------- */ .marquee{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); overflow:hidden; position:relative; } .marquee-track{ display:flex; gap:0.9em; padding:20px 0; white-space:nowrap; width:max-content; animation:scroll 40s linear infinite; font-family:var(--font-display); font-size:clamp(24px, 3vw, 44px); letter-spacing:-0.03em; text-transform:lowercase; color:var(--ink-muted); } .marquee-track > span{display:inline-flex; align-items:center; gap:0.9em;} .marquee-track .dot-sep{ width:8px; height:8px; background:var(--red); border-radius:50%; display:inline-block; flex:0 0 auto; } .marquee:hover .marquee-track{animation-play-state:paused;} @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- forms ---------- */ .form{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; } .form.hidden{display:none;} .form-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--hairline); } .form-head .ttl{font-size:var(--text-small); color:var(--ink); text-transform:lowercase;} .form-head .id{font-size:12px; color:var(--ink-faint); text-transform:lowercase;} .fields{display:grid; grid-template-columns:1fr 1fr;} .field{ padding:18px 20px; border-bottom:1px solid var(--hairline); display:flex; flex-direction:column; gap:8px; } .field:nth-child(odd){border-right:1px solid var(--hairline);} .field.full{grid-column:1 / -1; border-right:0 !important;} .field label{ font-size:12px; color:var(--ink-faint); text-transform:lowercase; display:flex; justify-content:space-between; gap:10px; } .field label .req{color:var(--red);} .field input, .field textarea{ background:transparent; border:0; outline:0; font-family:var(--font-body); font-size:var(--text-body); color:var(--ink); padding:6px 0; border-bottom:1px solid var(--hairline); width:100%; resize:none; border-radius:0; transition:border-color var(--dur-fast) linear; } .field input:focus, .field textarea:focus{border-bottom-color:var(--red); outline:none;} .form-foot{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; gap:24px; flex-wrap:wrap; } .form-foot .disclaim{font-size:12px; color:var(--ink-faint); max-width:44ch; text-transform:lowercase;} .form-success{ display:none; padding:28px 20px; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--bg-raised); } .form-success.show{display:flex;} .form-success .msg{ font-family:var(--font-display); font-size:var(--text-h3); letter-spacing:-0.02em; text-transform:lowercase; } .form-success .sub{font-size:var(--text-small); color:var(--ink-muted); text-transform:lowercase;} /* ---------- results table ---------- */ .table{ width:100%; border-collapse:collapse; border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline); } .table th, .table td{ text-align:left; padding:18px 16px; vertical-align:middle; border-bottom:1px solid var(--hairline); } .table th{ font-size:12px; color:var(--ink-faint); font-weight:400; text-transform:lowercase; letter-spacing:0.06em; } .table tr:last-child td{border-bottom:0;} .table td{font-size:var(--text-small); color:var(--ink); line-height:1.3;} .table .pos{ font-family:var(--font-display); font-size:clamp(22px, 2.4vw, 34px); letter-spacing:-0.02em; color:var(--red); width:80px; line-height:1; text-transform:lowercase; } .table .pname{color:var(--ink); white-space:nowrap;} .table .ptitle{color:var(--ink-muted);} .table .pco{color:var(--ink);} .table tr.highlight{background:rgba(255,46,26,0.05);} .table tbody tr{transition:background var(--dur-fast) linear;} .table tbody tr:hover{background:rgba(255,46,26,0.04);} /* ---------- gallery ---------- */ .gallery-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;} .gallery-grid .photo{aspect-ratio:4/5;} .gallery-grid .photo::after{background:none;} /* ---------- people ---------- */ .people{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px);} .person{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--bg-raised); transition:border-color var(--dur-fast) linear, transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .person:hover{border-color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow-card);} .avatar{ width:clamp(72px, 7vw, 104px); height:clamp(72px, 7vw, 104px); border-radius:50%; overflow:hidden; background:var(--bg); border:1px solid var(--hairline); flex-shrink:0; } .avatar img{width:100%; height:100%; object-fit:cover;} .p-name{font-size:var(--text-body); color:var(--ink); text-transform:lowercase; line-height:1.1;} .p-role{font-size:12px; color:var(--ink-muted); text-transform:lowercase;} .p-link{margin-top:auto; font-size:12px; color:var(--red); text-transform:lowercase;} /* ---------- company names strip ---------- */ .names-row{ font-size:var(--text-small); color:var(--ink-faint); text-transform:lowercase; line-height:2; } .names-row b{color:var(--ink-muted); font-weight:400; white-space:nowrap;} .names-row .lbl{color:var(--red);} /* ---------- organizer logos ---------- */ .logo-row{ display:flex; align-items:center; gap:clamp(24px, 4vw, 64px); flex-wrap:wrap; } .logo-row a{display:block; opacity:0.9; transition:opacity var(--dur-fast) linear, transform var(--dur) var(--ease-out);} .logo-row a:hover{opacity:1; transform:translateY(-2px);} .logo-row img{height:clamp(16px, 2vw, 26px); width:auto;} .logo-row .x{color:var(--ink-faint); font-size:var(--text-small);} /* ---------- footer ---------- */ footer.site{ border-top:1px solid var(--hairline); padding:clamp(40px, 6vw, 80px) var(--pad-x) calc(var(--pill-clearance)); display:grid; grid-template-columns:1.4fr 1fr; gap:var(--gap-cols); align-items:end; } footer.site .fmark{ font-family:var(--font-display); font-size:var(--text-h2); letter-spacing:-0.03em; line-height:1; text-transform:lowercase; max-width:14ch; } footer.site .fmeta{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; text-align:right; font-size:var(--text-small); color:var(--ink-muted); text-transform:lowercase; } footer.site .fmeta a{color:var(--ink-muted);} footer.site .fmeta a:hover{color:var(--red);} /* ---------- responsive ---------- */ @media (max-width:960px){ .meta-grid{grid-template-columns:1fr 1fr; gap:20px;} .race-row{grid-template-columns:40px 1fr auto; gap:14px;} .race-row .meta{display:none;} .people{grid-template-columns:1fr;} .gallery-grid{grid-template-columns:repeat(3, 1fr);} footer.site{grid-template-columns:1fr;} footer.site .fmeta{align-items:flex-start; text-align:left;} .pill{max-width:calc(100vw - 24px); overflow-x:auto; gap:12px;} } @media (max-width:600px){ .fields{grid-template-columns:1fr;} .field{border-right:0 !important;} .gallery-grid{grid-template-columns:repeat(2, 1fr); gap:6px;} .race-row .end .chip{display:none;} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } body::after{animation:none;} .marquee-track{animation:none;} }