/* ============================================================================ TAPN Entry — Design Tokens ---------------------------------------------------------------------------- Every value below is lifted from a shipped product surface. The comment after each token names its origin so the site can be re-synced when the product moves. Do not add a token here without a product reference. Precedence: attendeeos/registration > Entry kiosk > brand doc See AUDIT.md §4 for the conflicts this file resolves. ========================================================================== */ :root { /* ---- Brand ---------------------------------------------------------- */ --teal: #0fbbb3; /* app_dashboard.css:8 --teal */ --teal-2: #14d4cb; /* app_dashboard.css:9 --teal2 */ --teal-deep: #0a8e88; /* app_dashboard.css:10 --teal-deep */ --navy: #14213D; /* general_TAPN_Info.md:4 — deep brand navy */ /* The darkest teal that still reads as brand teal while carrying white body copy at WCAG AA (4.85:1). --teal-deep only reaches 4.01:1, which passes for large headings but not for the 19px .sub. Used for filled teal surfaces that hold text; never for text itself. */ --teal-ink: #087f7a; --brand-grad: linear-gradient(135deg, var(--teal), var(--teal-2)); /* app_dashboard.css:722 .btn-primary, :359 .nav-item.is-active .nav-icon */ /* ---- Ink ------------------------------------------------------------ */ --ink: #0f172a; /* app_dashboard.css:4 --text */ --ink-80: rgba(15,23,42,.80); --ink-65: rgba(15,23,42,.65); /* app_dashboard.css:1106 */ --muted: #64748b; /* app_dashboard.css:5 --muted */ /* ---- Surfaces ------------------------------------------------------- */ --bg: #f6f9fb; /* app_dashboard.css:2 --bg */ --card: #ffffff; /* app_dashboard.css:3 --card */ --card-glass: rgba(255,255,255,.92); /* app_dashboard.css:672 .card */ --card-veil: rgba(255,255,255,.65); /* app_dashboard.css:827 .event-list__item */ /* The product body background, verbatim. app_dashboard.css:36-38 */ --surface-wash: radial-gradient(900px 500px at 15% 0%, rgba(15,187,179,.12), transparent 60%), linear-gradient(180deg, #ffffff 0%, var(--bg) 65%, #ffffff 100%); /* ---- Lines ---------------------------------------------------------- */ --line: rgba(15,23,42,.08); /* app_dashboard.css:6 --border */ --line-strong: rgba(15,23,42,.12); /* hub/index.php:644 --ev-line-strong */ --line-teal: rgba(15,187,179,.22);/* app_dashboard.css:291 active nav */ /* ---- Status --------------------------------------------------------- */ --ok: #22c55e; /* app_dashboard.css:957 .status-dot.approved */ --ok-bg: rgba(34,197,94,.14); --ok-line: rgba(34,197,94,.25); --ok-ink: #127a3b; --warn: #f59e0b; /* app_dashboard.css:952 .status-dot.pending */ --warn-bg: rgba(245,158,11,.14); --warn-line: rgba(245,158,11,.25); --warn-ink: #9a5b00; --bad: #ef4444; /* hub/index_CSS.css */ --bad-bg: rgba(239,68,68,.12); --bad-line: rgba(239,68,68,.24); --bad-ink: #991b1b; /* signin.php:180 --danger-text */ /* Card tints. app_dashboard.css:784-800 */ --tint-teal: rgba(15,187,179,.12); --tint-orange: rgba(245,158,11,.14); --tint-pink: rgba(236,112,99,.14); --tint-blue: rgba(59,130,246,.12); /* ---- Radius --------------------------------------------------------- */ /* 999px pills are the dominant primitive: 39 uses in app_dashboard.css vs 14 for the next most common value. The product ships five distinct radii (10/14/16/22/24) whose differences are not legible at any size — they read as drift, not as a system. They are collapsed here onto three steps of the space scale: 12 / 16 / 24. Every token name is kept so kiosk.css and studio.css keep resolving; the five names now point at three values. Max shift on any surface is 2px. */ --r-pill: 999px; --r-xs: 12px; /* was 10 — hub/index.php:652 --ev-radius-sm */ --r-sm: 16px; /* was 14 — hub/index.php:653 --ev-radius-md */ --r-md: 16px; /* app_dashboard.css:20 --radius-sm */ --r-lg: 24px; /* was 22 — app_dashboard.css:19 --radius */ --r-xl: 24px; /* signin.php:238 .card */ /* ---- Elevation ------------------------------------------------------ */ --sh-sm: 0 8px 20px rgba(15,23,42,.05); /* hub/index.php:657 */ --sh: 0 10px 28px rgba(15,23,42,.08); /* app_dashboard.css:16 */ --sh-soft: 0 12px 30px rgba(2,6,23,.10); /* app_dashboard.css:17 */ --sh-lg: 0 22px 50px rgba(15,23,42,.12); /* hub/index.php:659 */ --sh-hover: 0 10px 22px rgba(15,23,42,.08); /* app_dashboard.css:717 */ /* Colored elevation is reserved for primary + active elements only. */ --sh-teal: 0 10px 20px rgba(15,187,179,.18);/* app_dashboard.css:361 */ --sh-teal-lg: 0 14px 28px rgba(15,187,179,.10);/* app_dashboard.css:292 */ /* ---- Motion --------------------------------------------------------- */ --ease: cubic-bezier(.22, 1, .36, 1); /* app_dashboard.css:26 */ --ease-std: cubic-bezier(.4, 0, .2, 1); /* hub/index.php:661 */ --t-fast: .12s; /* app_dashboard.css:707 .btn */ --t: .16s; /* app_dashboard.css:257 .nav-item */ --t-slow: .34s; /* app_dashboard.css:50 shell */ /* ---- Type ----------------------------------------------------------- */ /* Body face is signin.php:181's --font-body, loaded in signin.php:168 and onboard.php:68. Display is Nunito, which settles AUDIT.md §4 #3 / §6 Q2 in the brand doc's favour (general_TAPN_Info.md:5) rather than the AttendeeOS pairing's — the face closest to the TAPN wordmark's own rounded letterforms, which §5 #1 already flagged as the argument for it. Fraunces is retired: nothing references it, and it is no longer requested on any page. The kiosk and AttendeeOS still ship the old pairing, so §6 Q2 stays open for them. */ --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Nunito', var(--font); /* ---- Type scale ----------------------------------------------------- Seven sizes total, in three roles. Nothing on a marketing surface may use a size that is not on this list. Display (Nunito) — section-level voice, three steps Body (DM Sans) — reading copy, three steps Label (DM Sans) — kickers, captions, legal, one step Component headings (.card__title, .steps h3) deliberately sit in the Body role, not Display: the display face is reserved for the page's own voice so that scanning h2s down the page reads as a single outline. */ /* The landing hero headline is the one place that outruns the scale: it carries the page on its own, with badge art scattered around it. Every other h1 on the site (404, privacy) stays on --fs-d1. */ --fs-hero: clamp(2.75rem, 6.6vw, 5.25rem); /* 44 → 84 — landing hero */ --fs-d1: clamp(2.5rem, 5.2vw, 3.75rem); /* 40 → 60 — page h1 */ --fs-d2: clamp(1.875rem, 3.4vw, 2.5rem); /* 30 → 40 — section h2 */ --fs-d3: 1.375rem; /* 22 — sub-heads */ --fs-lead: 1.1875rem; /* 19 — section subs, hero sub */ --fs-body: 1.0625rem; /* 17 — all reading copy */ --fs-sm: 0.9375rem; /* 15 — dense copy, controls */ --fs-label: 0.75rem; /* 12 — kickers, captions, legal */ /* ---- Space scale ---------------------------------------------------- One scale, applied everywhere. Before this file, the page carried 15 distinct hand-typed margins (6/8/10/12/14/16/18/20/22/26/28/34/38/40/52) as inline styles, which is what made the rhythm read as accidental. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Layout --------------------------------------------------------- */ --measure: 1180px; /* marketing measure — see AUDIT.md §7 */ --measure-narrow: 760px; --nav-h: 68px; --gutter: clamp(var(--s-5), 5vw, var(--s-6)); /* Section padding is uniform and on the scale: s-8 → s-9. Nothing on the page is allowed to override it — a section that needs to sit closer to its neighbour is the same section. */ --section-y: clamp(var(--s-8), 8vw, var(--s-9)); } /* ============================================================================ Dark mode — follows the OS/browser setting, no toggle. Re-points the same semantic tokens the light theme uses, so every component that reads ink / muted / bg / card / line already re-themes for free. Brand teal and the status ramps are left alone: they were picked to sit on white, but they read fine on the dark navy below too. Scoped-token surfaces are deliberately excluded: .kiosk (kiosk.css) is a photograph of a physical device screen and stays lit regardless of page theme, same as an embedded product screenshot would. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --ink: #e7edf5; --ink-80: rgba(231,237,245,.80); --ink-65: rgba(231,237,245,.65); --muted: #93a1b8; --bg: #0b1220; --card: #121a2c; --card-glass: rgba(18,26,44,.90); --card-veil: rgba(18,26,44,.65); --surface-wash: radial-gradient(900px 500px at 15% 0%, rgba(15,187,179,.10), transparent 60%), linear-gradient(180deg, #0a1120 0%, var(--bg) 65%, #0a1120 100%); --line: rgba(231,237,245,.10); --line-strong: rgba(231,237,245,.16); --line-teal: rgba(15,187,179,.32); --tint-teal: rgba(15,187,179,.16); --tint-orange: rgba(245,158,11,.16); --tint-pink: rgba(236,112,99,.16); --tint-blue: rgba(59,130,246,.16); --sh-sm: 0 8px 20px rgba(0,0,0,.28); --sh: 0 10px 28px rgba(0,0,0,.34); --sh-soft: 0 12px 30px rgba(0,0,0,.36); --sh-lg: 0 22px 50px rgba(0,0,0,.46); --sh-hover: 0 10px 22px rgba(0,0,0,.32); } } /* ============================================================================ Entry kiosk tokens — scoped, not global. These describe the 10.1" on-device UI and are used only by the demo section. They intentionally differ from the web tokens (heavier borders, larger targets). The one difference that is NOT intentional is the teal: template.html:27 ships #2EC4B6 where every other surface ships #0fbbb3. v3 renders the demo in the correct brand teal. See AUDIT.md §4 #1. ========================================================================== */ .kiosk { --k-teal: var(--teal); --k-teal-dk: var(--teal-deep); --k-ink: #111; /* template.html:28 --ink */ --k-muted: #6b7280; /* template.html:28 --muted */ --k-line: #e5e7eb; /* template.html:29 --border */ --k-bg: #fff; --k-sh: 0 2px 14px rgba(0,0,0,.07); /* template.html:30 */ --k-sh-lg: 0 8px 40px rgba(0,0,0,.13); /* template.html:31 */ --k-glow: 0 4px 20px rgba(15,187,179,.38); /* template.html:175, retinted */ --k-border-w: 2px; /* touch surfaces use 2px, web uses 1px */ --k-target: 44px; /* template.html:113 min key size */ }