/* * time-slot public booking page — component styles (full UX overhaul, doc 56). * * Design system (one density; WCAG 2.2 AA is a PRIMARY constraint — many customers are elderly): * - 18px base, ≥44px primary targets, universal visible focus ring (never removed). * - Real labels (never placeholder-only). Availability never conveyed by colour alone. * - Motion is action-feedback / attention / transition only; killed under prefers-reduced-motion. * - Skeleton shimmer for content waits, never spinners. * - prefers-contrast + forced-colors blocks kept. * * Brand: real per-market colours (systems/shared/email-templates/src/brand.ts). --accent = the * market PRIMARY (deep navy / blue) used for primary buttons + selected states (AA on white). * --brand = the bright brand accent, DECORATIVE only (check, day dot, focus halo). Hover/soft * hexes are pre-derived (no runtime colour math). Overridden per [data-market] on . * * Two hard radii, two shadows, one spacing scale. No ad-hoc values. */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-base: 1.125rem; /* 18px — legibility for an elderly audience */ --line-height: 1.55; /* Neutral palette (shared across markets). */ --bg: #eef1f6; --bg-grad-a: #eef1f6; --bg-grad-b: #e6ebf3; --surface: #ffffff; --surface-2: #f4f6fa; --surface-3: #eaeef4; --text: #10141c; /* ~17:1 on surface */ --muted: #4a5563; /* ~7:1 on surface — AA for body */ --border: #d9dee7; /* ≥3:1 vs surface for non-text UI (1.4.11) */ --border-strong: #aab2c0; /* Accent = market PRIMARY. Default = DK (data-market defaults to dk). */ --accent: #000045; --accent-hover: #1a1a5e; --accent-contrast: #ffffff; --accent-soft: #eaeaf1; --brand: #29c4a9; /* decorative only */ --brand-soft: #e7f8f4; --success: #117a3d; --success-soft: #e3f3e9; --danger: #b3261e; /* red on white ~6.4:1 */ --danger-soft: #fbe7e6; --warning: #8a5a00; --warning-soft: #fbf0d9; --radius-sm: 10px; /* controls */ --radius-lg: 18px; /* cards / panels */ --shadow-1: 0 1px 2px rgba(16, 22, 40, 0.06), 0 1px 3px rgba(16, 22, 40, 0.05); --shadow-2: 0 12px 40px rgba(16, 22, 40, 0.14); --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --target: 2.75rem; /* 44px */ --dur: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Per-market brand overrides (real colours; pre-derived hover/soft). ─────────────────── */ [data-market="dk"] { --accent: #000045; --accent-hover: #1a1a5e; --accent-soft: #eaeaf1; --brand: #29c4a9; --brand-soft: #e7f8f4; } [data-market="se"] { --accent: #000045; --accent-hover: #1a1a5e; --accent-soft: #eaeaf1; --brand: #76b82a; --brand-soft: #eff7e3; } [data-market="ie"] { --accent: #0c71c3; --accent-hover: #0a5ea3; --accent-soft: #e7f1fb; --brand: #bb9d6c; --brand-soft: #f5efe1; } [data-market="uk"] { --accent: #0c71c3; --accent-hover: #0a5ea3; --accent-soft: #e7f1fb; --brand: #bb9d6c; --brand-soft: #f5efe1; } /* ── Reset / base ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--text); background: var(--bg); background-image: linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b)); background-attachment: fixed; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, p { margin: 0; } img, svg { max-width: 100%; } [hidden] { display: none !important; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .detail-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Universal visible focus ring (:focus-visible where supported; :focus fallback). */ :focus { outline: 3px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Utilities ──────────────────────────────────────────────────────────────────────────── */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 100; background: var(--accent); color: var(--accent-contrast); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; /* Hidden by its own full height (a fixed offset once leaked a sliver). */ transform: translateY(calc(-100% - var(--space-2) - 6px)); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); } /* ── App chrome: header / footer / progress ─────────────────────────────────────────────── */ .app-header { padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); } .app-header__inner { max-width: 57rem; margin-inline: auto; } .app-logo { display: block; height: 42px; width: auto; max-width: 200px; object-fit: contain; } /* SE/IE/UK lockups are taller than DK's wide wordmark (2.5–3.2:1 vs 5.5:1) — give them more height so the wordmark stays legible at header scale. */ [data-market="se"] .app-logo, [data-market="ie"] .app-logo, [data-market="uk"] .app-logo { height: 52px; } .progress { width: 100%; max-width: 60rem; margin: var(--space-4) auto 0; padding: 0 var(--space-4); } .progress__track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress__fill { height: 100%; width: 33%; border-radius: 999px; background: var(--accent); transition: width var(--dur) var(--ease); } [data-progress-step="1"] .progress__fill { width: 33%; } [data-progress-step="2"] .progress__fill { width: 66%; } [data-progress-step="3"] .progress__fill { width: 100%; } .progress__label { margin-top: var(--space-1); font-size: 1rem; font-weight: 600; color: var(--muted); } /* ── Shell ──────────────────────────────────────────────────────────────────────────────── */ .shell { flex: 1 0 auto; width: 100%; max-width: 60rem; margin: 0 auto; padding: var(--space-4); } /* ── Booker (event-info rail + main) ────────────────────────────────────────────────────── */ .booker { display: grid; grid-template-columns: 1fr; gap: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; } @media (min-width: 56rem) { .booker { grid-template-columns: minmax(240px, 19rem) 1fr; gap: 0; /* A shared floor steadies the three steps; long questions still grow naturally. */ min-height: 46rem; } /* Rail switched off (doc 61 block.eventInfoRail): [hidden] removes the