/* ============================================================ EVENT SKIN — scoped to [data-variant="summit"] ============================================================ The palette here is Compie's own: Midnight Core #01040D and Neon Pulse #CEFF00, straight out of public/styles/tokens/. The new AI Challenge banner is black with a Neon Pulse wordmark and a Neon Pulse summit path, so the canonical brand palette IS the banner palette — there is nothing to override and no second green to explain. What this file still carries, and why it is still an attribute rather than part of compie.css: - the banner masthead, the phone-first .c-scan layout, the file list, the result header, and the leaderboard's phone reflow. Layout and geometry, not colour. - display type in sentence-case Space Grotesk rather than condensed all-caps Bebas, to match the banner's letterforms. - the four feedback colours, which compie.css inherits from an older division palette (cyan "success", a hard #F21829 "danger") and which looked foreign on any Compie surface. Removing data-variant="summit" from now costs only the layout and the type — the colours are the same either way. Rules that still hold, from docs/BRAND.md: Digital Surge cyan is never used on text, and Pixel Spark magenta is an accent, never a body colour. ============================================================ */ [data-variant="summit"] { /* Feedback. compie.css never overrode these, so they resolved to the old division palette — cyan for success, #F21829 for danger — which is why severity pills and status text looked foreign. Re-pitched for Midnight Core and checked against it: danger 7.0:1, warning 11.9:1, info 7.4:1. Success is the brand green itself; on this surface "good" and "accent" are the same idea, and inventing a second green would only compete with it. */ --success: #CEFF00; --warning: #FFB84D; --danger: #FF6472; --info: #8691B2; /* Kept as aliases so the rules below read as intent rather than as hex, and so there is one line to change if the artwork ever changes again. Both now point at the same brand accent — the banner has one green. */ --summit-lime: var(--neon-pulse); --summit-teal: var(--neon-pulse); } /* The banner already carries the visual weight, so the page glow drops to a whisper — two of them fighting reads as noise. */ [data-variant="summit"] body::before { background: radial-gradient(900px 700px at 50% 0%, rgba(206, 255, 0, 0.10) 0%, rgba(1, 4, 13, 0) 70%), radial-gradient(700px 700px at 100% 100%, rgba(206, 255, 0, 0.05) 0%, rgba(1, 4, 13, 0) 70%); } /* ---------- type ---------- The banner is set in a rounded geometric sans. Condensed all-caps Bebas beside it reads as two unrelated designs, so display type in this variant is Space Grotesk Bold in sentence case. Hebrew keeps Assistant ExtraBold, which already sits close to the banner's letterforms. Figures stay Bebas — they are Latin digits and the condensed face reads better at a glance. */ [data-variant="summit"] .c-display, [data-variant="summit"] .c-hl, [data-variant="summit"] .c-hl__key, [data-variant="summit"] .c-tile strong { font-family: var(--font-sans); font-weight: var(--weight-bold); text-transform: none; letter-spacing: -0.022em; line-height: 1.1; } [data-variant="summit"][dir="rtl"] .c-display, [data-variant="summit"] [dir="rtl"] .c-display, [data-variant="summit"][dir="rtl"] .c-hl, [data-variant="summit"] [dir="rtl"] .c-hl { font-family: var(--font-hebrew); font-weight: 800; } /* A four-word Hebrew headline was breaking into three ragged lines. balance distributes it evenly and degrades to normal wrapping where unsupported. */ [data-variant="summit"] .c-hl, [data-variant="summit"] .c-display { text-wrap: balance; } [data-variant="summit"] .c-eyebrow { letter-spacing: 0.08em; color: var(--neon-pulse); } /* Rounder geometry throughout, to match the banner's soft corners. */ [data-variant="summit"] .c-card, [data-variant="summit"] .c-panel, [data-variant="summit"] .c-tile { border-radius: 22px; } /* ============================================================ BANNER HEADER Full-bleed, no chrome above it. The banner IS the masthead, so the brand bar that normally sits on top would just repeat the logo. ============================================================ */ .c-banner { display: block; position: relative; width: 100%; margin: 0; background: var(--surface-base); } .c-banner img { display: block; width: 100%; height: auto; } /* The artwork's bottom edge runs from deep navy on the left to teal under the summit curve, so no single page colour meets it cleanly. A short fade to the page background hides the seam without darkening the artwork itself. */ .c-banner::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 56px; background: linear-gradient(to bottom, rgba(1, 4, 13, 0) 0%, var(--surface-base) 86%); pointer-events: none; } /* ============================================================ BRAND BAR Every working page wears this. The banner artwork is reserved for the two entry screens; repeating it on a form would be noise. ============================================================ */ [data-variant="summit"] .c-brandbar { padding: var(--space-4) var(--space-6); border-bottom: var(--border-width) solid var(--border-hairline); background: linear-gradient(180deg, #0E1118 0%, var(--surface-base) 100%); gap: var(--space-4); } .c-brandbar__mark { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; min-width: 0; } [data-variant="summit"] .c-brandbar img { height: clamp(26px, 2.6vw, 34px); } .c-brandbar__sep { width: 1px; height: 26px; background: var(--border-card); flex: 0 0 auto; } .c-brandbar__title { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: clamp(15px, 1.5vw, 19px); color: var(--neon-pulse); letter-spacing: -0.01em; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .c-brandbar__end { display: inline-flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; } /* The board and the agent screen are hall screens, but the moment the site is a public URL they also get opened on phones - 430px for a bar sized for 1920. Wrap instead of printing the chips across the wordmark. */ [data-variant="summit"] .c-brandbar { flex-wrap: wrap; row-gap: var(--space-3); } /* Hall screens: the bar scales with the rest of .c-screen so it is still legible from the back of the room. */ [data-variant="summit"] .c-screen .c-brandbar img { height: 60px; } [data-variant="summit"] .c-screen .c-brandbar__title { font-size: 30px; } [data-variant="summit"] .c-screen .c-brandbar__sep { height: 40px; } /* ============================================================ SCAN LAYOUT — one thumb, one screen Built for someone who has just scanned a QR code and is standing at a booth: read, decide, tap. Everything else is below the fold on purpose. ============================================================ */ .c-scan { max-width: 560px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-12); } .c-scan > * + * { margin-top: var(--space-6); } /* The language switch sits directly under the banner, where a thumb lands before the eye has finished reading. It is not tucked in a corner: a Hebrew speaker who somehow lands in English must be one tap from fixing it. */ .c-scan__lang { display: flex; justify-content: flex-end; } [dir="rtl"] .c-scan__lang { justify-content: flex-start; } .c-scan__lang .c-toggle button { padding: 8px var(--space-4); font-size: var(--text-sm); } /* The dare, sized for a phone first. Tighter than the /full hero because here it competes with the banner directly above it. */ .c-scan__hl { font-size: clamp(28px, 8.2vw, 40px); margin: 0; } /* the scenario, as a quiet card rather than a shouting panel */ .c-scan__brief { background: var(--surface-raised); border: var(--border-width) solid var(--border-hairline); border-inline-start: 3px solid var(--neon-pulse); border-radius: 16px; padding: var(--space-5); } .c-scan__brief .c-eyebrow { display: block; margin-bottom: var(--space-3); } .c-scan__brief p { margin: 0; } .c-scan__brief p + p { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); } .c-scan__brief strong { color: #fff; font-weight: var(--weight-semibold); } /* three figures in one row — the whole hook, at a glance */ .c-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); text-align: center; } .c-facts__n { font-family: var(--font-display); font-size: clamp(30px, 9vw, 42px); line-height: .9; color: var(--neon-pulse); font-variant-numeric: tabular-nums; } .c-facts__l { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 6px; display: block; } .c-facts > div { padding: var(--space-4) var(--space-2); background: var(--surface-raised); border: var(--border-width) solid var(--border-hairline); border-radius: 14px; } /* one action, thumb-sized, impossible to miss */ .c-cta-block { text-align: center; } .c-cta-block .c-btn { width: 100%; padding: 18px var(--space-6); font-size: var(--text-lg); } .c-cta-block .c-row { justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; } /* the rules, one line each — no cards, no bodies */ .c-quick { list-style: none; margin: 0; padding: 0; } .c-quick li { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-hairline); color: var(--text-body); font-size: var(--text-sm); line-height: var(--leading-snug); } .c-quick li:last-child { border-bottom: 0; } .c-quick b { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--neon-pulse); font-variant-numeric: tabular-nums; } .c-quick strong { color: #fff; } /* The banner at the top already says "A Compie Challenge · AWS Summit", so repeating it at the bottom next to the logo read as two competing brand marks in a heap. One quiet line instead: a hairline, the white mark, and the event in small caps beneath it. */ .c-scan__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--border-width) solid var(--border-hairline); } .c-scan__foot img { height: 26px; width: auto; opacity: .75; } .c-scan__foot span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); direction: ltr; unicode-bidi: isolate; } @media (min-width: 700px) { .c-scan { max-width: 680px; padding-top: var(--space-8); } .c-facts__n { font-size: 46px; } } /* ============================================================ THE ASYMMETRY, SPLIT Visitors read "11 files · 20k tokens · 3:00" as a list of things THEY had to get through, and asked whether they were meant to read it all. Naming the two sides answers that before the question forms: one column is the agent's workload, the other is the whole of yours. ============================================================ */ .c-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .c-split__side { background: var(--surface-raised); border: var(--border-width) solid var(--border-hairline); border-radius: 16px; padding: var(--space-4) var(--space-3); } .c-split__side--you { border-color: var(--neon-pulse); background: linear-gradient(180deg, rgba(62, 224, 122, .10) 0%, var(--surface-raised) 60%); } .c-split__label { display: block; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); text-align: center; margin-bottom: var(--space-3); } .c-split__side--you .c-split__label { color: var(--neon-pulse); } .c-split__rows { display: grid; gap: var(--space-2); } .c-split__row { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .c-split__n { font-family: var(--font-display); font-size: clamp(26px, 7.4vw, 34px); line-height: .9; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .c-split__side--you .c-split__n { color: var(--neon-pulse); } .c-split__l { font-size: var(--text-xs); color: var(--text-secondary); } /* The sentence that says it outright. Not a caption — it is the answer to the question everyone was asking. */ .c-noread { margin: 0; text-align: center; color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-snug); } .c-noread strong { color: #fff; } /* the optional peek */ .c-peek { display: block; text-align: center; font-size: var(--text-sm); color: var(--neon-pulse); text-decoration: none; } .c-peek:hover { text-decoration: underline; } /* ============================================================ FILE LIST — the dataset, readable on a phone Collapsed rows, one open at a time, content fetched on open. Wide files scroll inside their own box; the page itself never scrolls sideways. ============================================================ */ .c-filelist { list-style: none; margin: 0; padding: 0; } .c-filelist__empty { color: var(--text-secondary); padding: var(--space-4) 0; } .c-file { border-bottom: var(--border-width) solid var(--border-hairline); } .c-file:last-child { border-bottom: 0; } .c-file__head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4) 0; background: none; border: 0; font-family: inherit; text-align: start; cursor: pointer; color: inherit; } .c-file__i { font-family: var(--font-display); font-size: 17px; color: var(--neon-pulse); font-variant-numeric: tabular-nums; } .c-file__text { min-width: 0; } .c-file__name { display: block; color: #fff; font-weight: var(--weight-medium); font-size: var(--text-sm); direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-file__note { display: block; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); margin-top: 2px; } .c-file__size { color: var(--text-tertiary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } /* else RTL prints "KB 4.6" */ /* A caret rather than a plus: it reads as "there is more below" on a phone. */ .c-file__caret { width: 9px; height: 9px; /* Physical borders on purpose: this chevron means "there is more below", not a reading direction. With logical borders it flipped to a sideways arrow on the Hebrew page. */ border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); margin-bottom: 3px; transition: transform var(--duration-base) var(--ease-standard); flex: 0 0 auto; } .c-file.is-open .c-file__caret { transform: rotate(-135deg); border-color: var(--neon-pulse); } .c-file.is-open .c-file__i { color: var(--neon-pulse); } .c-file__body { padding-bottom: var(--space-5); } .c-file__hint { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); } .c-file__pre { margin: 0; padding: var(--space-4); background: #05070E; border: var(--border-width) solid var(--border-hairline); border-radius: 12px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.55; color: var(--text-body); max-height: 60vh; overflow: auto; white-space: pre; tab-size: 2; overscroll-behavior: contain; /* stop the page scrolling when the box ends */ -webkit-overflow-scrolling: touch; } /* ============================================================ REQUIRED / OPTIONAL MARKS Only name and email gate the form. An unmarked field reads as mandatory at a booth, so the two that matter carry a star and the rest say "optional". ============================================================ */ .c-label { display: flex; align-items: baseline; gap: 6px; } .c-req { color: var(--neon-pulse); font-weight: var(--weight-bold); } .c-opt { margin-inline-start: auto; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 400; } .c-reqnote { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); } .c-reqnote::first-letter { color: var(--neon-pulse); font-weight: var(--weight-bold); } /* ============================================================ WHAT IS IN THE FILES Four rows on the home page. With eleven artifacts this had to be a link to another screen; with four it fits, and answering "what is in there?" on the spot is worth more than the space it costs. ============================================================ */ .c-whatsin { list-style: none; margin: 0; padding: 0; } .c-whatsin li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-hairline); } .c-whatsin li:last-child { border-bottom: 0; } .c-whatsin img { width: 26px; height: 26px; margin-top: 2px; } .c-whatsin b { display: block; color: #fff; font-size: var(--text-sm); font-weight: var(--weight-medium); /* Isolate, do NOT flip direction. `direction: ltr` here also made the box left-aligned, so in Hebrew the filename sat at the far left while its own description sat at the right and the two stopped reading as one row. Isolation alone keeps "terraform.diff" in Latin order and still places it at the start of the line, whichever way the page runs. */ unicode-bidi: isolate; text-align: start; } .c-whatsin span { display: block; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); margin-top: 2px; } /* ============================================================ RESULT SCREEN The screen opened on a bare "GO", which is the agent's verdict but reads as a status badge — nobody could tell what page they were on. The score leads now, the verdict is labelled, and the page says its own name first. ============================================================ */ .c-result__head { display: grid; gap: var(--space-2); } [data-variant="summit"] .c-result__head .c-hl { margin: 0; font-size: clamp(28px, 6vw, 40px); } /* The verdict, its label and whether it was the right call, as one block that cannot be mistaken for the score above it. */ .c-verdictrow { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-hairline); } .c-verdictrow .c-eyebrow { margin: 0; } .c-verdictrow .c-muted { font-size: var(--text-sm); } /* ============================================================ BRAND BAR — the logo was sized for a bar that also had to fit a title and chips on a hall screen, and on the inner pages it came out too small to read as the Compie mark. Up ~30%; the separator and title follow it. ============================================================ */ [data-variant="summit"] .c-brandbar img { height: clamp(38px, 3.6vw, 48px); } [data-variant="summit"] .c-brandbar__sep { height: 32px; } /* ============================================================ LEADERBOARD ON A PHONE .c-screen is a hall-screen scale: 1.6rem body, 56px figures, five columns. That is right from ten metres and unreadable at 390px, where it overflowed sideways and pulled the columns out of line. Below 700px the same table becomes three fields per row — rank, who, score — with the company tucked under the name and the character count dropped, because on a phone this is a list you scan for your own name, not a spreadsheet. ============================================================ */ @media (max-width: 700px) { [data-variant="summit"] .c-screen { font-size: 1rem; } [data-variant="summit"] .c-screen .c-page { padding-inline: var(--space-4); } [data-variant="summit"] .c-screen .c-display--xl { font-size: clamp(30px, 8vw, 44px); } [data-variant="summit"] .c-board thead { display: none; } [data-variant="summit"] .c-board tbody tr { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "rank name score" "rank corp score"; align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-hairline); } [data-variant="summit"] .c-board td { border: 0; padding: 0; min-width: 0; } [data-variant="summit"] .c-board td:nth-child(1) { grid-area: rank; } [data-variant="summit"] .c-board td:nth-child(2) { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-variant="summit"] .c-board td:nth-child(3) { grid-area: corp; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-variant="summit"] .c-board td:nth-child(4) { display: none; } [data-variant="summit"] .c-board td:nth-child(5) { grid-area: score; } [data-variant="summit"] .c-screen .c-board__rank, [data-variant="summit"] .c-screen .c-board__score { font-size: 30px; line-height: 1; } [data-variant="summit"] .c-board__rank { width: auto; } /* "Nobody has played yet" spans the row instead of squeezing into column one. */ [data-variant="summit"] .c-board td[colspan] { grid-area: unset; grid-column: 1 / -1; white-space: normal; } } /* The hall-screen bar, seen on a phone. .c-screen sizes the mark and the title for ten metres; at 390px the title was twice the height of the logo it sits next to, which is what made the mark look like an afterthought. On a phone both come back to page scale, and the mark stays the larger of the two. */ @media (max-width: 700px) { [data-variant="summit"] .c-screen .c-brandbar img { height: 40px; } [data-variant="summit"] .c-screen .c-brandbar__title { font-size: 20px; } [data-variant="summit"] .c-screen .c-brandbar__sep { height: 26px; } [data-variant="summit"] .c-screen .c-brandbar { padding: var(--space-4); } } /* The warning that used to live here is styled inline, in src/components/FocusWatch.tsx (FocusRule). It is the one element that must never render unstyled, and a linked stylesheet in public/ can always be served stale against fresh markup. See the comment there. */