/* ── Auth & Onboarding ── * * Styles for the authentication flow (login, registration, magic links) * and the onboarding wizard (restaurant setup, slug preview). * Loaded via stylesheet_link_tag in application.html.erb. */ .auth-flash { font-weight: 600; margin-bottom: var(--space-4); } .auth-flash--alert { background: var(--color-honey-light); border: 1px solid var(--color-honey); } .auth-flash--notice { background: var(--color-secondary-light); border: 1px solid var(--color-secondary); } .auth-shell { --gradient-honey: oklch(0.92 0.055 86 / 0.10); --gradient-mist: oklch(0.86 0.035 218 / 0.12); --gradient-sage: oklch(0.9 0.05 120 / 0.08); align-items: center; background: radial-gradient(ellipse 80% 60% at 85% 20%, var(--gradient-honey), transparent), radial-gradient(ellipse 70% 70% at 15% 80%, var(--gradient-mist), transparent), radial-gradient(ellipse 50% 50% at 50% 50%, var(--gradient-sage), transparent), var(--color-bg); background-attachment: fixed; display: grid; justify-items: center; min-height: 100vh; padding: var(--space-5); transition: --gradient-honey 600ms ease, --gradient-mist 600ms ease, --gradient-sage 600ms ease; } /* Semantic color zones — values override the three gradient custom properties. The @property declarations that make these animatable live in application.css. */ /* Default form/input state — same values as bare .auth-shell (honey-warm) */ .auth-shell--input { --gradient-honey: oklch(0.92 0.055 86 / 0.10); --gradient-mist: oklch(0.86 0.035 218 / 0.12); --gradient-sage: oklch(0.9 0.05 120 / 0.08); } /* Magic link interstitial / wait state — sage becomes primary */ .auth-shell--wait { --gradient-honey: oklch(0.92 0.055 86 / 0.04); --gradient-mist: oklch(0.86 0.035 218 / 0.10); --gradient-sage: oklch(0.9 0.05 120 / 0.15); } /* Completion / success state — deep green tones */ .auth-shell--complete { --gradient-honey: oklch(0.92 0.055 86 / 0.03); --gradient-mist: oklch(0.86 0.035 218 / 0.06); --gradient-sage: oklch(0.9 0.05 120 / 0.18); } /* Admin first-load completion zone — applied via data-zone="complete" on when session[:welcome_burst] is present. Static gradient (no transition needed). */ body[data-zone="complete"] .admin-body { background: radial-gradient(ellipse 80% 60% at 85% 20%, oklch(0.92 0.055 86 / 0.03), transparent), radial-gradient(ellipse 70% 70% at 15% 80%, oklch(0.86 0.035 218 / 0.06), transparent), radial-gradient(ellipse 50% 50% at 50% 50%, oklch(0.9 0.05 120 / 0.18), transparent), var(--color-surface-raised); } .auth-card { /* same squared-paper grid as the public menu-sheet — a fresh sheet to fill in */ background: linear-gradient(color-mix(in oklch, var(--color-border) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--color-border) 11%, transparent) 1px, transparent 1px), oklch(0.99 0.008 82 / 0.85); background-size: 2.25rem 2.25rem, 2.25rem 2.25rem, auto; border: 1px solid oklch(0.8 0.028 110 / 0.4); border-radius: var(--radius-lg); display: grid; gap: var(--space-5); max-width: 24rem; opacity: 1; padding: var(--space-8) var(--space-7); position: relative; transform: translateY(0) scale(1); transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1); view-transition-name: auth-card; width: 100%; } /* the menu-sheet's pin-hole dots, echoed on the auth card */ .auth-card::after { background: radial-gradient(circle, color-mix(in oklch, var(--color-border) 72%, transparent) 0 0.12rem, transparent 0.13rem), radial-gradient(circle, color-mix(in oklch, var(--color-border) 72%, transparent) 0 0.12rem, transparent 0.13rem); background-position: left center, right center; background-repeat: no-repeat; background-size: 1rem 1rem; content: ""; height: 1rem; inset: var(--space-4) var(--space-5) auto; opacity: 0.6; pointer-events: none; position: absolute; } @starting-style { .auth-card { opacity: 0; transform: translateY(12px) scale(0.98); } } @supports (backdrop-filter: blur(1px)) { .auth-card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .auth-back { color: var(--color-text-muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; } .auth-back:hover { color: var(--color-accent); } .auth-card h1 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .auth-form { display: grid; gap: var(--space-5); } .auth-field-group { display: grid; gap: var(--space-2); } .auth-label { color: var(--color-text-muted); font-size: 0.875rem; font-weight: 700; } .auth-field { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); line-height: 1.35; min-height: var(--touch-target); padding: 0.75rem 1rem; transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out; width: 100%; } .auth-field:user-valid { border-color: var(--color-secondary); } .auth-field:user-invalid { background-color: var(--color-danger-light); border-color: var(--color-danger); } .auth-field:focus { border-color: var(--color-accent); outline: 3px solid var(--color-accent-light); } .auth-submit { align-items: center; background: var(--color-accent); border: 0; border-radius: var(--radius-round); color: var(--color-inverse-text); cursor: pointer; display: inline-grid; font-family: inherit; font-size: 0.75rem; font-weight: 700; justify-content: center; letter-spacing: 0.08em; line-height: 1; min-height: var(--touch-target); padding: var(--space-3) var(--space-6); text-transform: uppercase; transition: background-color 150ms ease-out, transform 150ms ease-out; width: 100%; } .auth-submit:hover { background: var(--color-accent-hover); transform: translateY(-1px); } .auth-submit:active { transform: translateY(1px) scale(0.99); } .auth-submit:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .auth-card__footer { color: var(--color-text-muted); font-size: 0.9rem; } .auth-card__footer a { color: var(--color-accent); font-weight: 600; text-decoration-color: color-mix(in oklch, var(--color-accent) 40%, transparent); text-underline-offset: 3px; } .auth-card__footer a:hover { text-decoration-color: var(--color-accent); } .auth-link { color: var(--color-text-muted); font-size: 0.875rem; text-decoration: none; } .auth-link:hover { color: var(--color-accent); } .auth-hint { color: var(--color-text-muted); font-size: 0.875rem; margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); } .auth-or { align-items: center; display: grid; gap: var(--space-3); grid-template-columns: 1fr auto 1fr; } .auth-or::before, .auth-or::after { background: var(--color-border); content: ""; height: 1px; } .auth-or span { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; } .auth-submit--secondary { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .auth-submit--secondary:hover { background: var(--color-surface-raised); border-color: var(--color-text-muted); color: var(--color-text); } /* ── Animation Utilities ── */ .auth-card > * { opacity: 1; transform: translateY(0); transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } @starting-style { .auth-card > * { opacity: 0; transform: translateY(8px); } } .animate-stagger-1 { transition-delay: 60ms; } .animate-stagger-2 { transition-delay: 120ms; } .animate-stagger-3 { transition-delay: 180ms; } .animate-stagger-4 { transition-delay: 240ms; } .animate-stagger-5 { transition-delay: 300ms; } @keyframes micro-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes micro-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes envelope-flap-lift { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes envelope-letter-rise { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes envelope-check-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes honey-border-flash { 0% { border-color: var(--color-honey); box-shadow: 0 0 0 3px oklch(0.78 0.12 82 / 0.3); } 100% { border-color: oklch(0.8 0.028 110 / 0.4); box-shadow: none; } } @keyframes welcome-pulse { 0% { transform: scale(0); opacity: 0.3; } 100% { transform: scale(3); opacity: 0; } } .auth-card--success { animation: micro-bounce 250ms cubic-bezier(0.16, 1, 0.3, 1), honey-border-flash 600ms ease-out; } .auth-card--error { animation: micro-shake 300ms ease-out; } /* ── Auth Intro ── */ .auth-intro { color: var(--color-text-muted); font-family: var(--font-heading); font-size: 1.125rem; font-style: italic; line-height: 1.4; margin: 0; } /* ── Slug Preview ── */ .slug-preview { display: grid; gap: var(--space-3); margin-top: calc(-1 * var(--space-2)); } .slug-preview__name { background-image: linear-gradient(var(--color-honey), var(--color-honey)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; display: inline; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; line-height: 1.2; padding-bottom: 2px; transition: background-size 400ms cubic-bezier(0.16, 1, 0.3, 1); } .slug-preview__name--active { background-size: 100% 2px; } .slug-preview__url { color: var(--color-text-muted); font-family: var(--font-body); font-size: 0.875rem; } .slug-preview__ghost { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: var(--space-2); opacity: 0.5; padding: var(--space-4); pointer-events: none; } .slug-preview__ghost-header { border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-size: 1rem; font-weight: 500; margin-bottom: var(--space-3); padding-bottom: var(--space-3); } .slug-preview__ghost-dishes { color: var(--color-text-muted); display: grid; font-size: 0.75rem; gap: var(--space-1); grid-template-columns: 1fr 1fr; } /* ── Type Picker (wizard step 2) ── */ .type-picker { border: 0; display: grid; gap: var(--space-3); margin: 0; padding: 0; } .type-picker__option { align-items: stretch; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; display: grid; padding: var(--space-4); transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; } .type-picker__option:hover { border-color: var(--color-text-muted); transform: translateY(-1px); } .type-picker__option:has(input:checked) { background: var(--color-secondary-light); border-color: var(--color-secondary); } .type-picker__option:focus-within { outline: 3px solid var(--color-accent-light); } .type-picker__content { display: grid; gap: var(--space-1); } .type-picker__name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; } .type-picker__example { color: var(--color-text-muted); font-size: 0.875rem; } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ── Interstitial ── */ .interstitial-envelope { display: flex; justify-content: center; margin-bottom: var(--space-2); } .interstitial-envelope svg { height: 4rem; width: 4rem; } .interstitial-envelope__flap { animation: envelope-flap-lift 320ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards; } .interstitial-envelope__letter { animation: envelope-letter-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both; } .interstitial-envelope__check { animation: envelope-check-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 780ms both; transform-box: fill-box; transform-origin: center; } .interstitial-email { background-image: linear-gradient(var(--color-honey), var(--color-honey)); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 2px; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; padding-bottom: 2px; text-align: center; word-break: break-all; } .interstitial-countdown { color: var(--color-text-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: center; } .interstitial-resend { opacity: 0; transition: opacity 300ms ease-out; } .interstitial-resend--visible { opacity: 1; } /* ── Welcome Burst ── */ .welcome-burst { background: radial-gradient(circle, oklch(0.78 0.12 82 / 0.3), transparent 70%); animation: welcome-pulse 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; height: 100vh; left: 0; pointer-events: none; position: fixed; top: 0; width: 100vw; z-index: var(--z-overlay); } /* ── Reduced Motion ── */ /* application.css already zeroes transition-duration + animation-duration globally. This block handles delays, which are separate properties and not covered there. */ @media (prefers-reduced-motion: reduce) { .auth-shell { transition-duration: 0ms; } .auth-card { transition-duration: 0ms; } .auth-card > * { transition-duration: 0ms; transition-delay: 0ms; } .animate-stagger-1, .animate-stagger-2, .animate-stagger-3, .animate-stagger-4, .animate-stagger-5 { transition-delay: 0ms; } .auth-card--success, .auth-card--error { animation-duration: 0ms; } .interstitial-envelope__flap, .interstitial-envelope__letter, .interstitial-envelope__check { animation-duration: 0ms; animation-delay: 0ms; } .welcome-burst { animation-duration: 0ms; } }