/* ============================================================ HORAVELA THEME FLEET (Aug 15, 2026 — Kirk's artistic day) The chassis is Radzen dark.css (the designed look — the CLAUDE.md high-contrast mandate). Each theme below retints the chassis by overriding Radzen CSS variables under a data-theme attribute on . No attribute = MIDNIGHT, the ship's own slate-and-orange. THE ONE RULE OF THE FLEET: themes repaint the CHROME only. The MEANING colors (--rz-info blue-cyan = good path, --rz-warning yellow = trouble, --rz-danger, --rz-success) are NEVER overridden — meaning encoded in color is the colorblind-safe palette and it does not change clothes. Switching: js/theme.js sets the attribute + localStorage; the inline head script in App.razor applies the saved choice BEFORE first paint (no flash of wrong colors). Every accent pairs with an --rz-on-* text color that clears WCAG contrast on that accent. ============================================================ */ /* ---------- SLOT GRID: PHONE THUMBS (Sep 5 mobile pass) ---------- The booking page's time buttons measured 76×28px on a phone — under the 44px thumb standard, mis-taps guaranteed on a 36px row pitch. Under 480px the slot containers become a 3-across grid and every time button grows to 44px tall, full cell width. Desktop keeps Radzen's compact look — this fires only where thumbs do the tapping. The grid gap replaces the rz-mr-2/rz-mb-2 utility margins. */ @media (max-width: 480px) { .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0.75rem; } .slot-grid .rz-button { min-height: 44px; width: 100%; margin: 0 !important; } } /* ---------- THE CHASSIS COAT (the porch washout fix) ---------- Radzen 8 paints the body ONLY when a .rz-layout is present (:root:has(.rz-layout) body { … }). Pages without a RadzenLayout — the landing porch — rendered light text on an unpainted white body, a bug Windows High Contrast hid for weeks. Paint the hull unconditionally. */ body { margin: 0; color: var(--rz-text-color); background-color: var(--rz-body-background-color); } /* Meaning-colored panels speak DARK-on-bright on the dark hulls (Kirk's catch: white text on the teal info banner was mush). The light hulls set these back to white in their own blocks — their meaning colors are deep. */ :root { --rz-on-info: #052a2e; --rz-on-warning: #2b2002; --rz-on-success: #0b2a14; --rz-on-danger: #2b0d0f; } /* THE RE-PLUMB (Kirk's catch: menus + scheduler didn't change clothes). Those components drink from their own named pipes — sidebar text was literally --rz-white, and panel-menu/scheduler use contrast/tertiary text vars the themes never touched. Point the pipes at the themed tokens ONCE; every hull and polarity flows through. */ :root { --rz-text-contrast-color: var(--rz-text-color); --rz-text-tertiary-color: var(--rz-text-secondary-color); --rz-sidebar-color: var(--rz-text-color); --rz-panel-menu-item-hover-background-color: var(--rz-base-700); --rz-panel-menu-item-active-indicator: var(--rz-primary); --rz-scheduler-color: var(--rz-text-color); } /* The fleet flies its flag: every theme's primary runs as a band under the header — the switch is visible on every page, at any magnification, the instant it happens. */ .rz-header { border-bottom: 4px solid var(--rz-primary); } .rz-sidebar { border-right: 2px solid var(--rz-primary-darker); } /* ---------- INPUT BOXES (Kirk's outline spec, Aug 15): border light like the text, interior dark like the hull, rounded corners — the box reads as an OUTLINE, and what you type glows like the border. All from vars, so every theme and polarity dresses its inputs automatically. */ .rz-textbox, .rz-textarea, .rz-dropdown, .rz-spinner { background-color: var(--rz-base-900); color: var(--rz-text-color); border: 1.5px solid var(--rz-text-secondary-color, var(--rz-base-light)); border-radius: 8px; } .rz-textbox:focus, .rz-textarea:focus, .rz-dropdown:focus-within, .rz-spinner:focus-within { border-color: var(--rz-primary); box-shadow: 0 0 0 3px var(--rz-primary-lighter); outline: none; } .rz-textbox::placeholder, .rz-textarea::placeholder { color: var(--rz-text-disabled-color, var(--rz-base-light)); } /* ---------- THE BLUES — deep navy, sky accents ---------- */ :root[data-theme="blues"] { --rz-base-900: #0b1626; --rz-base-800: #13233a; --rz-base-700: #1d3350; --rz-primary: #4fc3f7; --rz-primary-light: #7ad2f9; --rz-primary-lighter: rgba(79, 195, 247, 0.16); --rz-primary-dark: #3bb2e8; --rz-primary-darker: #2e90bd; --rz-on-primary: #08222e; --rz-secondary: #90caf9; --rz-secondary-light: #a8d6fa; --rz-secondary-darker: #5e9fd8; --rz-on-secondary: #0b2239; } /* ---------- SUNSHINE — the fleet's LIGHT ship (Kirk's catch: "pretty dark for sunshine" — the name promises daylight). Warm cream hull, dark text, amber accents. The MEANING colors keep their hues (yellow = trouble, blue-cyan = good) but are darkened to hold WCAG contrast on a light hull — the distinction, not the shade, is the colorblind promise. First light theme on a dark chassis: odd corners get retuned as walks find them. ---------- */ :root[data-theme="sunshine"] { --rz-base-900: #f5eedd; --rz-base-800: #fffbf2; --rz-base-700: #efe5cc; --rz-base-600: #d6c9ac; --rz-base-500: #c4b694; --rz-base-light: #8a7b58; --rz-base-dark: #4a3f26; --rz-text-color: #241c0e; --rz-text-secondary-color: #55462a; --rz-text-title-color: #1c1608; --rz-text-disabled-color: #91805f; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; --rz-primary: #d98e04; --rz-primary-light: #f0a81f; --rz-primary-lighter: rgba(217, 142, 4, 0.14); --rz-primary-dark: #b07404; --rz-primary-darker: #8a5b03; --rz-on-primary: #241a02; --rz-secondary: #7a6636; --rz-secondary-light: #94804e; --rz-secondary-darker: #5c4c26; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; } /* ---------- FOREST — green-black, leaf & sage ---------- */ :root[data-theme="forest"] { --rz-base-900: #0e1a14; --rz-base-800: #16261d; --rz-base-700: #1f3528; --rz-primary: #7fd08d; --rz-primary-light: #9bdca6; --rz-primary-lighter: rgba(127, 208, 141, 0.16); --rz-primary-dark: #6bbe79; --rz-primary-darker: #529a5f; --rz-on-primary: #0a2010; --rz-secondary: #a5d6a7; --rz-secondary-light: #bce1bd; --rz-secondary-darker: #7faf81; --rz-on-secondary: #0e2210; } /* ---------- NEON — the conversation piece (Kirk's spec: "dark purple background with banana yellow text… more of a conversation piece than a usable color schema"). Deep purple hull, banana text everywhere, electric blue second accent. Loud ON PURPOSE — and still WCAG-legal: banana on deep purple clears 12:1. ---------- */ :root[data-theme="neon"] { --rz-base-900: #1a0b2e; --rz-base-800: #241040; --rz-base-700: #321755; --rz-base-600: #4a2680; --rz-base-500: #5c3399; --rz-text-color: #ffe135; --rz-text-secondary-color: #e0c94f; --rz-text-title-color: #fff04d; --rz-text-disabled-color: #a89a52; --rz-primary: #ffe135; --rz-primary-light: #fff35c; --rz-primary-lighter: rgba(255, 225, 53, 0.16); --rz-primary-dark: #efd224; --rz-primary-darker: #c4ab12; --rz-on-primary: #241a00; --rz-secondary: #40c4ff; --rz-secondary-light: #6ed1ff; --rz-secondary-darker: #2f9ac9; --rz-on-secondary: #002233; } /* ---------- DIABLO'S HOUSE — ember charcoal, flame & ember ---------- */ :root[data-theme="diablo"] { --rz-base-900: #1c1214; --rz-base-800: #291a1d; --rz-base-700: #3a2528; --rz-primary: #ff6b5e; --rz-primary-light: #ff8a7e; --rz-primary-lighter: rgba(255, 107, 94, 0.16); --rz-primary-dark: #f05a4d; --rz-primary-darker: #c74a3f; --rz-on-primary: #2b0f0b; --rz-secondary: #ffb74d; --rz-secondary-light: #ffc974; --rz-secondary-darker: #d19335; --rz-on-secondary: #2b1a02; } /* ============================================================ THE INVERTED FLEET (Kirk's ruling, Aug 15: "most of these schemes could be inverted… this doubles the themes"). data-mode="invert" flips each hull's polarity — dark ships get hand-tuned LIGHT variants (same hue family, accents darkened to hold WCAG on a light hull), and Sunshine's invert is her original amber-by-candlelight night self. All light hulls share the darkened meaning-color set (hue kept, shade tuned — the distinction is the promise). ============================================================ */ /* Midnight inverted — light slate, ember orange */ :root[data-theme="midnight"][data-mode="invert"] { --rz-base-900: #f2f4f5; --rz-base-800: #fdfefe; --rz-base-700: #e4e9eb; --rz-base-600: #c6cfd3; --rz-base-500: #aebac0; --rz-base-light: #6b7c84; --rz-base-dark: #35444b; --rz-text-color: #1c282e; --rz-text-secondary-color: #42525a; --rz-text-title-color: #141e24; --rz-text-disabled-color: #8b9ba2; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; --rz-primary: #d14e20; --rz-primary-light: #e86337; --rz-primary-lighter: rgba(209, 78, 32, 0.12); --rz-primary-dark: #b24219; --rz-primary-darker: #8c3413; --rz-on-primary: #ffffff; --rz-secondary: #2c77a0; --rz-secondary-light: #3b9fd5; --rz-secondary-darker: #205876; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; } /* The Blues inverted — sky paper, deep water accents */ :root[data-theme="blues"][data-mode="invert"] { --rz-base-900: #eff5fb; --rz-base-800: #fbfdff; --rz-base-700: #deeaf5; --rz-base-600: #bcd2e4; --rz-base-500: #9fbdd6; --rz-base-light: #5c7a94; --rz-base-dark: #2b4258; --rz-text-color: #102030; --rz-text-secondary-color: #324e68; --rz-text-title-color: #0a1826; --rz-text-disabled-color: #7f9cb8; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; --rz-primary: #1178b4; --rz-primary-light: #1793db; --rz-primary-lighter: rgba(17, 120, 180, 0.12); --rz-primary-dark: #0e6394; --rz-primary-darker: #0b4e74; --rz-on-primary: #ffffff; --rz-secondary: #35648c; --rz-secondary-light: #457fae; --rz-secondary-darker: #274a68; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; } /* Sunshine inverted — her original amber-by-candlelight (meaning colors return to the dark chassis set). */ :root[data-theme="sunshine"][data-mode="invert"] { --rz-base-900: #201a10; --rz-base-800: #2b2415; --rz-base-700: #3a311d; --rz-base-600: #63737a; --rz-base-500: #7b8a8e; --rz-base-light: #a8b4b8; --rz-base-dark: #45565e; --rz-text-color: #f6f7fa; --rz-text-secondary-color: #c9c2ae; --rz-text-title-color: #ffffff; --rz-text-disabled-color: #8a8272; --rz-primary: #ffc94a; --rz-primary-light: #ffd670; --rz-primary-lighter: rgba(255, 201, 74, 0.16); --rz-primary-dark: #f0b83a; --rz-primary-darker: #c69627; --rz-on-primary: #241a02; --rz-secondary: #e8d5b0; --rz-secondary-light: #f0e2c6; --rz-secondary-darker: #b8a785; --rz-on-secondary: #241c0c; --rz-info: #2cc8c8; --rz-warning: #fac152; --rz-danger: #f9777f; --rz-success: #5dbf74; --rz-on-info: #052a2e; --rz-on-warning: #2b2002; --rz-on-success: #0b2a14; --rz-on-danger: #2b0d0f; } /* Forest inverted — morning meadow, deep leaf accents */ :root[data-theme="forest"][data-mode="invert"] { --rz-base-900: #eff6f0; --rz-base-800: #fbfefb; --rz-base-700: #dfede1; --rz-base-600: #bfd8c2; --rz-base-500: #a2c4a6; --rz-base-light: #5e7c64; --rz-base-dark: #2c4232; --rz-text-color: #10200f; --rz-text-secondary-color: #38543e; --rz-text-title-color: #0a180c; --rz-text-disabled-color: #82a088; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; --rz-primary: #2e7d44; --rz-primary-light: #389653; --rz-primary-lighter: rgba(46, 125, 68, 0.12); --rz-primary-dark: #266838; --rz-primary-darker: #1e522c; --rz-on-primary: #ffffff; --rz-secondary: #4c7a52; --rz-secondary-light: #5e9465; --rz-secondary-darker: #395c3e; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; } /* Neon inverted — the banana split: banana-cream hull, deep purple text and accents (the flip of the piece). */ :root[data-theme="neon"][data-mode="invert"] { --rz-base-900: #fdf6d8; --rz-base-800: #fffdf0; --rz-base-700: #f5eab8; --rz-base-600: #dccd8a; --rz-base-500: #c9b76a; --rz-base-light: #6a5a9c; --rz-base-dark: #2a1650; --rz-text-color: #2a1650; --rz-text-secondary-color: #4a3480; --rz-text-title-color: #1e0f3c; --rz-text-disabled-color: #9c8fc4; --rz-primary: #5a2ec0; --rz-primary-light: #6f43d6; --rz-primary-lighter: rgba(90, 46, 192, 0.12); --rz-primary-dark: #4a25a0; --rz-primary-darker: #3a1c7e; --rz-on-primary: #ffe135; --rz-secondary: #8a6d00; --rz-secondary-light: #a88500; --rz-secondary-darker: #6a5400; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; } /* ============================================================ THE DISTILLED THREE (Aug 15 — Kirk handed over three vanilla stylesheets; their palettes are mapped onto the fleet's tokens, contrast-tuned where the originals fell short of WCAG. The promise kept: any stylesheet becomes a hull.) ============================================================ */ /* VIBRANT — from Kirk's "Vibrant Neon" sheet: deep blue-black hull, electric cyan & ultraviolet accents. */ :root[data-theme="vibrant"] { --rz-base-900: #0a0e17; --rz-base-800: #121824; --rz-base-700: #1a2336; --rz-base-600: #2c3a54; --rz-base-500: #3d4f6e; --rz-text-color: #ffffff; --rz-text-secondary-color: #a8b6c8; --rz-text-title-color: #ffffff; --rz-text-disabled-color: #68788c; --rz-primary: #00f0ff; --rz-primary-light: #4ff5ff; --rz-primary-lighter: rgba(0, 240, 255, 0.16); --rz-primary-dark: #00d4e2; --rz-primary-darker: #00a9b4; --rz-on-primary: #001a1c; --rz-secondary: #c65eff; --rz-secondary-light: #d385ff; --rz-secondary-darker: #9a2fd6; --rz-on-secondary: #23003c; } /* Vibrant inverted — cool paper, deep cyan & violet */ :root[data-theme="vibrant"][data-mode="invert"] { --rz-base-900: #f0f4fa; --rz-base-800: #ffffff; --rz-base-700: #e1e9f4; --rz-base-600: #c3d1e4; --rz-base-500: #a5b8d0; --rz-base-light: #55647c; --rz-base-dark: #1c2838; --rz-text-color: #101a28; --rz-text-secondary-color: #3c4e64; --rz-text-title-color: #0a121e; --rz-text-disabled-color: #8ba0b8; --rz-primary: #006e80; --rz-primary-light: #0090a8; --rz-primary-lighter: rgba(0, 110, 128, 0.12); --rz-primary-dark: #005866; --rz-primary-darker: #00434e; --rz-on-primary: #ffffff; --rz-secondary: #7a1fb8; --rz-secondary-light: #9126dd; --rz-secondary-darker: #5c1789; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; } /* EARTHY — from Kirk's "Earthy & Golden" sheet: sand paper, clay & muted gold (accents darkened to hold WCAG). */ :root[data-theme="earthy"] { --rz-base-900: #fbf9f4; --rz-base-800: #ffffff; --rz-base-700: #f3ede0; --rz-base-600: #d8ccb2; --rz-base-500: #c4b596; --rz-base-light: #6e5c48; --rz-base-dark: #3a2f24; --rz-text-color: #2c2520; --rz-text-secondary-color: #55483e; --rz-text-title-color: #201a15; --rz-text-disabled-color: #9c8d7c; --rz-primary: #a34a31; --rz-primary-light: #b85d43; --rz-primary-lighter: rgba(163, 74, 49, 0.12); --rz-primary-dark: #8a3d27; --rz-primary-darker: #6e2f1d; --rz-on-primary: #ffffff; --rz-secondary: #8a6420; --rz-secondary-light: #a87c2c; --rz-secondary-darker: #6a4c16; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; } /* Earthy inverted — evening earth: dark loam, bright clay & gold */ :root[data-theme="earthy"][data-mode="invert"] { --rz-base-900: #241c14; --rz-base-800: #30261b; --rz-base-700: #403425; --rz-base-600: #6a5a44; --rz-base-500: #7d6c54; --rz-base-light: #a8987e; --rz-base-dark: #4a3e2e; --rz-text-color: #f4ede2; --rz-text-secondary-color: #cfc0a8; --rz-text-title-color: #fff8ec; --rz-text-disabled-color: #8f8068; --rz-primary: #e08663; --rz-primary-light: #eda07f; --rz-primary-lighter: rgba(224, 134, 99, 0.16); --rz-primary-dark: #cf7350; --rz-primary-darker: #a85a3c; --rz-on-primary: #2b1207; --rz-secondary: #d9b05e; --rz-secondary-light: #e5c37e; --rz-secondary-darker: #b08c3e; --rz-on-secondary: #241a02; --rz-info: #2cc8c8; --rz-warning: #fac152; --rz-danger: #f9777f; --rz-success: #5dbf74; --rz-on-info: #052a2e; --rz-on-warning: #2b2002; --rz-on-success: #0b2a14; --rz-on-danger: #2b0d0f; } /* PASTEL — from Kirk's "Clean Pastel" sheet: cool canvas, sky-deep blue & garden green. */ :root[data-theme="pastel"] { --rz-base-900: #f8fafc; --rz-base-800: #ffffff; --rz-base-700: #eef2f7; --rz-base-600: #e2e8f0; --rz-base-500: #cbd5e1; --rz-base-light: #5c6b80; --rz-base-dark: #1e293b; --rz-text-color: #2b3a4e; --rz-text-secondary-color: #4c6076; --rz-text-title-color: #0f172a; --rz-text-disabled-color: #94a3b8; --rz-primary: #0369a1; --rz-primary-light: #0284c7; --rz-primary-lighter: rgba(3, 105, 161, 0.10); --rz-primary-dark: #02537f; --rz-primary-darker: #063e5e; --rz-on-primary: #ffffff; --rz-secondary: #15803d; --rz-secondary-light: #16a34a; --rz-secondary-darker: #0f5c2c; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; } /* Pastel inverted — slate night, sky & spring accents */ :root[data-theme="pastel"][data-mode="invert"] { --rz-base-900: #0f172a; --rz-base-800: #182236; --rz-base-700: #223048; --rz-base-600: #33455f; --rz-base-500: #465a76; --rz-base-light: #94a6be; --rz-base-dark: #2b3a52; --rz-text-color: #e8eef6; --rz-text-secondary-color: #b9c7d9; --rz-text-title-color: #ffffff; --rz-text-disabled-color: #7488a0; --rz-primary: #38bdf8; --rz-primary-light: #67cdf9; --rz-primary-lighter: rgba(56, 189, 248, 0.16); --rz-primary-dark: #1fadf0; --rz-primary-darker: #1a8ac2; --rz-on-primary: #06283a; --rz-secondary: #4ade80; --rz-secondary-light: #74e8a3; --rz-secondary-darker: #2fb35f; --rz-on-secondary: #06301c; --rz-info: #2cc8c8; --rz-warning: #fac152; --rz-danger: #f9777f; --rz-success: #5dbf74; --rz-on-info: #052a2e; --rz-on-warning: #2b2002; --rz-on-success: #0b2a14; --rz-on-danger: #2b0d0f; } /* Diablo's House inverted — parchment & dried ember */ :root[data-theme="diablo"][data-mode="invert"] { --rz-base-900: #faf1ef; --rz-base-800: #fffbfa; --rz-base-700: #f2e2de; --rz-base-600: #dfc4be; --rz-base-500: #cda9a1; --rz-base-light: #8a6058; --rz-base-dark: #4c2f29; --rz-text-color: #24110d; --rz-text-secondary-color: #532f27; --rz-text-title-color: #1c0d0a; --rz-text-disabled-color: #a17c72; --rz-on-info: #ffffff; --rz-on-warning: #ffffff; --rz-on-success: #ffffff; --rz-on-danger: #ffffff; --rz-primary: #c43d2e; --rz-primary-light: #de4c3b; --rz-primary-lighter: rgba(196, 61, 46, 0.12); --rz-primary-dark: #a33326; --rz-primary-darker: #7e271d; --rz-on-primary: #ffffff; --rz-secondary: #a5670f; --rz-secondary-light: #c47d17; --rz-secondary-darker: #7e4e0b; --rz-on-secondary: #ffffff; --rz-info: #0e7c7c; --rz-warning: #9c6d00; --rz-danger: #c4313b; --rz-success: #2e7d44; } /* ---------- THE SPLASH FILM (Sep 15, 2026) ---------- The owl scene over the porch: black hull, the picture kept whole (object-fit: contain), and a control bar that is ALWAYS on screen -- no hover, no timeout; Skip visible from frame one. Big labelled buttons, white on black, focus ring in the house good-path blue. z-index clears the theme switcher (10) and Radzen popups; the reconnect banner (max) still wins. Reduced motion: the first-visit overlay never shows, even before the script runs (splash.js also pauses + closes). */ .tl-splash { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; flex-direction: column; } .tl-splash[hidden] { display: none; } .tl-splash video { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; } .tl-splash-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px 16px; background: #000; border-top: 2px solid #555; } .tl-splash-bar button { font-size: 18px; font-weight: 700; min-height: 48px; padding: 10px 24px; border-radius: 8px; border: 2px solid #fff; background: #000; color: #fff; cursor: pointer; } .tl-splash-bar button:focus-visible { outline: 3px solid var(--rz-info); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tl-splash[data-autoplay="1"] { display: none; } }