/* Egg Heist — the content pages (landing, how to play, leaderboard, credits). */ body { background: var(--sky-1); } /* ---------------------------------------------------------------- page shell One layout for every non-landing page: a sky band behind the sticky header, then content on cream so long-form text is never set on saturated blue. The landing page opts out (it has the 3D hero instead). */ body.page { background: var(--sky-1); display: flex; flex-direction: column; min-height: 100vh; } /* The reserved scrollbar gutter sits outside , so it takes its colour from . Without this it shows sky blue beside cream content. */ html:has(body.page) { background: var(--cream); } body.page main { flex: 1; background: var(--cream); border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); } body.page main > .section:first-child { padding-top: 40px; } body.page .section--cream { background: #fff; } /* Page title: the same treatment on every page, so headings do not drift. */ .page-title { font-family: var(--font-display); font-size: clamp(32px, 6.5vw, 54px); text-transform: uppercase; color: var(--gold-2); text-shadow: 2px 2px 0 var(--gold-3), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink); margin: 0 0 18px; } .page-lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 26px; } .wrap { width: min(1080px, 100% - 40px); margin-inline: auto; } /* --- top bar -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,246,224,.92); backdrop-filter: blur(6px); border-bottom: 4px solid var(--ink); } .site-header .wrap { display: flex; align-items: center; gap: 18px; padding: 10px 0; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--ink); text-decoration: none; letter-spacing: .01em; } .brand svg { width: 30px; height: 30px; flex: none; } .site-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-weight: 700; font-size: 15px; } .site-nav a { color: var(--ink); text-decoration: none; } .site-nav a:hover { text-decoration: underline; } @media (max-width: 620px) { .site-nav a[data-optional] { display: none; } } /* --- hero ----------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-bottom: 5px solid var(--ink); } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(59,42,30,.82) 0%, rgba(59,42,30,.6) 42%, rgba(59,42,30,.05) 80%); } .hero__inner { position: relative; z-index: 2; min-height: min(78vh, 620px); display: flex; flex-direction: column; justify-content: center; padding: 54px 0; } .hero__card { max-width: 560px; } .hero h1 { margin-bottom: .18em; } .hero__rule { font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; line-height: 1.3; color: var(--cream); text-shadow: 0 2px 0 rgba(59,42,30,.6); max-width: 20ch; margin: 0 0 10px; } .hero__rule em { color: var(--gold-2); font-style: normal; } .hero__sub { color: rgba(255,246,224,.88); font-size: 16px; line-height: 1.55; max-width: 44ch; margin: 0 0 24px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero__meta { margin-top: 18px; color: rgba(255,246,224,.72); font-size: 13px; font-weight: 700; letter-spacing: .04em; } .badge-beta { display: inline-block; margin-bottom: 14px; background: var(--barn-1); color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 5px 13px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-1.5deg); } /* --- sections ------------------------------------------------------------- */ .section { padding: 56px 0; } .section--cream { background: var(--cream); border-block: 5px solid var(--ink); } .section__title { text-align: center; margin-bottom: 8px; font-size: clamp(28px, 5vw, 44px); color: var(--ink); text-shadow: none; } .section__lead { text-align: center; max-width: 56ch; margin: 0 auto 34px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .step { background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 20px; box-shadow: 0 6px 0 rgba(59,42,30,.18); } /* Numerals stay on the UI font: the CC0 display face styles its digits so heavily that "1" is not recognisable as a one. */ .step__n { font-family: var(--font-ui); font-weight: 900; font-size: 34px; color: var(--gold-2); -webkit-text-stroke: 2px var(--ink); line-height: 1; } .step h3 { margin: 8px 0 6px; font-size: 20px; } .step p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 15px; } .chaos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .chaos { display: flex; gap: 12px; align-items: flex-start; background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; padding: 14px 16px; } .chaos span { font-size: 28px; line-height: 1; flex: none; } .chaos b { display: block; margin-bottom: 3px; } .chaos p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; } .cta { text-align: center; padding: 60px 0; } .cta h2 { font-size: clamp(30px, 6vw, 52px); } /* --- tables (leaderboard) ------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 4px solid var(--ink); border-radius: 18px; background: #fff; } table.board { width: 100%; border-collapse: collapse; font-weight: 700; } table.board th, table.board td { padding: 11px 14px; text-align: left; white-space: nowrap; } table.board thead th { background: var(--ink); color: var(--cream); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } table.board tbody tr:nth-child(even) { background: var(--cream); } table.board td.num { text-align: right; font-variant-numeric: tabular-nums; } table.board .rank { font-family: var(--font-ui); font-weight: 900; font-size: 16px; color: var(--ink-soft); } table.board tr[data-you] { background: var(--gold-1) !important; } .filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .chip { background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 15px; font-weight: 800; font-size: 13px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; } .chip[aria-pressed="true"] { background: var(--gold-2); } /* --- prose ---------------------------------------------------------------- */ .prose { max-width: 68ch; margin-inline: auto; font-size: 17px; line-height: 1.7; } .prose h2 { margin-top: 1.6em; font-size: 28px; color: var(--ink); text-shadow: none; } .prose h3 { margin-top: 1.3em; font-size: 20px; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li { margin: .35em 0; } .prose kbd { display: inline-block; background: var(--cream); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 7px; font-family: inherit; font-size: .9em; font-weight: 700; box-shadow: 0 2px 0 rgba(59,42,30,.25); } .callout { background: var(--gold-1); border: 4px solid var(--ink); border-radius: 16px; padding: 16px 20px; margin: 24px 0; font-weight: 700; } /* --- credits -------------------------------------------------------------- */ .credit-list { display: grid; gap: 12px; padding: 0; list-style: none; } .credit-list li { background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 14px 16px; } .credit-list b { display: block; font-size: 17px; } .credit-list small { color: var(--ink-soft); display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; } .licence-tag { display: inline-block; background: var(--grass-1); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; } /* --- footer --------------------------------------------------------------- */ .site-footer { background: var(--ink); color: rgba(255,246,224,.82); padding: 34px 0; font-size: 14px; line-height: 1.7; } .site-footer a { color: var(--gold-1); } .site-footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; } .empty { text-align: center; padding: 44px 20px; color: var(--ink-soft); font-weight: 700; }