/* Stakes marketing site: the shared foundation (the concept D look, October 2026). Every page built in the new look links this file first: the type, the tokens, the chamfer, the buttons and the frame, the fixed nav, the footer, the reveals and the card face. A page's own sections go in its own sheet (index.html: landing.css). Every page links this sheet first; there is no other global stylesheet. The look law: docs/website/site-look.md. No rounded or oval shape anywhere except a card's small corner; panels and buttons are square or chamfered with clip-path. THE BRAND MARK is drawn from ONE place: `--brand-mark` below, painted by `.brand-mark`. Every slot that shows the mark (the nav, the footer, the pack, a card back) is an empty `.brand-mark` element, so swapping the logo is an edit to this one token (and its ratio). */ /* Type: the game's own family. Fira Sans Extra Condensed (heavy, tall, tight) is the display face for the wordmark, headings and lead-ins; Fira Sans is the body and the UI labels, as in the game's client. Marcellus is kept only for the numerals on a card face, where the game uses it. */ @font-face { font-family:'Marcellus'; src:url(assets/fonts/marcellus-regular.woff2) format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Fira Sans'; src:url(assets/fonts/fira-sans-400.woff2) format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Fira Sans'; src:url(assets/fonts/fira-sans-500.woff2) format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Fira Sans'; src:url(assets/fonts/fira-sans-600.woff2) format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Fira Sans'; src:url(assets/fonts/fira-sans-extra-bold.woff2) format('woff2'); font-weight:800; font-display:swap; } @font-face { font-family:'Fira Sans Extra Condensed'; src:url(assets/fonts/fira-sans-extra-condensed-800.woff2) format('woff2'); font-weight:800; font-display:swap; } @font-face { font-family:'Fira Sans Extra Condensed'; src:url(assets/fonts/fira-sans-extra-condensed-900.woff2) format('woff2'); font-weight:900; font-display:swap; } :root { --ink:#06070a; --ink-2:#0b0d12; --ink-3:#11141b; --ink-4:#191d26; --plate:rgba(8,9,13,.9); --parchment:#f1e8d2; --text:#e6dcc4; --faded:#b9aa8e; --dim:#968774; --gold-hi:#ffe7a6; --gold:#d8ab55; --gold-mid:#b4853b; --gold-dim:#7a5a2a; --line:rgba(216,171,85,.5); --line-soft:rgba(216,171,85,.24); --metal:linear-gradient(180deg,#fff3cf 0%,#f1cd78 34%,#c8963f 50%,#8a5f24 56%,#d7a84f 82%,#f6dc9a 100%); --metal-edge:linear-gradient(135deg,#ffe8a8 0%,#9a6d2c 28%,#f0cd7c 52%,#6e4c1c 76%,#d9b062 100%); --ember:#ff7a2e; --blood:#8e1b22; --blood-hi:#c3343c; --b1:#dbb866; --b2:#8570cc; --b3:#61adbd; --bu:#a6a194; --stk-stat-power:#F04D85; --stk-stat-health:#6BD17A; --stk-tab-top:#FFE38A; --stk-tab-mid:#F2C43C; --stk-tab-bot:#C08E18; --stk-tab-ink:#2B1C02; --display:'Fira Sans Extra Condensed','Arial Narrow',system-ui,sans-serif; --ui:'Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --num:'Marcellus','Trajan Pro',Georgia,serif; --gutter:clamp(16px,4vw,64px); --ring:3px; /* the focus ring's width on a chamfered control (see THE FOCUS RIM) */ --wrap:1320px; --nav-h:68px; --ease-out:cubic-bezier(.16,.84,.3,1); /* the logo: the Versus mark, two stakes, cropped to its own ink (ratio = crop width / height) */ --brand-mark:url(assets/brand/stakes-mark-bare.svg); --brand-mark-ratio:120 / 116.6; /* the full logo: the mark and the outlined STAKES wordmark (ratio = the lockup's viewBox width / height) */ --brand-lockup:url(assets/brand/stakes-lockup.svg); --brand-lockup-ratio:448.77 / 128; } .brand-mark { display:inline-block; flex:none; aspect-ratio:var(--brand-mark-ratio); background:var(--brand-mark) center/contain no-repeat; } .brand-lockup { display:block; flex:none; aspect-ratio:var(--brand-lockup-ratio); background:var(--brand-lockup) center/contain no-repeat; } /* The chamfer every panel and button is cut with. Declared on every element (and pseudo) so `var(--cut)` resolves against THAT element's own cut size, not the root's. */ *, ::before, ::after { --oct: polygon(var(--cut,0px) 0, calc(100% - var(--cut,0px)) 0, 100% var(--cut,0px), 100% calc(100% - var(--cut,0px)), calc(100% - var(--cut,0px)) 100%, var(--cut,0px) 100%, 0 calc(100% - var(--cut,0px)), 0 var(--cut,0px)); --hex: polygon(var(--cut,0px) 0, calc(100% - var(--cut,0px)) 0, 100% 50%, calc(100% - var(--cut,0px)) 100%, var(--cut,0px) 100%, 0 50%); /* The same shapes for a FILL layer laid inside a rim `--rim` wide (inset:var(--rim)): the cut is pulled in so the rim keeps one width along the slants as well as the straight edges. A 45 degree chamfer needs `cut - rim * .59`; the hexagon's slanted ends (about 25px tall at the ghost button) `cut - rim * .4`. */ --oct-in: polygon(calc(var(--cut,0px) - var(--rim,1px) * .59) 0, calc(100% - var(--cut,0px) + var(--rim,1px) * .59) 0, 100% calc(var(--cut,0px) - var(--rim,1px) * .59), 100% calc(100% - var(--cut,0px) + var(--rim,1px) * .59), calc(100% - var(--cut,0px) + var(--rim,1px) * .59) 100%, calc(var(--cut,0px) - var(--rim,1px) * .59) 100%, 0 calc(100% - var(--cut,0px) + var(--rim,1px) * .59), 0 calc(var(--cut,0px) - var(--rim,1px) * .59)); --hex-in: polygon(calc(var(--cut,0px) - var(--rim,1px) * .4) 0, calc(100% - var(--cut,0px) + var(--rim,1px) * .4) 0, 100% 50%, calc(100% - var(--cut,0px) + var(--rim,1px) * .4) 100%, calc(var(--cut,0px) - var(--rim,1px) * .4) 100%, 0 50%); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:106.25%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* Every in-page anchor lands below the fixed nav. A section opens on its own top padding, so clearing the bar is enough; a bare block (#join) gets a breath of air on top of that. */ main [id] { scroll-margin-top:var(--nav-h); } #join { scroll-margin-top:calc(var(--nav-h) + 28px); } body { font-family:var(--body); font-weight:400; color:var(--text); line-height:1.6; background:var(--ink); overflow-x:hidden; } img { display:block; max-width:100%; } a { color:inherit; } button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ol, ul { list-style:none; } .vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip { position:absolute; left:16px; top:-80px; z-index:200; background:var(--parchment); color:var(--ink); padding:12px 18px; min-height:44px; font:800 .8rem/1.2 var(--ui); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .skip:focus { top:12px; } /* One focus ring for everything a visitor can reach: a 2px outline, offset so a card's corner never clips it. */ a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--gold-hi); outline-offset:4px; } /* THE FOCUS RIM. A chamfered control is cut by a clip-path, and a clip-path takes the control's own outline with it (or leaves a square-cornered rectangle outside a bevelled corner), so its ring is not an outline. Every chamfered control is built the same way: a RIM layer in the control's own shape (its background, or a pseudo-element) with a FILL layer laid inside it (`inset:var(--rim)`, clipped with --oct-in / --hex-in). Focus makes the rim `--ring` wide and --gold-hi, so the ring is the control's own outline thickened inward, on every edge including the slants, over the control's own dark ground. A new chamfered control joins this list and sets `--rim` on its fill layer's inset. `:root` in front lifts these above a control's own :hover colour. docs/website/site-accessibility.md, Focus. */ :root :is(.btn-ghost, .nav-menu, .cv-close, .mode, .provider-btn):focus-visible, :root .cta:focus-visible .cta-face { --rim:var(--ring); outline:none; } :root :is(.btn-ghost, .nav-menu, .cv-close, .mode):focus-visible, :root .cta:focus-visible .cta-face, :root .provider-btn:focus-visible::before { background:var(--gold-hi); } @media (forced-colors:active) { /* forced colours repaint backgrounds, so the thickened rim would vanish: fall back to the system outline inside the cut */ :root :is(.btn-ghost, .nav-menu, .cv-close, .mode, .provider-btn, .cta):focus-visible { outline:2px solid Highlight; outline-offset:-5px; } } /* Film grain from the game's own UI kit, laid over every panel ground. */ .grain-layer { position:absolute; inset:0; pointer-events:none; background:url(assets/textures/ui-grain.png); opacity:.07; mix-blend-mode:overlay; } /* ========== PLACEHOLDER TAG ========== */ .ph-tag { display:inline-flex; align-items:center; gap:8px; font:800 .66rem/1.2 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:#ffd9a0; background:rgba(10,8,6,.86); padding:7px 11px; border:1px dashed rgba(255,190,110,.7); } .ph-tag::before { content:''; width:8px; height:8px; background:#ff9d3d; flex:none; } /* ========== ORNAMENT ========== */ .orn { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); } .orn::before, .orn::after { content:''; height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--gold)); } .orn::after { transform:scaleX(-1); } .orn i { width:9px; height:9px; transform:rotate(45deg); border:1px solid var(--gold); position:relative; } .orn i::after { content:''; position:absolute; inset:2px; background:var(--gold); } .sec-head { text-align:center; padding:0 var(--gutter); margin:0 auto clamp(22px,3vw,40px); max-width:900px; } .sec-head h2 { font:800 clamp(2.5rem,6.4vw,4.9rem)/.98 var(--display); letter-spacing:.04em; text-transform:uppercase; margin-top:14px; text-wrap:balance; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 12px 30px rgba(0,0,0,.7)); } .sec-head p { color:var(--faded); font-size:clamp(1rem,1.2vw,1.12rem); margin-top:10px; } /* ========== BUTTONS (chamfered, metal-trimmed) ========== The is the unclipped outer box: it carries the glow (a drop-shadow filter survives the child's clip-path, a box-shadow would not) and the focus ring. The face inside is cut. */ .cta { display:inline-block; text-decoration:none; position:relative; filter:drop-shadow(0 0 14px rgba(255,120,50,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.6)); } .cta-face { --cut:18px; --rim:2px; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; min-height:64px; padding:0 58px; clip-path:var(--hex); background:var(--metal-edge); font:800 1.06rem/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:#fff4dc; text-shadow:0 1px 0 rgba(60,0,0,.8), 0 0 14px rgba(255,160,90,.5); transition:transform .2s var(--ease-out); } .cta-face::before { content:''; position:absolute; inset:var(--rim); z-index:-1; clip-path:var(--hex-in); background:linear-gradient(180deg,#d8443c 0%,#a2222a 42%,#6d1218 58%,#8f1c23 100%); } .cta-face::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,240,210,.55) 46%,rgba(255,255,255,.0) 60%); background-size:260% 100%; background-position:120% 0; animation:shine 4.2s 2.4s ease-in-out 1; } /* ONE sweep, a moment after arrival. A shine that loops forever is moving content no quiet page can pause (WCAG 2.2.2); the landing's own loops answer to its Pause motion control. */ .cta-face > span { position:relative; z-index:2; } .cta-face .pips { position:absolute; inset:7px 14px; z-index:1; pointer-events:none; border-top:1px solid rgba(255,220,170,.35); border-bottom:1px solid rgba(0,0,0,.35); clip-path:inherit; } .cta:hover .cta-face { transform:translateY(-2px) scale(1.02); } .cta:active .cta-face { transform:translateY(1px) scale(.99); } .cta-pulse { animation:ctaPulse 2.6s ease-in-out infinite; } @keyframes ctaPulse { 0%,100% { filter:drop-shadow(0 0 10px rgba(255,110,40,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.6)); } 50% { filter:drop-shadow(0 0 26px rgba(255,130,50,.75)) drop-shadow(0 0 4px rgba(255,210,140,.6)) drop-shadow(0 6px 16px rgba(0,0,0,.6)); } } @keyframes shine { 0% { background-position:120% 0; } 35%,100% { background-position:-60% 0; } } .cta-sm .cta-face { --cut:12px; min-height:44px; padding:0 26px; font-size:.78rem; letter-spacing:.16em; } .cta-lg .cta-face { min-height:72px; padding:0 70px; font-size:1.2rem; } .btn-ghost { --cut:12px; --rim:1px; position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 30px; clip-path:var(--hex); background:var(--line); font:800 .8rem/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); text-decoration:none; transition:background .2s, color .2s; } .btn-ghost::before { content:''; position:absolute; inset:var(--rim); z-index:-1; clip-path:var(--hex-in); background:rgba(8,9,13,.92); transition:background .2s; } .btn-ghost:hover { background:var(--gold); } .btn-ghost:hover::before { background:rgba(40,28,10,.95); } .btn-ghost .arr { width:18px; height:10px; position:relative; } .btn-ghost .arr::before { content:''; position:absolute; left:0; right:3px; top:4px; height:2px; background:currentColor; } .btn-ghost .arr::after { content:''; position:absolute; right:0; top:0; border:5px solid transparent; border-left:6px solid currentColor; border-right:0; } /* ========== FRAME (dark plate, metal outer line, broken inner line) ========== */ .frame { --cut:16px; position:relative; isolation:isolate; clip-path:var(--oct); background:var(--metal-edge); } .frame::before { content:''; position:absolute; inset:1px; z-index:-1; clip-path:var(--oct); background:var(--fill, var(--plate)); } .frame::after { content:''; position:absolute; inset:6px; z-index:0; pointer-events:none; border:1px solid var(--line-soft); clip-path:var(--oct); } .frame > .grain-layer { inset:1px; z-index:-1; clip-path:var(--oct); } /* ========== NAV ========== */ .nav { position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h); --nav-gap:clamp(12px,2vw,28px); display:flex; align-items:center; gap:var(--nav-gap); padding:0 var(--gutter); transition:background .35s, box-shadow .35s; background:linear-gradient(180deg,rgba(4,5,8,.82),rgba(4,5,8,0)); } /* fully opaque once scrolled: no page text ghosts through the bar */ .nav.scrolled { background:rgb(6,7,10); box-shadow:0 1px 0 var(--line-soft), 0 12px 30px rgba(0,0,0,.5); } .nav.scrolled::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent); opacity:.6; } /* THE BRAND takes the room the bar leaves it. Its link starts at the full logo's width at --brand-h tall and is the one item in the bar that shrinks (Join early, the menu and the picker never do), so a long translation or a narrow phone shrinks the logo instead of covering it. The logo fills the link's width; once that is too narrow for the wordmark to read, the link draws the bare mark instead. It keeps 12px clear of the next item whatever the gap is. Checked by `nav-room` in tools/check_website_look.js, at every phone width and in every locale. */ .nav-brand { --brand-h:40px; container:brand / inline-size; display:flex; align-items:center; flex:0 1 calc(var(--brand-h) * var(--brand-lockup-ratio)); min-height:44px; min-width:44px; margin-right:max(0px, 12px - var(--nav-gap)); text-decoration:none; } .nav-brand .brand-lockup { width:100%; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); } /* 85px wide is the logo at 24px tall, its wordmark's capitals about 15px: the smallest it reads at */ @container brand (width < 85px) { .nav-brand .brand-lockup { width:auto; height:32px; aspect-ratio:var(--brand-mark-ratio); background-image:var(--brand-mark); } } /* the primary links and the CTA sit together at the right of the bar */ .nav > nav { margin-left:auto; } .nav-links { display:flex; gap:clamp(4px,1.4vw,22px); } .nav-links a { display:flex; align-items:center; min-height:44px; padding:0 8px; position:relative; font:800 .74rem/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--text); text-decoration:none; } .nav-links a::after { content:''; position:absolute; left:8px; right:8px; bottom:8px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .25s var(--ease-out); } .nav-links a:hover { color:var(--gold-hi); } .nav-links a:hover::after { transform:scaleX(1); } .nav-menu { display:none; flex:none; --cut:8px; --rim:1px; width:44px; height:44px; clip-path:var(--oct); background:var(--line); position:relative; isolation:isolate; } .nav-menu::before { content:''; position:absolute; inset:var(--rim); z-index:-1; clip-path:var(--oct-in); background:#0b0d12; } .nav-menu i, .nav-menu i::before, .nav-menu i::after { position:absolute; left:12px; right:12px; height:2px; background:var(--gold-hi); content:''; } .nav-menu i { top:21px; } .nav-menu i::before { left:0; right:0; top:-7px; } .nav-menu i::after { left:0; right:0; top:7px; } .nav-cta { flex:none; margin-left:6px; } .nav-cta .cta-face { white-space:nowrap; } /* ========== CARD FACE ========== The DOM is site.js's cardEl(): art, scrim, Gold tab, then the foot (keyword strip over the Power / name / Health row), then the glint. No deck roles on the face. The glint lights the art only: it stacks above the art and scrim but under the foot (z 2) and the Gold tab (z 3), so a screen-blended streak never washes out a keyword icon or a printed number. The face is ISOLATED: those z-indexes rank only inside the card. Without it a tile is no stacking context, so its Gold tab (z 3) and foot (z 2) rank in the page's context against everything else there, and they painted over the card table's open filter menus. */ .card { position:relative; isolation:isolate; aspect-ratio:2/3; border-radius:var(--card-r,9px); overflow:hidden; background:#0b0d11; user-select:none; container-type:inline-size; box-shadow:0 0 0 1px rgba(255,232,180,.16), 0 18px 40px rgba(0,0,0,.6); --u:clamp(.95px,.676cqw,2.3px); --sr-pad:calc(9 * var(--u)); --sr-power:calc(37 * var(--u)); --sr-health:calc(24 * var(--u)); } .card-art { position:absolute; inset:0; } .card-art img { width:100%; height:100%; object-fit:cover; } .card-shade { position:absolute; inset:auto 0 0; height:calc(112 * var(--u)); background:linear-gradient(180deg, color-mix(in srgb, var(--scrim-top) 0%, transparent) 0%, color-mix(in srgb, var(--scrim-top) 3%, transparent) 10%, color-mix(in srgb, var(--scrim-top) 12%, transparent) 20%, color-mix(in srgb, var(--scrim-top) 30%, transparent) 30%, color-mix(in srgb, var(--scrim-top) 54%, transparent) 40%, color-mix(in srgb, var(--scrim-top) 76%, transparent) 50%, color-mix(in srgb, var(--scrim-top) 92%, transparent) 60%, color-mix(in srgb, var(--scrim-top) 98%, transparent) 70%, color-mix(in srgb, var(--scrim-foot) 99%, transparent) 85%, var(--scrim-foot) 100%); } .card-foot { position:absolute; inset:auto 0 0; z-index:2; } .gold-tab { position:absolute; z-index:3; top:0; left:calc(10 * var(--u)); width:calc(22 * var(--u)); height:calc(30 * var(--u)); display:grid; place-items:center; padding-bottom:calc(3 * var(--u)); background:linear-gradient(180deg,var(--stk-tab-top),var(--stk-tab-mid) 40%,var(--stk-tab-bot)); box-shadow:0 2px 7px rgba(0,0,0,.55); } .gold-tab-wide { width:calc(30 * var(--u)); } .gold-tab b { font:400 max(16px, calc(18 * var(--u)))/1 var(--num); color:var(--stk-tab-ink); } /* A glyph on a card, in a filter menu or in the opened card's role list: an of an SVG data URI with its colour baked in (site.js iconImg; a keyword's ink is its hue 38% into white, a role's is its hue). It is an image, like the card art, and never an inline or a CSS mask, which Firefox dropped from a hovered, tilted card (docs/website/site-rendering.md). It takes no pointer, so a press lands on the chip and a long press offers no image menu. */ .ico { display:inline-block; flex:none; pointer-events:none; -webkit-touch-callout:none; } .ico-kw { width:1.35em; height:1.35em; } .ico-role { width:1.4em; height:1.4em; } .stat-row { display:flex; align-items:baseline; gap:calc(6 * var(--u)); height:calc(42 * var(--u)); padding:0 var(--sr-pad); } .sr-power, .sr-health { flex:none; font-family:var(--num); font-weight:400; line-height:1.15; } .sr-power { font-size:var(--sr-power); color:var(--stk-stat-power); } .sr-health { font-size:var(--sr-health); color:var(--stk-stat-health); } .sr-wide { font-size:calc(var(--sr-health) * .85); } .sr-power.sr-wide { font-size:calc(var(--sr-power) * .85); } .card-name { flex:1; min-width:0; align-self:center; height:calc(30 * var(--u)); margin-bottom:calc(4 * var(--u)); display:flex; align-items:center; justify-content:center; font:800 max(11px, calc(14 * var(--u)))/1.04 var(--ui); text-transform:uppercase; text-align:center; text-wrap:balance; overflow:hidden; color:#f7f2e7; } .card-name > span { max-width:100%; } .kw-strip { position:absolute; bottom:calc(42 * var(--u)); left:var(--sr-pad); right:var(--sr-pad); display:flex; flex-wrap:wrap; gap:3px; } .kw { display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; font:800 max(11px, 4.6cqw)/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; padding:.28em .5em; color:rgba(232,223,200,.78); background:#10141d; } .kw-lit { color:color-mix(in srgb, var(--kw) 55%, #fff); background:linear-gradient(180deg, color-mix(in srgb, var(--kw) 23%, transparent), color-mix(in srgb, var(--kw) 13%, transparent)), linear-gradient(rgba(6,8,12,.88), rgba(6,8,12,.88)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kw) 52%, transparent); } /* the glint a card catches under the pointer (the card's own overflow clips it to the card's corner; only the card itself carries a radius, so the gold tab is square-cut). It lights the ART only: it sits under the foot (keyword chips, name, stats) and the gold tab, so a screen-blended streak never washes out a keyword icon or a printed number. */ .glint { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s; background:linear-gradient(115deg, transparent 30%, rgba(255,246,220,.0) 38%, rgba(255,246,220,.5) 47%, rgba(255,255,255,.08) 54%, transparent 62%); background-size:300% 300%; background-position:var(--gx,50%) var(--gy,50%); mix-blend-mode:screen; } /* The tilt is a perspective rotation of ONE flat card, so it is flat (no preserve-3d): a 3D rendering context adds nothing to a single plane, and in Firefox it is what dropped every vector glyph painted inside the card while the pointer moved (docs/website/site-rendering.md). */ .tilt { transition:transform .5s var(--ease-out); will-change:transform; } .tilt.live { transition:transform .08s linear; } .tilt:hover .glint, .tilt.live .glint { opacity:1; } .idle-glint .glint { animation:idleGlint 8s ease-in-out infinite; } .slot-l .idle-glint .glint { animation-delay:2.6s; } .slot-r .idle-glint .glint { animation-delay:5.2s; } @keyframes idleGlint { 0%,70% { opacity:0; background-position:100% 100%; } 78% { opacity:1; } 92% { opacity:0; background-position:0% 0%; } 100% { opacity:0; } } /* ========== REVEALS ========== Hidden states exist only once script has confirmed motion is welcome, so a visitor with no script or with reduced motion gets every section at rest. */ .js-motion [data-reveal] { opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d,0s); } .js-motion [data-reveal="left"] { transform:translateX(-60px); } .js-motion [data-reveal="right"] { transform:translateX(60px); } .js-motion [data-reveal="zoom"] { transform:scale(.92); } .js-motion [data-reveal].in { opacity:1; transform:none; } /* ========== FOOTER ========== */ .footer { border-top:1px solid var(--line-soft); background:#040507; padding:34px var(--gutter) 40px; } .footer-in { max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; font:800 .66rem/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); } .footer-in .brand-mark { height:28px; } .footer-in a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--faded); text-decoration:none; } .footer-in a:hover { color:var(--gold-hi); } .footer-links { margin-left:auto; display:flex; flex-wrap:wrap; gap:0 26px; } .nojs { max-width:var(--wrap); margin:20px auto; padding:16px var(--gutter); color:var(--parchment); } /* ========== RESPONSIVE ========== */ @media (max-width:1100px) { .nav-links { display:none; } /* the links are in the menu panel now, so the empty