/* TapSticky Card Onboarding v3 — restores v1's depth (image upload + crop,
* multi-link social, real bio, live preview, inline validation, auto-save,
* visual stepper, international phone) on v2's clean structure.
* Light theme, phone-frame on desktop, Inter, brand-purple accents.
*/
/* The v3 modules toggle visibility via the [hidden] attribute. Component rules
* like `.ob3-socials-picker { display: grid }` override that, so enforce
* display:none for any [hidden] element inside the onboarding shell. */
.ob2-shell [hidden],
.ob2-body [hidden] {
display: none !important;
}
:root {
--brand-50: #fef3f1;
--brand-100: #fde4e0;
--brand-200: #fac8c1;
--brand-300: #f4a094;
--brand-500: #e74c3c;
--brand-600: #d33f30;
--brand-700: #b03225;
--brand-900: #6b1c14;
/* Dark is the DEFAULT here. This is the owner's tool, not their card: people
set a card up in the evening, and a wizard that flashes white at 11pm is a
worse product than one that follows the room. The card being built is never
affected — its colours are the owner's brand decision and live in
cardAccent.js, not in this file. */
--slate-50: #121215;
--slate-100: #17171b;
--slate-200: #26262c;
--slate-300: #33333a;
--slate-400: #a9a9b2;
--slate-500: #8d8d96;
--slate-600: #bcbcc4;
--slate-700: #d4d4da;
--slate-800: #eaeaee;
--slate-900: #f3f3f6;
--pink-50: #fdf2f8;
--pink-500: #e0574a;
--pink-600: #db2777;
--amber-50: #fffbeb;
--amber-600: #d97706;
--emerald-50: #ecfdf5;
--emerald-500: #10b981;
--emerald-600: #059669;
--emerald-700: #047857;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--shadow-soft: 0 8px 24px -8px rgba(124, 58, 237, .25);
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Semantic layer. The slate ramp below is used BY LIGHTNESS throughout this
file — 100 is the page, 200 is a hairline, 900 is text — so dark mode
reverses the ramp rather than auditing 374 call sites. These four name the
things the ramp cannot: the raised surfaces that were literal white. */
--ob3-surface: #1d1d22;
--ob3-surface-2: #16161a;
--ob3-line: #2c2c33;
--ob3-muted: #a9a9b2;
color-scheme: dark;
}
/* NOT wired to prefers-color-scheme, deliberately. A browser reports "light"
both for a person who chose light and for the far larger group who never
touched the setting, so keying off it makes dark a minority experience rather
than the default that was asked for. Light is still one attribute away:
set data-ob3-theme="light" on . */
:root[data-ob3-theme="light"] {
--slate-50: #fafafa;
--slate-100: #f4f4f4;
--slate-200: #e5e5e5;
--slate-300: #cfcfd0;
--slate-400: #6b6b6c;
--slate-500: #8e8e8f;
--slate-600: #5c5c5d;
--slate-700: #3d3d3e;
--slate-800: #242424;
--slate-900: #1f1f1f;
--ob3-surface: #fff;
--ob3-surface-2: #fafafa;
--ob3-line: #e5e5e5;
--ob3-muted: #6b6b6c;
--shadow-soft: 0 8px 24px -8px rgba(124, 58, 237, .25);
color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--slate-100);
color: var(--slate-900);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.ob2-body { min-height: 100vh; position: relative; }
/* Background gradient — visible only on desktop where the phone is framed */
.ob2-bg {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 30% 15%, rgba(124, 58, 237, 0.06), transparent 50%),
radial-gradient(circle at 70% 85%, rgba(236, 72, 153, 0.04), transparent 50%),
var(--slate-100);
}
/* ---- Mobile (default): full-bleed white sheet, no phone chrome ---- */
.ob2-shell {
width: 100%;
min-height: 100vh;
background: var(--ob3-surface);
padding: 24px 20px 48px;
}
/* ---- Desktop (≥ 720px): center the phone with bezel + notch ---- */
/* v3 drops v2's desktop phone-frame: the richer form + live-preview rail need
* room to breathe, and the frame squeezed the two-column layout to 390px.
* Tablet (720-919px): comfortable centered single column.
* Desktop (>= 920px): wide container; .ob3-layout splits into form + preview. */
@media (min-width: 720px) {
body.ob2-body {
display: block;
padding: 32px 24px 64px;
}
.ob2-shell {
width: 100%;
max-width: 560px;
margin: 0 auto;
min-height: 0;
padding: 32px 28px 48px;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: 24px;
box-shadow: 0 20px 60px -24px rgba(15, 23, 42, .18);
}
}
/* ---- Screens ---- */
.ob2-screen {
display: none;
animation: ob2-fade .25s ease both;
}
.ob2-screen.is-active { display: block; }
@keyframes ob2-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* ---- Brand / typography ---- */
.ob2-brand {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.ob2-brand-mark {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
}
.ob2-brand-name {
font-weight: 600;
color: var(--slate-900);
}
.ob2-logo {
height: 28px;
width: auto;
display: block;
}
.ob2-title {
font-size: 24px;
line-height: 1.15;
font-weight: 800;
margin: 0 0 4px;
color: var(--slate-900);
}
.ob2-title-sm {
font-size: 20px;
line-height: 1.2;
font-weight: 800;
margin: 0 0 4px;
color: var(--slate-900);
}
.ob2-subtitle {
margin: 0 0 20px;
color: var(--slate-500);
font-size: 14px;
}
.ob2-screen-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.ob2-back {
appearance: none;
background: transparent;
border: none;
color: var(--slate-500);
font: inherit;
font-size: 14px;
cursor: pointer;
padding: 6px 0;
}
.ob2-back:hover { color: var(--slate-900); }
.ob2-progress {
font-size: 12px;
color: var(--slate-400);
}
.ob2-fineprint {
margin-top: 32px;
text-align: center;
color: var(--slate-400);
font-size: 12px;
}
.ob2-fineprint a {
color: var(--brand-600);
text-decoration: underline;
}
/* "How to edit later" tip on the success screen. */
.ob2-edit-tip {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 22px 0 0;
padding: 12px 14px;
background: var(--brand-50);
border: 1px solid var(--brand-100);
border-radius: 12px;
font-size: 13px;
line-height: 1.45;
color: var(--slate-700);
text-align: left;
}
.ob2-edit-tip-ic { font-size: 15px; line-height: 1.3; flex: 0 0 auto; }
.ob2-edit-tip b { color: var(--brand-700); font-weight: 700; }
/* ===== Step 1 (login) branded hero ===================================== */
/* The login screen has its own welcome hero, so hide the stepper chrome here;
it appears from the Setup step onward. */
body.ob2-login-active #ob3-stepper-slot { display: none; }
/* Full-bleed gradient hero. Negative margins cancel the shell padding so the
gradient reaches the screen edges (box-sizing:border-box + body margin:0). */
.ob2-hero {
position: relative;
margin: -24px -20px 0;
padding: calc(30px + env(safe-area-inset-top, 0px)) 24px 72px;
text-align: center;
/* Matches tapsticky.in: near-black ground, not a violet->magenta gradient. */
background: linear-gradient(168deg, #242424 0%, #1f1f1f 55%, #000000 100%);
overflow: hidden;
}
.ob2-hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.2), transparent 46%);
pointer-events: none;
}
.ob2-hero-logo {
position: relative;
height: 30px;
width: auto;
display: inline-block;
}
/* Floating mini card mock — evokes the finished business card. */
.ob2-hero-card {
position: relative;
margin: 26px auto 0;
width: 192px;
height: 118px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow: 0 20px 38px -14px rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transform: rotate(-4deg);
}
.ob2-hero-av {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
}
.ob2-hero-line {
position: absolute;
left: 28px;
right: 28px;
top: 60px;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.6);
}
.ob2-hero-line.short { top: 74px; right: 66px; }
.ob2-hero-chips {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 7px;
}
.ob2-hero-chips i {
width: 15px;
height: 15px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.85);
}
/* White sheet that rises over the gradient and holds the auth form. */
.ob2-hero-sheet {
position: relative;
margin: -46px -20px 0;
background: var(--ob3-surface);
border-radius: 24px 24px 0 0;
padding: 28px 20px 0;
}
.ob2-hero-sheet .ob2-title { text-align: center; }
.ob2-hero-sheet .ob2-subtitle { text-align: center; }
@media (prefers-reduced-motion: reduce) {
.ob2-hero-card { transform: none; }
}
/* Desktop: shell is a centered rounded card; match the hero's breakout to the
shell padding and round its top corners to the shell radius. */
@media (min-width: 720px) {
.ob2-hero {
margin: -32px -28px 0;
border-radius: 24px 24px 0 0;
padding-top: 36px;
}
.ob2-hero-sheet { margin: -46px -28px 0; }
}
/* ---- Intent picker ---- */
.ob2-intent-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ob2-intent {
appearance: none;
width: 100%;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 16px;
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--slate-900);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ob2-intent:hover {
transform: translateY(-2px);
border-color: var(--brand-300);
box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .15);
}
.ob2-intent:active { transform: translateY(0); }
/* Pre-selected intent (edit mode: shows the card's current type on entry). */
.ob2-intent.is-selected {
border-color: var(--brand-500, #e74c3c);
box-shadow: 0 0 0 2px var(--brand-500, #e74c3c) inset;
background: var(--brand-50, #f5f3ff);
}
.ob2-intent-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ob2-intent-icon--pink { background: var(--pink-50); color: var(--pink-600); }
.ob2-intent-icon--amber { background: var(--amber-50); color: var(--amber-600); }
.ob2-intent-icon--emerald { background: var(--emerald-50); color: var(--emerald-600); }
.ob2-intent-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.ob2-intent-title {
font-weight: 700;
font-size: 15px;
color: var(--slate-900);
}
.ob2-intent-desc {
font-size: 13px;
color: var(--slate-500);
line-height: 1.4;
}
.ob2-intent-arrow {
color: var(--slate-300);
align-self: center;
font-size: 14px;
}
/* ---- Rich intent cards (Step 2): illustration + consumer-facing hints ---- */
.ob2-intent--rich { align-items: flex-start; gap: 14px; padding: 16px; }
.ob2-intent-art {
width: 56px;
height: 56px;
border-radius: 16px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ob2-intent-art--pink { background: #fde7f0; }
.ob2-intent-art--amber { background: #fef0dc; }
.ob2-intent-art--emerald { background: #dcf5ec; }
.ob2-intent--rich .ob2-intent-title { font-size: 16px; letter-spacing: -.01em; }
.ob2-intent--rich .ob2-intent-desc { color: var(--slate-600); margin-top: 2px; }
/* Real platform logos under the "profile" option. */
.ob2-intent-hint {
display: flex;
align-items: center;
gap: 7px;
margin-top: 9px;
flex-wrap: wrap;
}
.ob2-intent-hint ion-icon { font-size: 18px; }
.ob2-intent-more { font-size: 11px; color: var(--slate-400); font-weight: 600; }
/* "Saves to iPhone & Android" reassurance under the contact option. */
.ob2-intent-os {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 9px;
font-size: 11.5px;
color: var(--slate-500);
font-weight: 600;
}
/* Example-destination tags under the link option. */
.ob2-intent-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.ob2-intent-tag {
font-size: 10.5px;
font-weight: 600;
color: var(--slate-700);
background: var(--slate-100);
border-radius: 6px;
padding: 3px 8px;
}
/* ---- Form fields ---- */
.ob2-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.ob2-field-label {
font-size: 12px;
color: var(--slate-500);
font-weight: 500;
}
.ob2-required { color: var(--pink-500); }
.ob2-optional { color: var(--slate-400); font-weight: 400; }
.ob2-input-wrap {
display: flex;
align-items: stretch;
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob2-input-wrap:focus-within {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.ob2-prefix {
padding: 0 12px;
color: var(--slate-700);
font-weight: 500;
border-right: 1px solid var(--slate-100);
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.ob2-input-wrap input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--slate-900);
font: inherit;
font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */;
padding: 12px;
min-height: 48px; /* P1.8 — comfortable touch target */
min-width: 0;
}
.ob2-input-wrap input::placeholder { color: var(--slate-400); }
.ob2-field > input {
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
outline: none;
color: var(--slate-900);
font: inherit;
font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */;
padding: 12px;
min-height: 48px; /* P1.8 — comfortable touch target */
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob2-field > input:focus {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.ob2-hint {
font-size: 12px;
color: var(--slate-400);
}
/* ---- Multiple contact numbers (add/remove rows) ---- */
#ob3-phone-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
.ob3-phone-row {
display: flex;
gap: 8px;
align-items: stretch;
}
/* intl-tel-input wraps the number input in an .iti div; let it flex-grow. */
.ob3-phone-row .iti {
flex: 1 1 auto;
min-width: 0;
}
.ob3-phone-num {
width: 100%;
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
outline: none;
color: var(--slate-900);
font: inherit;
font-size: 15px;
padding: 12px;
min-height: 48px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob3-phone-label {
flex: 0 0 108px;
width: 108px;
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
outline: none;
color: var(--slate-900);
font: inherit;
font-size: 14px;
padding: 12px 10px;
min-height: 48px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob3-phone-num:focus,
.ob3-phone-label:focus {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.ob3-phone-remove {
flex: 0 0 44px;
width: 44px;
min-height: 48px;
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
background: var(--ob3-surface);
color: var(--slate-400);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.ob3-phone-remove:hover {
border-color: #ef4444;
color: #ef4444;
}
.ob3-add-phone {
margin-top: 10px;
width: 100%;
border: 1.5px dashed var(--slate-200);
border-radius: var(--radius);
background: transparent;
color: var(--brand-500);
font: inherit;
font-size: 14px;
font-weight: 600;
padding: 11px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.ob3-add-phone:hover {
border-color: var(--brand-500);
background: rgba(124, 58, 237, .05);
}
.ob2-mono {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
color: var(--slate-500);
font-size: 12px;
}
/* ---- Platform grid ---- */
.ob2-platform-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.ob2-platform {
appearance: none;
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
padding: 10px 4px;
color: var(--slate-700);
font: inherit;
font-weight: 600;
font-size: 11px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
transition: all .12s ease;
}
.ob2-platform:hover { transform: translateY(-1px); }
.ob2-platform-icon { font-size: 18px; }
.ob2-platform.is-selected {
background: var(--brand-100);
border-color: var(--brand-500);
color: var(--brand-700);
}
/* ---- Chips ---- */
.ob2-chip-group {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ob2-chip-label {
width: 100%;
font-size: 11px;
font-weight: 600;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ob2-chip {
appearance: none;
background: transparent;
border: 1px solid var(--slate-200);
border-radius: 999px;
padding: 6px 12px;
color: var(--slate-700);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .12s ease;
}
.ob2-chip:hover { transform: translateY(-1px); }
.ob2-chip.is-selected {
background: var(--brand-50);
border-color: var(--brand-300);
color: var(--brand-700);
cursor: default;
}
.ob2-extra {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
/* ---- Disclosure (details/summary) ---- */
.ob2-disclosure {
margin-top: 20px;
}
.ob2-disclosure summary {
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--slate-700);
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.ob2-disclosure summary::-webkit-details-marker { display: none; }
.ob2-disclosure summary::before {
content: '▸';
display: inline-block;
transition: transform .15s ease;
color: var(--slate-400);
}
.ob2-disclosure[open] summary::before { transform: rotate(90deg); }
.ob2-disclosure-body {
margin-top: 12px;
padding-left: 14px;
border-left: 2px solid var(--slate-100);
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- Theme strip ---- */
.ob2-theme-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ob2-theme {
appearance: none;
aspect-ratio: 1;
border-radius: var(--radius);
border: 1px solid var(--slate-200);
cursor: pointer;
transition: border-color .12s ease, transform .12s ease;
}
.ob2-theme:hover { transform: translateY(-1px); }
.ob2-theme[data-theme="modern-glass"] { background: linear-gradient(135deg, var(--slate-900), var(--brand-900)); }
.ob2-theme[data-theme="clean-pro"] { background: var(--ob3-surface); border-color: var(--slate-300); }
.ob2-theme[data-theme="corporate"] { background: linear-gradient(135deg, var(--amber-50), #fcd34d); }
.ob2-theme[data-theme="noir-elite"] { background: linear-gradient(135deg, #18181b, #52525b); }
.ob2-theme.is-selected {
border: 2px solid var(--brand-500);
box-shadow: 0 0 0 2px rgba(124, 58, 237, .25);
}
.ob2-theme-name {
font-size: 12px;
color: var(--slate-500);
}
.ob2-theme-name span { font-weight: 600; color: var(--slate-900); }
/* ---- Buttons ---- */
.ob2-primary {
appearance: none;
border: none;
width: 100%;
padding: 13px 16px;
/* tapsticky.in uses a fully-rounded pill for every button. */
border-radius: 999px;
/* brand-600, not brand-500: white on #e74c3c is 3.82:1 and fails WCAG AA for
normal text. #d33f30 is 4.64:1 and visually the same at button size. The
exact brand red stays the accent token for decorative use. */
background: var(--brand-600);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 15px;
cursor: pointer;
margin-top: 18px;
box-shadow: var(--shadow-soft);
transition: background-color .15s ease, transform .05s ease, opacity .15s ease;
}
.ob2-primary:hover:not(:disabled) { background: var(--brand-700); }
.ob2-primary:active:not(:disabled) { transform: translateY(1px); }
.ob2-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.ob2-primary--success {
background: var(--emerald-500);
box-shadow: 0 12px 24px -12px rgba(16, 185, 129, .45);
}
.ob2-primary--success:hover:not(:disabled) { background: var(--emerald-600); }
.ob2-primary--dark {
background: var(--slate-900);
box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .35);
}
.ob2-primary--dark:hover:not(:disabled) { background: var(--slate-800); }
.ob2-secondary {
appearance: none;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-700);
font: inherit;
font-weight: 600;
font-size: 13px;
padding: 12px 8px;
border-radius: var(--radius);
cursor: pointer;
transition: border-color .12s ease;
}
.ob2-secondary:hover { border-color: var(--brand-300); }
.ob2-secondary--success {
background: var(--emerald-50);
border-color: #a7f3d0;
color: var(--emerald-700);
font-weight: 700;
}
.ob2-secondary--success:hover { background: #d1fae5; }
/* ---- Preview ---- */
.ob2-preview-frame {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--slate-50);
border: 1px solid var(--slate-200);
aspect-ratio: 9 / 16;
max-height: 480px;
margin: 0 auto;
}
.ob2-preview-frame iframe {
width: 100%;
height: 100%;
border: none;
background: var(--ob3-surface);
}
.ob2-preview-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--slate-500);
}
.ts-auth-spinner {
width: 14px;
height: 14px;
border: 2px solid var(--slate-200);
border-top-color: var(--brand-500);
border-radius: 50%;
animation: ts-auth-spin .6s linear infinite;
}
@keyframes ts-auth-spin { to { transform: rotate(360deg); } }
/* ---- Force light-mode tokens on the shared TapStickyAuth widget so it
* inherits v2's light theme regardless of OS preference. ---- */
.ts-auth {
--ts-auth-bg: #ffffff;
--ts-auth-bg-input: #ffffff;
--ts-auth-text: var(--slate-900);
--ts-auth-text-muted: var(--slate-500);
--ts-auth-text-faint: var(--slate-400);
--ts-auth-border: var(--slate-200);
--ts-auth-border-strong: var(--slate-300);
/* brand-600: this fills the submit button under white text, and brand-500
(#e74c3c, the exact site red) is only 3.82:1 against white. */
--ts-auth-accent: var(--brand-600);
--ts-auth-accent-hover: var(--brand-700);
--ts-auth-error: #ef4444;
--ts-auth-success: var(--emerald-500);
--ts-auth-radius: var(--radius);
--ts-auth-radius-lg: var(--radius-lg);
}
.ts-auth-tabs {
background: var(--slate-100);
}
.ts-auth-tab.is-active {
background: var(--ob3-surface);
}
.ts-auth-label {
text-transform: none;
letter-spacing: 0;
}
.ob2-preview-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
gap: 12px;
flex-wrap: wrap;
}
.ob2-url-display {
font-size: 12px;
color: var(--slate-500);
}
.ob2-url { color: var(--slate-900); font-weight: 600; }
/* ---- Toast ---- */
.ob2-toast {
margin-top: 12px;
padding: 10px 14px;
background: var(--emerald-50);
border: 1px solid #a7f3d0;
color: var(--emerald-700);
border-radius: var(--radius);
font-size: 13px;
text-align: center;
font-weight: 500;
}
/* ---- Success screen ---- */
.ob2-success-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--emerald-50);
color: var(--emerald-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin: 24px auto 16px;
}
.ob2-success-card {
margin-top: 18px;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 18px;
text-align: center;
}
.ob2-success-label {
font-size: 12px;
color: var(--slate-400);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.ob2-qr {
width: 128px;
height: 128px;
background: var(--slate-100);
border-radius: var(--radius);
margin: 16px auto 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--slate-300);
font-weight: 600;
font-size: 12px;
}
.ob2-success-actions {
margin-top: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.ob2-later {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ob2-later-label {
font-size: 11px;
font-weight: 600;
color: var(--slate-400);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
margin-bottom: 6px;
}
.ob2-later-btn {
appearance: none;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 13px 16px;
color: var(--slate-700);
font: inherit;
font-weight: 500;
font-size: 14px;
text-align: left;
cursor: pointer;
transition: border-color .12s ease;
}
.ob2-later-btn:hover { border-color: var(--brand-300); }
/* =========================================================================
* v3 onboarding modules
* ========================================================================= */
/* ---- Single-column setup layout ---- */
.ob3-layout { display: block; }
.ob3-form-col { display: block; }
/* Live preview on the Step-3 screen: sits directly above the theme selector
and sticks to the top while the controls (theme / link / publish) scroll
below, so every theme tap updates a preview that stays in view. */
.ob3-preview-rail {
display: block;
position: sticky;
top: 6px;
z-index: 3;
margin: 4px 0 14px;
padding: 8px 0 12px;
background: var(--ob3-surface);
box-shadow: 0 12px 14px -12px rgba(15, 23, 42, 0.22);
}
.ob3-section-title {
margin: 16px 0 4px;
font-size: 14px;
font-weight: 700;
color: var(--slate-900);
}
.ob3-section-sub {
margin: 0 0 10px;
color: var(--slate-500);
font-size: 12px;
}
.ob3-social-primary-label {
font-size: 12px;
font-weight: 600;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
/* ---- Stepper ---- */
.ob3-stepper {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 0 16px;
width: 100%;
}
.ob3-stepper-dot {
appearance: none;
background: transparent;
border: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: default;
font: inherit;
color: inherit;
}
.ob3-stepper-dot:not(:disabled) { cursor: pointer; }
.ob3-stepper-dot:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 4px;
border-radius: 6px;
}
.ob3-stepper-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--slate-300);
background: var(--ob3-surface);
color: var(--slate-500);
font-size: 13px;
font-weight: 600;
line-height: 1;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ob3-stepper-num { display: inline-block; }
.ob3-stepper-check { display: inline-block; font-size: 16px; line-height: 1; }
.ob3-stepper-label {
font-size: 12px;
color: var(--slate-500);
font-weight: 500;
letter-spacing: 0.01em;
}
.ob3-stepper-dot.is-pending .ob3-stepper-circle {
border-color: var(--slate-300);
background: var(--ob3-surface);
color: var(--slate-400);
}
.ob3-stepper-dot.is-pending .ob3-stepper-label { color: var(--slate-400); }
.ob3-stepper-dot.is-active .ob3-stepper-circle {
border-color: var(--brand-500);
background: var(--brand-500);
color: #fff;
}
.ob3-stepper-dot.is-active .ob3-stepper-label { color: var(--slate-900); font-weight: 700; }
.ob3-stepper-dot.is-completed .ob3-stepper-circle {
border-color: var(--brand-500);
background: var(--brand-500);
color: #fff;
}
.ob3-stepper-dot.is-completed .ob3-stepper-label { color: var(--slate-700); font-weight: 600; }
.ob3-stepper-line {
flex: 1;
height: 2px;
position: relative;
background: var(--slate-200);
margin-top: 15px;
border-radius: 1px;
overflow: hidden;
min-width: 16px;
}
.ob3-stepper-line-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--brand-500);
transition: width .3s ease;
}
.ob3-stepper-line.is-filled .ob3-stepper-line-fill { width: 100%; }
/* ---- Image dropzone ---- */
.ob3-upload-slot { display: block; }
/* ---- Compact upload slot (per-link custom icon) ---- */
.ob3-upload-slot--compact { display: inline-block; width: 64px; }
.ob3-upload-slot--compact .ob3-dropzone {
min-height: 64px;
width: 64px;
border-radius: var(--radius);
}
.ob3-upload-slot--compact .ob3-dropzone-empty { gap: 2px; padding: 4px; }
.ob3-upload-slot--compact .ob3-dropzone-title { font-size: 11px; font-weight: 600; }
.ob3-upload-slot--compact .ob3-dropzone-hint { font-size: 9px; line-height: 1.1; }
.ob3-upload-slot--compact .ob3-dropzone-preview { object-fit: contain; background: var(--ob3-surface); }
.ob3-upload-slot--compact .ob3-dropzone-overlay { gap: 4px; }
.ob3-upload-slot--compact .ob3-preview-btn { padding: 3px; }
/* ---- Custom-link icon editor ---- */
.ob3-custom-icon-editor {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 2px;
}
.ob3-custom-icon-buttons {
display: flex;
flex-direction: column;
gap: 6px;
}
.ob3-icon-auto-btn,
.ob3-icon-clear-btn {
border: 1.5px solid var(--slate-200);
border-radius: 10px;
background: var(--ob3-surface);
color: var(--slate-700);
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 7px 11px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.ob3-icon-auto-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.ob3-icon-auto-btn:disabled { opacity: .6; cursor: default; }
.ob3-icon-clear-btn { color: var(--slate-400); }
.ob3-icon-clear-btn:hover { border-color: #ef4444; color: #ef4444; }
.ob3-optional-note { color: var(--slate-400); font-weight: 400; }
.ob3-dropzone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
border: 2px dashed var(--slate-300);
border-radius: var(--radius-lg);
background: var(--slate-50);
color: var(--slate-500);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
overflow: hidden;
}
.ob3-dropzone:hover,
.ob3-dropzone:focus-visible {
border-color: var(--brand-500);
background: var(--brand-50);
outline: none;
}
.ob3-dropzone.drag-over,
.ob3-dropzone.is-dragover {
border-color: var(--brand-600);
background: var(--brand-50);
}
.ob3-dropzone-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 20px;
text-align: center;
}
.ob3-dropzone-icon { color: var(--slate-400); }
/* When showing the live auto-avatar placeholder (initials disc). */
.ob3-dropzone-icon.ob3-dropzone-avatar { color: inherit; line-height: 0; }
.ob3-dropzone-icon.ob3-dropzone-avatar svg {
display: block;
border-radius: 50%;
box-shadow: 0 3px 10px -3px rgba(15, 23, 42, 0.3);
}
.ob3-dropzone-title { font-weight: 600; color: var(--slate-700); font-size: 14px; }
.ob3-dropzone-hint { font-size: 12px; color: var(--slate-400); }
.ob3-dropzone.has-image {
border-style: solid;
background: var(--ob3-surface);
}
.ob3-dropzone-filled {
position: relative;
width: 100%;
height: 100%;
min-height: 140px;
}
.ob3-dropzone-preview,
.ob3-image-preview {
width: 100%;
height: 100%;
min-height: 140px;
object-fit: cover;
display: block;
}
.ob3-dropzone-overlay {
position: absolute;
inset: auto 0 0 0;
display: flex;
justify-content: center;
gap: 8px;
padding: 8px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
}
.ob3-preview-btn {
appearance: none;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.55);
color: #fff;
border-radius: 999px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.ob3-preview-btn:hover { background: rgba(0,0,0,0.75); border-color: #fff; }
.ob3-preview-btn-danger { background: rgba(220,38,38,0.85); }
.ob3-preview-btn-danger:hover { background: rgba(220,38,38,1); }
/* Compression overlay (used by image-upload module) */
.ob3-compression-overlay {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 9998;
}
.ob3-compression-modal {
background: var(--ob3-surface);
padding: 24px 32px;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 240px;
}
.ob3-compression-spinner {
width: 28px;
height: 28px;
border: 3px solid var(--slate-200);
border-top-color: var(--brand-500);
border-radius: 50%;
animation: ts-auth-spin .8s linear infinite;
}
.ob3-compression-message {
font-size: 13px;
color: var(--slate-700);
font-weight: 500;
}
.ob3-compression-progress {
width: 100%;
height: 6px;
background: var(--slate-200);
border-radius: 3px;
overflow: hidden;
}
.ob3-compression-progress-bar {
height: 100%;
background: var(--brand-500);
width: 0%;
transition: width .25s ease;
}
/* Cropper modal */
.ob3-cropper-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.ob3-cropper-modal[hidden] { display: none; }
.ob3-cropper-backdrop {
position: absolute;
inset: 0;
background: rgba(15,23,42,0.7);
}
.ob3-cropper-content {
position: relative;
background: var(--ob3-surface);
border-radius: var(--radius-lg);
padding: 16px;
width: min(560px, 92vw);
max-height: 90vh;
display: flex;
flex-direction: column;
gap: 12px;
}
.ob3-cropper-stage {
background: #000;
border-radius: var(--radius);
overflow: hidden;
max-height: 60vh;
}
.ob3-cropper-stage img { max-width: 100%; display: block; }
.ob3-cropper-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.ob3-cropper-actions button {
appearance: none;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-700);
font: inherit;
font-weight: 600;
font-size: 13px;
padding: 8px 14px;
border-radius: var(--radius);
cursor: pointer;
}
.ob3-cropper-actions button.primary {
background: var(--brand-600);
border-color: var(--brand-600);
color: #fff;
}
.ob3-cropper-actions button.primary:hover { background: var(--brand-700); }
/* ---- Social links region ---- */
.ob3-socials-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.ob3-socials-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.ob3-socials-empty {
text-align: center;
font-size: 13px;
color: var(--slate-400);
padding: 12px;
border: 1px dashed var(--slate-200);
border-radius: var(--radius);
}
.ob3-social-row {
display: grid;
grid-template-columns: auto auto 1fr auto auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
border-left: 3px solid var(--platform-color, var(--brand-500));
transition: box-shadow .15s ease, background-color .15s ease;
}
.ob3-social-row.is-flash { background: var(--brand-50); }
.ob3-social-row.is-ghost { opacity: 0.4; }
.ob3-social-row.is-chosen { box-shadow: 0 0 0 2px var(--brand-300); }
.ob3-social-row.is-keyboard-reorder { box-shadow: 0 0 0 2px var(--brand-500); }
.ob3-social-grip {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: grab;
color: var(--slate-400);
font-size: 16px;
user-select: none;
padding: 4px;
}
.ob3-social-grip:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
border-radius: 4px;
}
.ob3-social-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--platform-color, var(--brand-500));
color: #fff;
font-size: 16px;
}
.ob3-social-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.ob3-social-platform {
font-size: 13px;
font-weight: 600;
color: var(--slate-900);
}
.ob3-social-handle {
font-size: 12px;
color: var(--slate-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ob3-social-edit,
.ob3-social-remove {
appearance: none;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
color: var(--slate-500);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.ob3-social-edit:hover { border-color: var(--brand-300); color: var(--brand-700); }
.ob3-social-remove:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.ob3-socials-picker {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
padding: 12px;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
}
@media (max-width: 480px) {
.ob3-socials-picker { grid-template-columns: repeat(3, 1fr); }
}
.ob3-platform-tile {
appearance: none;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 10px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font: inherit;
font-size: 11px;
color: var(--slate-700);
cursor: pointer;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ob3-platform-tile:hover {
transform: translateY(-1px);
border-color: var(--platform-color, var(--brand-500));
box-shadow: 0 4px 12px -6px rgba(15,23,42,0.18);
}
.ob3-platform-tile.is-added {
opacity: 0.5;
cursor: default;
}
.ob3-platform-tile ion-icon {
font-size: 22px;
color: var(--platform-color, var(--brand-500));
}
/* Real brand logos (Zomato, Swiggy, etc.) rendered as ![]()
in place of an
Ionicon glyph. Sized to match the 22px Ionicon in the picker tile. */
.ob3-platform-tile img.ob3-brand-img {
width: 22px;
height: 22px;
object-fit: contain;
}
.ob3-platform-tile-label { font-weight: 600; }
/* Brand-logo variant of the 32px social-icon chip used in the add/edit input
row and saved-link rows. A coloured logo needs a white chip to stay legible,
so override the brand-colour fill with white + a hairline border. */
.ob3-social-icon.has-brand-img {
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
}
.ob3-social-icon.has-brand-img img.ob3-brand-img {
width: 20px;
height: 20px;
object-fit: contain;
}
.ob3-socials-input,
.ob3-socials-custom {
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 12px;
}
.ob3-socials-input-row,
.ob3-socials-custom-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
}
.ob3-socials-input-fields,
.ob3-socials-custom-fields {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 6px;
}
.ob3-socials-input-label {
font-size: 11px;
font-weight: 600;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ob3-socials-input-control {
appearance: none;
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
padding: 10px 12px;
font: inherit;
font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */;
color: var(--slate-900);
background: var(--ob3-surface);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob3-socials-input-control:focus {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.ob3-socials-input-control.is-error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.ob3-socials-input-control.is-valid {
border-color: var(--emerald-500);
}
.ob3-socials-input-hint { font-size: 12px; color: var(--slate-400); }
.ob3-socials-input-error { font-size: 12px; color: #b91c1c; min-height: 14px; }
.ob3-socials-input-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.ob3-socials-input-cancel,
.ob3-socials-input-confirm {
appearance: none;
border-radius: var(--radius);
padding: 8px 14px;
font: inherit;
font-weight: 600;
font-size: 13px;
cursor: pointer;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-700);
}
.ob3-socials-input-confirm {
background: var(--brand-600);
border-color: var(--brand-600);
color: #fff;
}
.ob3-socials-input-confirm:hover:not(:disabled) { background: var(--brand-700); }
.ob3-socials-input-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.ob3-socials-add {
appearance: none;
border: 1px dashed var(--slate-300);
background: var(--ob3-surface);
color: var(--brand-700);
font: inherit;
font-weight: 600;
font-size: 13px;
padding: 10px 12px;
border-radius: var(--radius);
cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
.ob3-socials-add:hover { border-color: var(--brand-500); background: var(--brand-50); }
/* ---- Bio editor ---- */
.ob3-bio {
display: flex;
flex-direction: column;
gap: 6px;
}
.ob3-bio-label {
font-size: 12px;
font-weight: 500;
color: var(--slate-500);
}
.ob3-bio-textarea {
appearance: none;
width: 100%;
min-height: 72px;
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
background: var(--ob3-surface);
padding: 12px;
font: inherit;
font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */;
color: var(--slate-900);
resize: none;
transition: border-color .15s ease, box-shadow .15s ease;
line-height: 1.5;
}
.ob3-bio-textarea:focus {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.ob3-bio-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.ob3-bio-counter { color: var(--slate-400); font-variant-numeric: tabular-nums; }
.ob3-bio-counter.is-ok { color: var(--slate-400); }
.ob3-bio-counter.is-warn { color: var(--amber-600); }
.ob3-bio-counter.is-danger { color: #b91c1c; font-weight: 600; }
.ob3-bio-warning {
color: var(--amber-600);
font-size: 12px;
}
.ob3-bio-examples {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.ob3-bio-example-chip {
appearance: none;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-700);
font: inherit;
font-size: 12px;
font-weight: 500;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
.ob3-bio-example-chip:hover {
border-color: var(--brand-300);
background: var(--brand-50);
color: var(--brand-700);
}
/* ---- Live preview ---- */
.ob3-preview-host { display: block; }
.ob3-preview-frame {
position: relative;
background: var(--slate-50);
border-radius: var(--radius-xl);
padding: 16px;
border: 1px solid var(--slate-200);
}
.ob3-preview-device {
width: 100%;
max-width: 280px;
aspect-ratio: 9 / 18;
margin: 0 auto;
border-radius: 36px;
background: var(--slate-900);
padding: 12px;
box-shadow: 0 12px 32px -16px rgba(15,23,42,0.5);
position: relative;
}
.ob3-preview-screen {
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--ob3-surface);
padding: 20px 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
/* Theme variants on the preview device */
.ob3-preview-device[data-theme="modern-glass"] .ob3-preview-screen {
background: linear-gradient(160deg, #1f1f2e 0%, #2b2b44 100%);
color: #fff;
}
.ob3-preview-device[data-theme="clean-pro"] .ob3-preview-screen {
background: #fafafa;
color: #242424;
}
.ob3-preview-device[data-theme="corporate"] .ob3-preview-screen {
background: linear-gradient(160deg, #fff7e6 0%, #fbe8c5 100%);
color: #6b4a14;
}
.ob3-preview-device[data-theme="noir-elite"] .ob3-preview-screen {
background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
color: #f3d27a;
}
.ob3-preview-photo {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background-size: cover;
background-position: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ob3-preview-photo svg { width: 80px; height: 80px; }
.ob3-preview-name {
font-size: 18px;
font-weight: 700;
margin: 6px 0 0;
}
.ob3-preview-name.is-placeholder { opacity: 0.5; }
.ob3-preview-title {
font-size: 13px;
opacity: 0.8;
margin: 0;
}
.ob3-preview-bio {
font-size: 12px;
opacity: 0.85;
margin: 4px 0;
line-height: 1.4;
}
.ob3-preview-actions { margin-top: 8px; width: 100%; }
.ob3-preview-cta {
appearance: none;
border: none;
background: rgba(255,255,255,0.15);
color: inherit;
font: inherit;
font-weight: 600;
font-size: 12px;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
width: 100%;
}
.ob3-preview-device[data-theme="clean-pro"] .ob3-preview-cta {
background: var(--brand-600);
color: #fff;
}
.ob3-preview-links {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
margin-top: 8px;
}
.ob3-preview-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255,255,255,0.1);
color: inherit;
text-decoration: none;
font-size: 12px;
}
.ob3-preview-device[data-theme="clean-pro"] .ob3-preview-link {
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
}
.ob3-preview-link-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.ob3-preview-redirect-card {
background: rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 18px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ob3-preview-redirect-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
}
.ob3-preview-redirect-label { font-size: 13px; font-weight: 600; }
.ob3-preview-redirect-handle { font-size: 12px; opacity: 0.8; }
/* Mobile preview FAB + bottom sheet */
.ob3-preview-host--mobile { position: relative; }
.ob3-preview-fab {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 8000;
appearance: none;
border: none;
background: var(--brand-600);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 13px;
padding: 10px 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 12px 24px -8px rgba(124,58,237,.45);
cursor: pointer;
}
.ob3-preview-fab.is-active { background: var(--brand-700); }
.ob3-preview-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--ob3-surface);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
box-shadow: 0 -8px 32px -8px rgba(15,23,42,.35);
transform: translateY(100%);
transition: transform .25s ease;
z-index: 8001;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.ob3-preview-sheet.is-open { transform: translateY(0); }
.ob3-preview-sheet-handle {
width: 40px;
height: 4px;
background: var(--slate-300);
border-radius: 2px;
margin: 10px auto 0;
cursor: pointer;
}
.ob3-preview-sheet-body { padding: 16px; overflow-y: auto; }
/* ---- Theme picker ---- */
.ob3-theme-picker {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
margin: 0;
border: 0;
min-width: 0; /* allow the scroll track to shrink inside flex/grid parents */
}
/* Horizontally-scrollable row of swatches. Holds the full theme set without
wrapping or shrinking swatches below a tappable size on narrow screens. */
.ob3-theme-track {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: 6px 2px 10px;
scrollbar-width: thin;
scrollbar-color: var(--brand-500) transparent;
}
.ob3-theme-track::-webkit-scrollbar { height: 6px; }
.ob3-theme-track::-webkit-scrollbar-thumb {
background: rgba(124, 58, 237, 0.4);
border-radius: 999px;
}
.ob3-theme-track::-webkit-scrollbar-track { background: transparent; }
.ob3-theme-swatch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 0 0 auto; /* fixed width; scroll instead of shrink/wrap */
scroll-snap-align: start;
padding: 8px 6px 10px;
background: transparent;
border: 2px solid transparent;
border-radius: 14px;
cursor: pointer;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
outline: none;
font: inherit;
color: inherit;
}
.ob3-theme-swatch:hover,
.ob3-theme-swatch:focus-visible {
transform: translateY(-2px);
border-color: rgba(124,58,237,0.35);
}
.ob3-theme-swatch.is-selected {
border-color: var(--brand-500);
box-shadow: 0 6px 16px rgba(124,58,237,0.18);
}
.ob3-theme-swatch.is-selected::after {
content: '\2713';
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--brand-500);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 22px;
text-align: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.ob3-theme-mini {
position: relative;
display: block;
width: 80px;
height: 140px;
border-radius: 14px;
overflow: hidden;
background: #1a1a1a;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.15);
}
.ob3-theme-mini-avatar {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.ob3-theme-mini-name {
position: absolute;
top: 50px;
left: 0;
right: 0;
text-align: center;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.85);
letter-spacing: 0.5px;
}
.ob3-theme-mini-line {
position: absolute;
left: 14px;
right: 14px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.18);
}
.ob3-theme-mini-line:nth-of-type(3) { top: 86px; }
.ob3-theme-mini-line.short { top: 100px; right: 30px; }
.ob3-theme-swatch[data-theme="modern-glass"] .ob3-theme-mini {
background: linear-gradient(160deg, #1f1f2e 0%, #2b2b44 100%);
}
.ob3-theme-swatch[data-theme="clean-pro"] .ob3-theme-mini {
background: #fafafa;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.08);
}
.ob3-theme-swatch[data-theme="clean-pro"] .ob3-theme-mini-name { color: #222; }
.ob3-theme-swatch[data-theme="clean-pro"] .ob3-theme-mini-line { background: rgba(0,0,0,0.1); }
.ob3-theme-swatch[data-theme="corporate"] .ob3-theme-mini {
background: linear-gradient(160deg, #fff7e6 0%, #fbe8c5 100%);
}
.ob3-theme-swatch[data-theme="corporate"] .ob3-theme-mini-avatar {
background: linear-gradient(135deg, #d4a24c, #a87427);
}
.ob3-theme-swatch[data-theme="corporate"] .ob3-theme-mini-name { color: #6b4a14; }
.ob3-theme-swatch[data-theme="corporate"] .ob3-theme-mini-line { background: rgba(168,116,39,0.28); }
.ob3-theme-swatch[data-theme="noir-elite"] .ob3-theme-mini {
background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}
.ob3-theme-swatch[data-theme="noir-elite"] .ob3-theme-mini-avatar {
background: linear-gradient(135deg, #f3d27a, #b58a35);
}
.ob3-theme-swatch[data-theme="noir-elite"] .ob3-theme-mini-name { color: #f3d27a; }
.ob3-theme-swatch[data-theme="noir-elite"] .ob3-theme-mini-line { background: rgba(243,210,122,0.4); }
/* Palladio: ink-green cover with a gold hairline frame. The inset ring is what
distinguishes it at swatch size from Obsidian's flat black. */
.ob3-theme-swatch[data-theme="palladio"] .ob3-theme-mini {
background: linear-gradient(168deg, #3C5548 0%, #243329 58%, #16201B 100%);
box-shadow: inset 0 0 0 1px rgba(212,175,56,0.34);
}
.ob3-theme-swatch[data-theme="palladio"] .ob3-theme-mini-avatar {
background: linear-gradient(135deg, #E2CD8A, #D4AF38);
}
.ob3-theme-swatch[data-theme="palladio"] .ob3-theme-mini-name { color: #E2CD8A; }
.ob3-theme-swatch[data-theme="palladio"] .ob3-theme-mini-line { background: rgba(212,175,56,0.38); }
/* Layout theme: scroll-snap (full-screen indigo/violet scrolling panels). The
stacked colour split evokes the snap-section layout. */
.ob3-theme-swatch[data-theme="scroll-snap"] .ob3-theme-mini {
background: linear-gradient(180deg, #0f0c29 0%, #302b63 49%, #6366f1 51%, #312e81 100%);
}
.ob3-theme-swatch[data-theme="scroll-snap"] .ob3-theme-mini-avatar {
background: linear-gradient(135deg, #c7d2fe, #818cf8);
}
.ob3-theme-swatch[data-theme="scroll-snap"] .ob3-theme-mini-name { color: #e0e7ff; }
.ob3-theme-swatch[data-theme="scroll-snap"] .ob3-theme-mini-line { background: rgba(199,210,254,0.45); }
/* Layout theme: timeline (near-black with a cyan vertical rail). The ::before
draws the timeline spine that defines the layout. */
.ob3-theme-swatch[data-theme="timeline"] .ob3-theme-mini {
background: linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 100%);
}
.ob3-theme-swatch[data-theme="timeline"] .ob3-theme-mini::before {
content: '';
position: absolute;
top: 16px;
bottom: 16px;
left: 18px;
width: 2px;
background: linear-gradient(to bottom, #22d3ee, rgba(34,211,238,0.25));
}
.ob3-theme-swatch[data-theme="timeline"] .ob3-theme-mini-avatar {
left: 18px;
transform: translateX(-50%);
background: #22d3ee;
}
.ob3-theme-swatch[data-theme="timeline"] .ob3-theme-mini-name {
color: #a5f3fc;
text-align: left;
padding-left: 32px;
}
.ob3-theme-swatch[data-theme="timeline"] .ob3-theme-mini-line { background: rgba(165,243,252,0.25); }
.ob3-theme-label {
font-size: 13px;
font-weight: 600;
color: var(--slate-900);
}
.ob3-theme-tagline {
min-height: 1.4em;
margin-top: 2px;
font-size: 13px;
color: var(--slate-500);
text-align: center;
transition: opacity .15s ease;
}
/* ---- Autosave indicator ---- */
#ob3-autosave-indicator {
position: relative;
min-height: 0;
}
.ob3-autosave-pill {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
padding: 6px 12px;
border-radius: 9999px;
font: 500 12px/1.2 var(--font-sans);
background: var(--slate-500);
color: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transition: opacity .4s ease;
opacity: 0;
user-select: none;
}
.ob3-autosave-pill[data-status="saving"] { background: var(--slate-500); }
.ob3-autosave-pill[data-status="saved-local"] { background: #16a34a; }
.ob3-autosave-pill[data-status="saved-server"]{ background: var(--brand-600); }
.ob3-autosave-pill[data-status="failed"] { background: #dc2626; cursor: pointer; }
/* ---- Inline validation visuals ---- */
.is-valid {
border-color: var(--emerald-500) !important;
}
.is-invalid {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.ob3-field-error {
display: block;
margin-top: 4px;
font-size: 12px;
color: #b91c1c;
min-height: 14px;
}
.ob3-field-check {
display: inline-block;
color: var(--emerald-500);
font-weight: 700;
margin-left: 6px;
}
.ob3-field-positive,
.ob3-positive-toast {
display: inline-block;
margin-top: 4px;
font-size: 12px;
color: var(--emerald-700);
background: var(--emerald-50);
padding: 2px 8px;
border-radius: 999px;
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.ob3-stepper-circle,
.ob3-stepper-line-fill,
.ob3-dropzone,
.ob3-preview-btn,
.ob3-cropper-actions button,
.ob3-social-row,
.ob3-platform-tile,
.ob3-socials-input-control,
.ob3-bio-textarea,
.ob3-preview-sheet,
.ob3-theme-swatch,
.ob3-theme-tagline,
.ob3-autosave-pill,
.ob3-compression-progress-bar {
transition: none !important;
}
.ob3-theme-swatch:hover,
.ob3-theme-swatch:focus-visible,
.ob3-dropzone:hover,
.ob3-platform-tile:hover {
transform: none !important;
}
}
/* =========================================================================
* P1 + P2 module styles (integrated from onboarding/*.js + preview-themes)
* celebrate, welcome, add-fields, preview-tabs, nudges, extras, skeletons
* ========================================================================= */
/* ---- Intent reassurance line (P1.1) ---- */
.ob2-intent-reassure {
margin-top: 14px;
color: var(--slate-500);
line-height: 1.5;
}
/* ---- P1.4 Celebration: confetti canvas + animated checkmark ---- */
.ob3-celebrate-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
}
.ob3-celebrate-check {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ob3-celebrate-check-ring {
stroke-dasharray: 208;
stroke-dashoffset: 208;
transform-origin: 50% 50%;
}
.ob3-celebrate-check-mark {
stroke-dasharray: 56;
stroke-dashoffset: 56;
}
.ob3-celebrate-check.is-drawn .ob3-celebrate-check-ring {
transition: stroke-dashoffset 0.4s ease-out;
stroke-dashoffset: 0;
}
.ob3-celebrate-check.is-drawn .ob3-celebrate-check-mark {
transition: stroke-dashoffset 0.6s ease-out 0.25s;
stroke-dashoffset: 0;
}
.ob3-celebrate-check.is-faded {
opacity: 0;
animation: ob3CelebrateFade 0.45s ease forwards;
}
.ob3-celebrate-check.is-faded .ob3-celebrate-check-ring,
.ob3-celebrate-check.is-faded .ob3-celebrate-check-mark {
stroke-dashoffset: 0;
}
@keyframes ob3CelebrateFade {
to { opacity: 1; }
}
/* ---- P1.5 Share-first: fullscreen QR bottom-sheet ---- */
.ob3-qr-sheet {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity 0.22s ease;
}
.ob3-qr-sheet.is-open {
opacity: 1;
}
.ob3-qr-sheet-scrim {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
}
.ob3-qr-sheet-panel {
position: relative;
width: 100%;
max-width: 420px;
margin: 0 12px;
padding: 28px 24px 36px;
box-sizing: border-box;
background: var(--ob3-surface);
border-radius: 24px 24px 0 0;
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.22);
text-align: center;
transform: translateY(24px);
transition: transform 0.22s ease;
font-family: 'Inter', system-ui, sans-serif;
}
.ob3-qr-sheet.is-open .ob3-qr-sheet-panel {
transform: translateY(0);
}
.ob3-qr-sheet-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: var(--slate-100, #f1f5f9);
color: var(--slate-600, #475569);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease;
}
.ob3-qr-sheet-close:hover,
.ob3-qr-sheet-close:focus-visible {
background: var(--slate-200, var(--slate-200));
outline: none;
}
.ob3-qr-sheet-title {
margin: 4px 0 4px;
font-size: 20px;
font-weight: 700;
color: var(--slate-900, #1f1f1f);
}
.ob3-qr-sheet-sub {
margin: 0 0 20px;
font-size: 14px;
color: var(--slate-500, #8e8e8f);
}
.ob3-qr-sheet-code {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px;
background: var(--ob3-surface);
border: 1px solid var(--slate-200, var(--slate-200));
border-radius: 16px;
min-height: 240px;
min-width: 240px;
}
.ob3-qr-sheet-code img,
.ob3-qr-sheet-code canvas {
display: block;
}
.ob3-qr-sheet-url {
margin: 16px 0 0;
font-size: 13px;
color: var(--brand-500, #e74c3c);
word-break: break-all;
}
.ob3-qr-sheet-fallback {
color: var(--brand-500, #e74c3c);
font-weight: 600;
text-decoration: none;
}
/* ---- P1.3 Welcome overlay ---- */
.ob3-welcome-overlay {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: 24px; text-align: center; cursor: pointer;
background: linear-gradient(150deg, var(--brand-500) 0%, var(--brand-700) 100%);
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
opacity: 0; transition: opacity 220ms ease;
}
.ob3-welcome-overlay.is-active { opacity: 1; }
.ob3-welcome-overlay.is-leaving { opacity: 0; }
.ob3-welcome-card {
display: flex; flex-direction: column; align-items: center; gap: 14px;
transform: translateY(22px); opacity: 0;
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms ease;
}
.ob3-welcome-overlay.is-active .ob3-welcome-card { transform: translateY(0); opacity: 1; }
.ob3-welcome-avatar {
width: 88px; height: 88px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.18);
border: 2px solid rgba(255, 255, 255, 0.55);
color: #fff; font-size: 34px; font-weight: 700; letter-spacing: 0.5px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
}
.ob3-welcome-title {
margin: 4px 0 0; color: #fff; font-size: 26px; font-weight: 700;
line-height: 1.2; letter-spacing: -0.01em;
/* Never let a long name/email overflow the card horizontally. */
max-width: 18rem; overflow-wrap: anywhere; word-break: break-word;
}
.ob3-welcome-sub {
margin: 0; color: rgba(255, 255, 255, 0.86);
font-size: 15px; font-weight: 500; max-width: 16rem;
}
.ob3-welcome-overlay.is-reduced .ob3-welcome-card { transform: none; }
/* ---- P1.2 Add-to-card overlay (bottom-sheet on mobile, popover on desktop) ---- */
/* Desktop: float as a popover anchored to the trigger, not a docked sheet */
/* ---- P1.6 teaching empty state ---- */
.ob3-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 20px;
text-align: center;
background: var(--slate-50);
border: 1.5px dashed var(--slate-200);
border-radius: var(--radius-lg);
}
.ob3-empty-icon {
font-size: 32px;
line-height: 1;
}
.ob3-empty-title {
font-size: 15px;
font-weight: 700;
color: var(--slate-800);
}
.ob3-empty-hint {
font-size: 13.5px;
color: var(--slate-500);
max-width: 32ch;
}
.ob3-empty-cta {
margin-top: 6px;
padding: 9px 18px;
font: inherit;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--brand-500);
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.ob3-empty-cta:hover,
.ob3-empty-cta:focus-visible {
background: var(--brand-600);
transform: translateY(-1px);
outline: none;
}
/* ---- P2.9 Preview tabs (Live / Exact segmented control) ---- */
.ob3-preview-col { display: flex; flex-direction: column; gap: 10px; }
.ob3-preview-tabs-slot { width: 100%; }
.ob3-preview-tabs-host { display: block; }
.ob3-preview-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
background: var(--slate-100);
border-radius: 999px;
border: 1px solid var(--slate-200);
}
.ob3-preview-tab {
appearance: none;
border: 0;
background: transparent;
color: var(--slate-600);
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 8px 18px;
min-height: 36px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ob3-preview-tab:hover { color: var(--slate-900); }
.ob3-preview-tab.is-active {
background: var(--ob3-surface);
color: var(--brand-600);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.ob3-preview-tab:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
.ob3-preview-exact {
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
}
.ob3-preview-iframe {
width: 100%;
/* Compact so the sticky preview + the theme swatch row are visible together:
tap a theme below and watch it change in the preview above, no scrolling. */
height: min(46vh, 430px);
border: 0;
border-radius: var(--radius-lg);
background: var(--ob3-surface);
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.2);
}
.ob3-preview-rail--hidden { display: none !important; }
/* ---- P2.7 First-link nudge + P2.2 city chips ---- */
.ob3-nudge-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0;
padding: 14px 40px 14px 14px;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-left: 3px solid var(--brand-500);
border-radius: 14px;
text-align: left;
animation: ob3-nudge-in 280ms ease;
}
@keyframes ob3-nudge-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ob3-nudge-card.is-instant { animation: none; }
.ob3-nudge-icon {
flex: 0 0 auto;
font-size: 20px;
line-height: 1.2;
}
.ob3-nudge-body {
flex: 1 1 auto;
min-width: 0;
}
.ob3-nudge-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--slate-900);
}
.ob3-nudge-copy {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.4;
color: var(--slate-500);
}
.ob3-nudge-action {
display: inline-flex;
align-items: center;
padding: 7px 14px;
background: var(--brand-500);
color: #fff;
border: 0;
border-radius: 9999px;
font: 600 13px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
cursor: pointer;
transition: filter 0.15s ease, transform 0.15s ease;
}
.ob3-nudge-action:hover { filter: brightness(1.06); }
.ob3-nudge-action:active { transform: translateY(1px); }
.ob3-nudge-action:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
.ob3-nudge-dismiss {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--slate-400);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ob3-nudge-dismiss:hover {
background: var(--slate-100);
color: var(--slate-700);
}
.ob3-nudge-dismiss:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 1px;
}
.ob3-city-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.ob3-city-chips-label {
font-size: 12px;
color: var(--slate-400);
}
.ob3-city-chip {
padding: 5px 11px;
background: var(--slate-100);
border: 1px solid var(--slate-200);
border-radius: 9999px;
color: var(--slate-700);
font: 500 12px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ob3-city-chip:hover {
background: var(--ob3-surface);
border-color: var(--brand-500);
color: var(--brand-500);
}
.ob3-city-chip:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
/* ---- P2.1 Avatar generator (grid) + camera button ---- */
.ob3-avatar-gen-slot { margin-top: 8px; }
.ob3-avatar-gen { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ob3-avatar-gen-btn,
.ob3-camera-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
min-height: 44px;
font: inherit;
font-size: 14px;
font-weight: 600;
color: var(--brand-600);
background: var(--brand-50);
border: 1.5px solid var(--brand-200);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ob3-avatar-gen-btn:hover,
.ob3-camera-btn:hover {
background: var(--brand-100);
border-color: var(--brand-300);
transform: translateY(-1px);
}
.ob3-avatar-gen-btn:focus-visible,
.ob3-camera-btn:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
.ob3-avatar-gen-btn.is-loading { opacity: 0.7; cursor: progress; }
.ob3-avatar-gen-spark { font-size: 16px; }
.ob3-avatar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ob3-avatar-tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
overflow: hidden;
background: var(--slate-100);
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ob3-avatar-tile:hover,
.ob3-avatar-tile:focus-visible {
border-color: var(--brand-400, var(--brand-500));
box-shadow: var(--shadow-soft);
transform: translateY(-1px);
outline: none;
}
.ob3-avatar-tile-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ob3-avatar-tile-skeleton {
cursor: default;
background: linear-gradient(100deg, var(--slate-100) 30%, var(--slate-200) 50%, var(--slate-100) 70%);
background-size: 200% 100%;
animation: ob3-shimmer 1.2s ease-in-out infinite;
}
.ob3-camera-input { display: none; }
/* ---- P2.4 PIN protection: disclosure + switch + PIN cells ---- */
.ob3-pin-section { margin-top: 4px; }
.ob3-disclosure {
border: 1px solid var(--slate-200);
border-radius: var(--radius);
background: var(--slate-50);
overflow: hidden;
}
.ob3-disclosure-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
min-height: 44px;
cursor: pointer;
list-style: none;
font-size: 14px;
font-weight: 600;
color: var(--slate-700);
}
.ob3-disclosure-summary::-webkit-details-marker { display: none; }
.ob3-disclosure-chevron {
transition: transform 0.18s ease;
color: var(--slate-400);
}
.ob3-disclosure[open] .ob3-disclosure-chevron { transform: rotate(180deg); }
.ob3-disclosure-body {
padding: 4px 14px 14px;
}
.ob3-pin-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
}
.ob3-pin-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.ob3-pin-toggle-label { font-size: 14px; font-weight: 600; color: var(--slate-800); }
.ob3-pin-toggle-hint { font-size: 12px; color: var(--slate-500); }
.ob3-switch {
position: relative;
flex: 0 0 auto;
display: inline-flex;
width: 46px;
height: 28px;
}
.ob3-switch-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.ob3-switch-track {
position: absolute;
inset: 0;
background: var(--slate-300);
border-radius: 999px;
transition: background 0.18s ease;
}
.ob3-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: var(--ob3-surface);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
transition: transform 0.18s ease;
}
.ob3-switch-input:checked ~ .ob3-switch-track { background: var(--brand-500); }
.ob3-switch-input:checked ~ .ob3-switch-track .ob3-switch-thumb { transform: translateX(18px); }
.ob3-switch-input:focus-visible ~ .ob3-switch-track {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
.ob3-pin-panel { margin-top: 10px; }
.ob3-pin-cells {
display: flex;
gap: 10px;
}
.ob3-pin-cell {
flex: 0 0 auto;
display: inline-flex;
}
.ob3-pin-cell-input {
width: 48px;
height: 56px;
text-align: center;
font-size: 22px;
font-weight: 700;
color: var(--slate-900);
background: var(--ob3-surface);
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ob3-pin-cell-input:focus {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px var(--brand-100);
}
.ob3-pin-note {
display: block;
margin-top: 8px;
font-size: 12px;
color: var(--slate-400);
}
/* ---- Skeletons (shimmer placeholders) ---- */
.is-skeleton-host { position: relative; }
.ob3-skeleton {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.ob3-sk-block { width: 100%; }
.ob3-sk-block--preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 28px 20px;
}
.ob3-sk-bar,
.ob3-sk-link,
.ob3-sk-tile,
.ob3-sk-avatar {
background: linear-gradient(100deg, var(--slate-100) 30%, var(--slate-200) 50%, var(--slate-100) 70%);
background-size: 200% 100%;
animation: ob3-shimmer 1.2s ease-in-out infinite;
border-radius: 8px;
}
.ob3-sk-bar { height: 12px; width: 70%; }
.ob3-sk-bar--name { width: 55%; height: 16px; }
.ob3-sk-bar--title { width: 40%; }
.ob3-sk-bar--bio { width: 80%; }
.ob3-sk-links {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 8px;
}
.ob3-sk-link { height: 40px; width: 100%; border-radius: 12px; }
.ob3-sk-block--socials { width: 100%; padding: 8px 0; }
.ob3-sk-row { display: flex; align-items: center; gap: 12px; }
.ob3-sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.ob3-sk-row-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.ob3-sk-bar--row-a { width: 60%; }
.ob3-sk-bar--row-b { width: 40%; }
.ob3-sk-block--themes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
}
.ob3-sk-tile { aspect-ratio: 80 / 140; border-radius: 14px; }
@keyframes ob3-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- Reduced motion for P1 + P2 modules ---- */
@media (prefers-reduced-motion: reduce) {
.ob3-qr-sheet,
.ob3-qr-sheet-panel,
.ob3-qr-sheet-close,
.ob3-celebrate-check.is-drawn .ob3-celebrate-check-ring,
.ob3-celebrate-check.is-drawn .ob3-celebrate-check-mark,
.ob3-welcome-overlay,
.ob3-welcome-card,
.ob3-empty-cta,
.ob3-nudge-card,
.ob3-nudge-action,
.ob3-nudge-dismiss,
.ob3-city-chip,
.ob3-preview-tab,
.ob3-avatar-gen-btn,
.ob3-camera-btn,
.ob3-avatar-tile,
.ob3-disclosure-chevron,
.ob3-switch-track,
.ob3-switch-thumb,
.ob3-pin-cell-input {
transition: none !important;
}
.ob3-qr-sheet-panel { transform: none; }
.ob3-welcome-overlay .ob3-welcome-card { transform: none; }
.ob3-nudge-card { animation: none; }
.ob3-empty-cta:hover,
.ob3-empty-cta:focus-visible,
.ob3-avatar-gen-btn:hover,
.ob3-camera-btn:hover,
.ob3-avatar-tile:hover { transform: none; }
.ob3-sk-bar,
.ob3-sk-link,
.ob3-sk-tile,
.ob3-sk-avatar,
.ob3-avatar-tile-skeleton { animation: none; }
}
/* ============================================================
Chip-driven progressive disclosure (portfolio step 3)
============================================================ */
.ob3-chips-region { margin: 20px 0 8px; }
.ob3-chips-label,
.ob3-theme-region > .ob3-chips-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate-400);
margin-bottom: 10px;
}
.ob3-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ob3-chip {
appearance: none;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-700);
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 9px 14px;
border-radius: 999px;
cursor: pointer;
transition: transform .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
white-space: nowrap;
}
.ob3-chip:hover {
transform: translateY(-1px);
border-color: var(--brand-300, #c4b5fd);
box-shadow: 0 4px 12px -6px rgba(124, 58, 237, .35);
}
.ob3-chip:active { transform: translateY(0); }
.ob3-chip:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
/* An added chip is ON, not disabled.
It used to carry opacity .55 + cursor:default + pointer-events:none, so once
a field was added its chip went grey and stopped responding — and because
every already-filled chip is marked added on load, a returning owner met a
whole row of dead pills. A customer sent a photo of that row with "not
working?" written across it. The chip stays tappable and jumps to its field;
the ✕ beside it removes the field. Same reasoning as .ob3-sec-tile below. */
.ob3-chip.is-added {
background: var(--brand-50);
border-color: var(--brand-300, #c4b5fd);
color: var(--brand-700);
}
/* "✓ Bio", not "✓ ＋ Bio": the plus is what it took to add it, and that is
over. The plus lives in its own span purely so this rule can hide it. */
.ob3-chip.is-added::before { content: "✓ "; font-weight: 700; }
.ob3-chip.is-added .ob3-chip-plus { display: none; }
/* Chip + remove button read as one pill, so the ✕ is obviously part of it. */
.ob3-chip-pair { display: inline-flex; }
.ob3-chip-pair:has(.ob3-chip-x:not([hidden])) .ob3-chip {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.ob3-chip-x {
appearance: none;
font: inherit;
font-size: 12px;
font-weight: 700;
/* 34px wide, full chip height: a thumb target, not a decoration. */
min-width: 34px;
padding: 9px 10px;
cursor: pointer;
border: 1px solid var(--brand-300, #c4b5fd);
border-radius: 0 999px 999px 0;
background: var(--brand-50);
color: var(--brand-700);
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ob3-chip-x[hidden] { display: none; }
.ob3-chip-x:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.ob3-chip-x:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
/* Tapping a used chip scrolls its field into view; the flash is what tells the
eye which block just moved under it. */
.ob3-reveal.is-flash { animation: ob3-reveal-flash 1.1s ease both; }
@keyframes ob3-reveal-flash {
0%, 100% { box-shadow: none; }
15% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28); }
}
/* "Signed in on this browser" note on the intent screen. Small and quiet: it
is reassurance plus an escape hatch on a shared phone, not a call to act. */
.ob3-remember-note {
margin: -6px 0 14px;
font-size: 12px;
color: var(--slate-500, #8e8e8f);
}
.ob3-remember-forget {
appearance: none;
border: 0;
background: none;
padding: 4px 2px;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--brand-700, #d33f30);
text-decoration: underline;
cursor: pointer;
}
.ob3-remember-forget:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
/* Revealed field/section slots */
.ob3-reveals {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 4px;
}
.ob3-reveal {
animation: ob3-reveal-in .22s ease both;
}
.ob3-reveal[hidden] { display: none !important; }
@keyframes ob3-reveal-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.ob3-field-meta {
font-weight: 500;
color: var(--slate-400);
font-size: 11px;
}
/* Inline theme selector region above the preview */
.ob3-theme-region {
margin: 24px 0 8px;
padding-top: 20px;
border-top: 1px solid var(--slate-100);
}
@media (prefers-reduced-motion: reduce) {
.ob3-chip, .ob3-chip-x, .ob3-reveal { transition: none; animation: none; }
}
/* ============================================================
intl-tel-input phone field — match the other ob3 inputs.
iti wraps in a .iti div, which breaks the
`.ob2-field > input` direct-child rule, leaving the phone
input with browser-default styling. Style the wrapper + input
explicitly so it matches name/title/email fields (48px, 12px
radius, slate border, brand focus ring).
============================================================ */
.ob2-field .iti { display: block; width: 100%; }
.iti input#ob3-phone,
.iti input[type="tel"] {
width: 100%;
height: 48px;
min-height: 48px;
box-sizing: border-box;
border: 1.5px solid var(--slate-200);
border-radius: var(--radius);
background: var(--ob3-surface);
color: var(--slate-900);
font: inherit;
font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */;
transition: border-color .15s ease, box-shadow .15s ease;
}
.iti input#ob3-phone::placeholder { color: var(--slate-400); }
.iti input#ob3-phone:focus,
.iti input[type="tel"]:focus {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
/* Separate dial-code chip on the left, rounded to match the field. */
.iti--separate-dial-code .iti__selected-flag {
background: var(--slate-50);
border-radius: var(--radius) 0 0 var(--radius);
padding: 0 10px;
}
.iti--separate-dial-code .iti__selected-dial-code {
color: var(--slate-700);
font-weight: 600;
}
.iti__country-list {
border-radius: var(--radius);
border: 1px solid var(--slate-200);
box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .25);
font-size: 14px;
}
/* -------- Personalised link (OB3PersonalLink) --------
* Vanity-slug picker mounted on the portfolio "Personalised link" chip.
* Tokens (--brand-500, --slate-*, --emerald-500, --accent-error, --radius)
* are defined in :root above; the var() fallbacks keep it self-contained. */
.ob3-plink {
display: block;
}
.ob3-plink-row {
display: flex;
align-items: stretch;
height: 48px;
border: 1px solid var(--slate-200, var(--slate-200));
border-radius: var(--radius, 12px);
background: var(--ob3-surface);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ob3-plink-row:focus-within {
border-color: var(--brand-500, #e74c3c);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.ob3-plink-prefix {
display: flex;
align-items: center;
padding: 0 0.625rem;
font-size: 0.875rem;
color: var(--slate-500, #8e8e8f);
background: var(--slate-50, #f8fafc);
border-right: 1px solid var(--slate-200, var(--slate-200));
white-space: nowrap;
user-select: none;
}
.ob3-plink-input {
flex: 1;
min-width: 0;
padding: 0 0.75rem;
border: 0;
background: transparent;
font-size: 0.9375rem;
color: var(--slate-900, #1f1f1f);
outline: none;
}
.ob3-plink-input::placeholder {
color: var(--slate-400, #6b6b6c);
}
.ob3-plink-status {
min-height: 1.25rem;
margin-top: 0.375rem;
font-size: 0.8125rem;
line-height: 1.25rem;
color: var(--slate-500, #8e8e8f);
}
.ob3-plink-status.is-ok {
color: var(--emerald-500, #10b981);
}
.ob3-plink-status.is-bad {
color: var(--accent-error, #ef4444);
}
.ob3-plink-status.is-checking,
.ob3-plink-status.is-warn {
color: var(--slate-500, #8e8e8f);
}
/* Preview step (step 3) regions */
.ob3-theme-region--preview { margin-top: 4px; padding-top: 0; border-top: none; }
.ob3-plink-region { margin: 20px 0 8px; }
.ob3-plink-region .ob3-chips-label { margin-bottom: 8px; }
/* =========================================================================
* OB4 INTENT REEL — swipeable visual-preview intent chooser (screen 2).
* Scroll-snap carousel: portfolio (recommended, snapped at load), social,
* link. Each slide shows a mini phone mockup of the visitor experience.
* The legacy .ob2-intent rules above are untouched (v2 still uses them);
* legacy hook classes used inside slides are re-scoped here.
* ========================================================================= */
.ob4-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Full-bleed: escape the shell padding so peeked slides reach the edge. */
.ob4-intent-reel { margin: 18px -20px 0; }
.ob4-track {
--ob4-slide-w: min(82%, 340px);
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: 6px max(20px, calc(50% - (var(--ob4-slide-w) / 2))) 14px;
scroll-padding-inline: 20px;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
scrollbar-width: none;
}
.ob4-track::-webkit-scrollbar { display: none; }
.ob4-slide {
flex: 0 0 var(--ob4-slide-w);
scroll-snap-align: center;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 14px 16px 16px;
background: var(--ob3-surface);
border: 1px solid var(--slate-200);
border-radius: 18px;
color: var(--slate-900);
font: inherit;
cursor: pointer;
transition: transform .25s ease, opacity .25s ease, border-color .15s ease, box-shadow .15s ease;
}
.ob4-slide:not(.is-active) { transform: scale(.965); opacity: .75; }
.ob4-slide:not(.is-active) .ob4-cta { opacity: .55; }
.ob4-slide.is-active { border-color: var(--brand-300); box-shadow: var(--shadow-soft); }
.ob4-slide.is-selected {
border-color: var(--brand-500);
box-shadow: inset 0 0 0 2px var(--brand-500);
background: var(--brand-50);
}
.ob4-slide:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.ob4-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
padding: 3px 10px;
border-radius: 999px;
}
.ob4-badge--brand { background: var(--brand-500); color: #fff; }
.ob4-badge--count { background: var(--slate-100); color: var(--slate-700); }
.ob4-badge--adv { background: transparent; color: var(--slate-500); border: 1px dashed var(--slate-300); }
/* Neutralize the legacy 56px art-tile styling inside slides; the mock area
is a fixed-height stage so all three slides stay equal height. */
.ob4-slide .ob2-intent-art {
width: 100%;
height: 190px;
background: none;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.ob4-slide-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.ob4-caption { font-size: 11.5px; color: var(--slate-500); font-weight: 600; }
.ob4-slide .ob2-intent-desc {
color: var(--slate-600);
font-size: 13px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ob4-goodfor { font-size: 11.5px; color: var(--slate-500); }
.ob4-slide .ob2-intent-hint { justify-content: center; flex-wrap: wrap; }
.ob4-slide .ob2-intent-hint b { font-size: 11.5px; color: var(--slate-600); font-weight: 600; }
.ob4-slide .ob2-intent-tags { justify-content: center; }
.ob4-cta {
margin-top: auto;
width: 100%;
min-height: 48px;
border-radius: 12px;
background: var(--brand-500);
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s ease;
}
.ob4-slide.is-selected .ob4-cta { background: var(--brand-600); }
.ob4-cta-pulse { animation: ob4-cta-pulse .25s ease 2; }
@keyframes ob4-cta-pulse {
50% { transform: scale(1.04); }
}
/* ---- Dots + arrows ---- */
.ob4-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ob4-dots { display: flex; }
.ob4-dot {
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ob4-dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--slate-300);
transition: width .2s ease, background-color .2s ease;
}
.ob4-dot.is-active::before { width: 16px; background: var(--brand-500); }
.ob4-arrow {
display: none;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--slate-200);
background: var(--ob3-surface);
color: var(--slate-600);
font-size: 20px;
line-height: 1;
cursor: pointer;
align-items: center;
justify-content: center;
}
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
.ob4-arrow { display: flex; }
.ob4-arrow:hover { border-color: var(--brand-300); color: var(--brand-600); }
}
/* "Not sure?" reassure as a real (commit) button. */
.ob4-notsure {
display: block;
width: 100%;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 12px;
margin-top: 14px;
}
.ob4-notsure b { color: var(--brand-600); }
/* ---- Mini phone mockups (pure CSS + Ionicons, aria-hidden) ---- */
.ob4-device {
width: clamp(116px, 42%, 150px);
aspect-ratio: 9 / 16.5;
max-height: 100%;
background: var(--slate-900);
border-radius: 22px;
padding: 5px;
display: flex;
}
.ob4-device--short { aspect-ratio: 9 / 14.5; }
.ob4-scr {
flex: 1;
border-radius: 16px;
background: var(--ob3-surface);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* Portfolio mock: TapSticky mini card */
.ob4-scr--card { align-items: center; }
.ob4-bc-hero {
width: 100%;
height: 26%;
background: linear-gradient(120deg, var(--brand-600), var(--brand-300));
}
.ob4-bc-avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background:
radial-gradient(circle at 50% 32%, #fff 0 7px, transparent 7.5px),
radial-gradient(circle at 50% 95%, #fff 0 14px, transparent 14.5px),
var(--brand-100);
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--brand-300);
margin-top: -17px;
}
.ob4-bc-name { font-size: 9.5px; font-weight: 700; color: var(--slate-900); margin-top: 3px; }
.ob4-bc-bar { width: 46%; height: 5px; border-radius: 3px; background: var(--slate-200); margin-top: 3px; }
.ob4-bc-save {
margin-top: 7px;
width: 78%;
padding: 5px 0;
border-radius: 8px;
background: var(--brand-500);
color: #fff;
font-size: 8.5px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.ob4-bc-save ion-icon { font-size: 10px; }
.ob4-bc-icons { display: flex; gap: 4px; margin-top: 8px; }
.ob4-bc-icons ion-icon { font-size: 11px; }
.ob4-bc-tap {
position: absolute;
left: 50%;
top: 62%;
width: 18px;
height: 18px;
margin-left: -9px;
border-radius: 999px;
background: rgba(15, 23, 42, .35);
box-shadow: 0 0 0 0 rgba(15, 23, 42, .25);
opacity: 0;
}
/* Social mock: NFC card -> chevrons -> ONE app at a time */
.ob4-flow { display: flex; align-items: center; gap: 3px; }
.ob4-flow-card {
width: 16px;
height: 11px;
border-radius: 3px;
background: var(--brand-500);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.ob4-chev {
width: 6px;
height: 6px;
border-top: 2px solid var(--slate-400);
border-right: 2px solid var(--slate-400);
transform: rotate(45deg);
}
.ob4-app {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
opacity: 0;
}
.ob4-app--ig { opacity: 1; }
.ob4-app--ig ion-icon, .ob4-app--gr ion-icon { font-size: 16px; }
.ob4-ig-avatar {
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--slate-200);
border: 2px solid #fff;
box-shadow: 0 0 0 2px #E4405F;
}
.ob4-app-handle { font-size: 8.5px; font-weight: 600; color: var(--slate-700); }
.ob4-pill { font-size: 8px; font-weight: 700; color: #fff; padding: 3px 12px; border-radius: 6px; }
.ob4-pill--ig { background: #0095f6; }
.ob4-pill--gr { background: #4285F4; }
.ob4-stars { color: #f59e0b; font-size: 11px; letter-spacing: 1px; }
.ob4-app--wa { justify-content: flex-start; background: #e9fbe9; }
.ob4-wa-head {
width: 100%;
padding: 4px 0;
background: #075E54;
display: flex;
align-items: center;
justify-content: center;
}
.ob4-wa-head ion-icon { font-size: 12px; color: #fff; }
.ob4-wa-bub { width: 55%; height: 10px; border-radius: 6px 6px 6px 2px; background: var(--ob3-surface); margin: 6px 0 0 8%; align-self: flex-start; }
.ob4-wa-bub--me { border-radius: 6px 6px 2px 6px; background: #d2f8c8; align-self: flex-end; margin: 6px 8% 0 0; }
/* Link mock: browser with swapping URL over a page skeleton */
.ob4-scr--web { background: var(--slate-50); }
.ob4-url {
margin: 5px 5px 4px;
padding: 3px 6px;
border-radius: 7px;
background: var(--slate-200);
display: flex;
align-items: center;
gap: 3px;
}
.ob4-url ion-icon { font-size: 8px; color: var(--slate-500); flex: none; }
.ob4-url-swap { position: relative; flex: 1; height: 10px; }
.ob4-url-swap i {
position: absolute;
inset: 0;
font-style: normal;
font-size: 8px;
font-weight: 600;
color: var(--slate-600);
text-align: left;
white-space: nowrap;
overflow: hidden;
opacity: 0;
}
.ob4-url-swap i:first-child { opacity: 1; }
.ob4-web-hero { height: 24%; margin: 0 5px; border-radius: 6px; background: var(--emerald-500); opacity: .8; }
.ob4-web-bar { height: 6px; margin: 5px 5px 0; border-radius: 3px; background: var(--slate-300); }
.ob4-web-bar--short { width: 55%; }
.ob4-web-row { height: 10px; margin: 4px 5px 0; border-radius: 4px; background: var(--slate-200); }
/* ---- Animations: opacity/transform only, everything off under reduced
motion. Scoped to .is-active so only the centered slide animates (perf on
low-end Android) AND peeked slides keep their static first frame: pausing
instead would freeze the cycle at an all-transparent frame 0, blanking the
social phone screen and the URL pill. ---- */
@media (prefers-reduced-motion: no-preference) {
.ob4-slide.is-active .ob4-bc-tap { animation: ob4-tap 5.6s ease-in-out infinite; }
@keyframes ob4-tap {
0%, 55%, 100% { opacity: 0; transform: scale(.6); }
62% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 23, 42, .25); }
72% { opacity: .9; box-shadow: 0 0 0 10px rgba(15, 23, 42, 0); }
80% { opacity: 0; transform: scale(.9); }
}
.ob4-slide.is-active .ob4-app { animation: ob4-cycle 7.8s ease-in-out infinite; }
.ob4-slide.is-active .ob4-app--ig { animation-delay: 0s; opacity: 0; }
.ob4-slide.is-active .ob4-app--gr { animation-delay: 2.6s; }
.ob4-slide.is-active .ob4-app--wa { animation-delay: 5.2s; }
/* Each state fades in over its first 5%, holds to 30%, fades out by 36%.
With the 2.6s stagger on a 7.8s loop, adjacent states crossfade cleanly. */
@keyframes ob4-cycle {
0% { opacity: 0; }
5%, 30% { opacity: 1; }
36%, 100% { opacity: 0; }
}
.ob4-slide.is-active .ob4-chev { animation: ob4-chev 1.8s ease-in-out infinite; }
.ob4-slide.is-active .ob4-flow .ob4-chev:nth-of-type(2) { animation-delay: .2s; }
.ob4-slide.is-active .ob4-flow .ob4-chev:nth-of-type(3) { animation-delay: .4s; }
@keyframes ob4-chev {
0%, 60%, 100% { border-color: var(--slate-300); }
25% { border-color: var(--brand-500); }
}
.ob4-slide.is-active .ob4-url-swap i { animation: ob4-cycle 7.8s ease-in-out infinite; }
.ob4-slide.is-active .ob4-url-swap i:nth-child(1) { animation-delay: 0s; opacity: 0; }
.ob4-slide.is-active .ob4-url-swap i:nth-child(2) { animation-delay: 2.6s; }
.ob4-slide.is-active .ob4-url-swap i:nth-child(3) { animation-delay: 5.2s; }
}
@media (prefers-reduced-motion: reduce) {
.ob4-slide { transition: border-color .15s ease, box-shadow .15s ease; }
.ob4-slide:not(.is-active) { transform: none; }
.ob4-cta-pulse { animation: none; }
}
/* Desktop: wider slides, match the 28px shell padding for full-bleed. */
@media (min-width: 720px) {
.ob4-intent-reel { margin-inline: -28px; }
.ob4-track { --ob4-slide-w: min(72%, 380px); scroll-padding-inline: 28px; }
.ob4-track { padding-inline: max(28px, calc(50% - (var(--ob4-slide-w) / 2))); }
.ob4-slide:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .15); }
.ob4-slide:not(.is-active):hover { transform: scale(.965) translateY(-2px); }
}
/* =========================================================================
* PP — OB3PlacePicker (gmb platform on the social screen): business search,
* live map, selected-listing card, review-box vs listing outcome choice.
* ========================================================================= */
.pp-search-wrap { position: relative; }
.pp-spinner {
position: absolute;
right: 12px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
border: 2px solid var(--slate-200);
border-top-color: var(--brand-500);
border-radius: 999px;
animation: pp-spin .8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp-aux { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; }
.pp-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12.5px var(--font-sans);
color: var(--brand-600);
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-radius: 999px;
padding: 7px 12px;
cursor: pointer;
}
.pp-paste {
font: 500 12.5px var(--font-sans);
color: var(--slate-500);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.pp-results { margin: 0 0 10px; border: 1px solid var(--slate-200); border-radius: 14px; overflow: hidden; }
.pp-result {
display: flex;
gap: 11px;
align-items: center;
width: 100%;
text-align: left;
padding: 12px 14px;
background: var(--ob3-surface);
border: 0;
border-bottom: 1px solid var(--slate-100);
font: inherit;
cursor: pointer;
}
.pp-result:last-child { border-bottom: 0; }
.pp-result:hover { background: var(--brand-50); }
.pp-result-pin {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--slate-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: none;
}
.pp-result-name { font: 600 14px var(--font-sans); color: var(--slate-900); }
.pp-result-sub { font: 400 12px var(--font-sans); color: var(--slate-500); }
.pp-result-rating { margin-left: auto; font: 600 12px var(--font-sans); color: var(--amber-600); white-space: nowrap; }
/* Live Google map mounts inside; the SDK draws its own content. */
.pp-map {
height: 148px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--slate-200);
margin-bottom: 14px;
background: var(--slate-100);
}
.pp-selected {
display: flex;
gap: 12px;
align-items: flex-start;
border: 1.5px solid var(--emerald-500);
background: var(--emerald-50);
border-radius: 14px;
padding: 13px 14px;
margin-bottom: 12px;
}
.pp-selected-pin {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--ob3-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex: none;
border: 1px solid var(--slate-200);
}
.pp-selected-name { font: 700 14.5px var(--font-sans); color: var(--slate-900); }
.pp-selected-sub { font: 400 12px var(--font-sans); color: var(--slate-600); }
.pp-selected-stars { font: 600 12px var(--font-sans); color: var(--amber-600); }
.pp-change {
margin-left: auto;
font: 600 12px var(--font-sans);
color: var(--brand-600);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
flex: none;
}
.pp-outcomes { display: flex; flex-direction: column; gap: 10px; }
.pp-outcome {
display: flex;
gap: 12px;
align-items: flex-start;
width: 100%;
text-align: left;
border: 1.5px solid var(--slate-200);
border-radius: 14px;
padding: 13px 14px;
background: var(--ob3-surface);
font: inherit;
cursor: pointer;
}
.pp-outcome.is-selected {
border-color: var(--brand-500);
box-shadow: inset 0 0 0 1.5px var(--brand-500);
background: var(--brand-50);
}
.pp-outcome-art {
width: 40px;
height: 40px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex: none;
}
.pp-outcome--review .pp-outcome-art { background: #fef3c7; }
.pp-outcome--listing .pp-outcome-art { background: var(--slate-100); }
.pp-outcome-title { font: 700 14px var(--font-sans); color: var(--slate-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-outcome-desc { font: 400 12.5px/1.45 var(--font-sans); color: var(--slate-600); margin-top: 2px; display: block; }
.pp-badge {
font: 700 10px var(--font-sans);
letter-spacing: .03em;
background: var(--brand-500);
color: #fff;
border-radius: 999px;
padding: 3px 8px;
}
.pp-radio {
width: 18px;
height: 18px;
border-radius: 999px;
border: 2px solid var(--slate-300);
flex: none;
margin-top: 2px;
margin-left: auto;
}
.pp-outcome.is-selected .pp-radio {
border-color: var(--brand-500);
box-shadow: inset 0 0 0 4px #fff;
background: var(--brand-500);
}
.pp-mini-preview {
display: flex;
gap: 10px;
align-items: center;
margin-top: 14px;
padding: 11px 13px;
border-radius: 12px;
background: var(--slate-50);
border: 1px dashed var(--slate-200);
}
.pp-mini-stars { font-size: 17px; letter-spacing: 2px; color: #f59e0b; }
.pp-mini-text { font: 500 12px/1.45 var(--font-sans); color: var(--slate-600); }
@media (prefers-reduced-motion: reduce) {
.pp-spinner { animation: none; }
}
/* ============================================================
v2 engine additions (stage 4/5): profession-theme swatches +
the engine opt-in toggle on the preview step.
============================================================ */
.ob3-theme-swatch[data-theme="clinic"] .ob3-theme-mini{background:linear-gradient(150deg,#eaf1f1,#c9dedf)}
.ob3-theme-swatch[data-theme="clinic"] .ob3-theme-mini-avatar{background:#0e5f63}
.ob3-theme-swatch[data-theme="kitchen"] .ob3-theme-mini{background:linear-gradient(150deg,#7a2f18,#1d100c)}
.ob3-theme-swatch[data-theme="kitchen"] .ob3-theme-mini-avatar{background:#e0a33f}
.ob3-theme-swatch[data-theme="counter"] .ob3-theme-mini{background:linear-gradient(150deg,#fdf6ec,#f0d9b5)}
.ob3-theme-swatch[data-theme="counter"] .ob3-theme-mini-avatar{background:#c25e00}
.ob3-theme-swatch[data-theme="toolbox"] .ob3-theme-mini{background:linear-gradient(150deg,#eeedea,#d8d6d0)}
.ob3-theme-swatch[data-theme="toolbox"] .ob3-theme-mini-avatar{background:#e08600}
.ob3-theme-swatch[data-theme="studio"] .ob3-theme-mini{background:linear-gradient(150deg,#0c0c0e,#26262c)}
.ob3-theme-swatch[data-theme="studio"] .ob3-theme-mini-avatar{background:#8b96ff}
/* Accent colour control (v2 only — v1 has no token layer to re-point). */
.ob3-accent{margin-top:14px}
.ob3-accent[hidden]{display:none}
.ob3-accent-row{margin-top:6px;display:flex;align-items:center;gap:10px}
.ob3-accent-swatch{width:44px;height:44px;border-radius:10px;border:1px solid var(--ob3-line);
display:grid;place-items:center;overflow:hidden;cursor:pointer;
background:repeating-conic-gradient(#e9e9ee 0 25%,#fff 0 50%) 0 0/12px 12px}
.ob3-accent-swatch input[type="color"]{width:64px;height:64px;border:0;padding:0;background:none;cursor:pointer;opacity:0}
.ob3-accent-reset{font:inherit;font-size:12px;font-weight:700;padding:9px 14px;border-radius:10px;
min-height:44px;border:1px solid var(--ob3-line);background: var(--ob3-surface);cursor:pointer}
.ob3-accent-reset[disabled]{opacity:.45;cursor:default}
/* ============================================================
Section editors (sections.js + link-list.js + business-fields.js)
The tile grid is the discovery surface for everything the card can
render beyond name/phone. The tiles use their own .ob3-sec-tile class so a
filled section can still be re-opened; .ob3-chip.is-added used to prevent
exactly that with pointer-events:none, and no longer does.
============================================================ */
.ob3-sections { margin-top: 22px; }
.ob3-sec-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
}
@media (max-width: 380px) { .ob3-sec-grid { grid-template-columns: 1fr; } }
.ob3-sec-tile {
display: flex; align-items: flex-start; gap: 10px; text-align: left;
padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--slate-200, var(--slate-200));
background: var(--ob3-surface); cursor: pointer; font: inherit; min-height: 56px;
transition: border-color .15s, background .15s, transform .12s;
}
.ob3-sec-tile:hover { border-color: var(--brand-300, #c4b5fd); background: var(--brand-50, #f5f3ff); }
.ob3-sec-tile:active { transform: scale(.985); }
.ob3-sec-tile:focus-visible { outline: 2px solid var(--brand-500, #e74c3c); outline-offset: 2px; }
.ob3-sec-tile.is-added { border-color: var(--brand-400, #a78bfa); background: var(--brand-50, #f5f3ff); }
.ob3-sec-tile.is-added .ob3-sec-label::after { content: " ✓"; color: var(--brand-600, #d33f30); }
.ob3-sec-ic { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.ob3-sec-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob3-sec-label { font-size: 13px; font-weight: 700; color: var(--slate-800, #242424); }
.ob3-sec-desc { font-size: 11px; color: #8e8e8f; line-height: 1.35; }
.ob3-sec-reveals { display: flex; flex-direction: column; gap: 4px; }
.ob3-sec-reveal { display: none; padding-top: 14px; }
.ob3-sec-reveal.is-open { display: block; }
/* ---- link-list ---- */
.ob3-ll { display: flex; flex-direction: column; gap: 8px; }
.ob3-ll-list { display: flex; flex-direction: column; gap: 6px; }
.ob3-ll-row {
display: flex; align-items: center; gap: 8px; padding: 9px 10px;
border: 1px solid var(--slate-200, var(--slate-200)); border-radius: 10px; background: var(--ob3-surface);
}
.ob3-ll-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ob3-ll-row-title {
font-size: 13px; font-weight: 600; color: var(--slate-800, #242424);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob3-ll-row-sub {
font-size: 11px; color: #8e8e8f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob3-ll-row-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.ob3-ll-icon {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent;
background: transparent; cursor: pointer; font-size: 13px; color: #475569; line-height: 1;
}
.ob3-ll-icon:hover:not(:disabled) { background: var(--slate-100, #f1f5f9); }
.ob3-ll-icon:disabled { opacity: .3; cursor: default; }
.ob3-ll-icon.is-danger:hover { background: #fee2e2; color: #b91c1c; }
.ob3-ll-icon:focus-visible { outline: 2px solid var(--brand-500, #e74c3c); outline-offset: 1px; }
.ob3-ll-form {
display: flex; flex-direction: column; gap: 9px; padding: 12px;
border: 1.5px dashed var(--brand-300, #c4b5fd); border-radius: 12px; background: var(--brand-50, #f5f3ff);
}
.ob3-ll-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ob3-ll-preset {
font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
border: 1.5px solid var(--slate-200, var(--slate-200)); background: var(--ob3-surface); color: #475569; cursor: pointer;
}
.ob3-ll-preset.is-on { border-color: var(--brand-500, #e74c3c); background: var(--ob3-surface); color: var(--brand-700, #b03225); }
.ob3-ll-field { display: flex; flex-direction: column; gap: 4px; }
.ob3-ll-field-label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.ob3-ll-field-label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #6b6b6c; }
.ob3-ll-field input, .ob3-rep-field input, .ob3-meta input {
font: inherit; font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */; padding: 9px 11px; border-radius: 9px;
border: 1.5px solid var(--slate-200, var(--slate-200)); background: var(--ob3-surface); width: 100%;
}
.ob3-ll-field input:focus, .ob3-rep-field input:focus, .ob3-meta input:focus {
outline: none; border-color: var(--brand-500, #e74c3c);
}
.ob3-ll-error { font-size: 12px; color: #b91c1c; margin: 0; }
.ob3-ll-form-actions { display: flex; gap: 8px; }
.ob3-ll-save, .ob3-ll-cancel {
font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 9px; cursor: pointer;
min-height: 40px;
}
.ob3-ll-save { border: none; background: var(--brand-600, #d33f30); color: #fff; }
.ob3-ll-cancel { border: 1.5px solid var(--slate-200, var(--slate-200)); background: var(--ob3-surface); color: #475569; }
.ob3-ll-add {
font: inherit; font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 10px;
border: 1.5px dashed var(--slate-300, #cfcfd0); background: var(--ob3-surface); color: var(--brand-700, #b03225);
cursor: pointer; text-align: left; min-height: 42px;
}
.ob3-ll-add:hover { border-color: var(--brand-400, #a78bfa); background: var(--brand-50, #f5f3ff); }
.ob3-ll-hint { font-size: 11px; color: #6b6b6c; margin: 0; line-height: 1.4; }
/* ---- repeater (price list / offers) ---- */
.ob3-rep { display: flex; flex-direction: column; gap: 8px; }
.ob3-rep-row {
display: grid; grid-template-columns: 1fr 96px 30px; gap: 8px; align-items: end;
padding: 10px; border: 1px solid var(--slate-200, var(--slate-200)); border-radius: 10px; background: var(--ob3-surface);
}
.ob3-rep-row .ob3-rep-note { grid-column: 1 / span 2; }
.ob3-rep-row .ob3-rep-detail { grid-column: 1 / span 2; }
/* Offers are title+detail only — a modifier class, not :has(), because an old
Android WebView drops a rule it cannot parse and the grid would break. */
.ob3-rep--offer .ob3-rep-row { grid-template-columns: 1fr 30px; }
.ob3-rep-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ob3-rep-row > .ob3-ll-icon { margin-bottom: 4px; }
/* ---- hours ---- */
.ob3-hours { display: flex; flex-direction: column; gap: 8px; }
.ob3-hours-rows { display: flex; flex-direction: column; gap: 4px; }
.ob3-hours-row {
display: flex; align-items: center; gap: 10px; padding: 7px 10px;
border: 1px solid var(--slate-200, var(--slate-200)); border-radius: 9px; background: var(--ob3-surface);
}
.ob3-hours-row.is-closed { background: var(--slate-50, #f8fafc); }
.ob3-hours-day { display: flex; align-items: center; gap: 7px; width: 74px; flex: 0 0 auto; cursor: pointer; }
.ob3-hours-day span { font-size: 13px; font-weight: 700; color: var(--slate-700, #334155); }
.ob3-hours-day input { width: 17px; height: 17px; accent-color: var(--brand-600, #d33f30); }
.ob3-hours-times { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ob3-hours-times input[type="time"] {
font: inherit; font-size: 16px; /* >=16px: anything smaller makes iOS Safari zoom the viewport on focus and never zoom back */; padding: 6px 8px; border-radius: 8px;
border: 1.5px solid var(--slate-200, var(--slate-200)); background: var(--ob3-surface); min-width: 0; flex: 1;
}
.ob3-hours-times input[type="time"]:disabled { opacity: .35; }
.ob3-hours-dash { color: #6b6b6c; flex: 0 0 auto; }
.ob3-hours-closed { font-size: 11px; font-weight: 700; color: #6b6b6c; flex: 0 0 auto; }
.ob3-hours-copy {
font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 9px;
border: 1.5px solid var(--slate-200, var(--slate-200)); background: var(--ob3-surface); color: var(--brand-700, #b03225); cursor: pointer;
align-self: flex-start; min-height: 38px;
}
.ob3-hours-copy:hover { background: var(--brand-50, #f5f3ff); border-color: var(--brand-300, #c4b5fd); }
/* ---- profileMeta ---- */
.ob3-meta { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
.ob3-sec-tile { transition: none; }
}
/* ---- link-list upload (gallery + documents) ---- */
.ob3-ll-upload {
font: inherit; font-size: 13px; font-weight: 700; padding: 11px 14px; border-radius: 10px;
border: 1.5px solid var(--brand-400, #a78bfa); background: var(--brand-50, #f5f3ff);
color: var(--brand-700, #b03225); cursor: pointer; text-align: left; min-height: 44px;
}
.ob3-ll-upload:hover { background: var(--ob3-surface); }
.ob3-ll-upload:focus-visible { outline: 2px solid var(--brand-500, #e74c3c); outline-offset: 2px; }
.ob3-ll-upstatus { font-size: 12px; color: #475569; margin: 0; }
.ob3-ll-upstatus.is-error { color: #b91c1c; }
/* The autosave pill must not appear on the login screen. The local draft is
written as soon as the wizard initialises, so the pill flashed "Draft" before
the user had typed anything — announcing a saved draft that did not exist.
`ob2-login-active` is already toggled on by show() in
card_onboarding_v3.js, so this needs no new state. */
body.ob2-login-active .ob3-autosave-pill {
display: none !important;
}
/* ------------------------------------------------------------
The card's two colours (brand + the ground it sits on), and the
colours read back out of the owner's own logo.
------------------------------------------------------------ */
.ob3-colour-grid { margin-top: 8px; display: grid; gap: 10px; }
.ob3-colour {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.ob3-colour-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob3-colour-meta b { font-size: 13.5px; font-weight: 700; }
.ob3-colour-meta span { font-size: 11.5px; color: var(--ob3-muted, #6e6b85); }
.ob3-colour-fromlogo {
margin-top: 12px;
font: inherit;
font-size: 12.5px;
font-weight: 700;
min-height: 44px;
padding: 10px 16px;
border-radius: 10px;
border: 1px dashed var(--ob3-line);
background: none;
cursor: pointer;
}
.ob3-colour-fromlogo[disabled] { opacity: 0.6; cursor: default; }
.ob3-colour-none { margin: 12px 0 0; font-size: 12px; color: var(--ob3-muted, #6e6b85); }
.ob3-colour-logo { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ob3-colour-logo-k,
.ob3-colour-logo-hint { font-size: 11px; color: var(--ob3-muted, #6e6b85); }
.ob3-colour-logo-k { flex-basis: 100%; letter-spacing: 0.06em; text-transform: uppercase; }
.ob3-colour-logo-hint { flex-basis: 100%; }
.ob3-colour-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 44px of tap target around a 30px dot: the swatch is small on purpose, the
thing you hit is not. */
.ob3-colour-chip {
width: 44px;
height: 44px;
padding: 7px;
border: 0;
border-radius: 12px;
background-clip: content-box;
box-shadow: inset 0 0 0 1px var(--ob3-line);
cursor: pointer;
}
.ob3-colour-where {
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 2px;
font-size: 12.5px;
}
.ob3-colour-where button {
font: inherit;
font-size: 12px;
font-weight: 700;
min-height: 40px;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid var(--ob3-line);
background: var(--ob3-surface);
cursor: pointer;
}
/* Which action sits beside the card's one main button. */
.ob3-second-hint { margin: 3px 0 9px; font-size: 11.5px; color: var(--ob3-muted, #6e6b85); }
.ob3-second-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ob3-second {
font: inherit;
font-size: 12.5px;
font-weight: 700;
min-height: 44px;
padding: 10px 15px;
border-radius: 10px;
border: 1px solid var(--ob3-line);
background: var(--ob3-surface);
cursor: pointer;
}
.ob3-second.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }