/* ========================================================================== Shift Game Jam - Abu Dhabi Gaming x Unity 17-18 October 2026, with November to follow Layout utilities come from Tailwind (CDN, configured in index.html). This file owns: design tokens, the hero, and every bespoke component. HOUSE STYLE - printed event programme, not a SaaS landing page: · dark ground, white type, one yellow accent, red for detail marks. The client's palette, supplied 2026-09-14; see the token block. No gradients anywhere - the one image-based ground is their own texture, which is not a gradient but a photographed grid. · square corners. No border-radius, no drop shadows, no blur. · structure comes from rules (hairlines and heavy bars), never boxes. · sections are numbered like a programme; type carries the page. IT WAS A CREAM-PAPER SCHEME UNTIL 2026-09-16 and every "paper", "ink" and "veil" in the comments below was literal then. The structure survived the re-skin unchanged, so those words now name roles rather than colours: the ground and the type. Where a measurement was redone for the dark scheme the comment says so and gives the new number. RTL: the Arabic build ships at ar/index.html. Everything here uses CSS logical properties (inline-start/end, padding-inline, text-align: start), so mirrors the layout with no new layout CSS. Type is another matter - see the html[lang="ar"] block at the foot of this file, and add any new tracked or reading-size component to its lists. ========================================================================== */ :root { /* ========================================================================== THE CLIENT'S DARK PALETTE - Website-theme/, supplied 2026-09-14, applied 2026-09-16 on user direction. It replaces the warm-paper-and-ink scheme this site shipped with; that scheme is gone, not toggleable, and there is no light mode. THE TOKEN NAMES DID NOT CHANGE, and that is deliberate rather than lazy. --paper is the ground and --ink is the type in both schemes, whatever colour each happens to be, so the whole stylesheet re-skinned by rewriting this block. Renaming them to --bg/--fg would have touched 200 lines for no behavioural gain and lost the diff. Read --paper as "ground" and --ink as "type" and nothing below surprises you. The client's own names for these, from `SHIFT GAME JAM WEBSITE COLORS`: BACKGROUND 1 #0A0E20 -> --paper the default section ground BACKGROUND 2 #000711 -> --paper-2 banded sections, and the footer TITLE / BODY #FEFEFF -> --ink headings, prose, logos TITLE HIGHLIGHT #E9E701 -> --accent the accent line, buttons, links LITTLE DETAILS #F52823 -> --alarm eyebrows, hairlines, TBA boxes Their sheet also annotates an OLDER build of this page - three jams, "BUILD. COLLABORATE. CREATE.", a "Choose your game jam" screen. It is a COLOUR spec, not a layout spec: the layout is the one the 2026-09-12 review asked for. Do not read the mock as a request to restore any of that. ========================================================================== */ /* --- Ground. Both are the client's, and #0A0E20 is the lighter of the two, which reverses the old scheme: bands used to go darker, they now go deeper-and-flatter. The page texture sits behind both - see .bg-grid. --- */ --paper: #0A0E20; /* BACKGROUND 1 */ --paper-2: #000711; /* BACKGROUND 2 - bands */ --paper-foot: #181B24; /* Dark grey grounding for footer */ /* --- Type. Contrast is measured against --paper, the LIGHTER ground, which is the worst case; everything gains a little over --paper-2 and a lot over the texture. THE MONO LABELS MOVED UP A STEP with the re-skin - spec rows, the tally, the countdown units and the plate captions were all --ink-3 and are now --ink-2. On cream, --ink-3 read as a quiet label; on this ground the same relative step reads as switched off, and the client's sheet draws those labels the same white as their values. --ink-2 keeps a step of hierarchy where they went to flat white, which is the one place this deviates from the mock, deliberately: the label and the value in identical colour lose the label/value relationship that the whole spec-row component is built on. --- */ --ink: #FEFEFF; /* 19.1:1 - the client's TITLE/BODY white */ --ink-2: #B9BDC9; /* 10.1:1 - secondary prose */ --ink-3: #868A96; /* 5.5:1 - mono labels, captions */ /* --- Accent: the client's yellow, used flat, and it is now the only thing links, buttons and the hero's highlight line are set in. 14.2:1 on --paper as text and 15.4:1 on --paper-2, so it is safe at any size, which the old ultramarine was not over the hero footage. THE ULTRAMARINE IS GONE (#1F3AB5). Worth knowing that it was the one sanctioned nod to the sealed theme, so losing it removes an exposure rather than creating one - see THEME-NOTES.private.md. Do not reintroduce a blue to "balance" the yellow; the client's sheet has three hues and this is the only one that carries interaction. --accent-dark is now ONLY a hover/pressed state. It used to also set the hero's highlight line, because the true accent could not reach 3:1 over the footage; yellow reaches 3.33:1 at the veil this band carries, so that line takes the real accent now. --- */ --accent: #E9E701; /* TITLE HIGHLIGHT */ --accent-dark: #C4C200; /* hover / pressed only */ --on-accent: #000711; /* the client's button text colour */ /* --- The client's red. It is NOT an accent and never carries a link or a button. Two jobs only: the "little copy details" their sheet names - the mono eyebrow above a section heading - and the to-be-announced boxes. It was on the hairlines too until the user took it off them; see the note on --rule below for why that was right. 4.6:1 on --paper and 5.0:1 on --paper-2, so it clears 4.5:1 for the small bold mono it is used on - but only just, on the lighter ground. Do not darken it, do not put it at a lighter weight, and do NOT put it over the hero footage: against that band's veil it measures 1.1:1. See the hero veil note. --- */ --alarm: #F52823; /* LITTLE DETAILS / LINE DETAILS */ --on-alarm: #000711; /* --- Hairlines, and they are WHITE. The client's sheet draws them in red and they shipped red for about an hour on 2026-09-16 before the user called it: "change the horizontal red lines, i suggest white". That is the right call and it is worth writing down why, because the spec sheet says otherwise and someone will come back to it. Their mock draws six rules on one screen, in a three-row spec block. This page has spec rows, a fact line, a two-day list, six full-bleed section edges, a tally, and a 41-row FAQ accordion - red at 1px, repeated forty times down a column, stops reading as furniture and starts reading as an error state. So the red is spent where it is loudest and rarest instead: the section eyebrows and the to-be-announced boxes. Both are in the client's sheet, both are type rather than structure, and there are never more than two on a screen. The two weights are the same ones the cream build used, inverted: 0.16 for separators inside a component, 0.34 for the edge of an object (an image, a video, a control). --- */ --rule: rgba(254, 254, 255, 0.16); --rule-strong: rgba(254, 254, 255, 0.34); --bar: var(--ink); --ring: var(--accent); --font-display: Anton, "Arial Narrow", Impact, system-ui, sans-serif; --font-body: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, Consolas, monospace; --shell: 76rem; } /* Own the reset. Tailwind's Preflight normally supplies box-sizing, but this stylesheet has to stand on its own: .shell is width:100% plus padding, so under content-box it overflows the viewport and clips text off the right edge on phones. README plans to drop the CDN before launch. */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; } ol, ul { padding: 0; } img { max-inline-size: 100%; } html { background: var(--paper); color-scheme: light; scroll-behavior: smooth; } /* The nav is fixed, so anchored sections must stop clear of it. */ section[id], footer[id], div[id], span[id] { scroll-margin-block-start: 5.5rem; } /* AND SO MUST THE FIRST SECTION ON THE PAGE, which is a different problem and was missing. The hero sets its own 6.25rem top padding and clears the bar on index.html; faq.html has no hero, so its page head is an ordinary .section--loose - and clamp(4rem, 7vw, 6rem) resolves to 4rem (64px) on a phone, against a bar that is 44px of toggle plus its padding, about 70px. The FAQ's eyebrow printed underneath it at every mobile width. It read fine on a desktop, where 7vw clears the bar on its own, which is why it survived. 6.25rem is the hero's own figure, so both pages now open the same distance below the bar. It is a floor, not a replacement: a section that already asks for more keeps it. Scoped to main's first section rather than put on .section--loose, because the same class is used mid-page in faq.html where there is no bar to clear. */ main > .section:first-of-type { padding-block-start: max(6.25rem, clamp(3rem, 5vw, 4.5rem)); } main > .section--loose:first-of-type { padding-block-start: max(6.25rem, clamp(4rem, 7vw, 6rem)); } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } /* THE PAGE GROUND IS THE CLIENT'S TEXTURE - assets/bg-grid.webp, from Website-theme/, applied 2026-09-16 on user direction ("background"). It replaces the inline-SVG paper tooth that used to sit here: one turbulence at 0.3 with mix-blend-mode: multiply, which existed to stop a flat cream reading as screen-default. Multiplying near-black by noise does nothing you can see, so that layer was pure cost on this scheme. FIXED, NOT SCROLLING, and that is what the element is for. The texture is a single 1920x1080 frame with one soft glow in it - tile it and the glow repeats in a visible band; stretch it down a 6000px page and the grid turns to mush. Pinned to the viewport it is sized once, the grid stays at its native pitch, and the content scrolls over it. A `background-attachment: fixed` on would do the same thing on paper but is the one value iOS Safari has never handled - it silently falls back to scroll and sizes to the document, which is exactly the stretch this avoids. z-index: 0 puts it under the section grounds, which is why the non-banded sections below are TRANSPARENT rather than painted: they are how it shows through. .shell and .foot are z-index 2 and sit above it either way. WEBP, AND THAT IS MEASURED. The source is a 2.0 MB PNG of a 1px dot grid over near-black. JPEG at a comparable size smears the grid - visible at 16x amplification, invisible at 1x, but it is the only detail the file carries. WebP at quality 82 is 95 KB and holds the pitch. Re-encode from the PNG in Website-theme/, never from this file. It is decorative and behind everything, so it gets no alt route and no reduced-motion case - it does not move. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--paper-2) url("../bg-grid.webp") center / cover no-repeat; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 400; line-height: 0.94; letter-spacing: 0.002em; text-transform: uppercase; text-wrap: balance; } /* Sub-headings inside prose stay in the body face - Anton at small sizes is a shout, not a heading. */ h3.sub, .sub { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.005em; line-height: 1.3; font-size: 1.08rem; } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--on-accent); } :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } /* Kills the ~300ms double-tap-to-zoom wait on tappable controls, so a tap on the nav toggle or an FAQ row registers immediately. Scoped to the controls themselves, so pinch-zoom on the page is untouched - which matters here, because the rules and the FAQ are dense reading and the mono labels sit at 0.68rem. */ :where(a, button, summary, [tabindex]) { touch-action: manipulation; } /* --- Shell -------------------------------------------------------------- */ .shell { position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin-inline: auto; /* Published as a variable so a full-bleed child inside the shell - the photo rail in #last - can pull back out to the viewport edge and pad the same amount back in, without the number being written twice. */ --gutter: clamp(1.25rem, 4vw, 2.5rem); padding-inline: var(--gutter); } /* Sections do not share one rhythm. Uniform vertical padding down a whole page is itself a tell. */ .section { padding-block: clamp(3rem, 5vw, 4.5rem); position: relative; z-index: 2; } .section--tight { padding-block: clamp(2.25rem, 3.5vw, 3rem); } .section--loose { padding-block: clamp(4rem, 7vw, 6rem); } /* Section grounds use the client's palette: --paper (#0A0E20, BACKGROUND 1) and --paper-2 (#000711, BACKGROUND 2). The header texture is kept in .hero where the client spec requested "BACKGROUND HEADER TEXTURE ATTACHED", while content sections have solid grounds so text and FAQ answers are clean, high-contrast, and comfortable to read without dot-grid interference. */ .section { background: var(--paper); } .section--band { background: rgba(0, 7, 17, 0.88); } .section--edge { border-block-start: 1px solid var(--rule); } /* ========================================================================== SECTION HEAD - the headline alone, with an optional lede beneath. No label and no bar above it: the full-bleed .section--edge hairline is what separates one section from the next. ========================================================================== */ /* h1 as well as h2: faq.html is a page in its own right, so its title is the document heading rather than a section heading, and it must not come out a different size from the section headings under it. */ .head :is(h1, h2) { font-size: clamp(2rem, 5.2vw, 3.4rem); } .head__lede { margin-block-start: 1.15rem; max-inline-size: 60ch; color: var(--ink-2); font-size: 1.06rem; } /* --- Section eyebrow ---------------------------------------------------- A mono label above a heading, in the same family as .specs dt and .day__head - the page's one label voice. It exists for #last, where client copy v2 replaced a heading that dated the section ("The last one we ran") with one that does not ("See what students created"). The year has to survive that, and the hero has nothing to lend it: its headline is bare type on the veil and its lede's translucent card is sized for three paragraphs. IT IS THE CLIENT'S RED since 2026-09-16. Their sheet marks this exact slot "LITTLE COPY DETAILS #F52823" - the mono label above a section heading is the one piece of type they put in red, and it is the reason the red is in the palette at all. It measures 4.6:1 on --paper and 5.0:1 on --paper-2, so it clears 4.5:1 for small bold mono on both grounds, but only just on the lighter one: do not lower the weight, do not shrink it, and do not put it on any ground lighter than --paper. THE HERO'S KICKER IS THE EXCEPTION and stays white - over the hero footage this red measures 1.1:1 and no amount of veil fixes it, because the red is darker than the veil needs the ground to be. See the hero veil note. It exists for #last, where client copy v2 replaced a heading that dated the section ("The last one we ran") with one that does not ("See what students created"). The year has to survive that. */ .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alarm); margin-block-end: 0.9rem; } /* ========================================================================== HERO - type-led, on paper, with the games reel showing through it. The hairline drafting grid that used to sit here is gone (client direction 2026-09-08): with the footage visible, the grid read as clutter ruled over a picture. What replaces it is nothing - the reel is the ground now. The band stays paper with ink type. That is the constraint the treatment below is built around, and it is a hard one: dark type over a picture means the picture has to stay light everywhere the type runs, so the reel is graded with its blacks lifted rather than washed out with a thick veil. Lifting in the encode buys visibility; veiling would only have bought contrast. See README.md -> The hero loop. ========================================================================== */ .hero { position: relative; isolation: isolate; /* TRANSPARENT, so the page texture behind it is the hero's ground where the footage has been masked out - see body::before. The client's sheet annotates this band "BACKGROUND HEADER TEXTURE ATTACHED", and this is how it gets attached: the video sits on the texture, not on a flat colour. */ background: transparent; /* Sized by its content, not the viewport: on a laptop this lands just under one screen, so nothing is cut and no dead band opens under the CTAs. */ padding-block: 6.25rem 2rem; overflow: hidden; } .hero > .shell { position: relative; z-index: 2; } /* --- The reel layer ------------------------------------------------------ Deliberate exceptions to the house style, both contained here and both recorded in DESIGN.md: the only blur on the page, and the only gradient. The blur is soft focus, not obliteration - client direction is that the footage should read as gameplay. It has to stop short of legible, though: this is the January 2026 jam's games playing uncaptioned behind copy about 2026, and nothing in frame may be identifiable as a particular game or carry readable on-screen text. 768px wide, baked sigma 2, plus the 5px pass below is where that line sits. See CONTENT.md -> The games reel. The picture is at full strength behind the headline, which is 48px+ Anton and needs only 3:1, and is masked away before the fact strip so the small label type at the foot of the band sits on clean paper. */ .hero__reel { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 84%); } .hero__reel video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Only the upscale is hidden here. The grade is baked into the encode: the footage's blacks are lifted to 46% and it is desaturated and warmed to the paper, which is what lets it sit under ink type at all - untouched, a night frame would leave the lede at 2:1, and a cold grey frame would turn the paper ground grey for a second or two. */ filter: blur(2.5px); transform: scale(1.06); } /* THE VEIL, AND IT IS INVERTED. This band carries text over moving footage, so something has to sit between them. On the cream scheme that was a PAPER veil lifting dark frames so BLACK type could read over them, tuned against the darkest pixel in the clip. The dark scheme reverses every term: the type is white and yellow, so the veil is the client's #000711 and the binding constraint is the BRIGHTEST pixel, not the darkest. RE-MEASURED 2026-09-16, and this is the measurement. Across all 383 frames of hero-loop.mp4 the brightest luma is Y=227 of 255 (ffmpeg signalstats, YMAX), and one frame averages Y=190 - it is a bright clip, which is why the old scheme got away with a thin veil and this one cannot. Against sRGB 0.890 the requirements are: white --ink, prose, 4.5:1 -> needs 0.478 white --ink, display, 3:1 -> needs 0.344 yellow --accent, display, 3:1 -> needs 0.442 red --alarm, anything -> UNREACHABLE SO IT IS FLAT 0.52, with a little headroom over the 0.478 the strictest line needs. What that buys, measured at the flat value: .hero__kicker small, white 4.9:1 .hero__title display, white 4.9:1 .hero__slogan 24px bold, white 4.9:1 .hero__slogan span 24px bold, yellow 3.6:1 .hero__lede small, white 4.9:1 .hero__meta small, white 4.9:1 NO RED MAY GO IN THIS BAND. --alarm measures 1.1:1 against this veil and cannot be fixed by thickening it: the red is darker than the veil needs the ground to be, so more veil moves them closer together, not further apart. That is why .hero__kicker is white here while every other eyebrow on the site is red. It is the one place the client's palette cannot be applied as drawn, and it is a measurement, not a preference. FLAT, NOT RAMPED, for the same reason it was flat before: prose sits beside the headline above 62rem rather than below it, so display type and reading type share the same horizontal strip and the stricter of the two wins everywhere. Flat also means no breakpoint - the ramp needed one, because the accent line rode up the band as the viewport narrowed. The bottom stops still ramp toward opaque, and they are unchanged in shape from the cream build: that half of the band carries the CTA and the countdown as the mask fades the footage out. Re-measure after any re-encode of the loop; the sweep is in README.md -> The hero loop. If the clip is ever regraded darker, this veil can come down and the footage comes back for free. */ .hero__reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 7, 17, 0.52) 0%, rgba(0, 7, 17, 0.52) 55%, rgba(0, 7, 17, 0.70) 74%, rgba(0, 7, 17, 0.94) 100%); } /* Reduced motion: site.js removes the