/* ==========================================================================
Game Domain
Path: MITD/v5/sites/gd-home/assets/gd/css/gd.css
One sheet while there is one page. Page families get their own through
'extra_css' when they need components nothing else uses, rather than growing
this file until a change for one page can break the front door.
GD is the loudest palette in MITD and it is the only one that gets away with
it: a games portal is allowed to be neon in a way a museum and a storefront
are not. Magenta owns actions, cyan owns structure and secondary actions, and
the near-black underneath keeps both readable.
========================================================================== */
:root {
--void: #06030F;
--panel: #0D0820;
--panel-2: #150C2E;
--ice: #F0EAFF;
--ash: #9A8FC0;
--ash-dim: #6A5F92;
--magenta: #FF2BD1;
--magenta-2:#FF7AE3;
--cyan: #22D3FF;
--cyan-2: #8BEBFF;
--violet: #8B3BFF;
--ember: #FF3B5C;
--hairline: rgba(180, 140, 255, .24);
--hairline-lo: rgba(180, 140, 255, .12);
--gut: clamp(16px, 3.2vw, 52px);
--gap: clamp(12px, 1.4vw, 20px);
/* The accessibility button is position:fixed bottom-left, so it sits ON the
last line rather than after it. Every page ends with this much extra room,
which also gives a little scroll past the footer. env() adds the iOS home
indicator strip and resolves to 0 everywhere else. */
--a11y-clear: calc(clamp(58px, 7vh, 88px) + env(safe-area-inset-bottom, 0px));
--ease: cubic-bezier(.22, .61, .36, 1);
/* Text on artwork: a stack of wide, low-opacity shadows rather than one hard
drop. Darkens what is immediately behind each letter without reading as an
outline. */
--lift:
0 0 6px rgba(0, 0, 0, .68),
0 0 16px rgba(0, 0, 0, .58),
0 0 34px rgba(0, 0, 0, .50),
0 0 62px rgba(0, 0, 0, .40),
0 0 100px rgba(0, 0, 0, .30);
}
/* --------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.gd {
margin: 0;
background: var(--void);
color: var(--ice);
font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
font-optical-sizing: auto;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
iframe { border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
[aria-disabled="true"] { pointer-events: none; }
.sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 99;
padding: 12px 18px; background: var(--magenta); color: #190021; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The social marks are filled shapes: a one-pixel outline of a logo at 16px
reads as mush, so these invert the rule rather than each getting a rule. */
.i--solid { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important; transition-duration: .001ms !important;
}
}
/* ==========================================================================
Masthead
========================================================================== */
.head {
position: sticky; top: 0; z-index: 40;
/* flex-wrap here rather than only inside the narrow media query. At normal
text size nothing wraps, because everything fits -- but the accessibility
panel's larger-text settings make the nav and the tools wider without
making the window wider, and without this they simply run off the side.
A wrapped masthead is taller; an overflowing one is unusable. */
display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 34px);
padding: 10px var(--gut);
background: rgba(6, 3, 15, .84);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--hairline-lo);
}
.brand { flex: 0 0 auto; display: block; }
.brand__mark { width: clamp(104px, 10vw, 142px); height: auto; }
/* Only seen when gd-logo.png is not on the server: wrong typeface, right words,
still a link home, which beats a masthead with a hole in it. */
.brand__fallback {
display: block; font-size: clamp(16px, 1.8vw, 21px);
font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; line-height: 1;
text-transform: uppercase;
}
.brand__fallback .is-accent { color: var(--cyan); }
.brand__fallback span + span { margin-left: .28em; }
.nav { margin-inline: auto; }
.nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.4vw, 24px); }
.nav__link {
position: relative; display: block; padding: 10px 0;
font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
color: rgba(240, 234, 255, .76); transition: color .25s var(--ease);
white-space: nowrap;
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 4px;
height: 2px; background: var(--cyan); transition: right .3s var(--ease);
}
.nav__link:hover { color: var(--ice); }
.nav__link:hover::after { right: 0; }
.nav__link.is-current { color: var(--ice); }
.nav__link.is-current::after { right: 0; }
.head__tools { display: flex; align-items: center; gap: clamp(6px, .8vw, 12px); }
.tool { display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 50%; transition: background-color .25s var(--ease); }
.tool:hover { background: rgba(34, 211, 255, .14); }
/* Nothing emits this today -- site-chrome's 'cta' is empty, so the masthead
button is not rendered at all. Kept because restoring it is then one array
entry rather than an array entry plus remembering this line. */
.head__cta { padding: 10px 18px; }
.burger { display: none; place-items: center; width: 34px; height: 34px; }
.burger__bar { position: relative; width: 20px; height: 1.5px; background: currentColor; }
.burger__bar::before, .burger__bar::after {
content: ""; position: absolute; left: 0; width: 20px; height: 1.5px;
background: currentColor; transition: transform .3s var(--ease);
}
.burger__bar::before { top: -6px; }
.burger__bar::after { top: 6px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after { transform: translateY(-6px) rotate(-45deg); }
/* ==========================================================================
Buttons
Two, and the split is by JOB rather than by prominence: magenta is "go into
the thing", cyan outline is everything else. A page with two filled buttons
side by side has asked the visitor to choose between two equally loud things,
which is the same as not having asked.
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 11px;
padding: 13px 24px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; letter-spacing: .17em;
text-transform: uppercase;
/* NOT white-space: nowrap, which is what this was. A pill button whose label
cannot wrap is a pill button wider than the screen the moment the label is
long or the text is scaled up -- and it was the last thing still running
off the side at twice the normal text size. Wrapping only ever happens when
the alternative is overflowing, because a label shorter than its container
has nothing to wrap onto. */
white-space: normal; max-width: 100%; text-align: center;
border: 1px solid transparent;
transition: border-color .3s var(--ease), background-color .3s var(--ease),
box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn .i { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn:hover .i { transform: translateX(4px); }
.btn--primary {
background-image: linear-gradient(100deg, var(--violet), var(--magenta));
color: #190021; font-weight: 800;
box-shadow: 0 0 0 rgba(255, 43, 209, 0);
}
.btn--primary:hover { box-shadow: 0 0 28px rgba(255, 43, 209, .5); }
.btn--ghost {
border-color: var(--cyan); color: var(--ice);
background: rgba(6, 10, 26, .5); backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(34, 211, 255, .15); box-shadow: 0 0 24px rgba(34, 211, 255, .3); }
.btn--ghost .i { color: var(--cyan); }
/* The play glyph is a circle, not an arrow, so it should not slide. */
.btn--ghost:hover .i { transform: none; }
/* Inert should read as not-yet, not as broken. */
.btn[aria-disabled="true"] {
background-image: none; background: rgba(21, 12, 46, .6);
border-color: var(--hairline); color: rgba(240, 234, 255, .55); box-shadow: none;
}
.btn[aria-disabled="true"] .i { color: var(--ash-dim); }
.chip {
display: grid; place-items: center; flex: 0 0 auto;
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--cyan);
transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip .i { width: 15px; height: 15px; color: var(--cyan); }
.chip:hover { background: rgba(34, 211, 255, .16); box-shadow: 0 0 20px rgba(34, 211, 255, .32); }
.chip[aria-disabled="true"] { border-color: var(--hairline); }
.chip[aria-disabled="true"] .i { color: var(--ash-dim); }
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative; isolation: isolate;
display: flex; align-items: center;
min-height: min(78svh, 720px);
padding: clamp(32px, 5.5vw, 78px) var(--gut);
overflow: hidden;
}
.hero__art {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%;
}
.hero.is-empty {
background:
radial-gradient(56% 62% at 66% 40%, rgba(139, 59, 255, .38), transparent 70%),
radial-gradient(62% 68% at 22% 74%, rgba(255, 43, 209, .24), transparent 72%),
linear-gradient(162deg, #120634, var(--void));
}
/* Copy sits left, so the veil is directional: heavy at the left edge, gone by
mid-frame, with a floor so the CTAs stay legible over bright ground. */
.hero__veil {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to right, rgba(6, 3, 15, .94) 0%, rgba(6, 3, 15, .72) 26%,
rgba(6, 3, 15, .2) 52%, rgba(6, 3, 15, 0) 70%),
linear-gradient(to top, rgba(6, 3, 15, .8) 0%, rgba(6, 3, 15, 0) 34%);
}
.hero__copy { position: relative; z-index: 2; max-width: 560px; }
/* ==========================================================================
The hero shell
One box, and it owns the alignment of everything inside it. align-items on a
flex column is the single property that centres ALL of them -- a block ![]()
that text-align cannot move, two nested flex rows that ignore text-align, and
the paragraphs that do not. The previous version needed four rules for that,
and four rules is four things to forget.
justify-content on the two rows is not duplication: a flex item under
align-items:center is shrink-to-fit, so it is already centred as a box --
until its contents WRAP, at which point the box becomes full width and packs
its children left again. These two lines are for the wrapped case only.
========================================================================== */
.hero__shell {
display: flex; flex-direction: column;
align-items: center;
text-align: center;
}
.hero__shell .verbs,
.hero__shell .hero__ctas { justify-content: center; }
.hero__shell .hero__lede { max-width: 100%; }
.hero__logo {
width: clamp(230px, 30vw, 420px); height: auto;
filter: drop-shadow(0 0 12px rgba(0, 0, 0, .6))
drop-shadow(0 0 40px rgba(0, 0, 0, .45))
drop-shadow(0 0 90px rgba(139, 59, 255, .3));
}
/* Only used when the mark is missing -- otherwise the