/* Scoped: every rule applies only to contexts. Tenant booking pages (body.tenant-public) keep their owner-chosen colors. */ /* ============================================================ ZEMMA — Premium dark plum theme override Loads AFTER app.css. Maps existing class structure onto the landing-page design system (#1A1438 plum, violet glow, glass). ============================================================ */ /* ============= 1. Design tokens ============= */ body.zemma-app{ --zm-bg: #1A1438; --zm-bg-2: #221B45; --zm-bg-3: #1F1840; --zm-surface: #2A2356; --zm-surface-2: #322A60; --zm-line: rgba(190, 165, 255, 0.14); --zm-line-strong: rgba(190, 165, 255, 0.28); --zm-ink: #F8F4FF; --zm-ink-soft: #DCD2F3; --zm-ink-mute: #9F94BF; --zm-ink-faint: #6E608F; --zm-violet: #A084FF; --zm-violet-2: #C9B0FF; --zm-magenta: #E89BFF; --zm-pink: #FFB3E6; --zm-success: #6EE7A6; --zm-warn: #F4D88A; --zm-danger: #FF7AB6; --zm-grad-text: linear-gradient(110deg, #FFFFFF 0%, #E0CCFF 38%, #E89BFF 78%, #FFB3E6 100%); --zm-grad-cta: linear-gradient(135deg, #B591FF 0%, #8A5CFF 50%, #6E3CFF 100%); --zm-grad-cta-hover: linear-gradient(135deg, #C5A5FF 0%, #9B6DFF 50%, #7E4CFF 100%); --zm-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.8); --zm-shadow-cta: 0 10px 40px -10px rgba(138, 92, 255, 0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; --zm-radius: 18px; --zm-radius-lg: 26px; --zm-radius-xl: 34px; /* Override app.css's exposed primary tokens */ --color-primary: #8A5CFF !important; --color-secondary: #1A1438 !important; --color-accent: #E89BFF !important; --color-surface: #2A2356 !important; --color-text: #F8F4FF !important; } /* ============= 2. Base & body ============= */ body.zemma-app{ background: var(--zm-bg) !important; color: var(--zm-ink) !important; font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; overflow-x: hidden; } body.zemma-app{ min-height: 100vh; position: relative; display: flex; flex-direction: column; } /* Soft ambient gradient overlay (matches landing) */ body.zemma-app .site-backdrop{ position: fixed; inset: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(160, 120, 255, 0.22), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(232, 155, 255, 0.13), transparent 60%), radial-gradient(800px 800px at 50% 110%, rgba(140, 90, 255, 0.22), transparent 60%) !important; pointer-events: none; z-index: 0; } body.zemma-app::before{ content: none !important; } body.zemma-app main, body.zemma-app header, body.zemma-app footer{ position: relative; z-index: 2; } /* Heading typography */ body.zemma-app h1, body.zemma-app h2, body.zemma-app h3, body.zemma-app h4, body.zemma-app h5, body.zemma-app h6{ font-family: 'Bricolage Grotesque', sans-serif !important; color: var(--zm-ink) !important; letter-spacing: -0.025em; font-weight: 500; } body.zemma-app h1{ font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; } body.zemma-app h2{ font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; } body.zemma-app h3{ font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; } /* Italic accent typography (for serif fragments inside headings) */ body.zemma-app .eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--zm-violet-2) !important; padding: 7px 14px !important; border: 1px solid var(--zm-line-strong) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(160, 132, 255, 0.06), rgba(160, 132, 255, 0.02)); backdrop-filter: blur(8px); width: fit-content; } body.zemma-app .eyebrow::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--zm-magenta); box-shadow: 0 0 12px var(--zm-magenta); } body.zemma-app p{ color: var(--zm-ink-soft); line-height: 1.65; } body.zemma-app small, body.zemma-app .muted-copy{ color: var(--zm-ink-mute) !important; } body.zemma-app a{ color: var(--zm-ink); } body.zemma-app a:hover{ color: var(--zm-violet-2); } /* ============= 3. Topbar (header) ============= */ body.zemma-app .topbar{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(20, 14, 50, 0.6) !important; border-bottom: 1px solid var(--zm-line) !important; box-shadow: none !important; } body.zemma-app .topbar-inner{ padding: 14px 0 !important; } body.zemma-app .brand{ gap: 12px !important; } body.zemma-app .brand-copy strong{ color: var(--zm-ink) !important; font-weight: 500 !important; } body.zemma-app .brand-copy small{ color: var(--zm-ink-mute) !important; } body.zemma-app .brand-mark{ background: var(--zm-grad-cta) !important; color: white !important; box-shadow: var(--zm-shadow-cta) !important; border: none !important; } body.zemma-app .brand-logo-box{ background: transparent !important; border: none !important; box-shadow: none !important; } body.zemma-app .brand-logo-box img{ filter: none; } body.zemma-app .topnav-links a{ color: var(--zm-ink-soft) !important; font-size: 14px !important; font-weight: 500 !important; padding: 8px 14px !important; border-radius: 999px !important; transition: color .25s ease, background .25s ease; } body.zemma-app .topnav-links a:hover{ color: var(--zm-ink) !important; background: rgba(160, 132, 255, 0.10) !important; } /* Lang switcher */ body.zemma-app .lang-switch{ color: var(--zm-ink-mute) !important; font-size: 12px !important; font-family: 'Geist Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; } body.zemma-app .lang-switch a{ padding: 6px 10px !important; border-radius: 999px !important; color: var(--zm-ink-mute) !important; border: 1px solid transparent !important; } body.zemma-app .lang-switch a:hover{ color: var(--zm-ink) !important; } body.zemma-app .lang-switch a.active{ background: rgba(160, 132, 255, 0.15) !important; color: var(--zm-violet-2) !important; border-color: var(--zm-line-strong) !important; } /* Mobile nav toggle */ body.zemma-app .nav-toggle{ background: rgba(255,255,255,0.04) !important; border: 1px solid var(--zm-line-strong) !important; border-radius: 12px !important; } body.zemma-app .nav-toggle span{ background: var(--zm-ink) !important; } @media (max-width: 720px) { body.zemma-app .topnav{ background: rgba(20, 14, 50, 0.96) !important; backdrop-filter: blur(20px); border: 1px solid var(--zm-line-strong) !important; border-radius: 18px !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); } } /* ============= 4. Buttons ============= */ body.zemma-app .button, body.zemma-app button.button{ font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 500 !important; font-size: 14.5px !important; padding: 12px 22px !important; border-radius: 999px !important; letter-spacing: -0.005em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; border: 1px solid transparent !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } body.zemma-app .button-primary{ background: var(--zm-grad-cta) !important; color: #fff !important; box-shadow: var(--zm-shadow-cta) !important; border: none !important; position: relative; overflow: hidden; } body.zemma-app .button-primary::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; pointer-events: none; } body.zemma-app .button-primary:hover::after{ transform: translateX(100%); } body.zemma-app .button-primary:hover{ background: var(--zm-grad-cta-hover) !important; transform: translateY(-1px); box-shadow: 0 14px 50px -10px rgba(138, 92, 255, 0.7), 0 0 0 1px rgba(255,255,255,0.12) inset !important; color: #fff !important; } body.zemma-app .button-secondary, body.zemma-app .button-ghost{ background: rgba(255,255,255,0.03) !important; color: var(--zm-ink) !important; border: 1px solid var(--zm-line-strong) !important; backdrop-filter: blur(6px); } body.zemma-app .button-secondary:hover, body.zemma-app .button-ghost:hover{ background: rgba(255,255,255,0.06) !important; border-color: rgba(168, 132, 255, 0.4) !important; color: var(--zm-ink) !important; } body.zemma-app .button-block{ width: 100%; } body.zemma-app .button-small{ padding: 8px 16px !important; font-size: 13px !important; } /* Disabled state */ body.zemma-app .button[disabled], body.zemma-app button[disabled]{ opacity: 0.5; cursor: not-allowed; transform: none !important; } /* ============= 5. Forms ============= */ body.zemma-app .form-card, body.zemma-app .form-card-premium, body.zemma-app .form-card-wide{ background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)) !important; border: 1px solid var(--zm-line-strong) !important; border-radius: var(--zm-radius-xl) !important; box-shadow: 0 30px 80px -40px rgba(138, 92, 255, 0.35), 0 1px 0 rgba(255,255,255,0.04) inset !important; padding: clamp(28px, 4vw, 44px) !important; color: var(--zm-ink); } body.zemma-app .form-stack{ display: grid; gap: 22px; } body.zemma-app .form-section{ display: grid; gap: 14px; } body.zemma-app .form-section h2{ font-size: 20px !important; font-weight: 500 !important; margin: 0 !important; color: var(--zm-ink) !important; } body.zemma-app .form-section p{ color: var(--zm-ink-mute) !important; font-size: 14px !important; line-height: 1.55; margin: 0; } body.zemma-app .form-section-kicker{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--zm-grad-cta) !important; color: white !important; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; box-shadow: 0 4px 18px -4px rgba(138, 92, 255, 0.7); } body.zemma-app .form-grid{ display: grid; gap: 14px; } body.zemma-app .form-grid.two{ grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { body.zemma-app .form-grid.two{ grid-template-columns: 1fr; } } body.zemma-app .form-two{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.zemma-app .manual-service-picker{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } body.zemma-app .manual-service-option{ display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px solid var(--zm-line); border-radius: var(--zm-radius); background: rgba(255,255,255,0.025); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } body.zemma-app .manual-service-option:hover{ border-color: rgba(168,132,255,0.42); background: rgba(255,255,255,0.045); transform: translateY(-1px); } body.zemma-app .manual-service-option input{ margin-top: 3px; accent-color: var(--zm-violet); } body.zemma-app .manual-service-option span{ display: grid; gap: 5px; } body.zemma-app .manual-service-option strong{ color: var(--zm-ink); font-size: 14px; } body.zemma-app .manual-service-option small{ color: var(--zm-ink-mute); line-height: 1.45; } body.zemma-app .form-five{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } body.zemma-app .settings-flag-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.zemma-app .automation-editor-grid{ display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; } body.zemma-app .automation-editor-card, body.zemma-app .custom-domain-card{ display: grid; gap: 16px; padding: 22px; border-radius: 24px; border: 1px solid var(--zm-line); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); } body.zemma-app .automation-editor-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; } body.zemma-app .automation-editor-head > span{ width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--zm-violet-2); background: rgba(160, 132, 255, 0.12); border: 1px solid var(--zm-line-strong); } body.zemma-app .automation-editor-head h3{ margin: 0 0 5px; color: var(--zm-ink); font-size: 17px; font-weight: 600; } body.zemma-app .automation-editor-head p{ margin: 0; } body.zemma-app .webhook-preview{ display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--zm-line); background: rgba(0,0,0,0.18); } body.zemma-app .webhook-preview span{ font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .webhook-preview code, body.zemma-app .legal-note-card code{ color: var(--zm-violet-2); overflow-wrap: anywhere; } body.zemma-app .media-upload-card{ display: grid; gap: 14px; padding: 18px; border-radius: 22px; border: 1px solid var(--zm-line); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); } body.zemma-app .media-upload-card input[type="file"]{ width: 100%; padding: 12px; border-radius: 16px; border: 1px dashed var(--zm-line-strong); background: rgba(0,0,0,0.18); color: var(--zm-ink-soft); } body.zemma-app .media-preview{ min-height: 150px; border-radius: 18px; border: 1px solid var(--zm-line); background: linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.035) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; display: grid; place-items: center; overflow: hidden; } body.zemma-app .media-preview img{ width: 100%; height: 100%; max-height: 220px; object-fit: cover; } body.zemma-app .media-preview-logo img{ width: auto; height: auto; max-width: 86%; max-height: 140px; object-fit: contain; } body.zemma-app .settings-actions{ display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } /* Admin onboarding wizard */ body.zemma-app .onboarding-wizard-card{ padding: 0 !important; overflow: hidden; } body.zemma-app .onboarding-wizard-form{ gap: 0; } body.zemma-app .onboarding-wizard-grid{ display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); min-height: 740px; } body.zemma-app .onboarding-wizard-rail{ display: grid; align-content: start; gap: 18px; padding: clamp(24px, 3vw, 34px); border-right: 1px solid var(--zm-line); background: radial-gradient(circle at 15% 0%, rgba(232, 155, 255, 0.18), transparent 34%), linear-gradient(180deg, rgba(160, 132, 255, 0.08), rgba(0,0,0,0.06)); } body.zemma-app .onboarding-wizard-rail-head{ display: flex; justify-content: space-between; gap: 14px; align-items: center; } body.zemma-app .onboarding-wizard-rail-head span{ font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .onboarding-wizard-rail-head strong{ font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; font-weight: 400; color: var(--zm-violet-2); } body.zemma-app .onboarding-progress-track{ height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid var(--zm-line); } body.zemma-app .onboarding-progress-track span{ display: block; width: 12.5%; height: 100%; border-radius: inherit; background: var(--zm-grad-cta); box-shadow: 0 0 22px rgba(160, 132, 255, 0.55); transition: width .32s ease; } body.zemma-app .onboarding-step-list{ display: grid; gap: 10px; } body.zemma-app .onboarding-step-tab{ width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num title" "num copy"; column-gap: 12px; row-gap: 3px; text-align: left; padding: 13px 14px; border-radius: 18px; border: 1px solid transparent; background: transparent; color: var(--zm-ink-mute); cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s ease; } body.zemma-app .onboarding-step-tab:hover{ border-color: var(--zm-line); background: rgba(255,255,255,0.035); } body.zemma-app .onboarding-step-tab span{ grid-area: num; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--zm-ink-mute); background: rgba(255,255,255,0.045); border: 1px solid var(--zm-line); } body.zemma-app .onboarding-step-tab strong{ grid-area: title; color: var(--zm-ink-soft); font-size: 14px; font-weight: 600; } body.zemma-app .onboarding-step-tab small{ grid-area: copy; color: var(--zm-ink-mute); font-size: 12px; line-height: 1.35; } body.zemma-app .onboarding-step-tab.is-active{ border-color: rgba(190, 165, 255, 0.45); background: linear-gradient(135deg, rgba(160, 132, 255, 0.16), rgba(232, 155, 255, 0.055)); transform: translateX(3px); } body.zemma-app .onboarding-step-tab.is-active span, body.zemma-app .onboarding-step-tab.is-complete span{ color: #fff; border-color: transparent; background: var(--zm-grad-cta); } body.zemma-app .onboarding-step-tab.is-active strong{ color: var(--zm-ink); } body.zemma-app .onboarding-step-tab.is-complete:not(.is-active) span{ background: rgba(110, 231, 166, 0.18); color: var(--zm-success); border-color: rgba(110, 231, 166, 0.32); } body.zemma-app .onboarding-step-tab.is-locked{ opacity: 0.72; } body.zemma-app .onboarding-rail-card{ display: grid; gap: 8px; margin-top: 4px; padding: 16px; border-radius: 20px; border: 1px solid var(--zm-line); background: radial-gradient(circle at 100% 0%, rgba(232, 155, 255, 0.14), transparent 44%), rgba(0,0,0,0.16); } body.zemma-app .onboarding-rail-card span{ font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .onboarding-rail-card strong{ color: var(--zm-ink); font-size: 16px; overflow-wrap: anywhere; } body.zemma-app .onboarding-rail-card small{ line-height: 1.45; } body.zemma-app .onboarding-wizard-panels{ min-width: 0; padding: clamp(24px, 4vw, 46px); } body.zemma-app .onboarding-wizard-card.is-enhanced .onboarding-wizard-step[hidden]{ display: none !important; } body.zemma-app .onboarding-wizard-step.is-active{ animation: onboardingStepIn .28s ease both; } @keyframes onboardingStepIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } } body.zemma-app .onboarding-wizard-actions{ margin: 0; padding: 20px clamp(24px, 4vw, 46px); border-top: 1px solid var(--zm-line); background: rgba(7, 5, 18, 0.72); backdrop-filter: blur(18px); } body.zemma-app .onboarding-wizard-actions .button{ min-width: 148px; } body.zemma-app .onboarding-review-section{ gap: 18px; } body.zemma-app .onboarding-review-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.zemma-app .onboarding-review-card{ position: relative; overflow: hidden; display: grid; gap: 8px; min-height: 132px; padding: 20px; border-radius: 24px; border: 1px solid var(--zm-line); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)), rgba(0,0,0,0.1); } body.zemma-app .onboarding-review-card::after{ content: ""; position: absolute; width: 160px; height: 160px; right: -64px; top: -74px; border-radius: 50%; background: rgba(160, 132, 255, 0.13); filter: blur(6px); pointer-events: none; } body.zemma-app .onboarding-review-card.is-primary{ border-color: rgba(190, 165, 255, 0.34); background: radial-gradient(circle at 88% 0%, rgba(232, 155, 255, 0.18), transparent 44%), linear-gradient(180deg, rgba(160, 132, 255, 0.12), rgba(255,255,255,0.014)); } body.zemma-app .onboarding-review-card span, body.zemma-app .onboarding-next-steps span{ font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .onboarding-review-card strong{ color: var(--zm-ink); font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; } body.zemma-app .onboarding-review-card small{ color: var(--zm-ink-soft); line-height: 1.45; overflow-wrap: anywhere; } body.zemma-app .onboarding-next-steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--zm-line); border-radius: 24px; overflow: hidden; background: rgba(0,0,0,0.11); } body.zemma-app .onboarding-next-steps div{ display: grid; gap: 8px; padding: 18px; border-right: 1px solid var(--zm-line); } body.zemma-app .onboarding-next-steps div:last-child{ border-right: 0; } body.zemma-app .onboarding-next-steps strong{ color: var(--zm-ink); font-size: 15px; } body.zemma-app .onboarding-next-steps small{ line-height: 1.45; } @media (max-width: 980px) { body.zemma-app .form-two, body.zemma-app .automation-editor-grid{ grid-template-columns: 1fr; } body.zemma-app .form-five, body.zemma-app .settings-flag-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.zemma-app .onboarding-wizard-grid{ grid-template-columns: 1fr; min-height: 0; } body.zemma-app .onboarding-wizard-rail{ border-right: 0; border-bottom: 1px solid var(--zm-line); } body.zemma-app .onboarding-step-list{ grid-template-columns: repeat(4, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 4px; } body.zemma-app .onboarding-step-tab{ min-width: 180px; } body.zemma-app .onboarding-launch-roadmap{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.zemma-app .onboarding-next-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.zemma-app .onboarding-next-steps div:nth-child(2){ border-right: 0; } body.zemma-app .onboarding-next-steps div:nth-child(-n+2){ border-bottom: 1px solid var(--zm-line); } } @media (max-width: 640px) { body.zemma-app .form-two, body.zemma-app .form-five, body.zemma-app .settings-flag-grid{ grid-template-columns: 1fr; } body.zemma-app .onboarding-wizard-rail, body.zemma-app .onboarding-wizard-panels{ padding: 22px; } body.zemma-app .onboarding-step-list{ grid-template-columns: 1fr; overflow: visible; } body.zemma-app .onboarding-step-tab{ min-width: 0; } body.zemma-app .onboarding-wizard-actions{ padding: 18px 22px 22px; } body.zemma-app .onboarding-wizard-actions .button{ flex: 1 1 100%; } body.zemma-app .onboarding-launch-roadmap{ grid-template-columns: 1fr; } body.zemma-app .onboarding-review-grid, body.zemma-app .onboarding-next-steps{ grid-template-columns: 1fr; } body.zemma-app .onboarding-next-steps div{ border-right: 0; border-bottom: 1px solid var(--zm-line); } body.zemma-app .onboarding-next-steps div:last-child{ border-bottom: 0; } } body.zemma-app label{ display: grid; gap: 8px; } body.zemma-app label > span{ font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute) !important; font-weight: 500; } body.zemma-app input[type="text"], body.zemma-app input[type="email"], body.zemma-app input[type="password"], body.zemma-app input[type="number"], body.zemma-app input[type="tel"], body.zemma-app input[type="url"], body.zemma-app input[type="search"], body.zemma-app input[type="date"], body.zemma-app input[type="time"], body.zemma-app input[type="datetime-local"], body.zemma-app select, body.zemma-app textarea{ width: 100%; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid var(--zm-line) !important; background: rgba(0,0,0,0.28) !important; color: var(--zm-ink) !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-size: 14.5px !important; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; -webkit-appearance: none; appearance: none; } body.zemma-app input::placeholder, body.zemma-app textarea::placeholder{ color: var(--zm-ink-faint) !important; } body.zemma-app input:focus, body.zemma-app select:focus, body.zemma-app textarea:focus{ outline: none !important; border-color: rgba(232, 155, 255, 0.55) !important; background: rgba(0,0,0,0.4) !important; box-shadow: 0 0 0 3px rgba(232, 155, 255, 0.12) !important; } body.zemma-app textarea{ min-height: 120px; line-height: 1.55; resize: vertical; } body.zemma-app select{ background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px !important; } body.zemma-app select option{ background: var(--zm-bg-2); color: var(--zm-ink); } /* Inline field (subdomain etc) */ body.zemma-app .inline-field{ display: flex; align-items: center; background: rgba(0,0,0,0.28); border: 1px solid var(--zm-line); border-radius: 12px; padding: 0 14px; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } body.zemma-app .inline-field:focus-within{ border-color: rgba(232, 155, 255, 0.55); background: rgba(0,0,0,0.4); box-shadow: 0 0 0 3px rgba(232, 155, 255, 0.12); } body.zemma-app .inline-field input{ border: 0 !important; background: transparent !important; padding-left: 0 !important; box-shadow: none !important; } body.zemma-app .inline-field small{ color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 12px; white-space: nowrap; } body.zemma-app .field-hint{ font-size: 12px !important; color: var(--zm-ink-mute) !important; margin-top: 4px; } body.zemma-app .field-hint[data-state="checking"]{ color: var(--zm-violet-2) !important; } body.zemma-app .field-hint[data-state="available"]{ color: var(--zm-success) !important; } body.zemma-app .field-hint[data-state="taken"]{ color: var(--zm-danger) !important; } /* Checkboxes */ body.zemma-app .checkbox-row{ display: grid !important; grid-template-columns: auto 1fr !important; gap: 12px !important; align-items: start; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--zm-line); color: var(--zm-ink-soft) !important; font-size: 13.5px; line-height: 1.55; } body.zemma-app .checkbox-row input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--zm-violet); margin: 2px 0 0 0; cursor: pointer; } body.zemma-app .notification-rule-row span{ display: grid; gap: 3px; } body.zemma-app .notification-rule-row strong{ color: var(--zm-ink); font-size: 14px; } body.zemma-app .notification-rule-row small{ color: var(--zm-muted); font-size: 12.5px; line-height: 1.45; } body.zemma-app .onboarding-launch-roadmap{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; } body.zemma-app .onboarding-launch-roadmap article{ border: 1px solid var(--zm-line); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)); display: grid; gap: 8px; } body.zemma-app .onboarding-launch-roadmap span{ font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--zm-violet-2); } body.zemma-app .onboarding-launch-roadmap strong{ color: var(--zm-ink); font-size: 15px; } body.zemma-app .onboarding-launch-roadmap small{ color: var(--zm-ink-mute); line-height: 1.45; } /* Form link row */ body.zemma-app .form-link-row{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13.5px; } body.zemma-app .form-link-row a{ color: var(--zm-violet-2) !important; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } body.zemma-app .form-link-row a:hover{ color: var(--zm-magenta) !important; border-bottom-color: var(--zm-magenta); } /* Auth alt link */ body.zemma-app .auth-alt-link{ display: block; text-align: center; margin-top: 14px; color: var(--zm-ink-mute) !important; font-size: 13.5px; text-decoration: none; } body.zemma-app .auth-alt-link:hover{ color: var(--zm-violet-2) !important; } /* ============= 6. Auth pages (auth-premium, register-wizard) ============= */ body.zemma-app .section.auth-premium{ padding: clamp(40px, 6vw, 84px) 0 clamp(60px, 8vw, 100px); } body.zemma-app .auth-grid{ display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; } @media (max-width: 980px) { body.zemma-app .auth-grid{ grid-template-columns: 1fr; gap: 40px; } } body.zemma-app .auth-panel{ background: transparent; color: var(--zm-ink) !important; padding: 0; border: 0; border-radius: 0; display: grid; gap: 22px; align-content: start; } body.zemma-app .auth-panel h1{ font-size: clamp(36px, 4.4vw, 54px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 8px 0 0 0; color: var(--zm-ink) !important; } body.zemma-app .auth-panel p{ color: var(--zm-ink-soft) !important; font-size: 16px; line-height: 1.65; max-width: 50ch; } /* Proof grid (3 perks) */ body.zemma-app .auth-proof-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; } @media (max-width: 720px) { body.zemma-app .auth-proof-grid{ grid-template-columns: 1fr; } } body.zemma-app .auth-proof-grid > div{ padding: 16px 16px; border: 1px solid var(--zm-line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)); transition: border-color .25s ease, background .25s ease; } body.zemma-app .auth-proof-grid > div:hover{ border-color: var(--zm-line-strong); background: linear-gradient(180deg, rgba(160, 132, 255, 0.08), rgba(255,255,255,0.01)); } body.zemma-app .auth-proof-grid strong{ display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 14.5px; font-weight: 500; color: var(--zm-ink) !important; margin-bottom: 6px; } body.zemma-app .auth-proof-grid span{ font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--zm-ink-mute) !important; } /* Email preview / register plan card */ body.zemma-app .email-preview-card, body.zemma-app .register-plan-card{ margin-top: 24px; padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, rgba(160, 132, 255, 0.18), rgba(232, 155, 255, 0.06)) !important; border: 1px solid rgba(190, 165, 255, 0.3) !important; color: var(--zm-ink) !important; box-shadow: 0 10px 40px -15px rgba(160, 132, 255, 0.4); } body.zemma-app .email-preview-card span, body.zemma-app .register-plan-card span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zm-violet-2) !important; margin-bottom: 6px; } body.zemma-app .email-preview-card strong, body.zemma-app .register-plan-card strong{ display: block; font-family: 'Instrument Serif', serif !important; font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; letter-spacing: -0.01em; } body.zemma-app .email-preview-card small, body.zemma-app .register-plan-card small{ display: block; margin-top: 6px; color: var(--zm-ink-soft) !important; font-size: 13.5px; } /* Register wizard shell */ body.zemma-app .register-wizard-page{ padding-top: clamp(32px, 4vw, 60px); } body.zemma-app .register-wizard-shell{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; } @media (max-width: 980px) { body.zemma-app .register-wizard-shell{ grid-template-columns: 1fr; gap: 36px; } } body.zemma-app .register-wizard-intro{ display: grid; gap: 22px; align-content: start; color: var(--zm-ink) !important; } body.zemma-app .register-wizard-intro h1{ font-size: clamp(34px, 4.2vw, 50px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 8px 0 0 0; color: var(--zm-ink) !important; } body.zemma-app .register-wizard-intro p{ color: var(--zm-ink-soft) !important; max-width: 50ch; font-size: 16px; } body.zemma-app .register-wizard-card{ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)) !important; } /* Wizard heading + progress */ body.zemma-app .wizard-heading{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } body.zemma-app .wizard-time{ font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-violet-2); padding: 6px 12px; border-radius: 999px; background: rgba(160, 132, 255, 0.10); border: 1px solid var(--zm-line-strong); } body.zemma-app .wizard-progress{ display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } body.zemma-app .wizard-step{ flex: 1; min-width: 110px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--zm-line); color: var(--zm-ink-mute) !important; cursor: pointer; transition: all .25s ease; font-family: 'Bricolage Grotesque', sans-serif; text-align: left; } body.zemma-app .wizard-step span{ width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid var(--zm-line); color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 12px; flex-shrink: 0; } body.zemma-app .wizard-step strong{ font-weight: 500; font-size: 13.5px; letter-spacing: -0.01em; color: inherit; } body.zemma-app .wizard-step.is-active{ background: linear-gradient(180deg, rgba(160, 132, 255, 0.15), rgba(160, 132, 255, 0.04)); border-color: rgba(190, 165, 255, 0.4); color: var(--zm-ink) !important; } body.zemma-app .wizard-step.is-active span{ background: var(--zm-grad-cta); color: white; border-color: transparent; box-shadow: 0 4px 18px -4px rgba(138, 92, 255, 0.6); } body.zemma-app .wizard-step.is-complete{ color: var(--zm-violet-2) !important; } body.zemma-app .wizard-step.is-complete span{ background: rgba(110, 231, 166, 0.15); border-color: rgba(110, 231, 166, 0.35); color: var(--zm-success); } /* Wizard panel + section */ body.zemma-app .wizard-panel{ border: 0; padding: 0; margin: 0; min-width: 0; } body.zemma-app .wizard-panel[hidden]{ display: none; } body.zemma-app .wizard-section{ display: grid; gap: 18px; } body.zemma-app .wizard-actions{ display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } body.zemma-app .wizard-actions .button{ flex: 1; min-width: 140px; } body.zemma-app .wizard-actions .button-secondary{ flex: 0 0 auto; min-width: 110px; } /* Legal mini card */ body.zemma-app .legal-mini-card{ padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(232, 155, 255, 0.10), rgba(232, 155, 255, 0.02)); border: 1px solid rgba(232, 155, 255, 0.25); color: var(--zm-ink-soft) !important; } body.zemma-app .legal-mini-card strong{ display: block; color: var(--zm-ink) !important; font-weight: 500; margin-bottom: 6px; font-size: 14.5px; } body.zemma-app .legal-mini-card p{ margin: 0 !important; font-size: 13.5px !important; line-height: 1.55; } /* ============= 7. Page shell + container ============= */ body.zemma-app .page-shell{ flex: 1 0 auto; padding: clamp(24px, 4vw, 48px) 0; } body.zemma-app .container{ width: 100%; max-width: 1240px !important; padding: 0 24px !important; margin: 0 auto !important; } body.zemma-app .section{ padding: clamp(40px, 6vw, 80px) 0 !important; } /* ============= 8. Cards & generic surfaces ============= */ body.zemma-app .note-card, body.zemma-app .legal-card, body.zemma-app .empty-card, body.zemma-app .dashboard-filter-card, body.zemma-app .tenant-highlight, body.zemma-app .platform-console-card, body.zemma-app .product-shot-card, body.zemma-app .product-copy-card, body.zemma-app .platform-plan-pill, body.zemma-app .ticket-detail-card, body.zemma-app .ticket-message, body.zemma-app .staff-card, body.zemma-app .service-row, body.zemma-app .hero-visual-card, body.zemma-app .floating-card, body.zemma-app .chart-card{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)) !important; border: 1px solid var(--zm-line) !important; border-radius: var(--zm-radius-lg) !important; color: var(--zm-ink) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -28px rgba(0,0,0,0.6) !important; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; } body.zemma-app .note-card:hover, body.zemma-app .legal-card:hover, body.zemma-app .staff-card:hover, body.zemma-app .chart-card:hover{ border-color: var(--zm-line-strong) !important; } body.zemma-app .stat-card, body.zemma-app .mini-stat, body.zemma-app .pricing-card, body.zemma-app .tenant-chip{ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important; border: 1px solid var(--zm-line) !important; border-radius: var(--zm-radius-lg) !important; color: var(--zm-ink) !important; padding: 22px 22px !important; } body.zemma-app .stat-card strong, body.zemma-app .mini-stat strong{ font-family: 'Instrument Serif', serif !important; font-style: italic; font-weight: 400; font-size: 36px; line-height: 1; background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; display: block; margin: 4px 0; } body.zemma-app .stat-card small, body.zemma-app .mini-stat small, body.zemma-app .stat-card span, body.zemma-app .mini-stat span{ font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute) !important; } body.zemma-app .price{ font-family: 'Instrument Serif', serif !important; font-style: italic; color: var(--zm-ink) !important; } /* Pricing card */ body.zemma-app .pricing-card{ padding: 28px 26px !important; display: grid; gap: 14px; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; } body.zemma-app .pricing-card:hover{ transform: translateY(-6px); border-color: var(--zm-line-strong) !important; box-shadow: 0 26px 60px -28px rgba(160, 132, 255, 0.55) !important; } /* ============= 9. Tables ============= */ body.zemma-app .table{ width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)) !important; border: 1px solid var(--zm-line) !important; border-radius: var(--zm-radius) !important; overflow: hidden; color: var(--zm-ink) !important; } body.zemma-app .table thead{ background: rgba(160, 132, 255, 0.06); } body.zemma-app .table th, body.zemma-app .table td{ padding: 14px 16px !important; border-bottom: 1px solid var(--zm-line) !important; color: var(--zm-ink) !important; text-align: left; } body.zemma-app .table th{ font-family: 'Geist Mono', monospace !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--zm-ink-mute) !important; font-weight: 500; } body.zemma-app .table tr:last-child td{ border-bottom: 0 !important; } body.zemma-app .table tr:hover td{ background: rgba(160, 132, 255, 0.05); } body.zemma-app .table-meta{ color: var(--zm-ink-mute) !important; } /* Badges */ body.zemma-app .badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px !important; border-radius: 999px !important; font-family: 'Geist Mono', monospace !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase; border: 1px solid transparent; background: rgba(160, 132, 255, 0.12) !important; color: var(--zm-violet-2) !important; border-color: var(--zm-line-strong) !important; } body.zemma-app .badge-accent{ background: rgba(232, 155, 255, 0.14) !important; color: var(--zm-magenta) !important; border-color: rgba(232, 155, 255, 0.35) !important; } body.zemma-app .badge-success{ background: rgba(110, 231, 166, 0.14) !important; color: var(--zm-success) !important; border-color: rgba(110, 231, 166, 0.35) !important; } body.zemma-app .badge-warning{ background: rgba(244, 216, 138, 0.14) !important; color: var(--zm-warn) !important; border-color: rgba(244, 216, 138, 0.35) !important; } body.zemma-app .badge-danger{ background: rgba(255, 122, 182, 0.14) !important; color: var(--zm-danger) !important; border-color: rgba(255, 122, 182, 0.35) !important; } body.zemma-app .mini-badge{ display: inline-flex; padding: 3px 8px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(160, 132, 255, 0.12); color: var(--zm-violet-2); border: 1px solid var(--zm-line-strong); } body.zemma-app .mini-badge-warning{ background: rgba(244, 216, 138, 0.14); color: var(--zm-warn); border-color: rgba(244, 216, 138, 0.35); } /* ============= 9b. Admin launch flow and catalog management ============= */ body.zemma-app .launch-flow-strip{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } body.zemma-app .launch-flow-strip a{ display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num title" "num copy"; gap: 3px 12px; padding: 16px; border-radius: 20px; border: 1px solid var(--zm-line); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); text-decoration: none; color: var(--zm-ink-soft); transition: transform .22s ease, border-color .22s ease, background .22s ease; } body.zemma-app .launch-flow-strip a:hover, body.zemma-app .launch-flow-strip a.is-current{ transform: translateY(-1px); border-color: rgba(190, 165, 255, 0.42); background: radial-gradient(circle at 90% 0%, rgba(232, 155, 255, 0.12), transparent 42%), linear-gradient(180deg, rgba(160, 132, 255, 0.12), rgba(255,255,255,0.014)); color: var(--zm-ink); } body.zemma-app .launch-flow-strip span{ grid-area: num; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--zm-violet-2); background: rgba(160, 132, 255, 0.12); border: 1px solid var(--zm-line-strong); } body.zemma-app .launch-flow-strip strong{ grid-area: title; color: inherit; font-size: 15px; } body.zemma-app .launch-flow-strip small{ grid-area: copy; color: var(--zm-ink-mute); line-height: 1.35; } body.zemma-app .service-summary-strip{ margin-bottom: 22px; } body.zemma-app .management-edit-details{ margin-top: 12px; } body.zemma-app .management-edit-details summary{ display: inline-flex; width: fit-content; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--zm-line); background: rgba(255,255,255,0.035); color: var(--zm-violet-2); font-size: 13px; font-weight: 600; cursor: pointer; } body.zemma-app .management-edit-details summary::-webkit-details-marker{ display: none; } body.zemma-app .management-edit-details[open] summary{ margin-bottom: 12px; border-color: var(--zm-line-strong); } body.zemma-app .management-edit-form{ display: grid; gap: 14px; padding: 16px; border-radius: 20px; border: 1px solid var(--zm-line); background: rgba(0,0,0,0.16); } body.zemma-app .service-management-list{ gap: 12px; } body.zemma-app .service-management-card{ align-items: start; } body.zemma-app .service-management-main{ display: grid; gap: 9px; min-width: 0; } body.zemma-app .service-management-meta{ display: flex; flex-wrap: wrap; gap: 8px; } body.zemma-app .service-management-meta span{ display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.045); border: 1px solid var(--zm-line); color: var(--zm-ink-soft); font-size: 12.5px; } body.zemma-app .service-management-actions{ justify-content: flex-end; } body.zemma-app .employee-edit-row td{ padding-top: 0 !important; border-top: 0 !important; } body.zemma-app .employee-management-details{ margin-top: 0; } body.zemma-app .employee-management-form{ margin-top: 2px; } @media (max-width: 980px) { body.zemma-app .launch-flow-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.zemma-app .launch-flow-strip{ grid-template-columns: 1fr; } body.zemma-app .service-management-actions{ justify-content: flex-start; } } /* ============= 10. Flash messages ============= */ body.zemma-app .flash{ padding: 14px 18px !important; border-radius: 14px !important; margin-bottom: 16px !important; font-size: 14px !important; border: 1px solid transparent !important; } body.zemma-app .flash-info, body.zemma-app .flash-success{ background: rgba(110, 231, 166, 0.10) !important; border-color: rgba(110, 231, 166, 0.30) !important; color: var(--zm-success) !important; } body.zemma-app .flash-error, body.zemma-app .flash-danger{ background: rgba(255, 122, 182, 0.10) !important; border-color: rgba(255, 122, 182, 0.30) !important; color: var(--zm-danger) !important; } body.zemma-app .flash-warning{ background: rgba(244, 216, 138, 0.10) !important; border-color: rgba(244, 216, 138, 0.30) !important; color: var(--zm-warn) !important; } /* ============= 10b. Admin command center ============= */ body.zemma-app .command-hero{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(22px, 4vw, 46px); align-items: stretch; margin-bottom: 22px; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--zm-line-strong); border-radius: var(--zm-radius-xl); background: radial-gradient(780px 360px at 86% 8%, rgba(232, 155, 255, 0.18), transparent 62%), radial-gradient(620px 420px at 8% 16%, rgba(160, 132, 255, 0.15), transparent 62%), linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)); box-shadow: 0 38px 100px -54px rgba(160, 132, 255, 0.75), 0 1px 0 rgba(255,255,255,0.05) inset; overflow: hidden; position: relative; } body.zemma-app .command-hero::after{ content: ""; position: absolute; inset: auto -10% -38% 40%; height: 260px; background: radial-gradient(circle, rgba(138, 92, 255, 0.28), transparent 66%); filter: blur(22px); pointer-events: none; } body.zemma-app .command-hero-copy, body.zemma-app .command-hero-panel{ position: relative; z-index: 1; } body.zemma-app .command-hero-copy{ display: grid; align-content: center; gap: 18px; } body.zemma-app .command-hero-copy h1{ max-width: 760px; margin: 0; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.055em; } body.zemma-app .command-hero-copy p{ max-width: 670px; margin: 0; font-size: clamp(15px, 1.4vw, 17px); } body.zemma-app .command-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } body.zemma-app .command-hero-panel{ display: grid; align-content: space-between; gap: 22px; min-height: 320px; padding: 24px; border-radius: var(--zm-radius-lg); border: 1px solid var(--zm-line); background: rgba(0,0,0,0.22); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } body.zemma-app .command-panel-top{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.zemma-app .command-panel-top strong{ color: var(--zm-ink); font-weight: 500; } body.zemma-app .command-panel-top small{ margin-left: auto; font-family: 'Geist Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; } body.zemma-app .command-status-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--zm-success); box-shadow: 0 0 18px var(--zm-success); } body.zemma-app .command-progress-orb{ position: relative; width: min(210px, 52vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; justify-self: center; background: radial-gradient(circle at 50% 50%, var(--zm-bg) 0 58%, transparent 59%), conic-gradient(var(--zm-violet) var(--progress), rgba(255,255,255,0.08) 0); box-shadow: 0 24px 70px -38px rgba(160, 132, 255, 0.85); } body.zemma-app .command-progress-orb strong{ font-family: 'Instrument Serif', serif; font-size: clamp(42px, 7vw, 70px); font-style: italic; font-weight: 400; line-height: 0.9; background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } body.zemma-app .command-progress-orb span{ position: absolute; top: calc(50% + 42px); left: 50%; transform: translateX(-50%); margin-top: 0; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .command-next-step{ padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.035); border: 1px solid var(--zm-line); } body.zemma-app .command-next-step span, body.zemma-app .command-metric-card span, body.zemma-app .webhook-mini span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute); } body.zemma-app .command-next-step strong{ display: block; margin-top: 6px; color: var(--zm-ink); font-size: 18px; } body.zemma-app .command-next-step p{ margin: 6px 0 0; color: var(--zm-ink-mute); font-size: 13.5px; line-height: 1.5; } body.zemma-app .command-filter-card{ margin-top: 0; } body.zemma-app .command-metrics-grid{ display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } body.zemma-app .command-metric-card, body.zemma-app .command-ops-card{ border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -32px rgba(0,0,0,0.65); } body.zemma-app .command-metric-card{ min-height: 154px; padding: 22px; display: grid; align-content: space-between; gap: 16px; } body.zemma-app .command-metric-card.is-primary{ background: radial-gradient(circle at 94% 0%, rgba(232, 155, 255, 0.18), transparent 48%), linear-gradient(180deg, rgba(160,132,255,0.11), rgba(255,255,255,0.014)); border-color: var(--zm-line-strong); } body.zemma-app .command-metric-card strong{ display: block; font-family: 'Instrument Serif', serif; font-size: clamp(34px, 4vw, 54px); font-style: italic; font-weight: 400; line-height: 0.95; background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } body.zemma-app .command-metric-card small{ color: var(--zm-ink-mute); line-height: 1.45; } body.zemma-app .command-ops-grid{ display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; margin-bottom: 22px; } body.zemma-app .command-ops-card{ padding: clamp(22px, 3vw, 30px); } body.zemma-app .command-card-head{ display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; } body.zemma-app .command-card-head h2{ margin: 12px 0 0; font-size: clamp(24px, 3vw, 34px); } body.zemma-app .command-status-pill{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--zm-line-strong); background: rgba(160, 132, 255, 0.12); color: var(--zm-violet-2); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } body.zemma-app .setup-steps, body.zemma-app .automation-readiness{ display: grid; gap: 10px; } body.zemma-app .setup-step, body.zemma-app .readiness-row{ display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 62px; padding: 12px; border: 1px solid var(--zm-line); border-radius: 18px; background: rgba(255,255,255,0.025); text-decoration: none; } body.zemma-app .setup-step span, body.zemma-app .readiness-row span{ grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--zm-line-strong); color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 10px; } body.zemma-app .setup-step strong, body.zemma-app .readiness-row strong{ color: var(--zm-ink); font-weight: 500; } body.zemma-app .setup-step small{ color: var(--zm-ink-mute); line-height: 1.35; } body.zemma-app .setup-step.is-done span, body.zemma-app .readiness-row.is-done span{ color: var(--zm-success); background: rgba(110, 231, 166, 0.11); border-color: rgba(110, 231, 166, 0.35); } body.zemma-app .command-ai-card{ display: grid; gap: 16px; } body.zemma-app .webhook-mini{ display: grid; gap: 7px; padding: 16px; border-radius: 18px; border: 1px solid var(--zm-line); background: rgba(0,0,0,0.22); } body.zemma-app .webhook-mini strong{ color: var(--zm-ink); } body.zemma-app .webhook-mini code{ color: var(--zm-violet-2); overflow-wrap: anywhere; font-size: 12.5px; } @media (max-width: 980px){ body.zemma-app .command-hero, body.zemma-app .command-ops-grid{ grid-template-columns: 1fr; } body.zemma-app .command-metrics-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ body.zemma-app .command-hero{ padding: 24px; } body.zemma-app .command-metrics-grid{ grid-template-columns: 1fr; } body.zemma-app .command-actions .button{ width: 100%; } body.zemma-app .command-panel-top small{ width: 100%; margin-left: 20px; } } /* ============= 11. Footer ============= */ body.zemma-app .site-footer{ border-top: 1px solid var(--zm-line) !important; background: rgba(20, 14, 50, 0.5) !important; padding: 36px 0 !important; color: var(--zm-ink-mute) !important; flex-shrink: 0; } body.zemma-app .site-footer-inner strong{ color: var(--zm-ink) !important; font-weight: 500 !important; } body.zemma-app .site-footer-inner span{ color: var(--zm-ink-mute) !important; } body.zemma-app .site-footer nav a{ color: var(--zm-ink-mute) !important; margin-left: 18px; font-size: 13.5px; transition: color .2s ease; } body.zemma-app .site-footer nav a:hover{ color: var(--zm-violet-2) !important; } /* ============= 12. Dashboard charts ============= */ body.zemma-app .chart-shell{ border-radius: var(--zm-radius-lg); background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)) !important; border: 1px solid var(--zm-line) !important; padding: 22px; } body.zemma-app .chart-grid-line{ stroke: rgba(190, 165, 255, 0.10) !important; } body.zemma-app .chart-axis{ fill: var(--zm-ink-mute) !important; } body.zemma-app .chart-point{ filter: drop-shadow(0 4px 10px rgba(160,132,255,0.5)); } body.zemma-app .chart-card{ padding: 24px !important; } body.zemma-app .chart-head h3{ color: var(--zm-ink) !important; margin: 0 0 6px; } body.zemma-app .chart-head p{ color: var(--zm-ink-mute) !important; margin: 0; font-size: 13px; } body.zemma-app .chart-legend{ color: var(--zm-ink-mute) !important; } /* ============= 12b. Zemma service admin hosting health ============= */ body.zemma-app .server-health-card{ margin: 22px 0; padding: clamp(22px, 3vw, 30px) !important; overflow: hidden; position: relative; } body.zemma-app .server-health-card::before{ content: ""; position: absolute; inset: -45% -10% auto auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(160,132,255,0.18), transparent 64%); pointer-events: none; } body.zemma-app .server-health-head{ display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; position: relative; z-index: 1; } body.zemma-app .server-health-status{ display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--zm-line); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } body.zemma-app .server-health-layout{ display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.6fr); gap: 18px; margin-top: 22px; position: relative; z-index: 1; } body.zemma-app .server-health-main, body.zemma-app .server-health-metric, body.zemma-app .server-health-recommendation{ border: 1px solid var(--zm-line); background: rgba(255,255,255,0.035); border-radius: 22px; } body.zemma-app .server-health-main{ padding: 22px; display: grid; align-content: start; gap: 10px; } body.zemma-app .server-health-main span, body.zemma-app .server-health-metric span, body.zemma-app .server-health-recommendation span{ color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } body.zemma-app .server-health-main strong{ color: var(--zm-ink); font-family: 'Instrument Serif', serif; font-size: clamp(34px, 4vw, 46px); font-style: italic; font-weight: 400; line-height: 1; } body.zemma-app .server-health-main p, body.zemma-app .server-health-main small, body.zemma-app .server-health-metric small, body.zemma-app .server-health-recommendation small, body.zemma-app .server-health-note{ color: var(--zm-ink-mute); } body.zemma-app .server-health-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.zemma-app .server-health-metric{ padding: 18px; display: grid; gap: 8px; min-height: 132px; } body.zemma-app .server-health-metric strong{ color: var(--zm-ink); font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1; } body.zemma-app .server-health-foot{ display: grid; gap: 14px; margin-top: 16px; position: relative; z-index: 1; } body.zemma-app .server-health-recommendations{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } body.zemma-app .server-health-recommendation{ padding: 16px; display: grid; gap: 6px; } body.zemma-app .server-health-recommendation strong{ color: var(--zm-ink); } body.zemma-app .server-health-level-ok{ border-color: rgba(110,231,166,.32) !important; color: var(--zm-success) !important; } body.zemma-app .server-health-level-warning{ border-color: rgba(251,191,36,.42) !important; color: #fbbf24 !important; } body.zemma-app .server-health-level-critical{ border-color: rgba(248,113,113,.46) !important; color: #f87171 !important; } body.zemma-app .server-health-note{ margin: 0; font-size: 13px; } @media (max-width: 1020px){ body.zemma-app .server-health-layout{ grid-template-columns: 1fr; } } @media (max-width: 720px){ body.zemma-app .server-health-head{ display: grid; } body.zemma-app .server-health-grid{ grid-template-columns: 1fr; } } /* ============= 13. Dashboard filter bar ============= */ body.zemma-app .dashboard-filter-card{ padding: 22px !important; margin-bottom: 22px; } body.zemma-app .dashboard-filter{ display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } body.zemma-app .dashboard-filter-actions{ display: flex; gap: 8px; align-items: center; } /* ============= 14. Hero (marketing) ============= */ body.zemma-app .section-ink, body.zemma-app .marketing-hero, body.zemma-app .marketing-section{ color: var(--zm-ink) !important; } body.zemma-app .marketing-section-head h2, body.zemma-app .marketing-hero h1{ color: var(--zm-ink) !important; } body.zemma-app .marketing-pill{ background: rgba(160, 132, 255, 0.12) !important; color: var(--zm-violet-2) !important; border: 1px solid var(--zm-line-strong) !important; } body.zemma-app .trust-row{ color: var(--zm-ink-mute) !important; } body.zemma-app .steps-grid{ gap: 16px !important; } /* ============= 15. Staff & service grids ============= */ body.zemma-app .staff-grid, body.zemma-app .service-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } body.zemma-app .staff-card{ padding: 22px !important; display: grid; gap: 12px; } body.zemma-app .staff-photo{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--zm-line-strong); } body.zemma-app .staff-photo-fallback{ width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--zm-grad-cta); color: white; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 22px; } body.zemma-app .service-row{ display: flex; justify-content: space-between; align-items: center; padding: 16px 18px !important; gap: 14px; border-radius: var(--zm-radius); } body.zemma-app .service-price{ color: var(--zm-violet-2) !important; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; } body.zemma-app .service-picker{ display: grid; gap: 12px; padding: 16px; border: 1px solid var(--zm-line); border-radius: 18px; background: rgba(255,255,255,0.025); } body.zemma-app .service-picker-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.zemma-app .service-picker-head strong{ color: var(--zm-ink); font-weight: 500; } body.zemma-app .service-picker-head span, body.zemma-app .employee-service-count span{ white-space: nowrap; } body.zemma-app .service-picker-options{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } body.zemma-app .service-picker-options-compact{ grid-template-columns: minmax(220px, 1fr); max-height: 220px; overflow: auto; padding-right: 4px; } body.zemma-app .service-check{ display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px !important; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--zm-line); background: rgba(0,0,0,0.16); color: var(--zm-ink-soft); cursor: pointer; } body.zemma-app .service-check input{ width: 16px; height: 16px; margin-top: 2px; accent-color: var(--zm-violet); } body.zemma-app .service-check span{ font-family: 'Bricolage Grotesque', sans-serif !important; font-size: 13px; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--zm-ink-soft) !important; } body.zemma-app .employee-service-form{ min-width: 260px; display: grid; gap: 10px; } body.zemma-app .employee-service-details{ min-width: 210px; } body.zemma-app .employee-service-details summary{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--zm-line); border-radius: 999px; background: rgba(255,255,255,0.035); cursor: pointer; list-style: none; } body.zemma-app .employee-service-details summary::-webkit-details-marker{ display: none; } body.zemma-app .employee-service-details summary strong{ color: var(--zm-violet-2); font-weight: 500; font-size: 13px; } body.zemma-app .employee-service-details[open] summary{ margin-bottom: 10px; border-color: var(--zm-line-strong); } /* ============= 16. Hours grid ============= */ body.zemma-app .hours-grid{ display: grid; gap: 10px; } body.zemma-app .hour-row{ display: grid !important; grid-template-columns: 110px 1fr 1fr auto !important; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--zm-line); } body.zemma-app .hour-row strong{ color: var(--zm-ink) !important; font-weight: 500; } body.zemma-app .hour-row.hour-row-blocks{ grid-template-columns: 130px 150px minmax(0, 1fr) !important; align-items: start; } body.zemma-app .working-blocks{ display: grid; gap: 8px; } body.zemma-app .working-block{ display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; } body.zemma-app .working-block span{ color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.02em; } @media (max-width: 720px) { body.zemma-app .hour-row{ grid-template-columns: 1fr 1fr; } body.zemma-app .hour-row.hour-row-blocks, body.zemma-app .working-block{ grid-template-columns: 1fr !important; } } /* ============= 17. Tenant highlight (admin overview) ============= */ body.zemma-app .tenant-highlight{ padding: 28px !important; display: grid; grid-template-columns: 80px 1fr auto; gap: 22px; align-items: center; } body.zemma-app .tenant-logo-box{ width: 64px; height: 64px; border-radius: 18px; background: var(--zm-grad-cta) !important; display: grid; place-items: center; color: white !important; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 26px; box-shadow: 0 10px 30px -10px rgba(138, 92, 255, 0.6); } body.zemma-app .tenant-logo-box img{ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ============= 18. Chart legend dots ============= */ body.zemma-app .chart-legend > *{ color: var(--zm-ink-mute) !important; font-size: 12px; } /* ============= 19. Misc ============= */ body.zemma-app hr{ border: 0; border-top: 1px solid var(--zm-line); margin: 24px 0; } body.zemma-app code, body.zemma-app pre{ font-family: 'Geist Mono', ui-monospace, monospace; background: rgba(0,0,0,0.3); color: var(--zm-violet-2); padding: 2px 8px; border-radius: 6px; font-size: 13px; } /* Section separators */ body.zemma-app .section + .section{ border-top: 1px solid var(--zm-line); } /* Fade-in for page content */ @keyframes zmFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body.zemma-app main > .container, body.zemma-app .section, body.zemma-app .auth-grid, body.zemma-app .register-wizard-shell{ animation: zmFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* ============= 20. Mobile polish ============= */ @media (max-width: 720px) { body.zemma-app h1{ font-size: 32px; } body.zemma-app h2{ font-size: 24px; } body.zemma-app .form-card, body.zemma-app .form-card-premium, body.zemma-app .form-card-wide{ padding: 24px 22px !important; } body.zemma-app .section.auth-premium{ padding: 28px 0 56px; } body.zemma-app .auth-panel h1{ font-size: 30px; } body.zemma-app .register-wizard-intro h1{ font-size: 28px; } body.zemma-app .wizard-step{ padding: 10px 12px; min-width: 0; } body.zemma-app .wizard-step strong{ display: none; } body.zemma-app .form-grid.two{ grid-template-columns: 1fr; } body.zemma-app .button{ padding: 12px 18px !important; font-size: 14px !important; } body.zemma-app .container{ padding: 0 18px !important; } body.zemma-app .auth-proof-grid{ grid-template-columns: 1fr; } body.zemma-app .tenant-highlight{ grid-template-columns: 1fr; text-align: center; gap: 14px; } body.zemma-app .tenant-logo-box{ margin: 0 auto; } } /* Small phones */ @media (max-width: 460px) { body.zemma-app h1{ font-size: 28px; } body.zemma-app h2{ font-size: 22px; } body.zemma-app .form-card, body.zemma-app .form-card-premium{ padding: 20px 18px !important; } body.zemma-app .wizard-actions .button{ width: 100%; } } /* ==================================================================== PREMIUM LAYER 2 — Animations, mobile overlay menu, micro-interactions ==================================================================== */ /* ===== Scroll reveal ===== */ body.zemma-app .zm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } body.zemma-app .zm-reveal.zm-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { body.zemma-app .zm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== Topbar — scrolled state shadow ===== */ body.zemma-app .topbar { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } body.zemma-app .topbar.is-scrolled { background: rgba(20, 14, 50, 0.85) !important; box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.5) !important; } /* ===== Mobile menu overlay (replaces simple toggle) ===== */ @media (max-width: 860px) { body.zemma-app .topnav { position: fixed !important; inset: 0 !important; background: rgba(20, 14, 50, 0.96) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 49; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 28px !important; padding: 80px 24px 40px !important; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s ease, visibility .35s ease, transform .4s cubic-bezier(.2, .8, .2, 1) !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; } body.zemma-app.zm-menu-open .topnav, body.zemma-app .topnav.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } body.zemma-app .topnav-links { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100%; max-width: 360px; } body.zemma-app .topnav-links a { display: block !important; text-align: center; padding: 16px 22px !important; font-size: 18px !important; font-weight: 500 !important; border-radius: 14px !important; color: var(--zm-ink) !important; } body.zemma-app .topnav-tools { margin-top: 12px; } body.zemma-app.zm-menu-open { overflow: hidden; } /* Hamburger animation (X transform when open) */ body.zemma-app.zm-menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.zemma-app.zm-menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.zemma-app.zm-menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.zemma-app .nav-toggle span { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; transform-origin: center; } } /* ===== Button ripple ===== */ body.zemma-app .button-primary, body.zemma-app .button-secondary { position: relative; overflow: hidden; } body.zemma-app .zm-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.32); pointer-events: none; transform: scale(0); animation: zmRipple 0.6s ease-out; } @keyframes zmRipple { to { transform: scale(2.4); opacity: 0; } } /* ===== Card hover lift (universal) ===== */ body.zemma-app .command-metric-card, body.zemma-app .command-ops-card, body.zemma-app .stat-card, body.zemma-app .pricing-card, body.zemma-app .staff-card, body.zemma-app .chart-card, body.zemma-app .legal-card, body.zemma-app .note-card { --tilt-x: 0deg; --tilt-y: 0deg; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .35s ease; } body.zemma-app .command-metric-card:hover, body.zemma-app .stat-card:hover, body.zemma-app .pricing-card:hover, body.zemma-app .staff-card:hover, body.zemma-app .chart-card:hover, body.zemma-app .legal-card:hover { transform: translateY(-6px); border-color: var(--zm-line-strong) !important; box-shadow: 0 28px 70px -32px rgba(160, 132, 255, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important; } /* Subtle gradient sheen on metric cards */ body.zemma-app .command-metric-card { position: relative; overflow: hidden; } body.zemma-app .command-metric-card::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(280px 120px at var(--mx, 50%) var(--my, 0%), rgba(232, 155, 255, 0.10), transparent 60%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } body.zemma-app .command-metric-card:hover::before { opacity: 1; } body.zemma-app .command-metric-card.is-primary { background: linear-gradient(135deg, rgba(160, 132, 255, 0.16), rgba(232, 155, 255, 0.06)) !important; border-color: rgba(190, 165, 255, 0.35) !important; } body.zemma-app .command-metric-card.is-primary strong { background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-family: 'Instrument Serif', serif !important; font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 48px); } /* ===== Setup steps (admin dashboard) ===== */ body.zemma-app .setup-step { display: grid !important; grid-template-columns: 32px 1fr !important; grid-template-rows: auto auto !important; gap: 4px 14px !important; align-items: start; padding: 14px 18px !important; border-radius: 14px !important; background: rgba(255,255,255,0.025) !important; border: 1px solid var(--zm-line) !important; color: var(--zm-ink) !important; text-decoration: none; transition: all .25s ease; margin-bottom: 8px; } body.zemma-app .setup-step:hover { background: rgba(160, 132, 255, 0.08) !important; border-color: var(--zm-line-strong) !important; transform: translateX(4px); } body.zemma-app .setup-step > span { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 11px; border: 1px solid var(--zm-line); } body.zemma-app .setup-step.is-done > span { background: rgba(110, 231, 166, 0.15); color: var(--zm-success); border-color: rgba(110, 231, 166, 0.4); } body.zemma-app .setup-step strong { color: var(--zm-ink) !important; font-weight: 500; font-size: 14.5px; letter-spacing: -0.01em; } body.zemma-app .setup-step small { color: var(--zm-ink-mute) !important; font-size: 12.5px; line-height: 1.5; } body.zemma-app .setup-step.is-optional:not(.is-done) > span { width: 34px; border-radius: 999px; color: var(--zm-violet-2); background: rgba(160, 132, 255, 0.11); border-color: rgba(190, 165, 255, 0.28); font-size: 9px; } body.zemma-app .setup-summary-strip, body.zemma-app .command-launch-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } body.zemma-app .setup-summary-strip span, body.zemma-app .setup-summary-strip a, body.zemma-app .command-launch-mini span, body.zemma-app .command-launch-mini a { border: 1px solid var(--zm-line); border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,0.035); color: var(--zm-ink-soft); font-size: 12px; text-decoration: none; } body.zemma-app .command-launch-mini a { color: var(--zm-violet-2); border-color: rgba(190, 165, 255, 0.32); } body.zemma-app .setup-summary-strip a { color: var(--zm-violet-2); border-color: rgba(190, 165, 255, 0.32); } /* ===== Readiness rows (AI import etc.) ===== */ body.zemma-app .readiness-row { display: grid !important; grid-template-columns: 32px 1fr !important; gap: 12px !important; align-items: center; padding: 10px 14px !important; border-radius: 12px !important; background: rgba(255,255,255,0.02); border: 1px solid var(--zm-line); margin-bottom: 6px; transition: background .25s ease, border-color .25s ease; } body.zemma-app .readiness-row.is-done { background: rgba(110, 231, 166, 0.06) !important; border-color: rgba(110, 231, 166, 0.25) !important; } body.zemma-app .readiness-row > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 10px; border: 1px solid var(--zm-line); } body.zemma-app .readiness-row.is-done > span { background: rgba(110, 231, 166, 0.18); color: var(--zm-success); border-color: rgba(110, 231, 166, 0.4); } body.zemma-app .readiness-row strong { color: var(--zm-ink) !important; font-weight: 500; font-size: 14px; } /* ===== Command status pill ===== */ body.zemma-app .command-status-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(160, 132, 255, 0.18), rgba(232, 155, 255, 0.06)); border: 1px solid var(--zm-line-strong); color: var(--zm-violet-2); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } /* ===== Command card head ===== */ body.zemma-app .command-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } body.zemma-app .command-card-head h2 { margin: 4px 0 0 !important; font-size: 20px !important; } body.zemma-app .command-ops-card { padding: clamp(22px, 3vw, 32px) !important; } /* ===== Toast (flash messages turned into toasts) ===== */ body.zemma-app .zm-toast { cursor: pointer; animation: zmToastIn .45s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); } body.zemma-app .zm-toast:hover { transform: translateY(-1px); } body.zemma-app .zm-toast.zm-toast-out { animation: zmToastOut .35s ease both; } @keyframes zmToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes zmToastOut { to { opacity: 0; transform: translateY(-12px); } } /* ===== Empty state (works wherever .empty-card or [data-empty] is used) ===== */ body.zemma-app .empty-card, body.zemma-app [data-empty] { text-align: center; padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px) !important; border: 1px dashed var(--zm-line-strong) !important; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)) !important; border-radius: var(--zm-radius-lg) !important; color: var(--zm-ink-soft) !important; } body.zemma-app .empty-card::before, body.zemma-app [data-empty]::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg, rgba(160, 132, 255, 0.20), rgba(232, 155, 255, 0.08)); border: 1px solid var(--zm-line-strong); background-image: url("data:image/svg+xml;utf8,"), linear-gradient(135deg, rgba(160, 132, 255, 0.20), rgba(232, 155, 255, 0.08)); background-size: 28px, cover; background-position: center, center; background-repeat: no-repeat; } /* ===== Skeleton (use class .zm-skeleton) ===== */ body.zemma-app .zm-skeleton { display: block; background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(190,165,255,0.10) 50%, rgba(255,255,255,0.04) 100%); background-size: 200% 100%; border-radius: 8px; animation: zmSkeleton 1.4s ease-in-out infinite; height: 14px; width: 100%; } @keyframes zmSkeleton { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* ===== Wizard panel transition ===== */ body.zemma-app .wizard-panel { transition: opacity .3s ease; } body.zemma-app .wizard-panel.is-active { animation: zmPanelIn .45s cubic-bezier(.2,.8,.2,1) both; } @keyframes zmPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== Form field focus halo ===== */ body.zemma-app label.zm-field-focus > span { color: var(--zm-violet-2) !important; transition: color .2s ease; } /* ===== Premium chart polish ===== */ body.zemma-app .chart-svg polyline { filter: drop-shadow(0 6px 14px rgba(160, 132, 255, 0.45)); stroke-linecap: round; stroke-linejoin: round; } body.zemma-app .chart-svg polygon { filter: drop-shadow(0 12px 30px rgba(160, 132, 255, 0.18)); } body.zemma-app .chart-shell { background: radial-gradient(540px 200px at 50% 100%, rgba(160, 132, 255, 0.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)) !important; } /* ===== Tables — premium row interactions ===== */ body.zemma-app .table tbody tr { transition: background .2s ease, transform .2s ease; } body.zemma-app .table tbody tr:hover { background: linear-gradient(90deg, rgba(160, 132, 255, 0.06), transparent); } body.zemma-app .table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--zm-violet); } /* ===== Brand brand-mark (when used) glow ===== */ body.zemma-app .brand-mark { transition: box-shadow .25s ease, transform .25s ease; } body.zemma-app .brand:hover .brand-mark { box-shadow: 0 8px 30px -8px rgba(138, 92, 255, 0.8), 0 0 0 1px rgba(255,255,255,0.15) inset !important; transform: scale(1.04); } /* ===== Lang switch active glow ===== */ body.zemma-app .lang-switch a.active { box-shadow: 0 0 0 1px rgba(232, 155, 255, 0.30), 0 6px 16px -8px rgba(160, 132, 255, 0.5); } /* ===== Form submit pulse on focus-within form ===== */ body.zemma-app form:focus-within .button-primary[type="submit"] { box-shadow: 0 14px 50px -10px rgba(138, 92, 255, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; } /* ===== Subtle scrollbar ===== */ body.zemma-app * { scrollbar-width: thin; scrollbar-color: rgba(160, 132, 255, 0.35) transparent; } body.zemma-app *::-webkit-scrollbar { width: 8px; height: 8px; } body.zemma-app *::-webkit-scrollbar-track { background: transparent; } body.zemma-app *::-webkit-scrollbar-thumb { background: rgba(160, 132, 255, 0.30); border-radius: 999px; } body.zemma-app *::-webkit-scrollbar-thumb:hover { background: rgba(160, 132, 255, 0.50); } /* ===== Wizard step number bounce when completes ===== */ body.zemma-app .wizard-step.is-complete span { animation: zmCheckPop .5s cubic-bezier(.2,.8,.2,1) both; } @keyframes zmCheckPop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } /* ===== Login/auth panel — subtle shimmer behind ===== */ body.zemma-app .auth-panel::before { content: ""; position: absolute; inset: -40px -40px auto -40px; height: 240px; background: radial-gradient(420px 200px at 30% 30%, rgba(232, 155, 255, 0.12), transparent 70%); pointer-events: none; z-index: -1; } body.zemma-app .auth-panel { position: relative; } /* ===== Animated underline for inline-card hover ===== */ body.zemma-app .inline-card a, body.zemma-app .form-link-row a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s ease, color .25s ease; border-bottom: 0 !important; } body.zemma-app .inline-card a:hover, body.zemma-app .form-link-row a:hover { background-size: 100% 1px; } /* ===== Branding studio keeps a light client-facing simulation inside the dark admin UI ===== */ body.zemma-app .branding-studio .brand-sim-top small, body.zemma-app .branding-studio .brand-sim-service span { color: rgba(17, 24, 39, 0.58) !important; } body.zemma-app .branding-studio .brand-sim-hero p { color: rgba(17, 24, 39, 0.66) !important; font-size: 14px !important; line-height: 1.55 !important; } body.zemma-app .branding-studio .brand-sim-hero h3 { color: var(--brand-preview-primary) !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; line-height: 0.95 !important; } body.zemma-app .branding-studio .brand-sim-hero span { color: var(--brand-preview-primary) !important; } body.zemma-app .branding-studio .brand-sim-logo span, body.zemma-app .branding-studio .brand-sim-service em { color: var(--brand-preview-primary) !important; } body.zemma-app .branding-studio .brand-sim-slots .is-active, body.zemma-app .branding-studio .brand-sim-hero button { color: #fff !important; } /* ===== Website-style auth: login, register and panel entry screens ===== */ body.zemma-app .website-auth-page { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(34px, 5vw, 78px) !important; } body.zemma-app .website-auth-page::before, body.zemma-app .website-auth-page::after { content: ""; position: absolute; pointer-events: none; border-radius: 999px; filter: blur(20px); z-index: -1; } body.zemma-app .website-auth-page::before { width: 460px; height: 460px; top: 5%; right: 7%; background: rgba(160, 132, 255, 0.16); } body.zemma-app .website-auth-page::after { width: 360px; height: 360px; bottom: 4%; left: 4%; background: rgba(232, 155, 255, 0.1); } body.zemma-app .website-auth-page .auth-grid, body.zemma-app .website-auth-page .register-wizard-shell { position: relative; z-index: 1; gap: clamp(32px, 5vw, 70px) !important; align-items: stretch !important; } body.zemma-app .website-auth-page .auth-panel, body.zemma-app .website-auth-page .register-wizard-intro { position: relative; display: flex !important; min-height: 640px; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(10px, 2vw, 18px) 0 !important; color: var(--zm-ink) !important; } body.zemma-app .website-auth-page .auth-panel::before, body.zemma-app .website-auth-page .register-wizard-intro::before { display: none !important; } body.zemma-app .website-auth-page .auth-panel::after, body.zemma-app .website-auth-page .register-wizard-intro::after { content: ""; position: absolute; inset: auto 10% 24% auto; width: 120px; height: 120px; border-radius: 999px; background: rgba(232, 155, 255, 0.1); filter: blur(8px); z-index: -1; } body.zemma-app .website-auth-page .auth-panel h1, body.zemma-app .website-auth-page .register-wizard-intro h1 { max-width: 9ch; font-size: clamp(48px, 7vw, 88px) !important; line-height: 0.94 !important; letter-spacing: -0.065em !important; font-weight: 500 !important; } body.zemma-app .website-auth-page .auth-panel p, body.zemma-app .website-auth-page .register-wizard-intro p { max-width: 46ch; font-size: 16.5px !important; color: var(--zm-ink-soft) !important; } body.zemma-app .website-auth-page .auth-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.zemma-app .website-auth-page .auth-proof-grid > div { background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 18px 40px -28px rgba(160, 132, 255, 0.5); } body.zemma-app .website-auth-page .form-card, body.zemma-app .website-auth-page .register-wizard-card { align-self: stretch; border-radius: 34px !important; background: linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.018)), radial-gradient(circle at top right, rgba(160, 132, 255, 0.13), transparent 42%) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; box-shadow: 0 34px 90px -44px rgba(138, 92, 255, 0.58), 0 1px 0 rgba(255,255,255,0.06) inset !important; } body.zemma-app .website-auth-page .form-section, body.zemma-app .website-auth-page .wizard-section { border-radius: 24px !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } body.zemma-app .website-auth-page .register-wizard-card .wizard-section { padding: 22px !important; } body.zemma-app .website-auth-page .register-plan-card { margin-top: 0 !important; } body.zemma-app .auth-showcase-card { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px; border-radius: 30px; background: radial-gradient(circle at 86% 6%, rgba(232, 155, 255, 0.18), transparent 30%), linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 28px 80px -40px rgba(160, 132, 255, 0.62), 0 1px 0 rgba(255,255,255,0.08) inset; } body.zemma-app .auth-showcase-glow { position: absolute; width: 180px; height: 180px; top: -70px; right: -50px; border-radius: 999px; background: var(--zm-grad-cta); filter: blur(24px); opacity: 0.24; } body.zemma-app .auth-showcase-top, body.zemma-app .auth-showcase-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; } body.zemma-app .auth-showcase-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, #f7edff, #e8d7ff); color: #311364 !important; font-weight: 800; box-shadow: 0 16px 38px -20px rgba(232, 155, 255, 0.9); } body.zemma-app .auth-showcase-top strong, body.zemma-app .auth-showcase-row strong, body.zemma-app .employee-timeline-preview strong { color: var(--zm-ink) !important; } body.zemma-app .auth-showcase-top small, body.zemma-app .employee-timeline-preview small { display: block; margin-top: 3px; color: var(--zm-ink-mute) !important; } body.zemma-app .auth-showcase-hero { position: relative; z-index: 1; padding: 22px; border-radius: 24px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.08); } body.zemma-app .auth-showcase-hero span { display: inline-flex; margin-bottom: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(232, 155, 255, 0.14); color: var(--zm-pink) !important; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } body.zemma-app .auth-showcase-hero h3 { max-width: 13ch; margin: 0; font-size: clamp(28px, 4.4vw, 44px) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; color: var(--zm-ink) !important; } body.zemma-app .auth-showcase-row { justify-content: space-between; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.052); border: 1px solid rgba(255, 255, 255, 0.08); } body.zemma-app .auth-showcase-row span, body.zemma-app .auth-showcase-row em { border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 11px; } body.zemma-app .auth-showcase-row span { padding: 8px 10px; background: rgba(255, 255, 255, 0.08); color: var(--zm-ink-soft) !important; } body.zemma-app .auth-showcase-row em { padding: 8px 10px; background: rgba(71, 255, 191, 0.12); color: #83ffd5 !important; font-style: normal; } body.zemma-app .tenant-auth-showcase .auth-showcase-mark { background: color-mix(in srgb, var(--color-secondary) 82%, #ffffff); color: var(--color-primary) !important; } body.zemma-app .employee-timeline-preview { position: relative; z-index: 1; display: grid; gap: 10px; } body.zemma-app .employee-now-pill { justify-self: start; padding: 8px 11px; border-radius: 999px; background: rgba(71, 255, 191, 0.12); color: #83ffd5 !important; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; } body.zemma-app .employee-timeline-preview > div { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.052); border: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 980px) { body.zemma-app .website-auth-page .auth-panel, body.zemma-app .website-auth-page .register-wizard-intro { min-height: auto; } } @media (max-width: 720px) { body.zemma-app .website-auth-page .auth-panel h1, body.zemma-app .website-auth-page .register-wizard-intro h1 { max-width: 10ch; font-size: clamp(42px, 13vw, 58px) !important; } body.zemma-app .website-auth-page .auth-proof-grid { grid-template-columns: 1fr; } body.zemma-app .auth-showcase-card { padding: 16px; border-radius: 24px; } body.zemma-app .auth-showcase-row { flex-wrap: wrap; } } /* ===== Mobile fine-tune ===== */ @media (max-width: 720px) { body.zemma-app .zm-toast { font-size: 13.5px !important; } body.zemma-app .command-metric-card { padding: 18px 18px !important; } body.zemma-app .setup-step { padding: 12px 14px !important; } body.zemma-app .nav-toggle { z-index: 60; position: relative; } } /* End premium layer 2 */ /* ============================================================ AUTH v2 — Premium polish for login, register, forgot, reset. Layered on top of website-auth-page tokens. Scoped to .auth-v2. ============================================================ */ body.zemma-app .auth-v2 { padding-top: clamp(48px, 7vw, 96px) !important; padding-bottom: clamp(48px, 6vw, 88px) !important; } body.zemma-app .auth-v2 .auth-grid, body.zemma-app .auth-v2 .register-wizard-shell { align-items: stretch; gap: clamp(28px, 4vw, 64px) !important; } /* ---------- Intro side ---------- */ body.zemma-app .auth-v2 .auth-v2-intro { gap: clamp(20px, 2.4vw, 32px); padding: clamp(8px, 2vw, 16px) 0 !important; } body.zemma-app .auth-v2 .auth-v2-intro-head { display: flex; flex-direction: column; gap: 14px; } body.zemma-app .auth-v2 .auth-v2-intro h1 { max-width: 12ch; font-size: clamp(40px, 6vw, 76px) !important; line-height: 0.96 !important; letter-spacing: -0.055em !important; background: var(--zm-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } body.zemma-app .auth-v2 .auth-v2-intro p { max-width: 44ch; font-size: 16px !important; color: var(--zm-ink-soft) !important; line-height: 1.65; } body.zemma-app .auth-v2 .auth-v2-proof { gap: 12px !important; margin-top: 0 !important; } body.zemma-app .auth-v2 .auth-v2-proof > div { padding: 14px 16px !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease; } body.zemma-app .auth-v2 .auth-v2-proof > div:hover { transform: translateY(-2px); border-color: rgba(160, 132, 255, 0.35) !important; background: rgba(160, 132, 255, 0.06) !important; } body.zemma-app .auth-v2 .auth-v2-proof strong { font-size: 13px; color: var(--zm-ink) !important; font-weight: 600; letter-spacing: -0.01em; } body.zemma-app .auth-v2 .auth-v2-proof span { margin-top: 4px !important; font-size: 12.5px; color: var(--zm-ink-mute) !important; } body.zemma-app .auth-v2 .auth-v2-side-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } body.zemma-app .auth-v2 .auth-v2-plan-card { margin-top: 0 !important; padding: 16px 18px !important; border-radius: 22px !important; background: linear-gradient(135deg, rgba(160, 132, 255, 0.18), rgba(232, 155, 255, 0.08)) !important; border: 1px solid rgba(160, 132, 255, 0.28) !important; box-shadow: 0 18px 48px -28px rgba(160, 132, 255, 0.6) !important; } body.zemma-app .auth-v2 .auth-v2-plan-card span { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zm-violet-2) !important; } body.zemma-app .auth-v2 .auth-v2-plan-card strong { margin-top: 4px !important; font-size: 1.6rem !important; font-family: 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; } body.zemma-app .auth-v2 .auth-v2-plan-card small { margin-top: 4px !important; color: var(--zm-ink-mute) !important; } /* Showcase card sized + spaced */ body.zemma-app .auth-v2 .auth-v2-showcase { margin-top: 0 !important; } /* ---------- Card side (login / wizard / forgot / reset) ---------- */ body.zemma-app .auth-v2 .auth-v2-card { align-self: start; padding: clamp(24px, 2.6vw, 36px) !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), radial-gradient(circle at top right, rgba(160, 132, 255, 0.18), transparent 48%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 50px 120px -50px rgba(138, 92, 255, 0.65), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.zemma-app .auth-v2 .auth-v2-card-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } body.zemma-app .auth-v2 .auth-v2-card-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; } body.zemma-app .auth-v2 .auth-v2-step-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zm-violet-2) !important; background: rgba(160, 132, 255, 0.1); border: 1px solid rgba(160, 132, 255, 0.28); } body.zemma-app .auth-v2 .auth-v2-step-tag-admin { color: #ffd1a8 !important; background: rgba(255, 165, 100, 0.1); border-color: rgba(255, 165, 100, 0.32); } body.zemma-app .auth-v2 .auth-v2-card h2 { margin: 0 !important; font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; color: var(--zm-ink) !important; font-weight: 500; } body.zemma-app .auth-v2 .auth-v2-card-sub { margin: 4px 0 0 !important; color: var(--zm-ink-mute) !important; font-size: 14.5px !important; line-height: 1.55; } body.zemma-app .auth-v2 .auth-v2-time { align-self: flex-start; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(110, 231, 166, 0.12) !important; color: #b8f5d6 !important; font-family: 'Geist Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600 !important; border: 1px solid rgba(110, 231, 166, 0.24); } /* ---------- Wizard progress (sleeker pills) ---------- */ body.zemma-app .auth-v2 .auth-v2-progress { margin-bottom: 22px !important; gap: 8px !important; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step { min-height: 44px !important; padding: 8px 14px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid transparent !important; color: var(--zm-ink-mute) !important; transition: background 0.24s ease, color 0.24s ease, transform 0.24s ease, border-color 0.24s ease !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step span { width: 26px !important; height: 26px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--zm-ink-soft) !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step strong { font-size: 13px !important; color: inherit !important; font-weight: 600; letter-spacing: -0.01em; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step:hover { transform: none !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--zm-ink-soft) !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-active { background: var(--zm-grad-cta) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 30px -14px rgba(138, 92, 255, 0.65) !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-active span { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-complete { background: rgba(110, 231, 166, 0.1) !important; border-color: rgba(110, 231, 166, 0.22) !important; color: #b8f5d6 !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-complete span { background: rgba(110, 231, 166, 0.22) !important; color: #b8f5d6 !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-complete span::before { content: "✓"; font-size: 13px; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step.is-complete span > * { display: none; } /* ---------- Wizard section panels ---------- */ body.zemma-app .auth-v2 .auth-v2-section { gap: 16px !important; padding: clamp(18px, 2vw, 24px) !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; } body.zemma-app .auth-v2 .auth-v2-section-copy { margin: 0 !important; color: var(--zm-ink-mute) !important; font-size: 14px !important; line-height: 1.55; } /* ---------- Form fields ---------- */ body.zemma-app .auth-v2 .auth-v2-form { gap: 14px !important; } body.zemma-app .auth-v2 .auth-v2-field { display: grid !important; gap: 8px; margin: 0 !important; } body.zemma-app .auth-v2 .auth-v2-field > span:first-child { display: flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zm-ink-mute) !important; font-weight: 600; } body.zemma-app .auth-v2 .auth-v2-optional { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--zm-ink-faint) !important; font-style: normal; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: lowercase; font-weight: 500; } body.zemma-app .auth-v2 .auth-v2-field input, body.zemma-app .auth-v2 .auth-v2-field select, body.zemma-app .auth-v2 .auth-v2-field textarea { width: 100%; min-height: 52px !important; padding: 14px 16px !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--zm-ink) !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-size: 15px !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; box-shadow: none !important; } body.zemma-app .auth-v2 .auth-v2-field input::placeholder, body.zemma-app .auth-v2 .auth-v2-field textarea::placeholder { color: var(--zm-ink-faint) !important; } body.zemma-app .auth-v2 .auth-v2-field input:hover, body.zemma-app .auth-v2 .auth-v2-field select:hover, body.zemma-app .auth-v2 .auth-v2-field textarea:hover { background: rgba(255, 255, 255, 0.055) !important; border-color: rgba(255, 255, 255, 0.18) !important; } body.zemma-app .auth-v2 .auth-v2-field input:focus, body.zemma-app .auth-v2 .auth-v2-field select:focus, body.zemma-app .auth-v2 .auth-v2-field textarea:focus { outline: none !important; background: rgba(160, 132, 255, 0.07) !important; border-color: rgba(160, 132, 255, 0.55) !important; box-shadow: 0 0 0 4px rgba(160, 132, 255, 0.16) !important; transform: translateY(-1px); } body.zemma-app .auth-v2 .auth-v2-field input:invalid:not(:placeholder-shown):not(:focus) { border-color: rgba(255, 122, 182, 0.35) !important; } body.zemma-app .auth-v2 .form-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { body.zemma-app .auth-v2 .form-grid.two { grid-template-columns: 1fr; } } /* ---------- Inline field (subdomain) ---------- */ body.zemma-app .auth-v2 .auth-v2-inline { display: flex !important; align-items: stretch; gap: 0; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.zemma-app .auth-v2 .auth-v2-inline:focus-within { border-color: rgba(160, 132, 255, 0.55); box-shadow: 0 0 0 4px rgba(160, 132, 255, 0.16); } body.zemma-app .auth-v2 .auth-v2-inline input { flex: 1; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } body.zemma-app .auth-v2 .auth-v2-inline input:focus { background: transparent !important; box-shadow: none !important; transform: none !important; } body.zemma-app .auth-v2 .auth-v2-inline small { display: inline-flex; align-items: center; padding: 0 16px; background: rgba(160, 132, 255, 0.08); color: var(--zm-violet-2); font-family: 'Geist Mono', monospace; font-size: 13px; border-left: 1px solid rgba(255, 255, 255, 0.1); } body.zemma-app .auth-v2 .auth-v2-field-hint { color: var(--zm-ink-mute); font-size: 12.5px; margin-top: 2px; } body.zemma-app .auth-v2 .auth-v2-field-hint[data-state="checking"] { color: var(--zm-warn); } body.zemma-app .auth-v2 .auth-v2-field-hint[data-state="available"] { color: #83ffd5; } body.zemma-app .auth-v2 .auth-v2-field-hint[data-state="taken"] { color: var(--zm-danger); } /* ---------- Password field ---------- */ body.zemma-app .auth-v2 .auth-v2-field-password .auth-v2-password-wrap { position: relative; display: block; } body.zemma-app .auth-v2 .auth-v2-password-wrap input { padding-right: 92px !important; } body.zemma-app .auth-v2 .auth-v2-password-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--zm-ink-soft); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body.zemma-app .auth-v2 .auth-v2-password-toggle:hover { background: rgba(160, 132, 255, 0.12); color: var(--zm-ink); border-color: rgba(160, 132, 255, 0.35); } body.zemma-app .auth-v2 .auth-v2-password-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(160, 132, 255, 0.28); } body.zemma-app .auth-v2 .auth-v2-strength { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 12.5px; } body.zemma-app .auth-v2 .auth-v2-strength-track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } body.zemma-app .auth-v2 .auth-v2-strength-bar { position: absolute; inset: 0 100% 0 0; background: var(--zm-grad-cta); transition: inset 0.3s ease, background 0.3s ease; } body.zemma-app .auth-v2 .auth-v2-strength[data-level="1"] .auth-v2-strength-bar { inset: 0 75% 0 0; background: linear-gradient(135deg, #ff7ab6, #ff5b91); } body.zemma-app .auth-v2 .auth-v2-strength[data-level="2"] .auth-v2-strength-bar { inset: 0 50% 0 0; background: linear-gradient(135deg, #f4d88a, #f0b95c); } body.zemma-app .auth-v2 .auth-v2-strength[data-level="3"] .auth-v2-strength-bar { inset: 0 25% 0 0; background: linear-gradient(135deg, #a084ff, #8a5cff); } body.zemma-app .auth-v2 .auth-v2-strength[data-level="4"] .auth-v2-strength-bar { inset: 0 0 0 0; background: linear-gradient(135deg, #6ee7a6, #3edd8c); } body.zemma-app .auth-v2 .auth-v2-strength-label { color: var(--zm-ink-mute); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } body.zemma-app .auth-v2 .auth-v2-strength[data-level="1"] .auth-v2-strength-label { color: #ff9bc7; } body.zemma-app .auth-v2 .auth-v2-strength[data-level="2"] .auth-v2-strength-label { color: #f4d88a; } body.zemma-app .auth-v2 .auth-v2-strength[data-level="3"] .auth-v2-strength-label { color: var(--zm-violet-2); } body.zemma-app .auth-v2 .auth-v2-strength[data-level="4"] .auth-v2-strength-label { color: #83ffd5; } /* ---------- Login row (remember + forgot) ---------- */ body.zemma-app .auth-v2 .auth-v2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; } body.zemma-app .auth-v2 .auth-v2-remember { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--zm-ink-soft); font-size: 13.5px; } body.zemma-app .auth-v2 .auth-v2-remember input[type="checkbox"] { width: 18px; height: 18px; border-radius: 6px; accent-color: #8a5cff; cursor: pointer; } body.zemma-app .auth-v2 .auth-v2-quiet-link { font-size: 13.5px; color: var(--zm-violet-2) !important; text-decoration: none; transition: color 0.2s ease; } body.zemma-app .auth-v2 .auth-v2-quiet-link:hover { color: var(--zm-magenta) !important; text-decoration: underline; } /* ---------- Buttons ---------- */ body.zemma-app .auth-v2 .auth-v2-btn-primary { min-height: 56px !important; padding: 0 22px !important; border-radius: 16px !important; background: var(--zm-grad-cta) !important; color: #fff !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 600 !important; font-size: 15.5px !important; letter-spacing: -0.01em !important; border: 0 !important; box-shadow: var(--zm-shadow-cta) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important; } body.zemma-app .auth-v2 .auth-v2-btn-primary:hover { transform: translateY(-2px); background: var(--zm-grad-cta-hover) !important; box-shadow: 0 16px 50px -14px rgba(138, 92, 255, 0.7), 0 0 0 1px rgba(255,255,255,0.12) inset !important; } body.zemma-app .auth-v2 .auth-v2-btn-primary:active { transform: translateY(0); } body.zemma-app .auth-v2 .auth-v2-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } body.zemma-app .auth-v2 .auth-v2-btn-secondary { min-height: 52px !important; padding: 0 20px !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--zm-ink) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 500 !important; font-size: 14.5px !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important; box-shadow: none !important; } body.zemma-app .auth-v2 .auth-v2-btn-secondary:hover { background: rgba(160, 132, 255, 0.1) !important; border-color: rgba(160, 132, 255, 0.36) !important; transform: translateY(-1px); } body.zemma-app .auth-v2 .auth-v2-btn-secondary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } body.zemma-app .auth-v2 .auth-v2-actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 6px; } body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-primary { flex: 1; min-width: 200px; } body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-secondary { min-width: 140px; } body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-primary[hidden], body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-secondary[hidden] { display: none !important; } /* ---------- Bottom links / alt links ---------- */ body.zemma-app .auth-v2 .auth-v2-bottom-link { text-align: center; margin: 4px 0 0 !important; color: var(--zm-ink-mute) !important; font-size: 13.5px; } body.zemma-app .auth-v2 .auth-v2-bottom-link a { color: var(--zm-violet-2) !important; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } body.zemma-app .auth-v2 .auth-v2-bottom-link a:hover { color: var(--zm-magenta) !important; text-decoration: underline; } body.zemma-app .auth-v2 .auth-v2-alt-link { display: block; margin-top: 8px; text-align: center; color: var(--zm-violet-2) !important; font-size: 13.5px; text-decoration: none; } body.zemma-app .auth-v2 .auth-v2-alt-link:hover { color: var(--zm-magenta) !important; text-decoration: underline; } /* ---------- Confirm step legal + checkbox ---------- */ body.zemma-app .auth-v2 .auth-v2-legal { padding: 18px 20px !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(232, 155, 255, 0.08), rgba(160, 132, 255, 0.04)) !important; border: 1px solid rgba(232, 155, 255, 0.18) !important; } body.zemma-app .auth-v2 .auth-v2-legal strong { display: block; margin-bottom: 6px; color: var(--zm-pink) !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-size: 14.5px; letter-spacing: -0.01em; } body.zemma-app .auth-v2 .auth-v2-legal p { margin: 0 !important; color: var(--zm-ink-soft) !important; font-size: 13.5px !important; line-height: 1.6; } body.zemma-app .auth-v2 .auth-v2-checkbox { display: flex !important; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } body.zemma-app .auth-v2 .auth-v2-checkbox:hover { background: rgba(160, 132, 255, 0.06); border-color: rgba(160, 132, 255, 0.24); } body.zemma-app .auth-v2 .auth-v2-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: #8a5cff; cursor: pointer; flex-shrink: 0; } body.zemma-app .auth-v2 .auth-v2-checkbox > span { color: var(--zm-ink-soft) !important; font-size: 13.5px; line-height: 1.55; } body.zemma-app .auth-v2 .auth-v2-checkbox a { color: var(--zm-violet-2) !important; text-decoration: underline; text-decoration-color: rgba(160, 132, 255, 0.35); } body.zemma-app .auth-v2 .auth-v2-checkbox a:hover { color: var(--zm-magenta) !important; } /* ---------- Summary list (reset) ---------- */ body.zemma-app .auth-v2 .auth-v2-summary { display: grid; gap: 10px; } body.zemma-app .auth-v2 .auth-v2-summary > div { padding: 14px 16px !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } body.zemma-app .auth-v2 .auth-v2-summary span { display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zm-ink-mute) !important; } body.zemma-app .auth-v2 .auth-v2-summary strong { display: block; margin-top: 4px; color: var(--zm-ink) !important; font-size: 14.5px; word-break: break-all; } /* ---------- Success step list ---------- */ body.zemma-app .auth-v2-success .auth-v2-success-steps { display: grid; gap: 12px; margin-bottom: 18px; } body.zemma-app .auth-v2-success .auth-v2-success-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease; } body.zemma-app .auth-v2-success .auth-v2-success-step:hover { transform: translateX(2px); border-color: rgba(160, 132, 255, 0.3); background: rgba(160, 132, 255, 0.05); } body.zemma-app .auth-v2-success .auth-v2-success-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--zm-grad-cta); color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; box-shadow: 0 14px 30px -14px rgba(138, 92, 255, 0.6); flex-shrink: 0; } body.zemma-app .auth-v2-success .auth-v2-success-step strong { display: block; color: var(--zm-ink) !important; font-size: 14.5px; margin-bottom: 2px; } body.zemma-app .auth-v2-success .auth-v2-success-step small { color: var(--zm-ink-mute) !important; font-size: 13px; line-height: 1.55; } body.zemma-app .auth-v2-success .auth-v2-success-step strong em { font-style: normal; color: var(--zm-violet-2); } body.zemma-app .auth-v2-success .auth-v2-resend { margin-top: 4px; } body.zemma-app .auth-v2-success .auth-v2-dev-helper { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border-radius: 18px; border: 1px dashed rgba(255, 165, 100, 0.4); background: rgba(255, 165, 100, 0.04); } body.zemma-app .auth-v2-success .auth-v2-dev-helper p { margin: 0 !important; color: var(--zm-ink-mute) !important; font-size: 13px; } /* ---------- Wizard panel transition (smooth) ---------- */ body.zemma-app .auth-v2 .wizard-panel { animation: authV2PanelIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes authV2PanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Responsive ---------- */ @media (max-width: 980px) { body.zemma-app .auth-v2 .auth-grid, body.zemma-app .auth-v2 .register-wizard-shell { grid-template-columns: 1fr !important; gap: 32px !important; } body.zemma-app .auth-v2 .auth-v2-intro { min-height: auto !important; } body.zemma-app .auth-v2 .auth-v2-side-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } @media (max-width: 720px) { body.zemma-app .auth-v2 { padding-top: 32px !important; padding-bottom: 36px !important; } body.zemma-app .auth-v2 .auth-v2-card { padding: 22px 18px !important; border-radius: 24px !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step strong { display: none !important; } body.zemma-app .auth-v2 .auth-v2-progress .wizard-step { justify-content: center; padding: 8px 10px !important; } body.zemma-app .auth-v2 .auth-v2-actions { flex-direction: column; align-items: stretch; } body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-primary, body.zemma-app .auth-v2 .auth-v2-actions .auth-v2-btn-secondary { width: 100%; min-width: 0; } body.zemma-app .auth-v2 .auth-v2-row { align-items: flex-start; } body.zemma-app .auth-v2 .auth-v2-side-stack { grid-template-columns: 1fr; } body.zemma-app .auth-v2 .auth-v2-intro h1 { font-size: clamp(36px, 11vw, 52px) !important; } } /* End auth v2 */