/* samples.css — Shared styles for the AI-Native sample matrix.
* Tier-specific polish escalates via [data-tier="..."] attribute selectors
* on : foundation → active → advanced → custom (SaaS-app feel).
*/
/* ===== Tokens (shared) ===== */
:root {
--ink: #0a0e14;
--ink-2: #1a1f2a;
--ink-3: #2a3140;
--paper: #ffffff;
--cream: #fafaf7;
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--primary: #00d946;
--primary-deep: #009a31;
--primary-tint: rgba(0, 217, 70, 0.12);
--primary-tint-2: rgba(0, 217, 70, 0.04);
--warn: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 24px;
--shadow-sm: 0 1px 2px rgba(10, 14, 20, 0.04);
--shadow-md: 0 4px 12px rgba(10, 14, 20, 0.06);
--shadow-lg: 0 16px 40px rgba(10, 14, 20, 0.08);
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Manrope', 'Inter', system-ui, sans-serif;
}
/* ===== Form-element contrast safety net ===== */
/* Prevents black-on-black / white-on-white cases by always declaring explicit
* text + background colors on form elements. Per-page styles can override. */
input, select, textarea {
color: var(--ink);
background: var(--paper);
font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--slate-400); }
/* Browser-native dropdown options always readable */
option { color: var(--ink); background: var(--paper); }
/* On dark-tier pages, form elements inside dark contexts get inverted */
[data-tier="advanced"] body input:not([type=checkbox]):not([type=radio]):not(.bg-reserve-card input):not(.lh-intake-card input):not(.intake-card input):not(.cma-card input):not(.cr-search-cell input),
[data-tier="custom"] body input:not([type=checkbox]):not([type=radio]):not(.bg-reserve-card input):not(.lh-intake-card input):not(.intake-card input):not(.cma-card input):not(.cr-search-cell input) {
/* Default: leave per-component to control */
}
.persona-bar select option { color: var(--ink); background: var(--paper); }
/* Sample-card action buttons: ensure consistent contrast everywhere */
.sample-card .sc-actions a {
background: var(--paper);
}
.sample-card .sc-actions a:not(.primary) {
color: var(--ink) !important;
background: var(--paper) !important;
}
.sample-card .sc-actions a.primary {
background: var(--ink) !important;
color: var(--paper) !important;
}
.sample-card .sc-actions a:hover {
border-color: var(--ink);
}
.sample-card .sc-actions a.primary:hover {
background: var(--primary-deep) !important;
border-color: var(--primary-deep) !important;
}
/* Custom-card action buttons get their own purple-tinted accent */
.sample-card.custom-card .sc-actions a.primary {
background: #6d28d9 !important;
border-color: #6d28d9 !important;
color: #ffffff !important;
}
.sample-card.custom-card .sc-actions a.primary:hover {
background: #4c1d95 !important;
border-color: #4c1d95 !important;
}
.sample-card.custom-card .sc-actions a:not(.primary) {
color: #6d28d9 !important;
background: #ffffff !important;
border-color: rgba(124, 58, 237, 0.3) !important;
}
.sample-card.custom-card .sc-actions a:not(.primary):hover {
border-color: #6d28d9 !important;
background: rgba(124, 58, 237, 0.04) !important;
}
/* Multi-button custom cards: ensure they wrap nicely on narrower cards */
.sc-actions-custom {
flex-wrap: wrap;
gap: 0.4rem !important;
}
.sc-actions-custom a {
font-size: 0.74rem !important;
}
/* ===== Accessibility ===== */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1rem;
text-decoration: none;
font-size: 0.86rem;
font-weight: 700;
z-index: 100;
border-bottom-right-radius: var(--r-sm);
transform: translateY(-100%);
transition: transform 0.18s;
}
.skip-link:focus {
transform: translateY(140%);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--cream);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ===== Tier accent strip — runs along the top edge of every sample page ===== */
body[data-tier]::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 100;
pointer-events: none;
}
body[data-tier="foundation"]::before { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-deep) 100%); }
body[data-tier="active"]::before { background: linear-gradient(90deg, #f59e0b 0%, #b45309 100%); }
body[data-tier="advanced"]::before { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%); }
body[data-tier="custom"]::before { background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%); }
/* Push down the sample chrome so it doesn't sit under the strip */
body[data-tier] .sample-chrome { top: 3px; }
/* ===== Sample chrome — top bar & tier ribbon ===== */
.sample-chrome {
position: sticky;
top: 0;
z-index: 50;
background: var(--paper);
border-bottom: 1px solid var(--slate-100);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.4rem;
backdrop-filter: blur(8px);
}
.sc-left { display: flex; align-items: center; gap: 0.7rem; }
.sc-back {
font-size: 0.78rem;
font-weight: 600;
color: var(--slate-500);
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.4rem 0.6rem;
border-radius: var(--r-sm);
transition: background 0.15s, color 0.15s;
}
.sc-back:hover { color: var(--ink); background: var(--slate-100); }
.sc-tier {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: var(--primary-tint);
color: var(--primary-deep);
}
[data-tier="active"] .sc-tier { background: rgba(245, 158, 11, 0.12); color: #b45309; }
[data-tier="advanced"] .sc-tier { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
[data-tier="custom"] .sc-tier { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.sc-vertical { font-size: 0.78rem; color: var(--slate-500); font-weight: 500; }
.sc-right { display: flex; align-items: center; gap: 0.5rem; }
.sc-toggle {
font-size: 0.74rem;
font-weight: 600;
padding: 0.42rem 0.85rem;
border: 1px solid var(--slate-200);
border-radius: 999px;
background: var(--paper);
color: var(--slate-700);
transition: all 0.15s;
}
.sc-toggle.on { background: var(--primary); border-color: var(--primary); color: var(--ink); }
.sc-toggle:hover { border-color: var(--primary); }
.sc-link {
font-size: 0.74rem;
font-weight: 600;
padding: 0.42rem 0.85rem;
border: 1px solid var(--slate-200);
border-radius: 999px;
background: var(--paper);
color: var(--slate-700);
transition: all 0.15s;
}
.sc-link:hover { border-color: var(--ink); color: var(--ink); }
/* ===== Tutorial annotations ===== */
[data-feature] { position: relative; }
.tutorial-on [data-feature]::before {
content: "";
position: absolute;
inset: -6px;
border: 2px dashed var(--primary);
border-radius: var(--r-md);
pointer-events: none;
opacity: 0.5;
animation: featureGlow 3s ease-in-out infinite;
}
@keyframes featureGlow {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.65; }
}
.feature-callout {
display: none;
position: absolute;
z-index: 20;
background: var(--ink);
color: var(--paper);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.4px;
padding: 0.4rem 0.7rem;
border-radius: var(--r-sm);
white-space: nowrap;
box-shadow: var(--shadow-md);
cursor: help;
}
.feature-callout::before {
content: "✦";
color: var(--primary);
margin-right: 0.3rem;
}
.feature-callout::after {
content: "";
position: absolute;
bottom: -4px;
left: 12px;
width: 8px;
height: 8px;
background: var(--ink);
transform: rotate(45deg);
}
.feature-callout.bottom::after {
bottom: auto;
top: -4px;
}
.tutorial-on .feature-callout { display: block; }
.feature-explainer {
display: none;
position: absolute;
z-index: 21;
background: var(--paper);
border: 1px solid var(--slate-200);
border-left: 3px solid var(--primary);
border-radius: var(--r-md);
padding: 0.85rem 1rem;
width: 280px;
font-size: 0.82rem;
line-height: 1.5;
color: var(--slate-700);
box-shadow: var(--shadow-lg);
}
.feature-explainer .fe-title {
display: block;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--primary-deep);
margin-bottom: 0.4rem;
}
.feature-callout:hover + .feature-explainer,
.feature-explainer:hover {
display: block;
}
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 700;
padding: 0.7rem 1.2rem;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: all 0.15s;
cursor: pointer;
}
.btn-primary {
background: var(--primary);
color: var(--ink);
}
.btn-primary:hover { background: var(--primary-deep); color: var(--paper); transform: translateY(-1px); }
.btn-secondary {
background: var(--paper);
color: var(--ink);
border-color: var(--slate-200);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost {
background: transparent;
color: var(--slate-600);
}
.btn-ghost:hover { color: var(--ink); }
/* ===== Mock chat widget ===== */
.chat-launch {
position: fixed;
bottom: 1.4rem;
right: 1.4rem;
z-index: 40;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: var(--ink);
border: none;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
transition: transform 0.18s ease;
}
.chat-launch:hover { transform: scale(1.06); }
.chat-launch::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--primary);
animation: pulseRing 1.8s ease-out infinite;
opacity: 0.6;
}
@keyframes pulseRing {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
.chat-window {
position: fixed;
bottom: 6rem;
right: 1.4rem;
z-index: 41;
width: 360px;
max-width: calc(100vw - 2.8rem);
height: 520px;
max-height: calc(100vh - 8rem);
background: var(--paper);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
display: none;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--slate-200);
}
.chat-window.open { display: flex; animation: chatIn 0.2s ease; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-header {
background: var(--ink);
color: var(--paper);
padding: 0.85rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header strong { font-size: 0.92rem; font-weight: 700; }
.chat-header small { font-size: 0.7rem; color: rgba(255,255,255,0.6); }
.chat-close {
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 1.2rem;
line-height: 1;
}
.chat-close:hover { color: var(--paper); }
.chat-body {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
background: var(--slate-50);
}
.chat-msg {
max-width: 85%;
padding: 0.6rem 0.85rem;
border-radius: 12px;
font-size: 0.86rem;
line-height: 1.5;
animation: msgPop 0.2s ease;
}
@keyframes msgPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.agent {
align-self: flex-start;
background: var(--paper);
border: 1px solid var(--slate-200);
border-bottom-left-radius: 3px;
color: var(--ink);
}
.chat-msg.user {
align-self: flex-end;
background: var(--ink);
color: var(--paper);
border-bottom-right-radius: 3px;
}
.chat-msg.typing { color: var(--slate-400); font-style: italic; }
.chat-input-row {
display: flex;
gap: 0.4rem;
padding: 0.65rem;
border-top: 1px solid var(--slate-200);
background: var(--paper);
}
.chat-input-row input {
flex: 1;
border: 1px solid var(--slate-200);
border-radius: var(--r-sm);
padding: 0.55rem 0.75rem;
font-size: 0.86rem;
font-family: inherit;
}
.chat-input-row input:focus { outline: none; border-color: var(--primary); }
.chat-input-row button {
border: none;
background: var(--primary);
color: var(--ink);
border-radius: var(--r-sm);
padding: 0 1rem;
font-weight: 700;
font-size: 0.84rem;
}
.chat-suggest {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0 0.65rem 0.65rem;
background: var(--paper);
}
.chat-suggest button {
font-size: 0.73rem;
font-weight: 600;
padding: 0.35rem 0.7rem;
border: 1px solid var(--slate-200);
border-radius: 999px;
background: var(--paper);
color: var(--slate-700);
}
.chat-suggest button:hover { border-color: var(--primary); color: var(--ink); }
/* ===== Per-vertical chat widget theming ===== */
/* The default green-on-ink chat widget gets re-themed to match each sample's brand.
* Restaurant → warm gold/cream, Cormorant Garamond display
* Clinic → calm sky-blue / clinical white
* Real estate → ink + primary green (Crestline professional)
* Ecom → magenta / Playfair Display
* Supply → amber B2B
* Portal → emerald enterprise
*/
/* RESTAURANT · BELLARIA */
[data-vertical="restaurant"] .chat-launch {
background: linear-gradient(135deg, #d4a356 0%, #8a5e22 100%);
color: #faf8f3;
box-shadow: 0 12px 32px rgba(176, 138, 74, 0.32);
}
[data-vertical="restaurant"] .chat-launch::before { border-color: #d4a356; }
[data-vertical="restaurant"] .chat-window { border-color: #e8dec9; }
[data-vertical="restaurant"] .chat-header {
background: linear-gradient(135deg, #1a1409 0%, #4a3320 100%);
color: #faf8f3;
}
[data-vertical="restaurant"] .chat-header strong {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.4px;
}
[data-vertical="restaurant"] .chat-header small { color: rgba(212, 163, 86, 0.75); }
[data-vertical="restaurant"] .chat-body { background: #faf8f3; }
[data-vertical="restaurant"] .chat-msg.agent { background: #fff; border-color: #e8dec9; color: #1a1409; }
[data-vertical="restaurant"] .chat-msg.user { background: #1a1409; color: #faf8f3; }
[data-vertical="restaurant"] .chat-input-row { background: #fff; border-top-color: #e8dec9; }
[data-vertical="restaurant"] .chat-input-row input { border-color: #e8dec9; background: #faf8f3; color: #1a1409; }
[data-vertical="restaurant"] .chat-input-row input:focus { border-color: #b08a4a; }
[data-vertical="restaurant"] .chat-input-row button { background: #b08a4a; color: #faf8f3; }
[data-vertical="restaurant"] .chat-suggest { background: #fff; }
[data-vertical="restaurant"] .chat-suggest button { border-color: #e8dec9; color: #5a4a32; }
[data-vertical="restaurant"] .chat-suggest button:hover { border-color: #b08a4a; color: #1a1409; }
[data-vertical="restaurant"] .voice-launch { background: #1a1409; color: #d4a356; }
/* CLINIC · LAKESHORE */
[data-vertical="clinic"] .chat-launch {
background: linear-gradient(135deg, #38bdf8 0%, #075985 100%);
color: #f0f9ff;
box-shadow: 0 12px 32px rgba(2, 132, 199, 0.32);
}
[data-vertical="clinic"] .chat-launch::before { border-color: #38bdf8; }
[data-vertical="clinic"] .chat-window { border-color: #e0f2fe; }
[data-vertical="clinic"] .chat-header {
background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
color: white;
}
[data-vertical="clinic"] .chat-header small { color: rgba(186, 230, 253, 0.78); }
[data-vertical="clinic"] .chat-body { background: #f0f7fa; }
[data-vertical="clinic"] .chat-msg.agent { background: #fff; border-color: #e0f2fe; color: #0c4a6e; }
[data-vertical="clinic"] .chat-msg.user { background: #0284c7; color: white; }
[data-vertical="clinic"] .chat-input-row { background: #fff; border-top-color: #e0f2fe; }
[data-vertical="clinic"] .chat-input-row input { border-color: #e0f2fe; background: #f8fafc; color: #0c4a6e; }
[data-vertical="clinic"] .chat-input-row input:focus { border-color: #0284c7; background: #fff; }
[data-vertical="clinic"] .chat-input-row button { background: #0284c7; color: white; }
[data-vertical="clinic"] .chat-suggest { background: #fff; }
[data-vertical="clinic"] .chat-suggest button { border-color: #e0f2fe; color: #475569; }
[data-vertical="clinic"] .chat-suggest button:hover { border-color: #0284c7; color: #0c4a6e; }
[data-vertical="clinic"] .voice-launch { background: #0c4a6e; color: #7dd3fc; }
/* REAL ESTATE · CRESTLINE */
[data-vertical="realestate"] .chat-launch {
background: #0a0e14;
color: var(--primary);
box-shadow: 0 12px 32px rgba(10, 14, 20, 0.4);
}
[data-vertical="realestate"] .chat-launch::before { border-color: var(--primary); }
[data-vertical="realestate"] .chat-window { border-color: #e2e8f0; }
[data-vertical="realestate"] .chat-header {
background: linear-gradient(135deg, #0a0e14 0%, #131b2e 100%);
color: white;
}
[data-vertical="realestate"] .chat-header small { color: rgba(0, 217, 70, 0.78); }
[data-vertical="realestate"] .chat-body { background: #fafaf7; }
[data-vertical="realestate"] .chat-msg.agent { background: #fff; border-color: #e2e8f0; color: #0a0e14; }
[data-vertical="realestate"] .chat-msg.user { background: #0a0e14; color: var(--primary); }
[data-vertical="realestate"] .chat-input-row { background: #fff; border-top-color: #e2e8f0; }
[data-vertical="realestate"] .chat-input-row input { border-color: #e2e8f0; background: #fafaf7; color: #0a0e14; }
[data-vertical="realestate"] .chat-input-row input:focus { border-color: var(--primary); background: #fff; }
[data-vertical="realestate"] .chat-input-row button { background: var(--primary); color: #0a0e14; }
[data-vertical="realestate"] .chat-suggest { background: #fff; }
[data-vertical="realestate"] .chat-suggest button { border-color: #e2e8f0; color: #475569; }
[data-vertical="realestate"] .chat-suggest button:hover { border-color: #0a0e14; color: #0a0e14; }
[data-vertical="realestate"] .voice-launch { background: #0a0e14; color: var(--primary); }
/* ECOMMERCE · ATELIER MARA */
[data-vertical="ecom"] .chat-launch {
background: linear-gradient(135deg, #f9a8d4 0%, #be185d 100%);
color: #2a1f17;
box-shadow: 0 12px 32px rgba(190, 24, 93, 0.3);
}
[data-vertical="ecom"] .chat-launch::before { border-color: #f9a8d4; }
[data-vertical="ecom"] .chat-header {
background: linear-gradient(135deg, #2a1f17 0%, #4a2511 100%);
color: #fbcfe8;
}
[data-vertical="ecom"] .chat-header strong {
font-family: 'Playfair Display', serif;
font-weight: 600;
}
[data-vertical="ecom"] .chat-msg.user { background: #be185d; color: white; }
[data-vertical="ecom"] .chat-input-row button { background: #be185d; color: white; }
[data-vertical="ecom"] .chat-suggest button:hover { border-color: #be185d; color: #2a1f17; }
/* SUPPLY CHAIN · CRESTMONT */
[data-vertical="supply"] .chat-launch {
background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
color: #1a1409;
box-shadow: 0 12px 32px rgba(180, 83, 9, 0.3);
}
[data-vertical="supply"] .chat-launch::before { border-color: #fbbf24; }
[data-vertical="supply"] .chat-header {
background: linear-gradient(135deg, #1a1409 0%, #4a3320 100%);
color: #fbbf24;
}
[data-vertical="supply"] .chat-msg.user { background: #b45309; color: #fef3c7; }
[data-vertical="supply"] .chat-input-row button { background: #b45309; color: white; }
/* CUSTOMER PORTAL · PALIO OPS */
[data-vertical="portal"] .chat-launch {
background: linear-gradient(135deg, #6ee7b7 0%, #047857 100%);
color: #064e3b;
box-shadow: 0 12px 32px rgba(4, 120, 87, 0.3);
}
[data-vertical="portal"] .chat-launch::before { border-color: #6ee7b7; }
[data-vertical="portal"] .chat-header {
background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
color: #a7f3d0;
}
[data-vertical="portal"] .chat-msg.user { background: #047857; color: #ecfdf5; }
[data-vertical="portal"] .chat-input-row button { background: #047857; color: white; }
/* Try-me prompt — pick up the brand accent on its border */
[data-vertical="restaurant"] .try-me-prompt .tmp-bubble { border-color: #b08a4a; }
[data-vertical="restaurant"] .try-me-prompt .tmp-bubble small { color: #d4a356 !important; }
[data-vertical="clinic"] .try-me-prompt .tmp-bubble { border-color: #0284c7; }
[data-vertical="clinic"] .try-me-prompt .tmp-bubble small { color: #38bdf8 !important; }
[data-vertical="realestate"] .try-me-prompt .tmp-bubble { border-color: var(--primary); }
[data-vertical="ecom"] .try-me-prompt .tmp-bubble { border-color: #be185d; }
[data-vertical="ecom"] .try-me-prompt .tmp-bubble small { color: #f9a8d4 !important; }
[data-vertical="supply"] .try-me-prompt .tmp-bubble { border-color: #b45309; }
[data-vertical="portal"] .try-me-prompt .tmp-bubble { border-color: #047857; }
/* Voice dialog — fake voice session for Advanced+ */
.voice-dialog {
position: fixed;
inset: 0;
z-index: 90;
display: none;
}
.voice-dialog.open { display: block; }
.voice-dialog .vd-shade {
position: absolute;
inset: 0;
background: rgba(10, 14, 20, 0.72);
backdrop-filter: blur(4px);
animation: vdShadeIn 0.2s ease;
}
@keyframes vdShadeIn { from { opacity: 0; } to { opacity: 1; } }
.voice-dialog .vd-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(520px, calc(100vw - 2rem));
max-height: calc(100vh - 4rem);
background: var(--ink);
color: var(--paper);
border: 1px solid rgba(0, 217, 70, 0.25);
border-radius: var(--r-lg);
padding: 1.4rem;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
gap: 1rem;
animation: vdCardIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes vdCardIn { from { opacity: 0; transform: translate(-50%, -45%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.voice-dialog .vd-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.8rem;
}
.voice-dialog .vd-head strong { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.2px; }
.voice-dialog .vd-head small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.voice-dialog .vd-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.voice-dialog .vd-close:hover { color: var(--paper); }
.voice-dialog .vd-wave {
display: flex;
gap: 4px;
align-items: flex-end;
justify-content: center;
height: 56px;
padding: 0.4rem 0;
}
.voice-dialog .vd-wave span {
width: 4px;
background: var(--primary);
border-radius: 2px;
animation: waveBounce 1s ease-in-out infinite;
}
.voice-dialog .vd-wave span:nth-child(1) { animation-delay: -0.95s; }
.voice-dialog .vd-wave span:nth-child(2) { animation-delay: -0.85s; }
.voice-dialog .vd-wave span:nth-child(3) { animation-delay: -0.75s; }
.voice-dialog .vd-wave span:nth-child(4) { animation-delay: -0.65s; }
.voice-dialog .vd-wave span:nth-child(5) { animation-delay: -0.55s; }
.voice-dialog .vd-wave span:nth-child(6) { animation-delay: -0.45s; }
.voice-dialog .vd-wave span:nth-child(7) { animation-delay: -0.35s; }
.voice-dialog .vd-wave span:nth-child(8) { animation-delay: -0.25s; }
.voice-dialog .vd-wave span:nth-child(9) { animation-delay: -0.15s; }
.voice-dialog .vd-wave span:nth-child(10) { animation-delay: -0.05s; }
.voice-dialog .vd-wave span:nth-child(11) { animation-delay: -0.55s; }
.voice-dialog .vd-wave span:nth-child(12) { animation-delay: -0.65s; }
.voice-dialog .vd-wave span:nth-child(13) { animation-delay: -0.75s; }
.voice-dialog .vd-wave span:nth-child(14) { animation-delay: -0.85s; }
.voice-dialog .vd-wave span:nth-child(15) { animation-delay: -0.95s; }
@keyframes waveBounce {
0%, 100% { height: 6px; opacity: 0.4; }
50% { height: 38px; opacity: 1; }
}
.voice-dialog .vd-transcript {
flex: 1;
overflow-y: auto;
padding: 0.8rem;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--r-md);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.86rem;
line-height: 1.6;
min-height: 180px;
max-height: 320px;
}
.voice-dialog .vd-line { padding: 0.3rem 0; }
.voice-dialog .vd-line strong {
display: inline-block;
min-width: 64px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-right: 0.5rem;
}
.voice-dialog .vd-line-agent strong { color: var(--primary); }
.voice-dialog .vd-line-caller strong { color: rgba(255, 255, 255, 0.5); }
.voice-dialog .vd-line-agent { color: rgba(255, 255, 255, 0.92); }
.voice-dialog .vd-line-caller { color: rgba(255, 255, 255, 0.7); }
.voice-dialog .vd-meta { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); text-align: center; }
/* Voice button (Advanced+) */
.voice-launch {
position: fixed;
bottom: 1.4rem;
right: 5.4rem;
z-index: 40;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ink);
color: var(--primary);
border: none;
box-shadow: var(--shadow-lg);
display: none;
align-items: center;
justify-content: center;
font-size: 1.4rem;
transition: transform 0.18s ease;
}
.voice-launch:hover { transform: scale(1.06); }
[data-tier="advanced"] .voice-launch,
[data-tier="custom"] .voice-launch { display: flex; }
.voice-launch::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--ink);
animation: pulseRing 1.8s ease-out infinite;
opacity: 0.4;
}
/* ===== Persona switcher (Active+) ===== */
.persona-bar {
display: none;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1.4rem;
font-size: 0.78rem;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
[data-tier="active"] .persona-bar,
[data-tier="advanced"] .persona-bar,
[data-tier="custom"] .persona-bar { display: flex; }
.persona-bar strong { color: var(--primary); font-weight: 700; }
.persona-bar select,
.persona-bar button {
background: transparent;
border: 1px solid rgba(255,255,255,0.18);
color: var(--paper);
border-radius: var(--r-sm);
padding: 0.3rem 0.6rem;
font-size: 0.78rem;
font-family: inherit;
}
.persona-bar select:focus { outline: none; border-color: var(--primary); }
/* ===== Cards / sections (vertical-agnostic) ===== */
.section { padding: 3rem 1.4rem; }
.section-narrow { max-width: 1080px; margin: 0 auto; }
.section h2 { font-family: var(--font-display); font-size: clamp(1.85rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.6px; margin: 0 0 0.6rem; line-height: 1.1; }
.section h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 0.4rem; }
.section p { color: var(--slate-600); margin: 0 0 1rem; line-height: 1.65; }
.card {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: var(--r-lg);
padding: 1.4rem;
box-shadow: var(--shadow-sm);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s;
}
[data-tier="active"] .card,
[data-tier="advanced"] .card,
[data-tier="custom"] .card { box-shadow: var(--shadow-md); }
[data-tier="active"] .card:hover,
[data-tier="advanced"] .card:hover,
[data-tier="custom"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Smoother body transitions in general */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture { image-rendering: -webkit-optimize-contrast; }
/* Default focus rings — light & green */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: 6px;
}
/* ===== Editorial typography upgrade — applies to every sample ===== */
/* Bigger, more dramatic display type. Tighter tracking. Better hierarchy. */
.s-hero h1, .r-hero h1, .c-hero h1, .re-hero h1, .bg-hero h1, .lh-hero h1, .cr-hero h1 {
font-size: clamp(2.6rem, 6.5vw, 5rem);
letter-spacing: -2px;
line-height: 0.98;
font-weight: 800;
margin-bottom: 1.2rem;
}
.r-hero h1, .bg-hero h1 {
/* Restaurant uses Cormorant — light weight + larger size for editorial Italian feel */
font-weight: 500;
letter-spacing: -2.5px;
}
.s-hero p.hero-subtitle, .r-hero p, .c-hero p, .re-hero p, .bg-hero p, .lh-hero p, .cr-hero p {
font-size: clamp(1rem, 1.6vw, 1.18rem);
line-height: 1.6;
max-width: 640px;
}
/* Hero eyebrows — small caps with extra tracking for refinement */
.r-eyebrow, .c-eyebrow, .re-eyebrow, .bg-eyebrow, .lh-eyebrow, .cr-eyebrow, .eyebrow {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/* Section headings — display weight, tighter tracking */
.section h2, .r-section h2, .c-section h2, .re-section h2, .bg-section h2, .lh-section h2, .cr-section h2 {
font-size: clamp(1.85rem, 4vw, 2.8rem);
letter-spacing: -1.2px;
line-height: 1.05;
margin-bottom: 0.8rem;
}
/* Section ledes — measured line-length, breathable line-height */
.section p.lede, .r-section .lede, .c-section .lede, .re-section .lede, .bg-section .lede, .lh-section .lede, .cr-section .lede {
font-size: 1.05rem;
line-height: 1.65;
max-width: 600px;
color: inherit;
opacity: 0.78;
}
/* ===== Generous whitespace — more breathing room between sections ===== */
.section, .r-section, .c-section, .re-section, .bg-section, .lh-section, .cr-section {
padding-top: clamp(3.5rem, 7vw, 6rem);
padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
/* ===== Scroll reveal — subtle fade-up for sections coming into view ===== */
.scroll-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* ===== Refined card / tile hover — deeper, smoother ===== */
.card, .listing, .svc-card, .blog-card, .agent-card, .product-card, .reorder-tile, .org-tile, .lh-clinic-card, .bg-loc-card, .sample-card {
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s;
}
/* Gentle image transitions — sharpen on hover */
.bg-loc-photo, .lh-clinic-photo, .listing-photo, .product-photo, .agent-photo {
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s;
}
.bg-loc-card:hover .bg-loc-photo,
.lh-clinic-card:hover .lh-clinic-photo,
.listing:hover .listing-photo,
.product-card:hover .product-photo,
.agent-card:hover .agent-photo {
transform: scale(1.04);
}
/* ===== Image quality — load lazily, render crisp ===== */
[style*="background-image"] { background-position: center; background-size: cover; }
img { max-width: 100%; display: block; }
.eyebrow {
display: inline-block;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--primary-deep);
margin-bottom: 0.6rem;
}
/* ===== Filter reflow animation ===== */
.filter-pulse {
animation: filterPulse 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes filterPulse {
0% { opacity: 0.25; transform: translateY(6px) scale(0.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== Persona switch reveal animation ===== */
.persona-pulse {
animation: personaPulse 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes personaPulse {
0% { opacity: 0; transform: translateY(8px); }
60% { opacity: 1; transform: translateY(-2px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Tier-x-persona accent line (subtle, for restaurant samples — different colour line per persona) */
[data-tier="active"][data-persona-active="anniversary"] .accent-line,
[data-tier="advanced"][data-persona-active="anniversary"] .accent-line {
background: linear-gradient(90deg, transparent, #be185d, transparent) !important;
}
[data-tier="active"][data-persona-active="pre-theatre"] .accent-line,
[data-tier="advanced"][data-persona-active="pre-theatre"] .accent-line {
background: linear-gradient(90deg, transparent, #b08a4a, transparent) !important;
}
/* Filter counter alignment — make sure it ends up right-aligned even if many chips wrap */
.filter-bar { position: relative; }
.filter-bar .filter-count { margin-left: auto; }
/* Mobile callout polish — feature callouts shouldn't overflow on narrow screens */
@media (max-width: 640px) {
.feature-callout {
position: static !important;
display: inline-block;
margin: 0.4rem 0 0;
transform: none !important;
}
.feature-callout::after {
display: none;
}
.feature-explainer {
position: static !important;
width: 100% !important;
margin: 0.4rem 0 0;
}
}
/* ===== Filter chips ===== */
.filter-bar {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
}
.chip {
font-size: 0.76rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--slate-200);
background: var(--paper);
color: var(--slate-700);
transition: all 0.15s;
cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.diet-veg.active { background: #166534; border-color: #166534; }
.chip.diet-vegan.active { background: #14532d; border-color: #14532d; }
.chip.diet-gf.active { background: #92400e; border-color: #92400e; }
/* ===== Hero section (vertical-themed via class) ===== */
.s-hero {
padding: 5rem 1.4rem 3rem;
text-align: center;
}
.s-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; margin: 0.4rem 0 1rem; }
.s-hero p { font-size: 1.05rem; max-width: 640px; margin: 0 auto 1.6rem; color: var(--slate-600); line-height: 1.55; }
.s-hero-cta { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
/* ===== Tier-specific design escalation ===== */
/* Foundation: clean, simple, no gradients */
[data-tier="foundation"] { --hero-bg: var(--cream); }
[data-tier="foundation"] .s-hero { background: var(--hero-bg); }
/* Active: subtle gradient, more visual depth */
[data-tier="active"] .s-hero {
background: linear-gradient(180deg, var(--cream) 0%, var(--primary-tint-2) 100%);
}
[data-tier="active"] .card { border-radius: var(--r-lg); }
/* Advanced: dark accents, dashboard-y */
[data-tier="advanced"] {
--section-accent: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
}
[data-tier="advanced"] .s-hero {
background: var(--ink);
color: var(--paper);
}
[data-tier="advanced"] .s-hero p { color: rgba(255,255,255,0.72); }
/* Custom: full SaaS feel, applied via app-shell layout */
/* ===== Admin shells ===== */
.admin-body { background: var(--slate-50); min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-side {
background: var(--ink);
color: var(--paper);
padding: 1.4rem 1rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.admin-side h4 {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin: 1.2rem 0 0.5rem;
padding: 0 0.6rem;
}
.admin-side h4:first-child { margin-top: 0; }
.admin-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.admin-nav a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.7rem;
border-radius: var(--r-sm);
font-size: 0.86rem;
color: rgba(255,255,255,0.78);
transition: background 0.15s, color 0.15s;
}
.admin-nav a:hover { background: rgba(255,255,255,0.06); color: var(--paper); }
.admin-nav a.active { background: var(--primary-tint); color: var(--primary); }
.admin-nav a.locked { color: rgba(255,255,255,0.32); cursor: not-allowed; }
.admin-nav a.locked::after {
content: " 🔒";
font-size: 0.74rem;
}
.admin-main {
padding: 1.6rem 2rem;
overflow-x: hidden;
}
/* ── Locked app-shell (desktop ≥721px): the left nav stays put, the content scrolls
on its own. Pin the shell to the viewport and give the sidebar and main column each
their own scroll. Gated above the mobile breakpoint — at ≤720px the sidebar collapses
to a top strip and the window scrolls, so the shell must NOT be height-clipped there.
(admin-* lives here; the custom saas-* shells set the same classes inline, but only
properties that don't conflict, so this reaches them too.) */
@media (min-width: 721px) {
.admin-shell, .saas-shell { height: 100vh; overflow: hidden; }
.admin-side, .saas-side { height: 100vh; min-height: 0; overflow: hidden auto; }
.admin-main, .saas-main { height: 100vh; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; }
}
/* Left-nav anchor clicks scroll the content gracefully instead of snapping. On desktop
the main column is the scroll box (locked sidebar); on mobile the window scrolls.
Smooth-scroll whichever applies; scroll-margin keeps the target clear of the top. */
html:has(.admin-body) { scroll-behavior: smooth; }
.admin-main, .saas-main { scroll-behavior: smooth; }
.admin-main [id],
.saas-main [id] { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
html:has(.admin-body) { scroll-behavior: auto; }
.admin-main, .saas-main { scroll-behavior: auto; }
}
.admin-topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.6rem;
}
.admin-topbar h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.admin-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--paper); border: 1px solid var(--slate-100); border-radius: var(--r-md); padding: 1.1rem; }
.stat-card .stat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--slate-500); margin-bottom: 0.4rem; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; line-height: 1; margin-bottom: 0.25rem; }
.stat-card .stat-trend { font-size: 0.74rem; color: var(--primary-deep); font-weight: 600; }
.stat-card .stat-trend.down { color: var(--danger); }
.admin-table {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: 1.4rem;
}
.admin-table h3 {
margin: 0;
padding: 1rem 1.2rem;
font-size: 0.92rem;
font-weight: 700;
border-bottom: 1px solid var(--slate-100);
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
padding: 0.7rem 1.2rem;
font-size: 0.84rem;
text-align: left;
}
.admin-table th { background: var(--slate-50); font-weight: 700; color: var(--slate-600); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }
.admin-table tr { border-top: 1px solid var(--slate-100); }
.admin-table tr:first-child { border-top: none; }
.tag {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
padding: 0.18rem 0.5rem;
border-radius: 999px;
letter-spacing: 0.5px;
}
.tag-new { background: var(--primary-tint); color: var(--primary-deep); }
.tag-pending { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.tag-cleared { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.tag-flagged { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
/* Mobile */
@media (max-width: 720px) {
.admin-shell, .saas-shell { grid-template-columns: 1fr; }
.admin-side, .saas-side { position: static; height: auto; max-height: none; padding: 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-nav, .saas-nav { flex-direction: row; flex-wrap: wrap; }
.admin-nav a, .saas-nav a { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
.saas-nav h5 { width: 100%; margin: 0.6rem 0.6rem 0.2rem; }
.admin-main, .saas-main { padding: 1.2rem; }
.saas-stat-row, .admin-stat-row { grid-template-columns: 1fr 1fr; }
.saas-row { grid-template-columns: 1fr; }
.chat-window { width: calc(100vw - 1rem); right: 0.5rem; bottom: 5rem; }
.chat-launch { bottom: 1rem; right: 1rem; }
.voice-launch { bottom: 1rem; right: 5rem; }
.tenant-switcher { width: 100%; }
/* SaaS sidebars collapse to a horizontal scrollable strip on mobile */
.saas-side { overflow-x: auto; }
}
@media (max-width: 480px) {
.saas-stat-row, .admin-stat-row { grid-template-columns: 1fr; }
.gallery { padding: 2.4rem 1rem 3.5rem; }
.tier-grid { grid-template-columns: 1fr; }
.sample-card { padding: 1.2rem; }
}
/* ===== "Back to top" floating button — appears after 600px scroll ===== */
.back-to-top {
position: fixed;
bottom: 1.4rem;
left: 1.4rem;
z-index: 38;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 24px rgba(10, 14, 20, 0.18);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.back-to-top:hover { background: var(--primary); color: var(--ink); }
.back-to-top.btt-show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (max-width: 480px) {
.back-to-top { left: 1rem; bottom: 1rem; width: 40px; height: 40px; }
}
/* ===== Interactive hint banner — slides in below sample chrome ===== */
.interactive-hint {
background: linear-gradient(90deg, rgba(0, 217, 70, 0.08), rgba(0, 217, 70, 0.02));
border-bottom: 1px solid rgba(0, 217, 70, 0.18);
padding: 0.7rem 1.4rem;
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
font-size: 0.78rem;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
padding-top: 0;
padding-bottom: 0;
}
.interactive-hint.ih-show {
max-height: 80px;
opacity: 1;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.interactive-hint.ih-hidden {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
.interactive-hint .ih-eyebrow {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--primary-deep);
flex-shrink: 0;
}
.interactive-hint .ih-bits {
display: flex;
gap: 0.3rem 0.85rem;
flex-wrap: wrap;
flex: 1;
}
.interactive-hint .ih-bit {
color: var(--slate-700);
position: relative;
padding-left: 0.95rem;
}
.interactive-hint .ih-bit::before {
content: "•";
color: var(--primary);
position: absolute;
left: 0;
font-weight: 800;
}
.interactive-hint .ih-close {
background: none;
border: none;
color: var(--slate-500);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: var(--r-sm);
flex-shrink: 0;
}
.interactive-hint .ih-close:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
/* On dark-tier samples (advanced + custom) flip the colours */
[data-tier="advanced"] .interactive-hint,
[data-tier="custom"] .interactive-hint {
background: rgba(0, 217, 70, 0.08);
border-bottom-color: rgba(0, 217, 70, 0.18);
}
[data-tier="advanced"] .interactive-hint .ih-bit,
[data-tier="custom"] .interactive-hint .ih-bit { color: rgba(255, 255, 255, 0.78); }
[data-tier="advanced"] .interactive-hint .ih-close,
[data-tier="custom"] .interactive-hint .ih-close { color: rgba(255, 255, 255, 0.5); }
[data-tier="advanced"] .interactive-hint .ih-close:hover,
[data-tier="custom"] .interactive-hint .ih-close:hover { color: var(--paper); background: rgba(255,255,255,0.06); }
/* ===== "Try me" prompt — fades in next to the chat bubble on first visit ===== */
.try-me-prompt {
position: fixed;
bottom: 5rem;
right: 1.4rem;
z-index: 39;
pointer-events: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.try-me-prompt.tmp-show {
opacity: 1;
transform: translateY(0);
animation: tryMeBob 2.6s ease-in-out infinite;
animation-delay: 0.6s;
}
@keyframes tryMeBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.try-me-prompt .tmp-bubble {
background: var(--ink);
color: var(--paper);
font-size: 0.86rem;
font-weight: 500;
padding: 0.7rem 1rem;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(10, 14, 20, 0.28);
border: 1px solid rgba(0, 217, 70, 0.3);
max-width: 280px;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.try-me-prompt .tmp-bubble:hover {
transform: translateY(-2px);
border-color: var(--primary);
box-shadow: 0 16px 40px rgba(0, 217, 70, 0.18);
}
.try-me-prompt .tmp-bubble small {
color: var(--primary) !important;
}
.try-me-prompt .tmp-arrow {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--ink);
margin: 0 0 0 auto;
margin-right: 16px;
}
@media (max-width: 480px) {
.try-me-prompt { right: 1rem; bottom: 4.6rem; }
.try-me-prompt .tmp-bubble { font-size: 0.76rem; padding: 0.5rem 0.75rem; }
}
/* ===== "Want one for your business?" CTA — auto-injected on sample pages ===== */
.get-one-cta {
background: linear-gradient(135deg, var(--ink) 0%, #1a3a8a 200%);
color: var(--paper);
padding: 2.4rem 1.4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.get-one-cta::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(0, 217, 70, 0.18) 0%, transparent 60%);
pointer-events: none;
}
.get-one-cta .goc-inner {
max-width: 680px;
margin: 0 auto;
position: relative;
}
.get-one-cta .goc-eyebrow {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--primary);
display: inline-block;
margin-bottom: 0.7rem;
}
.get-one-cta h3 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: 800;
letter-spacing: -0.6px;
margin: 0 0 0.7rem;
color: var(--paper);
line-height: 1.1;
}
.get-one-cta p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.72);
line-height: 1.6;
margin: 0 0 1.4rem;
}
.get-one-cta .goc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--primary);
color: var(--ink);
font-weight: 800;
padding: 0.92rem 1.7rem;
border-radius: 999px;
text-decoration: none;
font-size: 0.94rem;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 8px 24px rgba(0, 217, 70, 0.18);
}
.get-one-cta .goc-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 217, 70, 0.28);
}
/* ===== Gallery vertical filter buttons ===== */
.vf-btn {
font-size: 0.78rem;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid var(--slate-200);
background: var(--paper);
color: var(--slate-700);
cursor: pointer;
transition: all 0.15s;
}
.vf-btn:hover {
border-color: var(--ink);
color: var(--ink);
}
.vf-btn.active {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* ===== Gallery (samples index) — editorial hero ===== */
.gallery {
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1.6rem 6rem;
}
.gallery-head {
text-align: center;
margin-bottom: 4rem;
padding: 4rem 1rem 2rem;
position: relative;
}
.gallery-head::before {
content: "";
position: absolute;
inset: -1rem 0 0;
background-image:
radial-gradient(ellipse at 20% 0%, rgba(0, 217, 70, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.gallery-head .eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--primary-deep);
display: inline-block;
margin-bottom: 1.2rem;
}
.gallery-head h1 {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 4.4rem);
font-weight: 800;
letter-spacing: -2px;
margin: 0.4rem 0 1.2rem;
line-height: 0.98;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.gallery-head h1 em {
font-style: italic;
color: var(--primary-deep);
font-weight: 700;
}
.gallery-head p {
font-size: 1.1rem;
color: var(--slate-600);
max-width: 640px;
margin: 0 auto 2rem;
line-height: 1.65;
}
.tier-row {
margin-bottom: 1.5rem;
padding: 1.4rem;
background: var(--paper);
border-radius: var(--r-lg);
border: 1px solid var(--slate-100);
}
.tier-row-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1rem;
gap: 1rem;
border-bottom: 1px solid var(--slate-100);
padding-bottom: 0.7rem;
}
.tier-row-head h2 { font-size: 1.4rem; margin: 0; }
.tier-row-head .tier-pill {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: var(--primary-tint);
color: var(--primary-deep);
}
.tier-row-head[data-tier="active"] .tier-pill { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.tier-row-head[data-tier="advanced"] .tier-pill { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.tier-row-head[data-tier="custom"] .tier-pill { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.tier-row-head .tier-pricing { font-size: 0.82rem; color: var(--slate-500); font-weight: 500; }
.tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.2rem;
align-items: stretch;
}
/* New pair pattern: big square (sample-card link) + little rectangle (sc-actions) */
.sample-card-pair {
display: flex;
flex-direction: column;
gap: 0.55rem;
max-width: 460px;
width: 100%;
}
.sample-card {
display: flex;
flex-direction: column;
gap: 0.55rem;
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: var(--r-md);
padding: 1.4rem;
text-decoration: none;
color: inherit;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s;
flex: 1;
min-height: 0;
}
.sample-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(10, 14, 20, 0.08);
border-color: var(--primary);
}
.sample-card .sc-tag {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.sample-card h3 {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.4px;
margin: 0;
line-height: 1.15;
}
.sample-card p {
font-size: 0.88rem;
color: var(--slate-600);
line-height: 1.55;
}
.sample-card p {
flex: 1;
margin: 0;
}
.sample-card .sc-open {
display: inline-block;
margin-top: 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.2px;
}
.sample-card.custom-card .sc-open { color: #6d28d9; }
.sample-card:hover .sc-open { color: var(--primary-deep); }
/* Action bar — the "little rectangle" sitting under the big card */
.sample-card-pair .sc-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.55rem 0.7rem;
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: var(--r-sm);
margin: 0;
}
.sample-card-pair .sc-actions a {
font-size: 0.76rem;
font-weight: 700;
padding: 0.35rem 0.7rem;
border-radius: var(--r-sm);
background: var(--ink);
color: var(--paper);
text-decoration: none;
border: 1px solid var(--ink);
transition: all 0.15s;
}
.sample-card-pair .sc-actions a:hover {
background: var(--primary-deep);
border-color: var(--primary-deep);
}
.sample-card-pair .sc-actions a.primary {
background: var(--primary);
color: var(--ink);
border-color: var(--primary);
}
.sample-card-pair .sc-actions a.primary:hover {
background: var(--primary-deep);
color: var(--paper);
}
/* Custom-card action bar: purple tint */
.sample-card-pair[data-tier-card="custom"] .sc-actions a {
background: #6d28d9;
border-color: #6d28d9;
}
.sample-card-pair[data-tier-card="custom"] .sc-actions a:hover {
background: #4c1d95;
border-color: #4c1d95;
}
.sample-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.sample-card.coming-soon {
opacity: 0.55;
pointer-events: none;
}
.sample-card.coming-soon::after {
content: "Coming next";
position: absolute;
top: 0.8rem;
right: 0.8rem;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--slate-500);
background: var(--slate-100);
padding: 0.2rem 0.5rem;
border-radius: 999px;
}
.sample-card .sc-tag {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--slate-500);
}
.sample-card h3 { font-size: 1.1rem; margin: 0; font-weight: 800; letter-spacing: -0.3px; }
.sample-card p { font-size: 0.86rem; color: var(--slate-600); margin: 0; line-height: 1.5; }
.sample-card .sc-actions { margin-top: auto; display: flex; gap: 0.5rem; }
.sample-card .sc-actions a {
font-size: 0.78rem;
font-weight: 700;
padding: 0.45rem 0.85rem;
border-radius: var(--r-sm);
border: 1px solid var(--slate-200);
color: var(--slate-700);
transition: all 0.15s;
}
.sample-card .sc-actions a:hover { border-color: var(--ink); color: var(--ink); }
.sample-card .sc-actions a.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sample-card .sc-actions a.primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
/* =====================================================================
EDITORIAL DESIGN SYSTEM — designer-level layout helpers + ornaments
--------------------------------------------------------------------
Goals: asymmetric heroes, layered image+type compositions, decorative
per-vertical ornaments, refined imagery treatments. Composable utilities
any sample can adopt.
===================================================================== */
/* --- Editorial hero: full-bleed image with offset content card --- */
.ed-hero {
position: relative;
width: 100%;
min-height: clamp(520px, 78vh, 760px);
overflow: hidden;
isolation: isolate;
}
.ed-hero-imagery {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: -2;
transform: scale(1.02);
transition: transform 8s ease-out;
}
.ed-hero.in-view .ed-hero-imagery { transform: scale(1.0); }
.ed-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8,12,18,0.18) 0%, rgba(8,12,18,0.55) 60%, rgba(8,12,18,0.78) 100%);
z-index: -1;
}
.ed-hero-frame {
max-width: 1240px;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6.5rem) clamp(1.4rem, 5vw, 3rem);
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}
.ed-hero-content {
max-width: 720px;
color: #faf8f3;
}
.ed-hero-content .ed-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin-bottom: 1.4rem;
}
.ed-hero-content .ed-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: currentColor;
display: inline-block;
}
.ed-hero-content h1 {
font-size: clamp(2.6rem, 7vw, 5.4rem);
letter-spacing: -2.5px;
line-height: 0.96;
font-weight: 800;
margin: 0 0 1.2rem;
color: #faf8f3;
text-wrap: balance;
}
.ed-hero-content h1 em {
font-style: italic;
font-weight: 500;
}
.ed-hero-content .ed-lede {
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.6;
color: rgba(255,255,255,0.86);
max-width: 540px;
margin: 0 0 1.6rem;
}
.ed-hero-content .ed-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.ed-hero-content .ed-btn {
padding: 0.95rem 1.7rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.3px;
text-decoration: none;
border: 1px solid transparent;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.ed-hero-content .ed-btn.primary {
background: #faf8f3;
color: #1a1409;
}
.ed-hero-content .ed-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
.ed-hero-content .ed-btn.ghost {
background: transparent;
color: #faf8f3;
border-color: rgba(255,255,255,0.4);
}
.ed-hero-content .ed-btn.ghost:hover {
border-color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.08);
}
.ed-hero-meta {
position: absolute;
top: clamp(2rem, 5vw, 3.5rem);
right: clamp(1.4rem, 5vw, 3rem);
text-align: right;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
line-height: 1.8;
}
.ed-hero-meta strong {
display: block;
color: rgba(255,255,255,0.92);
font-weight: 700;
}
/* --- Editorial split: 60/40 image-text composition with offset --- */
.ed-split {
max-width: 1240px;
margin: 0 auto;
padding: clamp(3.5rem, 7vw, 6rem) clamp(1.4rem, 5vw, 3rem);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.ed-split.reverse { grid-template-columns: 1fr 1.2fr; }
.ed-split.reverse .ed-split-imagery { order: 2; }
@media (max-width: 760px) {
.ed-split, .ed-split.reverse { grid-template-columns: 1fr; gap: 2rem; }
.ed-split.reverse .ed-split-imagery { order: 0; }
}
.ed-split-imagery {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
border-radius: 4px;
position: relative;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.4);
}
.ed-split-imagery::after {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(255,255,255,0.25);
pointer-events: none;
}
.ed-split-imagery.tall { aspect-ratio: 3 / 4.5; }
.ed-split-content .ed-eyebrow {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 1.2rem;
}
.ed-split-content .ed-eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.ed-split-content h2 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
letter-spacing: -1.2px;
line-height: 1.05;
margin: 0 0 1.1rem;
}
.ed-split-content p {
font-size: 1.02rem;
line-height: 1.7;
color: var(--slate-600);
margin: 0 0 1rem;
max-width: 480px;
}
.ed-split-content .ed-pullquote {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.35;
font-weight: 500;
font-style: italic;
border-left: 2px solid var(--ink);
padding: 0.4rem 0 0.4rem 1.4rem;
margin: 1.6rem 0;
color: var(--ink);
max-width: 480px;
}
/* --- Pull-quote standalone block --- */
.ed-pullquote-bar {
max-width: 880px;
margin: clamp(2.5rem, 5vw, 4rem) auto;
padding: 0 clamp(1.4rem, 5vw, 3rem);
text-align: center;
}
.ed-pullquote-bar blockquote {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.3;
font-weight: 500;
font-style: italic;
letter-spacing: -0.5px;
margin: 0;
color: var(--ink);
}
.ed-pullquote-bar blockquote::before,
.ed-pullquote-bar blockquote::after {
content: '"';
display: block;
font-size: 3rem;
line-height: 0.4;
color: var(--primary-deep);
opacity: 0.4;
margin: 0.6rem auto;
}
.ed-pullquote-bar blockquote::after { transform: rotate(180deg); margin-top: 1.2rem; }
.ed-pullquote-bar cite {
display: block;
margin-top: 1.4rem;
font-style: normal;
font-size: 0.72rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--slate-500);
font-weight: 700;
}
/* --- Decorative ornaments per vertical (line drawings) --- */
.ornament {
display: block;
margin: clamp(2rem, 4vw, 3rem) auto;
width: clamp(160px, 30vw, 280px);
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.55;
}
/* Bellaria — olive-branch divider in muted gold */
body[data-vertical="restaurant"] .ornament,
.ornament.olive {
background-image: url("data:image/svg+xml;utf8,");
}
/* Lakeshore — calm wave / horizon */
body[data-vertical="clinic"] .ornament,
.ornament.wave {
background-image: url("data:image/svg+xml;utf8,");
}
/* Crestline — architectural / blueprint mark */
body[data-vertical="realestate"] .ornament,
.ornament.archline {
background-image: url("data:image/svg+xml;utf8,");
}
/* Mara — ornamental flourish (magenta) */
body[data-vertical="ecom"] .ornament,
.ornament.flourish {
background-image: url("data:image/svg+xml;utf8,");
}
/* Crestmont — supply / arrow line (amber) */
body[data-vertical="supply"] .ornament,
.ornament.arrowline {
background-image: url("data:image/svg+xml;utf8,");
}
/* Palio Ops — emerald node graph */
body[data-vertical="portal"] .ornament,
.ornament.nodeline {
background-image: url("data:image/svg+xml;utf8,");
}
/* --- Refined imagery treatments --- */
.ed-image-frame {
position: relative;
border-radius: 4px;
overflow: hidden;
}
.ed-image-frame::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,0.3);
pointer-events: none;
}
.ed-image-caption {
font-size: 0.72rem;
letter-spacing: 2.4px;
text-transform: uppercase;
font-weight: 600;
color: var(--slate-500);
margin-top: 0.8rem;
display: block;
}
/* --- Editorial section header (large display + thin rule) --- */
.ed-section-header {
max-width: 1240px;
margin: 0 auto;
padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 5vw, 3rem) 0;
}
.ed-section-header .ed-section-num {
display: inline-block;
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 600;
font-style: italic;
color: var(--primary-deep);
margin-bottom: 0.6rem;
letter-spacing: 0.5px;
}
.ed-section-header .ed-section-num::before {
content: "— ";
font-style: normal;
}
.ed-section-header h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
letter-spacing: -1.5px;
line-height: 1.04;
margin: 0 0 0.9rem;
font-weight: 800;
text-wrap: balance;
}
.ed-section-header h2 em {
font-style: italic;
font-weight: 500;
color: var(--primary-deep);
}
.ed-section-header .ed-section-lede {
font-size: 1.05rem;
line-height: 1.65;
color: var(--slate-600);
max-width: 620px;
margin: 0;
}
/* --- Per-vertical hero theming for editorial system --- */
body[data-vertical="restaurant"] .ed-hero-content h1 { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -2px; }
body[data-vertical="restaurant"] .ed-hero-content .ed-eyebrow { color: #d4a356; }
body[data-vertical="restaurant"] .ed-hero-content .ed-btn.primary { background: #d4a356; color: #1a1409; }
body[data-vertical="restaurant"] .ed-section-header h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -1px; }
body[data-vertical="restaurant"] .ed-section-header .ed-section-num { color: #b08a4a; }
body[data-vertical="clinic"] .ed-hero-content .ed-eyebrow { color: #7dd3fc; }
body[data-vertical="clinic"] .ed-hero-content .ed-btn.primary { background: #0284c7; color: #fff; }
body[data-vertical="clinic"] .ed-section-header h2 { color: #0c4a6e; }
body[data-vertical="clinic"] .ed-section-header .ed-section-num { color: #0284c7; }
body[data-vertical="realestate"] .ed-hero-content .ed-eyebrow { color: var(--primary); }
body[data-vertical="realestate"] .ed-hero-content .ed-btn.primary { background: var(--primary); color: var(--ink); }
body[data-vertical="realestate"] .ed-section-header .ed-section-num { color: var(--primary-deep); }
body[data-vertical="ecom"] .ed-hero-content .ed-eyebrow { color: #fbcfe8; }
body[data-vertical="ecom"] .ed-hero-content h1 { font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-weight: 700; }
body[data-vertical="ecom"] .ed-section-header h2 { font-family: 'Playfair Display', 'Cormorant Garamond', serif; }
body[data-vertical="supply"] .ed-hero-content .ed-eyebrow { color: #fbbf24; }
body[data-vertical="portal"] .ed-hero-content .ed-eyebrow { color: #6ee7b7; }
/* =====================================================================
MOBILE OPTIMIZATION — gallery, sample cards, admin/saas shells, hero
===================================================================== */
/* Global safety — also covers all inline-styled demo pages that import this */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, canvas, picture { max-width: 100%; height: auto; }
/* Tables inside any inline-styled demo: never force horizontal page scroll */
.admin-table, .saas-table { overflow-x: auto; }
.admin-table table, .saas-table table { min-width: 0; }
@media (max-width: 720px) {
/* Gallery (samples index) */
.gallery { padding: 2.4rem 1rem 4rem; }
.gallery-head { padding: 2.4rem 0.4rem 1.4rem; margin-bottom: 2rem; }
.gallery-head h1 { font-size: clamp(2rem, 9vw, 2.6rem); letter-spacing: -1px; }
.gallery-head p { font-size: 0.96rem; }
.tier-row { padding: 1.1rem; margin-bottom: 1.2rem; }
.tier-row-head { flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.55rem; margin-bottom: 0.85rem; }
.tier-row-head h2 { font-size: 1.2rem; }
.tier-row-head .tier-pricing { font-size: 0.74rem; flex-basis: 100%; }
.tier-grid { grid-template-columns: 1fr; gap: 0.9rem; }
.sample-card-pair { max-width: 100%; }
.sample-card { padding: 1.1rem; }
.sample-card h3 { font-size: 1.05rem; }
.sample-card p { font-size: 0.86rem; }
.sample-card .sc-actions { flex-wrap: wrap; }
.sample-card .sc-actions a { flex: 1 1 calc(50% - 0.25rem); justify-content: center; text-align: center; min-height: 40px; display: inline-flex; align-items: center; }
/* Sample page hero — already partially handled, tighten further */
.s-hero { padding: 3rem 1rem 2rem; }
.s-hero p { font-size: 0.96rem; }
.s-hero-cta { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.s-hero-cta > * { width: 100%; justify-content: center; text-align: center; }
/* Filter chips */
.filter-bar { gap: 0.35rem; }
.chip { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
/* Persona bar (admin tutorial control bar) */
.persona-bar { flex-wrap: wrap; gap: 0.5rem !important; padding: 0.7rem 0.9rem !important; }
.persona-bar select, .persona-bar button { font-size: 0.82rem !important; }
/* Admin/SaaS shells — sidebar becomes a top strip */
.admin-shell, .saas-shell { grid-template-columns: 1fr !important; }
.admin-side, .saas-side {
position: static !important;
height: auto !important;
max-height: none !important;
padding: 0.8rem 1rem !important;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.admin-side h4, .saas-side h5 { display: none; }
.admin-side h4:first-child, .saas-side h5:first-child { display: block; padding: 0; margin: 0 0 0.4rem; }
.admin-nav, .saas-nav {
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.3rem !important;
}
.admin-nav a, .saas-nav a {
flex: 0 0 auto;
padding: 0.5rem 0.8rem !important;
font-size: 0.8rem !important;
border-radius: 999px;
background: rgba(255,255,255,0.04);
white-space: nowrap;
}
.admin-main, .saas-main { padding: 1.1rem !important; }
.admin-topbar { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.admin-topbar h1 { font-size: 1.15rem !important; }
.admin-stat-row, .saas-stat-row { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
.stat-card { padding: 0.95rem 0.85rem !important; }
.stat-card .stat-value { font-size: 1.3rem !important; }
/* Admin tables — make them horizontally scrollable instead of breaking the layout */
.admin-table h3 { padding: 0.85rem 1rem !important; font-size: 0.86rem; flex-wrap: wrap; gap: 0.5rem; }
.admin-table th, .admin-table td { padding: 0.55rem 0.85rem !important; font-size: 0.78rem !important; white-space: nowrap; }
/* Editorial system */
.ed-hero { min-height: 70vh; }
.ed-hero-content h1 { font-size: clamp(2rem, 9vw, 3rem) !important; letter-spacing: -1px !important; }
.ed-hero-content .ed-lede { font-size: 0.96rem; }
.ed-hero-content .ed-actions { flex-direction: column; align-items: stretch; }
.ed-hero-content .ed-btn { justify-content: center; text-align: center; width: 100%; }
.ed-hero-meta { display: none; }
.ed-section-header h2 { font-size: clamp(1.6rem, 6vw, 2rem) !important; }
.ed-section-header .ed-section-lede { font-size: 0.94rem; }
.ed-pullquote-bar { padding: 0 1rem; }
.ed-pullquote-bar blockquote { font-size: clamp(1.2rem, 5vw, 1.6rem); }
/* "Get one for your business" CTA */
.get-one-cta { padding: 2rem 1rem; }
.get-one-cta h3 { font-size: clamp(1.25rem, 5vw, 1.6rem); }
.get-one-cta p { font-size: 0.9rem; }
.get-one-cta .goc-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.gallery-head h1 { font-size: clamp(1.7rem, 9vw, 2rem); }
.gallery-head p { font-size: 0.9rem; }
.tier-row-head h2 { font-size: 1.05rem; }
.sample-card { padding: 1rem; }
.sample-card .sc-actions a { flex: 1 1 100%; }
/* SaaS / admin sidebar even more compact */
.admin-side, .saas-side { padding: 0.6rem 0.8rem !important; }
.admin-nav a, .saas-nav a { padding: 0.45rem 0.7rem !important; font-size: 0.76rem !important; }
/* Admin shell stats single column on tiniest screens */
.admin-stat-row, .saas-stat-row { grid-template-columns: 1fr !important; }
/* Tutorial / interactive hint */
.interactive-hint { font-size: 0.72rem; padding-left: 1rem; padding-right: 1rem; }
.interactive-hint .ih-eyebrow { font-size: 0.62rem; letter-spacing: 1.4px; }
}
/* iPhone SE / very small screens */
@media (max-width: 360px) {
.gallery { padding: 1.8rem 0.8rem 3rem; }
.gallery-head h1 { font-size: 1.65rem; }
.tier-row { padding: 0.95rem 0.8rem; }
.sample-card { padding: 0.9rem; }
.sample-card h3 { font-size: 0.98rem; }
.sample-card p { font-size: 0.8rem; }
.admin-topbar h1 { font-size: 1rem !important; }
}
/* Touch device niceties: no hover transforms that confuse fingers */
@media (hover: none) {
.sample-card:hover { transform: none; }
.ed-hero-content .ed-btn.primary:hover { transform: none; }
}
/* =====================================================================
ADMIN / SAAS CONSOLES — MOBILE "DUMB DOWN"
On phones, the full admin console is overwhelming. Pages opt into one
of two mobile presentations:
(1) If a page has a block, that block
takes over the entire viewport — a best-in-class mobile pattern
(hero KPI + sparkline, action feed, glance metrics, FAB, tabs).
(2) Otherwise the page falls back to the curated slice: tenant header
+ KPI / monitoring strip + a "Full console on desktop" chip.
===================================================================== */
.m-admin-home { display: none; }
@media (max-width: 720px) {
/* (1) Mobile-home pages: hide everything else in main, including the
legacy topbar (the mobile home has its own header). Padding gives
the fixed bottom tab bar room to breathe. */
.admin-main:has(.m-admin-home) > *:not(.m-admin-home),
.saas-main:has(.m-admin-home) > *:not(.m-admin-home) {
display: none !important;
}
.admin-main:has(.m-admin-home),
.saas-main:has(.m-admin-home) { padding-bottom: 6rem !important; }
.admin-main:has(.m-admin-home)::after,
.saas-main:has(.m-admin-home)::after { content: none !important; }
.m-admin-home { display: block; }
/* Hide every top-level section in main except the topbar, the KPI stat
strip, and the first monitoring grid. Positive-keep so one-off card
classes (.agent-card, .marley-card, .acct-card, etc.) auto-disappear. */
.admin-main > *:not(.admin-topbar):not(.admin-stat-row):not(.monitoring-grid):not(.top-stat-row):not(.m-admin-home),
.saas-main > *:not(.saas-topbar):not(.saas-stat-row):not(.monitoring-grid):not(.top-stat-row):not(.m-admin-home) {
display: none !important;
}
/* Keep only the first monitoring grid if a page has more than one. */
.admin-main .monitoring-grid ~ .monitoring-grid,
.saas-main .monitoring-grid ~ .monitoring-grid { display: none !important; }
/* Sidebar: hide every section heading AND every nav list. The nav
pills point to anchors whose panels we just hid, so they'd be dead
links. Whatever non-list element sits at the top of the sidebar
(tenant name block, tenant-switcher) is what stays as context. */
.admin-side h4,
.admin-side .admin-nav,
.saas-side h5,
.saas-side .saas-nav { display: none !important; }
/* Drop the secondary topbar button (Tutorial toggle in either style) —
keep only the primary "View live site" CTA. */
.admin-topbar .btn-secondary,
.saas-topbar .btn-secondary,
.admin-topbar .sc-toggle,
.saas-topbar .sc-toggle { display: none !important; }
/* Desktop-handoff chip appended after the curated hero. */
.admin-main::after,
.saas-main::after {
content: "Full console available on desktop";
display: block;
margin: 1.4rem 0 0;
padding: 0.8rem 1rem;
background: rgba(0, 217, 70, 0.06);
color: var(--primary-deep, #006b22);
border: 1px solid rgba(0, 217, 70, 0.22);
border-radius: 12px;
text-align: center;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.4px;
}
}
/* =====================================================================
MOBILE ADMIN HOME — Stripe / Toast / OpenTable-class pattern
Hero KPI + sparkline → tappable action feed → glance metrics →
FAB + bottom tab bar. Lives inside `.admin-main` / `.saas-main`,
only visible on phones (≤720px — see toggle above).
===================================================================== */
.m-admin-home {
position: relative;
margin: 0.4rem 0 0;
}
.m-home-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1rem;
}
.m-home-day {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--slate-500);
margin-bottom: 0.1rem;
}
.m-home-title {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.4px;
margin: 0;
color: var(--ink);
}
.m-home-refresh {
width: 38px; height: 38px;
border-radius: 999px;
background: var(--paper);
border: 1px solid var(--slate-100);
color: var(--slate-500);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.m-home-refresh:active { background: var(--slate-50); color: var(--ink); }
/* Hero KPI card — the Stripe-style "today" number */
.m-hero {
display: block;
position: relative;
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
color: var(--paper);
border-radius: 18px;
padding: 1.1rem 1.2rem 0.8rem;
text-decoration: none;
margin-bottom: 1.4rem;
box-shadow: 0 10px 30px rgba(10, 14, 20, 0.18);
overflow: hidden;
}
.m-hero-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 0.3rem;
}
.m-hero-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-bottom: 0.2rem;
}
.m-hero-value {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -1.4px;
line-height: 1;
}
.m-hero-delta {
font-size: 0.84rem;
font-weight: 700;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(0, 217, 70, 0.18);
color: #6eeb9a;
}
.m-hero-delta.m-up::before {
content: "▲ ";
font-size: 0.6em;
vertical-align: 1px;
}
.m-spark {
width: 100%;
height: 40px;
margin: 0.4rem 0 0.2rem;
display: block;
}
.m-hero-meta {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
/* Section heading inside mobile home */
.m-section-head {
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--slate-500);
margin: 1.6rem 0 0.7rem;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.m-section-head small {
font-size: 0.7rem;
font-weight: 700;
color: var(--primary-deep);
letter-spacing: 0.2px;
text-transform: none;
}
/* Action feed — each lead a tappable card */
.m-feed {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.m-card {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: 14px;
padding: 0.95rem 1rem 0.85rem;
position: relative;
}
.m-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.m-pill {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.2px;
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
.m-pill-new { background: var(--primary-tint); color: var(--primary-deep); }
.m-card-time {
font-size: 0.72rem;
font-weight: 600;
color: var(--slate-500);
letter-spacing: 0.3px;
}
.m-card-title {
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.2px;
color: var(--ink);
margin-bottom: 0.2rem;
}
.m-card-sub {
font-size: 0.82rem;
color: var(--slate-500);
line-height: 1.45;
margin-bottom: 0.4rem;
}
.m-card-when {
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 0.7rem;
}
.m-card-actions {
display: flex;
gap: 0.5rem;
}
.m-act {
flex: 1;
border-radius: 10px;
padding: 0.6rem 0.8rem;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.1s ease, background 0.15s, opacity 0.15s;
}
.m-act:active { transform: scale(0.97); }
.m-act-primary {
background: var(--primary);
color: var(--ink);
}
.m-act-ghost {
background: var(--paper);
border-color: var(--slate-100);
color: var(--slate-500);
}
/* Glance metrics — small 2x2 grid */
.m-glance {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.m-glance-card {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: 12px;
padding: 0.75rem 0.85rem;
}
.m-glance-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--slate-500);
margin-bottom: 0.25rem;
}
.m-glance-value {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--ink);
line-height: 1.1;
}
.m-glance-value .m-glance-of {
font-size: 0.92rem;
font-weight: 600;
color: var(--slate-500);
}
.m-glance-trend {
font-size: 0.72rem;
color: var(--slate-500);
font-weight: 600;
margin-top: 0.15rem;
}
.m-glance-trend.m-up { color: var(--primary-deep); }
/* Floating action button */
.m-fab {
position: fixed;
right: 1.1rem;
bottom: 4.5rem;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--primary);
color: var(--ink);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 12px 28px rgba(0, 217, 70, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
z-index: 41;
transition: transform 0.12s ease;
}
.m-fab:active { transform: scale(0.94); }
/* Bottom tab bar */
.m-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--paper);
border-top: 1px solid var(--slate-100);
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.4rem 0 max(0.5rem, env(safe-area-inset-bottom));
z-index: 40;
box-shadow: 0 -4px 18px rgba(10, 14, 20, 0.04);
}
.m-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.4rem 0.2rem;
color: var(--slate-500);
text-decoration: none;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2px;
position: relative;
}
.m-tab.m-tab-active { color: var(--primary-deep); }
.m-tab-badge {
position: absolute;
top: 0.2rem;
right: 22%;
background: var(--primary);
color: var(--ink);
font-size: 0.58rem;
font-weight: 800;
min-width: 16px;
height: 16px;
border-radius: 999px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
/* ---- Live POS strip (lite) ---- */
.m-pos {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: 14px;
padding: 0.85rem 0.9rem;
margin-bottom: 1.4rem;
}
.m-pos-head {
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.m-pos-head small {
font-weight: 500;
color: var(--slate-500);
font-size: 0.72rem;
}
.m-live {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 1px;
color: var(--primary-deep);
background: var(--primary-tint);
padding: 0.1rem 0.4rem;
border-radius: 999px;
}
.m-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--primary);
animation: pulseRing 1.6s ease-out infinite;
}
.m-pos-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.4rem;
}
.m-pos-stat { text-align: left; }
.m-pos-val {
display: block;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--ink);
line-height: 1.1;
}
.m-pos-lbl {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--slate-500);
}
/* ---- Social post card ---- */
.m-social {
background: var(--paper);
border: 1px solid var(--slate-100);
border-radius: 14px;
padding: 0.95rem 1rem 0.85rem;
}
.m-social-meta {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--slate-500);
margin-bottom: 0.5rem;
}
.m-social-ico {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.5px;
color: #fff;
background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
padding: 0.15rem 0.4rem;
border-radius: 6px;
}
.m-social-body {
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink);
margin-bottom: 0.7rem;
}
/* ---- Upgrade teaser ---- */
.m-upgrade {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
margin-top: 1.4rem;
padding: 0.85rem 1rem;
border-radius: 12px;
background: var(--slate-50);
border: 1px dashed var(--slate-200, #cbd5e1);
text-decoration: none;
}
.m-upgrade-txt {
font-size: 0.78rem;
font-weight: 600;
color: var(--slate-500);
line-height: 1.35;
}
.m-upgrade-cta {
flex: 0 0 auto;
font-size: 0.78rem;
font-weight: 800;
color: var(--primary-deep);
white-space: nowrap;
}
/* ---- Resolved card states ---- */
.m-card { transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.m-card-confirmed { border-color: rgba(0, 217, 70, 0.35); background: rgba(0, 217, 70, 0.04); }
.m-card-declined { opacity: 0.6; }
.m-card-resolved {
font-size: 0.84rem;
font-weight: 800;
padding: 0.5rem 0;
text-align: center;
border-radius: 10px;
}
.m-resolved-confirmed, .m-resolved-scheduled { color: var(--primary-deep); background: var(--primary-tint); }
.m-resolved-declined { color: var(--slate-500); background: var(--slate-50); }
.m-pill-confirmed, .m-pill-scheduled { background: var(--primary-tint); color: var(--primary-deep); }
.m-pill-declined { background: var(--slate-100); color: var(--slate-500); }
/* ---- Incoming lead animation ---- */
.m-card-incoming {
opacity: 0;
transform: translateY(-12px) scale(0.97);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 0 0 2px rgba(0, 217, 70, 0.4);
}
.m-card-incoming.m-card-arrived {
opacity: 1;
transform: translateY(0) scale(1);
box-shadow: 0 0 0 0 rgba(0, 217, 70, 0);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1.2s ease 0.3s;
}
/* ---- Narrator (persistent demo guide, above tab bar) ---- */
.m-narrator {
position: fixed;
left: 0.7rem;
right: 0.7rem;
bottom: calc(58px + 0.6rem);
z-index: 42;
background: var(--ink);
color: var(--paper);
border-radius: 14px;
padding: 0.8rem 2.1rem 0.8rem 0.95rem;
box-shadow: 0 12px 30px rgba(10, 14, 20, 0.28);
border: 1px solid rgba(0, 217, 70, 0.3);
}
.m-narrator-body {
font-size: 0.78rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
.m-narrator-body strong { color: #fff; font-weight: 700; }
.m-narrator-body em { color: #6eeb9a; font-style: normal; font-weight: 600; }
.m-narrator-x {
position: absolute;
top: 0.4rem;
right: 0.5rem;
width: 24px; height: 24px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
.m-narrator-x:active { color: #fff; }
.m-narrator-pop { animation: mNarratorPop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes mNarratorPop {
0% { transform: translateY(6px) scale(0.98); }
100% { transform: translateY(0) scale(1); }
}
.m-admin-home.m-narr-off .m-narrator { display: none; }
/* ---- Toast ---- */
.m-toast {
position: fixed;
left: 50%;
bottom: calc(58px + 6.2rem);
transform: translate(-50%, 12px);
z-index: 43;
background: var(--ink);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
padding: 0.6rem 1rem;
border-radius: 999px;
box-shadow: 0 10px 26px rgba(10, 14, 20, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
max-width: calc(100vw - 2rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-toast-show { opacity: 1; transform: translate(-50%, 0); }
/* FAB sits above the narrator by default; drops down when narrator dismissed */
.m-admin-home .m-fab { bottom: calc(58px + 5.4rem); }
.m-admin-home.m-narr-off .m-fab { bottom: 4.5rem; }
.m-admin-home.m-narr-off .m-toast { bottom: calc(58px + 1rem); }
/* =====================================================================
PER-TIER CARD COLOR PROGRESSION
Each sample-card-pair carries data-tier-card; we key off it to give
each card a tier-specific top-edge color + subtle tinted gradient.
Scanning a vertical row L→R now produces a clear visual progression:
Foundation (green) → Active (amber) → Advanced (blue) → Custom (prism).
===================================================================== */
/* Foundation — primary green, the starting point */
[data-tier-card="foundation"] .sample-card {
background: linear-gradient(180deg, rgba(0, 217, 70, 0.07) 0%, var(--paper) 60%);
border-top: 3px solid var(--primary);
}
[data-tier-card="foundation"] .sample-card:hover {
border-color: var(--primary);
box-shadow: 0 16px 40px rgba(0, 217, 70, 0.12);
}
/* Active — amber, kinetic */
[data-tier-card="active"] .sample-card {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.07) 0%, var(--paper) 60%);
border-top: 3px solid #f59e0b;
}
[data-tier-card="active"] .sample-card:hover {
border-color: #f59e0b;
box-shadow: 0 16px 40px rgba(245, 158, 11, 0.14);
}
/* Advanced — deep blue, dashboard/serious */
[data-tier-card="advanced"] .sample-card {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, var(--paper) 60%);
border-top: 3px solid #2563eb;
}
[data-tier-card="advanced"] .sample-card:hover {
border-color: #2563eb;
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.14);
}
/* Custom — Refract prism: violet → cyan → green → amber → rose,
shifting horizontally. Speeds up on hover for a subtle delight. */
[data-tier-card="custom"] .sample-card {
position: relative;
background: linear-gradient(180deg,
rgba(139, 92, 246, 0.08) 0%,
rgba(6, 182, 212, 0.04) 35%,
rgba(0, 217, 70, 0.03) 65%,
rgba(251, 191, 36, 0.04) 100%);
border-top: 3px solid transparent;
background-clip: padding-box;
}
[data-tier-card="custom"] .sample-card::before {
content: "";
position: absolute;
top: -3px;
left: -1px;
right: -1px;
height: 3px;
background: linear-gradient(90deg,
#8b5cf6 0%,
#06b6d4 25%,
#00d946 50%,
#fbbf24 75%,
#f472b6 100%);
background-size: 200% 100%;
animation: prism-card-shift 12s ease-in-out infinite;
border-radius: var(--r-md) var(--r-md) 0 0;
pointer-events: none;
}
@keyframes prism-card-shift {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 0%; }
}
[data-tier-card="custom"] .sample-card:hover {
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 18px 48px rgba(139, 92, 246, 0.16);
}
[data-tier-card="custom"] .sample-card:hover::before {
animation-duration: 5s;
}
@media (prefers-reduced-motion: reduce) {
[data-tier-card="custom"] .sample-card::before { animation: none; }
}
/* =====================================================================
UNIVERSAL DEMO-PAGE MOBILE RULES
Covers shared inline patterns across all 33 sample/customer/admin pages.
Verticals: r-(restaurant), c-(clinic), re-(realestate),
bg-(Bellaria), lh-(Lakeshore), cr-(Crestline)
===================================================================== */
@media (max-width: 720px) {
/* Vertical-themed hero blocks across all demos */
.r-hero, .c-hero, .re-hero, .bg-hero, .lh-hero, .cr-hero {
padding: 3.5rem 1rem 2.5rem !important;
}
.s-hero h1, .r-hero h1, .c-hero h1, .re-hero h1, .bg-hero h1, .lh-hero h1, .cr-hero h1 {
font-size: clamp(2rem, 9vw, 2.8rem) !important;
letter-spacing: -1.1px !important;
}
.s-hero p.hero-subtitle, .r-hero p, .c-hero p, .re-hero p, .bg-hero p, .lh-hero p, .cr-hero p {
font-size: 0.96rem !important;
}
/* Vertical-themed sections */
.r-section, .c-section, .re-section, .bg-section, .lh-section, .cr-section {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.r-section h2, .c-section h2, .re-section h2, .bg-section h2, .lh-section h2, .cr-section h2 {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
letter-spacing: -0.6px !important;
}
.r-section .lede, .c-section .lede, .re-section .lede, .bg-section .lede, .lh-section .lede, .cr-section .lede {
font-size: 0.96rem !important;
}
/* Status / strip rows — wrap nicely */
.monitoring-strip, .compliance-strip, .compliance-band, .observability-strip, .audit-strip {
flex-wrap: wrap !important;
gap: 0.6rem !important;
padding: 0.7rem 1rem !important;
font-size: 0.72rem !important;
}
.compliance-badge { font-size: 0.68rem !important; padding: 0.3rem 0.7rem !important; }
/* Menu lists / cards (restaurant) */
.menu-list { grid-template-columns: 1fr !important; gap: 1.1rem !important; }
.menu-item .mi-name { font-size: 1.1rem !important; }
.menu-item .mi-desc { font-size: 0.84rem !important; }
/* Voice / drip / call-out cards: stack */
.voice-card, .drip-card, .compliance-card, .lh-intake-card, .bg-reserve-card,
.cma-card, .intake-card, .cr-search-cell, .concierge-card, .ai-bar,
.agent-card, .ehr-card, .billing-card, .brand-card, .balance-card, .vip-card,
.acct-card, .reservation-card, .info-card, .blog-card, .svc-card,
.product-card, .marley-card, .draft-card, .monitor-card,
.bg-story-inner, .returning-hero-inner, .ed-split-imagery + * {
grid-template-columns: 1fr !important;
padding: 1.3rem !important;
}
.bg-story-inner, .returning-hero-inner { padding: 0 !important; }
.voice-card h3, .drip-card h3, .compliance-card h3 { font-size: 1.15rem !important; }
.voice-btn { width: 100%; justify-content: center; }
.drip-grid, .acct-grid, .org-grid, .agent-grid, .listing-grid, .blog-grid,
.social-grid, .info-grid, .svc-grid, .product-grid, .storefront-grid,
.reorder-grid, .monitoring-grid, .provider-row, .bg-locations, .bg-dishes {
grid-template-columns: 1fr !important;
}
/* Custom platform navs (bg-, store-, ec-…) — let nav links wrap, smaller padding */
.bg-nav, .store-topbar, .lh-nav, .cr-nav {
padding: 0.7rem 1rem !important;
flex-wrap: wrap !important;
gap: 0.6rem !important;
}
.bg-nav-links, .store-nav, .cr-nav-links, .lh-nav-links {
gap: 0.85rem !important;
flex-wrap: wrap;
font-size: 0.78rem !important;
}
.bg-logo, .store-logo, .lh-logo, .cr-logo { font-size: 1.1rem !important; letter-spacing: 3px !important; }
/* Horizontal scroll strips remain horizontal */
.bg-loc-ribbon, .store-storefront-strip { padding: 0.4rem 1rem !important; }
.bg-loc-ribbon a, .store-storefront-strip a { font-size: 0.66rem !important; padding: 0.4rem 0.7rem !important; }
/* Vertical-themed sections + dramatic heros */
.bg-section, .lh-section, .cr-section, .store-section { padding: 3rem 1rem !important; }
.bg-hero { min-height: 56vh !important; height: auto !important; }
.bg-hero-content { padding: 2rem 1rem !important; }
.bg-hero-cta { flex-direction: column; align-items: stretch; }
.bg-hero-cta > * { width: 100%; justify-content: center; text-align: center; }
.bg-btn { padding: 0.85rem 1.3rem !important; }
.bg-story { padding: 3rem 1rem !important; }
.bg-loc-card { max-width: 100%; }
/* Floating chat + voice launchers — keep accessible but smaller */
.chat-launch, .voice-launch { width: 52px !important; height: 52px !important; }
.chat-launch { right: 0.85rem !important; bottom: 0.85rem !important; }
.voice-launch { right: 4.4rem !important; bottom: 0.85rem !important; }
/* Chat window */
.chat-window {
right: 0.4rem !important;
left: 0.4rem !important;
bottom: 4.7rem !important;
width: auto !important;
max-height: calc(100vh - 6rem) !important;
}
/* Voice dialog modal */
.voice-dialog .vd-card { width: calc(100vw - 1.4rem) !important; max-width: none !important; padding: 1.4rem 1.1rem !important; }
/* Row-style data grids — collapse all to single column on mobile */
.booking-row, .vip-row, .order-row, .reservation-row, .audit-row,
.lead-row, .listing-row, .request-row, .table-row,
.location-row, .menu-lib-row, .clinic-row, .triage-row,
.user-row, .ticket-row, .deal-row, .patient-row,
.match-row, .tuner-row, .ranked-row, .provider-row,
.drip-row, .compliance-row, .sku-row, .tenant-row, .balance-row,
.marley-row, .top-stat-row {
grid-template-columns: 1fr !important;
gap: 0.35rem !important;
padding: 0.85rem 0 !important;
}
.balance-row { flex-direction: column; align-items: flex-start !important; }
.booking-cell, .booking-name, .booking-time { font-size: 0.85rem !important; }
/* SaaS card */
.saas-card { padding: 1.1rem !important; }
.saas-card h3 { font-size: 0.92rem !important; }
.saas-topbar { flex-wrap: wrap; gap: 0.5rem; }
.saas-topbar h1 { font-size: 1.15rem !important; }
/* Tenant switcher in custom admin sidebars */
.tenant-switcher { width: 100% !important; }
/* Editorial split image is already covered (.ed-split @760), make sure on smaller too */
.ed-split { padding: 2.4rem 1rem !important; gap: 1.6rem !important; }
.ed-split-content h2 { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
.ed-split-content p { font-size: 0.96rem !important; }
/* Generic form fields used across intake forms — 16px font prevents iOS zoom on focus */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
font-size: 16px !important;
}
/* Default tap targets */
button, .btn-primary, .btn-secondary, .btn-ghost, .vf-btn { min-height: 44px; }
/* Sample chrome (top bar) on demo pages */
.sample-chrome { padding: 0.6rem 0.9rem !important; gap: 0.5rem !important; flex-wrap: wrap; }
.sc-left { flex-wrap: wrap; gap: 0.45rem !important; }
.sc-back, .sc-link { font-size: 0.74rem !important; padding: 0.35rem 0.6rem !important; }
.sc-tier { font-size: 0.6rem !important; padding: 0.18rem 0.45rem !important; }
.sc-vertical { display: none; }
.sc-toggle { font-size: 0.74rem !important; }
}
@media (max-width: 480px) {
.s-hero h1, .r-hero h1, .c-hero h1, .re-hero h1, .bg-hero h1, .lh-hero h1, .cr-hero h1 {
font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
}
.r-section h2, .c-section h2, .re-section h2, .bg-section h2, .lh-section h2, .cr-section h2 {
font-size: clamp(1.3rem, 7vw, 1.7rem) !important;
}
.compliance-strip, .monitoring-strip { gap: 0.45rem !important; }
.compliance-badge { flex: 1 1 100%; justify-content: center; }
.menu-item .mi-name { font-size: 1rem !important; }
.menu-item .mi-price { font-size: 0.84rem !important; }
.voice-dialog .vd-card { padding: 1.2rem 0.9rem !important; }
/* Hide non-essential admin sidebar items on tiny screens */
.saas-nav .nav-badge { display: none; }
.saas-card { padding: 1rem !important; }
/* Stat row inside admin/saas → single column */
.saas-stat .stat-value { font-size: 1.35rem !important; }
}
@media (max-width: 360px) {
.s-hero h1, .r-hero h1, .c-hero h1, .re-hero h1, .bg-hero h1, .lh-hero h1, .cr-hero h1 {
font-size: 1.65rem !important;
}
.r-section, .c-section, .re-section, .bg-section, .lh-section, .cr-section {
padding-left: 0.85rem !important;
padding-right: 0.85rem !important;
}
.sc-back, .sc-link { font-size: 0.68rem !important; padding: 0.3rem 0.5rem !important; }
}
/* =====================================================================
Admin/operator-page mobile heads-up banner
Hidden on desktop. On mobile, sits above the admin shell on a thin
green-edge strip and explains the view is desktop-first.
Injected by samples.js when body.admin-body matches.
===================================================================== */
.admin-mobile-banner {
display: none;
}
@media (max-width: 720px) {
.admin-mobile-banner {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.8rem 1rem;
background: #0a0e14;
border-bottom: 2px solid var(--primary);
color: #ffffff;
font-size: 0.82rem;
line-height: 1.45;
position: sticky;
top: 0;
z-index: 60;
transition: opacity 0.22s ease, max-height 0.28s ease, padding 0.2s ease, border-color 0.2s ease;
max-height: 200px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(10, 14, 20, 0.18);
}
.admin-mobile-banner.amb-dismissed {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-color: transparent;
box-shadow: none;
}
.admin-mobile-banner .amb-eyebrow {
flex-shrink: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #0a0e14;
background: var(--primary);
padding: 0.3rem 0.55rem;
border-radius: 4px;
margin-top: 1px;
line-height: 1;
}
.admin-mobile-banner .amb-msg {
flex: 1;
color: #ffffff;
font-weight: 600;
}
.admin-mobile-banner .amb-close {
flex-shrink: 0;
background: rgba(255, 255, 255, 0.08);
border: none;
color: #ffffff;
font-size: 1.1rem;
line-height: 1;
padding: 0;
cursor: pointer;
border-radius: var(--r-sm);
min-height: 32px;
min-width: 32px;
font-weight: 700;
}
.admin-mobile-banner .amb-close:hover {
background: rgba(255, 255, 255, 0.18);
}
}
@media (max-width: 480px) {
.admin-mobile-banner { font-size: 0.78rem; padding: 0.7rem 0.85rem; gap: 0.55rem; }
.admin-mobile-banner .amb-eyebrow { font-size: 0.58rem; letter-spacing: 1.5px; padding: 0.26rem 0.5rem; }
}