Repository Public
1@import "tailwindcss";23/* SP Calendar design tokens — « SP » family, 2026-11 refresh: layered surfaces, an indigo → violet accent used with4 restraint, generous radii, deep-black dark mode. Phone first. Every text pair is ≥ 4.5:1 in both themes; white on5 any point of the accent gradient is ≥ 5.6:1. */6:root {7 --bg: #f4f4fa; --surface: #ffffff; --elev: #ececf5; --line: #e2e3ee; --line-strong: #c6c8d9;8 --ink: #0b0b14; --mute: #5a5d74;9 --blue: #4338ca; --blue-wash: #ecebff;10 --emerald: #087a55; --emerald-wash: #e1f5ed;11 --warn: #8f5405; --warn-wash: #fbf0dc;12 --danger: #c22a40; --danger-wash: #fbe9ec;13 --primary: #0b0b14; --onprimary: #ffffff;14 --brand: #4f46e5;15 --a1: #4f46e5; --a2: #7c3aed;16 --accent: linear-gradient(135deg, var(--a1) 0%, var(--a2) 100%); --accent-text: linear-gradient(120deg, #4338ca 0%, #7c3aed 60%, #a21caf 100%);17 --glass: rgba(255, 255, 255, .72); --glass-line: rgba(11, 11, 20, .08);18 --glow: 0 10px 28px -8px rgba(79, 70, 229, .55), 0 2px 6px -1px rgba(79, 70, 229, .3);19 --aura-1: rgba(99, 102, 241, .20); --aura-2: rgba(168, 85, 247, .16); --aura-3: rgba(56, 189, 248, .10);20 --e1: 0 1px 2px rgba(11, 11, 20, .04), 0 2px 8px -2px rgba(11, 11, 20, .05);21 --e2: 0 10px 30px -10px rgba(11, 11, 20, .16), 0 2px 8px -2px rgba(11, 11, 20, .06);22 --e3: 0 30px 80px -10px rgba(11, 11, 20, .32);23 --spring: cubic-bezier(.22, 1.2, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);24 --tabbar-h: 66px;25 color-scheme: light;26}27:root[data-theme="dark"] {28 --bg: #050508; --surface: #0f0f17; --elev: #1a1a26; --line: #232333; --line-strong: #3a3a50;29 --ink: #f5f5fb; --mute: #9d9fb8;30 --blue: #a9b4ff; --blue-wash: #1b1a40;31 --emerald: #35e7ac; --emerald-wash: #0d2a22;32 --warn: #f4b65b; --warn-wash: #2c220f;33 --danger: #ff7d88; --danger-wash: #32151a;34 --primary: #f5f5fb; --onprimary: #0b0b14; --accent-text: linear-gradient(120deg, #93a0ff 0%, #b79bff 55%, #e39bff 100%);35 --glass: rgba(15, 15, 23, .72); --glass-line: rgba(255, 255, 255, .09);36 --glow: 0 10px 34px -8px rgba(124, 58, 237, .7), 0 2px 8px -1px rgba(79, 70, 229, .5);37 --aura-1: rgba(99, 102, 241, .28); --aura-2: rgba(168, 85, 247, .20); --aura-3: rgba(56, 189, 248, .08);38 --e1: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .5);39 --e2: 0 14px 34px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05) inset;40 --e3: 0 30px 80px -10px rgba(0, 0, 0, .9);41 color-scheme: dark;42}4344@theme inline {45 --color-bg: var(--bg); --color-surface: var(--surface); --color-elev: var(--elev); --color-line: var(--line); --color-line-strong: var(--line-strong);46 --color-ink: var(--ink); --color-mute: var(--mute);47 --color-blue: var(--blue); --color-blue-wash: var(--blue-wash);48 --color-emerald: var(--emerald); --color-emerald-wash: var(--emerald-wash);49 --color-warn: var(--warn); --color-warn-wash: var(--warn-wash);50 --color-danger: var(--danger); --color-danger-wash: var(--danger-wash);51 --color-primary: var(--primary); --color-onprimary: var(--onprimary);52 --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;53 --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;54 --shadow-e1: var(--e1); --shadow-e2: var(--e2); --shadow-e3: var(--e3); --shadow-glow: var(--glow);55}5657html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 72px; }58body { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.5; font-variant-numeric: tabular-nums; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; }59h1, h2, h3 { letter-spacing: -0.02em; font-family: var(--font-display); }60:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 8px; }61::selection { background: color-mix(in srgb, var(--a1) 24%, transparent); }62button, a, summary, label { touch-action: manipulation; }6364/* Ambient light behind every page: two soft accent glows that stay put while the content scrolls. */65body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;66 background:67 radial-gradient(60vmax 44vmax at 108% -12%, var(--aura-2), transparent 62%),68 radial-gradient(58vmax 42vmax at -14% -8%, var(--aura-1), transparent 60%),69 radial-gradient(50vmax 40vmax at 50% 118%, var(--aura-3), transparent 60%); }7071@layer components {72 .t-title { font-family: var(--font-display); font-size: 32px; line-height: 1.08; font-weight: 750; letter-spacing: -0.035em; text-wrap: balance; }73 .t-headline { font-family: var(--font-display); font-size: 17.5px; font-weight: 650; letter-spacing: -0.018em; }74 .t-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }75 .t-mute { color: var(--mute); }76 .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }77 .t-grad { background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; }78 /* Grid and flex children may shrink below their content width: long unbreakable text never widens the page. */79 main .grid > *, main .flex > * { min-width: 0; }8081 .card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--e1); }82 .card-press { transition: transform .18s var(--ease-out), box-shadow .25s ease, border-color .2s ease; }83 .card-press:active { transform: scale(.985); }84 @media (hover: hover) { .card-press:hover { box-shadow: var(--e2); border-color: var(--line-strong); transform: translateY(-2px); } }85 .glass { background: var(--glass); -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px); }86 .accent-bg { background: var(--accent); color: #fff; }8788 .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 15px; font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em;89 border: 1px solid transparent; cursor: pointer; transition: transform .16s var(--ease-out), opacity .15s ease, background-color .15s ease, box-shadow .2s ease, border-color .15s ease, filter .15s ease; user-select: none; -webkit-user-select: none; text-decoration: none; white-space: nowrap; }90 /* Phones: a long label wraps inside its button instead of spilling out of the card. */91 @media (max-width: 639px) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-top: 7px; padding-bottom: 7px; max-width: 100%; } }92 .btn:active:not(:disabled) { transform: scale(.96); }93 .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }94 .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .22); }95 @media (hover: hover) { .btn-primary:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); } }96 .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--e1); }97 .btn-secondary:hover:not(:disabled) { background: var(--elev); }98 .btn-ghost { background: transparent; color: var(--ink); }99 .btn-ghost:hover:not(:disabled) { background: var(--elev); }100 .btn-danger { background: var(--danger); color: var(--surface); }101 .btn-ok { background: var(--emerald); color: var(--surface); box-shadow: 0 8px 22px -10px var(--emerald); }102 .btn-sm { min-height: 38px; padding: 0 13px; border-radius: 12px; font-size: 14px; }103 .btn-lg { min-height: 54px; padding: 0 22px; border-radius: 18px; font-size: 16.5px; }104 .btn-icon { width: 44px; min-height: 44px; padding: 0; border-radius: 999px; }105106 .input { width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 15px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 16px; transition: border-color .15s ease, box-shadow .2s ease; appearance: none; -webkit-appearance: none; }107 select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7d94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }108 input[type="color"].input { padding: 6px; }109 .input::placeholder { color: var(--mute); opacity: .75; }110 .input:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 22%, transparent); }111 .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }112 textarea.input { min-height: 104px; resize: vertical; }113 input[type="checkbox"] { accent-color: var(--a1); }114 .label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 7px; letter-spacing: -0.005em; }115 .hint { font-size: 13px; color: var(--mute); margin-top: 6px; }116 .error-text { font-size: 13px; color: var(--danger); margin-top: 6px; font-weight: 550; }117118 .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; line-height: 1.5; white-space: nowrap; }119 .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }120 .badge-pending { background: var(--warn-wash); color: var(--warn); }121 .badge-ok { background: var(--emerald-wash); color: var(--emerald); }122 .badge-danger { background: var(--danger-wash); color: var(--danger); }123 .badge-info { background: var(--blue-wash); color: var(--blue); }124 .badge-mute { background: var(--elev); color: var(--mute); }125 .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--elev); color: var(--ink); white-space: nowrap; }126127 .notice { border-radius: 18px; padding: 13px 15px; font-size: 14.5px; line-height: 1.45; display: flex; gap: 11px; align-items: flex-start; }128 .notice-warn { background: var(--warn-wash); color: var(--warn); }129 .notice-danger { background: var(--danger-wash); color: var(--danger); }130 .notice-ok { background: var(--emerald-wash); color: var(--emerald); }131 .notice-info { background: var(--blue-wash); color: var(--blue); }132 .hairline { border-top: 1px solid var(--line); }133 .skeleton { background: linear-gradient(100deg, var(--elev) 20%, color-mix(in srgb, var(--elev) 40%, var(--surface)) 40%, var(--elev) 60%); background-size: 220% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 18px; }134135 /* Segmented control: a track with pill buttons; the pressed one lifts. */136 .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 15px; background: var(--elev); max-width: 100%; overflow-x: auto; scrollbar-width: none; }137 .seg::-webkit-scrollbar { display: none; }138 .seg-item { flex: 1 0 auto; min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--mute); cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s var(--ease-out); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }139 .seg-item:active { transform: scale(.96); }140 .seg-item[aria-pressed="true"], .seg-item[aria-selected="true"], .seg-item[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(11, 11, 20, .12), 0 0 0 .5px var(--glass-line); }141 /* Filter pills that scroll sideways on a phone. */142 .pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 38px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); transition: transform .15s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }143 .pill:active { transform: scale(.95); }144 .pill[aria-pressed="true"] { background: var(--primary); color: var(--onprimary); border-color: var(--primary); }145 .pill-off { background: transparent; color: var(--mute); border-style: dashed; }146 .scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }147 .scroll-x::-webkit-scrollbar { display: none; }148149 /* iOS-style grouped list. */150 .lgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--e1); overflow: hidden; }151 .lgroup > * + * { border-top: 1px solid var(--line); }152 .row { display: flex; align-items: center; gap: 13px; min-height: 56px; padding: 10px 16px; width: 100%; text-align: left; text-decoration: none; color: inherit; transition: background-color .15s ease; }153 a.row, button.row { cursor: pointer; }154 a.row:active, button.row:active { background: var(--elev); }155 @media (hover: hover) { a.row:hover, button.row:hover { background: color-mix(in srgb, var(--elev) 60%, transparent); } }156 .tile-icon { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--elev); }157158 /* Calendar day cells and time pills of the public picker. */159 .day { position: relative; width: 100%; max-width: 48px; aspect-ratio: 1; min-height: 44px; border-radius: 16px; font-size: 16px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s var(--spring), background-color .18s ease, color .18s ease, box-shadow .2s ease; }160 .day:disabled { color: var(--mute); font-weight: 450; opacity: .5; cursor: default; }161 .day-open { background: var(--blue-wash); color: var(--blue); cursor: pointer; }162 .day-open:active { transform: scale(.9); }163 @media (hover: hover) { .day-open:hover { box-shadow: inset 0 0 0 1.5px var(--a1); } }164 .day-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 999px; background: currentColor; }165 .day[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: var(--glow); transform: scale(1.06); }166 .slot { width: 100%; min-height: 52px; border-radius: 16px; font-weight: 650; font-size: 16px; cursor: pointer; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--e1); transition: transform .16s var(--spring), border-color .15s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease; }167 .slot:active { transform: scale(.94); }168 @media (hover: hover) { .slot:hover { border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 16%, transparent); } }169 .slot[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; box-shadow: var(--glow); }170171 /* Date block: month over a large day number. */172 .dateblock { width: 54px; flex-shrink: 0; border-radius: 16px; overflow: hidden; text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }173 .dateblock > :first-child { display: block; font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; padding: 3px 0 2px; background: var(--accent); color: #fff; }174 .dateblock > :last-child { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 750; line-height: 1; letter-spacing: -0.03em; padding: 6px 0 8px; }175176 .avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px; font-weight: 700; color: #fff; background: var(--accent); letter-spacing: -0.02em; user-select: none; }177 .ring-accent { padding: 3px; border-radius: 999px; background: var(--accent); box-shadow: var(--glow); display: inline-flex; }178 .ring-accent > * { border: 3px solid var(--surface); border-radius: 999px; }179180 .scrim { position: fixed; inset: 0; background: rgba(5, 5, 10, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 50; animation: fade .25s ease both; }181 .sheet { position: fixed; z-index: 51; background: var(--surface); box-shadow: var(--e3); border: 1px solid var(--line); animation: sheet-up .42s var(--ease-out) backwards; }182 @media (min-width: 640px) { .sheet { animation: pop .3s var(--ease-out) backwards; } }183 .grabber { width: 38px; height: 5px; border-radius: 999px; background: var(--line-strong); margin: 8px auto 0; }184185 /* Bottom tab bar of the admin area: a floating glass capsule above the home indicator. */186 .tabbar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); height: var(--tabbar-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px; border-radius: 26px; border: 1px solid var(--glass-line); box-shadow: 0 18px 40px -12px rgba(11, 11, 20, .35), 0 2px 8px rgba(11, 11, 20, .08); }187 .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 21px; font-size: 10.5px; font-weight: 650; letter-spacing: -0.005em; color: var(--mute); text-decoration: none; cursor: pointer; transition: color .2s ease, background-color .25s ease, transform .16s var(--ease-out); }188 .tab:active { transform: scale(.92); }189 .tab[aria-current="page"], .tab[data-active="true"] { color: var(--blue); background: color-mix(in srgb, var(--a1) 13%, transparent); }190 .tab-count { position: absolute; top: 5px; left: calc(50% + 7px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: var(--surface); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }191192 .navlink { display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 44px; border-radius: 14px; font-weight: 600; color: var(--mute); text-decoration: none; cursor: pointer; text-align: left; transition: background-color .15s ease, color .15s ease; }193 .navlink:hover { background: var(--elev); color: var(--ink); }194 .navlink[aria-current="page"] { background: color-mix(in srgb, var(--a1) 12%, transparent); color: var(--blue); }195196 /* Hero panel painted with the accent: next appointment, confirmation ticket. */197 .hero { position: relative; overflow: hidden; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #7e22ce 100%); box-shadow: var(--glow); isolation: isolate; }198 .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%), radial-gradient(90% 80% at 0% 110%, rgba(56, 189, 248, .28), transparent 60%); }199 .hero .hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 650; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }200 .hero .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; background: #fff; color: #2e1f8f; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .16s var(--ease-out); }201 .hero .hero-btn:active { transform: scale(.96); }202 .hero .hero-btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; }203204 /* Sticky action bar that hugs the bottom of the viewport on phones. */205 .actionbar { position: sticky; bottom: 0; z-index: 30; margin: 0 -20px -20px; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-line); border-radius: 0 0 28px 28px; }206 @media (min-width: 640px) { .actionbar { margin: 0 -28px -28px; padding: 14px 28px 18px; } }207208 .stagger > * { animation: rise .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 38ms); }209 /* `backwards`, not `both`: a finished transform animation that still applies would trap position:fixed sheets. */210 .rise { animation: rise .5s var(--ease-out) backwards; }211 .pop { animation: pop .45s var(--spring) backwards; }212}213214@keyframes shimmer { to { background-position: -220% 0; } }215@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }216@keyframes fade { from { opacity: 0; } to { opacity: 1; } }217@keyframes pop { from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(.94); } to { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); } }218@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }219@keyframes draw { to { stroke-dashoffset: 0; } }220@keyframes halo { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }221@keyframes spark { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }222@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }223@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }224225/* Success mark: ring and tick are drawn, a halo expands once, eight sparks fly out. */226.success { position: relative; width: 84px; height: 84px; }227.success > svg { position: relative; z-index: 1; width: 100%; height: 100%; }228.success .ring { stroke-dasharray: 239; stroke-dashoffset: 239; animation: draw .7s var(--ease-out) .1s forwards; }229.success .tick { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s var(--ease-out) .55s forwards; }230.success::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--halo, var(--a1)); animation: halo 1.1s var(--ease-out) .5s both; }231.success i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 999px; background: var(--c, var(--a2)); opacity: 0; animation: spark .9s var(--ease-out) .6s both; }232.floaty { animation: float 5s ease-in-out infinite; }233.live-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; animation: pulse-dot 2s ease-out infinite; }234235/* React <ViewTransition> classes: pages and booking steps cross-fade with a short slide. */236::view-transition-old(.page-out), ::view-transition-old(.step-out) { animation: 140ms ease-in both vt-out; }237::view-transition-new(.page-in) { animation: 320ms var(--ease-out) 90ms both vt-in; }238::view-transition-new(.step-in) { animation: 380ms var(--ease-out) 90ms both vt-step; }239@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }240@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }241@keyframes vt-step { from { opacity: 0; transform: translateX(26px); } }242243@media (prefers-reduced-motion: reduce) {244 *, *::before, *::after { animation: none !important; transition: none !important; }245 .success .ring, .success .tick { stroke-dashoffset: 0; }246 .success::before, .success i { display: none; }247 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }248}249.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }250.safe-b { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }251