/* * The HBVB design system — dark-first. * * Tokens are lifted verbatim from the design canvas (HBVB Screens.dc.html), * so a value here can be diffed against the source of truth rather than * eyeballed. Dark is the DEFAULT, not a media-query branch: the cards are * foil and holo over a near-black ground, and a light default would make the * product's main object look wrong on first paint. Light is a deliberate * toggle, stamped as data-theme="light" on . * * This file deliberately does NOT replace assets/site.css. The old pages are * migrating one at a time, and swapping the shared stylesheet would leave * every un-migrated page in a half-designed state. site.css goes when the * last page stops importing it. */ :root { /* Surfaces */ --bg: #05070c; --panel: rgba(255, 255, 255, .05); --panel-2: rgba(255, 255, 255, .08); --br: rgba(255, 255, 255, .10); --topbar: rgba(5, 7, 12, .82); --sheet: #0B1E42; /* Text */ --txt: #F3E7CE; --txt-2: #ffffff; --faint: #8EA1BF; /* Idle nav text and labels. Dimmer than --faint on purpose: the design uses a second, quieter grey for anything that is not the current section. */ --faint-2: #6E80A0; /* Accents. Gold is the brand's primary action colour. */ --gold: #F5C542; /* Gold as TEXT. The brand gold is a 1.6:1 whisper on the light sand ground, so light mode needs a darker one - same hue, readable. Surfaces and fills keep --gold in both themes. */ --gold-txt: #F5C542; --teal: #37E1D3; --coral: #FF6B4A; --green: #27C58C; --navy: #0B1E42; --navy-2: #16376B; --navy-deep: #060F22; /* Badge tiers, for the skill ladders. */ --tier-bronze: #D9A56E; --tier-silver: #E3E9F2; --tier-gold: #F5C542; --tier-elite: #37E1D3; /* Type. Oswald labels, Rajdhani numerals, Inter prose, Caveat signatures. */ --label: 'Oswald', 'Helvetica Neue', Arial, sans-serif; --display: 'Rajdhani', 'Helvetica Neue', Arial, sans-serif; --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --script: 'Caveat', 'Segoe Script', cursive; --wrap: 1160px; /* The dark ground's light streaks. Zero in light mode. */ --streak: 1; color-scheme: dark; } :root[data-theme="light"] { --bg: #EAE3D6; --panel: #ffffff; --panel-2: #F3EEE3; --br: rgba(11, 30, 66, .13); --topbar: rgba(238, 231, 219, .9); --sheet: #ffffff; --txt: #1B2E4E; --txt-2: #0B1E42; --faint: #5E6E88; --faint-2: #8494AC; --streak: 0; --gold-txt: #8A5A08; color-scheme: light; } * { box-sizing: border-box } html, body { margin: 0; padding: 0 } body { background: var(--bg); color: var(--txt); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100dvh; } /* The streak wash: sunset over the pier at 88% 8%, deep water bottom-left, and two raking light bands. Screen-blended, so it lifts the near-black without touching text contrast. Hidden entirely in light mode. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* --wash lets a page dial the brand wash down. Full strength is right on the entry pages, where it IS the brand; on an app page - a roster, an account table - a warm haze across the whole viewport just makes the content look muddy, and the canvas gets away with it only because its panels cover most of the frame. `body class="app"` turns it down. */ opacity: calc(var(--streak) * var(--wash, 1)); mix-blend-mode: screen; /* Softer than the canvas original, deliberately. In the design this sits inside a 390x840 phone frame where the two raking bands read as a thin sheen across a card; stretched over a full viewport the same stops become a rainbow stripe through the headline. The radial glows - sunset over the pier, deep water bottom-left - do the work and are kept near full strength; the bands are widened and roughly halved so they stay a sheen. */ background: radial-gradient(120% 80% at 88% 8%, rgba(255, 150, 60, .26), transparent 55%), radial-gradient(90% 70% at 10% 104%, rgba(20, 45, 100, .45), transparent 62%), linear-gradient(116deg, transparent 22%, rgba(245, 197, 66, .06) 40%, rgba(255, 107, 74, .13) 48%, rgba(245, 197, 66, .05) 56%, transparent 74%), linear-gradient(116deg, transparent 52%, rgba(55, 225, 211, .06) 67%, transparent 82%); } body > * { position: relative; z-index: 1 } body.app { --wash: .3 } img { max-width: 100%; display: block } /* `hidden` has to win against a class that sets `display`. The UA rule is `[hidden] { display: none }` - a bare attribute selector, which `.btn { display: inline-flex }` outranks. So every button rendered with the `hidden` attribute was VISIBLE: the waitlist page showed "Open the app" and "Admin" to an account that could reach neither. Any stylesheet that sets display on a class needs this line. */ [hidden] { display: none !important } a { color: var(--teal); text-decoration: none } a:hover { color: var(--gold) } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px } /* ── the wordmark ───────────────────────────────────────────────────────── */ .mark { display: inline-flex; align-items: center; gap: 9px } .mark-glyph { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--coral)); color: #05070c; font-family: var(--label); font-weight: 700; font-size: 15px; line-height: 1; } .mark-name { font-family: var(--label); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); } /* ── small caps label, used for every eyebrow and field label ───────────── */ .eyebrow { font-family: var(--label); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } /* ── headings ───────────────────────────────────────────────────────────── */ h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 7vw, 52px); line-height: 1.04; letter-spacing: -.01em; margin: 0; color: var(--txt-2); text-wrap: balance; } h1 em { font-style: normal; color: var(--gold-txt) } .lede { margin: 0; color: var(--faint); font-size: 15px; text-wrap: pretty } /* ── panels ─────────────────────────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--br); border-radius: 18px; padding: 22px; backdrop-filter: blur(8px); } /* ── fields ─────────────────────────────────────────────────────────────── */ .field { display: grid; gap: 7px } .field label { font-family: var(--label); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .field input { width: 100%; padding: 13px 14px; background: var(--panel-2); border: 1px solid var(--br); border-radius: 11px; color: var(--txt-2); font-family: var(--sans); font-size: 15px; } /* Components for canvas screens that are not built yet - the credits pill, the badge rungs, the desktop rail - are deliberately NOT in this file. CSS no page exercises is CSS nobody has looked at, and it rots silently. Each one lands with the screen that uses it. A test enforces this. */ .field input::placeholder { color: var(--faint); opacity: .7 } .field input:focus { outline: none; border-color: var(--gold); background: var(--panel) } /* ── buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 11px; cursor: pointer; border: 1px solid var(--br); background: var(--panel-2); color: var(--txt); font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .btn:hover { border-color: var(--faint); color: var(--txt-2) } .btn-primary { background: linear-gradient(135deg, var(--gold), #F0A93C); border-color: transparent; color: #05070c; } .btn-primary:hover { filter: brightness(1.07); color: #05070c } .btn-block { width: 100% } .btn[disabled] { opacity: .55; cursor: default } /* ── the theme toggle ───────────────────────────────────────────────────── */ .theme-btn { position: fixed; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--br); background: var(--panel-2); color: var(--txt); font-size: 15px; line-height: 1; } .theme-btn:hover { border-color: var(--gold); color: var(--gold) } /* ── status line ────────────────────────────────────────────────────────── */ /* Collapsed while empty, so a panel is not padded out around a blank line. */ .msg { margin: 0; font-size: 13.5px; color: var(--faint) } .msg:empty { display: none } .msg.ok { color: var(--green) } .msg.error { color: var(--coral) } /* ── the one-box page: a single centred panel and nothing else ──────────── */ .solo { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px } .solo-box { width: 100%; max-width: 420px; display: grid; gap: 22px } .foot { font-family: var(--label); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ * The shared shell * * Class names are deliberately the SAME as the ones assets/site.css used. * Ten pages carry markup and JavaScript written against them, and rewriting * that markup to get a new palette would be a large diff whose failures are * all behavioural - a lost event handler, a broken selector - for a change * that is entirely visual. So the names stay and the design underneath them * changes. Where the canvas introduces something new (the credits pill, the * desktop rail, the skill ladders) it gets a new name. * ═══════════════════════════════════════════════════════════════════════════ */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px } /* ── top bar ────────────────────────────────────────────────────────────── */ .site-head { position: sticky; top: 0; z-index: 20; background: var(--topbar); border-bottom: 1px solid var(--br); backdrop-filter: blur(14px); } .site-head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px } .logo { display: flex; align-items: center; gap: 9px } .logo:hover { color: inherit } /* The canvas mark: a rounded gold-to-coral tile with an H. Replaces the old sun-over-water circle, which belonged to the previous palette. */ .logo-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--coral)); color: #05070c; font-family: var(--label); font-weight: 700; font-size: 16px; line-height: 1; } .logo-mark::after { content: "H" } .logo-mark.sm { width: 23px; height: 23px; border-radius: 7px; font-size: 13px } .logo-name { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); } .head-right { display: flex; align-items: center; gap: 18px } .head-nav { display: flex; align-items: center; gap: 22px; font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .head-nav a { color: var(--faint) } .head-nav a:hover { color: var(--txt-2) } .head-nav a[aria-current="page"] { color: var(--gold-txt); box-shadow: inset 0 -2px 0 var(--gold) } .btn-login { font-family: var(--label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; cursor: pointer; border: 1px solid var(--br); background: var(--panel-2); color: var(--txt); } .btn-login:hover { border-color: var(--gold); color: var(--gold-txt) } /* ── buttons (extends the base set above) ───────────────────────────────── */ .btn-ghost { background: transparent; border-color: var(--br); color: var(--txt) } .btn-ghost:hover { border-color: var(--txt-2); background: var(--panel); color: var(--txt-2) } .btn-sm { padding: 7px 13px; font-size: 11px; border-radius: 9px } /* ── sections ───────────────────────────────────────────────────────────── */ .section { padding: 52px 0 } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--br); padding-bottom: 14px; margin-bottom: 28px; } .section-head h2 { margin: 0; font-family: var(--label); font-weight: 600; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-2); } .section-head p { margin: 0; font-size: 12.5px; color: var(--faint) } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px } .card { background: var(--panel); border: 1px solid var(--br); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 9px; } .card .num { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--teal) } .card h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--txt-2) } .card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--faint); text-wrap: pretty } /* ── chips ──────────────────────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 6px } .chip { font-family: var(--label); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--br); background: var(--panel-2); color: var(--faint); } .chip.none { border-style: dashed } .chip.on { border-color: var(--gold); background: rgba(245, 197, 66, .12); color: var(--gold-txt) } .chip.public { border-color: rgba(55, 225, 211, .35); color: var(--teal) } /* One selector, not two. A class name in a world-readable stylesheet is a hint about the roles that exist, so roles that are not meant to be public knowledge borrow this styling instead of getting a selector of their own. */ .chip.admin { border-color: transparent; background: var(--gold); color: #05070c } .chip.expired { border-style: dashed; color: var(--coral); border-color: color-mix(in srgb, var(--coral) 45%, transparent) } /* The public site-map renderer and its styles are gone with /future-home-page/, the last page from the pre-canvas design. The machine-readable map is still generated (public/sitemap.json and sitemap.xml), and the human one an operator needs is /admin/pages/. */ /* ── footer ─────────────────────────────────────────────────────────────── */ /* * ONE footer, everywhere it appears. * * There used to be three: a columned `.site-foot` with a copyright line, a * colour stripe and a couple of links; `.solo-foot` on the entry pages; and * `.pv-foot` inside the preview's phone frame. Three rules, one sentence's * worth of content between them, and they had already drifted - the old * footer's "Privacy" link went to the home page. * * The line is the canvas's own sign-off and the only thing a footer on this * site has to say. It is the same class in both shapes: a page-level *