:root{ --ink:#0c0907; --panel:#17110d; --panel2:#1f1712; --edge:#3b2a1e; --bone:#f2dfc3; --rust:#d4501c; --rust-hi:#ff6a1f; --sand:#dcc4a2; --muted:#a08a72; --live:#5FD79E; --display:'Barlow Condensed', system-ui, sans-serif; --body:'Barlow', system-ui, sans-serif; --mono:'Space Mono', ui-monospace, monospace; --pad: clamp(18px,4.5vw,64px); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:300; line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;} :focus-visible{outline:2px solid var(--rust-hi);outline-offset:3px;border-radius:2px;} .wrap{max-width:1160px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0;} /* NAV */ .nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(21,22,20,.82); border-bottom:1px solid var(--edge);} .nav-in{display:flex;align-items:center;gap:18px;height:64px;} .mark{display:flex;align-items:center;gap:11px;margin-right:auto;} .mark img{width:38px;height:38px;display:block;} .mark b{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.06em;text-transform:uppercase;} .nav-links{display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);} .nav-links a{position:relative;padding:6px 0;white-space:nowrap;} .nav-links a:hover{color:var(--bone);} /* The build stamps data-page on , so the current page marks itself without any script. */ body[data-page="home"] .nav-links a[data-nav-page="home"], body[data-page="server"] .nav-links a[data-nav-page="server"], body[data-page="streams"] .nav-links a[data-nav-page="streams"], body[data-page="members"] .nav-links a[data-nav-page="members"], body[data-page="streams"] .nav-links a[data-nav-page="streams"], body[data-page="links"] .nav-links a[data-nav-page="links"], body[data-page="about"] .nav-links a[data-nav-page="about"]{color:var(--bone);} body[data-page="home"] .nav-links a[data-nav-page="home"]::after, body[data-page="server"] .nav-links a[data-nav-page="server"]::after, body[data-page="streams"] .nav-links a[data-nav-page="streams"]::after, body[data-page="members"] .nav-links a[data-nav-page="members"]::after, body[data-page="streams"] .nav-links a[data-nav-page="streams"]::after, body[data-page="links"] .nav-links a[data-nav-page="links"]::after, body[data-page="about"] .nav-links a[data-nav-page="about"]::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rust-hi);} .livechip{min-width:9.6em;justify-content:center;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--edge);border-radius:999px; padding:7px 13px;color:var(--muted);} .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;} .livechip.on{color:var(--live);border-color:rgba(95,215,158,.45);background:rgba(95,215,158,.07);} .livechip.on .dot{background:var(--live);animation:pulse 1.9s infinite;} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,215,158,.55);}50%{box-shadow:0 0 0 7px rgba(95,215,158,0);}} /* HERO */ .hero{padding:clamp(44px,7vw,88px) 0 clamp(40px,6vw,74px);position:relative;overflow:hidden;} .hero::after{content:'';position:absolute;inset:0;z-index:-1; background:radial-gradient(70% 60% at 15% 0%, rgba(176,73,37,.14), transparent 70%);} .hero-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,52px);align-items:center;} .crest{width:clamp(104px,15vw,168px);height:auto;display:block;} h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,9vw,104px);line-height:.94; letter-spacing:.005em;text-transform:uppercase;margin:10px 0 0;} .tagline{font-family:var(--display);font-weight:600;font-size:clamp(17px,2.4vw,25px); color:var(--rust-hi);letter-spacing:.02em;margin:8px 0 0;text-transform:uppercase;} .lede{max-width:52ch;margin:16px 0 0;color:var(--sand);font-size:clamp(14.5px,1.4vw,16.5px);} .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;} .btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; padding:13px 20px;border-radius:2px;border:1px solid var(--rust);background:var(--rust); color:#FFF3E6;font-weight:700;cursor:pointer;transition:transform .16s, box-shadow .16s, background .16s;} .btn:hover{background:var(--rust-hi);transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(176,73,37,.9);} .btn.ghost{background:transparent;color:var(--bone);border-color:var(--edge);} .btn.ghost:hover{border-color:var(--bone);box-shadow:none;} /* SECTIONS */ .sec{padding:clamp(42px,6vw,80px) 0;border-top:1px solid var(--edge);} .sec-head{display:flex;flex-direction:column;align-items:center;text-align:center; gap:7px;margin-bottom:28px;} .sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,50px); letter-spacing:.01em;text-transform:uppercase;margin:5px 0 0;line-height:1;} /* LIVE */ .tabs-live{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;justify-content:center;} .ltab{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--edge);border-radius:3px; padding:10px 15px;background:var(--panel);cursor:pointer;font-family:var(--mono);font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;transition:.18s;} .ltab .dot{background:var(--live);animation:pulse 1.9s infinite;} .ltab:hover{border-color:var(--rust-hi);} .ltab.act{border-color:var(--live);color:var(--live);background:rgba(95,215,158,.09);} .ltab.act:hover{border-color:var(--rust-hi);} .ltab small{font-family:var(--body);font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;} .ltab.act small{color:var(--sand);} .player{position:relative;border:1px solid var(--edge);border-radius:5px;overflow:hidden; background:var(--panel);aspect-ratio:16/9;} .player iframe{width:100%;height:100%;border:0;display:block;} .nobody{display:grid;place-content:center;justify-items:center;gap:14px;text-align:center; padding:44px 24px;border:1px solid var(--edge);border-radius:5px;background:var(--panel);} .nobody img{width:86px;height:86px;opacity:.6;} .nobody h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.2vw,32px); text-transform:uppercase;margin:0;letter-spacing:.02em;} .nobody p{margin:0;color:var(--muted);font-family:var(--mono);font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;} .nowinfo{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.05em; margin:12px 0 0;text-align:center;} /* ROSTER */ /* Three cards plus two gaps. Capping the track rather than widening the cards keeps a wide monitor from fitting a fourth. */ /* On the home page this is a snapping scroller like the games row. The /members page swaps in .allroster, which wraps normally. */ .roster{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding:5px 0;margin:-5px 0; max-width:866px;margin-left:auto;margin-right:auto;} .roster::-webkit-scrollbar{display:none;} .mcard{scroll-snap-align:start;} .roster.allroster{display:flex;flex-wrap:wrap;justify-content:center;overflow:visible; max-width:1160px;scroll-snap-type:none;} @media (prefers-reduced-motion:reduce){ .roster{scroll-behavior:auto;} } .viewall{text-align:center;margin:16px 0 0;} .viewall a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--sand);border-bottom:1px solid var(--edge);padding-bottom:3px;transition:.18s;} .viewall a:hover{color:var(--rust-hi);border-color:var(--rust-hi);} .backwrap{text-align:center;margin:0 0 14px;} .backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:8px 4px;} .backlink:hover{color:var(--rust-hi);} .mcard{container-type:inline-size;position:relative;flex:0 0 auto;width:min(280px,100%); min-width:0;border:1px solid var(--edge);border-radius:5px;background:var(--panel); overflow:hidden;display:flex;flex-direction:column; transition:border-color .2s, transform .2s;} /* The three headshots are all 330x428 from one shoot, so the frame uses that exact ratio and nothing is cropped. A photo of any other shape gets cover-cropped to match rather than breaking the row's alignment. */ .mshot{position:relative;width:100%;aspect-ratio:330/428;background:var(--panel2);} .mphoto{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;} /* Let the card colour rise into the base of the photo so the two aren't divided by a hard line. */ .mshot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%; background:linear-gradient(180deg,rgba(31,32,29,0),var(--panel));pointer-events:none;} .mcard.islive .mshot{box-shadow:inset 0 0 0 2px rgba(95,215,158,.55);} .mbody{padding:0 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1;} .mcard:hover{border-color:var(--rust-hi);transform:translateY(-3px);} /* A live card rests on green, but on hover it matches every other tile — otherwise the border went rust while the photo's inset stayed green. */ .mcard.islive:hover .mshot{box-shadow:inset 0 0 0 2px rgba(255,106,31,.55);} .mshot{transition:box-shadow .2s;} .mcard.islive{border-color:rgba(95,215,158,.5);background:linear-gradient(180deg,rgba(95,215,158,.07),var(--panel));} .mcard.islive:hover{border-color:var(--rust-hi);} /* The name now owns a full-width row instead of sharing one with an avatar and a badge, so it can run bigger and still fit on one line. */ /* Name and standing share a baseline. Wrapping is allowed so a long handle or a long standing drops the badge to its own line instead of squeezing the name onto two. */ .mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px;} .mname{font-family:var(--display);font-weight:700;font-size:clamp(15px,7.2cqi,19px); letter-spacing:.01em;text-transform:uppercase;line-height:1.02;overflow-wrap:anywhere;} /* Standing is plain text, not a chip. Boxing it made it read as another tag and left the real tags looking like an orphaned second row. */ .mtier{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);white-space:nowrap; position:relative;padding-left:10px;} .mtier::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:var(--edge);} .mrole{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--rust-hi);margin-top:3px;} /* Sits over the photo now, so it costs the name nothing. */ .mlive{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:8.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--live); border:1px solid rgba(95,215,158,.55);border-radius:999px;padding:4px 7px; background:rgba(15,16,14,.78);backdrop-filter:blur(3px);display:none;} .mcard.islive .mlive{display:inline-block;} .mblurb{color:var(--muted);font-size:14px;line-height:1.55;margin:0;} .badges{display:flex;flex-wrap:wrap;gap:6px;} .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; border:1px solid var(--edge);border-radius:2px;padding:4px 8px;color:var(--sand);} /* A tag with a colour set gets it as text plus a softened border. The plain border-color line is the fallback for anything without color-mix. */ .badge.tagged{border-color:var(--tc);color:var(--tc); border-color:color-mix(in srgb, var(--tc) 55%, transparent);} .swatch{width:44px;height:44px;padding:0;border:1px solid var(--edge);border-radius:3px; background:var(--ink);cursor:pointer;flex:none;} .swatch::-webkit-color-swatch-wrapper{padding:3px;} .swatch::-webkit-color-swatch{border:0;border-radius:2px;} .tagrow{display:flex;gap:9px;align-items:flex-end;} .tagrow .fld{flex:1;margin-bottom:0;} .panehead{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--edge);} .panehead ~ .panehead{margin-top:30px;} .chiplist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px;} .chip{display:flex;align-items:center;gap:2px;border:1px solid var(--edge);border-radius:3px; background:var(--panel);padding:3px 3px 3px 5px;} .chip input[type=text]{background:transparent;border:0;border-radius:2px;color:var(--bone); font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; padding:8px 6px;min-height:38px;min-width:0;} .chip input[type=text]:focus{outline:1px solid var(--rust-hi);} .chipn{font-family:var(--mono);font-size:9px;color:var(--muted);background:var(--ink); border-radius:999px;padding:2px 7px;} .chipmv,.chipx{background:transparent;border:0;color:var(--muted);cursor:pointer; font-size:13px;line-height:1;padding:9px 6px;min-height:38px;} .chipmv:hover{color:var(--sand);} .chipx:hover{color:#E0645F;} .addrow{display:flex;gap:8px;align-items:center;margin-bottom:11px;} .addrow input{flex:1;max-width:260px;} .tagpick{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 11px;} .tagpick label{display:flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--edge); border-radius:3px;padding:8px 11px;min-height:44px;font-family:var(--mono);font-size:10px; letter-spacing:.11em;text-transform:uppercase;color:var(--muted);} .tagpick label:has(input:checked){border-color:var(--tc,var(--rust-hi));color:var(--tc,var(--rust-hi));} .tagpick input{width:15px;height:15px;accent-color:var(--rust);} .tagnone{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted); margin:0 0 11px;} .badge.tier{border-color:rgba(233,213,175,.4);color:var(--bone);} .plats{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px;} .plat{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border:1px solid var(--edge);border-radius:3px;color:var(--muted);transition:.18s;} .plat svg{width:17px;height:17px;} .plat:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px);} /* AVATARS — one shape for everyone, whatever the source photo is */ /* GAMES */ /* GAMES CAROUSEL A native scroll container with snap points, not a JS slider — swipe, trackpad, keyboard and scrollbar all work for free, and it degrades to a plain scroller if the script never runs. */ .gwrap{position:relative;} .games{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding:5px 0;margin:-5px 0;} .games::-webkit-scrollbar{display:none;} .gcard{scroll-snap-align:start;} @media (prefers-reduced-motion:reduce){ .games{scroll-behavior:auto;} } .gnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;} /* display:flex beats the hidden attribute's own display:none, so the arrows kept showing on pages that had marked them hidden. */ .gnav[hidden]{display:none;} .gdots{display:flex;gap:7px;} .gdot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--edge); background:transparent;cursor:pointer;transition:.18s;} .gdot:hover{border-color:var(--rust-hi);} .gdot[aria-current="true"]{background:var(--rust-hi);border-color:var(--rust-hi);} .garrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--edge); border-radius:3px;background:var(--panel);color:var(--muted);cursor:pointer; font-size:13px;line-height:1;transition:.18s;} .garrow:hover{border-color:var(--rust-hi);color:var(--rust-hi);} .garrow:disabled{opacity:.3;cursor:default;} .garrow:disabled:hover{border-color:var(--edge);color:var(--muted);} @media (pointer:coarse){ .garrow{width:44px;height:44px;} .gdot{width:11px;height:11px;} } .gcard{flex:0 0 auto;width:min(320px,100%);border:1px solid var(--edge);border-radius:5px; background:var(--panel);overflow:hidden;display:flex;flex-direction:column; transition:border-color .2s, transform .2s;} .gcard:hover{border-color:var(--rust-hi);transform:translateY(-3px);} /* Steam's header art is 460x215. Matching that means no crop and no letterbox. */ .gart{aspect-ratio:460/215;width:100%;object-fit:cover;display:block;background:var(--panel2);} .gart.fallback{display:grid;place-content:center;text-align:center;padding:14px; font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase; letter-spacing:.03em;color:var(--muted);line-height:1.1;} .gmeta{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1;} .gname{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase; letter-spacing:.02em;line-height:1.1;} .gnote{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--rust-hi);} .gdesc{font-size:13.5px;line-height:1.5;color:var(--muted);margin:2px 0 0; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} .gsteam{margin-top:auto;padding-top:11px;font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex; align-items:center;gap:6px;} .gcard:hover .gsteam{color:var(--rust-hi);} .gtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;} .gtag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);border:1px solid var(--edge);border-radius:2px;padding:3px 6px;} /* ADMIN — photo picker */ .picker{display:flex;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap;} .picker .pv{width:58px;height:58px;border-radius:50%;flex:none;object-fit:cover; border:2px solid var(--edge);background:var(--panel2);} .picker .pbtns{display:flex;gap:6px;flex-wrap:wrap;} .picker .pstat{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted); flex:1 0 100%;margin:0;min-height:1.3em;} .picker input[type=file]{display:none;} .steamrow{display:flex;gap:6px;align-items:flex-end;} .steamrow .fld{flex:1;margin-bottom:0;} .shits{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;} .shit{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:3px; background:var(--panel);padding:6px 10px 6px 6px;cursor:pointer;font-family:var(--mono); font-size:10.5px;letter-spacing:.05em;color:var(--sand);text-align:left;} .shit img{width:26px;height:39px;object-fit:cover;border-radius:2px;flex:none;background:var(--panel2);} .shit:hover{border-color:var(--rust-hi);color:var(--rust-hi);} /* LIVE — offline collapses to a line instead of an empty billboard */ #live.quiet{padding-top:clamp(26px,3.4vw,40px);padding-bottom:clamp(26px,3.4vw,40px);} #live.quiet .sec-head{margin-bottom:14px;} #live.quiet .sec-head h2{font-size:clamp(21px,2.6vw,29px);} .offbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center; border:1px solid var(--edge); border-radius:4px;background:var(--panel);padding:14px 18px;font-family:var(--mono); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .offbar .dot{background:var(--muted);} .offbar a{color:var(--sand);border-bottom:1px solid var(--edge);padding-bottom:2px;} .offbar a:hover{color:var(--rust-hi);border-color:var(--rust-hi);} /* HERO BANNER */ #bannerWrap{margin:0 0 clamp(18px,3vw,32px);} #heroBanner{display:block;width:100%;} /* Replace mode: sits in the content column like any other image. */ .bw-replace .banner-inner{max-width:1160px;margin:0 auto;padding:0 var(--pad);} .bw-replace #heroBanner{height:auto;border-radius:5px;} /* Masthead mode: full-bleed strip under the nav. The art is cropped to fill, which is safe because the shield sits dead centre and stays whole from 3.8:1 all the way down to a phone's portrait box. */ .bw-masthead{margin-bottom:clamp(20px,3.4vw,38px);} .bw-masthead .banner-inner{position:relative;} .bw-masthead #heroBanner{aspect-ratio:3.6/1;object-fit:cover;object-position:center;} /* The art ends on a hard horizontal edge against the page. Fade the last 14% into the page colour — the shield bottoms out at 84% of the visible box, so the fade starts below it and never veils the mark. */ .bw-masthead .banner-inner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14%; background:linear-gradient(180deg,rgba(21,22,20,0),var(--ink));pointer-events:none;} .hero.masthead{padding-top:0;padding-bottom:clamp(30px,4.4vw,56px);} .hero.masthead .hero-grid{justify-items:center;text-align:center;} .hero.masthead .lede{margin-left:auto;margin-right:auto;} .hero.masthead .cta-row{justify-content:center;} /* The banner already reads THE OG'S — printing it again underneath is just the same words twice. Keep the h1 for screen readers and search, hide it. */ .hero.masthead h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .hero.masthead .tagline{margin-top:14px;font-size:clamp(19px,2.7vw,28px);} @media (max-width:900px){ .bw-masthead #heroBanner{aspect-ratio:2.2/1;} } @media (max-width:560px){ .bw-masthead #heroBanner{aspect-ratio:1.55/1;} } .hero.hasbg::before{content:'';position:absolute;inset:0;z-index:-2;background-image:var(--bg); background-size:cover;background-position:center;opacity:.3;} .hero.hasbg::after{background:linear-gradient(180deg,rgba(21,22,20,.55),rgba(21,22,20,.94)), radial-gradient(70% 60% at 15% 0%, rgba(176,73,37,.14), transparent 70%);} /* ROTATING EYEBROW */ .eyebrow.rot{min-height:1.5em;} .eyebrow.rot .scr{color:var(--rust-hi);opacity:.75;} .eyebrow.rot .car{color:var(--rust-hi);animation:blink 1.05s steps(1) infinite;} @keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}} /* CONNECTED COMMUNITIES */ .comms{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;} .comm{flex:0 0 auto;width:min(300px,100%);border:1px solid var(--edge);border-radius:5px; background:var(--panel);padding:22px 20px 20px;display:flex;flex-direction:column; align-items:center;text-align:center;gap:11px;transition:.2s;} .comm:hover{border-color:var(--rust-hi);transform:translateY(-3px);} .commlogo{height:92px;width:100%;object-fit:contain;object-position:center;display:block;} .commlogo.ph{display:grid;place-content:center;font-family:var(--display);font-weight:700; font-size:30px;color:var(--edge);text-transform:uppercase;letter-spacing:.04em;} .commname{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase; letter-spacing:.02em;line-height:1.05;margin:2px 0 0;} .commblurb{color:var(--muted);font-size:14px;line-height:1.55;margin:0;max-width:36ch;} .commlinks{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:auto;padding-top:6px;} .commlink{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--edge);border-radius:3px;padding:9px 13px;color:var(--muted);transition:.18s;} .commlink:hover{border-color:var(--rust-hi);color:var(--rust-hi);} .about{display:block;} .about p{max-width:62ch;} /* COLLAPSIBLE SECTIONS The heading stays a real

for search and screen readers; a transparent button is laid over the whole header to take the clicks. / .sec-head{position:relative;} .sec-toggle{position:absolute;inset:-8px -12px;width:auto;background:none;border:0;padding:0; cursor:pointer;border-radius:5px;} .sec-toggle:focus-visible{outline:2px solid var(--rust-hi);outline-offset:2px;} .sec-head:hover h2{color:var(--rust-hi);} .sec-head h2{transition:color .18s;} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} .chev{width:11px;height:11px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s, border-color .18s;} .sec-head:hover .chev{border-color:var(--rust-hi);} .sec.closed .chev{transform:rotate(-135deg) translate(-3px,-3px);} .sec-body{transition:height .28s ease, opacity .2s ease;} .sec-body.anim, .sec.closed > .wrap > .sec-body{overflow:hidden;} .sec.closed > .wrap > .sec-body{height:0 !important;opacity:0;overflow:hidden;} .sec.closed{padding-bottom:clamp(26px,3.4vw,40px);} [data-home-only="hide"]{display:none !important;} .route-members .hero{display:none;} @media (prefers-reduced-motion:reduce){ .sec-body{transition:none;} } / DISCORD WIDGET / .dwidget{display:flex;justify-content:center;} .dwidget iframe{width:100%;max-width:350px;height:500px;border:0;border-radius:6px; background:var(--panel);display:block;color-scheme:dark;} .dwnote{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);text-align:center;margin:12px 0 0;} / ABOUT + RGMT / .about p{color:var(--sand);font-size:16px;max-width:62ch;margin-left:auto;margin-right:auto;} .linkline{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--edge);border-radius:3px; padding:10px 15px;transition:.18s;} .linkline:hover{border-color:var(--rust-hi);color:var(--rust-hi);} / MORE + FOOTER / .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .link{flex:0 0 auto;width:min(280px,100%);display:flex;align-items:center;gap:14px; border:1px solid var(--edge);border-radius:4px;padding:16px 18px;background:var(--panel); transition:.18s;} .link:hover{border-color:var(--rust-hi);background:var(--panel2);transform:translateY(-3px);} .link-l{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;} .link-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-top:2px;} .link-arrow{margin-left:auto;color:var(--muted);font-family:var(--mono);} .link:hover .link-arrow{color:var(--rust-hi);} .foot{border-top:1px solid var(--edge);padding:38px 0 50px;} .foot-in{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center; text-align:center;} .foot small{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;} / ADMIN / .adm-open{position:fixed;right:14px;bottom:14px;z-index:70;width:38px;height:38px;border-radius:50%; border:1px solid var(--edge);background:rgba(31,32,29,.9);color:var(--muted);cursor:pointer; font-size:15px;display:grid;place-items:center;opacity:.35;transition:.2s;} .adm-open:hover{opacity:1;color:var(--rust-hi);border-color:var(--rust-hi);} .adm{position:fixed;inset:0;z-index:100;background:rgba(8,8,7,.88);backdrop-filter:blur(8px); display:none;align-items:flex-start;justify-content:center;padding:20px;overflow:auto;} .adm.show{display:flex;} .adm-box{width:min(900px,100%);background:var(--panel);border:1px solid var(--edge);border-radius:7px; margin:auto;overflow:hidden;} .adm-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--edge);} .adm-top h3{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase; margin:0;margin-right:auto;white-space:nowrap;letter-spacing:.03em;} .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--live);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9ch;} .login{padding:24px 18px 26px;} .loginrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;} .loginmsg{font-family:var(--mono);font-size:11px;margin:0 0 14px;min-height:1.4em;color:#E0645F;line-height:1.6;} .hint{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.75;margin:16px 0 0;max-width:60ch;} .adm-body{padding:18px;max-height:68vh;overflow:auto;} .tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--edge);flex-wrap:wrap;} .tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .tab.act{color:var(--rust-hi);border-bottom-color:var(--rust-hi);} .pane{display:none;} .pane.act{display:block;} .fld{margin-bottom:13px;} .fld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:6px;} select{width:100%;background:var(--ink);border:1px solid var(--edge);border-radius:3px; color:var(--bone);padding:11px 12px;font-family:var(--body);font-size:16px;font-weight:300; min-height:46px;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px;background-repeat:no-repeat;} .sumline{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);cursor:pointer;padding:4px 0;} .sumline:hover{color:var(--rust-hi);} details{margin-bottom:11px;} input[type=text],input[type=password],textarea{width:100%;background:var(--ink);border:1px solid var(--edge); border-radius:3px;color:var(--bone);padding:11px 12px;font-family:var(--body);font-size:16px;font-weight:300;} textarea{min-height:74px;resize:vertical;line-height:1.55;} .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;} .card{border:1px solid var(--edge);border-radius:4px;padding:14px;margin-bottom:10px;background:var(--ink);} .card-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;} .card-top strong{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--rust-hi);margin-right:auto;} .mini{white-space:nowrap;background:transparent;border:1px solid var(--edge);border-radius:2px; padding:7px 11px;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);} .mini:hover{border-color:var(--rust-hi);color:var(--rust-hi);} .mini.danger:hover{border-color:#E0645F;color:#E0645F;} .chkline{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-family:var(--mono); font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;} .chkline.optin{border:1px solid var(--edge);border-radius:3px;padding:0 12px;margin-bottom:11px;} .chkline.optin:has(input:checked){border-color:rgba(95,215,158,.5);color:var(--live);} input[type=checkbox]{accent-color:var(--rust);width:20px;height:20px;} .adm-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:15px 18px; border-top:1px solid var(--edge);background:var(--panel2);} .adm-foot .note{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-right:auto; letter-spacing:.04em;max-width:44ch;line-height:1.6;} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} / Hiding the nav on phones left no way to reach any page but the one you were on. It drops to its own full-width row instead, scrollable if it ever outgrows the screen. / .nav-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:0;gap:12px;} .nav-links{order:3;flex:1 0 100%;gap:20px;overflow-x:auto;scrollbar-width:none; padding:2px 0 8px;border-top:1px solid var(--edge);margin-top:2px;} .nav-links::-webkit-scrollbar{display:none;} .nav-links a{padding:9px 0;} .adm{padding:0;align-items:stretch;overflow:hidden;} .adm-box{width:100%;height:100vh;height:100dvh;margin:0;border:0;border-radius:0; display:flex;flex-direction:column;} .adm-top,.tabs,.adm-foot{flex:0 0 auto;} .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 88%,transparent 100%);} .tabs::-webkit-scrollbar{display:none;} .tab{white-space:nowrap;padding:14px 13px;} .adm-body,.login{flex:1 1 auto;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch;} .adm-foot{position:sticky;bottom:0;padding-bottom:max(15px,env(safe-area-inset-bottom));} .adm-foot .note{flex:1 0 100%;margin:0 0 4px;} .adm-foot .btn,.adm-foot .mini{flex:1 1 auto;text-align:center;} .cta-row .btn{flex:1 1 46%;text-align:center;} } / Cards hold a fixed 320px and simply wrap. Only once the column is near that size does full width make sense; above it a centred 320 reads better than one card stretched across a tablet. / @media (max-width:440px){ .mcard,.comm,.link,.gcard{width:100%;} } @media (pointer:coarse){ .adm-open{display:none;} .mini{min-height:44px;padding:10px 14px;} .btn{min-height:48px;} .plat{width:44px;height:44px;} } @media (prefers-reduced-motion:reduce){{animation:none!important;transition:none!important;} html{scroll-behavior:auto;}} /* SERVERS / .servers{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;} .svcard{flex:0 0 auto;width:min(340px,100%);border:1px solid var(--edge);border-left:3px solid var(--rust); border-radius:5px;background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:11px; transition:border-color .2s, transform .2s;} .svcard:hover{border-color:var(--rust-hi);transform:translateY(-3px);} .servers.wide .svcard{width:min(520px,100%);} .svtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .svtop h3{font-family:var(--display);font-weight:700;font-size:23px;text-transform:uppercase; letter-spacing:.02em;margin:0;line-height:1.05;} .svtag{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase; color:var(--live);border:1px solid rgba(95,215,158,.5);border-radius:999px;padding:4px 8px;} .svblurb{color:var(--muted);font-size:14px;line-height:1.55;margin:0;} .svrows{margin:2px 0 0;display:flex;flex-direction:column;gap:7px;} .svrow{display:flex;gap:12px;align-items:baseline;} .svrow dt{flex:0 0 66px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);} .svrow dd{margin:0;font-size:14.5px;color:var(--sand);word-break:break-all;} .svrow dd.mono{font-family:var(--mono);font-size:13px;} .copyable{cursor:pointer;border-bottom:1px dashed var(--edge);} .copyable:hover{color:var(--rust-hi);border-color:var(--rust-hi);} .copyable.copied{color:var(--live);border-color:var(--live);} .svnote{color:var(--muted);font-size:14px;line-height:1.6;max-width:62ch;margin:18px auto 0; text-align:center;} / RULES / .rules{max-width:640px;margin:0 auto;padding:0;list-style:none;counter-reset:r; display:flex;flex-direction:column;gap:10px;} .rules li{counter-increment:r;position:relative;padding:14px 16px 14px 52px; border:1px solid var(--edge);border-radius:4px;background:var(--panel); color:var(--sand);font-size:15px;line-height:1.55;} .rules li::before{content:counter(r);position:absolute;left:16px;top:14px; font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--rust-hi);} / page header on the inner pages / .pagetop{padding-bottom:0;} .sec-head.static{cursor:default;} .rulerow{display:flex;align-items:center;gap:4px;margin-bottom:7px;} .rulerow input[type=text]{flex:1;} / ---------------------------------------------------- live server status / .svlive{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 13px;} .svpill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--edge);border-radius:999px; padding:6px 11px;color:var(--muted);} .svpill.on{color:var(--live);border-color:rgba(95,215,158,.45);background:rgba(95,215,158,.07);} .svpill.on .dot{background:var(--live);animation:pulse 1.9s infinite;} .svpill.off{color:#E0645F;border-color:rgba(224,100,95,.4);} .svpill.off .dot{background:#E0645F;} .svpill.loading{opacity:.6;} .svmeta{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);} .svbar{flex:1 0 100%;height:4px;border-radius:999px;background:var(--ink);overflow:hidden; border:1px solid var(--edge);} .svbar i{display:block;height:100%;background:var(--live);transition:width .6s ease;} .svfactions{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;} .svfaction{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--edge);border-left:3px solid var(--fc,var(--edge));border-radius:2px; padding:3px 7px;color:var(--muted);} .svcard.haslive{border-color:rgba(95,215,158,.28);} @media (prefers-reduced-motion:reduce){ .svbar i{transition:none;} } / Publish feedback lives in the always-visible footer, not inside the Backend tab — a conflict prompt you can only see on one tab is a prompt nobody sees. / .pubstat{flex:1 0 100%;order:-1;font-family:var(--mono);font-size:10.5px;line-height:1.7; letter-spacing:.04em;color:var(--muted);margin:0 0 4px;} .pubstat:empty{display:none;} .pubstat .mini{margin-left:6px;vertical-align:middle;} / ------------------------------------------------- members page, grouped / / The full roster is grouped by standing, three across, no paging — the home carousel is the summary, this is the reference. / .roster.allroster{display:block;max-width:1160px;overflow:visible;scroll-snap-type:none;} .mgroup + .mgroup{margin-top:clamp(30px,4.4vw,52px);} .mgroup-head{display:flex;align-items:baseline;justify-content:center;gap:11px; margin:0 0 18px;padding-bottom:11px;border-bottom:1px solid var(--edge);} .mgroup-head h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,27px); text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1;} .mgroup-head span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);} / A grid with equal rows, not a flex wrap. Flex only matches heights within a row, so five founders came out as three tall cards and then two stubby ones on the next row. grid-auto-rows:1fr makes every row in a group the height of its tallest, and the cards stretch to fill. / .mgrid{display:grid;grid-template-columns:repeat(3,280px);grid-auto-rows:1fr;gap:13px; justify-content:center;} / Every card on the page is the same height, whether it carries a five-line blurb, two tags and seven links or nothing but a name. 322px is what the fullest possible body needs at card width; equal rows within a group were not enough once a rank had a single member. / .mgrid .mbody{min-height:322px;} @media (max-width:900px){ .mgrid{grid-template-columns:repeat(2,280px);} } @media (max-width:600px){ .mgrid{grid-template-columns:min(280px,100%);} } .roster.allroster .mcard{scroll-snap-align:none;} @media (max-width:440px){ .mgrid{grid-template-columns:1fr;} .mgrid .mcard{width:100%;} } / ------------------------------------------------------------- donations / .donate{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center; border:1px solid var(--edge);border-left:3px solid var(--rust);border-radius:5px; background:var(--panel);padding:clamp(24px,4vw,36px) 22px;max-width:620px;margin:0 auto;} .dnblurb{color:var(--sand);font-size:15.5px;line-height:1.65;margin:0;max-width:52ch;} .dnnote{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0;} / ------------------------------------------------------------ about media / .aboutshots{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin:26px 0 0;} .aboutshot{flex:0 0 auto;width:min(340px,100%);border:1px solid var(--edge);border-radius:5px; overflow:hidden;background:var(--panel);} .aboutshot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;} .aboutshot figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);padding:10px 12px;margin:0;} / Members only manage their own links, so everything else on a member card is read-only for them. Presentation only — the Worker enforces it properly. / .adm[data-role="member"] .card input:not([data-m="twitch"]):not([data-m="kick"]):not([data-m="youtube"]):not([data-m="tiktok"]):not([data-m="instagram"]):not([data-m="site"]):not([data-m="email"]), .adm[data-role="member"] .card textarea, .adm[data-role="member"] .card select, .adm[data-role="member"] .picker, .adm[data-role="member"] .tagpick, .adm[data-role="member"] .chkline{opacity:.4;pointer-events:none;} .adm[data-role="member"] #addMember, .adm[data-role="member"] [data-del="members"], .adm[data-role="member"] [data-mmv]{display:none;} / ------------------------------------------------------------- long read / .longread{max-width:66ch;margin:0 auto;} .longread p{color:var(--sand);font-size:16.5px;line-height:1.75;margin:0 0 1.1em;} .longread h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,28px); text-transform:uppercase;letter-spacing:.02em;margin:1.9em 0 .6em;} .gallery{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:clamp(26px,4vw,44px);} .gphoto{flex:0 0 auto;width:min(340px,100%);border:1px solid var(--edge);border-radius:5px; background:var(--panel);overflow:hidden;} .gphoto img{width:100%;height:auto;display:block;} .gphoto figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);padding:11px 13px;margin:0;} / --------------------------------------------------------------- streams / .stblurb{max-width:62ch;margin:clamp(22px,3.4vw,34px) auto 0;color:var(--sand);font-size:15.5px; line-height:1.7;text-align:center;} .stblurb:empty{display:none;} .streamers{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:clamp(20px,3vw,30px);} .scard{flex:0 0 auto;width:min(230px,100%);display:flex;align-items:center;gap:11px; border:1px solid var(--edge);border-radius:5px;background:var(--panel);padding:11px 13px; transition:border-color .2s, transform .2s;} .scard:hover{border-color:var(--rust-hi);transform:translateY(-3px);} .scard.islive{border-color:rgba(95,215,158,.5);} .scard img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center top;flex:none;} .scard b{display:block;font-family:var(--display);font-weight:700;font-size:17px; text-transform:uppercase;letter-spacing:.02em;line-height:1.05;} .scard span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);} .scard.islive span{color:var(--live);} / ------------------------------------------- servers + discord, side by side / .hub{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,28px);justify-items:center;} .hub-col{min-width:0;} .hub .servers{display:flex;flex-direction:column;gap:13px;} .hub .servers{width:100%;max-width:820px;} .hub .svcard{width:100%;} .hub .viewall{text-align:center;} .hub-discord{width:100%;max-width:350px;} .hub-label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin:0 0 10px;} .hub-label b{color:var(--sand);font-weight:400;} .hub .dwidget{justify-content:center;} / When one side is absent the grid drops to a single column and the survivor centres, so neither is ever stretched across a hole. / .hub.solo{grid-template-columns:1fr;} .hub.solo .dwidget{justify-content:center;} .hub.solo .viewall{text-align:center;} / ------------------------------------------------------------ footer strip / .footstrip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px; padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--edge);} .footstrip:empty{display:none;} .fs-item{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--edge); border-radius:3px;padding:8px 12px;transition:.18s;} a.fs-item:hover{color:var(--rust-hi);border-color:var(--rust-hi);} .fs-item img{height:22px;width:auto;max-width:60px;object-fit:contain;} / ------------------------------------------------------ connect steps / .svsteps{margin:14px 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:8px;} .svsteps li{counter-increment:st;display:flex;gap:11px;align-items:flex-start;color:var(--sand); font-size:14px;line-height:1.5;} .svsteps li::before{content:counter(st);flex:none;width:22px;height:22px;border-radius:50%; border:1px solid var(--edge);display:grid;place-items:center;font-family:var(--mono); font-size:10px;color:var(--rust-hi);margin-top:1px;} .svsteps code{font-family:var(--mono);color:var(--bone);background:var(--ink);padding:1px 6px; border-radius:2px;font-size:12.5px;} / ------------------------------------------------ servers page, by game / .svgroup + .svgroup{margin-top:clamp(30px,4.4vw,52px);} .svgroup-note{color:var(--muted);font-size:14.5px;line-height:1.6;text-align:center; max-width:60ch;margin:-6px auto 16px;} .svgrid{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;} .svgrid .svcard{flex:0 0 auto;width:min(560px,100%);} / ================================================================== EMBER The site's palette, pulled from the animated banner: warm near-black, charcoal panels, ember orange for the accent. The variables at the top of this file carry it; the rules below are the pieces that reference the banner directly. / .nav{background:rgba(12,9,7,.86);border-bottom-color:var(--edge);} .hero::after{ background:linear-gradient(180deg,rgba(12,9,7,.35),rgba(12,9,7,.96)), radial-gradient(70% 60% at 50% 0%, rgba(255,106,31,.16), transparent 70%);} .btn{box-shadow:0 0 0 0 rgba(255,106,31,0);} .btn:hover{box-shadow:0 0 22px rgba(255,106,31,.35);} / ---- video masthead ---- A real