/* ============================================================ ROBOTS.AI — Esports / Tactical theme Design tokens + full component stylesheet Two themes via [data-theme] on : "light" (default) | "dark" ============================================================ */ /* ---------- DESIGN TOKENS ---------- */ :root[data-theme="light"]{ /* surfaces */ --bg:#e8e8e5; /* page background */ --bg2:#e0e0dc; /* deeper background */ --panel:#fbfbfa; /* card / panel surface */ --panel2:#f1f1ee; /* secondary panel / footer rows */ --inset:#dededa; /* inset (terminal) surface */ /* lines */ --line:#d2d2cd; /* hairline borders */ --line2:#bcbcb5; /* stronger borders / card frame */ /* text */ --ink:#0b0b0d; /* primary text */ --dim:#5c5c60; /* secondary text */ --faint:#9e9e99; /* tertiary / labels */ /* brand */ --accent:#ff3d2e; /* signal red — single accent */ --accent-ink:#ffffff; /* text on accent */ /* effects */ --spot1:#ffffff; /* photo spotlight center */ --spot2:#dcdcd7; /* photo spotlight edge */ --plate:#0b0b0d; /* news-plate headline bg */ --plate-ink:#f1f1ee; /* news-plate headline text */ --ghost:rgba(0,0,0,.045); /* ghosted wordmark */ } :root[data-theme="dark"]{ --bg:#0a0a0b; --bg2:#0d0d0f; --panel:#141417; --panel2:#1a1a1f; --inset:#070708; --line:#26262e; --line2:#34343f; --ink:#f1f1f3; --dim:#8b8b96; --faint:#54545e; --accent:#ff3d2e; --accent-ink:#ffffff; --spot1:#2b2b33; --spot2:#101013; --plate:#f1f1f3; --plate-ink:#0a0a0b; --ghost:rgba(255,255,255,.035); } /* region accent colors (constant across themes) */ :root{ --r-us:#2f6fe0; --r-cn:#ff3d2e; --r-de:#e0992b; /* fonts */ --font-display:'Saira Condensed', 'Arial Narrow', sans-serif; --font-body:'Chakra Petch', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; /* layout */ --maxw:1320px; --gutter:34px; /* notch helpers */ --notch-16:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); --notch-12:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); --notch-9:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); } /* ---------- BASE ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--ink); font-family:var(--font-body);font-size:15px;line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;overflow-x:hidden; } /* faint blueprint grid behind everything */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px;background-position:center; } a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--accent-ink)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative} .cond{font-family:var(--font-display)} .mono{font-family:var(--font-mono)} .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} /* ---------- BRACKET MARK ][ ---------- */ .mark{display:inline-flex;gap:3px;align-items:center} .mark i{width:7px;height:18px;border:2px solid var(--accent);display:block} .mark i:first-child{border-right:none} .mark i:last-child{border-left:none} /* ---------- HUD FRAME (fixed corner brackets) ---------- */ .hud{position:fixed;inset:14px;z-index:30;pointer-events:none} .hud .c{position:absolute;width:26px;height:26px;border:2px solid var(--ink);opacity:.55} .hud .c.tl{top:0;left:0;border-right:none;border-bottom:none} .hud .c.tr{top:0;right:0;border-left:none;border-bottom:none} .hud .c.bl{bottom:0;left:0;border-right:none;border-top:none} .hud .c.br{bottom:0;right:0;border-left:none;border-top:none} /* ---------- HEADER ---------- */ header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .topbar{display:flex;align-items:center;gap:24px;height:64px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} .brand span{color:var(--accent)} nav.main{display:flex;gap:3px;margin-left:10px} nav.main a{padding:8px 13px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:.15s} nav.main a:hover{color:var(--ink)} .spacer{flex:1} .toggle{display:inline-flex;border:1px solid var(--line2);background:var(--panel);padding:3px} .toggle button{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:none;border:none;padding:7px 11px;cursor:pointer;transition:.15s} .toggle button.on{background:var(--ink);color:var(--bg)} /* ---------- BUTTONS ---------- */ .btn{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;cursor:pointer;transition:.16s;border:1px solid var(--line2);background:transparent;color:var(--ink);clip-path:var(--notch-9)} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn-acc{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn-acc:hover{filter:brightness(1.08);color:var(--accent-ink)} /* ---------- HERO ---------- */ .hero{position:relative;padding:54px 0 46px;border-bottom:1px solid var(--line);overflow:hidden} .ghostword{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);font-family:var(--font-display);font-weight:900;font-size:30vw;line-height:.8;color:var(--ghost);letter-spacing:-.02em;white-space:nowrap;pointer-events:none;z-index:0} .lineup{position:absolute;left:0;right:0;bottom:-6%;display:flex;justify-content:center;align-items:flex-end;z-index:0;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)} .lineup img{height:330px;width:110px;object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.05)} .hero-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center} .kick{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line2);background:var(--panel);padding:7px 14px;margin-bottom:26px} .kick .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:bl 1.3s steps(1) infinite} @keyframes bl{50%{opacity:.25}} .kick .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .kick .t b{color:var(--ink);font-weight:500} /* news-plate headline */ .plate{width:100%;max-width:880px} .plate .bar{display:flex;align-items:center;justify-content:center;gap:16px;background:var(--ink);color:var(--bg);padding:10px 18px} .plate .bar .tk{font-family:var(--font-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:500} .plate .bar .mk i{border-color:var(--accent)} .plate .big{background:var(--plate);color:var(--plate-ink);padding:18px 24px 12px;border-left:2px solid var(--ink);border-right:2px solid var(--ink)} .plate .big h1{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,11vw,140px);line-height:.84;letter-spacing:-.02em;text-transform:uppercase} .plate .sub{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--accent);color:var(--accent-ink);padding:11px 18px} .plate .sub .s{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.18em;text-transform:uppercase} .hero-sub{margin-top:26px;max-width:520px;color:var(--dim);font-size:16px;line-height:1.6} .hero-cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap;justify-content:center} /* corner deco bits */ .deco{position:absolute;z-index:2;display:flex;gap:6px} .deco.dots{display:grid;grid-template-columns:repeat(4,4px);gap:5px} .deco.dots i{width:4px;height:4px;background:var(--faint)} .deco.ticks{display:flex;gap:4px} .deco.ticks i{width:2px;height:14px;background:var(--faint)} .d-tl{top:26px;left:0} .d-tr{top:26px;right:0} .d-bl{bottom:90px;left:0} .d-br{bottom:90px;right:0} /* stat strip */ .statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel);margin-top:36px;position:relative;z-index:3} .statstrip .s{padding:18px 22px;border-right:1px solid var(--line)} .statstrip .s:last-child{border-right:none} .statstrip .s b{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;display:block} .statstrip .s b span{color:var(--accent)} .statstrip .s .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:8px} /* ---------- SECTION SHELL ---------- */ section{padding:64px 0;position:relative} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap} .sec-head .lead{display:flex;align-items:center;gap:14px} .sec-head .idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--accent)} .sec-head h2{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,4.4vw,52px);line-height:.92;text-transform:uppercase;letter-spacing:-.01em} .sec-head p{color:var(--dim);font-size:14px;max-width:360px} /* ---------- TOOLBAR (filter / sort) ---------- */ .toolbar{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-bottom:26px} .seg{display:inline-flex;border:1px solid var(--line2);background:var(--panel);padding:3px} .seg button{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);background:none;border:none;padding:9px 16px;cursor:pointer;transition:.15s} .seg button:hover{color:var(--ink)} .seg button.on{background:var(--accent);color:var(--accent-ink)} .seg.solo button.on{background:var(--ink);color:var(--bg)} .toolbar .count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--dim);margin-left:auto} .toolbar .count b{color:var(--accent)} /* ---------- ROSTER CARDS ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .rcard{background:var(--line2);padding:1.5px;clip-path:var(--notch-16);transition:.18s;cursor:pointer} .rcard:hover{background:var(--accent);transform:translateY(-4px)} .rcard .in{background:var(--panel);clip-path:var(--notch-16);height:100%;display:flex;flex-direction:column} .rtop{display:flex;align-items:stretch;justify-content:space-between;border-bottom:1px solid var(--line)} .rtop .rnum{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1;padding:11px 14px;color:var(--ink)} .rtop .rrate{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:8px 12px;background:var(--accent);color:var(--accent-ink);max-width:142px;text-align:right} .rtop .rrate b{font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1;white-space:nowrap} .rtop .rrate span{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:3px} .rphoto{position:relative;height:230px;background:radial-gradient(circle at 50% 42%,var(--spot1),var(--spot2) 72%);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)} .rphoto .gh{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);font-family:var(--font-display);font-weight:900;font-size:150px;line-height:1;color:rgba(128,128,128,.13);z-index:0} .rphoto img{position:relative;z-index:1;height:94%;max-width:80%;object-fit:contain;object-position:bottom center;filter:grayscale(1) contrast(1.12) brightness(.98)} .rphoto .rrgn{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;background:var(--ink);color:var(--bg);padding:4px 8px;font-weight:500} .rphoto .rrgn[data-r="US"]{background:var(--r-us);color:#fff} .rphoto .rrgn[data-r="CN"]{background:var(--r-cn);color:#fff} .rphoto .rrgn[data-r="DE"]{background:var(--r-de);color:#111} .rphoto .spec{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--dim)} .rname{font-family:var(--font-display);font-weight:900;font-size:25px;text-transform:uppercase;letter-spacing:-.01em;padding:12px 14px 2px;line-height:1} .rsub{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:0 14px 12px} .rstats{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:auto} .rstats .sr{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)} .rstats .sr .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:2px} .rstats .sr .v{font-family:var(--font-body);font-size:13px;text-align:right;font-weight:500} .rtick{padding:10px 14px;font-family:var(--font-mono);font-size:10px;line-height:1.5;color:var(--dim);background:var(--panel2)} /* ---------- DOMAIN BIN CARD ---------- */ .bin{position:relative;border:1.5px solid var(--ink);background:var(--panel);overflow:hidden} .bin .topbar2{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--bg);padding:10px 18px} .bin .topbar2 .tk{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase} .bin .topbar2 .mk i{border-color:var(--accent)} .bin .body{display:grid;grid-template-columns:1.35fr 1fr} .bin .l{padding:38px;border-right:1px solid var(--line)} .bin .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .bin .dom{font-family:var(--font-display);font-weight:900;font-size:clamp(46px,6vw,76px);line-height:.86;text-transform:uppercase;letter-spacing:-.02em} .bin .dom span{color:var(--accent)} .bin p{color:var(--dim);font-size:15px;margin-top:16px;max-width:380px;line-height:1.6} .bin .pow{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--faint);margin-top:24px} .bin .r{padding:38px;display:flex;flex-direction:column;justify-content:center;background:var(--panel2)} .bin .pl{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .bin .price{font-family:var(--font-display);font-weight:900;font-size:clamp(44px,5.5vw,60px);line-height:1} .bin .row{display:flex;gap:11px;margin-top:22px} .bin .row .btn{flex:1;text-align:center} /* ---------- SUBDOMAIN CARDS ---------- */ .subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .subcard{border:1px solid var(--line2);background:var(--panel);padding:20px;transition:.16s;cursor:pointer;clip-path:var(--notch-12)} .subcard:hover{border-color:var(--accent)} .subcard .sd{font-family:var(--font-display);font-weight:700;font-size:19px;text-transform:lowercase} .subcard .sd b{color:var(--accent)} .subcard .mm{font-family:var(--font-mono);font-size:10px;color:var(--faint);margin-top:8px;letter-spacing:.06em} .subcard .stk{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-top:14px} /* ---------- AGENTS (two panels) ---------- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px} .panel{border:1px solid var(--line2);background:var(--panel);padding:32px} .panel .pt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .panel h3{font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;margin-bottom:12px;letter-spacing:-.01em} .panel p{color:var(--dim);font-size:14px;line-height:1.6} .steps{margin-top:22px} .steps .st{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:center} .steps .stn{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--accent-ink);background:var(--accent);width:30px;height:30px;display:flex;align-items:center;justify-content:center} .steps .stt b{font-family:var(--font-display);font-weight:700;font-size:17px;display:block;text-transform:uppercase;letter-spacing:.01em} .steps .stt span{font-family:var(--font-mono);font-size:11px;color:var(--dim)} .term{margin-top:20px;border:1px solid var(--line2);background:var(--inset)} .term .tbar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)} .term .tbar i{width:9px;height:9px;border-radius:50%;background:var(--line2)} .term .b{padding:15px;font-family:var(--font-mono);font-size:12px;line-height:1.85} .term .g{color:#4ade80} .term .c{color:#60b5ff} .term .d{color:var(--faint)} .term .w{color:var(--ink)} .metrics{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);margin-top:8px} .metrics .mc{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .metrics .mc:nth-child(even){border-right:none} .metrics .mc:nth-last-child(-n+2){border-bottom:none} .metrics .mc .n{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .metrics .mc .v{font-family:var(--font-display);font-weight:800;font-size:30px;margin-top:8px} .metrics .mc .v.a{color:var(--accent)} /* ---------- FOOTER ---------- */ footer{padding:34px 0 56px;border-top:1px solid var(--line);margin-top:20px} .foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center} .foot .pow{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.04em} .foot .pow b{color:var(--ink)} .foot .pow .s{color:var(--faint);margin:0 8px} .foot .copy{font-family:var(--font-mono);font-size:10px;color:var(--faint);letter-spacing:.08em} /* ---------- RESPONSIVE ---------- */ @media(max-width:1080px){ .grid{grid-template-columns:repeat(2,1fr)} .statstrip{grid-template-columns:repeat(2,1fr)} .statstrip .s:nth-child(2){border-right:none} } @media(max-width:880px){ .bin .body,.duo{grid-template-columns:1fr} .subgrid{grid-template-columns:repeat(2,1fr)} .bin .l{border-right:none;border-bottom:1px solid var(--line)} nav.main{display:none} } @media(max-width:560px){ .grid{grid-template-columns:1fr} .statstrip{grid-template-columns:1fr} .statstrip .s{border-right:none} }