/* modegate.css - THE SERVER CHOOSER and its header switch. RENDERED by tools/modegate/render.py from one owner's modegate.json: every colour below is the OWNER's own :root token with the owner's literal as its fallback, every per-mode rule is generated from the owner's mode list, and the plate/pill shape follows the owner's site. Nothing here is typed per owner and nothing here names another owner's brand. ONE FULL-SCREEN QUESTION, ONCE; THEN A PILL. The gate is the whole screen on a first visit (nothing competes with it), the answer is a cookie, and from then on the choice lives in the header as a switch. No !important; every selector sits under .mgate / .modepill / html[], so a page that never mounts the gate is untouched. The attribute is written BEFORE first paint by modegate.js, which loads synchronously in . */ /* ---- the owner's tokens, one place ------------------------------------- */ .mgate, .modepill { --mg-sig: var(--accent, #1E90FF); --mg-sig2: var(--accent-hot, #00BFFF); --mg-deep: var(--bg-1, #0a0e27); --mg-glow: var(--accent-glow, rgba(30,144,255,.55)); --mg-lock: var(--amber-hot, #ffc14a); --mg-lock-glow: var(--amber-glow, rgba(240,168,44,.45)); --mg-ash: var(--bone, #e7ecff); --mg-ash72: var(--bone-80, rgba(231,236,255,.80)); --mg-ash46: var(--bone-62, rgba(180,191,224,.95)); --mg-ash28: var(--bone-34, rgba(136,146,184,.95)); --mg-ash14: var(--glass-border, rgba(96,130,220,.22)); --mg-disp: var(--display, 'Bebas Neue',system-ui,sans-serif); --mg-mono: var(--mono, 'JetBrains Mono',ui-monospace,Consolas,monospace); --mg-sans: var(--ui, 'Inter',-apple-system,Segoe UI,Roboto,sans-serif); --mg-ease: var(--ease, cubic-bezier(.16,1,.3,1)); } /* ---- the stage ------------------------------------------------------- */ .mgate { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto 1fr auto; color: var(--mg-ash); font-family: var(--mg-sans); background: radial-gradient(90% 60% at 50% 104%, rgba(30,144,255,.16), transparent 60%), radial-gradient(120% 80% at 80% -10%, rgba(240,168,44,.07), transparent 50%), rgba(5,7,13,.86); -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15); overscroll-behavior: contain; transition: opacity .38s var(--mg-ease), transform .38s var(--mg-ease); } .mgate.leave { opacity: 0; transform: scale(1.025); pointer-events: none; } /* scanlines + vignette: the gate draws its own thin layer and stays a lit stage */ .mgate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } .mgate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(5,7,13,.78) 100%); } html.mgate-open, html.mgate-open body { overflow: hidden; } /* ---- the head ----------------------------------------------------------- */ .mgate-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(22px, 5vh, 54px) clamp(16px, 4vw, 44px) 10px; text-align: center; } .mgate-mark { width: clamp(46px, 7vw, 66px); height: clamp(46px, 7vw, 66px); object-fit: contain; border: 1px solid var(--mg-deep); padding: 3px; background: #000; box-shadow: 0 0 34px -8px var(--mg-glow); border-radius: 50%; } .mgate-kick { font-family: var(--mg-mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--mg-sig2); display: inline-flex; align-items: center; gap: 10px; } .mgate-kick::before { content: "["; color: var(--mg-ash28); } .mgate-kick::after { content: "]"; color: var(--mg-ash28); } .mgate-kick .rec { width: 8px; height: 8px; background: var(--mg-sig); animation: mgRec 1.1s steps(1) infinite; } .mgate-title { margin: 0; font-family: var(--mg-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(26px, 4.6vw, 52px); line-height: 1; } .mgate-title em { font-style: normal; color: var(--mg-sig); text-shadow: 0 0 34px var(--mg-glow); } .mgate-sub { margin: 0; max-width: 62ch; font-size: clamp(14px, 1.4vw, 17px); color: var(--mg-ash46); } .mgate-head::after { content: ""; width: min(520px, 70vw); height: 2px; margin-top: 12px; background: linear-gradient(90deg, transparent, var(--mg-sig) 30%, var(--mg-sig) 70%, transparent); opacity: .8; } /* ---- the plates --------------------------------------------------------- */ .mgate-plates { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 26px); width: min(var(--maxw, 1280px), 100%); margin: 0 auto; padding: clamp(8px, 2vh, 20px) clamp(16px, 4vw, 44px); align-items: stretch; transition: grid-template-columns .5s var(--mg-ease); } /* HOVER WIDENS THE PLATE: the pointer's side takes territory from the other, so the signal survives a dim screen and a colourblind reader */ @media (hover: hover) and (min-width: 821px) { .mgate-plates:has(.mplate.pvp:hover, .mplate.pvp:focus-visible) { grid-template-columns: 1.18fr .82fr; } .mgate-plates:has(.mplate.survival:hover, .mplate.survival:focus-visible) { grid-template-columns: .82fr 1.18fr; } } .mplate { --mp-accent: var(--mg-ash); --mp-glow: var(--mg-ash28); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: clamp(300px, 52vh, 560px); padding: clamp(20px, 3vw, 40px); color: var(--mg-ash); text-decoration: none; border: 1px solid var(--mg-ash14); background: linear-gradient(160deg, rgba(10,14,39,.92), rgba(5,7,13,.66)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 22px); overflow: hidden; border-radius: 16px; transition: border-color .3s var(--mg-ease), box-shadow .3s var(--mg-ease), transform .3s var(--mg-ease); outline: none; } .mplate.pvp { --mp-accent: var(--mg-sig); --mp-glow: var(--mg-glow); } .mplate.survival { --mp-accent: var(--mg-lock); --mp-glow: var(--mg-lock-glow); } /* registration frame: four corner ticks, an instrument rather than a splash */ .mplate::before { content: ""; position: absolute; inset: 12px; pointer-events: none; background: linear-gradient(var(--mp-accent), var(--mp-accent)) top left / 18px 1px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) top left / 1px 18px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) top right / 18px 1px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) top right / 1px 18px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) bottom left / 18px 1px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) bottom left / 1px 18px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) bottom right / 18px 1px no-repeat, linear-gradient(var(--mp-accent), var(--mp-accent)) bottom right / 1px 18px no-repeat; opacity: .55; transition: opacity .3s; } /* the accent wash that rises on hover */ .mplate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 110%, var(--mp-glow), transparent 70%); opacity: .35; transition: opacity .35s var(--mg-ease); } .mplate:hover, .mplate:focus-visible { border-color: var(--mp-accent); box-shadow: 0 30px 70px -30px var(--mp-glow), inset 0 0 0 1px rgba(255, 255, 255, .04); transform: translateY(-3px); } .mplate:hover::before, .mplate:focus-visible::before { opacity: 1; } .mplate:hover::after, .mplate:focus-visible::after { opacity: .9; } .mp-num { position: absolute; top: 22px; left: 26px; font-family: var(--mg-mono); font-size: 12px; letter-spacing: .3em; color: var(--mg-ash46); } .mp-led { position: absolute; top: 24px; right: 28px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mg-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--mp-accent); } .mp-led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-accent); box-shadow: 0 0 12px var(--mp-accent); animation: mgRec 1.4s steps(1) infinite; } .mp-word { position: relative; font-family: var(--mg-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: .92; font-size: clamp(46px, 7.2vw, 108px); color: var(--mp-accent); text-shadow: 0 0 44px var(--mp-glow); } .mp-word .gx { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .mplate:hover .mp-word .gx.r, .mplate:focus-visible .mp-word .gx.r { color: var(--mg-sig); animation: mgGlitchR 2.4s steps(1) infinite; } .mplate:hover .mp-word .gx.w, .mplate:focus-visible .mp-word .gx.w { color: #fff; animation: mgGlitchW 2.4s steps(1) infinite; } .mp-line { font-family: var(--mg-mono); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .26em; text-transform: uppercase; color: var(--mg-ash72); } .mp-line span { color: var(--mp-accent); } .mp-spec { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; } .mp-spec li { font-family: var(--mg-mono); font-size: 12px; letter-spacing: .08em; color: var(--mg-ash46); display: flex; gap: 10px; align-items: baseline; } .mp-spec li::before { content: ">"; color: var(--mp-accent); } .mp-spec li b { color: var(--mg-ash72); font-weight: 500; } .mp-enter { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mg-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 11px 20px; color: #04101f; background: var(--mp-accent); border-radius: 10px; box-shadow: 0 8px 30px -10px var(--mp-glow); transition: transform .22s var(--mg-ease), box-shadow .22s var(--mg-ease); } .mp-enter svg { width: 14px; height: 14px; } .mplate:hover .mp-enter, .mplate:focus-visible .mp-enter { transform: translate(2px, -2px); box-shadow: 0 14px 38px -10px var(--mp-glow); } /* ---- the foot ----------------------------------------------------------- */ .mgate-foot { position: relative; z-index: 2; padding: 10px clamp(16px, 4vw, 44px) clamp(18px, 4vh, 36px); text-align: center; font-family: var(--mg-mono); font-size: 11px; letter-spacing: .14em; color: var(--mg-ash28); } .mgate-foot b { color: var(--mg-ash14); font-weight: 400; } .mgate-foot .cur { display: inline-block; width: 7px; height: 12px; background: var(--mg-sig); vertical-align: -2px; animation: mgRec .9s steps(1) infinite; } /* ---- arrival: keyed on html.mgate-open, which only the script sets, so a reader with no scripting never meets a plate parked at opacity 0 ---------- */ html.mgate-open .mgate-head { animation: mgIn .55s var(--mg-ease) both; } html.mgate-open .mplate { animation: mgIn .6s var(--mg-ease) both; } html.mgate-open .mplate.pvp { animation-delay: .12s; } html.mgate-open .mplate.survival { animation-delay: .22s; } html.mgate-open .mgate-foot { animation: mgIn .5s var(--mg-ease) .34s both; } @keyframes mgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mgRec { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } } @keyframes mgGlitchR { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: .8; transform: translate(-4px, 1px); } 96% { opacity: .5; transform: translate(3px, -1px); } } @keyframes mgGlitchW { 0%, 94%, 100% { opacity: 0; transform: none; } 95% { opacity: .6; transform: translate(3px, -2px); } 98% { opacity: .35; transform: translate(-2px, 1px); } } @media (prefers-reduced-motion: reduce) { .mgate, .mplate, .mp-enter, .mgate-head, .mgate-foot { animation: none; transition: none; } .mp-word .gx { display: none; } } /* ---- phone: plates stack, the word steps down, the grid stops moving ------ */ @media (max-width: 820px) { .mgate { grid-template-rows: auto 1fr auto; overflow-y: auto; } .mgate-plates { grid-template-columns: 1fr; gap: 12px; } .mplate { min-height: 0; padding: 22px 20px 20px; gap: 8px; } .mp-word { font-size: clamp(40px, 13vw, 64px); } .mp-spec { display: none; } .mp-num { top: 16px; left: 20px; } .mp-led { top: 18px; right: 20px; } } @media (max-height: 640px) and (min-width: 821px) { .mplate { min-height: 240px; } .mp-spec { display: none; } } /* ---- THE PILL: the switch that replaces the gate ------------------------- */ .modepill { display: inline-flex; align-items: stretch; flex: 0 0 auto; border: 1px solid var(--mg-ash14); background: rgba(96,130,220,.10); border-radius: 10px; overflow: hidden; font-family: var(--mg-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; } .modepill a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; color: var(--mg-ash46); text-decoration: none; transition: .2s; white-space: nowrap; } .modepill a + a { border-left: 1px solid var(--mg-ash14); } .modepill a:hover { color: var(--mg-ash); background: rgba(30,144,255,.14); } .modepill a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; } html[data-sucomode="pvp"] .modepill a[data-mode="pvp"] { color: #04101f; background: var(--mg-sig); font-weight: 700; } html[data-sucomode="pvp"] .modepill a[data-mode="pvp"]::before { opacity: 1; animation: mgRec 1.2s steps(1) infinite; } html[data-sucomode="survival"] .modepill a[data-mode="survival"] { color: #04101f; background: var(--mg-lock); font-weight: 700; } html[data-sucomode="survival"] .modepill a[data-mode="survival"]::before { opacity: 1; animation: mgRec 1.2s steps(1) infinite; } /* phone: the pill spends as little of the header as it can - the dot goes, the tracking tightens - because a legacy studio header was drawn for a desktop */ @media (max-width: 560px) { .modepill { font-size: 9px; } .modepill a { padding: 7px 7px; gap: 0; letter-spacing: .05em; } .modepill a::before { display: none; } } .topbar-wtf .right .modepill { align-self: center; margin-right: 2px; } /* ---- MODE RULES: what each mode hides on this site (owner's own selectors) - */ /* (this owner hides nothing per mode) */