/* ═══════════════════════════════════════════════════════════════════════════
ONBOARDING MODAL — onboarding.css
Include in your layout:
═══════════════════════════════════════════════════════════════════════════ */
/* ── Google Fonts (add to if not already present) ──────────────────
─────────────────────────────────────────────────────────────────────── */
/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
--ob-brand: #FD526C;
--ob-brand-dark: #e63e57;
--ob-brand-light: #fff0f2;
--ob-brand-rgb: 253, 82, 108;
--ob-text-primary: #0f0f12;
--ob-text-secondary: #5a5a72;
--ob-text-muted: #9898b0;
--ob-text-inverse: #ffffff;
--ob-surface: #ffffff;
--ob-surface-soft: #f8f8fc;
--ob-border: #ebebf5;
--ob-border-subtle: #f2f2f8;
--ob-radius-sm: 8px;
--ob-radius-md: 14px;
--ob-radius-lg: 22px;
--ob-radius-xl: 32px;
--ob-shadow-modal: 0 32px 80px rgba(15, 15, 30, 0.18),
0 8px 24px rgba(15, 15, 30, 0.10),
0 2px 6px rgba(15, 15, 30, 0.06);
--ob-shadow-card: 0 2px 12px rgba(15, 15, 30, 0.07);
--ob-font-display: 'DM Serif Display', Georgia, serif;
--ob-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--ob-transition: cubic-bezier(0.34, 1.10, 0.64, 1);
--ob-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ob-modal-width: 560px;
--ob-modal-padding: 44px 48px 40px;
}
/* ── Reset ──────────────────────────────────────────────────────────────── */
.ob-overlay *,
.ob-overlay *::before,
.ob-overlay *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ─────────────────────────────────────────────────────────────────────────
OVERLAY
───────────────────────────────────────────────────────────────────────── */
.ob-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(8, 8, 18, 0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
/* Entry animation */
opacity: 0;
animation: ob-overlay-in 0.35s var(--ob-ease) forwards;
}
.ob-overlay.ob-overlay--exit {
animation: ob-overlay-out 0.28s var(--ob-ease) forwards;
}
@keyframes ob-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ob-overlay-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* Hidden state */
.ob-overlay.ob-hidden {
display: none;
}
/* ─────────────────────────────────────────────────────────────────────────
MODAL CONTAINER
───────────────────────────────────────────────────────────────────────── */
.ob-modal {
position: relative;
width: 100%;
max-width: var(--ob-modal-width);
background: var(--ob-surface);
border-radius: var(--ob-radius-xl);
box-shadow: var(--ob-shadow-modal);
overflow: hidden;
font-family: var(--ob-font-body);
color: var(--ob-text-primary);
/* Entry animation */
transform: translateY(32px) scale(0.96);
animation: ob-modal-in 0.45s var(--ob-transition) 0.05s forwards;
}
.ob-overlay.ob-overlay--exit .ob-modal {
animation: ob-modal-out 0.28s var(--ob-ease) forwards;
}
@keyframes ob-modal-in {
from { transform: translateY(32px) scale(0.96); opacity: 0.6; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes ob-modal-out {
from { transform: translateY(0) scale(1); opacity: 1; }
to { transform: translateY(16px) scale(0.97); opacity: 0; }
}
/* Decorative brand accent bar at the top */
.ob-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ob-brand), #ff8fa3, var(--ob-brand));
background-size: 200% 100%;
animation: ob-shimmer 3s linear infinite;
}
@keyframes ob-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─────────────────────────────────────────────────────────────────────────
CLOSE BUTTON
───────────────────────────────────────────────────────────────────────── */
.ob-close {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: var(--ob-surface-soft);
color: var(--ob-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s var(--ob-ease),
color 0.18s var(--ob-ease),
transform 0.18s var(--ob-ease);
}
.ob-close:hover {
background: #fff0f2;
color: var(--ob-brand);
transform: rotate(90deg);
}
.ob-close:focus-visible {
outline: 2px solid var(--ob-brand);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────────────────────────────────
TYPOGRAPHY — Shared
───────────────────────────────────────────────────────────────────────── */
.ob-eyebrow {
display: inline-block;
font-family: var(--ob-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ob-brand);
margin-bottom: 12px;
}
.ob-eyebrow--centered { display: block; text-align: center; }
.ob-step-title,
.ob-modal-title {
font-family: var(--ob-font-display);
font-size: clamp(24px, 4vw, 30px);
font-weight: 400;
line-height: 1.22;
color: var(--ob-text-primary);
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.ob-title--centered { text-align: center; }
.ob-step-body {
font-size: 15px;
font-weight: 300;
line-height: 1.65;
color: var(--ob-text-secondary);
margin-bottom: 28px;
}
.ob-body--centered { text-align: center; }
/* ─────────────────────────────────────────────────────────────────────────
MODE 1 — STEPS WRAPPER
───────────────────────────────────────────────────────────────────────── */
.ob-steps-wrapper {
display: flex;
flex-direction: column;
padding: var(--ob-modal-padding);
min-height: 85vh;
}
/* ─────────────────────────────────────────────────────────────────────────
SLIDE TRACK
───────────────────────────────────────────────────────────────────────── */
.ob-track {
flex: 1;
overflow: hidden;
position: relative;
}
.ob-step {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transform: translateX(48px);
transition: opacity 0.38s var(--ob-ease),
transform 0.38s var(--ob-transition);
padding-top: 4px;
overflow-y: auto;
}
.ob-step.ob-step--active {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.ob-step.ob-step--exit {
opacity: 0;
transform: translateX(-48px);
}
/* ── Step Icon ──────────────────────────────────────────────────────────── */
.ob-step-icon {
width: 72px;
height: 72px;
border-radius: 20px;
background: var(--ob-brand-light);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
position: relative;
}
.ob-step-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
border: 1px solid rgba(var(--ob-brand-rgb), 0.15);
}
/* ── Feature Pills (Step 1) ─────────────────────────────────────────────── */
.ob-feature-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ob-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--ob-surface-soft);
border: 1px solid var(--ob-border);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: var(--ob-text-secondary);
transition: background 0.15s, border-color 0.15s;
}
.ob-pill:hover {
background: var(--ob-brand-light);
border-color: rgba(var(--ob-brand-rgb), 0.3);
}
/* ── Mini Steps List (Step 2) ───────────────────────────────────────────── */
.ob-steps-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.ob-mini-step {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 16px;
background: var(--ob-surface-soft);
border: 1px solid var(--ob-border-subtle);
border-radius: var(--ob-radius-md);
transition: border-color 0.15s, box-shadow 0.15s;
}
.ob-mini-step:hover {
border-color: rgba(var(--ob-brand-rgb), 0.25);
box-shadow: 0 2px 12px rgba(var(--ob-brand-rgb), 0.08);
}
.ob-mini-num {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--ob-brand), #ff8fa3);
color: white;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
}
.ob-mini-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.ob-mini-text strong {
font-size: 14px;
font-weight: 600;
color: var(--ob-text-primary);
}
.ob-mini-text span {
font-size: 13px;
font-weight: 300;
color: var(--ob-text-muted);
}
/* ── Promo Cards (Step 3) ───────────────────────────────────────────────── */
.ob-promo-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ob-promo-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 10px;
background: var(--ob-surface-soft);
border: 1.5px solid var(--ob-border);
border-radius: var(--ob-radius-md);
text-align: center;
transition: border-color 0.15s, transform 0.2s var(--ob-transition);
cursor: default;
}
.ob-promo-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--ob-brand-rgb), 0.3);
}
.ob-promo-card--highlight {
border-color: rgba(var(--ob-brand-rgb), 0.35);
background: var(--ob-brand-light);
position: relative;
}
.ob-promo-card--highlight::before {
content: 'Popular';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--ob-brand);
color: white;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 10px;
border-radius: 100px;
text-transform: uppercase;
}
.ob-promo-icon { font-size: 22px; }
.ob-promo-label {
font-size: 12px;
font-weight: 600;
color: var(--ob-text-primary);
}
.ob-promo-desc {
font-size: 11px;
color: var(--ob-text-muted);
}
/* ── Fee Note (Step 4) ──────────────────────────────────────────────────── */
.ob-fee-note {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
background: var(--ob-brand-light);
border: 1px solid rgba(var(--ob-brand-rgb), 0.2);
border-radius: var(--ob-radius-md);
margin-bottom: 28px;
}
.ob-fee-icon {
flex-shrink: 0;
margin-top: 1px;
}
.ob-fee-note p {
font-size: 13.5px;
font-weight: 400;
color: var(--ob-text-secondary);
line-height: 1.55;
}
.ob-fee-note p strong {
color: var(--ob-text-primary);
font-weight: 600;
}
/* ── Final CTA (Step 4) ─────────────────────────────────────────────────── */
.ob-cta-final {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.ob-cta-sub {
font-size: 12px;
color: var(--ob-text-muted);
}
/* ─────────────────────────────────────────────────────────────────────────
PROGRESS DOTS
───────────────────────────────────────────────────────────────────────── */
.ob-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 0 20px;
}
.ob-dot {
width: 8px;
height: 8px;
border-radius: 100px;
border: none;
background: var(--ob-border);
cursor: pointer;
transition: width 0.3s var(--ob-transition),
background 0.25s var(--ob-ease),
transform 0.2s var(--ob-ease);
padding: 0;
}
.ob-dot:hover {
background: rgba(var(--ob-brand-rgb), 0.4);
transform: scale(1.2);
}
.ob-dot.ob-dot--active {
width: 28px;
background: var(--ob-brand);
}
.ob-dot:focus-visible {
outline: 2px solid var(--ob-brand);
outline-offset: 3px;
}
/* ─────────────────────────────────────────────────────────────────────────
NAVIGATION BAR
───────────────────────────────────────────────────────────────────────── */
.ob-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
border-top: 1px solid var(--ob-border-subtle);
}
.ob-nav-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* ─────────────────────────────────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────────────────────────────────── */
.ob-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 20px;
border-radius: var(--ob-radius-sm);
font-family: var(--ob-font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: background 0.18s var(--ob-ease),
color 0.18s var(--ob-ease),
box-shadow 0.18s var(--ob-ease),
transform 0.15s var(--ob-ease),
border-color 0.18s var(--ob-ease);
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
}
.ob-btn:focus-visible {
outline: 2px solid var(--ob-brand);
outline-offset: 2px;
}
.ob-btn:active {
transform: scale(0.97);
}
/* Primary */
.ob-btn--primary {
background: var(--ob-brand);
color: #ffffff;
box-shadow: 0 4px 16px rgba(var(--ob-brand-rgb), 0.36),
0 1px 4px rgba(var(--ob-brand-rgb), 0.2);
}
.ob-btn--primary:hover {
background: var(--ob-brand-dark);
box-shadow: 0 6px 22px rgba(var(--ob-brand-rgb), 0.44),
0 2px 6px rgba(var(--ob-brand-rgb), 0.24);
transform: translateY(-1px);
}
/* Secondary */
.ob-btn--secondary {
background: var(--ob-surface-soft);
color: var(--ob-text-secondary);
border: 1px solid var(--ob-border);
}
.ob-btn--secondary:hover:not(:disabled) {
background: var(--ob-surface);
border-color: rgba(var(--ob-brand-rgb), 0.3);
color: var(--ob-brand);
}
.ob-btn--secondary:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Ghost */
.ob-btn--ghost {
background: transparent;
color: var(--ob-text-muted);
padding-left: 8px;
padding-right: 8px;
}
.ob-btn--ghost:hover {
color: var(--ob-text-secondary);
background: var(--ob-surface-soft);
}
/* Sizes */
.ob-btn--large {
padding: 13px 28px;
font-size: 15px;
border-radius: var(--ob-radius-md);
}
.ob-btn--sm {
padding: 7px 14px;
font-size: 13px;
}
.ob-btn--full {
width: 100%;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────────────
MODE 2 — VIDEO WRAPPER
───────────────────────────────────────────────────────────────────────── */
.ob-video-wrapper {
padding: var(--ob-modal-padding);
display: flex;
flex-direction: column;
align-items: center;
}
/* ── Video Container ────────────────────────────────────────────────────── */
.ob-video-container {
width: 100%;
position: relative;
border-radius: var(--ob-radius-lg);
overflow: hidden;
background: #0f0f12;
margin-bottom: 28px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
/* 16:9 aspect ratio */
aspect-ratio: 16 / 9;
}
.ob-video-container iframe,
.ob-video-container video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Fallback / error */
.ob-video-error {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: #0f0f12;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
text-align: center;
padding: 20px;
}
.ob-video-error a {
color: var(--ob-brand);
text-decoration: none;
}
.ob-video-error a:hover {
text-decoration: underline;
}
.ob-video-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #0f0f12;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
text-align: center;
padding: 20px;
}
.ob-video-fallback a {
color: var(--ob-brand);
}
/* ── Video Footer ───────────────────────────────────────────────────────── */
.ob-video-footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE — MOBILE
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
:root {
--ob-modal-padding: 36px 24px 28px;
}
.ob-modal {
border-radius: var(--ob-radius-lg);
}
.ob-step-title,
.ob-modal-title {
font-size: 22px;
}
.ob-promo-cards {
grid-template-columns: 1fr;
gap: 8px;
}
.ob-promo-card {
flex-direction: row;
justify-content: flex-start;
padding: 12px 14px;
text-align: left;
gap: 12px;
}
.ob-promo-card--highlight::before {
top: 50%;
left: auto;
right: 12px;
transform: translateY(-50%);
}
.ob-nav {
flex-direction: column-reverse;
gap: 12px;
}
.ob-nav-actions {
width: 100%;
justify-content: space-between;
}
.ob-btn--ghost {
align-self: center;
}
.ob-steps-wrapper {
min-height: 85vh;
}
.ob-feature-pills {
gap: 6px;
}
.ob-pill {
font-size: 12px;
padding: 5px 11px;
}
}
@media (max-width: 380px) {
:root {
--ob-modal-padding: 25px 13px 18px;
}
.ob-dot.ob-dot--active {
width: 22px;
}
}
/* ─────────────────────────────────────────────────────────────────────────
ACCESSIBILITY — Reduced Motion
───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ob-overlay,
.ob-modal,
.ob-step,
.ob-dot,
.ob-btn,
.ob-close,
.ob-mini-step,
.ob-promo-card {
animation: none !important;
transition-duration: 0.01ms !important;
}
.ob-modal {
transform: none;
opacity: 1;
}
.ob-modal::before {
animation: none;
}
}