/* ============================================================================ AWARDLY WORKS — CENTRAL THEME (single source of truth) ---------------------------------------------------------------------------- This is the ONLY place colors/type/spacing are defined. Every component reads from these tokens — never a raw hex — so the theme cannot drift. RELATIONSHIP TO AWARDLY (the "flip"): Awardly is NOT a light theme — it is light CONTENT framed by heavy DARK chrome (nav #0A0A0A, hero panel, proof bar, spotlight panels all near-black), with gold as the single accent and near-black "ink" text. Awardly Works INVERTS the chrome, not the text: • The dominant surface EVERYWHERE is warm cream/beige — canvas AND chrome. The bars and panels Awardly painted black are cream here. • BLACK becomes an ACCENT (text, structure, emphasis), not a surface. • GOLD stays the shared-DNA accent — but used sparingly. Result: a light, airy, warm SIBLING of Awardly. Same bones, inverted weight. WHAT WE INHERIT UNCHANGED (family resemblance): • Type system — Georgia serif headlines, system-sans body, same scale/weights • Spacing rhythm — 1200px max, 2rem gutter, 1.5rem card padding • Radii — 10px containers / 6px controls / 12–16px modals / 50% round • Shadow signature — warm-black, two-layer soft float • Component SHAPES — cards, buttons, nav, pills, rules CONTRAST LAW (the reason this is a design pass, not a color swap): Gold on cream is ~1.9:1 and gold-deep ~2.7:1 — BOTH FAIL as text. Therefore GOLD IS NEVER READABLE TEXT on a light surface. Gold lives in: fills (the CTA), borders, rules, icon chips, and large display numerals. INK carries text; gold carries emphasis STRUCTURALLY (rules, fills, borders). The single sanctioned gold-as-text exception is the hero display headline (≥40px), where it reads as decorative brand display — see --accent-deep usage. Verified ratios on --surface-page (#F6EFE0): ink #2C2C2A → 12.3:1 (AAA) | ink-mid #5F5E5A → 5.7:1 (AA body) gold #EF9F27 → 1.9:1 (text ✗)| gold-deep #C68812 → 2.7:1 (large display only) ink-on-gold (CTA) → 6.4:1 (AA) | ink-soft #8A8678 → ~3.4:1 (meta/large only) ========================================================================== */ :root{ /* ── 1. RAW WARM-NEUTRAL LADDER — the dominant cream/beige system ────────── Anchored on Awardly's own cream (#FAEEDA) / paper (#F5F0E8) so this reads as a literal sibling. The hierarchy goes airy-light (page) → white (cards float) → progressively warmer beige for fills, bands, and wells. */ --cream: #FAEEDA; /* Awardly's exact cream — shared brand anchor */ --paper: #F5F0E8; /* Awardly's exact paper */ --beige-50: #FBF6EC; /* lightest warm — hover wash on cream */ --beige-100: #F6EFE0; /* PAGE CANVAS — dominant surface */ --beige-150: #EEE5D3; /* half-step deeper — the anchored header surface */ --beige-200: #F0E7D6; /* warm sub-surface — inputs, table heads, bands */ --beige-300: #E2D6BD; /* sunken / wells — stat band, spotlight head */ --beige-400: #D8CBB0; /* strongest beige — heavy dividers, inset edges */ /* ── 2. INK — now an ACCENT used for text + structure (dark on cream) ────── Same ink family as Awardly. ink-strong (#0A0A0A) is reserved for high- emphasis structure (wordmark, key headers, the dark accent button) — it is an ACCENT here, never a full-bleed surface. */ --ink: #2C2C2A; /* primary text */ --ink-strong: #0A0A0A; /* high-emphasis structure accent (was the nav bg)*/ --ink-mid: #5F5E5A; /* secondary / muted text — AA on cream */ --ink-soft: #8A8678; /* softest captions/meta (large or non-essential) */ /* ── 3. GOLD — the shared accent. FILLS / BORDERS / RULES / ICONS, not text ─ */ --gold: #EF9F27; /* primary accent — CTA fill, active, icon chips */ --gold-deep: #C68812; /* hover/pressed; large display emphasis only */ --gold-mid: #FAC775; /* gold borders on gold-tinted elements */ --gold-wash: #FCF3E1; /* faint gold tint — chip/badge/emphasis backing */ /* ── 4. SEMANTIC ROLE TOKENS — components reference THESE, not raws above ─── */ /* surfaces (cream dominant) */ --surface-page: var(--beige-100); /* the canvas everything sits on */ --surface-card: #FFFFFF; /* cards/panels float as clean white */ --surface-warm: var(--beige-200); /* secondary fills, inputs, table heads */ --surface-sunken: var(--beige-300); /* wells, deeper beige */ --surface-nav: var(--beige-150); /* THE FLIP: header is warm cream, not */ /* black — deeper than page so it's anchored*/ --surface-spotlight: var(--cream); /* THE FLIP: "spotlight" panels go cream + */ /* gold border (were near-black in Awardly)*/ /* text */ --text: var(--ink); --text-muted: var(--ink-mid); --text-soft: var(--ink-soft); --text-strong: var(--ink-strong); --text-on-gold: var(--ink); /* ink on a gold fill = 6.4:1 */ --text-on-ink: var(--cream); /* cream on the dark accent button */ /* accent */ --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-soft: var(--gold-mid); --accent-wash: var(--gold-wash); /* borders / hairlines (warm) */ --hairline: #E3DAC8; /* default airy divider on cream */ --hairline-strong: #D8CBB0; /* card edge / stronger separation */ --border-input: #D8CBB0; /* input rest border; focus → --accent */ /* ── 5. STATUS — Awardly's semantic set, retuned for dark-text-on-light-wash ─ */ --ok: #3B6D11; --ok-wash: #EAF3DE; --warn: #B5650A; --warn-wash: #FBEFD8; --err: #A32D2D; --err-wash: #FBE9E9; --info: #185FA5; --info-wash: #E6F1FB; /* ── 6. TYPE — inherited from Awardly verbatim (BRAND_SPEC §2) ─────────────── */ --font-head: Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --tracking-body: .01em; /* body letter-spacing */ --tracking-eyebrow: 3px; /* uppercase kicker tracking */ /* ── 7. SPACING / LAYOUT (BRAND_SPEC §3) ──────────────────────────────────── */ --max: 1200px; --gutter: 2rem; --pad-card: 1.5rem; --gap-section: 1.5rem; /* ── 8. RADIUS (BRAND_SPEC §4) ────────────────────────────────────────────── */ --r: 10px; /* containers, cards, panels */ --rs: 6px; /* buttons, inputs, pills */ --r-modal: 14px; /* marquee modals */ --r-pill: 999px; /* fully-round badges/chips */ /* ── 9. SHADOWS — Awardly's warm-black two-layer float, lightened for "airy" ─ */ --shadow-card: 0 1px 3px rgba(44,44,42,.04), 0 8px 28px rgba(44,44,42,.07); --shadow-card-hover: 0 2px 6px rgba(44,44,42,.06), 0 12px 36px rgba(44,44,42,.10); --shadow-nav: 0 4px 16px rgba(44,44,42,.10); /* anchored header drop onto content */ --shadow-modal: 0 24px 60px rgba(44,44,42,.22); /* ── 10. MOTION (BRAND_SPEC §8) ───────────────────────────────────────────── */ --t-fast: .12s; --t: .15s; --t-cta: .2s; /* ── 11. SIGNATURE GRADIENTS / GLOW (kept as the gold DNA) ─────────────────── */ --grad-cta: linear-gradient(105deg, #BA7517, #EF9F27); /* primary CTA */ --grad-cta-hover: linear-gradient(105deg, #8B5E00, #BA7517); --grad-rule: linear-gradient(90deg, var(--gold) 0%, var(--gold-mid) 40%, transparent 100%); --glow-ambient: radial-gradient(ellipse at 30% 0%, rgba(239,159,39,.05) 0%, transparent 60%); /* ── 12. BRAND MARK — star treatment + tagline (tuned in ONE place) ───────── SILVER star (the sibling: Awardly = gold, Awardly Works = silver). The mark is a baked GOLD raster; grayscale() desaturates it to chrome/pewter while KEEPING the metallic relief (facet highlights/shadows) — so it reads as a real silver star, and its darker facets give contrast on the light tile. A touch of contrast deepens the shadows so it doesn't wash on cream. (Honest limit: this is desaturated-gold luminance, not a true COOL silver — a purpose-made silver SVG would have cooler highlights. Good enough = keep raster; want cooler chrome = make an SVG.) */ --logo-star-filter: grayscale(1) contrast(1.12) brightness(.96); /* 3-line lockup sizes (mirrors Awardly's ltext / ltag / lsub hierarchy) */ --logo-wordmark-size: 27px; /* line 1 — wordmark */ --logo-eyebrow-size: 10px; /* line 2 — gold caps eyebrow */ --logo-value-size: 12.5px; /* line 3 — lighter value line */ } /* ============================================================================ BASE + COMPONENT LAYER Mirrors Awardly's component SHAPES (BRAND_SPEC §5–§7), flipped via tokens. Nothing below contains a raw color — only var() references. ========================================================================== */ *{ box-sizing:border-box; margin:0; padding:0; } body{ font-family: var(--font-body); background: var(--surface-page); color: var(--text); letter-spacing: var(--tracking-body); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* warm ambient gold glow behind everything (Awardly DNA, a touch stronger) */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: var(--glow-ambient); } input, select, textarea{ font-family: inherit; letter-spacing: normal; } /* ── Headings — INK on cream (black as the structural accent) ───────────────── */ h1, h2, h3{ font-family: var(--font-head); font-weight:700; color: var(--text); } h1{ font-size:44px; line-height:1.15; letter-spacing:-.8px; } h2{ font-size:24px; line-height:1.2; letter-spacing:-.3px; } h3{ font-size:18px; letter-spacing:-.2px; } /* The ONE sanctioned gold-as-text spot: the h1 display headline (always ≥40px), where gold-deep reads as decorative brand display. Scoped to h1 em so it works regardless of section wrapper — and never leaks to smaller text. */ h1 em{ color: var(--accent-deep); font-style: normal; } /* Eyebrow / kicker — uppercase, gold-deep is OK here only because it pairs with 800 weight at small size as a label, but to stay AA we keep it ink-mid with a gold rule cue; gold is the rule, not the text. */ .eyebrow{ font-size:11px; font-weight:800; letter-spacing: var(--tracking-eyebrow); text-transform:uppercase; color: var(--text-muted); display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ content:''; width:24px; height:2px; background: var(--accent); } /* Gold-fade section rule (Awardly's .grule) */ .grule{ height:2px; border-radius:2px; margin:10px 0 18px; background: var(--grad-rule); } /* ── Buttons (BRAND_SPEC §5), flipped via tokens ────────────────────────────── */ /* Primary — the single loud gold-gradient CTA (ink text, 6.4:1) */ .btn-primary{ padding:14px 36px; background: var(--grad-cta); color: var(--text-on-gold); border:none; border-radius:8px; font-size:15px; font-weight:800; letter-spacing:.3px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; box-shadow:0 4px 14px rgba(186,117,23,.30), 0 1px 3px rgba(186,117,23,.18); transition: all var(--t-cta); } .btn-primary:hover{ background: var(--grad-cta-hover); color:#fff; transform: translateY(-1px); box-shadow:0 8px 22px rgba(186,117,23,.42), 0 2px 6px rgba(186,117,23,.22); } .btn-primary:active{ transform: translateY(0); box-shadow:0 2px 8px rgba(186,117,23,.28); } .btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; } /* Standard confirm — flat gold, ink text, hover deepens + flips to white */ .btn-gold{ padding:9px 18px; background: var(--accent); color: var(--text-on-gold); border:none; border-radius: var(--rs); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition: all var(--t); } .btn-gold:hover{ background: var(--accent-deep); color:#fff; } /* Dark "secondary primary" — black AS ACCENT on cream (the flip keeps it as a sparing emphasis control, not a surface) */ .btn-ink{ padding:9px 20px; background: var(--text-strong); color: var(--text-on-ink); border:none; border-radius: var(--rs); font-size:13px; font-weight:700; cursor:pointer; transition: all var(--t); } .btn-ink:hover{ background: var(--accent-deep); color:#fff; } /* Ghost / secondary — transparent, warm hairline, hover → gold border */ .btn-ghost{ padding:11px 18px; background:transparent; color: var(--text-muted); border:1.5px solid var(--border-input); border-radius: var(--rs); font-size:13px; cursor:pointer; transition: all var(--t); } .btn-ghost:hover{ border-color: var(--accent); color: var(--text); } /* ── Card (BRAND_SPEC §6a) — white floats on cream with the warm soft shadow ── */ .card{ background: var(--surface-card); border:1px solid var(--hairline-strong); border-radius: var(--r); padding: var(--pad-card); margin-bottom:1.25rem; box-shadow: var(--shadow-card); } .card:hover{ box-shadow: var(--shadow-card-hover); } /* Card icon chip (BRAND_SPEC §6b) — gold-wash, gold-tinted border */ .card-icon{ width:32px; height:32px; border-radius:8px; background: var(--accent-wash); border:1px solid var(--gold-mid); display:flex; align-items:center; justify-content:center; font-size:16px; } /* ── Spotlight panel — THE FLIP of Awardly's near-black panel ───────────────── */ /* Awardly: ink-deep bg + white title. Awardly Works: cream + gold border + ink. */ .panel-spotlight{ background: var(--surface-spotlight); border:2px solid var(--accent); border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-card); } .panel-spotlight .panel-head{ background: var(--surface-sunken); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); } .panel-spotlight .panel-title{ font-size:13px; font-weight:800; color: var(--text); } .panel-spotlight .panel-sub{ font-size:11px; color: var(--text-muted); margin-top:2px; } /* ── Inputs — warm sub-surface, gold focus (BRAND_SPEC §8) ──────────────────── */ input, select, textarea{ background: var(--surface-warm); color: var(--text); border:1.5px solid var(--border-input); border-radius: var(--rs); padding:9px 12px; font-size:13px; transition: border-color var(--t); } input:focus, select:focus, textarea:focus{ border-color: var(--accent); outline:none; } /* ── Badge / pill — gold-wash chip ──────────────────────────────────────────── */ .badge{ display:inline-block; background: var(--accent); color: var(--text-on-gold); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius: var(--r-pill); } /* ============================================================================ HEADER / NAV — the most visible flip Awardly: two dark sticky bars (#0A0A0A top + #2C2C2A sub-nav), white wordmark, gold accents. Awardly Works: warm cream bars, INK wordmark, gold rule + gold hover. Light, airy, but still a defined surface (warm band + soft shadow). ========================================================================== */ .topnav{ background: var(--surface-nav); border-bottom: 1px solid var(--hairline); /* internal divider to the sub-nav */ padding:0 var(--gutter); height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; } .logo{ display:flex; align-items:center; gap:12px; text-decoration:none; } /* Logo mark — the true FLIP: a LIGHT tile (white) with a gold border, and the star DARKENED to read on light. The source PNG is a gold metallic star; CSS `brightness(0)` flattens it to a crisp dark silhouette (alpha preserved) so it stays legible — gold-on-light would wash out. Tradeoff: the star reads as a flat ink star here, not a 3D gold medallion (a baked raster can't be recolored to dark-gold-with-relief — that needs an SVG). Swap `--surface-card` → `--cream` for a warmer light-cream tile. */ .logo-mark{ width:52px; height:52px; background: var(--surface-card); border:1.5px solid var(--accent); border-radius:12px; display:flex; align-items:center; justify-content:center; } .logo-mark img{ width:32px; height:32px; display:block; filter: var(--logo-star-filter); } /* 3-line lockup, mirroring Awardly's wordmark / caps-eyebrow / value-line. Line 1 — wordmark: Georgia, ink. */ .logo-text{ font-family: var(--font-head); font-size: var(--logo-wordmark-size); font-weight:700; color: var(--text); letter-spacing:.5px; line-height:1.05; } /* Line 2 — gold CAPS eyebrow (= Awardly's .ltag): spaced uppercase, gold-deep (gold reads on cream at the deep tone). */ .logo-eyebrow{ font-size: var(--logo-eyebrow-size); font-weight:800; color: var(--accent-deep); letter-spacing:2.5px; text-transform:uppercase; line-height:1; margin-top:3px; } /* Line 3 — lighter VALUE line (= Awardly's .lsub, bumped up from tiny): muted ink, lighter weight, title-case. */ .logo-tag{ font-size: var(--logo-value-size); color: var(--text-muted); font-weight:500; letter-spacing:.2px; line-height:1.2; margin-top:2px; } /* Sub-nav shares the anchored header surface; its bottom edge carries the gold rule + soft drop shadow that separate the WHOLE header block from content. */ .subnav{ background: var(--surface-nav); border-bottom:2px solid var(--accent); padding:0 var(--gutter); display:flex; align-items:center; position:sticky; top:64px; z-index:99; box-shadow: var(--shadow-nav); } /* Categories + direct links. Hover/open/active all share the gold ink + gold underline (the nav's gold accent). */ .snav-cat{ position:relative; display:inline-flex; align-items:stretch; } .snav-cat-label, .snav-cat-direct{ display:inline-flex; align-items:center; gap:6px; padding:12px 18px; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.3px; white-space:nowrap; color:var(--text-muted); background:transparent; border:none; border-bottom:2px solid transparent; text-decoration:none; cursor:pointer; transition: all var(--t); } .snav-cat-direct:hover, .snav-cat-direct.active, .snav-cat-label:hover, .snav-cat.open > .snav-cat-label, .snav-cat.active > .snav-cat-label{ color:var(--accent-deep); border-bottom-color:var(--accent); } /* Dropdown — white panel, gold top edge, soft shadow (light flip of Awardly's dark #1F1F1D dropdown). */ .snav-dropdown{ position:absolute; top:100%; left:0; min-width:232px; background:var(--surface-card); border:1px solid var(--hairline-strong); border-top:2px solid var(--accent); border-radius:0 0 8px 8px; box-shadow:0 12px 32px rgba(44,44,42,.16); padding:6px 0; display:none; z-index:200; } .snav-cat.open .snav-dropdown{ display:block; } .snav-item{ display:flex; align-items:center; gap:6px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; cursor:pointer; transition: background var(--t), color var(--t); } .snav-item:hover{ background:var(--accent-wash); color:var(--accent-deep); } /* "Coming Soon" pill on a nav item */ .snav-pill{ margin-left:6px; font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-wash); border:1px solid var(--gold-mid); border-radius:var(--r-pill); padding:2px 7px; white-space:nowrap; } /* ── Top-right cluster: placeholder Sign in + account medallion + menu ───────── */ .topnav-right{ display:flex; align-items:center; gap:12px; } .btn-ghost:disabled{ opacity:.5; cursor:not-allowed; } .account-wrap{ position:relative; } .account-btn{ width:38px; height:38px; border-radius:50%; background:var(--ink-strong); border:1.5px solid var(--accent); color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .account-dropdown{ position:absolute; top:100%; right:0; min-width:240px; background:var(--surface-card); border:1px solid var(--hairline-strong); border-top:2px solid var(--accent); border-radius:0 0 8px 8px; box-shadow:0 12px 32px rgba(44,44,42,.16); padding:6px 0; display:none; z-index:200; } .account-wrap.open .account-dropdown{ display:block; } .account-head{ padding:8px 16px 6px; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-soft); } .account-item{ display:block; padding:9px 16px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; cursor:pointer; transition: background var(--t), color var(--t); } .account-item:hover{ background:var(--accent-wash); color:var(--accent-deep); } /* ── Section panels — one per route, only the active one is visible ─────────── */ .aw-section[hidden]{ display:none; } .aw-section-head h2{ font-size:26px; } .aw-section-sub{ margin-top:6px; max-width:660px; font-size:14px; color:var(--text-muted); line-height:1.65; } .aw-section-stub{ max-width:660px; padding:22px 24px; background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:var(--r); box-shadow:var(--shadow-card); } .aw-section-stub p{ margin-top:10px; font-size:13px; color:var(--text-muted); line-height:1.6; } .aw-stub-pill{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); } .aw-stub-pill.v1{ color:var(--ok); background:var(--ok-wash); border:1px solid rgba(59,109,17,.3); } .aw-stub-pill.soon{ color:var(--accent-deep); background:var(--accent-wash); border:1px solid var(--gold-mid); } /* ── Footer ─────────────────────────────────────────────────────────────────── */ .aw-footer{ max-width:var(--max); margin:48px auto 0; padding:20px var(--gutter); border-top:1px solid var(--hairline); display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--text-soft); } .aw-footer a{ color:var(--text-muted); text-decoration:none; } .aw-footer a:hover{ color:var(--accent-deep); } /* ── Proof / stat band — FLIP of Awardly's dark proof bar ───────────────────── */ .proof{ background: var(--surface-sunken); padding:2.25rem var(--gutter); } .proof-inner{ max-width: var(--max); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; } .proof-stat-n{ font-family: var(--font-head); font-size:24px; font-weight:700; color: var(--accent-deep); line-height:1.1; letter-spacing:.3px; } /* large display → gold-deep OK */ .proof-stat-l{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--text-muted); } /* ── Layout shell ───────────────────────────────────────────────────────────── */ main{ max-width: var(--max); margin:0 auto; padding: var(--gutter); position:relative; z-index:1; } @media (max-width:640px){ h1{ font-size:32px; letter-spacing:-.6px; } .topnav, .subnav, main, .proof{ padding-left:1rem; padding-right:1rem; } } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }