/* ==========================================================================
STACKED MCA — DESIGN SYSTEM
Editorial fintech aesthetic, inspired by Contiant.com
========================================================================== */
/* Design Tokens
-------------------------------------------------------------------------- */
:root {
/* Brand */
--color-brand-blue: #4A4FE0;
--color-brand-purple: #8247FF;
--color-brand-violet: #A06FFF;
--gradient-brand: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
--gradient-brand-soft: linear-gradient(135deg, rgba(74, 79, 224, 0.12) 0%, rgba(130, 71, 255, 0.12) 50%, rgba(160, 111, 255, 0.12) 100%);
/* Section backgrounds */
--color-bg-page: #F7F8FC;
--color-bg-dark: #161229;
--color-bg-darker: #0E0A1E;
--color-bg-lavender: #EDE6FA;
--color-bg-mint: #DFF3F6;
--color-bg-blush: #F5E1E8;
--color-bg-cream: #FAF4E8;
--color-white: #FFFFFF;
/* Text */
--color-heading: #1A1240;
--color-text: #1F1B2D;
--color-text-muted: #6C6480;
--color-text-faint: #9A92AE;
--color-text-on-dark: #FFFFFF;
--color-text-on-dark-muted: rgba(255, 255, 255, 0.65);
/* Borders */
--color-border: rgba(26, 18, 64, 0.08);
--color-border-strong: rgba(26, 18, 64, 0.14);
--color-border-on-dark: rgba(255, 255, 255, 0.10);
/* Type */
--font-display: 'Clash Display', 'Satoshi', system-ui, -apple-system, sans-serif;
--font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
/* Type scale */
--text-xs: 13px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
/* Display sizes */
--text-h3: clamp(24px, 2.5vw, 36px);
--text-h2: clamp(36px, 4vw, 56px);
--text-h1: clamp(44px, 5.2vw, 72px);
--text-stat: clamp(48px, 6vw, 84px);
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 300px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(26, 18, 64, 0.04), 0 2px 8px rgba(26, 18, 64, 0.04);
--shadow-md: 0 4px 16px rgba(26, 18, 64, 0.06), 0 8px 32px rgba(26, 18, 64, 0.06);
--shadow-lg: 0 12px 32px rgba(26, 18, 64, 0.08), 0 24px 64px rgba(26, 18, 64, 0.10);
--shadow-card: 0 1px 2px rgba(26, 18, 64, 0.04), 0 8px 24px rgba(26, 18, 64, 0.06);
--shadow-card-hover: 0 4px 8px rgba(26, 18, 64, 0.06), 0 16px 48px rgba(26, 18, 64, 0.10);
/* Layout */
--container-max: 1200px;
--container-pad: clamp(20px, 5vw, 96px);
--section-pad-y: clamp(64px, 9vw, 120px);
--section-pad-y-sm: clamp(48px, 6vw, 80px);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--transition-fast: 200ms var(--ease-out);
--transition-base: 320ms var(--ease-out);
--transition-slow: 600ms var(--ease-out);
}
/* Reset / Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: rgba(130, 71, 255, 0.20); color: var(--color-heading); }
/* Typography Utilities
-------------------------------------------------------------------------- */
.h1, h1 {
font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: 500;
line-height: 1.0;
letter-spacing: -2.5px;
color: var(--color-heading);
margin: 0;
}
.h2, h2 {
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: 500;
line-height: 1.05;
letter-spacing: -1.5px;
color: var(--color-heading);
margin: 0;
}
.h3, h3 {
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--color-heading);
margin: 0;
}
p { margin: 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-brand-purple);
margin: 0 0 var(--space-5);
}
.eyebrow::before {
content: '';
width: 28px;
height: 1.5px;
background: var(--color-brand-purple);
border-radius: 2px;
}
.lede {
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
max-width: 640px;
}
.gradient-text {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Inline highlight underline (Contiant-style) */
.highlight {
position: relative;
display: inline-block;
white-space: nowrap;
}
.highlight::after {
content: '';
position: absolute;
left: -0.05em;
right: -0.05em;
bottom: 0.04em;
height: 0.32em;
background: var(--gradient-brand);
opacity: 0.20;
z-index: -1;
border-radius: 4px;
}
.highlight-solid {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Layout
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
.section {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
position: relative;
}
.section--sm {
padding-top: var(--section-pad-y-sm);
padding-bottom: var(--section-pad-y-sm);
}
.section--dark {
background: var(--color-bg-dark);
color: var(--color-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }
.section--dark .lede { color: var(--color-text-on-dark-muted); }
.section--lavender { background: var(--color-bg-lavender); }
.section--mint { background: var(--color-bg-mint); }
.section--blush { background: var(--color-bg-blush); }
.section--cream { background: #FAF6EF; }
.section--white { background: var(--color-white); }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-16);
}
.section-head .eyebrow { margin-left: auto; margin-right: auto; }
.section-head .lede { margin: var(--space-6) auto 0; }
/* Buttons (Pill)
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
white-space: nowrap;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn .arrow { transition: transform var(--transition-fast); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary {
background: var(--gradient-brand);
color: var(--color-white);
box-shadow: 0 6px 20px -4px rgba(130, 71, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px -4px rgba(130, 71, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-dark {
background: var(--color-bg-dark);
color: var(--color-white);
}
.btn-dark:hover { background: #221A3D; transform: translateY(-1px); }
.btn-outline {
background: transparent;
color: var(--color-heading);
border-color: var(--color-border-strong);
}
.btn-outline:hover {
background: var(--color-heading);
color: var(--color-white);
border-color: var(--color-heading);
}
.btn-outline-light {
background: transparent;
color: var(--color-white);
border-color: rgba(255,255,255,0.30);
}
.btn-outline-light:hover {
background: var(--color-white);
color: var(--color-heading);
border-color: var(--color-white);
}
.btn-white {
background: var(--color-white);
color: var(--color-heading);
}
.btn-white:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px -4px rgba(0,0,0,0.20);
}
.btn-sm { padding: 11px 20px; font-size: var(--text-sm); }
.btn-lg { padding: 20px 34px; font-size: var(--text-lg); }
.btn-block { width: 100%; }
.btn:focus-visible {
outline: 2px solid var(--color-brand-purple);
outline-offset: 3px;
}
/* Navigation
-------------------------------------------------------------------------- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 16px 0;
transition: background var(--transition-base), backdrop-filter var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base);
}
.nav.is-scrolled {
background: rgba(247, 248, 252, 0.85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 1px 0 var(--color-border);
padding: 12px 0;
}
.nav-inner {
/* 3-column grid: logo flush-left, nav-links centered, actions flush-right */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.nav-inner > .nav-logo { justify-self: start; }
.nav-inner > .nav-links { justify-self: center; }
.nav-inner > .nav-actions { justify-self: end; }
/* The site header overrides .container so the logo hugs the viewport left
edge and the CTAs hug the viewport right edge (Marcel: "logo closer to
the left edge"). */
.nav > .container.nav-inner {
max-width: none;
padding-left: clamp(16px, 3vw, 36px);
padding-right: clamp(16px, 3vw, 36px);
}
.nav-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
line-height: 0;
}
.nav-logo img { height: 34px; width: auto; display: block; }
/* Footer logo */
.footer-logo img { height: 38px; width: auto; display: block; }
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text-muted);
position: relative;
padding: 6px 0;
transition: color var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: var(--color-brand-purple);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-base);
}
.nav-link:hover { color: var(--color-heading); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--color-heading); }
.nav-link.is-active::after { transform: scaleX(1); }
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav-toggle {
display: none;
width: 44px;
height: 44px;
background: transparent;
border: 0;
border-radius: var(--radius-md);
position: relative;
}
.nav-toggle span {
position: absolute;
left: 12px;
width: 20px;
height: 1.5px;
background: var(--color-heading);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
/* Mobile drawer */
.mobile-drawer {
position: fixed;
inset: 0;
background: var(--color-bg-page);
z-index: 99;
padding: 96px 24px 32px;
display: flex;
flex-direction: column;
gap: 20px;
transform: translateY(-100%);
transition: transform var(--transition-base);
overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateY(0); }
.mobile-drawer .nav-link {
font-size: 28px;
font-weight: 500;
letter-spacing: -1px;
color: var(--color-heading);
font-family: var(--font-display);
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.mobile-drawer .nav-link::after { display: none; }
.mobile-drawer .nav-actions {
flex-direction: column;
align-items: stretch;
margin-top: auto;
}
.mobile-drawer .btn { width: 100%; }
/* Hero
-------------------------------------------------------------------------- */
.hero {
padding-top: clamp(120px, 18vw, 180px);
padding-bottom: var(--section-pad-y);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.hero-eyebrow { margin-bottom: var(--space-6); }
.hero h1 { margin-bottom: var(--space-6); }
.hero-rotator {
position: relative;
display: inline-block;
min-width: 4.5ch;
vertical-align: baseline;
}
.hero-rotator__word {
display: inline-block;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hero-rotator__word.is-leaving {
opacity: 0;
transform: translateY(-8px);
}
.hero-rotator__word.is-entering {
opacity: 0;
transform: translateY(8px);
}
.hero-sub {
margin-bottom: var(--space-10);
max-width: 540px;
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: var(--space-8);
}
.hero-meta {
display: flex;
align-items: center;
gap: 14px;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.hero-meta-dots { display: inline-flex; gap: 4px; }
.hero-meta-dots span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-brand-purple);
animation: pulse 1.6s var(--ease-in-out) infinite;
}
.hero-meta-dots span:nth-child(2) { animation-delay: 0.2s; }
.hero-meta-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
/* Hero product mockup (lead card) */
.hero-mockup {
position: relative;
perspective: 1600px;
min-height: 520px;
}
.hero-card {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 24px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,0.6);
}
.lead-card {
position: relative;
z-index: 3;
width: min(100%, 420px);
margin-left: auto;
transform: rotate(-2deg);
}
.lead-card__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.lead-card__id {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--color-text-faint);
text-transform: uppercase;
}
.lead-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(34, 197, 94, 0.10);
color: #129c4d;
font-size: 12px;
font-weight: 600;
}
.lead-card__badge::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
.lead-card__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--color-heading);
margin-bottom: 4px;
}
.lead-card__industry {
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 18px;
}
.lead-card__rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
padding: 18px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
margin-bottom: 18px;
}
.lead-card__rows dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-faint);
margin-bottom: 4px;
}
.lead-card__rows dd {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--color-heading);
margin: 0;
}
.lead-card__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
background: var(--gradient-brand);
color: var(--color-white);
font-weight: 600;
font-size: 14px;
}
/* Floating side cards */
.float-card {
position: absolute;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.stat-card {
top: -14%;
left: -10%;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
transform: rotate(-4deg);
}
.stat-card__icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--gradient-brand);
color: white;
display: grid;
place-items: center;
}
.stat-card__num {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
color: var(--color-heading);
line-height: 1;
}
.stat-card__label {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 2px;
}
.phone-card {
bottom: 4%;
left: 6%;
z-index: 4;
width: 200px;
padding: 14px 16px;
transform: rotate(3deg);
}
.phone-card__row {
display: flex; align-items: center; gap: 10px;
}
.phone-card__avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--gradient-brand);
color: white;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
}
.phone-card__name {
font-family: var(--font-display);
font-size: 14px; font-weight: 500;
color: var(--color-heading);
letter-spacing: -0.2px;
}
.phone-card__sub { font-size: 11px; color: var(--color-text-muted); }
.phone-card__bar {
margin-top: 12px;
display: flex; gap: 8px;
}
.phone-card__bar button {
flex: 1;
padding: 8px;
border-radius: var(--radius-pill);
border: 0;
font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.phone-card__bar .accept { background: #d1fae5; color: #065f46; }
.phone-card__bar .skip { background: #f3f4f6; color: #4b5563; }
@keyframes float-y {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
.lead-card { animation: float-y 6s ease-in-out infinite; --rot: -2deg; }
.stat-card { animation: float-y 7s ease-in-out infinite; --rot: -4deg; animation-delay: 0.5s; }
.phone-card { animation: float-y 5.5s ease-in-out infinite; --rot: 3deg; animation-delay: 1s; }
/* Hero glow background */
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 700px;
height: 700px;
background: radial-gradient(closest-side, rgba(130, 71, 255, 0.18), transparent);
pointer-events: none;
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
bottom: -300px;
left: -100px;
width: 600px;
height: 600px;
background: radial-gradient(closest-side, rgba(74, 79, 224, 0.14), transparent);
pointer-events: none;
z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
/* Trust Bar
-------------------------------------------------------------------------- */
.trust-bar {
padding: var(--space-16) 0;
background: var(--color-white);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
.trust-bar__head {
text-align: center;
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: 64px;
letter-spacing: 0.04em;
}
.marquee {
position: relative;
overflow: hidden;
--gap: 120px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.marquee__track {
display: flex;
align-items: center;
gap: var(--gap);
width: max-content;
animation: marquee 80s linear infinite;
}
.marquee__item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
opacity: 0.85;
transition: opacity var(--transition-fast);
}
.marquee__item img {
height: 100%;
width: auto;
max-width: 280px;
object-fit: contain;
display: block;
}
/* Size modifiers — base height is set on .marquee__item (56px). */
.marquee__item--sm { height: 44px; }
.marquee__item--lg { height: 68px; }
.marquee__item--xl { height: 80px; }
.marquee__item--xxl { height: 104px; }
.marquee__item:hover { opacity: 1; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}
/* USP / Dark blocks
-------------------------------------------------------------------------- */
.usp {
position: relative;
overflow: hidden;
}
.usp::before {
content: '';
position: absolute;
top: -200px;
right: -150px;
width: 600px;
height: 600px;
background: radial-gradient(closest-side, rgba(130, 71, 255, 0.30), transparent);
pointer-events: none;
}
.usp::after {
content: '';
position: absolute;
bottom: -250px;
left: -200px;
width: 600px;
height: 600px;
background: radial-gradient(closest-side, rgba(74, 79, 224, 0.24), transparent);
pointer-events: none;
}
.usp > .container { position: relative; z-index: 1; }
.usp-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.usp h2 { margin-bottom: var(--space-6); max-width: 560px; }
.usp .lede { margin-bottom: var(--space-10); max-width: 480px; }
.benefit-list {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0 0 var(--space-10);
}
.benefit-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: var(--text-lg);
color: var(--color-text-on-dark);
line-height: 1.5;
}
.benefit-list li::before {
content: '';
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gradient-brand);
background-image:
var(--gradient-brand),
url("data:image/svg+xml;utf8,");
background-size: cover;
margin-top: 2px;
box-shadow: 0 0 0 4px rgba(130, 71, 255, 0.15);
}
/* USP visual right side */
.usp-visual {
position: relative;
min-height: 420px;
}
.usp-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-xl);
padding: 24px;
backdrop-filter: blur(10px);
}
.feed-card {
position: relative;
z-index: 2;
}
.feed-card__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--color-text-on-dark);
margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
.feed-row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.04);
margin-bottom: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.feed-row__left { display: flex; align-items: center; gap: 12px; }
.feed-row__avatar {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 600; font-size: 12px;
color: white;
}
.feed-row__name {
font-family: var(--font-display);
font-size: 14px; font-weight: 500;
color: var(--color-text-on-dark);
}
.feed-row__sub { font-size: 12px; color: var(--color-text-on-dark-muted); }
.feed-row__amt {
font-family: var(--font-display);
font-size: 14px; font-weight: 500;
color: var(--color-text-on-dark);
}
/* Products section
-------------------------------------------------------------------------- */
.products-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.product-card {
border-radius: var(--radius-xl);
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
min-height: 420px;
position: relative;
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
box-shadow: var(--shadow-sm);
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
.product-card__icon {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: var(--color-white);
display: grid; place-items: center;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
color: var(--color-brand-purple);
}
.product-card__icon svg { width: 28px; height: 28px; }
.product-card h3 { margin-bottom: 12px; }
.product-card__desc {
color: var(--color-text);
margin-bottom: var(--space-6);
line-height: 1.55;
}
.product-card__price {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 20px;
border-top: 1px solid rgba(26, 18, 64, 0.10);
}
.product-card__price-text {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--color-heading);
}
.product-card__price-sub {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 2px;
}
.product-card--lavender { background: var(--color-bg-lavender); }
.product-card--mint { background: var(--color-bg-mint); }
.product-card--blush { background: var(--color-bg-blush); }
/* How it works
-------------------------------------------------------------------------- */
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
position: relative;
}
.step {
text-align: left;
padding: 32px;
border-radius: var(--radius-xl);
background: var(--color-white);
border: 1px solid var(--color-border);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.step__num {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--color-brand-purple);
margin-bottom: 18px;
display: flex; align-items: center; gap: 10px;
}
.step__num::before {
content: ''; flex: 0 0 24px; height: 1.5px;
background: var(--gradient-brand);
}
.step__icon {
width: 64px; height: 64px;
border-radius: var(--radius-lg);
display: grid; place-items: center;
background: var(--gradient-brand-soft);
color: var(--color-brand-purple);
margin-bottom: 22px;
}
.step__icon svg { width: 30px; height: 30px; }
.step h3 { font-size: var(--text-2xl); margin-bottom: 10px; }
.step p { color: var(--color-text-muted); line-height: 1.55; }
/* Stats section
-------------------------------------------------------------------------- */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 3vw, 48px);
}
.stat {
text-align: center;
padding: 24px 12px;
border-left: 1px solid rgba(255,255,255,0.10);
}
.stat:first-child { border-left: 0; }
.stat__num {
font-family: var(--font-display);
font-size: var(--text-stat);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 0.95;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 12px;
word-break: keep-all;
}
.stat__label {
color: var(--color-text-on-dark-muted);
font-size: var(--text-base);
line-height: 1.4;
}
/* Testimonials
-------------------------------------------------------------------------- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.testimonial {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 32px;
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
position: relative;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.testimonial__quote-mark {
position: absolute;
top: 24px; right: 24px;
font-family: var(--font-display);
font-size: 64px; line-height: 0.8;
color: var(--color-brand-purple);
opacity: 0.15;
}
.testimonial__quote {
font-size: var(--text-lg);
line-height: 1.5;
color: var(--color-text);
margin-bottom: 24px;
flex: 1;
}
.testimonial__person {
display: flex; align-items: center; gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.testimonial__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--gradient-brand);
color: white;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 600; font-size: 15px;
}
.testimonial__name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: var(--color-heading);
}
.testimonial__role {
font-size: 13px;
color: var(--color-text-muted);
}
/* CTA banner
-------------------------------------------------------------------------- */
.cta-banner {
position: relative;
overflow: hidden;
background: var(--gradient-brand);
color: var(--color-white);
border-radius: clamp(24px, 4vw, 36px);
padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 80px);
margin: clamp(60px, 9vw, 120px) auto;
text-align: center;
max-width: var(--container-max);
margin-left: var(--container-pad);
margin-right: var(--container-pad);
}
.cta-banner::before, .cta-banner::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(40px);
pointer-events: none;
}
.cta-banner::before {
top: -200px; left: -200px;
width: 500px; height: 500px;
background: rgba(255, 255, 255, 0.18);
}
.cta-banner::after {
bottom: -200px; right: -200px;
width: 500px; height: 500px;
background: rgba(74, 79, 224, 0.40);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--color-white); margin-bottom: var(--space-6); }
.cta-banner__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-width: 540px;
margin: 0 auto var(--space-10);
}
.cta-banner__actions {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
@media (min-width: 1297px) {
.cta-banner { margin-left: auto; margin-right: auto; }
}
/* Footer
-------------------------------------------------------------------------- */
.footer {
background: var(--color-bg-darker);
color: var(--color-text-on-dark);
padding: var(--space-24) 0 var(--space-10);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 56px;
align-items: start;
margin-bottom: var(--space-16);
}
.footer-brand { max-width: 320px; }
.footer-brand .nav-logo {
color: var(--color-text-on-dark);
margin: 0 0 22px;
padding: 0;
display: block;
}
.footer-brand .nav-logo img { height: 40px; width: auto; display: block; }
.footer-brand p {
color: var(--color-text-on-dark-muted);
font-size: var(--text-sm);
line-height: 1.6;
margin: 0;
}
.footer-col { min-width: 0; }
.footer h4 {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 22px;
line-height: 1;
}
.footer ul {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.footer a {
color: var(--color-text-on-dark);
font-size: var(--text-sm);
line-height: 1.45;
transition: color var(--transition-fast);
}
.footer a:hover { color: var(--color-brand-violet); }
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: var(--text-sm);
line-height: 1.45;
color: var(--color-text-on-dark);
}
.footer-contact svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
margin-top: 3px;
color: var(--color-brand-violet);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-top: var(--space-8);
border-top: 1px solid rgba(255,255,255,0.08);
font-size: var(--text-sm);
color: rgba(255,255,255,0.55);
}
.footer-bottom .legal-links { display: flex; gap: 28px; }
.footer-bottom .legal-links a { color: rgba(255,255,255,0.65); }
.footer-bottom .legal-links a:hover { color: var(--color-brand-violet); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.06);
color: var(--color-text-on-dark);
transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover { background: var(--gradient-brand); color: white; }
.footer-social svg { width: 16px; height: 16px; }
/* FAQ
-------------------------------------------------------------------------- */
.faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.faq-item[open] {
border-color: rgba(130, 71, 255, 0.35);
box-shadow: 0 8px 28px rgba(74, 79, 224, 0.08);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 22px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--color-heading);
letter-spacing: -0.2px;
line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(130, 71, 255, 0.08);
position: relative;
transition: background var(--transition-base), transform var(--transition-base);
}
.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
content: '';
position: absolute;
background: var(--color-brand-purple);
border-radius: 1px;
top: 50%; left: 50%;
transition: transform var(--transition-base);
}
.faq-item .faq-icon::before {
width: 12px; height: 2px;
transform: translate(-50%, -50%);
}
.faq-item .faq-icon::after {
width: 2px; height: 12px;
transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon { background: var(--gradient-brand); }
.faq-item[open] .faq-icon::before { background: white; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-body {
padding: 0 28px 24px 28px;
}
.faq-body p {
font-size: 15px;
line-height: 1.65;
color: var(--color-text);
margin: 0;
}
/* Promises (About page)
-------------------------------------------------------------------------- */
.promises-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.promise {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 36px 32px;
position: relative;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.promise:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.promise__num {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 20px;
}
.promise h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--color-heading);
margin-bottom: 12px;
line-height: 1.25;
}
.promise p {
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
}
@media (max-width: 900px) {
.promises-grid { grid-template-columns: 1fr; }
.faq-item summary { padding: 18px 20px; font-size: 16px; }
.faq-body { padding: 0 20px 20px 20px; }
}
/* Cookie consent banner
-------------------------------------------------------------------------- */
.cookie-banner {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%) translateY(140%);
width: calc(100% - 32px);
max-width: 980px;
z-index: 999;
background: var(--color-bg-darker, #0E0F1A);
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: transform 380ms var(--ease-out, cubic-bezier(.16,.84,.44,1)), opacity 280ms var(--ease-out, cubic-bezier(.16,.84,.44,1));
pointer-events: none;
}
.cookie-banner.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.cookie-banner__inner {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 24px;
flex-wrap: wrap;
}
.cookie-banner__text {
flex: 1 1 320px;
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
}
.cookie-banner__text strong {
display: block;
margin-bottom: 4px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.2px;
color: white;
}
.cookie-banner__text a {
color: var(--color-brand-violet, #A06FFF);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-banner__text a:hover { color: white; }
.cookie-banner__actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.cookie-banner__btn {
appearance: none;
-webkit-appearance: none;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.1px;
padding: 11px 22px;
border-radius: 999px;
transition: background var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease), transform var(--transition-fast, 160ms ease), box-shadow var(--transition-fast, 160ms ease);
}
.cookie-banner__btn--ghost {
background: transparent;
color: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.cookie-banner__btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
color: white;
}
.cookie-banner__btn--solid {
background: var(--gradient-brand, linear-gradient(135deg, #4A4FE0, #8247FF, #A06FFF));
color: white;
box-shadow: 0 6px 18px rgba(130, 71, 255, 0.35);
}
.cookie-banner__btn--solid:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(130, 71, 255, 0.45);
}
@media (max-width: 640px) {
.cookie-banner { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); width: auto; max-width: none; }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner { padding: 16px 18px; gap: 14px; }
.cookie-banner__actions { width: 100%; justify-content: stretch; }
.cookie-banner__btn { flex: 1; padding: 12px 16px; }
}
/* Scroll-reveal
-------------------------------------------------------------------------- */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
}
/* Page hero — small variant for non-home pages
-------------------------------------------------------------------------- */
.page-hero {
padding-top: clamp(140px, 16vw, 200px);
padding-bottom: clamp(64px, 9vw, 120px);
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 1000px; height: 600px;
background: radial-gradient(closest-side, rgba(130, 71, 255, 0.16), transparent 70%);
pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 {
max-width: 14ch;
margin: 0 auto var(--space-6);
}
.page-hero .lede {
max-width: 600px;
margin: 0 auto;
font-size: var(--text-lg);
color: var(--color-text-muted);
}
/* Product detail rows (products page)
-------------------------------------------------------------------------- */
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
padding: clamp(48px, 7vw, 96px) 0;
border-top: 1px solid var(--color-border);
}
.product-detail:first-of-type { border-top: 0; }
.product-detail--reverse .product-detail__visual { order: -1; }
@media (max-width: 860px) {
.product-detail--reverse .product-detail__visual { order: 0; }
}
.product-detail h2 { margin-bottom: var(--space-5); max-width: 14ch; }
.product-detail__lede { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: var(--text-lg); line-height: 1.55; }
.feature-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: var(--space-8);
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.5;
}
.feature-list li::before {
content: '';
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: 2px;
border-radius: 50%;
background: var(--gradient-brand);
background-image:
var(--gradient-brand),
url("data:image/svg+xml;utf8,");
background-size: cover;
}
/* Pricing tiers */
.pricing-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: var(--space-6);
}
.tier {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 18px 16px;
text-align: center;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tier:hover {
border-color: var(--color-brand-purple);
box-shadow: 0 6px 20px -4px rgba(130, 71, 255, 0.20);
}
.tier__qty {
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.tier__price {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.5px;
color: var(--color-heading);
margin-bottom: 12px;
}
.tier__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--color-heading);
color: white;
font-size: 13px;
font-weight: 600;
width: 100%;
}
.tier__btn:hover { background: var(--color-brand-purple); }
/* Visual sample card on product detail */
.sample-card {
position: relative;
padding: 32px;
border-radius: var(--radius-xl);
background: var(--color-white);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
}
.sample-card__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.sample-card__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sample-rows {
display: flex; flex-direction: column; gap: 8px;
}
.sample-rows .row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
border-radius: var(--radius-md);
background: var(--color-bg-page);
}
.sample-rows .row__name {
font-family: var(--font-display);
font-size: 14px; font-weight: 500;
color: var(--color-heading);
}
.sample-rows .row__sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.sample-rows .row__amt {
font-family: var(--font-display);
font-size: 14px; font-weight: 500;
color: var(--color-heading);
}
/* FAQ
-------------------------------------------------------------------------- */
.faq {
max-width: 800px;
margin: 0 auto;
}
.faq details {
border-bottom: 1px solid var(--color-border);
padding: 24px 0;
}
.faq details[open] summary { color: var(--color-brand-purple); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
letter-spacing: -0.4px;
color: var(--color-heading);
list-style: none;
transition: color var(--transition-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '';
width: 24px; height: 24px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex: 0 0 auto;
transition: transform var(--transition-base);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
margin-top: 16px;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 70ch;
}
/* Contact
-------------------------------------------------------------------------- */
.contact-section {
padding-top: clamp(48px, 7vw, 88px);
}
.contact-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.contact-form {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: clamp(28px, 4vw, 44px);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.form-field {
margin-bottom: 16px;
display: flex;
flex-direction: column;
}
.form-field label {
font-size: 13px;
font-weight: 600;
color: var(--color-heading);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.form-field input,
.form-field select,
.form-field textarea {
font-family: inherit;
font-size: var(--text-base);
padding: 14px 16px;
background: var(--color-bg-page);
border: 1.5px solid transparent;
border-radius: var(--radius-md);
color: var(--color-heading);
transition: border-color var(--transition-fast), background var(--transition-fast);
width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-brand-purple);
background: var(--color-white);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
border-color: #dc2626;
}
.form-error {
display: none;
font-size: 12px;
color: #dc2626;
margin-top: 4px;
}
.form-field.has-error .form-error { display: block; }
.form-success {
background: var(--gradient-brand);
color: white;
padding: 24px;
border-radius: var(--radius-lg);
text-align: center;
display: none;
}
.form-success.is-visible { display: block; }
.form-success h3 { color: white; margin-bottom: 8px; }
.form-success p { color: rgba(255,255,255,0.85); }
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-info__card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 28px;
}
.contact-info__card h4 {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: 14px;
}
.contact-info__card a, .contact-info__card p {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-heading);
transition: color var(--transition-fast);
display: block;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.contact-info__card a:hover { color: var(--color-brand-purple); }
.contact-info__card .small {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
color: var(--color-text-muted);
margin-top: 8px;
}
/* Blog
-------------------------------------------------------------------------- */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.post-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--color-border);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.post-card__media {
aspect-ratio: 16 / 10;
position: relative;
overflow: hidden;
}
.post-card__media svg, .post-card__media .grad {
width: 100%; height: 100%;
}
.post-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.post-card__cat {
display: inline-flex;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-brand-purple);
margin-bottom: 12px;
}
.post-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
letter-spacing: -0.4px;
color: var(--color-heading);
margin-bottom: 12px;
line-height: 1.25;
}
.post-card__excerpt {
color: var(--color-text-muted);
font-size: 14px;
line-height: 1.55;
margin-bottom: 20px;
flex: 1;
}
.post-card__link {
font-size: 14px;
font-weight: 600;
color: var(--color-heading);
display: inline-flex; align-items: center; gap: 6px;
margin-top: auto;
transition: color var(--transition-fast), gap var(--transition-fast);
}
.post-card__link:hover { color: var(--color-brand-purple); gap: 10px; }
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: var(--space-16);
}
.pagination a, .pagination span {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: var(--radius-md);
font-size: 14px; font-weight: 600;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
background: var(--color-white);
transition: all var(--transition-fast);
}
.pagination a:hover { border-color: var(--color-brand-purple); color: var(--color-brand-purple); }
.pagination .is-current {
background: var(--gradient-brand);
color: white;
border-color: transparent;
}
/* Values (about page)
-------------------------------------------------------------------------- */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.value {
padding: 32px;
border-radius: var(--radius-xl);
background: var(--color-white);
border: 1px solid var(--color-border);
}
.value__icon {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: var(--gradient-brand-soft);
color: var(--color-brand-purple);
display: grid; place-items: center;
margin-bottom: 20px;
}
.value h3 { font-size: var(--text-2xl); margin-bottom: 10px; }
.value p { color: var(--color-text-muted); line-height: 1.55; }
/* Story (about) */
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.story-visual {
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
background: var(--gradient-brand);
position: relative;
overflow: hidden;
}
.story-visual::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.30), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,0.10), transparent 50%);
}
.story h2 { margin-bottom: var(--space-6); }
.story p {
color: var(--color-text-muted);
line-height: 1.65;
font-size: var(--text-lg);
margin-bottom: var(--space-5);
}
/* Team */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.team-card {
text-align: left;
}
.team-card__photo {
aspect-ratio: 1 / 1;
border-radius: var(--radius-xl);
background: var(--gradient-brand-soft);
position: relative;
margin-bottom: 18px;
overflow: hidden;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 56px;
font-weight: 500;
color: var(--color-brand-purple);
letter-spacing: -2px;
}
.team-card h4 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
letter-spacing: -0.3px;
color: var(--color-heading);
}
.team-card .role {
font-size: 14px;
color: var(--color-text-muted);
margin-top: 4px;
}
/* Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-mockup { min-height: 460px; max-width: 460px; margin: 32px auto 0; }
.lead-card { margin: 0 auto; }
.stat-card { left: -2%; }
.phone-card { left: 4%; }
.usp-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(3) { border-left: 0; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; max-width: 100%; margin-bottom: 16px; }
}
@media (max-width: 860px) {
.nav-links, .nav-actions .btn { display: none; }
.nav-toggle { display: block; }
.products-grid { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.blog-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.product-detail { grid-template-columns: 1fr; }
.pricing-tiers { grid-template-columns: 1fr; }
.story-grid { grid-template-columns: 1fr; }
.story-visual { aspect-ratio: 5 / 4; max-height: 400px; }
.contact-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
.hero-mockup { min-height: 440px; }
.lead-card { width: 100%; transform: rotate(-1.5deg); }
.stat-card { left: 0; top: 4%; transform: rotate(-3deg) scale(0.92); transform-origin: top left; }
.phone-card { width: 175px; left: 0; bottom: 0; }
.stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.stat { border-left: 0; padding: 12px 8px; }
.team-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.cta-banner { margin-left: 16px; margin-right: 16px; padding: 40px 24px; }
.nav-actions .btn-sm.btn-outline { display: none; }
}
/* ==========================================================================
HOMEPAGE — PINNED SHOWCASE / PIPELINE / PEACH PANEL / CTA SPOTLIGHT
========================================================================== */
/* ---------- Pinned 01/02/03 product showcase ---------- */
/* Light off-white surface — hard break from the dark Problem section above */
.showcase {
position: relative;
background: #F7F5FC;
color: var(--color-ink, #0F0D23);
padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 12vw, 160px);
overflow: clip;
}
.showcase .eyebrow { color: #6a49f0; }
.showcase__head h2 { color: var(--color-ink, #0F0D23); }
.showcase__head .highlight-solid { color: #6a49f0; background: none; }
.showcase__nums { border-left-color: rgba(15, 13, 35, 0.12); }
.showcase__nums span { color: var(--color-ink, #0F0D23); }
.showcase__nums em { color: rgba(15, 13, 35, 0.85); letter-spacing: 0.14em; font-weight: 600; }
.showcase__nums li { opacity: 1; }
.showcase__nums li:not(.is-active) span { color: rgba(15, 13, 35, 0.45); }
.showcase__nums li:not(.is-active) em { color: rgba(15, 13, 35, 0.65); }
.showcase__nums li.is-active span { color: #6a49f0; }
.showcase__nums li.is-active em { color: var(--color-ink, #0F0D23); }
.showcase__nums button:hover { background-color: rgba(106, 73, 240, 0.06); }
.showcase__inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: flex-start;
}
.showcase__rail {
position: sticky;
top: clamp(96px, 14vh, 140px);
align-self: start;
}
.showcase__nums {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
border-left: 1px solid rgba(15, 13, 35, 0.12);
padding-left: 22px;
}
.showcase__nums li {
display: flex;
flex-direction: column;
gap: 2px;
position: relative;
opacity: 1;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: translateX(0);
}
.showcase__nums button {
all: unset;
display: flex;
flex-direction: column;
gap: 2px;
cursor: pointer;
padding: 6px 8px 6px 0;
margin: -6px 0 -6px -8px;
padding-left: 8px;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.showcase__nums button:hover {
background-color: rgba(106, 73, 240, 0.08);
}
.showcase__nums button:focus-visible {
outline: 2px solid var(--brand-purple, #6a49f0);
outline-offset: 2px;
}
.showcase__nums li:not(.is-active) button:hover {
opacity: 1;
}
.showcase__nums li::before {
content: "";
position: absolute;
left: -23px;
top: 12px;
width: 2px;
height: 0;
background: linear-gradient(180deg, #4A4FE0, #8247FF);
transition: height 0.5s ease;
}
.showcase__nums li.is-active {
opacity: 1;
transform: translateX(4px);
}
.showcase__nums li.is-active::before { height: 100%; top: 0; }
.showcase__nums span {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 22px;
font-weight: 600;
color: var(--color-ink, #0F0D23);
letter-spacing: -0.01em;
font-style: normal;
}
.showcase__nums em {
font-style: normal;
font-size: 13px;
color: rgba(15, 13, 35, 0.7);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.showcase__stage { min-width: 0; }
.showcase__head {
margin-bottom: clamp(40px, 6vw, 72px);
}
.showcase__head .eyebrow { display: inline-block; margin-bottom: 14px; }
.showcase__head h2 {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
font-weight: 500;
}
.showcase__panel {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
padding: clamp(32px, 4vw, 56px);
border-radius: 28px;
margin-bottom: clamp(28px, 4vw, 56px);
min-height: clamp(440px, 60vh, 560px);
overflow: hidden;
isolation: isolate;
}
.showcase__panel::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(15, 13, 35, 0.06);
pointer-events: none;
}
/* All 4 panels: same near-white surface; differentiated by a vertical violet weight on the left edge + violet number badge. One brand color in four weights. */
.showcase__panel {
background: #ffffff;
box-shadow:
0 24px 48px -28px rgba(15, 13, 35, 0.22),
0 4px 14px -6px rgba(15, 13, 35, 0.10);
position: relative;
}
.showcase__panel::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
border-top-left-radius: 28px;
border-bottom-left-radius: 28px;
z-index: 2;
}
.showcase__panel--lavender { background: #ffffff; }
.showcase__panel--lavender::before { background: #2E27A8; } /* deep violet */
.showcase__panel--mint { background: #ffffff; }
.showcase__panel--mint::before { background: #6a49f0; } /* brand violet */
.showcase__panel--peach { background: #ffffff; }
.showcase__panel--peach::before { background: #8B6FF5; } /* mid violet */
.showcase__panel--blush { background: #ffffff; }
.showcase__panel--blush::before { background: #B9A4FF; } /* lavender */
.showcase__copy { display: flex; flex-direction: column; gap: 18px; }
.showcase__num {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(40px, 5vw, 56px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: #6a49f0;
opacity: 1;
}
.showcase__panel--lavender .showcase__num { color: #2E27A8; }
.showcase__panel--mint .showcase__num { color: #6a49f0; }
.showcase__panel--peach .showcase__num { color: #8B6FF5; }
.showcase__panel--blush .showcase__num { color: #B9A4FF; }
.showcase__copy h3 {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0;
}
.showcase__copy h3 em {
font-style: normal;
background: var(--gradient-brand, linear-gradient(90deg, #4A4FE0, #8247FF, #A06FFF));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.showcase__copy p {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: rgba(15, 13, 35, 0.72);
max-width: 46ch;
}
.showcase__bullets {
list-style: none;
padding: 0;
margin: 4px 0 8px;
display: flex;
flex-direction: column;
gap: 10px;
}
.showcase__bullets li {
position: relative;
padding-left: 24px;
font-size: 14.5px;
color: rgba(15, 13, 35, 0.82);
}
.showcase__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 14px;
height: 9px;
border-left: 2px solid #4A4FE0;
border-bottom: 2px solid #4A4FE0;
transform: rotate(-45deg);
}
.showcase__copy .btn { align-self: flex-start; margin-top: 6px; }
.showcase__visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Mock cards inside visuals */
.mock-card,
.mock-terminal {
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 18px;
box-shadow: 0 30px 60px -30px rgba(15, 13, 35, 0.32), 0 8px 20px -10px rgba(15, 13, 35, 0.12);
overflow: hidden;
font-family: var(--font-mono, "JetBrains Mono", "Menlo", monospace);
transform: translateY(0) rotate(-1.5deg);
}
.showcase__panel--mint .mock-card { transform: translateY(0) rotate(1deg); }
.showcase__panel--peach .mock-card { transform: translateY(0) rotate(-1deg); }
.showcase__panel--blush .mock-terminal { transform: translateY(0) rotate(1deg); }
.mock-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 20px 18px;
border-bottom: 1px solid rgba(15, 13, 35, 0.06);
background: #FAFAFB;
}
.mock-card__title {
font-size: 12.5px;
font-weight: 600;
color: rgba(15, 13, 35, 0.85);
letter-spacing: 0.01em;
line-height: 1.4;
min-width: 0;
}
.mock-card__pill {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
background: rgba(74, 79, 224, 0.1);
color: #4A4FE0;
white-space: nowrap;
flex-shrink: 0;
}
.mock-card__pill--solid {
background: var(--gradient-brand, linear-gradient(90deg, #4A4FE0, #8247FF));
color: #fff;
}
.mock-rows { display: flex; flex-direction: column; }
.mock-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
border-bottom: 1px dashed rgba(15, 13, 35, 0.08);
font-family: var(--font-body, "Satoshi", sans-serif);
}
.mock-row:last-child { border-bottom: 0; }
.mock-row > div { display: flex; flex-direction: column; gap: 2px; }
.mock-row strong {
font-size: 13.5px;
font-weight: 600;
color: var(--color-ink, #0F0D23);
}
.mock-row span {
font-size: 11.5px;
color: rgba(15, 13, 35, 0.55);
}
.mock-row b {
font-size: 13.5px;
font-weight: 700;
color: #4A4FE0;
font-family: var(--font-display, "Clash Display", sans-serif);
letter-spacing: -0.01em;
}
.mock-row--ghost { opacity: 0.55; }
.mock-card__sub {
margin: 0;
padding: 14px 18px 4px;
font-size: 12.5px;
color: rgba(15, 13, 35, 0.6);
font-family: var(--font-body, "Satoshi", sans-serif);
}
.mock-card__rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 0;
padding: 8px 0 6px;
font-family: var(--font-body, "Satoshi", sans-serif);
}
.mock-card__rows > div {
padding: 12px 18px;
border-top: 1px solid rgba(15, 13, 35, 0.06);
display: flex;
flex-direction: column;
gap: 4px;
}
.mock-card__rows dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(15, 13, 35, 0.5);
margin: 0;
}
.mock-card__rows dd {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--color-ink, #0F0D23);
font-family: var(--font-display, "Clash Display", sans-serif);
letter-spacing: -0.01em;
}
.mock-terminal__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: #0F0D23;
color: #fff;
position: relative;
}
.mock-terminal__bar > span {
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,0.25);
}
.mock-terminal__bar > span:nth-child(1) { background: #FF6058; }
.mock-terminal__bar > span:nth-child(2) { background: #FFBD2E; }
.mock-terminal__bar > span:nth-child(3) { background: #28C940; }
.mock-terminal__bar em {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-style: normal;
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.7);
}
.mock-terminal pre {
margin: 0;
padding: 22px 22px 18px;
font-size: 12.5px;
line-height: 1.65;
color: rgba(15, 13, 35, 0.85);
background: #fff;
white-space: pre;
overflow-x: auto;
}
.mock-terminal__foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px 18px;
background: #fff;
border-top: 1px solid rgba(15, 13, 35, 0.06);
font-family: var(--font-body, "Satoshi", sans-serif);
}
.mock-terminal__foot span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(15, 13, 35, 0.55);
}
.mock-terminal__foot b {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
}
@media (max-width: 960px) {
.showcase__inner { grid-template-columns: 1fr; }
.showcase__rail { position: static; }
.showcase__nums { flex-direction: row; gap: 24px; border-left: 0; padding-left: 0; border-top: 1px solid rgba(15,13,35,0.12); padding-top: 12px; }
.showcase__nums li::before { display: none; }
.showcase__panel { grid-template-columns: 1fr; min-height: 0; }
}
/* ---------- Pipeline diagram (rich redesign) ---------- */
.pipeline {
position: relative;
padding: clamp(96px, 11vw, 160px) 0;
background: linear-gradient(180deg, #fbfaff 0%, #f5f1fc 55%, #fbfaff 100%);
overflow: hidden;
isolation: isolate;
}
.pipeline__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pipeline__bg-glow {
position: absolute;
left: 50%;
top: 50%;
width: 720px;
height: 720px;
transform: translate(-50%, -50%);
background: radial-gradient(circle at center, rgba(130, 71, 255, 0.18) 0%, rgba(130, 71, 255, 0.06) 38%, transparent 65%);
filter: blur(8px);
border-radius: 50%;
}
.pipeline__bg-grid {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(15, 13, 35, 0.06) 1px, transparent 0);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
opacity: 0.7;
}
.pipeline .container { position: relative; z-index: 1; }
.pipeline__head { text-align: center; margin-bottom: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pipeline__eyebrow { color: var(--brand-purple, #6a49f0); font-weight: 700; letter-spacing: 0.16em; }
.pipeline__title {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(40px, 5.4vw, 68px);
line-height: 1.02;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0;
max-width: 16ch;
}
.pipeline__lede { margin: 0; max-width: 56ch; color: rgba(15, 13, 35, 0.66); }
.pipeline__chips {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
border: 1px solid rgba(130, 71, 255, 0.12);
border-radius: 999px;
box-shadow: 0 4px 16px -8px rgba(74, 79, 224, 0.18);
}
.pipeline__chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 600;
color: var(--color-ink, #0F0D23);
letter-spacing: 0.01em;
}
.pipeline__chip-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-purple, #6a49f0);
background: rgba(130, 71, 255, 0.10);
border-radius: 999px;
}
.pipeline__chip-arrow { color: rgba(15, 13, 35, 0.32); font-weight: 500; }
.pipeline-grid {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(40px, 8vw, 120px);
align-items: center;
max-width: 1180px;
margin: 0 auto;
min-height: 520px;
}
.pipeline-col {
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
z-index: 2;
}
.pipeline-col__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
padding: 0 4px;
}
.pipeline-col__head--right { justify-content: flex-end; }
.pipeline-col__dash {
width: 22px;
height: 2px;
background: var(--brand-purple, #6a49f0);
border-radius: 2px;
flex-shrink: 0;
}
.pipeline-col__label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-purple, #6a49f0);
font-weight: 700;
margin: 0;
}
.pipeline-col__count {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 12px;
font-weight: 600;
color: rgba(15, 13, 35, 0.36);
letter-spacing: 0.04em;
margin-left: auto;
}
.pipeline-col__head--right .pipeline-col__count { margin-left: 0; margin-right: auto; }
.pipe-card {
position: relative;
background: #fff;
border: 1px solid rgba(130, 71, 255, 0.10);
border-radius: 16px;
padding: 16px 18px;
font-size: 14.5px;
font-weight: 500;
color: var(--color-ink, #0F0D23);
box-shadow: 0 12px 28px -18px rgba(15, 13, 35, 0.22), 0 2px 6px -2px rgba(15, 13, 35, 0.04);
display: flex;
align-items: center;
gap: 12px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.pipe-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(130, 71, 255, 0) 0%, rgba(130, 71, 255, 0.18) 50%, rgba(160, 111, 255, 0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.pipe-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 42px -20px rgba(74, 79, 224, 0.38), 0 4px 12px -4px rgba(74, 79, 224, 0.14);
border-color: rgba(130, 71, 255, 0.20);
}
.pipe-card:hover::before { opacity: 1; }
.pipe-card:hover .pipe-card__dot { background: var(--brand-purple, #6a49f0); box-shadow: 0 0 0 4px rgba(130, 71, 255, 0.15); }
.pipe-card__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f6f3fc 0%, #ede6fa 100%);
color: var(--brand-purple, #6a49f0);
border: 1px solid rgba(130, 71, 255, 0.10);
}
.pipe-card__icon svg { width: 18px; height: 18px; }
.pipe-card__text { flex: 1; min-width: 0; }
.pipe-card__dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(15, 13, 35, 0.14);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.pipe-card__dot--on {
background: #2f8a4f;
box-shadow: 0 0 0 4px rgba(47, 138, 79, 0.15);
animation: pipeDotPulse 2s ease-in-out infinite;
}
@keyframes pipeDotPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(47, 138, 79, 0.15); }
50% { box-shadow: 0 0 0 7px rgba(47, 138, 79, 0.05); }
}
.pipe-card--success {
background: linear-gradient(135deg, rgba(130, 71, 255, 0.06), rgba(160, 111, 255, 0.10));
border-color: rgba(130, 71, 255, 0.22);
color: var(--brand-purple, #6a49f0);
font-weight: 600;
}
.pipe-card__icon--success {
background: linear-gradient(135deg, #6a49f0 0%, #8247FF 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 16px -6px rgba(130, 71, 255, 0.5);
}
/* HUB */
.pipeline-hub {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 280px;
}
.pipeline-hub__pulse {
position: absolute;
inset: 50% auto auto 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1.5px solid rgba(130, 71, 255, 0.30);
animation: hubPulse 3.4s ease-out infinite;
pointer-events: none;
}
.pipeline-hub__pulse--2 { animation-delay: 1.1s; }
.pipeline-hub__pulse--3 { animation-delay: 2.2s; }
@keyframes hubPulse {
0% { width: 180px; height: 180px; opacity: 0.5; }
100% { width: 360px; height: 360px; opacity: 0; }
}
.pipeline-hub__inner {
position: relative;
background: linear-gradient(160deg, #1a1733 0%, #0F0D23 50%, #14112d 100%);
color: #fff;
border-radius: 22px;
padding: 22px 26px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow:
0 30px 60px -20px rgba(74, 79, 224, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 -1px 0 rgba(255, 255, 255, 0.10) inset;
min-width: 200px;
}
.pipeline-hub__inner::before {
content: "";
position: absolute;
inset: -1.5px;
border-radius: inherit;
background: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
z-index: -1;
opacity: 0.9;
}
.pipeline-hub__inner::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(ellipse at top, rgba(160, 111, 255, 0.18) 0%, transparent 60%),
radial-gradient(ellipse at bottom, rgba(74, 79, 224, 0.14) 0%, transparent 60%);
pointer-events: none;
}
.pipeline-hub__badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #d6c9ff;
background: rgba(160, 111, 255, 0.15);
border: 1px solid rgba(160, 111, 255, 0.30);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 4px;
position: relative;
z-index: 1;
}
.pipeline-hub__badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6CFF8E;
box-shadow: 0 0 8px rgba(108, 255, 142, 0.7);
animation: pipeDotPulse 2s ease-in-out infinite;
}
.pipeline-hub__logo {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pipeline-hub__logo svg { width: 100%; height: 100%; }
.pipeline-hub__name {
position: relative;
z-index: 1;
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.02em;
margin-top: 2px;
}
.pipeline-hub__label {
position: relative;
z-index: 1;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
font-weight: 600;
}
.pipeline-hub__stat {
position: relative;
z-index: 1;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
gap: 1px;
}
.pipeline-hub__stat-num {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 22px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
}
.pipeline-hub__stat-sub {
font-size: 10.5px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.02em;
}
/* CONNECTION LINES */
.pipeline-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.pipeline-lines path {
fill: none;
stroke: url(#pipeGrad);
stroke-width: 2;
stroke-linecap: round;
opacity: 0.5;
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.pipeline-lines.is-drawn path { stroke-dashoffset: 0; }
.pipeline-lines.is-drawn path {
animation: pipeFlow 3s ease-in-out infinite;
animation-delay: 1.8s;
}
@keyframes pipeFlow {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.85; }
}
.pipeline-lines path:nth-child(2) { transition-delay: 0.05s; animation-delay: 1.85s; }
.pipeline-lines path:nth-child(3) { transition-delay: 0.1s; animation-delay: 1.9s; }
.pipeline-lines path:nth-child(4) { transition-delay: 0.15s; animation-delay: 1.95s; }
.pipeline-lines path:nth-child(5) { transition-delay: 0.3s; animation-delay: 2.1s; }
.pipeline-lines path:nth-child(6) { transition-delay: 0.35s; animation-delay: 2.15s; }
.pipeline-lines path:nth-child(7) { transition-delay: 0.4s; animation-delay: 2.2s; }
.pipeline-lines path:nth-child(8) { transition-delay: 0.45s; animation-delay: 2.25s; }
@media (max-width: 980px) {
.pipeline-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; max-width: 480px; }
.pipeline-lines { display: none; }
.pipeline-hub { order: 0; margin: 8px auto; width: auto; height: auto; }
.pipeline-col__head--right { justify-content: flex-start; }
.pipeline-col__head--right .pipeline-col__count { margin-left: auto; margin-right: 0; }
.pipeline-col__head--right .pipeline-col__dash { order: -1; }
.pipeline__chips { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 520px) {
.pipeline__chip-num { min-width: 20px; height: 20px; font-size: 10px; }
.pipeline-hub__inner { min-width: 180px; }
}
/* ---------- Peach panel with tilted stats ---------- */
.peach-panel {
background: #161229;
color: #fff;
border-radius: 32px;
padding: clamp(44px, 6vw, 88px);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
position: relative;
overflow: hidden;
}
.peach-panel .eyebrow { color: #b9a4ff; }
.peach-panel h2 { color: #fff; }
.peach-panel .lede { color: rgba(255,255,255,0.78); }
.peach-panel .btn.btn-dark { background:#fff; color:#0f0d23; font-weight:600; }
.peach-panel .btn.btn-dark:hover { background:#ECE6FF; }
.peach-panel .highlight-solid { color: #b9a4ff; }
.peach-panel__copy { display: flex; flex-direction: column; gap: 18px; }
.peach-panel__copy .eyebrow { display: inline-block; }
.peach-panel__copy h2 {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0;
}
.peach-panel__copy .lede { margin: 0; max-width: 38ch; }
.peach-panel__copy .btn { align-self: flex-start; margin-top: 6px; }
.peach-panel__cards {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0;
min-height: 620px;
}
.tilt-card {
background: #fff;
border-radius: 18px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 30px 60px -28px rgba(15, 13, 35, 0.28), 0 8px 18px -10px rgba(15, 13, 35, 0.10);
position: absolute;
width: min(300px, 86%);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tilt-card__label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,13,35,0.55);
font-weight: 600;
}
.tilt-card__num {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: 56px;
line-height: 1;
letter-spacing: -0.03em;
font-weight: 500;
background: var(--gradient-brand, linear-gradient(135deg, #4A4FE0, #8247FF, #A06FFF));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tilt-card__sub {
font-size: 13px;
color: rgba(15,13,35,0.7);
line-height: 1.5;
}
.tilt-card__num--text {
font-size: 32px;
line-height: 1.05;
letter-spacing: -0.02em;
}
.tilt-card--1 { top: 0; left: 0; transform: rotate(-6deg); z-index: 1; }
.tilt-card--2 { top: 210px; left: 50%; transform: translateX(-50%) rotate(0deg); z-index: 3; }
.tilt-card--3 { top: 420px; right: 0; transform: rotate(6deg); z-index: 2; }
.peach-panel:hover .tilt-card--1 { transform: rotate(-9deg) translate(-6px, -4px); }
.peach-panel:hover .tilt-card--3 { transform: rotate(9deg) translate(6px, -4px); }
@media (max-width: 880px) {
.peach-panel { grid-template-columns: 1fr; }
.peach-panel__cards { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.tilt-card { position: static; width: 100%; transform: none !important; }
}
/* ---------- Dark CTA spotlight with breathing rings ---------- */
.cta-spotlight {
position: relative;
margin: clamp(60px, 8vw, 120px) clamp(16px, 4vw, 64px);
background: radial-gradient(ellipse at center, #1A1740 0%, #0A0820 70%);
border-radius: 32px;
overflow: hidden;
padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 80px);
text-align: center;
isolation: isolate;
}
.cta-spotlight__rings {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
.cta-spotlight__rings span {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(160, 111, 255, 0.25);
width: 360px;
height: 360px;
animation: spotlight-breathe 6s ease-in-out infinite;
}
.cta-spotlight__rings span:nth-child(1) { animation-delay: 0s; border-color: rgba(74, 79, 224, 0.35); }
.cta-spotlight__rings span:nth-child(2) { animation-delay: 1.5s; border-color: rgba(130, 71, 255, 0.30); }
.cta-spotlight__rings span:nth-child(3) { animation-delay: 3s; border-color: rgba(160, 111, 255, 0.22); }
@keyframes spotlight-breathe {
0% { transform: scale(0.6); opacity: 0; }
20% { opacity: 0.9; }
100% { transform: scale(2.6); opacity: 0; }
}
.cta-spotlight__inner {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
.cta-spotlight__inner .eyebrow {
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
}
.cta-spotlight__inner h2 {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
font-weight: 500;
color: #fff;
margin: 0;
}
.cta-spotlight__inner h2 .highlight-solid {
background: var(--gradient-brand, linear-gradient(90deg, #4A4FE0, #8247FF, #A06FFF));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0;
}
.cta-spotlight__text {
margin: 0;
font-size: 17px;
line-height: 1.55;
color: rgba(255,255,255,0.72);
max-width: 56ch;
}
.cta-spotlight__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-top: 28px;
}
.btn-ghost-light {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.28);
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-ghost-light:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.55);
transform: translateY(-1px);
}
@media (max-width: 600px) {
.cta-spotlight { margin: 32px 12px; padding: 64px 20px; }
.cta-spotlight__rings span { width: 240px; height: 240px; }
}
/* ==========================================================================
CART + CHECKOUT
========================================================================== */
/* Cart icon button in nav --------------------------------------------- */
.cart-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--color-heading);
cursor: pointer;
transition: all var(--transition-base);
margin-right: 12px;
}
.cart-button:hover {
border-color: var(--color-brand-purple);
color: var(--color-brand-purple);
transform: translateY(-1px);
}
.cart-button svg {
width: 18px;
height: 18px;
stroke-width: 2;
}
.cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-brand-purple);
background-image: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
color: white;
font-size: 11px;
font-weight: 700;
line-height: 20px;
text-align: center;
display: none;
letter-spacing: -0.02em;
}
.cart-badge.is-visible { display: block; }
/* Cart drawer --------------------------------------------------------- */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(15, 12, 30, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
}
.cart-overlay.is-open {
opacity: 1;
visibility: visible;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 100%);
background: var(--color-white);
z-index: 1001;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
box-shadow: -20px 0 60px rgba(15, 12, 30, 0.15);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
border-bottom: 1px solid var(--color-border);
}
.cart-drawer__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0;
}
.cart-drawer__close {
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
transition: all var(--transition-base);
}
.cart-drawer__close:hover {
border-color: var(--color-heading);
color: var(--color-heading);
}
.cart-drawer__close svg { width: 14px; height: 14px; }
.cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 8px 28px;
}
.cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 64px 20px;
color: var(--color-text-muted);
}
.cart-empty svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
opacity: 0.4;
}
.cart-empty h3 {
font-family: var(--font-display);
font-size: 18px;
color: var(--color-heading);
margin: 0 0 8px;
}
.cart-empty p { font-size: 14px; margin: 0 0 20px; max-width: 28ch; }
.cart-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 12px;
padding: 20px 0;
border-bottom: 1px solid var(--color-border);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--color-heading);
margin: 0 0 4px;
line-height: 1.3;
}
.cart-item__sub {
font-size: 13px;
color: var(--color-text-muted);
margin: 0;
}
.cart-item__price {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--color-heading);
text-align: right;
white-space: nowrap;
}
.cart-item__controls {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.qty-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
overflow: hidden;
}
.qty-stepper button {
width: 32px;
height: 32px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-text);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-base);
}
.qty-stepper button:hover { background: var(--color-bg-soft); }
.qty-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.qty-stepper__value {
min-width: 32px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--color-heading);
}
.cart-item__remove {
background: none;
border: 0;
color: var(--color-text-muted);
font-size: 13px;
cursor: pointer;
padding: 4px 0;
transition: color var(--transition-base);
}
.cart-item__remove:hover { color: #d33; }
.cart-drawer__foot {
border-top: 1px solid var(--color-border);
padding: 24px 28px;
background: var(--color-bg-soft);
}
.cart-totals {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
}
.cart-totals__label {
font-size: 14px;
color: var(--color-text-muted);
}
.cart-totals__amount {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.02em;
}
.cart-checkout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 24px;
border: 0;
border-radius: 999px;
background-image: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
color: white;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base);
text-decoration: none;
}
.cart-checkout:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(130, 71, 255, 0.35);
}
.cart-checkout:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.cart-foot__note {
text-align: center;
font-size: 12px;
color: var(--color-text-muted);
margin: 12px 0 0;
}
/* Cart promo + discount ------------------------------------------------ */
.cart-promo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin-bottom: 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(74, 79, 224, 0.08), rgba(160, 111, 255, 0.10));
border: 1px solid rgba(130, 71, 255, 0.25);
}
.cart-promo__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-promo__title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--color-heading); letter-spacing: -0.01em; }
.cart-promo__sub { font-size: 12px; color: var(--color-text-muted); }
.cart-promo__btn {
flex-shrink: 0;
padding: 8px 14px;
border: 0;
border-radius: 999px;
background: var(--color-heading);
color: white;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
transition: transform var(--transition-base), background var(--transition-base);
}
.cart-promo__btn:hover { transform: translateY(-1px); background: #1a1a1a; }
.cart-discount { margin-bottom: 16px; }
.cart-discount__label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.cart-discount__row { display: flex; gap: 8px; }
.cart-discount__row[hidden] { display: none; }
.cart-discount__row input {
flex: 1;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: white;
font-family: var(--font-mono, monospace);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-heading);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.cart-discount__row input:focus {
outline: none;
border-color: rgba(130, 71, 255, 0.6);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.cart-discount__btn {
padding: 0 18px;
border: 0;
border-radius: 8px;
background: var(--color-heading);
color: white;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition-base), transform var(--transition-base);
}
.cart-discount__btn:hover { background: #1a1a1a; transform: translateY(-1px); }
.cart-discount__applied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(34, 139, 87, 0.08);
border: 1px solid rgba(34, 139, 87, 0.25);
font-size: 13px;
color: var(--color-heading);
}
.cart-discount__applied[hidden] { display: none; }
.cart-discount__applied strong { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.cart-discount__remove {
background: transparent;
border: 0;
color: var(--color-text-muted);
font-size: 12px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 4px 0;
}
.cart-discount__remove:hover { color: #d33; }
.cart-discount__feedback {
min-height: 0;
margin-top: 6px;
font-size: 12px;
color: var(--color-text-muted);
}
.cart-discount__feedback[data-kind="error"] { color: #c0392b; }
.cart-discount__feedback[data-kind="ok"] { color: #1f7a4f; }
/* Toast --------------------------------------------------------------- */
.cart-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(120px);
background: var(--color-heading);
color: white;
padding: 14px 24px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
z-index: 999;
opacity: 0;
transition: opacity 0.25s, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
box-shadow: 0 12px 30px rgba(15, 12, 30, 0.25);
max-width: calc(100% - 32px);
}
.cart-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cart-toast svg { width: 18px; height: 18px; }
/* Add-to-cart tier button --------------------------------------------- */
.tier__btn[data-add-to-cart] {
cursor: pointer;
border: 0;
font-family: inherit;
}
/* Checkout page ------------------------------------------------------- */
.checkout-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.checkout-form {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: clamp(28px, 4vw, 44px);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.checkout-form h2 {
font-size: var(--text-2xl);
margin: 0 0 8px;
}
.checkout-form__step {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand-purple);
margin: 32px 0 16px;
display: flex;
align-items: center;
gap: 10px;
}
.checkout-form__step:first-of-type { margin-top: 0; }
.checkout-form__step::before {
content: '';
width: 24px;
height: 24px;
border-radius: 999px;
background-image: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
color: white;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
.checkout-form__step[data-step="1"]::before { content: '1'; }
.checkout-form__step[data-step="2"]::before { content: '2'; }
.checkout-form__step[data-step="3"]::before { content: '3'; }
#sq-card {
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 14px 16px;
background: var(--color-bg-soft);
min-height: 56px;
transition: border-color var(--transition-base);
}
#sq-card.focused { border-color: var(--color-brand-purple); background: var(--color-white); }
.sq-error {
display: none;
color: #d33;
font-size: 13px;
margin-top: 8px;
}
.sq-error.is-visible { display: block; }
.checkout-summary {
position: sticky;
top: calc(var(--nav-height, 72px) + 24px);
background: var(--color-white);
border-radius: var(--radius-xl);
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.checkout-summary h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
margin: 0 0 20px;
color: var(--color-heading);
}
.summary-line {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px dashed var(--color-border);
font-size: 14px;
}
.summary-line:last-of-type { border-bottom: 0; }
.summary-line__name { color: var(--color-heading); font-weight: 500; }
.summary-line__qty { color: var(--color-text-muted); font-size: 13px; display: block; margin-top: 2px; }
.summary-line__amt { white-space: nowrap; font-weight: 600; color: var(--color-heading); }
.summary-totals {
margin-top: 8px;
padding-top: 16px;
border-top: 2px solid var(--color-heading);
}
.summary-totals .row {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 6px 0;
color: var(--color-text-muted);
}
.summary-totals .row--total {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.02em;
padding-top: 12px;
}
.summary-trust {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
display: grid;
gap: 10px;
font-size: 12px;
color: var(--color-text-muted);
}
.summary-trust .row { display: flex; align-items: center; gap: 8px; }
.summary-trust svg { width: 14px; height: 14px; color: var(--color-brand-purple); flex: 0 0 auto; }
.checkout-empty {
text-align: center;
padding: 80px 20px;
background: var(--color-white);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
}
.checkout-empty h2 {
font-family: var(--font-display);
font-size: 28px;
margin: 0 0 12px;
color: var(--color-heading);
}
.checkout-empty p {
color: var(--color-text-muted);
margin: 0 0 24px;
max-width: 40ch;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.checkout-grid { grid-template-columns: 1fr; }
.checkout-summary { position: static; order: -1; }
}
@media (max-width: 640px) {
.cart-drawer { width: 100%; }
.cart-drawer__head, .cart-drawer__body, .cart-drawer__foot { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
FORM EXTRAS — required asterisk + intl phone selector
========================================================================== */
.req {
color: #dc2626;
margin-left: 2px;
font-weight: 700;
}
.phone-input {
display: grid;
grid-template-columns: 105px minmax(0, 1fr);
gap: 8px;
align-items: stretch;
}
.phone-input__cc {
font-family: var(--font-body);
background: white;
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 10px);
padding: 12px 24px 12px 10px;
font-size: 13.5px;
min-height: 46px;
min-width: 0;
color: var(--color-text, #1c1c1f);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.phone-input input[type="tel"] {
min-width: 0;
}
@media (max-width: 520px) {
.phone-input {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
PRODUCTS PAGE — tabbed configurator (Google-clean UI)
========================================================================== */
.products-hero {
padding-bottom: 32px;
}
.products-configurator {
padding: 24px 0 96px;
}
/* ----- Tab bar ----------------------------------------------------------- */
.prod-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
background: white;
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 6px;
margin-bottom: 32px;
box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
}
.prod-tab {
appearance: none;
background: transparent;
border: 0;
padding: 14px 16px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
color: var(--color-text-muted, #5b5b66);
position: relative;
font-family: var(--font-body);
}
.prod-tab:hover {
background: var(--color-bg-cream, #FAF4E8);
color: var(--color-text, #1c1c1f);
}
.prod-tab.is-active {
background: var(--color-text, #1c1c1f);
color: white;
}
.prod-tab__num {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.08em;
font-weight: 600;
opacity: 0.65;
}
.prod-tab__name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
line-height: 1.15;
}
.prod-tab__sub {
font-size: 12px;
opacity: 0.75;
font-weight: 500;
}
.prod-tab.is-active .prod-tab__num,
.prod-tab.is-active .prod-tab__sub {
opacity: 0.85;
}
@media (max-width: 900px) {
.prod-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.prod-tabs {
grid-template-columns: 1fr;
}
}
/* ----- Panel ------------------------------------------------------------- */
.prod-panel {
display: none;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 32px;
padding: 28px 32px;
border-radius: 24px;
border: 1px solid var(--color-border);
margin-bottom: 24px;
position: relative;
}
.prod-panel.is-active {
display: grid;
}
.prod-panel--peach { background: #FBE9DE; }
.prod-panel--lavender { background: var(--color-bg-lavender, #EDE6FA); }
.prod-panel--mint { background: var(--color-bg-mint, #DFF3F6); }
.prod-panel--blush { background: var(--color-bg-blush, #F5E1E8); }
.prod-panel__main {
min-width: 0;
}
.prod-panel__title {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 38px);
line-height: 1.08;
letter-spacing: -0.6px;
margin: 8px 0 10px;
color: var(--color-heading, #0e0e15);
}
.prod-panel__lede {
font-size: 15px;
line-height: 1.5;
color: var(--color-text, #1c1c1f);
max-width: 58ch;
margin: 0 0 16px;
}
/* Features */
.prod-features {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 24px;
}
.prod-features li {
font-size: 14px;
color: var(--color-text, #1c1c1f);
padding: 6px 0;
border-bottom: 1px solid rgba(20, 20, 40, 0.08);
}
.prod-features li:last-child { border-bottom: 0; }
.prod-features--inline {
display: flex;
flex-wrap: wrap;
gap: 8px;
border: 0;
}
.prod-features--inline li {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(20, 20, 40, 0.08);
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
border-bottom: 1px solid rgba(20, 20, 40, 0.08);
}
/* Configurator — inline on the colored panel, two-column layout */
.prod-config {
background: transparent;
border-radius: 0;
padding: 0;
margin-top: 4px;
border: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 12px;
}
.prod-config > .prod-control--full,
.prod-config > .check-row,
.prod-config > .prod-tiers {
grid-column: 1 / -1;
}
.prod-control {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
@media (max-width: 720px) {
.prod-config { grid-template-columns: 1fr; }
}
.prod-control__label {
display: block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted, #5b5b66);
margin-bottom: 6px;
}
.prod-control__hint {
margin: 6px 0 0;
font-size: 11px;
color: var(--color-text-muted, #5b5b66);
}
.prod-control__hint.is-warning {
color: #c2410c;
font-weight: 600;
}
/* Segmented control for age */
.seg-control {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: var(--color-bg-cream, #FAF4E8);
border-radius: 12px;
padding: 3px;
}
.seg-control label {
display: block;
position: relative;
cursor: pointer;
}
.seg-control input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.seg-control span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 8px;
border-radius: 9px;
font-size: 13px;
font-weight: 600;
text-align: center;
color: var(--color-text-muted, #5b5b66);
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
line-height: 1.2;
}
.seg-control span strong {
font-size: 13px;
font-weight: 600;
}
.seg-control span em {
font-style: normal;
font-size: 11px;
font-weight: 500;
opacity: 0.75;
}
.seg-control input:checked + span {
background: white;
color: var(--color-text, #1c1c1f);
box-shadow: 0 1px 3px rgba(20, 20, 40, 0.12);
}
.seg-control input:checked + span em {
color: var(--color-brand-purple, #8247FF);
opacity: 1;
}
.seg-control input:focus-visible + span {
outline: 2px solid var(--color-brand-purple, #8247FF);
outline-offset: 2px;
}
/* Quantity stepper */
.qty-input {
display: grid;
grid-template-columns: 36px 1fr auto 36px;
align-items: center;
background: var(--color-bg-cream, #FAF4E8);
border-radius: 12px;
padding: 3px;
gap: 4px;
}
.qty-input input[type="number"] {
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
text-align: center;
padding: 4px 4px;
min-width: 0;
color: var(--color-text, #1c1c1f);
-moz-appearance: textfield;
}
.qty-input input[type="number"]::-webkit-outer-spin-button,
.qty-input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-input input[type="number"]:focus { outline: none; }
.qty-input__suffix {
font-size: 13px;
color: var(--color-text-muted, #5b5b66);
font-weight: 500;
padding-right: 8px;
}
.qty-input__btn {
appearance: none;
border: 0;
background: white;
border-radius: 8px;
height: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
color: var(--color-text, #1c1c1f);
box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06);
transition: background 0.15s ease;
}
.qty-input__btn:hover { background: var(--color-bg-cream, #FAF4E8); }
.qty-input__btn:active { transform: translateY(1px); }
/* Check rows */
.check-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
padding: 10px 14px;
background: var(--color-bg-cream, #FAF4E8);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s ease;
position: relative;
}
.check-row:hover { background: #f5ebd6; }
.check-row input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.check-row__box {
width: 20px;
height: 20px;
background: white;
border: 1.5px solid rgba(20, 20, 40, 0.2);
border-radius: 6px;
flex-shrink: 0;
position: relative;
transition: background 0.15s ease, border-color 0.15s ease;
}
.check-row__box::after {
content: '';
position: absolute;
inset: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.15s ease;
}
.check-row input:checked ~ .check-row__box {
background: var(--color-text, #1c1c1f);
border-color: var(--color-text, #1c1c1f);
}
.check-row input:checked ~ .check-row__box::after { opacity: 1; }
.check-row input:focus-visible ~ .check-row__box {
outline: 2px solid var(--color-brand-purple, #8247FF);
outline-offset: 2px;
}
.check-row__text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-text, #1c1c1f);
margin-bottom: 2px;
}
.check-row__text em {
font-style: normal;
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
}
/* Card-style check rows for add-on grid */
.addon-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.check-row--card {
background: white;
border: 1.5px solid rgba(20, 20, 40, 0.08);
}
.check-row--card:hover {
border-color: var(--color-brand-purple, #8247FF);
background: white;
}
.check-row input:checked ~ .check-row__box + .check-row__text + *,
.check-row--card:has(input:checked) {
border-color: var(--color-text, #1c1c1f);
background: var(--color-bg-cream, #FAF4E8);
}
/* Tier table (collapsible) */
.prod-tiers {
margin-top: 18px;
}
.prod-tiers > summary {
cursor: pointer;
list-style: none;
font-size: 13px;
font-weight: 600;
color: var(--color-brand-purple, #8247FF);
padding: 8px 0;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.prod-tiers > summary::-webkit-details-marker { display: none; }
.prod-tiers > summary::after {
content: '↓';
font-size: 11px;
transition: transform 0.18s ease;
}
.prod-tiers[open] > summary::after { transform: rotate(180deg); }
.tier-table {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
font-size: 13px;
}
.tier-table th,
.tier-table td {
text-align: left;
padding: 10px 8px;
border-bottom: 1px solid rgba(20, 20, 40, 0.08);
}
.tier-table th {
font-weight: 700;
color: var(--color-text-muted, #5b5b66);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tier-table td em {
font-style: normal;
color: var(--color-brand-purple, #8247FF);
font-weight: 600;
margin-left: 6px;
}
.tier-table__note {
margin-top: 12px;
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
}
/* ----- Sticky live price rail ------------------------------------------- */
.prod-panel__rail {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.prod-rail {
position: sticky;
top: 96px;
background: white;
border-radius: 18px;
padding: 24px;
box-shadow: 0 1px 3px rgba(20, 20, 40, 0.08), 0 8px 24px rgba(20, 20, 40, 0.06);
border: 1px solid rgba(20, 20, 40, 0.06);
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.prod-rail .cart-cta {
margin-top: auto;
}
.prod-rail__eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted, #5b5b66);
margin-bottom: 6px;
}
.prod-rail__price {
font-family: var(--font-display);
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: -1.2px;
color: var(--color-heading, #0e0e15);
margin-bottom: 4px;
display: flex;
align-items: baseline;
gap: 4px;
}
.prod-rail__price small {
font-size: 16px;
font-weight: 500;
color: var(--color-text-muted, #5b5b66);
letter-spacing: 0;
}
.prod-rail__note {
font-size: 13px;
color: var(--color-text-muted, #5b5b66);
line-height: 1.5;
margin: 12px 0 20px;
}
.prod-rail__line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(20, 20, 40, 0.08);
font-size: 14px;
color: var(--color-text-muted, #5b5b66);
}
.prod-rail__line strong {
color: var(--color-text, #1c1c1f);
font-weight: 600;
}
.prod-rail__line--total {
border-bottom: 0;
padding-top: 16px;
font-size: 16px;
}
.prod-rail__line--total strong {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--color-heading, #0e0e15);
}
.prod-rail__savings {
margin: 8px 0 16px;
font-size: 13px;
color: var(--color-success, #16a34a);
font-weight: 600;
}
.prod-rail__next-tier {
margin: 0 0 16px;
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
background: var(--color-bg-cream, #FAF4E8);
border-radius: 8px;
padding: 10px 12px;
border-left: 3px solid var(--color-brand-purple, #8247FF);
}
.prod-rail__quote-note {
margin: 12px 0 0;
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
text-align: center;
}
.prod-rail__quote-note a {
color: var(--color-brand-purple, #8247FF);
font-weight: 600;
text-decoration: underline;
}
.prod-rail__alt {
display: block;
margin-top: 12px;
text-align: center;
font-size: 13px;
color: var(--color-text-muted, #5b5b66);
text-decoration: underline;
}
/* ======================================================================
FRESH LEADS — split layout (copy + form), lavender-tinted background
====================================================================== */
.prod-panel--fresh.is-active {
display: block;
grid-template-columns: none;
background: linear-gradient(180deg, #f7f3ff 0%, #f9f7ff 60%, #fbfaff 100%);
}
/* Eyebrow with leading dash */
.eyebrow--dash {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-purple, #6a49f0);
}
.eyebrow--dash::before {
content: "";
width: 24px;
height: 2px;
background: var(--brand-purple, #6a49f0);
border-radius: 2px;
}
/* 50/50 split layout */
.fresh-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 60px);
align-items: start;
}
.fresh-split__left {
display: flex;
flex-direction: column;
gap: 28px;
}
.fresh-split__right {
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 100px;
}
.fresh-split__title {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1.02;
letter-spacing: -0.025em;
font-weight: 600;
color: var(--color-heading, #0e0e15);
margin: 0;
}
.fresh-split__lede {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: rgba(15, 13, 35, 0.66);
max-width: 50ch;
}
/* Highlights list (single-column, vertical stack) */
.fresh-highlights {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.fresh-highlights li {
display: flex;
gap: 16px;
align-items: flex-start;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.fresh-highlights__icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #6a49f0;
border: 0;
border-radius: 0;
box-shadow: none;
position: relative;
margin-top: 0;
}
.fresh-highlights__icon svg,
.fresh-highlights__icon img {
width: 32px;
height: 32px;
display: block;
flex-shrink: 0;
object-fit: contain;
}
.fresh-highlights__icon img {
mix-blend-mode: multiply;
background: transparent;
}
.fresh-highlights li > div {
flex: 1 1 auto;
min-width: 0;
padding-top: 2px;
}
.fresh-highlights strong {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--color-heading, #0e0e15);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.fresh-highlights span {
display: block;
font-size: 14px;
color: rgba(15, 13, 35, 0.62);
line-height: 1.5;
}
/* Trust strip */
.fresh-trust {
display: flex;
align-items: center;
gap: 16px;
margin-top: 4px;
padding-top: 24px;
border-top: 1px solid rgba(130, 71, 255, 0.10);
}
.fresh-trust__avatars {
display: flex;
flex-shrink: 0;
}
.fresh-trust__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 3px 8px rgba(15, 13, 35, 0.10);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -10px;
background: #ede6fa;
}
.fresh-trust__avatar:first-child { margin-left: 0; }
.fresh-trust__avatar svg,
.fresh-trust__avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 50%;
}
.fresh-trust__copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.fresh-trust__stars {
display: inline-flex;
gap: 2px;
color: var(--brand-purple, #6a49f0);
}
.fresh-trust__stars svg {
width: 14px;
height: 14px;
display: block;
}
.fresh-trust__copy p {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: rgba(15, 13, 35, 0.7);
font-weight: 500;
}
/* RIGHT side card (price + form together) */
.fresh-card {
background: #fff;
border: 1px solid #ece8fa;
border-radius: 24px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 22px;
box-shadow: 0 24px 60px -28px rgba(74, 79, 224, 0.20), 0 4px 12px -4px rgba(15, 13, 35, 0.04);
}
/* Inset price card */
.fresh-card__price {
background: #f6f3fc;
border: 1px solid rgba(130, 71, 255, 0.10);
border-radius: 18px;
padding: 22px 24px;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.fresh-price {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fresh-price__eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15, 13, 35, 0.5);
}
.fresh-price__amount {
font-family: var(--font-display, "Clash Display", sans-serif);
font-size: clamp(48px, 5.5vw, 64px);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--color-heading, #0e0e15);
line-height: 1;
margin: 0;
display: flex;
align-items: baseline;
gap: 4px;
}
.fresh-price__amount small {
font-family: var(--font-body, inherit);
font-size: 16px;
font-weight: 500;
color: rgba(15, 13, 35, 0.55);
letter-spacing: 0;
}
.fresh-card__bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 200px;
min-width: 160px;
}
.fresh-card__bullets li {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 500;
color: var(--color-heading, #0e0e15);
line-height: 1.3;
}
.fresh-card__bullets li svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--brand-purple, #6a49f0);
}
/* Form lives inside .fresh-card now — strip the standalone card styling */
.fresh-card .fresh-form {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: none;
}
.fresh-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.fresh-form__field--full {
grid-column: 1 / -1;
}
.fresh-form .field__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(15, 13, 35, 0.55);
margin-bottom: 6px;
display: block;
text-transform: uppercase;
}
.fresh-form .req {
color: var(--brand-purple, #6a49f0);
font-weight: 700;
}
.fresh-form input[type="text"],
.fresh-form input[type="email"],
.fresh-form input[type="tel"],
.fresh-form input[type="number"],
.fresh-form select,
.fresh-form textarea {
width: 100%;
padding: 12px 14px;
font-size: 14px;
font-family: inherit;
color: var(--color-heading, #0e0e15);
background: #fff;
border: 1px solid #ece8fa;
border-radius: 12px;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
appearance: none;
-webkit-appearance: none;
}
.fresh-form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.fresh-form textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.fresh-form input:focus,
.fresh-form select:focus,
.fresh-form textarea:focus {
outline: none;
border-color: var(--brand-purple, #6a49f0);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.12);
}
.fresh-form input::placeholder,
.fresh-form textarea::placeholder {
color: rgba(15, 13, 35, 0.32);
}
.fresh-form .form-error {
display: block;
margin-top: 4px;
font-size: 11.5px;
color: #c43d3d;
line-height: 1.3;
min-height: 0;
}
.fresh-form .form-field.has-error input,
.fresh-form .form-field.has-error select,
.fresh-form .form-field.has-error textarea {
border-color: #c43d3d;
background: #fff5f5;
}
.fresh-form__submit {
margin: 6px 0 0;
width: 100%;
min-width: 0;
justify-content: center;
font-size: 15px;
padding: 16px 24px;
}
/* "We respond within 1 business hour" line below card */
.fresh-respond {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0 4px;
font-size: 13px;
color: rgba(15, 13, 35, 0.6);
line-height: 1.4;
}
.fresh-respond svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--brand-purple, #6a49f0);
}
.fresh-respond strong {
font-weight: 700;
color: var(--color-heading, #0e0e15);
}
/* Success state */
.fresh-form__success {
display: none;
text-align: center;
padding: 32px 20px;
background: #fff;
border: 1px solid #ece8fa;
border-radius: 24px;
margin-top: 24px;
}
.fresh-form__success.is-visible {
display: block;
}
.fresh-form__success svg {
width: 48px;
height: 48px;
color: #2f8a4f;
background: #e7f5ec;
border-radius: 50%;
padding: 10px;
margin-bottom: 12px;
}
.fresh-form__success h3 {
font-size: 20px;
margin: 4px 0 8px;
font-family: var(--font-display, "Clash Display", sans-serif);
font-weight: 600;
}
.fresh-form__success p {
font-size: 14px;
color: rgba(15, 13, 35, 0.62);
line-height: 1.5;
margin: 0;
max-width: 44ch;
margin-left: auto;
margin-right: auto;
}
/* Responsive */
@media (max-width: 980px) {
.fresh-split {
grid-template-columns: 1fr;
gap: 40px;
}
.fresh-split__right { position: static; }
.fresh-card__price { gap: 18px; }
}
@media (max-width: 640px) {
.fresh-form__grid {
grid-template-columns: 1fr;
}
.fresh-card { padding: 22px; border-radius: 20px; }
.fresh-card__price { padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
.fresh-card__bullets { width: 100%; }
.fresh-trust { flex-wrap: wrap; }
.fresh-trust__copy p br { display: inline; }
.fresh-trust__copy p br::after { content: " "; }
}
.prod-rail [data-add-cart]:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Responsive — collapse rail under main */
@media (max-width: 1100px) {
.prod-panel {
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
}
}
@media (max-width: 980px) {
.prod-panel {
grid-template-columns: 1fr;
padding: 24px;
}
.prod-rail { position: static; }
.prod-features { grid-template-columns: 1fr; }
.addon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.prod-panel { padding: 20px; }
.prod-config { padding: 0; }
.prod-rail__price { font-size: 44px; }
.prod-rail--full .prod-rail__price { font-size: 36px; }
.prod-marketing { padding: 18px; }
}
/* ===== NEW: Full-configurator rail (HR / MCA / Dialer) ================= */
.prod-rail--full {
padding: 22px 22px 24px;
}
.prod-rail--full .prod-control {
margin-bottom: 14px;
}
.prod-rail--full .prod-rail__eyebrow {
margin-bottom: 14px;
}
.prod-rail__divider {
border: 0;
border-top: 1px solid rgba(20, 20, 40, 0.10);
margin: 16px 0 14px;
}
.prod-rail--full .prod-rail__price {
font-size: 44px;
margin-bottom: 2px;
}
.prod-rail--full .prod-rail__price small {
font-size: 14px;
}
.prod-rail--full .prod-rail__line {
padding: 8px 0;
font-size: 13px;
}
.prod-rail--full .prod-rail__line--total {
padding-top: 12px;
font-size: 15px;
}
.prod-rail--full .prod-rail__line--total strong {
font-size: 20px;
}
.prod-rail--full .btn-block {
margin-top: 14px;
}
.prod-rail--compact .prod-rail__price {
font-size: 40px;
}
/* Vertical/stacked seg-control inside the rail */
.seg-control--stack {
grid-template-columns: 1fr;
gap: 4px;
background: rgba(20, 20, 40, 0.05);
}
.seg-control--stack span {
flex-direction: row;
justify-content: space-between;
padding: 9px 12px;
text-align: left;
border-radius: 9px;
}
.seg-control--stack span strong { font-size: 13px; }
.seg-control--stack span em { font-size: 12px; }
/* Compact check-row used inside rail */
.check-row--compact {
padding: 10px 12px;
gap: 10px;
}
.check-row--compact .check-row__text strong { font-size: 13px; }
.check-row--compact .check-row__text em { font-size: 11px; }
/* Stacked add-on grid in dialer rail */
.addon-grid--stack { grid-template-columns: 1fr; gap: 8px; }
/* ===== Dialer rail v2 ================================================== */
/* Age tabs (HR + MCA) — horizontal tab switcher styled like top product tabs */
.age-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: rgba(20, 20, 30, 0.04);
border: 1px solid rgba(20, 20, 30, 0.08);
border-radius: 12px;
padding: 4px;
}
.age-tab {
position: relative;
cursor: pointer;
display: block;
}
.age-tab input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.age-tab > span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 6px;
border-radius: 8px;
transition: background 0.18s ease, color 0.18s ease;
text-align: center;
color: var(--ink-3, #6b6b78);
}
.age-tab:hover > span { color: var(--ink-1, #14141e); }
.age-tab > span strong {
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.1px;
white-space: nowrap;
}
.age-tab > span em {
font-size: 11px;
font-style: normal;
font-weight: 500;
opacity: 0.85;
}
.age-tab:has(input:checked) > span {
background: var(--color-text, #1c1c1f);
color: #fff;
box-shadow: 0 1px 2px rgba(20, 20, 40, 0.08);
}
.age-tab:has(input:checked) > span em { opacity: 0.85; }
/* Add-ons row: 2-up horizontal chips */
.addon-grid--row { grid-template-columns: 1fr 1fr; gap: 8px; }
.check-row--chip {
padding: 8px 10px;
gap: 8px;
border-radius: 12px;
align-items: center;
}
.check-row--chip .check-row__box { width: 18px; height: 18px; flex: 0 0 18px; }
.check-row--chip .check-row__text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.check-row--chip .check-row__text strong {
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.check-row--chip .check-row__text em {
font-size: 11px;
color: var(--ink-3, #6b6b78);
font-style: normal;
}
/* Dialer chip variant: inline (Cell phones +$0.03 on one line), white bg + border */
.prod-rail--v3 .check-row--chip-inline {
background: #ffffff;
border: 1px solid #ece8fa;
padding: 12px 14px;
transition: border-color 0.15s ease, background 0.15s ease;
}
/* Stack chips vertically so each row has full width for text + price */
.prod-rail--v3 .addon-grid--row:has(.check-row--chip-inline) {
grid-template-columns: 1fr;
gap: 8px;
}
.prod-rail--v3 .check-row--chip-inline:hover {
background: #fbfaff;
border-color: #ddd5f5;
}
.prod-rail--v3 .check-row--chip-inline:has(input:checked) {
border-color: #b9a8f3;
background: #fbfaff;
}
.prod-rail--v3 .check-row--chip-inline .check-row__text {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
width: 100%;
gap: 8px;
}
.prod-rail--v3 .check-row--chip-inline .check-row__text strong {
font-size: 13px;
font-weight: 600;
color: var(--color-heading, #0e0e15);
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.prod-rail--v3 .check-row--chip-inline .check-row__text em {
font-size: 12px;
font-weight: 700;
color: #6a49f0;
}
/* Joined Quantity + Recurring box (one shared border, internal divider) */
.qty-row--joined {
display: grid;
grid-template-columns: 1fr auto;
border: 1px solid rgba(20, 20, 30, 0.1);
border-radius: 12px;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease;
}
.qty-row__cell {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
min-height: 56px;
position: relative;
}
.qty-row__cell--qty {
justify-content: flex-start;
gap: 8px;
border-right: 1px solid rgba(20, 20, 30, 0.1);
background: rgba(20, 20, 30, 0.025);
padding: 10px 16px;
}
.qty-row__cell--qty input {
border: 0;
background: transparent;
font-size: 26px;
font-weight: 800;
text-align: left;
width: 100%;
padding: 0;
outline: none;
-moz-appearance: textfield;
color: var(--ink-1, #14141e);
letter-spacing: -0.5px;
line-height: 1;
}
.qty-row__cell--qty input::-webkit-outer-spin-button,
.qty-row__cell--qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-row__suffix {
font-size: 12px;
color: var(--ink-3, #6b6b78);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
flex-shrink: 0;
}
.qty-row__cell--recurring {
cursor: pointer;
user-select: none;
transition: background 0.15s ease;
white-space: nowrap;
}
.qty-row__cell--recurring:hover { background: rgba(106, 73, 240, 0.04); }
.qty-row__cell--recurring input { position: absolute; opacity: 0; pointer-events: none; }
/* Custom checkbox visual */
.qty-row__check {
width: 18px;
height: 18px;
flex: 0 0 18px;
border: 1.5px solid rgba(20, 20, 30, 0.25);
border-radius: 5px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.qty-row__check::after {
content: "";
width: 10px;
height: 10px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.qty-row__rec-label {
font-size: 11px;
font-weight: 600;
color: var(--ink-2, #45454f);
letter-spacing: -0.05px;
}
.qty-row__rec-pill {
font-style: normal;
font-weight: 700;
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(106, 73, 240, 0.1);
color: var(--brand-purple, #6a49f0);
flex-shrink: 0;
}
/* Checked state */
.qty-row__cell--recurring:has(input:checked) .qty-row__check {
background: var(--brand-purple, #6a49f0);
border-color: var(--brand-purple, #6a49f0);
}
.qty-row__cell--recurring:has(input:checked) .qty-row__check::after {
opacity: 1;
transform: scale(1);
}
.qty-row--joined:has(input[data-recurring]:checked) {
border-color: rgba(106, 73, 240, 0.4);
}
/* Smaller price display in v2 */
.prod-rail--v2 .prod-rail__price--sm { font-size: 32px; margin-top: 6px; }
.prod-rail--v2 .prod-rail__price--sm small { font-size: 13px; }
/* Minimal bulk-pricing link inline in HR/MCA rail (replaces qty line) */
.prod-rail__line--bulk {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 4px 0;
}
.prod-rail--v2 .prod-rail__line--bulk .bulk-link__qty { display: none; }
.bulk-link {
appearance: none;
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--brand-purple, #6a49f0);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
transition: opacity 0.15s ease;
}
.bulk-link:hover { opacity: 0.7; text-decoration: underline; }
.bulk-link span { transition: transform 0.15s ease; }
.bulk-link:hover span { transform: translateX(2px); }
.bulk-link__qty {
font-size: 12.5px;
color: var(--ink-3, #6b6b78);
font-weight: 500;
}
/* ===== NEW: Compact bulk-pricing CTA (left column, HR + MCA) =========== */
.bulk-cta {
margin-top: 22px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
background: white;
border-radius: 14px;
padding: 14px 18px;
border: 1px solid rgba(20, 20, 40, 0.06);
box-shadow: 0 1px 3px rgba(20, 20, 40, 0.05);
}
.bulk-cta__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(130, 71, 255, 0.10);
color: var(--color-brand-purple, #8247FF);
}
.bulk-cta__icon svg { width: 22px; height: 22px; }
.bulk-cta__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bulk-cta__copy strong {
font-size: 14px;
font-weight: 700;
color: var(--color-heading, #0e0e15);
}
.bulk-cta__copy span {
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
line-height: 1.4;
}
.bulk-cta .btn-sm {
padding: 8px 14px;
font-size: 13px;
white-space: nowrap;
}
@media (max-width: 600px) {
.bulk-cta {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 10px 14px;
}
.bulk-cta .btn-sm { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
/* ===== NEW: Bulk-pricing modal ========================================= */
.bulk-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.bulk-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.bulk-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 13, 35, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.bulk-modal__panel {
position: relative;
background: white;
border-radius: 20px;
padding: 36px 40px 32px;
width: min(720px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow: 0 32px 80px rgba(15, 13, 35, 0.35);
transform: translateY(8px);
transition: transform 0.2s ease;
}
.bulk-modal.is-open .bulk-modal__panel { transform: translateY(0); }
.bulk-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 0;
border-radius: 10px;
background: rgba(20, 20, 40, 0.05);
color: var(--color-text, #1c1c1f);
cursor: pointer;
transition: background 0.15s ease;
}
.bulk-modal__close:hover { background: rgba(20, 20, 40, 0.10); }
.bulk-modal__close svg { width: 18px; height: 18px; }
.bulk-modal__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-brand-purple, #8247FF);
margin-bottom: 8px;
}
.bulk-modal__title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--color-heading, #0e0e15);
margin: 0 0 8px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.bulk-modal__lede {
font-size: 14px;
color: var(--color-text-muted, #5b5b66);
margin: 0 0 22px;
line-height: 1.5;
}
.bulk-modal__lede strong {
color: var(--color-success, #16a34a);
font-weight: 700;
}
.bulk-modal__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-bottom: 18px;
}
.bulk-modal__table th,
.bulk-modal__table td {
padding: 10px 8px;
text-align: right;
border-bottom: 1px solid rgba(20, 20, 40, 0.06);
white-space: nowrap;
}
.bulk-modal__table th:first-child,
.bulk-modal__table td:first-child {
text-align: left;
font-weight: 500;
color: var(--color-text, #1c1c1f);
}
.bulk-modal__table th {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted, #5b5b66);
font-weight: 700;
border-bottom: 1px solid rgba(20, 20, 40, 0.14);
padding-bottom: 10px;
}
.bulk-modal__table tbody tr:last-child td { border-bottom: 0; }
.bulk-modal__table td strong {
color: var(--color-success, #16a34a);
font-weight: 700;
}
.bulk-modal__quote-row td {
background: rgba(130, 71, 255, 0.05);
color: var(--color-text-muted, #5b5b66);
}
.bulk-modal__quote-row td:first-child {
font-weight: 700;
color: var(--color-brand-purple, #8247FF);
}
.bulk-modal__foot {
font-size: 13px;
color: var(--color-text-muted, #5b5b66);
margin: 0;
line-height: 1.5;
padding-top: 14px;
border-top: 1px solid rgba(20, 20, 40, 0.06);
}
.bulk-modal__foot strong {
color: var(--color-success, #16a34a);
font-weight: 700;
}
@media (max-width: 640px) {
.bulk-modal { padding: 0; }
.bulk-modal__panel {
border-radius: 0;
padding: 28px 22px 24px;
max-height: 100vh;
width: 100%;
}
.bulk-modal__title { font-size: 22px; }
.bulk-modal__table { font-size: 12px; }
.bulk-modal__table th, .bulk-modal__table td { padding: 8px 4px; }
}
/* ===== NEW: Marketing block (Dialer left side) ========================== */
.prod-marketing {
margin-top: 22px;
background: rgba(255, 255, 255, 0.55);
border-radius: 16px;
padding: 22px 24px;
border: 1px solid rgba(20, 20, 40, 0.06);
}
.prod-marketing__title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--color-heading, #0e0e15);
margin: 0 0 12px;
letter-spacing: -0.3px;
}
.prod-marketing__list {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.prod-marketing__list li {
position: relative;
padding-left: 22px;
font-size: 14px;
line-height: 1.55;
color: var(--color-text, #1c1c1f);
}
.prod-marketing__list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand-purple, #8247FF);
}
.prod-marketing__list li strong {
color: var(--color-heading, #0e0e15);
font-weight: 700;
}
.prod-marketing__note {
font-size: 13px;
color: var(--color-text-muted, #5b5b66);
margin: 0;
}
.prod-marketing__note a {
color: var(--color-brand-purple, #8247FF);
font-weight: 600;
text-decoration: underline;
}
/* ----- Tier table moved into rail (legacy, currently unused) ------------ */
.prod-rail .prod-tiers {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(20, 20, 40, 0.08);
}
.prod-rail .prod-tiers > summary {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-text-muted, #5b5b66);
padding: 4px 0;
}
.prod-rail .tier-table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
font-size: 12px;
}
.prod-rail .tier-table th,
.prod-rail .tier-table td {
padding: 6px 4px;
text-align: right;
border-bottom: 1px solid rgba(20, 20, 40, 0.06);
}
.prod-rail .tier-table th:first-child,
.prod-rail .tier-table td:first-child {
text-align: left;
font-weight: 500;
}
.prod-rail .tier-table th {
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted, #5b5b66);
font-weight: 700;
}
.prod-rail .tier-table td em {
display: block;
font-size: 10px;
color: var(--color-success, #16a34a);
font-style: normal;
font-weight: 600;
}
/* FAQ teaser strip */
.products-faq-teaser .faq-teaser {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
background: white;
padding: 40px;
border-radius: 24px;
border: 1px solid var(--color-border);
}
.products-faq-teaser h2 {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
margin: 8px 0 6px;
letter-spacing: -0.4px;
}
.products-faq-teaser .lede {
margin: 0;
font-size: 15px;
}
@media (max-width: 720px) {
.products-faq-teaser .faq-teaser {
grid-template-columns: 1fr;
text-align: left;
padding: 28px;
}
}
/* ==========================================================================
QUOTE MODAL — use with form-success/form-error from main form
========================================================================== */
.quote-form .field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.quote-form .field__label {
font-size: 13px;
font-weight: 600;
color: var(--color-text, #1c1c1f);
}
.quote-form .field input,
.quote-form .field select,
.quote-form .field textarea {
padding: 11px 14px;
border: 1px solid var(--color-border);
border-radius: 10px;
font-family: var(--font-body);
font-size: 14px;
background: white;
color: var(--color-text, #1c1c1f);
width: 100%;
}
.quote-form .field input:focus,
.quote-form .field select:focus,
.quote-form .field textarea:focus {
outline: 2px solid var(--color-brand-purple, #8247FF);
outline-offset: 1px;
border-color: var(--color-brand-purple, #8247FF);
}
.quote-form .form-field.has-error input,
.quote-form .form-field.has-error select,
.quote-form .form-field.has-error textarea {
border-color: #dc2626;
}
.quote-form .form-error {
font-size: 11px;
}
/* ==========================================================================
QUOTE MODAL — overlay, panel, fields
========================================================================== */
.quote-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
}
.quote-modal.is-open {
display: flex;
}
.quote-modal__overlay {
position: fixed;
inset: 0;
background: rgba(14, 14, 21, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.quote-modal__panel {
position: relative;
background: white;
border-radius: 24px;
max-width: 720px;
width: 100%;
margin: auto;
padding: 36px;
box-shadow: 0 24px 56px rgba(20, 20, 40, 0.32);
z-index: 1;
animation: quoteIn 0.22s ease-out;
}
@keyframes quoteIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.quote-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: var(--color-bg-cream, #FAF4E8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text, #1c1c1f);
transition: background 0.15s ease, transform 0.15s ease;
}
.quote-modal__close:hover {
background: #f0e6cf;
transform: rotate(90deg);
}
.quote-modal__close svg {
width: 14px;
height: 14px;
}
.quote-modal__body h2 {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 36px);
letter-spacing: -0.5px;
margin: 8px 0 8px;
color: var(--color-heading, #0e0e15);
}
.quote-modal__lede {
margin: 0 0 24px;
color: var(--color-text-muted, #5b5b66);
font-size: 15px;
line-height: 1.5;
}
.quote-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.quote-form .field--full {
grid-column: 1 / -1;
}
.quote-form__foot {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.quote-form__note {
font-size: 12px;
color: var(--color-text-muted, #5b5b66);
margin: 0;
}
.quote-form__success {
text-align: center;
padding: 16px 0 8px;
}
.quote-form__success svg {
width: 48px;
height: 48px;
color: #16a34a;
margin-bottom: 12px;
}
.quote-form__success h3 {
font-family: var(--font-display);
font-size: 24px;
margin: 0 0 8px;
color: var(--color-heading, #0e0e15);
}
.quote-form__success p {
margin: 0 0 20px;
color: var(--color-text-muted, #5b5b66);
line-height: 1.5;
}
@media (max-width: 640px) {
.quote-modal { padding: 0; }
.quote-modal__panel {
border-radius: 0;
padding: 28px 22px;
min-height: 100vh;
}
.quote-form__grid { grid-template-columns: 1fr; }
}
/* Lock body scroll while open is handled inline by JS */
body:has(.quote-modal.is-open) {
overflow: hidden;
}
/* ============================================================
Prod Rail v3 — inline age tabs, split qty/recurring, cart CTA
Scoped to .prod-rail--v3 so we don't collide with the cart-drawer
.qty-stepper or any older v2 controls.
============================================================ */
/* Age tabs — inline single-row label + price */
.age-tabs--inline {
/* let each tab size to its content so price + label fit comfortably */
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
}
.age-tabs--inline .age-tab > span {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 6px;
white-space: nowrap;
padding: 9px 6px;
min-width: 0;
overflow: hidden;
}
.age-tabs--inline .age-tab > span strong {
font-size: 11.5px;
font-weight: 700;
color: var(--color-heading, #0e0e15);
letter-spacing: -0.1px;
}
.age-tabs--inline .age-tab > span em {
font-size: 11.5px;
font-weight: 700;
font-style: normal;
color: var(--color-brand-purple, #6a49f0);
}
.age-tabs--inline .age-tab input:checked + span strong,
.age-tabs--inline .age-tab input:checked + span em {
color: #fff;
}
/* Split: stepper + recurring side by side */
.prod-rail--v3 .qty-split {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: 10px;
align-items: stretch;
}
/* ===== qty-card: unified single-rounded-card layout ===== */
.prod-rail--v3 .prod-control__label--caps {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted, #6b6b78);
margin-bottom: 10px;
display: block;
}
.prod-rail--v3 .qty-card {
display: grid;
grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.6fr);
align-items: stretch;
background: #fff;
border: 1px solid #ece8fa;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 0 0 1px rgba(122, 92, 243, 0.05),
0 2px 6px -3px rgba(80, 50, 200, 0.10);
}
/* Vertical divider between number and recurring */
.prod-rail--v3 .qty-card__qty {
display: flex;
align-items: baseline;
gap: 8px;
padding: 14px 12px 14px 16px;
border-right: 1px solid #ece8fa;
min-width: 0;
}
.prod-rail--v3 .qty-card__input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-heading, #0e0e15);
padding: 0;
-moz-appearance: textfield;
}
.prod-rail--v3 .qty-card__input::-webkit-outer-spin-button,
.prod-rail--v3 .qty-card__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.prod-rail--v3 .qty-card__input:focus { outline: none; }
.prod-rail--v3 .qty-card__suffix {
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color-text-muted, #6b6b78);
white-space: nowrap;
flex-shrink: 0;
}
/* Recurring side */
.prod-rail--v3 .qty-card__recur {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 10px 12px 12px;
cursor: pointer;
user-select: none;
position: relative;
background: #fff;
transition: background 0.15s ease;
min-width: 0;
}
.prod-rail--v3 .qty-card__recur:hover { background: #fbfaff; }
.prod-rail--v3 .qty-card__recur input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.prod-rail--v3 .qty-card__check {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid #d4d0e0;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
position: relative;
}
.prod-rail--v3 .qty-card__recur input:checked ~ .qty-card__check {
background: var(--color-brand-purple, #6a49f0);
border-color: var(--color-brand-purple, #6a49f0);
}
.prod-rail--v3 .qty-card__recur input:checked ~ .qty-card__check::after {
content: "";
width: 5px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translate(-1px, -1px);
}
.prod-rail--v3 .qty-card__recur-label {
font-size: 12.5px;
font-weight: 500;
color: var(--color-heading, #0e0e15);
flex: 1 1 auto;
line-height: 1.2;
white-space: nowrap;
min-width: 0;
}
.prod-rail--v3 .qty-card__discount {
font-size: 11px;
font-weight: 600;
color: #6a49f0;
background: #ede6fa;
border-radius: 999px;
padding: 3px 9px;
flex-shrink: 0;
letter-spacing: 0;
white-space: nowrap;
}
.prod-rail--v3 .qty-card__recur input:checked ~ .qty-card__recur-label {
color: var(--color-brand-purple, #6a49f0);
}
@media (max-width: 480px) {
.prod-rail--v3 .qty-card { grid-template-columns: 1fr; }
.prod-rail--v3 .qty-card__qty {
border-right: 0;
border-bottom: 1px solid #ece8fa;
padding: 18px 18px;
}
.prod-rail--v3 .qty-card__recur { padding: 14px 18px; }
.prod-rail--v3 .qty-card__input { font-size: 24px; }
}
/* Dialer variant: qty-card with embedded add-ons row */
.prod-rail--v3 .qty-card--with-addons {
grid-template-columns: minmax(150px, 0.92fr) minmax(0, 1.5fr);
grid-template-rows: auto auto;
}
.prod-rail--v3 .qty-card--with-addons .qty-card__qty,
.prod-rail--v3 .qty-card--with-addons .qty-card__recur {
border-bottom: 1px solid #ece8fa;
}
.prod-rail--v3 .qty-card__addons {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: #f6f3fc;
flex-wrap: nowrap;
white-space: nowrap;
}
.prod-rail--v3 .qty-card__addons-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted, #6b6b78);
flex-shrink: 0;
}
.prod-rail--v3 .qty-card__addon {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
position: relative;
min-width: 0;
padding-right: 6px;
}
.prod-rail--v3 .qty-card__addon .qty-card__addon-name {
margin-left: 2px;
}
.prod-rail--v3 .qty-card__addon .qty-card__addon-price {
margin-left: 4px;
}
.prod-rail--v3 .qty-card__addon input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.prod-rail--v3 .qty-card__addon-name {
font-size: 12.5px;
font-weight: 600;
color: var(--color-heading, #0e0e15);
white-space: nowrap;
}
.prod-rail--v3 .qty-card__addon-price {
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-muted, #6b6b78);
white-space: nowrap;
}
.prod-rail--v3 .qty-card__addon input:checked ~ .qty-card__addon-name {
color: var(--color-brand-purple, #6a49f0);
}
.prod-rail--v3 .qty-card__addon input:checked ~ .qty-card__check {
background: var(--color-brand-purple, #6a49f0);
border-color: var(--color-brand-purple, #6a49f0);
}
.prod-rail--v3 .qty-card__addon input:checked ~ .qty-card__check::after {
content: "";
width: 5px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translate(-1px, -1px);
}
@media (max-width: 600px) {
.prod-rail--v3 .qty-card__addons {
gap: 10px;
padding: 11px 12px;
}
.prod-rail--v3 .qty-card__addon {
gap: 8px;
padding-right: 2px;
}
}
/* Below qty-card: meta row (hint + bulk link), divider, per-lead price */
.prod-rail--v3 .qty-meta {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}
.prod-rail--v3 .qty-meta .prod-control__hint {
margin: 0;
font-size: 12.5px;
font-weight: 400;
color: var(--color-text-muted, #6b6b78);
}
.prod-rail--v3 .qty-meta .bulk-link {
background: none;
border: 0;
padding: 0;
font-size: 12.5px;
font-weight: 500;
color: var(--color-brand-purple, #6a49f0);
cursor: pointer;
text-decoration: none;
}
.prod-rail--v3 .qty-meta .bulk-link:hover { text-decoration: underline; }
.prod-rail--v3 .qty-meta {
gap: 10px;
}
.prod-rail--v3 .qty-meta__icon {
width: 26px;
height: 26px;
flex: 0 0 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ede6fa;
color: var(--color-brand-purple, #6a49f0);
border-radius: 50%;
}
.prod-rail--v3 .qty-meta__icon svg {
width: 13px;
height: 13px;
display: block;
}
.prod-rail--v3 .qty-meta__sep {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(20, 20, 40, 0.14);
}
.prod-rail--v3 .cart-cta__saving {
font-size: 11px;
font-weight: 600;
color: #2f8a4f;
background: #e7f5ec;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
}
.prod-rail--v3 .cart-cta__saving[hidden] { display: none; }
.prod-marketing__quote {
margin: 18px 0 0;
text-align: left;
font-size: 12.5px;
color: var(--color-text-muted, #6b6b78);
}
.prod-marketing__quote a {
color: var(--color-brand-purple, #6a49f0);
font-weight: 600;
text-decoration: underline;
}
.prod-rail--v3 .qty-divider {
border: 0;
border-top: 1px solid #e8e5f3;
margin: 12px 0 12px;
}
.prod-rail--v3 .qty-perlead {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 4px;
}
.prod-rail--v3 .qty-perlead [data-per-lead] {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-heading, #0e0e15);
line-height: 1;
}
.prod-rail--v3 .qty-perlead small {
font-size: 12.5px;
font-weight: 400;
color: var(--color-text-muted, #6b6b78);
}
/* Stepper box — overrides cart-drawer .qty-stepper rules via specificity */
.prod-rail--v3 .qty-stepper {
display: flex;
align-items: center;
gap: 4px;
border: 1px solid rgba(20, 20, 30, 0.1);
border-radius: 12px;
padding: 4px 6px;
background: #fff;
overflow: visible;
min-height: 56px;
}
.prod-rail--v3 .qty-stepper__btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: 0;
background: rgba(20, 20, 30, 0.05);
color: var(--color-heading, #0e0e15);
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease;
}
.prod-rail--v3 .qty-stepper__btn:hover {
background: rgba(106, 73, 240, 0.1);
color: var(--color-brand-purple, #6a49f0);
}
.prod-rail--v3 .qty-stepper input[type="number"] {
flex: 1 1 0;
width: 0;
min-width: 0;
border: 0;
background: transparent;
text-align: center;
font-size: 22px;
font-weight: 800;
color: var(--color-heading, #0e0e15);
padding: 0 4px;
-moz-appearance: textfield;
}
.prod-rail--v3 .qty-stepper input[type="number"]::-webkit-outer-spin-button,
.prod-rail--v3 .qty-stepper input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.prod-rail--v3 .qty-stepper input[type="number"]:focus { outline: none; }
.prod-rail--v3 .qty-stepper__suffix {
font-size: 10px;
font-weight: 700;
color: var(--color-text-muted, #6b6b78);
letter-spacing: 0.4px;
flex-shrink: 0;
padding-right: 4px;
white-space: nowrap;
}
/* Recurring box (custom checkbox) */
.prod-rail--v3 .recurring-box {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(20, 20, 30, 0.1);
border-radius: 12px;
padding: 0 14px;
background: #fff;
cursor: pointer;
user-select: none;
min-height: 56px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.prod-rail--v3 .recurring-box:hover {
border-color: rgba(106, 73, 240, 0.4);
}
.prod-rail--v3 .recurring-box input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.prod-rail--v3 .recurring-box__check {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid rgba(20, 20, 30, 0.25);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
position: relative;
}
.prod-rail--v3 .recurring-box input:checked ~ .recurring-box__check {
background: var(--color-brand-purple, #6a49f0);
border-color: var(--color-brand-purple, #6a49f0);
}
.prod-rail--v3 .recurring-box input:checked ~ .recurring-box__check::after {
content: "";
width: 5px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translate(-1px, -1px);
}
.prod-rail--v3 .recurring-box__label {
font-size: 13px;
font-weight: 600;
color: var(--color-heading, #0e0e15);
line-height: 1.2;
}
.prod-rail--v3 .recurring-box input:checked ~ .recurring-box__label {
color: var(--color-brand-purple, #6a49f0);
}
/* Cart CTA — Amazon-style pill:
- Outer white rounded card (the "button" itself)
- LEFT: dark-purple price text
- RIGHT: solid purple rounded "Add to cart" pill
- BELOW: lock + savings note as a separate element */
.prod-rail--v3 .cart-cta {
position: relative;
margin-top: auto;
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
background: transparent;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
box-shadow: none;
border-radius: 0;
}
/* The white outer card — slim, soft purple halo glow (no border-like ring) */
.prod-rail--v3 .cart-cta__btn {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
width: 100%;
border: 1px solid #f1edfb;
border-radius: 12px;
background: #ffffff;
cursor: pointer;
padding: 8px 8px 8px 24px;
font-family: inherit;
text-align: left;
/* Diffuse purple halo — wide, soft, low-opacity. No tight ring. */
box-shadow:
0 6px 24px -4px rgba(122, 92, 243, 0.22),
0 2px 8px -2px rgba(122, 92, 243, 0.14);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.prod-rail--v3 .cart-cta__btn:hover {
transform: translateY(-1px);
box-shadow:
0 10px 30px -4px rgba(122, 92, 243, 0.3),
0 3px 12px -2px rgba(122, 92, 243, 0.18);
}
.prod-rail--v3 .cart-cta__btn:hover .cart-cta__label {
background: linear-gradient(180deg, #8265f5 0%, #6a49f0 100%);
}
.prod-rail--v3 .cart-cta__btn:hover .cart-cta__label,
.prod-rail--v3 .cart-cta__btn:hover .cart-cta__label { /* halo intensifies on hover — see rule below */ }
.prod-rail--v3 .cart-cta__btn:active { transform: translateY(0); }
.prod-rail--v3 .cart-cta__btn:focus-visible {
outline: 2px solid #6a49f0;
outline-offset: 3px;
}
.prod-rail--v3 .cart-cta__btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 12px -6px rgba(80, 50, 200, 0.12);
}
/* Price — left-aligned, dark purple */
.prod-rail--v3 .cart-cta__price {
order: 1;
color: #2e1f7a;
font-weight: 800;
font-size: 19px;
letter-spacing: -0.015em;
line-height: 1;
padding-left: 2px;
}
/* Right-side purple "Add to cart" — slimmer fully rounded pill */
.prod-rail--v3 .cart-cta__label {
order: 2;
background: linear-gradient(180deg, #7a5cf3 0%, #6a49f0 100%);
color: #fff;
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 22px;
border-radius: 999px;
white-space: nowrap;
box-shadow:
0 4px 10px -3px rgba(106, 73, 240, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: background 0.15s ease;
}
.prod-rail--v3 .cart-cta__label .arrow {
font-size: 15px;
line-height: 1;
font-weight: 600;
transition: transform 0.15s ease;
}
.prod-rail--v3 .cart-cta__btn:hover .cart-cta__label .arrow {
transform: translateX(2px);
}
/* Lock note — sits below as its own row, no background card */
.prod-rail--v3 .cart-cta__note {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 4px 0;
margin: 0;
font-size: 11.5px;
font-weight: 500;
color: #4f33c4;
line-height: 1.35;
white-space: nowrap;
flex-wrap: nowrap;
}
.prod-rail--v3 .cart-cta__note [data-savings-text] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-rail--v3 .cart-cta__note svg {
width: 22px;
height: 22px;
flex-shrink: 0;
color: #4f33c4;
background: #ede6fa;
border: 1px solid #ddd5f5;
border-radius: 999px;
padding: 5px;
box-sizing: border-box;
stroke-width: 2;
}
.prod-rail--v3 .cart-cta__note[hidden] { display: none; }
.prod-rail--v3 .cart-cta .prod-rail__next-tier {
margin: 0;
padding: 0 16px 10px;
font-size: 11.5px;
color: var(--color-text-muted, #6b6b78);
position: relative;
z-index: 1;
}
/* Filled purple bullets with white check */
.prod-marketing__list li {
padding-left: 28px;
}
.prod-marketing__list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--color-brand-purple, #6a49f0);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
/* Mobile: stack the qty split, keep cart CTA as horizontal split */
@media (max-width: 640px) {
.prod-rail--v3 .qty-split {
grid-template-columns: 1fr;
}
.prod-rail--v3 .recurring-box { min-height: 48px; }
.prod-rail--v3 .cart-cta__label {
font-size: 15px;
padding: 16px 32px 16px 18px;
}
.prod-rail--v3 .cart-cta__price {
font-size: 16px;
padding: 16px 18px 16px 24px;
}
}
/* ============================================================
CHECKOUT PAGE
============================================================ */
.section-tight { padding: 36px 0 80px; }
.checkout-hero { padding: 56px 0 28px; }
.checkout-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink, #1a1a1a);
text-decoration: none;
margin-bottom: 22px;
padding: 9px 16px 9px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(20, 20, 20, 0.12);
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.checkout-back:hover {
background: #fff;
border-color: rgba(20, 20, 20, 0.22);
transform: translateX(-2px);
}
.checkout-back svg { width: 14px; height: 14px; }
.checkout-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.checkout-grid[hidden] { display: none; }
.checkout-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.checkout-card {
background: #fff;
border: 1px solid #ece8fa;
border-radius: 18px;
padding: 24px 26px;
box-shadow: 0 1px 0 rgba(20, 20, 40, 0.02);
}
.checkout-card__title {
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: 22px;
font-weight: 600;
margin: 0 0 4px;
color: #14122a;
}
.checkout-card__sub {
font-size: 14px;
color: #5b5970;
margin: 0 0 16px;
}
.checkout-card .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 14px;
}
.checkout-card .form-row + .form-field { margin-top: 14px; }
.checkout-payment-info {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: #f6f3fc;
border-radius: 14px;
margin-top: 6px;
}
.checkout-payment-info svg {
width: 22px; height: 22px;
color: var(--brand-purple, #6a49f0);
flex: none;
margin-top: 2px;
}
.checkout-payment-info strong {
display: block;
font-size: 15px;
color: #14122a;
margin-bottom: 2px;
}
.checkout-payment-info p {
margin: 0;
font-size: 13.5px;
color: #5b5970;
line-height: 1.5;
}
.checkout-form__foot {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 4px 0;
}
.checkout-submit {
width: 100%;
justify-content: center;
display: inline-flex;
align-items: center;
gap: 8px;
}
.checkout-submit__amount {
font-weight: 600;
opacity: 0.9;
}
.checkout-form__note {
font-size: 12.5px;
color: #6c6a82;
margin: 0;
line-height: 1.5;
}
.checkout-form__note a { color: var(--brand-purple, #6a49f0); }
/* Order summary (right column) */
.checkout-summary { min-width: 0; }
.checkout-summary__inner {
position: sticky;
top: 96px;
background: #fff;
border: 1px solid #ece8fa;
border-radius: 18px;
padding: 22px 24px 24px;
box-shadow: 0 1px 0 rgba(20, 20, 40, 0.02);
}
.checkout-summary__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.checkout-summary__head h2 {
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
margin: 0;
color: #14122a;
}
.checkout-summary__edit {
font-size: 13px;
font-weight: 600;
color: var(--brand-purple, #6a49f0);
text-decoration: none;
}
.checkout-summary__edit:hover { text-decoration: underline; }
.checkout-summary__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.checkout-item {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid #f0ecfa;
}
.checkout-item:last-child { border-bottom: 0; }
.checkout-item__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.checkout-item__name {
font-size: 14px;
font-weight: 600;
color: #14122a;
line-height: 1.35;
}
.checkout-item__sub,
.checkout-item__qty {
font-size: 12.5px;
color: #6c6a82;
}
.checkout-item__price {
font-size: 14px;
font-weight: 700;
color: #14122a;
white-space: nowrap;
}
.checkout-summary__totals {
margin: 14px 0 0;
padding: 14px 0 0;
border-top: 1px solid #ece8fa;
display: flex;
flex-direction: column;
gap: 8px;
}
.checkout-summary__totals > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 14px;
color: #5b5970;
}
.checkout-summary__totals dt { margin: 0; }
.checkout-summary__totals dd { margin: 0; color: #14122a; font-weight: 500; }
.checkout-summary__totals--grand {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid #ece8fa;
font-size: 16px !important;
}
.checkout-summary__totals--grand dt { font-weight: 600; color: #14122a !important; }
.checkout-summary__totals--grand dd { font-weight: 700; font-size: 18px; }
.checkout-summary__benefits {
list-style: none;
margin: 18px 0 0;
padding: 14px 0 0;
border-top: 1px solid #ece8fa;
display: flex;
flex-direction: column;
gap: 9px;
}
.checkout-summary__benefits li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: #4b495e;
line-height: 1.45;
}
.checkout-summary__benefits svg {
width: 14px; height: 14px;
color: #2f8a4f;
flex: none;
margin-top: 3px;
}
/* Empty state */
.checkout-empty {
text-align: center;
padding: 64px 24px;
background: #fff;
border: 1px solid #ece8fa;
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.checkout-empty[hidden] { display: none; }
.checkout-empty svg {
width: 56px;
height: 56px;
color: var(--brand-purple, #6a49f0);
background: #ede6fa;
padding: 14px;
border-radius: 50%;
margin-bottom: 4px;
}
.checkout-empty h2 {
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: 28px;
font-weight: 600;
margin: 0;
color: #14122a;
}
.checkout-empty p {
margin: 0 0 12px;
color: #5b5970;
max-width: 420px;
}
/* Success state */
.checkout-success {
text-align: center;
padding: 72px 24px;
background: #fff;
border: 1px solid #ece8fa;
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.checkout-success[hidden] { display: none; }
.checkout-success svg {
width: 56px;
height: 56px;
color: #2f8a4f;
background: #e7f5ec;
padding: 14px;
border-radius: 50%;
margin-bottom: 4px;
}
.checkout-success h2 {
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: 30px;
font-weight: 600;
margin: 0;
color: #14122a;
}
.checkout-success p {
margin: 0 0 12px;
color: #5b5970;
max-width: 480px;
line-height: 1.55;
}
/* Responsive */
@media (max-width: 980px) {
.checkout-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.checkout-summary__inner {
position: static;
}
}
@media (max-width: 640px) {
.checkout-card { padding: 20px 18px; }
.checkout-card .form-row { grid-template-columns: 1fr; }
.checkout-summary__inner { padding: 18px 18px 20px; }
.checkout-hero { padding: 40px 0 18px; }
.section-tight { padding: 24px 0 64px; }
}
/* ==========================================================
Configurator card refresh — Apr 29 redesign
- airier age-tabs: dark active pill + purple price labels
- bigger qty number; Save 5% pill on the right
- status row: minimum on left, "Your rate $X per lead" on right
- "View bulk pricing →" sits below a divider
========================================================== */
/* Age tabs container — bigger, airier, single soft inset */
.prod-rail--v3 .age-tabs--inline,
.prod-rail--v3 .age-tabs {
background: #ffffff;
border: 1px solid #e8e3f3;
border-radius: 14px;
padding: 6px;
gap: 4px;
box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04) inset;
}
.prod-rail--v3 .age-tabs--inline .age-tab > span,
.prod-rail--v3 .age-tabs .age-tab > span {
flex-direction: row;
justify-content: center;
align-items: baseline;
gap: 6px;
padding: 11px 6px;
border-radius: 10px;
white-space: nowrap;
transition: background 0.18s ease, color 0.18s ease;
overflow: hidden;
}
.prod-rail--v3 .age-tabs--inline .age-tab > span strong,
.prod-rail--v3 .age-tabs .age-tab > span strong {
font-size: 12px;
font-weight: 600;
color: #14141e;
letter-spacing: -0.1px;
}
.prod-rail--v3 .age-tabs--inline .age-tab > span em,
.prod-rail--v3 .age-tabs .age-tab > span em {
font-size: 12px;
font-weight: 600;
color: #6a49f0;
font-style: normal;
opacity: 1;
}
.prod-rail--v3 .age-tabs--inline .age-tab:has(input:checked) > span,
.prod-rail--v3 .age-tabs .age-tab:has(input:checked) > span {
background: #14141e;
color: #ffffff;
box-shadow: 0 4px 10px -4px rgba(20, 20, 30, 0.35);
}
.prod-rail--v3 .age-tabs--inline .age-tab:has(input:checked) > span strong,
.prod-rail--v3 .age-tabs--inline .age-tab:has(input:checked) > span em,
.prod-rail--v3 .age-tabs .age-tab:has(input:checked) > span strong,
.prod-rail--v3 .age-tabs .age-tab:has(input:checked) > span em {
color: #ffffff;
}
/* Quantity card — bigger number, separated visually */
.prod-rail--v3 .qty-card {
border-radius: 12px;
border: 1px solid #e8e3f3;
background: #ffffff;
box-shadow: none;
}
.prod-rail--v3 .qty-card {
grid-template-columns: minmax(155px, 1fr) minmax(0, 1.5fr);
}
.prod-rail--v3 .qty-card__qty {
padding: 16px 10px 16px 14px;
gap: 5px;
}
.prod-rail--v3 .qty-card__input {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.05;
min-width: 0;
font-variant-numeric: tabular-nums;
width: 100%;
}
.prod-rail--v3 .qty-card__suffix {
font-size: 12px;
font-weight: 500;
color: #6b6b78;
flex-shrink: 0;
}
.prod-rail--v3 .qty-card__recur {
padding: 14px 10px 14px 12px;
gap: 7px;
}
.prod-rail--v3 .qty-card__recur-label {
font-size: 13px;
font-weight: 500;
color: #14141e;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-rail--v3 .qty-card__check {
width: 22px;
height: 22px;
border-radius: 6px;
border-width: 1.5px;
}
.prod-rail--v3 .qty-card__recur input:checked ~ .qty-card__check::after {
width: 5px;
height: 10px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
}
.prod-rail--v3 .qty-card__discount {
display: inline-flex;
align-items: center;
background: #ede6fa;
color: #6a49f0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 3px 8px;
border-radius: 999px;
flex-shrink: 0;
white-space: nowrap;
}
/* Status row: minimum (left, with chip icon) + Your rate (right) */
.prod-rail--v3 .qty-meta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-top: 16px;
flex-wrap: nowrap;
}
.prod-rail--v3 .qty-meta__icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
background: #ede6fa;
border-radius: 50%;
}
.prod-rail--v3 .qty-meta__icon svg {
width: 15px;
height: 15px;
}
.prod-rail--v3 .qty-meta .prod-control__hint {
margin: 0;
font-size: 13.5px;
font-weight: 400;
color: #6b6b78;
flex: 1 1 auto;
}
.prod-rail--v3 .qty-meta__sep { display: none; }
/* Inline "Your rate $X per lead" group */
.prod-rail--v3 .qty-meta .qty-perlead {
margin: 0 0 0 auto;
display: inline-flex;
align-items: baseline;
gap: 8px;
flex-shrink: 0;
}
.prod-rail--v3 .qty-meta .qty-perlead .qty-perlead__lbl {
font-size: 13px;
color: #6b6b78;
font-weight: 400;
}
.prod-rail--v3 .qty-meta .qty-perlead .qty-perlead__amt {
font-size: 18px;
font-weight: 700;
color: #14141e;
letter-spacing: -0.01em;
}
.prod-rail--v3 .qty-meta .qty-perlead small {
font-size: 13px;
font-weight: 400;
color: #6b6b78;
}
/* Divider + bulk-pricing link below */
.prod-rail--v3 .qty-divider {
border: 0;
border-top: 1px solid #ece8fa;
margin: 16px 0 14px;
}
.prod-rail--v3 .bulk-link {
background: none;
border: 0;
padding: 0;
font-size: 14px;
font-weight: 500;
color: #6a49f0;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.18s ease;
}
.prod-rail--v3 .bulk-link:hover {
text-decoration: none;
gap: 12px;
}
.prod-rail--v3 .bulk-link span { transition: transform 0.18s ease; }
.prod-rail--v3 .bulk-link:hover span { transform: translateX(2px); }
@media (max-width: 520px) {
.prod-rail--v3 .qty-meta { flex-wrap: wrap; }
.prod-rail--v3 .qty-meta .qty-perlead { margin-left: 44px; }
.prod-rail--v3 .age-tabs--inline .age-tab > span,
.prod-rail--v3 .age-tabs .age-tab > span {
padding: 9px 4px;
gap: 4px;
}
.prod-rail--v3 .age-tabs--inline .age-tab > span strong,
.prod-rail--v3 .age-tabs--inline .age-tab > span em {
font-size: 12px;
}
}
/* ============================================================
CHECKOUT POLISH (v=20260429t)
============================================================ */
/* Hero title — clean single block, no awkward inline highlight */
.checkout-hero h1.checkout-hero__title,
.page-hero h1.checkout-hero__title {
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: clamp(34px, 4.4vw, 52px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: #14122a;
margin: 0 auto 14px;
text-align: center;
max-width: 22ch;
}
.checkout-hero .lede {
text-align: center;
max-width: 540px;
margin-left: auto;
margin-right: auto;
color: #5b5970;
font-size: 16px;
line-height: 1.55;
}
/* Step indicator pills under hero */
.checkout-steps {
list-style: none;
margin: 24px auto 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.checkout-steps__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 8px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #ece8fa;
font-size: 13px;
font-weight: 500;
color: #5b5970;
position: relative;
}
.checkout-steps__item span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: #ede6fa;
color: #6a49f0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.checkout-steps__item.is-active {
color: #14122a;
}
.checkout-steps__item:not(:last-child)::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 1px;
background: #d9d2ee;
}
/* Card step badge — uses data-step attribute */
.checkout-card {
position: relative;
padding-top: 26px;
}
.checkout-card[data-step]::before {
content: attr(data-step);
position: absolute;
top: 22px;
right: 22px;
font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
color: #6a49f0;
background: #ede6fa;
padding: 4px 10px;
border-radius: 999px;
}
/* Tighten spacing between hero and grid */
.checkout-hero { padding-bottom: 36px; }
.section.section-tight { padding-top: 12px; }
/* Make the summary inner pop a touch more */
.checkout-summary__inner {
border: 1px solid #e8e3f3;
box-shadow:
0 1px 0 rgba(20, 20, 40, 0.02),
0 24px 60px -32px rgba(80, 50, 200, 0.12);
}
.checkout-summary__totals--grand {
background: #f6f3fc;
border-radius: 12px;
padding: 14px 14px !important;
margin: 12px -2px 0 !important;
border-top: 0 !important;
}
.checkout-summary__totals--grand dd {
color: #6a49f0 !important;
font-size: 22px !important;
}
/* Submit footer card — give it a soft container */
.checkout-form__foot {
background: #fff;
border: 1px solid #ece8fa;
border-radius: 16px;
padding: 20px 22px;
gap: 12px !important;
}
.checkout-submit { padding: 16px 24px; font-size: 15px; }
/* Mobile */
@media (max-width: 640px) {
.checkout-steps { gap: 6px; }
.checkout-steps__item { font-size: 12px; padding: 6px 11px 6px 6px; }
.checkout-steps__item:not(:last-child)::after { display: none; }
.checkout-card[data-step]::before { top: 18px; right: 18px; font-size: 11px; padding: 3px 8px; }
.checkout-card { padding: 24px 20px; padding-top: 24px; }
}
/* Dialer-specific qty grid override (must come after configurator redesign block) */
.prod-rail--v3 .qty-card.qty-card--with-addons {
grid-template-columns: minmax(170px, 1.05fr) minmax(0, 1.45fr);
}
.prod-rail--v3 .qty-card.qty-card--with-addons .qty-card__qty {
padding: 16px 10px 16px 14px;
gap: 5px;
}
/* When the recur side is tight, allow recur-label to truncate before the pill */
.prod-rail--v3 .qty-card__recur {
flex-wrap: nowrap;
}
.prod-rail--v3 .qty-card__recur-label {
flex: 1 1 0;
min-width: 0;
}
/* Recurring frequency — custom pill (white bg, black text) */
.prod-rail--v3 .qty-card__recur--select {
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
background: #fff;
cursor: default;
min-width: 0;
position: relative;
overflow: visible;
}
.prod-rail--v3 .recur-pill {
position: relative;
display: inline-block;
max-width: 100%;
}
.prod-rail--v3 .recur-pill__btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #e8e3f3;
border-radius: 999px;
padding: 10px 22px;
font-family: inherit;
cursor: pointer;
outline: none;
color: #14141e;
white-space: nowrap;
max-width: 100%;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prod-rail--v3 .recur-pill__btn:hover {
border-color: #d8d0ee;
}
.prod-rail--v3 .recur-pill.is-open .recur-pill__btn,
.prod-rail--v3 .recur-pill__btn:focus-visible {
border-color: #6a49f0;
box-shadow: 0 0 0 3px rgba(106, 73, 240, 0.14);
}
.prod-rail--v3 .recur-pill__label {
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-rail--v3 .recur-pill__name {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
color: #14141e;
text-transform: none;
line-height: 1;
}
.prod-rail--v3 .recur-pill__off {
font-size: 10.5px;
font-weight: 300;
color: #14141e;
letter-spacing: 0;
line-height: 1;
text-transform: none;
}
.prod-rail--v3 .recur-pill__chev {
flex-shrink: 0;
color: #6b6b78;
transition: transform 0.15s ease;
}
.prod-rail--v3 .recur-pill.is-open .recur-pill__chev {
transform: rotate(180deg);
}
/* Dropdown menu — fixed positioning so it escapes overflow:hidden ancestors */
.prod-rail--v3 .recur-pill__menu {
position: fixed;
background: #ffffff;
border: 1px solid #ece8fa;
border-radius: 14px;
box-shadow: 0 10px 30px -10px rgba(20, 20, 30, 0.18), 0 4px 10px -4px rgba(20, 20, 30, 0.08);
padding: 6px;
margin: 0;
list-style: none;
width: max-content;
min-width: 140px;
max-width: 220px;
z-index: 1000;
}
.prod-rail--v3 .recur-pill__menu[hidden] { display: none; }
.prod-rail--v3 .recur-pill__menu li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background-color 0.12s ease;
}
.prod-rail--v3 .recur-pill__menu li:hover {
background: #f6f3fc;
}
.prod-rail--v3 .recur-pill__menu li[data-selected="true"] {
background: #ede6fa;
}
/* Quantity card v4 — match Add-to-Cart pill height/padding */
.prod-rail--v3 .qty-card {
grid-template-columns: minmax(0, 1fr) auto;
padding: 8px 8px 8px 24px;
align-items: center;
}
.prod-rail--v3 .qty-card__qty {
border-right: 0;
padding: 0;
align-items: baseline;
gap: 12px;
}
.prod-rail--v3 .qty-card__input {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1;
width: auto;
flex: 0 0 auto;
color: #2e1f7a;
}
.prod-rail--v3 .qty-card__suffix {
font-size: 13px;
font-weight: 500;
color: #6b6b78;
}
.prod-rail--v3 .qty-card__recur--select {
padding: 0 14px 0 0;
justify-content: flex-end;
align-self: center;
}
/* Remove inner divider/background on the recur cell */
.prod-rail--v3 .qty-card__recur {
background: transparent !important;
}
.prod-rail--v3 .qty-card__recur:hover {
background: transparent !important;
}
/* Dialer — same treatment, plus add-ons row sits below seamlessly */
.prod-rail--v3 .qty-card.qty-card--with-addons {
grid-template-columns: minmax(0, 1fr) auto;
}
.prod-rail--v3 .qty-card.qty-card--with-addons .qty-card__qty {
padding: 0;
border-bottom: 0;
}
.prod-rail--v3 .qty-card--with-addons .qty-card__recur {
border-bottom: 0;
}
.prod-rail--v3 .qty-card--with-addons .qty-card__addons {
border-top: 1px solid #ece8fa;
margin-top: 6px;
}
/* Mobile — stack qty above recur, keep number large but proportional */
@media (max-width: 520px) {
.prod-rail--v3 .qty-card {
grid-template-columns: 1fr;
padding: 10px 16px;
}
.prod-rail--v3 .qty-card__qty {
padding: 6px 0;
border-bottom: 1px solid #ece8fa;
}
.prod-rail--v3 .qty-card__input { font-size: 19px; }
.prod-rail--v3 .qty-card__recur--select {
padding: 8px 12px;
justify-content: flex-start;
}
}
/* =========================================================
COVERAGE MAP — replaces pipeline-grid in How It Works
========================================================= */
.coverage-map {
position: relative;
margin: 56px auto 0;
max-width: 1080px;
min-height: 540px;
padding: 32px clamp(16px, 4vw, 56px) 28px;
isolation: isolate;
}
.coverage-map__inner {
position: relative;
border-radius: 28px;
background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(247,243,255,0.7) 100%);
border: 1px solid rgba(160, 111, 255, 0.18);
box-shadow:
0 32px 80px -32px rgba(70, 30, 180, 0.28),
0 4px 12px -4px rgba(70, 30, 180, 0.08),
inset 0 1px 0 rgba(255,255,255,0.9);
padding: 36px 28px 28px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.coverage-map__svg {
width: 100%;
max-width: 820px;
height: auto;
display: block;
margin: 0 auto;
aspect-ratio: 1000 / 589;
}
/* Soft purple halo around the entire US outline (matches add-to-cart button glow) */
.us-states {
filter:
drop-shadow(0 0 14px rgba(122, 92, 243, 0.32))
drop-shadow(0 0 36px rgba(122, 92, 243, 0.20))
drop-shadow(0 6px 24px rgba(70, 30, 180, 0.18));
}
/* All 50 states + DC — per-state paths */
.us-state {
fill: rgba(160, 111, 255, 0.10);
stroke: rgba(108, 73, 240, 0.55);
stroke-width: 0.8;
stroke-linejoin: round;
stroke-linecap: round;
transition: fill 0.4s ease;
}
/* Subtle differentiation for high-density MCA states */
.us-state[data-state="NY"],
.us-state[data-state="NJ"],
.us-state[data-state="PA"],
.us-state[data-state="FL"],
.us-state[data-state="GA"],
.us-state[data-state="TX"],
.us-state[data-state="CA"],
.us-state[data-state="IL"] {
fill: rgba(130, 71, 255, 0.18);
}
.us-state[data-state="OH"],
.us-state[data-state="MI"],
.us-state[data-state="NC"],
.us-state[data-state="AZ"],
.us-state[data-state="MA"],
.us-state[data-state="VA"],
.us-state[data-state="WA"],
.us-state[data-state="CO"],
.us-state[data-state="TN"],
.us-state[data-state="AL"],
.us-state[data-state="LA"],
.us-state[data-state="MD"],
.us-state[data-state="NV"],
.us-state[data-state="MO"],
.us-state[data-state="IN"],
.us-state[data-state="AK"] {
fill: rgba(130, 71, 255, 0.13);
}
/* State-anchored coverage dots — sized by density tier */
.coverage-state {
fill: url(#covMapGrad);
filter: drop-shadow(0 0 6px rgba(130, 71, 255, 0.55));
transition: transform 0.3s ease;
transform-origin: center;
transform-box: fill-box;
}
.coverage-state--d1 { opacity: 0.55; }
.coverage-state--d2 { opacity: 0.78; }
.coverage-state--d3 {
opacity: 1;
filter: drop-shadow(0 0 9px rgba(130, 71, 255, 0.85));
animation: coverageStatePulse 3.2s ease-in-out infinite;
}
.coverage-state--d3:nth-of-type(2n) { animation-delay: 0.8s; }
.coverage-state--d3:nth-of-type(3n) { animation-delay: 1.6s; }
.coverage-state--d3:nth-of-type(4n) { animation-delay: 2.4s; }
@keyframes coverageStatePulse {
0%, 100% { transform: scale(1); opacity: 0.95; }
50% { transform: scale(1.18); opacity: 1; }
}
/* Hide old pulse markers (replaced by d3 state pulses) */
.coverage-map__pulses { display: none; }
/* Stats bookending the map */
.coverage-map__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.coverage-map__stat--top { margin-bottom: 6px; }
.coverage-map__stat--bottom { margin-top: 4px; }
.coverage-map__stat-num {
font-family: var(--font-display, "Tobias", "GT Sectra", Georgia, serif);
font-size: clamp(32px, 5vw, 44px);
font-weight: 600;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.coverage-map__stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(70, 30, 130, 0.65);
}
/* Floating filter chips */
.coverage-chip--floating {
position: absolute;
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(160, 111, 255, 0.22);
box-shadow:
0 12px 28px -12px rgba(70, 30, 180, 0.32),
0 2px 6px -2px rgba(70, 30, 180, 0.10);
font-size: 12px;
z-index: 3;
animation: coverageChipFloat 6s ease-in-out infinite;
}
.coverage-chip__label {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(70, 30, 130, 0.55);
}
.coverage-chip__value {
font-size: 13px;
font-weight: 600;
color: #1a1230;
white-space: nowrap;
}
/* Chip positions — distributed around the map */
.coverage-chip--c1 { top: 8%; left: 0%; animation-delay: 0s; }
.coverage-chip--c2 { top: 4%; right: 4%; animation-delay: 0.6s; }
.coverage-chip--c3 { top: 32%; left: -1%; animation-delay: 1.2s; }
.coverage-chip--c4 { top: 28%; right: 0%; animation-delay: 1.8s; }
.coverage-chip--c5 { top: 58%; left: 1%; animation-delay: 2.4s; }
.coverage-chip--c6 { top: 54%; right: -1%; animation-delay: 3.0s; }
.coverage-chip--c7 { top: 82%; left: 6%; animation-delay: 3.6s; }
.coverage-chip--c8 { top: 84%; right: 5%; animation-delay: 4.2s; }
@keyframes coverageChipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Legend below */
.coverage-map__legend {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 28px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(70, 30, 130, 0.7);
}
.coverage-legend__item {
display: inline-flex;
align-items: center;
gap: 7px;
}
.coverage-legend__dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(135deg, #8247FF, #5A3DE8);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.18);
display: inline-block;
}
.coverage-legend__sep {
color: rgba(70, 30, 130, 0.35);
}
/* Tablet */
@media (max-width: 900px) {
.coverage-map { min-height: auto; padding: 24px 8px 16px; }
.coverage-map__inner { padding: 24px 16px 20px; }
.coverage-chip--floating { font-size: 11px; padding: 8px 11px; }
.coverage-chip__value { font-size: 12px; }
.coverage-chip--c1 { top: 2%; left: 1%; }
.coverage-chip--c2 { top: 0%; right: 1%; }
.coverage-chip--c3 { top: 22%; left: -2%; }
.coverage-chip--c4 { top: 22%; right: -2%; }
.coverage-chip--c5 { top: 50%; left: -2%; }
.coverage-chip--c6 { top: 50%; right: -2%; }
.coverage-chip--c7 { top: 78%; left: 4%; }
.coverage-chip--c8 { top: 80%; right: 4%; }
}
/* Mobile — stack chips below map for clarity */
@media (max-width: 600px) {
.coverage-map { padding: 16px 8px 12px; }
.coverage-map__inner { padding: 18px 12px 16px; border-radius: 20px; }
.coverage-chip--floating {
position: static;
width: calc(50% - 6px);
animation: none;
}
.coverage-map {
display: flex;
flex-direction: column;
}
.coverage-map__inner { order: 1; }
/* Wrap the floating chips in a flex container via :has fallback — chips render before .coverage-map__inner */
}
/* Hide the old pipeline-grid completely */
.pipeline-grid--hidden { display: none !important; }
/* ============================================================
Auth + Account Portal (added 2026-04-29)
============================================================ */
/* ---- Shared utilities ---- */
.muted { color: var(--color-text-muted); }
/* ---- Auth pages (login / signup / forgot password) ---- */
.auth-page {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: 80px 24px 96px;
background:
radial-gradient(60% 60% at 12% -10%, rgba(130, 71, 255, 0.08) 0%, transparent 60%),
radial-gradient(50% 50% at 92% 110%, rgba(74, 79, 224, 0.10) 0%, transparent 60%),
var(--color-bg-page);
}
.auth-card {
width: 100%;
max-width: 520px;
margin: 0 auto;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 40px 40px 32px;
box-shadow: var(--shadow-card);
}
.auth-card--narrow { max-width: 460px; }
.auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--color-bg-page);
border-radius: var(--radius-pill);
padding: 4px;
margin-bottom: 28px;
gap: 4px;
}
.auth-tab {
appearance: none;
background: transparent;
border: 0;
padding: 10px 16px;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-text-muted);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-tab:hover { color: var(--color-heading); }
.auth-tab.is-active {
background: var(--color-white);
color: var(--color-heading);
box-shadow: 0 1px 2px rgba(26, 18, 64, 0.06), 0 4px 12px rgba(26, 18, 64, 0.06);
}
.auth-panel { display: none; }
.auth-panel.is-active { display: block; }
.auth-head {
text-align: center;
margin-bottom: 24px;
}
.auth-head h1 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0 0 6px;
}
.auth-head p {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.auth-google {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13px 20px;
background: var(--color-white);
color: var(--color-heading);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-pill);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.auth-google:hover { border-color: var(--color-heading); transform: translateY(-1px); }
.auth-google svg { width: 18px; height: 18px; }
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-faint);
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form .form-field { margin-bottom: 14px; }
.auth-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.auth-form__row .form-field { margin-bottom: 14px; }
.auth-pw-wrap { position: relative; }
.auth-pw-wrap input { padding-right: 52px; }
.auth-pw-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-brand-purple);
cursor: pointer;
border-radius: var(--radius-sm);
}
.auth-pw-toggle:hover { background: rgba(130, 71, 255, 0.08); }
.field__label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.field__label-row .field__label,
.field__label-row label {
margin-bottom: 0;
}
.auth-forgot {
font-size: 12px;
font-weight: 600;
color: var(--color-brand-purple);
text-decoration: none;
letter-spacing: -0.005em;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-feedback {
display: none;
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
margin: 6px 0 14px;
line-height: 1.4;
}
.auth-feedback.is-visible { display: block; }
.auth-feedback[data-kind="error"] {
background: rgba(220, 38, 38, 0.08);
color: #b91c1c;
border: 1px solid rgba(220, 38, 38, 0.18);
}
.auth-feedback[data-kind="success"] {
background: rgba(22, 163, 74, 0.08);
color: #15803d;
border: 1px solid rgba(22, 163, 74, 0.18);
}
.auth-submit {
width: 100%;
margin-top: 6px;
padding: 14px 24px;
}
.auth-foot {
text-align: center;
margin-top: 20px;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.auth-swap, .auth-link {
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: var(--color-brand-purple);
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.auth-swap:hover, .auth-link:hover { text-decoration: underline; }
.auth-success {
text-align: center;
padding: 16px 0 8px;
}
.auth-success__icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(22, 163, 74, 0.10);
color: #15803d;
}
.auth-success h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
margin: 0 0 8px;
color: var(--color-heading);
}
.auth-success p {
color: var(--color-text-muted);
font-size: var(--text-sm);
margin: 0 0 20px;
}
@media (max-width: 520px) {
.auth-card { padding: 28px 22px 24px; border-radius: var(--radius-lg); }
.auth-form__row { grid-template-columns: 1fr; }
.auth-head h1 { font-size: 24px; }
}
/* ---- Account Portal ---- */
.account-page {
min-height: calc(100vh - 80px);
background: var(--color-bg-page);
padding: 56px 0 96px;
}
.account-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.account-head h1 {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0 0 4px;
}
.account-head__sub {
color: var(--color-text-muted);
font-size: var(--text-sm);
margin: 0;
}
.account-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
.account-side {
position: sticky;
top: 96px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 12px;
box-shadow: var(--shadow-card);
}
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav__item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: transparent;
border: 0;
border-radius: var(--radius-md);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 500;
text-align: left;
cursor: pointer;
text-decoration: none;
width: 100%;
transition: background var(--transition-fast), color var(--transition-fast);
}
.account-nav__item:hover { background: var(--color-bg-page); color: var(--color-heading); }
.account-nav__item.is-active {
background: var(--gradient-brand-soft);
color: var(--color-heading);
font-weight: 600;
}
.account-nav__item.is-active .account-nav__icon { color: var(--color-brand-purple); }
.account-nav__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
flex-shrink: 0;
}
.account-nav__signout {
margin-top: 8px;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-md) var(--radius-md);
padding-top: 14px;
color: var(--color-text-muted);
}
.account-nav__signout:hover { color: #b91c1c; background: rgba(220, 38, 38, 0.06); }
.account-nav__signout:hover .account-nav__icon { color: #b91c1c; }
.account-main { min-width: 0; }
.account-panel { display: none; }
.account-panel.is-active { display: block; }
.account-panel__head {
margin-bottom: 20px;
}
.account-panel__head h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-heading);
margin: 0 0 4px;
}
.account-panel__head p {
color: var(--color-text-muted);
font-size: var(--text-sm);
margin: 0;
}
.account-panel__head--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.account-panel__head--inline .account-panel__head-title {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0 0 4px;
}
.account-panel__head--inline .account-panel__head-title h2 {
margin: 0;
}
.account-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-card);
margin-bottom: 20px;
}
.account-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.account-card__head h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-heading);
margin: 0;
}
.account-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-brand-purple);
text-decoration: none;
}
.account-card__lede {
margin: -8px 0 16px;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-muted, #6B7280);
}
.account-card__lede a {
color: var(--color-brand-purple);
font-weight: 600;
text-decoration: none;
}
.account-card__lede a:hover {
text-decoration: underline;
}
.account-card__link:hover { text-decoration: underline; }
.account-form { display: block; }
.account-form .form-field { margin-bottom: 16px; }
/* Visible borders on account form inputs (page bg matches default input bg) */
.account-form .form-field input,
.account-form .form-field select,
.account-form .form-field textarea {
background: var(--color-white) !important;
border: 1.5px solid var(--color-border) !important;
}
.account-form .form-field input:focus,
.account-form .form-field select:focus,
.account-form .form-field textarea:focus {
border-color: var(--color-brand-purple) !important;
}
.account-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.account-form__row .form-field { margin-bottom: 16px; }
/* ----------------------------------------------------------------
Custom role dropdown (Team & permissions)
---------------------------------------------------------------- */
.role-dropdown {
position: relative;
width: 100%;
}
.role-dropdown__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 10px 14px;
background: var(--color-white);
border: 1.5px solid var(--color-border);
border-radius: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: var(--color-heading);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.role-dropdown__trigger:hover { border-color: #b5b1c8; }
.role-dropdown.is-open .role-dropdown__trigger,
.role-dropdown__trigger:focus-visible {
outline: none;
border-color: var(--color-brand-purple);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.12);
}
.role-dropdown__selected {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
flex: 1;
}
.role-dropdown__name {
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: var(--color-heading);
}
.role-dropdown__desc {
font-size: 12.5px;
font-weight: 400;
line-height: 1.3;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.role-dropdown__chevron {
flex-shrink: 0;
color: var(--color-text-muted);
transition: transform 160ms ease;
}
.role-dropdown.is-open .role-dropdown__chevron { transform: rotate(180deg); }
.role-dropdown__menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 30;
margin: 0;
padding: 6px;
list-style: none;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(20, 18, 40, 0.12);
}
.role-dropdown__option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
outline: none;
transition: background-color 100ms ease;
}
.role-dropdown__option:hover,
.role-dropdown__option:focus-visible { background: rgba(130, 71, 255, 0.08); }
.role-dropdown__option.is-selected { background: rgba(130, 71, 255, 0.10); }
.role-dropdown__option .role-dropdown__name {
font-size: 15px;
font-weight: 600;
color: var(--color-heading);
}
.role-dropdown__option .role-dropdown__desc {
font-size: 12.5px;
font-weight: 400;
color: var(--color-text-muted);
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* ----------------------------------------------------------------
Custom broker dropdown (Deliver leads — with pending count bubble)
---------------------------------------------------------------- */
.broker-dd {
position: relative;
width: 100%;
}
.sr-only-select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.broker-dd__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 10px 14px;
background: var(--color-white);
border: 1.5px solid var(--color-border);
border-radius: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 15px;
color: var(--color-heading);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.broker-dd__trigger:hover { border-color: #b5b1c8; }
.broker-dd.is-open .broker-dd__trigger,
.broker-dd__trigger:focus-visible {
outline: none;
border-color: var(--color-brand-purple);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.12);
}
.broker-dd__selected {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.broker-dd__selected.is-placeholder { color: var(--color-text-muted); }
.broker-dd__chevron {
flex-shrink: 0;
color: var(--color-text-muted);
transition: transform 160ms ease;
}
.broker-dd.is-open .broker-dd__chevron { transform: rotate(180deg); }
.broker-dd__menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 30;
margin: 0;
padding: 6px;
list-style: none;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(20, 18, 40, 0.12);
max-height: 280px;
overflow-y: auto;
}
.broker-dd__option {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
outline: none;
transition: background-color 100ms ease;
}
.broker-dd__option:hover,
.broker-dd__option:focus-visible { background: rgba(130, 71, 255, 0.08); }
.broker-dd__option.is-selected { background: rgba(130, 71, 255, 0.10); }
.broker-dd__name {
flex: 0 1 auto;
min-width: 0;
font-size: 14.5px;
font-weight: 500;
color: var(--color-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0;
}
.broker-dd__bubble {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--color-brand-purple, #8247FF);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.account-form__actions {
display: flex;
gap: 12px;
align-items: center;
margin-top: 8px;
flex-wrap: wrap;
}
.account-rule {
border: 0;
border-top: 1px solid var(--color-border);
margin: 22px 0;
}
.account-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-card);
}
.stat-card__label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 8px;
}
.stat-card__value {
display: block;
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0;
line-height: 1.1;
}
.stat-card__meta {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin: 6px 0 0;
}
.account-link {
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: var(--color-brand-purple);
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.account-link:hover { text-decoration: underline; }
.account-link--danger { color: #b91c1c; }
.empty-state {
text-align: center;
padding: 40px 24px;
color: var(--color-text-muted);
}
.empty-state__icon {
width: 48px;
height: 48px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-bg-page);
color: var(--color-text-faint);
}
.empty-state h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--color-heading);
margin: 0 0 6px;
}
.empty-state p {
font-size: var(--text-sm);
margin: 0 0 16px;
}
.field__hint {
font-size: 12px;
color: var(--color-text-muted);
margin: 4px 0 0;
}
/* ---- Cards (saved payment methods) ---- */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.card-item {
position: relative;
padding: 22px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #1A1240 0%, #2D1B69 50%, #4A4FE0 100%);
color: var(--color-white);
box-shadow: 0 8px 24px -8px rgba(26, 18, 64, 0.30);
overflow: hidden;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-item::before {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(160, 111, 255, 0.40) 0%, transparent 70%);
pointer-events: none;
}
.card-item--default {
background: linear-gradient(135deg, #4A4FE0 0%, #8247FF 50%, #A06FFF 100%);
}
.card-item__top {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.card-item__brand {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.card-item__badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.20);
color: var(--color-white);
}
.card-item__num {
font-family: 'SF Mono', Menlo, monospace;
font-size: 18px;
letter-spacing: 0.08em;
margin: 16px 0 0;
position: relative;
z-index: 1;
}
.card-item__meta {
display: flex;
justify-content: space-between;
align-items: end;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
position: relative;
z-index: 1;
}
.card-item__meta strong {
display: block;
font-weight: 600;
font-size: 13px;
color: var(--color-white);
margin-top: 2px;
letter-spacing: 0.02em;
}
.card-item__addr {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-size: 12px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.82);
position: relative;
z-index: 1;
}
.card-item__addr-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.62);
margin-bottom: 2px;
}
.acc-modal__section-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--smca-ink, #1F1B2D);
margin: 20px 0 8px;
padding-top: 16px;
border-top: 1px solid rgba(31, 27, 45, 0.08);
}
.card-item__actions {
display: flex;
gap: 14px;
margin-top: 12px;
font-size: 12px;
position: relative;
z-index: 1;
}
.card-item__actions button {
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.85);
font: inherit;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
padding: 0;
}
.card-item__actions button:hover { color: var(--color-white); text-decoration: underline; }
/* ---- Orders ---- */
.orders-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.orders-list--compact .order-row { padding: 16px 18px; }
.order-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px 22px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.order-row:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-card);
}
.order-row__main { flex: 1; min-width: 0; }
.order-row__top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.order-row__id {
font-family: 'SF Mono', Menlo, monospace;
font-size: 13px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: 0.02em;
}
.order-row__status {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: var(--color-bg-page);
color: var(--color-text-muted);
}
.order-row__status--delivered {
background: rgba(22, 163, 74, 0.10);
color: #15803d;
}
.order-row__status--processing {
background: rgba(234, 179, 8, 0.12);
color: #a16207;
}
.order-row__status--cancelled {
background: rgba(220, 38, 38, 0.10);
color: #b91c1c;
}
.order-row__status--unpaid {
background: rgba(220, 38, 38, 0.10);
color: #b91c1c;
}
.order-row__status--paid {
background: rgba(22, 163, 74, 0.10);
color: #15803d;
}
.order-row__items {
font-size: var(--text-sm);
color: var(--color-heading);
font-weight: 500;
margin: 2px 0;
}
.order-row__qty {
color: var(--color-text-muted);
font-weight: 400;
}
.order-row__meta {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
.order-row__side {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.order-row__total {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.01em;
}
/* ---- Subscriptions ---- */
.subs-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sub-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px 22px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sub-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
.sub-row--cancelled { opacity: 0.62; }
.sub-row__main { flex: 1; min-width: 0; }
.sub-row__top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.sub-row__top h4 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-heading);
margin: 0;
}
.sub-row__cadence {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: var(--gradient-brand-soft);
color: var(--color-brand-purple);
}
.sub-row__meta, .sub-row__next {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
.sub-row__cancelled-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: rgba(220, 38, 38, 0.10);
color: #b91c1c;
}
.sub-row__side {
text-align: right;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.sub-row__side strong {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.01em;
}
/* ---- Nav user pill (signed-in nav slot) ---- */
.nav-user {
position: relative;
}
.nav-link--signin {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-heading);
text-decoration: none;
padding: 8px 4px;
letter-spacing: -0.005em;
}
.nav-link--signin:hover { color: var(--color-brand-purple); }
.nav-user__trigger {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 6px;
background: var(--color-white);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-pill);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-heading);
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-user__trigger:hover { border-color: var(--color-heading); }
.nav-user.is-open .nav-user__trigger {
border-color: var(--color-brand-purple);
box-shadow: 0 0 0 4px rgba(130, 71, 255, 0.10);
}
.nav-user__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--gradient-brand);
color: var(--color-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.nav-user__name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-user__chev {
width: 12px;
height: 12px;
color: var(--color-text-muted);
transition: transform var(--transition-fast);
}
.nav-user.is-open .nav-user__chev { transform: rotate(180deg); }
.nav-user__menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 260px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 8px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
z-index: 60;
}
.nav-user.is-open .nav-user__menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-user__head {
padding: 10px 12px 12px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 6px;
}
.nav-user__head-name {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-heading);
margin: 0;
}
.nav-user__head-email {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
word-break: break-all;
}
.nav-user__menu a, .nav-user__signout {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
border-radius: var(--radius-md);
background: transparent;
border: 0;
font-family: inherit;
width: 100%;
text-align: left;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-user__menu a:hover, .nav-user__signout:hover {
background: var(--color-bg-page);
color: var(--color-heading);
}
.nav-user__signout {
margin-top: 4px;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-md) var(--radius-md);
padding-top: 12px;
color: var(--color-text-muted);
}
.nav-user__signout:hover { color: #b91c1c; }
/* ---- Modals (account / cards) ---- */
body.acc-modal-open { overflow: hidden; }
.acc-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.acc-modal.is-open { display: flex; }
.acc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 10, 30, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.acc-modal__panel {
position: relative;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 32px;
box-shadow: var(--shadow-lg);
animation: accModalIn 240ms var(--ease-out);
}
.acc-modal__panel--narrow { max-width: 440px; }
@keyframes accModalIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.acc-modal__panel h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-heading);
margin: 0 0 6px;
}
/* Decision modal title uses — mirror the h3 styling so the title
doesn't crash into the body paragraph. */
.acc-modal__panel h2 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-heading);
margin: 0 0 10px;
}
.acc-modal__panel > p,
.acc-modal__panel [data-decision-body] {
font-size: 14px;
line-height: 1.55;
color: var(--color-text-muted);
margin: 0 0 18px;
}
.acc-modal__sub {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0 0 22px;
}
.acc-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: var(--color-bg-page);
border: 0;
border-radius: 50%;
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.acc-modal__close:hover { background: var(--color-border); color: var(--color-heading); }
.acc-modal__actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 8px;
flex-wrap: wrap;
}
/* ---- Btn variants used in account ---- */
.btn-danger {
background: #dc2626;
color: var(--color-white);
box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.45);
}
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); }
.btn-warning {
background: #f97316;
color: var(--color-white);
box-shadow: 0 6px 20px -6px rgba(249, 115, 22, 0.45);
}
.btn-warning:hover { background: #ea580c; transform: translateY(-1px); }
.btn-success {
background: #16a34a;
color: var(--color-white);
box-shadow: 0 6px 20px -6px rgba(22, 163, 74, 0.45);
}
.btn-success:hover { background: #15803d; transform: translateY(-1px); }
/* ---- Responsive ---- */
@media (max-width: 900px) {
.account-layout { grid-template-columns: 1fr; }
.account-side { position: static; }
.account-nav {
flex-direction: row;
overflow-x: auto;
gap: 4px;
padding-bottom: 4px;
}
.account-nav__item { white-space: nowrap; flex-shrink: 0; }
.account-nav__signout { border-top: 0; padding-top: 11px; }
}
@media (max-width: 600px) {
.account-card { padding: 22px 18px; }
.account-form__row { grid-template-columns: 1fr; }
.order-row, .sub-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.order-row__side, .sub-row__side {
align-items: flex-start;
text-align: left;
}
.nav-user__name { display: none; }
}
/* ============================================================
Checkout auth gate + signed-in strip + success nudge
============================================================ */
.checkout-auth-gate {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 28px 32px;
margin-bottom: 28px;
background: linear-gradient(135deg, rgba(74, 79, 224, 0.06) 0%, rgba(130, 71, 255, 0.08) 100%);
border: 1px solid rgba(130, 71, 255, 0.20);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.checkout-auth-gate::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--gradient-brand);
}
.checkout-auth-gate__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--gradient-brand);
color: var(--color-white);
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 6px 20px -4px rgba(130, 71, 255, 0.40);
}
.checkout-auth-gate__icon svg { width: 22px; height: 22px; }
.checkout-auth-gate__body h2 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-heading);
margin: 0 0 4px;
}
.checkout-auth-gate__body p {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
max-width: 60ch;
line-height: 1.5;
}
.checkout-auth-gate__actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
@media (max-width: 820px) {
.checkout-auth-gate {
grid-template-columns: 1fr;
gap: 16px;
padding: 22px;
}
.checkout-auth-gate__actions { flex-wrap: wrap; }
.checkout-auth-gate__actions .btn { flex: 1 1 calc(50% - 5px); }
}
/* Soft account nudge for guest checkout */
.checkout-account-nudge {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 18px;
margin-bottom: 22px;
background: linear-gradient(135deg, rgba(106, 73, 240, 0.05), rgba(106, 73, 240, 0.01));
border: 1px solid rgba(106, 73, 240, 0.18);
border-radius: 14px;
}
.checkout-account-nudge__body { flex: 1 1 auto; min-width: 0; }
.checkout-account-nudge__body strong { display: block; font-size: 14px; color: var(--ink, #1a1a1a); margin-bottom: 4px; }
.checkout-account-nudge__body p { font-size: 13px; color: var(--muted, #5a5a66); margin: 0; line-height: 1.5; }
.checkout-account-nudge__actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 720px) {
.checkout-account-nudge { flex-direction: column; align-items: stretch; gap: 12px; }
.checkout-account-nudge__actions { flex-wrap: wrap; }
.checkout-account-nudge__actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}
/* Signed-in strip */
.checkout-signed-in {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-bottom: 22px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.checkout-signed-in__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--gradient-brand);
color: var(--color-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.checkout-signed-in__body {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.checkout-signed-in__body strong {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.005em;
}
.checkout-signed-in__body .muted {
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.checkout-signed-in__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-brand-purple);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.checkout-signed-in__link:hover { text-decoration: underline; }
/* Disabled submit (when auth-gated) */
.checkout-submit.is-disabled,
.checkout-submit:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* Success nudge */
.checkout-success__nudge {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
margin-top: 32px;
padding: 22px 26px;
background: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-align: left;
}
.checkout-success__nudge-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gradient-brand-soft);
color: var(--color-brand-purple);
display: grid;
place-items: center;
flex-shrink: 0;
}
.checkout-success__nudge-icon svg { width: 20px; height: 20px; }
.checkout-success__nudge-body strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
color: var(--color-heading);
margin-bottom: 2px;
}
.checkout-success__nudge-body p {
font-size: 13px;
color: var(--color-text-muted);
margin: 0;
line-height: 1.45;
}
.checkout-success__nudge .btn { flex-shrink: 0; }
@media (max-width: 600px) {
.checkout-success__nudge {
grid-template-columns: 1fr;
text-align: center;
}
.checkout-success__nudge-icon { margin: 0 auto; }
.checkout-success__nudge .btn { justify-self: center; }
}
/* ============================================================
Admin Portal styling
============================================================ */
.account-page.is-admin {
background:
radial-gradient(60% 50% at 0% 0%, rgba(130, 71, 255, 0.06) 0%, transparent 60%),
var(--color-bg-page);
}
.admin-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--gradient-brand);
color: var(--color-white);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
vertical-align: 4px;
margin-left: 12px;
box-shadow: 0 4px 12px -2px rgba(130, 71, 255, 0.40);
}
.admin-badge svg { width: 11px; height: 11px; }
.admin-table-wrap {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow-x: auto;
overflow-y: hidden;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.admin-table thead th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 14px 18px;
background: var(--color-bg-page);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.admin-table tbody td {
padding: 16px 18px;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
color: var(--color-text);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgba(130, 71, 255, 0.03); }
.admin-table .admin-cell-strong {
font-weight: 600;
color: var(--color-heading);
}
.admin-table .admin-cell-muted {
color: var(--color-text-muted);
font-size: 12px;
}
.admin-table .admin-cell-mono {
font-family: 'SF Mono', Menlo, monospace;
font-size: 12px;
letter-spacing: 0.02em;
}
.admin-table .admin-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.admin-table .admin-actions .btn-sm {
padding: 7px 14px;
font-size: 12px;
}
.admin-status {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-pill);
/* Status pills must never break mid-word (e.g. "OPE / N") even when squeezed in a narrow table cell. */
white-space: nowrap;
width: max-content;
max-width: 100%;
}
.admin-status--active { background: rgba(22, 163, 74, 0.10); color: #15803d; }
.admin-status--processing { background: rgba(234, 179, 8, 0.12); color: #a16207; }
.admin-status--delivered { background: rgba(22, 163, 74, 0.10); color: #15803d; }
.admin-status--cancelled { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.admin-status--refunded { background: rgba(75, 85, 99, 0.10); color: #4b5563; }
.admin-empty {
padding: 56px 24px;
text-align: center;
color: var(--color-text-muted);
}
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.admin-confirm-input {
width: 100%;
padding: 12px 14px;
margin: 12px 0 4px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-family: 'SF Mono', Menlo, monospace;
font-size: var(--text-base);
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--color-bg-page);
}
.admin-confirm-input:focus {
outline: none;
border-color: #dc2626;
background: var(--color-white);
}
.admin-confirm-hint {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
/* Delete-user signup blocklist options */
.admin-block-options {
margin: 14px 0 16px;
padding: 12px 14px;
border: 1px solid var(--color-border, #ececf3);
border-radius: 10px;
background: #FAFAFD;
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-block-options__title {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-heading, #1f1b2d);
}
.admin-block-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
}
.admin-block-row input[type="checkbox"] {
margin-top: 2px;
width: 16px;
height: 16px;
accent-color: #8247FF;
cursor: pointer;
flex-shrink: 0;
}
.admin-block-row strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-heading, #1f1b2d);
}
.admin-block-row__sub {
display: block;
font-size: 12px;
color: var(--color-text-muted, #6e6a82);
margin-top: 1px;
word-break: break-word;
}
.admin-block-row.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.admin-block-row.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.admin-block-row__note {
margin: 0;
font-size: 11px;
line-height: 1.4;
color: var(--color-text-muted, #6e6a82);
font-style: italic;
}
@media (max-width: 720px) {
.admin-table thead { display: none; }
.admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
.admin-table tr {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
}
.admin-table tbody tr:last-child { border-bottom: 0; }
.admin-table td {
padding: 4px 0;
border-bottom: 0;
}
.admin-table td[data-label]::before {
content: attr(data-label) " · ";
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-right: 6px;
}
.admin-table .admin-actions { justify-content: flex-start; margin-top: 10px; }
}
/* Nav user admin variant */
.nav-user--admin .nav-user__trigger {
border-color: rgba(130, 71, 255, 0.40);
background: linear-gradient(135deg, rgba(130, 71, 255, 0.04), rgba(74, 79, 224, 0.04));
}
.nav-user__admin-tag {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: var(--gradient-brand);
color: var(--color-white);
margin-left: 2px;
box-shadow: 0 2px 6px -1px rgba(130, 71, 255, 0.40);
}
.nav-user__head-tag {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--gradient-brand);
color: var(--color-white);
margin-left: 6px;
vertical-align: 2px;
}
/* Ensure [hidden] always wins over display rules for admin/user toggling */
[hidden] { display: none !important; }
/* The hero ".stat-card" floats and rotates AND uses flex row — fully reset inside dashboards */
.account-stats .stat-card,
.admin-stats .stat-card {
animation: none !important;
transform: none !important;
--rot: 0deg;
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
align-items: initial !important;
gap: 0 !important;
z-index: auto !important;
}
.account-stats .stat-card__label,
.admin-stats .stat-card__label {
display: block !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--color-text-muted) !important;
margin: 0 0 8px !important;
}
.account-stats .stat-card__value,
.admin-stats .stat-card__value {
display: block !important;
font-family: var(--font-display);
font-size: 28px !important;
font-weight: 600 !important;
color: var(--color-heading) !important;
margin: 0 !important;
line-height: 1.1 !important;
}
.account-stats .stat-card__meta,
.admin-stats .stat-card__meta {
display: block !important;
font-size: 12px !important;
color: var(--color-text-muted) !important;
margin: 6px 0 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
/* ---------- Demo-account quick logins (login page) ---------- */
.demo-logins {
margin-top: 24px;
padding: 16px;
border: 1px dashed var(--color-border, #e5e7eb);
border-radius: var(--radius-md, 12px);
background: var(--color-surface-2, #fafaff);
}
.demo-logins__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.demo-logins__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted, #6b7280);
}
.demo-logins__hint {
font-size: 12px;
color: var(--color-text-muted, #6b7280);
}
.demo-logins__list {
display: grid;
gap: 8px;
}
.demo-login {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 14px;
background: var(--color-white, #fff);
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-md, 10px);
cursor: pointer;
text-align: left;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
font-family: inherit;
}
.demo-login:hover {
background: var(--color-surface-2, #f5f5fb);
border-color: var(--color-brand, #8247ff);
transform: translateY(-1px);
}
.demo-login__role {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--radius-pill, 999px);
background: var(--color-surface-2, #f1f1f8);
color: var(--color-text, #1f2937);
}
.demo-login--admin .demo-login__role {
background: var(--gradient-brand, linear-gradient(135deg, #8247ff, #b794f4));
color: var(--color-white, #fff);
}
.demo-login__email {
font-size: 13px;
color: var(--color-text, #1f2937);
font-variant-numeric: tabular-nums;
}
/* ============================================================
ADMIN PORTAL — BANNER + TOOLBAR
============================================================ */
.admin-banner {
background: linear-gradient(95deg, #1F1B2D 0%, #4A4FE0 55%, #8247FF 100%);
color: #fff;
padding: 14px 0;
box-shadow: 0 2px 0 rgba(130,71,255,0.18), 0 8px 24px rgba(31,27,45,0.18);
position: fixed;
top: 72px; /* sits below fixed nav */
left: 0;
right: 0;
z-index: 90;
}
/* Account page pushes content down so admin banner is visible above the welcome row */
html.is-admin .account-page { padding-top: 120px; }
/* Admin-banner shift when the announcement bar is visible is handled by
CSS variable --smca-ann-h further down (set by JS to the actual bar height). */
@media (max-width: 768px) {
.admin-banner { top: 64px; }
html.is-admin .account-page { padding-top: 108px; }
}
.admin-banner__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.admin-banner__left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.admin-banner__dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #4ade80;
box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
flex-shrink: 0;
animation: adminPulse 2.4s ease-in-out infinite;
}
@keyframes adminPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(74,222,128,0.18); }
50% { box-shadow: 0 0 0 8px rgba(74,222,128,0.05); }
}
.admin-banner__title {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.18em;
color: #fff;
}
.admin-banner__sub {
font-size: 13px;
color: rgba(255,255,255,0.78);
font-weight: 500;
}
.admin-banner__right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.admin-banner__chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
background: rgba(255,255,255,0.06);
}
.admin-banner__switch {
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
transition: background .15s ease;
}
.admin-banner__switch:hover { background: rgba(255,255,255,0.22); }
.admin-banner__reseed {
cursor: pointer;
font-family: inherit;
background: rgba(255,200,80,0.22);
border-color: rgba(255,200,80,0.45);
}
.admin-banner__reseed:hover { background: rgba(255,200,80,0.38); }
@media (max-width: 640px) {
.admin-banner__sub { display: none; }
.admin-banner__chip { display: none; }
}
/* Admin page tint when admin mode active */
html.is-admin .account-page {
background:
radial-gradient(1200px 400px at 90% -10%, rgba(130,71,255,0.06), transparent 60%),
radial-gradient(800px 320px at -10% 10%, rgba(74,79,224,0.05), transparent 60%),
#fafaff;
}
html.is-admin .account-head h1 .nav-user__head-tag {
background: linear-gradient(135deg, #8247FF, #4A4FE0);
color: #fff;
padding: 4px 10px;
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 800;
border-radius: 999px;
vertical-align: middle;
margin-left: 8px;
}
/* Admin toolbar (search + filters) */
.admin-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 16px;
padding: 12px;
background: #fff;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 12px;
}
.admin-search {
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 340px;
min-width: 220px;
max-width: 360px;
padding: 8px 12px;
background: var(--color-surface, #f8f9fc);
border: 1.5px solid var(--color-border, #e5e7eb);
border-radius: 10px;
color: #6b7280;
transition: border-color .15s ease, background .15s ease;
}
.admin-search:focus-within {
border-color: #8247FF;
background: #fff;
box-shadow: 0 0 0 3px rgba(130,71,255,0.12);
}
.admin-search input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
font-size: 14px;
color: #1F1B2D;
font-family: inherit;
}
.admin-search input::placeholder { color: #9ca3af; }
.admin-toolbar__filters {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.admin-chip {
appearance: none;
background: var(--color-surface, #f8f9fc);
border: 1.5px solid var(--color-border, #e5e7eb);
color: #4b5563;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: all .15s ease;
}
.admin-chip:hover { color: #1F1B2D; border-color: #cbd5e1; }
.admin-chip.is-active {
background: linear-gradient(135deg, #8247FF, #4A4FE0);
border-color: transparent;
color: #fff;
}
.admin-toolbar__hint {
font-size: 12px;
color: #6b7280;
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* =========================================================
Admin v2 — Toasts, Replacements, Team & Permissions
========================================================= */
/* Toast notifications */
.admin-toast {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 2000;
min-width: 240px;
max-width: 360px;
padding: 14px 18px;
border-radius: 12px;
background: #1F1B2D;
color: #fff;
font-size: 14px;
font-weight: 500;
box-shadow: 0 12px 32px rgba(31, 27, 45, 0.28), 0 2px 6px rgba(31, 27, 45, 0.16);
transform: translateY(8px);
opacity: 0;
transition: opacity 180ms ease, transform 180ms ease;
pointer-events: none;
}
.admin-toast.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.admin-toast--success {
background: linear-gradient(135deg, #4A4FE0, #8247FF);
color: #fff;
}
.admin-toast--warn {
background: #B45309;
color: #fff;
}
.admin-toast--error {
background: #B91C1C;
color: #fff;
}
/* Replacements: broker policy callout */
.replacement-policy {
margin: 0 0 24px;
padding: 20px 22px;
border-radius: 14px;
background: #F1ECFF;
border: 1px solid rgba(130, 71, 255, 0.18);
color: #1F1B2D;
}
.replacement-policy h3 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
color: #4A4FE0;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.replacement-policy ul {
margin: 0;
padding-left: 18px;
}
.replacement-policy li {
margin-bottom: 6px;
font-size: 14px;
line-height: 1.55;
}
.replacement-policy li:last-child { margin-bottom: 0; }
.replacement-policy p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #1F1B2D;
}
.replacement-policy strong { color: #1F1B2D; }
/* Ack checkbox */
.replacement-ack {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 4px 0 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(130, 71, 255, 0.06);
border: 1px solid rgba(130, 71, 255, 0.18);
font-size: 13px;
line-height: 1.5;
color: #1F1B2D;
cursor: pointer;
}
.replacement-ack input[type="checkbox"] {
margin-top: 2px;
width: 16px;
height: 16px;
accent-color: #8247FF;
flex-shrink: 0;
}
/* Nav badge — small purple dot/count beside nav items */
.nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
margin-left: 8px;
border-radius: 9px;
background: #8247FF;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
vertical-align: middle;
}
.nav-badge:empty { display: none; }
/* Replacement status pills (extends .admin-status) */
.admin-status--rep-open {
background: rgba(234, 179, 8, 0.14);
color: #92400e;
}
.admin-status--rep-approved {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.admin-status--rep-denied {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
/* Replacements admin table — slightly tighter, accent border */
.admin-table--rep th,
.admin-table--rep td {
vertical-align: top;
}
.admin-table--rep .rep-note {
display: block;
margin-top: 4px;
font-size: 12px;
color: #6b6478;
max-width: 280px;
line-height: 1.45;
}
.admin-table--rep .rep-file-link {
color: #4A4FE0;
font-weight: 600;
text-decoration: none;
}
.admin-table--rep .rep-file-link:hover { text-decoration: underline; }
/* Team & permissions grid */
.perms-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 18px;
}
@media (max-width: 900px) {
.perms-grid { grid-template-columns: 1fr; }
}
.perms-card {
padding: 18px 20px;
border-radius: 14px;
border: 1px solid rgba(31, 27, 45, 0.08);
background: #fff;
box-shadow: 0 1px 0 rgba(31, 27, 45, 0.02);
display: flex;
flex-direction: column;
gap: 12px;
}
.perms-card h4 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #1F1B2D;
display: flex;
align-items: center;
gap: 8px;
}
.perms-card p {
margin: 0;
font-size: 13px;
color: #6b6478;
line-height: 1.5;
}
/* Role badges */
.perms-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.perms-badge--viewer {
background: rgba(75, 85, 99, 0.10);
color: #4b5563;
}
.perms-badge--manager {
background: rgba(74, 79, 224, 0.12);
color: #4A4FE0;
}
.perms-badge--full {
background: linear-gradient(135deg, #4A4FE0, #8247FF);
color: #fff;
}
/* Permission list (check/x) */
.perms-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.perms-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.5;
color: #1F1B2D;
}
.perms-list li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
background-position: center;
background-repeat: no-repeat;
background-size: 10px 10px;
}
.perms-list li::before {
background-color: rgba(22, 163, 74, 0.14);
background-image: url("data:image/svg+xml;utf8,");
}
.perms-list li.is-off {
color: #8a8395;
}
.perms-list li.is-off::before {
background-color: rgba(220, 38, 38, 0.10);
background-image: url("data:image/svg+xml;utf8,");
}
/* Range filter chip variant — reuse rep filter active style */
[data-range-filter].is-active,
[data-rep-filter].is-active {
background: linear-gradient(135deg, #4A4FE0, #8247FF);
color: #fff;
border-color: transparent;
}
/* Decision modal helper class (uses existing modal styles if any) */
.rep-decision-modal__body { font-size: 14px; line-height: 1.55; color: #1F1B2D; }
.rep-decision-modal__body p { margin: 0 0 10px; }
.rep-decision-modal__body label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0 4px; color: #1F1B2D; }
.rep-decision-modal__body textarea { width: 100%; min-height: 80px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(31, 27, 45, 0.14); font-family: inherit; font-size: 13px; resize: vertical; }
/* ============================================================
ANNOUNCEMENT BAR (site-wide, top of body)
============================================================ */
.announcement-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: linear-gradient(90deg, #4A4FE0 0%, #8247FF 55%, #A06FFF 100%);
color: #fff;
font-weight: 500;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.01em;
z-index: 101; /* sits above .nav (z-index: 100) so both stack at top together */
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 12px rgba(130, 71, 255, 0.25);
}
/* When announcement is shown, push body content down so it isn't covered
by the fixed bar + nav. The nav itself is already offset via --smca-ann-h. */
html.has-announcement body { padding-top: var(--smca-ann-h, 46px); }
.announcement-bar__inner {
max-width: 1200px;
margin: 0 auto;
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 18px;
flex-wrap: wrap;
position: relative;
}
.announcement-bar__text { display: inline-block; }
.announcement-bar__cta {
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
transition: background-color .15s ease;
white-space: nowrap;
}
.announcement-bar__cta:hover { background: rgba(255,255,255,0.28); }
.announcement-bar__close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 0;
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s ease;
}
.announcement-bar__close:hover { background: rgba(255,255,255,0.24); }
/* Close button removed — hide it if any cached markup still renders it. */
.announcement-bar__close { display: none !important; }
@media (max-width: 640px) {
.announcement-bar { font-size: 13px; }
.announcement-bar__inner { padding: 9px 16px; gap: 10px; }
}
/* Admin preview card (inside the Announcement bar panel) */
.announcement-preview {
background: #F1ECFF;
border: 1px solid rgba(130, 71, 255, 0.18);
border-radius: 10px;
padding: 14px;
display: flex;
justify-content: center;
}
.announcement-preview.is-empty {
background: #FAFAFC;
color: #6b6b7a;
font-size: 13px;
font-style: italic;
}
.announcement-preview__bar {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 18px;
border-radius: 999px;
background: linear-gradient(90deg, #4A4FE0 0%, #8247FF 55%, #A06FFF 100%);
color: #fff;
font-size: 13.5px;
font-weight: 500;
max-width: 100%;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.announcement-preview__cta {
padding: 2px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
font-weight: 700;
font-size: 12.5px;
}
.announcement-preview__placeholder { font-size: 13px; }
/* ============================================================
ADMIN: PREVIEW-AS ROLE SWITCHER (in admin banner)
============================================================ */
.admin-banner__preview {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
margin-right: 10px;
}
.admin-banner__preview-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin: 0;
}
.admin-banner__preview-select {
background: transparent;
border: 0;
color: #fff;
font-size: 12.5px;
font-weight: 600;
padding: 2px 4px;
cursor: pointer;
outline: none;
}
.admin-banner__preview-select option { color: #1F1B2D; background: #fff; }
@media (max-width: 720px) {
.admin-banner__preview-label { display: none; }
.admin-banner__preview { padding: 4px 8px; }
}
/* ============================================================
ROLE-PREVIEW GATING
Three modes via body class: is-preview-full | is-preview-manager | is-preview-viewer
Elements opt in to a minimum role via data-role-min="full|manager|viewer".
- Viewer: hide everything except viewer-allowed (nav + panels)
- Manager: hide full-only elements (Team, Discounts, destructive actions)
- Full: show everything
============================================================ */
/* ---- NAV + PANEL gating by data-role-min ---- */
body.is-preview-manager [data-role-min="full"] { display: none !important; }
body.is-preview-viewer [data-role-min="full"],
body.is-preview-viewer [data-role-min="manager"] { display: none !important; }
/* ---- ACTION BUTTON gating ----
data-permaction => any write/edit action (hidden for Viewer)
data-managers-action => actions only Full admin can do (hidden for Manager + Viewer) */
body.is-preview-viewer [data-permaction] { display: none !important; }
body.is-preview-manager [data-managers-action] { display: none !important; }
body.is-preview-viewer [data-managers-action] { display: none !important; }
/* ---- VIEWER: also lock form inputs read-only/disabled ---- */
body.is-preview-viewer .admin-form input:not([type="hidden"]):not([type="search"]),
body.is-preview-viewer .admin-form textarea,
body.is-preview-viewer .admin-form select {
pointer-events: none;
background: #f4f2f9 !important;
color: #8a8595 !important;
border-color: #e6e2f0 !important;
cursor: not-allowed;
}
body.is-preview-viewer .admin-form .smca-switch { pointer-events: none; opacity: 0.55; }
/* ---- VIEWER: muted hint when an actions row is empty ---- */
body.is-preview-viewer .admin-actions:empty::after,
body.is-preview-viewer .admin-actions:not(:has(> :not([hidden]))):after {
content: 'View only';
color: #9999a5;
font-size: 12px;
font-style: italic;
}
/* ---- ROLE PREVIEW BANNER (top of admin page) ---- */
.role-preview-banner {
display: none;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin: 0 0 18px;
border-radius: 12px;
background: linear-gradient(135deg, #fff6e6, #fff0d6);
border: 1px solid #f3c97c;
color: #6b4a14;
font-size: 14px;
}
body.is-preview-manager .role-preview-banner[data-role-preview-banner],
body.is-preview-viewer .role-preview-banner[data-role-preview-banner] {
display: flex;
}
body.is-preview-viewer .role-preview-banner {
background: linear-gradient(135deg, #eef0ff, #e3e5ff);
border-color: #b9bdf5;
color: #2f348a;
}
.role-preview-banner__icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.7);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.role-preview-banner__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.role-preview-banner__body strong { font-weight: 700; font-size: 14px; }
.role-preview-banner__body span { font-size: 13px; opacity: 0.85; }
.role-preview-banner__reset {
background: rgba(255,255,255,0.85);
border: 1px solid rgba(0,0,0,0.08);
color: inherit;
font-weight: 600;
font-size: 13px;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
flex-shrink: 0;
}
.role-preview-banner__reset:hover { background: #fff; }
@media (max-width: 640px) {
.role-preview-banner { flex-wrap: wrap; }
.role-preview-banner__reset { width: 100%; }
}
/* ============================================================
SMCA-SWITCH (toggle for announcement enabled)
============================================================ */
.form-field--toggle { padding: 4px 0; }
.smca-switch {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
}
.smca-switch input { position: absolute; opacity: 0; pointer-events: none; }
.smca-switch__track {
width: 42px;
height: 24px;
border-radius: 999px;
background: #d8d6e0;
position: relative;
transition: background-color .18s ease;
flex-shrink: 0;
}
.smca-switch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
transition: transform .18s ease;
}
.smca-switch input:checked + .smca-switch__track {
background: #8247FF;
}
.smca-switch input:checked + .smca-switch__track .smca-switch__thumb {
transform: translateX(18px);
}
.smca-switch input:focus-visible + .smca-switch__track {
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.30);
}
.smca-switch__label { font-size: 14px; font-weight: 500; color: #2a2535; }
/* ============================================================
DISCOUNT STATUS PILLS
============================================================ */
.disc-status {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
}
.disc-status--active { background: #E4F8EC; color: #137a3a; }
.disc-status--expired { background: #FCE9E9; color: #9c2a2a; }
.disc-status--disabled { background: #ECECF1; color: #5d5b6a; }
/* ============================================================
CHECKOUT: DISCOUNT CODE INPUT
============================================================ */
.checkout-discount {
margin-top: 12px;
padding: 12px;
background: #F8F6FE;
border: 1px solid #E4DDFB;
border-radius: 10px;
}
.checkout-discount__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #5b4ba8;
margin-bottom: 8px;
display: block;
}
.checkout-discount__row {
display: flex;
gap: 8px;
}
.checkout-discount__row input {
flex: 1;
padding: 9px 12px;
border: 1px solid #d6cef2;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.checkout-discount__row input:focus {
outline: none;
border-color: #8247FF;
box-shadow: 0 0 0 3px rgba(130,71,255,0.18);
}
.checkout-discount__btn {
padding: 9px 16px;
border-radius: 8px;
border: 0;
background: #8247FF;
color: #fff;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background-color .15s ease;
}
.checkout-discount__btn:hover { background: #6f3aeb; }
.checkout-discount__btn:disabled { background: #c5bce4; cursor: not-allowed; }
.checkout-discount__feedback {
margin-top: 8px;
font-size: 12.5px;
font-weight: 500;
min-height: 18px;
}
.checkout-discount__feedback.is-success { color: #137a3a; }
.checkout-discount__feedback.is-error { color: #9c2a2a; }
.checkout-discount__applied {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: #E4F8EC;
border: 1px solid #b6e4c6;
border-radius: 8px;
font-size: 13.5px;
font-weight: 600;
color: #137a3a;
}
.checkout-discount__remove {
background: transparent;
border: 0;
color: #137a3a;
font-weight: 700;
font-size: 12px;
text-decoration: underline;
cursor: pointer;
}
.checkout-summary__totals--discount dd { color: #137a3a; font-weight: 700; }
/* Broker-side: replacement download button */
.broker-rep-download {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #F1ECFF;
border: 1px solid #c8b6f7;
border-radius: 6px;
font-size: 12.5px;
font-weight: 600;
color: #4A4FE0;
text-decoration: none;
cursor: pointer;
margin-top: 4px;
}
.broker-rep-download:hover { background: #E4DDFB; }
/* When announcement bar is visible, offset fixed nav by bar height.
The bar sits at top:0 (first body child). The fixed nav must move
down so it doesn't overlap the bar. Body content is not pushed —
the nav is absolutely sized and the page already accounts for nav-
height via hero/section padding. */
html.has-announcement .nav { top: var(--smca-ann-h, 46px); }
html.has-announcement.is-admin .admin-banner { top: calc(var(--smca-ann-h, 46px) + 72px); }
html.has-announcement.is-admin .account-page { padding-top: calc(var(--smca-ann-h, 46px) + 130px); }
@media (max-width: 768px) {
html.has-announcement.is-admin .admin-banner { top: calc(var(--smca-ann-h, 56px) + 64px); }
html.has-announcement.is-admin .account-page { padding-top: calc(var(--smca-ann-h, 56px) + 108px); }
}
/* =================== ADMIN: LIVE CHAT PANEL =================== */
.chat-inbox {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-areas:
"primary how"
"team how";
gap: 24px;
margin-top: 4px;
}
.chat-inbox__primary {
grid-area: primary;
background: linear-gradient(135deg, #4A4FE0 0%, #8247FF 60%, #A06FFF 100%);
color: #fff;
border-radius: 18px;
padding: 28px 28px 24px;
position: relative;
overflow: hidden;
}
.chat-inbox__primary::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 55%),
radial-gradient(circle at 15% 90%, rgba(0,0,0,0.18), transparent 55%);
pointer-events: none;
}
.chat-inbox__primary > * { position: relative; z-index: 1; }
.chat-inbox__primary h3 {
font-family: var(--font-display, inherit);
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: #fff;
}
.chat-inbox__lede {
margin: 0 0 22px;
color: rgba(255,255,255,0.92);
font-size: 15px;
line-height: 1.55;
max-width: 52ch;
}
.chat-inbox__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.chat-inbox__actions .btn--primary {
background: #fff;
color: #4A4FE0;
border: 0;
padding: 11px 20px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: transform .15s ease, box-shadow .15s ease;
}
.chat-inbox__actions .btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.chat-inbox__actions .btn--ghost {
background: rgba(255,255,255,0.14);
color: #fff;
border: 1px solid rgba(255,255,255,0.32);
padding: 11px 20px;
border-radius: 999px;
font-weight: 500;
font-size: 14px;
text-decoration: none;
transition: background .15s ease;
}
.chat-inbox__actions .btn--ghost:hover {
background: rgba(255,255,255,0.24);
}
.chat-inbox__status {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 999px;
padding: 7px 14px 7px 12px;
font-size: 13px;
color: rgba(255,255,255,0.95);
}
.chat-inbox__dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #C8B5FF;
display: inline-block;
}
.chat-inbox__dot[data-state="online"] { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.22); }
.chat-inbox__dot[data-state="away"] { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.22); }
.chat-inbox__dot[data-state="offline"] { background: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,0.20); }
.chat-inbox__dot[data-state="unknown"] { background: #94a3b8; }
.chat-inbox__how,
.chat-inbox__team {
background: #fff;
border: 1px solid #ECE6F9;
border-radius: 18px;
padding: 22px 24px;
}
.chat-inbox__how { grid-area: how; }
.chat-inbox__team { grid-area: team; }
.chat-inbox__how h4,
.chat-inbox__team h4 {
font-family: var(--font-display, inherit);
font-size: 17px;
margin: 0 0 12px;
color: #1F1B2D;
}
.chat-inbox__how ol {
margin: 0 0 12px;
padding-left: 20px;
color: #45405A;
font-size: 14px;
line-height: 1.6;
}
.chat-inbox__how li { margin-bottom: 8px; }
.chat-inbox__how li strong { color: #1F1B2D; }
.chat-inbox__note {
margin: 8px 0 0;
padding: 10px 12px;
background: #F6F1FF;
border-radius: 10px;
font-size: 13px;
color: #4A4FE0;
}
.chat-inbox__team p {
margin: 0 0 12px;
color: #45405A;
font-size: 14px;
line-height: 1.55;
}
.chat-inbox__team .link--purple {
color: #8247FF;
font-weight: 600;
text-decoration: none;
font-size: 14px;
}
.chat-inbox__team .link--purple:hover { text-decoration: underline; }
@media (max-width: 900px) {
.chat-inbox {
grid-template-columns: 1fr;
grid-template-areas:
"primary"
"how"
"team";
}
}
/* Tawk widget brand styling (subtle — keep their default UX but match brand) */
#tawkchat-minified-iframe-element,
iframe[title*="chat" i] {
filter: hue-rotate(0deg);
}
/* ============================================================
RESCHEDULE SUBSCRIPTION MODAL
============================================================ */
.sub-resched-options { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 12px; }
.sub-resched-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border: 1px solid #e6e2f0;
border-radius: 10px;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.sub-resched-row:hover { border-color: #c9c1e3; background: #faf9ff; }
.sub-resched-row input[type="radio"] { margin-top: 4px; accent-color: #8247FF; }
.sub-resched-row__label { display: flex; flex-direction: column; gap: 2px; }
.sub-resched-row__label strong { color: #1F1B2D; font-size: 14px; }
.sub-resched-row__label span { color: #6a6577; font-size: 13px; }
.sub-resched-row:has(input:checked) { border-color: #8247FF; background: #f3eeff; }
.sub-resched-days {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
padding: 8px 16px 0 38px;
transition: opacity .15s ease;
}
.sub-resched-days.is-disabled { opacity: 0.35; pointer-events: none; }
.sub-resched-day {
background: #fff;
border: 1px solid #e6e2f0;
border-radius: 8px;
padding: 10px 4px;
font-weight: 600;
font-size: 13px;
color: #4A4FE0;
cursor: pointer;
transition: all .12s ease;
}
.sub-resched-day:hover { border-color: #8247FF; background: #faf9ff; }
.sub-resched-day.is-selected {
background: #8247FF;
color: #fff;
border-color: #8247FF;
box-shadow: 0 2px 6px rgba(130, 71, 255, 0.25);
}
.sub-resched-preview {
margin: 14px 0 4px;
padding: 10px 14px;
border-radius: 8px;
background: #f1ecff;
color: #4A4FE0;
font-weight: 600;
font-size: 13px;
text-align: center;
}
/* ============================================================
ADMIN ORDER DETAIL MODAL
============================================================ */
.admin-order-view { margin: 16px 0 4px; }
.admin-order-view__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid #ece9f3;
}
.admin-order-view__id { font-size: 15px; font-weight: 600; color: #1F1B2D; }
.admin-order-view__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #ece9f3;
}
.admin-order-view__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
color: #8a8595;
text-transform: uppercase;
margin-bottom: 4px;
}
.admin-order-view__value { font-size: 14px; font-weight: 600; color: #1F1B2D; }
.admin-order-view__refund {
display: inline-block;
margin-top: 6px;
padding: 3px 8px;
border-radius: 6px;
background: #fde8e8;
color: #9b2c2c;
font-size: 12px;
font-weight: 600;
}
.admin-order-view__items { padding-top: 14px; }
.admin-order-view__items-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.admin-order-view__items-table th,
.admin-order-view__items-table td {
padding: 8px 6px;
border-bottom: 1px solid #f3f1f7;
text-align: left;
}
.admin-order-view__items-table th { color: #8a8595; font-weight: 600; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
.admin-order-view__items-table .r { text-align: right; }
.admin-order-view__items-table tfoot td { border-bottom: 0; padding-top: 12px; font-size: 14px; }
@media (max-width: 640px) {
.admin-order-view__grid { grid-template-columns: 1fr; gap: 14px; }
.sub-resched-days { grid-template-columns: repeat(5, 1fr); padding-left: 0; }
}
/* =========================================================================
ADMIN DASHBOARD REBUILD (May 27 2026)
Modern card-grid dashboard look. Triggered by html.is-admin.
Off-white page bg, white cards w/ soft shadow, icon-rail sidebar.
========================================================================= */
html.is-admin {
--admin-bg: #f6f5fb;
--admin-card-bg: #ffffff;
--admin-card-border: #ececf3;
--admin-card-shadow: 0 1px 2px rgba(28, 25, 56, 0.04), 0 4px 16px rgba(28, 25, 56, 0.04);
--admin-card-shadow-hover: 0 1px 2px rgba(28, 25, 56, 0.06), 0 8px 28px rgba(28, 25, 56, 0.08);
--admin-text-muted: #6e6a82;
--admin-text-faint: #9b97aa;
--admin-divider: #f0eff5;
--admin-positive: #16a34a;
--admin-negative: #dc2626;
--admin-rail-w: 64px;
--admin-side-w: 240px;
}
/* Page bg */
html.is-admin .account-page { background: var(--admin-bg) !important; }
/* Layout: rail sidebar by default, expandable */
html.is-admin .account-layout {
grid-template-columns: var(--admin-rail-w) 1fr;
gap: 24px;
transition: grid-template-columns 220ms ease;
}
html.is-admin.admin-side-open .account-layout {
grid-template-columns: var(--admin-side-w) 1fr;
}
/* Sidebar — icon rail */
html.is-admin .account-side {
position: sticky;
top: 96px;
padding: 10px 8px;
background: var(--admin-card-bg);
border: 1px solid var(--admin-card-border);
border-radius: 16px;
box-shadow: var(--admin-card-shadow);
/* overflow visible so the expand chevron (right: -14px) isn't clipped */
overflow: visible;
transition: padding 220ms ease;
}
html.is-admin.admin-side-open .account-side { padding: 14px 10px; }
/* Hide nav labels in rail mode */
html.is-admin .account-nav { gap: 4px; }
html.is-admin .account-nav__item {
position: relative;
gap: 0;
padding: 11px 0;
justify-content: center;
font-size: 0; /* hide label */
border-radius: 10px;
}
html.is-admin .account-nav__item > *:not(.account-nav__icon):not(.nav-badge) {
font-size: 0;
width: 0;
white-space: nowrap;
overflow: hidden;
opacity: 0;
}
html.is-admin .account-nav__item .account-nav__icon { color: #5b5770; }
html.is-admin .account-nav__item.is-active {
background: linear-gradient(135deg, rgba(130, 71, 255, 0.12), rgba(74, 79, 224, 0.08));
}
html.is-admin .account-nav__item.is-active .account-nav__icon { color: var(--color-brand-purple); }
html.is-admin .account-nav__item:hover { background: #f5f2fc; }
/* Expanded sidebar — show labels */
html.is-admin.admin-side-open .account-nav__item {
gap: 12px;
padding: 10px 12px;
justify-content: flex-start;
font-size: var(--text-sm);
}
html.is-admin.admin-side-open .account-nav__item > *:not(.account-nav__icon):not(.nav-badge) {
font-size: var(--text-sm);
width: auto;
opacity: 1;
}
/* Rail-mode tooltip on hover */
/* Ensure the sidebar itself (and the hovered nav item) sit above the main panel
so the tooltip never gets covered by sibling cards. */
html.is-admin .account-side { z-index: 50; }
html.is-admin .account-nav__item:hover { z-index: 60; }
html.is-admin .account-nav__item[data-section]::after {
content: attr(aria-label);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: #1f1b2d;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease;
/* Layer above every panel/card on the page */
z-index: 9999;
box-shadow: 0 6px 20px rgba(31, 27, 45, 0.25);
}
/* Small arrow pointing back to the icon */
html.is-admin .account-nav__item[data-section]::before {
content: "";
position: absolute;
left: calc(100% + 4px);
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-right-color: #1f1b2d;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease;
z-index: 9999;
}
html.is-admin:not(.admin-side-open) .account-nav__item:hover::after,
html.is-admin:not(.admin-side-open) .account-nav__item:hover::before { opacity: 1; }
html.is-admin.admin-side-open .account-nav__item::after,
html.is-admin.admin-side-open .account-nav__item::before { display: none; }
/* Nav badge */
html.is-admin .nav-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Sidebar toggle button */
.admin-side-toggle {
position: absolute;
top: 14px;
right: -14px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--admin-card-border);
background: #fff;
box-shadow: var(--admin-card-shadow);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #5b5770;
z-index: 5;
transition: transform 220ms ease, color 120ms ease;
}
.admin-side-toggle:hover { color: var(--color-brand-purple); }
html.is-admin.admin-side-open .admin-side-toggle { transform: rotate(180deg); }
/* Panel head — softer */
html.is-admin .account-panel__head h2 {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
}
html.is-admin .account-panel__head p { color: var(--admin-text-muted); }
html.is-admin .account-panel__head { margin-bottom: 18px; }
/* Card containers — universal lift */
html.is-admin .account-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-card-border);
border-radius: 16px;
box-shadow: var(--admin-card-shadow);
padding: 22px 24px;
margin-bottom: 18px;
}
html.is-admin .account-card__head h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
}
/* KPI grid — 4 cards, with delta indicators */
html.is-admin .admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 18px;
}
html.is-admin .admin-stats .stat-card,
html.is-broker .admin-stats .stat-card,
html.is-broker .broker-stats .stat-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-card-border);
border-radius: 16px;
box-shadow: var(--admin-card-shadow);
padding: 18px 20px;
/* MUST be relative so .stat-card__icon (absolute) anchors INSIDE the card,
not the surrounding panel. !important defeats the homepage hero rule. */
position: relative !important;
/* Reset homepage hero offsets that leak into this scope. */
top: auto !important;
left: auto !important;
transform: none !important;
display: block !important;
animation: none !important;
transition: box-shadow 180ms ease, transform 180ms ease;
}
html.is-admin .admin-stats .stat-card:hover,
html.is-broker .broker-stats .stat-card:hover {
box-shadow: var(--admin-card-shadow-hover);
transform: translateY(-1px);
}
html.is-admin .admin-stats .stat-card__label,
html.is-broker .broker-stats .stat-card__label {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: none;
font-weight: 500;
color: var(--admin-text-muted);
margin-bottom: 10px;
}
html.is-admin .admin-stats .stat-card__value,
html.is-broker .broker-stats .stat-card__value {
font-size: 30px;
letter-spacing: -0.02em;
margin: 0 0 6px;
}
html.is-admin .admin-stats .stat-card__meta,
html.is-broker .broker-stats .stat-card__meta {
font-size: 12px;
color: var(--admin-text-faint);
}
.stat-card__delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
margin-right: 6px;
}
.stat-card__delta--up { background: rgba(22, 163, 74, 0.1); color: var(--admin-positive); }
.stat-card__delta--down { background: rgba(220, 38, 38, 0.08); color: var(--admin-negative); }
.stat-card__delta::before {
display: inline-block;
font-size: 10px;
line-height: 1;
}
.stat-card__delta--up::before { content: "▲"; }
.stat-card__delta--down::before { content: "▼"; }
/* KPI icon (top-right of card) */
.stat-card__icon {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(130, 71, 255, 0.10), rgba(74, 79, 224, 0.06));
color: var(--color-brand-purple);
display: flex;
align-items: center;
justify-content: center;
}
/* Overview chart row */
.admin-chart-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.admin-chart-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-card-border);
border-radius: 16px;
box-shadow: var(--admin-card-shadow);
padding: 22px 24px;
min-width: 0;
}
.admin-chart-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.admin-chart-card__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
margin: 0;
letter-spacing: -0.005em;
}
.admin-chart-card__sub {
font-size: 13px;
color: var(--admin-text-muted);
margin: 4px 0 0;
}
.admin-chart-card__canvas {
position: relative;
height: 260px;
}
.admin-chart-card__canvas canvas {
max-width: 100% !important;
height: 100% !important;
}
/* Side panel — broker mix list with bars */
.admin-rank-list { display: flex; flex-direction: column; gap: 14px; }
.admin-rank-row { display: flex; flex-direction: column; gap: 6px; }
.admin-rank-row__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 13px;
}
.admin-rank-row__label { color: #2c2841; font-weight: 500; }
.admin-rank-row__value { color: var(--admin-text-muted); font-variant-numeric: tabular-nums; }
.admin-rank-row__bar {
height: 6px;
background: #f1eef9;
border-radius: 3px;
overflow: hidden;
}
.admin-rank-row__fill {
height: 100%;
background: linear-gradient(90deg, #8247FF, #4A4FE0);
border-radius: 3px;
transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Bottom 3-card row */
.admin-bottom-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.admin-mini-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-card-border);
border-radius: 16px;
box-shadow: var(--admin-card-shadow);
padding: 22px 24px;
min-width: 0;
}
.admin-mini-card__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.admin-mini-card__donut-wrap {
position: relative;
height: 180px;
}
.admin-mini-card__donut-wrap canvas {
max-width: 100% !important;
height: 100% !important;
}
.admin-donut-legend {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.admin-donut-legend__row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--admin-text-muted);
}
.admin-donut-legend__swatch {
width: 8px;
height: 8px;
border-radius: 2px;
}
.admin-donut-legend__value { margin-left: auto; color: #2c2841; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Activity / order-list mini */
.admin-activity-list { display: flex; flex-direction: column; gap: 10px; }
.admin-activity-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--admin-divider);
font-size: 13px;
}
.admin-activity-row:last-child { border-bottom: 0; }
.admin-activity-row__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand-purple);
flex-shrink: 0;
}
.admin-activity-row__main { flex: 1; min-width: 0; }
.admin-activity-row__title {
display: block;
color: #2c2841;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-activity-row__meta {
display: block;
font-size: 11px;
color: var(--admin-text-faint);
margin-top: 2px;
}
.admin-activity-row__value {
color: #2c2841;
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
}
/* Table polish for card containers */
html.is-admin .admin-table-wrap { margin-top: 4px; }
/* Responsive */
@media (max-width: 1100px) {
html.is-admin .admin-stats { grid-template-columns: repeat(2, 1fr); }
.admin-chart-row { grid-template-columns: 1fr; }
.admin-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
html.is-admin .account-layout {
grid-template-columns: 1fr;
}
html.is-admin .account-side {
position: relative;
top: 0;
}
html.is-admin .account-nav__item {
font-size: var(--text-sm);
gap: 12px;
justify-content: flex-start;
padding: 10px 12px;
}
html.is-admin .account-nav__item > *:not(.account-nav__icon):not(.nav-badge) {
font-size: var(--text-sm);
width: auto;
opacity: 1;
}
.admin-side-toggle { display: none; }
html.is-admin .admin-stats { grid-template-columns: 1fr; }
}
/* =========================================================================
ADMIN FULL-WIDTH SHELL (May 27 2026 — fix sidebar-flush-left + table overflow)
The admin portal should behave like a real app: sidebar hugs the viewport
left, main content fills the rest, no centered .container max-width.
========================================================================= */
/* Break the admin page out of the centered .container max-width. */
html.is-admin .account-page > .container {
max-width: none;
width: 100%;
padding-left: 20px;
padding-right: 28px;
}
/* Tighter top spacing so head sits closer to the global nav. */
html.is-admin .account-head {
padding-left: 4px;
margin-bottom: 22px;
}
/* Layout: sidebar flush-left, fluid main. Slightly larger gap so content
doesn't sit on top of the rail. */
html.is-admin .account-layout {
grid-template-columns: var(--admin-rail-w) minmax(0, 1fr);
gap: 22px;
align-items: flex-start;
}
html.is-admin.admin-side-open .account-layout {
grid-template-columns: var(--admin-side-w) minmax(0, 1fr);
}
/* Ensure main can shrink so wide tables don't push the whole layout. */
html.is-admin .account-main {
min-width: 0;
width: 100%;
}
/* Cards inside the main column should fill the available width. */
html.is-admin .account-panel,
html.is-admin .account-panel.is-active {
width: 100%;
}
/* --- Table overflow fix ---
The Replacements / Orders / Users tables were forced into horizontal
scroll because column content (the rep-note in particular) was capped
at 280px while the available width was narrow. Now that we're full-width,
let columns size naturally and only fall back to scroll on very small
screens. */
html.is-admin .admin-table-wrap {
overflow-x: auto;
overflow-y: hidden;
}
html.is-admin .admin-table { table-layout: auto; width: 100%; }
html.is-admin .admin-table--rep .rep-note {
max-width: none;
}
html.is-admin .admin-table--rep td {
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
/* Compact rows — smaller font + tighter line-height so each line is thinner. */
html.is-admin .admin-table--rep th,
html.is-admin .admin-table--rep td {
font-size: 12px;
line-height: 1.3;
padding-top: 8px;
padding-bottom: 8px;
vertical-align: middle;
}
html.is-admin .admin-table--rep .admin-cell-strong { font-size: 12px; }
html.is-admin .admin-table--rep .admin-cell-muted {
font-size: 11px;
line-height: 1.3;
}
html.is-admin .admin-table--rep .admin-cell-mono { font-size: 11px; }
html.is-admin .admin-table--rep .rep-status-pill,
html.is-admin .admin-table--rep .status-pill { font-size: 10.5px; padding: 3px 8px; }
/* Submitted column — keep the date on one line. */
html.is-admin .admin-table--rep th:nth-child(1),
html.is-admin .admin-table--rep td:nth-child(1) {
min-width: 96px;
white-space: nowrap;
}
/* Broker column — wide enough so company name + email don't wrap onto many lines. */
html.is-admin .admin-table--rep th:nth-child(2),
html.is-admin .admin-table--rep td:nth-child(2) {
min-width: 180px;
}
html.is-admin .admin-table--rep td:nth-child(2) .admin-cell-strong,
html.is-admin .admin-table--rep td:nth-child(2) .admin-cell-muted {
white-space: nowrap;
}
/* Order column — mono code, keep on one line */
html.is-admin .admin-table--rep th:nth-child(3),
html.is-admin .admin-table--rep td:nth-child(3) { min-width: 100px; white-space: nowrap; }
/* Reason column — needs room for note + Show more */
html.is-admin .admin-table--rep th:nth-child(4),
html.is-admin .admin-table--rep td:nth-child(4) {
min-width: 190px;
}
/* Quantity — numeric, compact */
html.is-admin .admin-table--rep th:nth-child(5),
html.is-admin .admin-table--rep td:nth-child(5) { min-width: 70px; }
/* Report — icon button only, very compact */
html.is-admin .admin-table--rep th:nth-child(6),
html.is-admin .admin-table--rep td:nth-child(6) {
min-width: 70px;
text-align: center;
}
/* Status column (7th) — fits truncated decision note one line under pill */
html.is-admin .admin-table--rep th:nth-child(7),
html.is-admin .admin-table--rep td:nth-child(7) {
min-width: 230px;
}
html.is-admin .admin-table--rep td:nth-child(7) .admin-cell-muted {
white-space: nowrap;
}
/* Header alignment — make sort buttons sit on the same baseline as the plain Report header */
html.is-admin .admin-table--rep thead th { font-size: 11px; letter-spacing: 0.04em; padding-top: 10px; padding-bottom: 10px; vertical-align: middle; }
html.is-admin .admin-table--rep .admin-th-btn { font-size: 11px; letter-spacing: 0.04em; padding: 0; }
/* Icon download button — square, compact */
html.is-admin .admin-table--rep .btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border-radius: 8px;
border: 1px solid var(--admin-card-border, #ececf3);
background: #fff;
color: var(--brand-700, #4A4FE0);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
html.is-admin .admin-table--rep .btn-icon:hover { background: #F1ECFF; border-color: #8247FF; color: #8247FF; }
html.is-admin .admin-table--rep .btn-icon svg { width: 16px; height: 16px; display: block; }
/* Actions column — keep Approve / Deny on the same row. */
html.is-admin .admin-table--rep td:last-child {
white-space: nowrap;
}
html.is-admin .admin-table--rep td:last-child .admin-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
/* Orders / Users tables also benefit from natural wrapping. */
html.is-admin .admin-table td { white-space: normal; }
html.is-admin .admin-table .admin-cell-mono { white-space: nowrap; }
html.is-admin .admin-table .admin-actions { white-space: nowrap; }
/* Responsive: on narrower viewports keep the rail visible but reduce padding. */
@media (max-width: 1100px) {
html.is-admin .account-page > .container {
padding-left: 14px;
padding-right: 18px;
}
}
@media (max-width: 720px) {
html.is-admin .account-page > .container {
padding-left: 16px;
padding-right: 16px;
}
}
/* Revenue-trend date range dropdown */
.admin-range-select-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.admin-range-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #fff;
border: 1px solid var(--admin-card-border, #ececf3);
border-radius: 10px;
color: var(--color-heading, #1f1b2d);
cursor: pointer;
font: 500 13px/1.2 var(--font-body, inherit);
letter-spacing: -0.005em;
padding: 8px 32px 8px 14px;
min-width: 150px;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.admin-range-select:hover {
border-color: rgba(130, 71, 255, 0.35);
background: #faf8ff;
}
.admin-range-select:focus-visible {
outline: none;
border-color: var(--color-brand-purple, #8247FF);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.admin-range-select__caret {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #6e6a82;
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link: visually hidden until focused via keyboard (Tab). */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 10px 16px;
background: var(--color-brand-purple, #8247FF);
color: #fff;
font-weight: 600;
border-radius: 0 0 8px 0;
text-decoration: none;
}
.skip-link:focus {
left: 0;
outline: 2px solid #fff;
outline-offset: 2px;
}
/* =================================================================
Admin overview — global range control + revenue summary + pagination
================================================================= */
/* Panel head laid out as a row when it carries global controls */
.account-panel__head--with-controls {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.account-panel__head--with-controls .account-panel__head-text { min-width: 0; flex: 1 1 auto; }
.account-panel__head--with-controls .admin-range-select-wrap { flex: 0 0 auto; }
/* Stack vertically on small screens so the dropdown doesn't crowd the title */
@media (max-width: 640px) {
.account-panel__head--with-controls { align-items: flex-start; gap: 12px; }
.account-panel__head--with-controls .admin-range-select-wrap { width: 100%; }
}
/* Broker overview: add breathing room between the date range dropdown and the panel's right edge */
[data-panel="overview"] .admin-range-select-wrap {
gap: 10px;
margin-right: 8px;
flex-wrap: wrap;
row-gap: 10px;
}
@media (max-width: 640px) {
[data-panel="overview"] .admin-range-select-wrap { margin-right: 0; }
}
/* Custom date range row */
.admin-range-custom {
display: inline-flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px;
padding: 10px 12px;
background: #fafafe;
border: 1px solid var(--admin-card-border, #ececf3);
border-radius: 12px;
width: 100%;
margin-top: 4px;
}
.admin-range-custom[hidden] { display: none; }
.admin-range-custom__field {
display: inline-flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: #6e6a82;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.admin-range-custom__field input[type="date"] {
appearance: none;
padding: 8px 12px;
border: 1px solid var(--admin-card-border, #ececf3);
border-radius: 8px;
background: white;
font: 500 13px/1.2 var(--font-body, inherit);
color: var(--color-heading, #1f1b2d);
text-transform: none;
letter-spacing: 0;
min-width: 140px;
}
.admin-range-custom__field input[type="date"]:focus {
outline: none;
border-color: var(--color-brand-purple, #8247FF);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
/* Broker chart polish */
[data-panel="overview"] .admin-chart-card {
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
border: 1px solid var(--admin-card-border, #ececf3);
box-shadow: 0 1px 2px rgba(20, 14, 50, 0.04), 0 8px 20px rgba(20, 14, 50, 0.03);
padding: 22px;
}
[data-panel="overview"] .admin-chart-card__title { font-size: 16px; }
[data-panel="overview"] .admin-chart-card__sub { color: #6e6a82; }
[data-panel="overview"] .admin-chart-card__canvas { min-height: 280px; }
/* Condensed Profile panel — tighter rows, denser column layout */
.account-panel--condensed .account-form { gap: 14px; }
.account-panel--condensed .account-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin: 0 0 14px;
}
.account-panel--condensed .account-form__row:last-of-type { margin-bottom: 0; }
.account-panel--condensed .form-field { margin: 0; }
.account-panel--condensed .form-field input,
.account-panel--condensed .form-field select,
.account-panel--condensed .form-field textarea {
padding: 10px 12px;
font-size: 14px;
}
.account-panel--condensed .field__label {
font-size: 12px;
margin-bottom: 4px;
letter-spacing: 0.02em;
color: #6e6a82;
text-transform: uppercase;
font-weight: 600;
}
.account-panel--condensed .field__hint { font-size: 11px; color: #8b87a0; margin-top: 4px; }
.account-panel--condensed .account-form__actions { margin-top: 6px; }
.account-panel--condensed .account-rule { margin: 22px 0 18px; opacity: 0.6; }
.account-panel--condensed .account-panel__head { margin-bottom: 10px; }
.account-panel--condensed .account-panel__head h3 { font-size: 15px; margin: 0 0 4px; }
.account-panel--condensed .account-panel__head p { font-size: 13px; color: #6e6a82; margin: 0; }
@media (max-width: 720px) {
.account-panel--condensed .account-form__row { grid-template-columns: 1fr; }
}
/* Polished entry cards (custom orders + replacements) */
.account-card.account-card--entry {
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
border: 1px solid var(--admin-card-border, #ececf3);
box-shadow: 0 1px 2px rgba(20, 14, 50, 0.04), 0 12px 28px rgba(20, 14, 50, 0.05);
padding: 24px 24px 22px;
}
.account-card--entry .account-card__head--flush {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 18px;
gap: 14px;
border-bottom: 1px solid rgba(130, 71, 255, 0.08);
padding-bottom: 14px;
}
.account-card--entry .account-card__head--flush h3 { font-size: 16px; margin: 0 0 4px; }
.account-card--entry .account-card__lede { font-size: 13px; color: #6e6a82; margin: 0; line-height: 1.5; }
.admin-custom-form--polished .admin-custom-grid { gap: 16px 18px; }
.admin-custom-form--polished .field input,
.admin-custom-form--polished .field select,
.admin-custom-form--polished .field textarea {
padding: 11px 13px;
border-radius: 10px;
background: #fcfbff;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.admin-custom-form--polished .field input:hover,
.admin-custom-form--polished .field select:hover,
.admin-custom-form--polished .field textarea:hover { background: #fff; border-color: #cdc1f3; }
.admin-custom-form--polished .field input:focus,
.admin-custom-form--polished .field select:focus,
.admin-custom-form--polished .field textarea:focus {
background: #fff;
outline: none;
border-color: #8247FF;
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.admin-custom-form--polished .admin-custom-actions {
border-top: 1px solid rgba(130, 71, 255, 0.08);
padding-top: 16px;
margin-top: 4px;
}
.account-form--entry .account-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin: 0 0 14px;
}
@media (max-width: 720px) {
.account-form--entry .account-form__row { grid-template-columns: 1fr; }
}
.account-form--entry .form-field { margin: 0 0 12px; }
.account-form--entry .form-field input,
.account-form--entry .form-field select,
.account-form--entry .form-field textarea {
padding: 11px 13px;
border-radius: 10px;
background: #fcfbff;
}
.account-form--entry .form-field input:focus,
.account-form--entry .form-field select:focus,
.account-form--entry .form-field textarea:focus {
background: #fff;
outline: none;
border-color: #8247FF;
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.account-form--entry .replacement-ack {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
margin: 8px 0 14px;
background: rgba(255, 176, 32, 0.08);
border: 1px solid rgba(255, 176, 32, 0.25);
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
}
/* Global range selector — show the “Date range” label inline above the picker */
.admin-range-select-wrap[data-global-range] {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.admin-range-select-wrap[data-global-range] .admin-range-select-inner {
position: relative;
display: inline-flex;
align-items: center;
}
.admin-range-select__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-muted, #6b6884);
}
/* Custom date range — shown only when the dropdown is set to “Custom…” */
.admin-range-custom {
display: flex;
align-items: flex-end;
gap: 10px;
margin-top: 6px;
flex-wrap: wrap;
}
.admin-range-custom[hidden] { display: none; }
.admin-range-custom__field {
display: inline-flex;
flex-direction: column;
gap: 4px;
}
.admin-range-custom__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-muted, #6b6884);
}
.admin-range-custom__input {
appearance: none;
-webkit-appearance: none;
background: #fff;
border: 1px solid var(--admin-card-border, #ececf3);
border-radius: 10px;
color: var(--color-heading, #1f1b2d);
font: 500 13px/1.2 var(--font-body, inherit);
padding: 8px 12px;
min-width: 142px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.admin-range-custom__input:hover { border-color: rgba(130, 71, 255, 0.35); }
.admin-range-custom__input:focus-visible {
outline: none;
border-color: var(--color-brand-purple, #8247FF);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.admin-range-custom__apply {
height: 36px;
padding: 0 16px;
}
@media (max-width: 640px) {
.admin-range-custom { width: 100%; }
.admin-range-custom__field { flex: 1 1 140px; }
.admin-range-custom__input { width: 100%; min-width: 0; }
}
/* Revenue summary stat pills (Total / Avg / Peak) inside Revenue Trend card */
.admin-revenue-summary {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 0;
}
.admin-revenue-summary__stat {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 14px;
border-radius: 10px;
background: rgba(130, 71, 255, 0.06);
border: 1px solid rgba(130, 71, 255, 0.12);
min-width: 92px;
}
.admin-revenue-summary__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--admin-text-muted, #6b6884);
}
.admin-revenue-summary__value {
font-size: 16px;
font-weight: 700;
color: var(--admin-text, #1f1b2d);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* Chart card head — title left, summary right (when shown) */
.admin-chart-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
/* Recent activity card — subtitle + page-size + pagination */
.account-card__sub {
margin: 4px 0 0;
font-size: 13px;
color: var(--admin-text-muted, #6b6884);
}
.admin-pagesize-wrap {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin-left: auto;
}
.admin-pagesize-inner {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
}
.admin-pagesize-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-muted, #6b6884);
}
.admin-pagesize-wrap .admin-toolbar__hint {
margin: 0;
font-size: 12px;
color: #6b7280;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.admin-pagesize-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--admin-text, #1f1b2d);
background: #fff;
border: 1px solid rgba(31, 27, 45, 0.12);
border-radius: 8px;
padding: 8px 30px 8px 12px;
cursor: pointer;
min-width: 84px;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.admin-pagesize-select:hover {
border-color: rgba(130, 71, 255, 0.35);
background: #faf8ff;
}
.admin-pagesize-select:focus-visible {
outline: none;
border-color: var(--color-brand-purple, #8247FF);
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
/* Static refunded pill (looks like a button, no functionality) */
.admin-pill-static {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
border: 1px solid transparent;
cursor: default;
user-select: none;
white-space: nowrap;
}
.admin-pill-static--refunded {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
border-color: rgba(22, 163, 74, 0.25);
}
/* Broker column cell: shop name bold, broker name + email muted underneath */
.admin-broker-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.admin-broker-cell .admin-cell-strong {
font-weight: 600;
color: #1F1B2D;
line-height: 1.3;
}
.admin-broker-cell .admin-cell-muted {
font-size: 12px;
color: #6b7280;
font-weight: 400;
line-height: 1.3;
}
/* Numbered pagination */
.admin-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 16px;
flex-wrap: wrap;
}
.admin-pagination:empty { display: none; }
.admin-pager-btn {
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--admin-text, #1f1b2d);
background: #fff;
border: 1px solid rgba(31, 27, 45, 0.12);
border-radius: 8px;
min-width: 34px;
height: 34px;
padding: 0 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
font-variant-numeric: tabular-nums;
}
.admin-pager-btn:hover:not(:disabled) {
background: #faf8ff;
border-color: rgba(130, 71, 255, 0.35);
}
.admin-pager-btn.is-active {
background: var(--color-brand-purple, #8247FF);
border-color: var(--color-brand-purple, #8247FF);
color: #fff;
}
.admin-pager-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.admin-pager-btn--nav { font-size: 18px; line-height: 1; padding: 0 8px; }
.admin-pager-ellipsis {
color: var(--admin-text-muted, #6b6884);
font-weight: 600;
padding: 0 4px;
user-select: none;
}
/* Account card head with mixed children (h3 + sub + control) */
.account-card__head {
align-items: flex-start;
}
@media (max-width: 640px) {
.admin-pagination { justify-content: center; }
.admin-pager-btn { min-width: 30px; height: 30px; padding: 0 8px; font-size: 12px; }
}
/* Numeric columns in admin tables — right-align with tabular figures so
quantities and money stack cleanly. */
.admin-table .admin-col-num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------- Sortable admin table headers (All brokers) ---------- */
.admin-table--sortable th.admin-th-sort { padding: 0; }
.admin-table--sortable th.admin-th-sort .admin-th-btn {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100%;
background: transparent;
border: 0;
padding: 12px 14px;
font: inherit;
color: inherit;
cursor: pointer;
text-align: left;
letter-spacing: inherit;
text-transform: inherit;
font-weight: inherit;
border-radius: 6px;
transition: background 120ms ease, color 120ms ease;
}
.admin-table--sortable th.admin-th-sort.admin-col-num .admin-th-btn {
justify-content: flex-end;
text-align: right;
}
.admin-table--sortable th.admin-th-sort .admin-th-btn:hover {
background: rgba(130, 71, 255, 0.08);
color: #4a2cb8;
}
.admin-table--sortable th.admin-th-sort .admin-th-btn:focus-visible {
outline: 2px solid #8247FF;
outline-offset: 2px;
}
.admin-sort-arrow {
font-size: 11px;
line-height: 1;
width: 12px;
text-align: center;
color: #b8b3c7;
transition: color 120ms ease;
}
.admin-sort-arrow--active { color: #8247FF; font-weight: 700; }
.admin-table--sortable th.admin-th-sort[aria-sort="ascending"],
.admin-table--sortable th.admin-th-sort[aria-sort="descending"] {
background: rgba(130, 71, 255, 0.05);
}
/* ---------- Admin edit broker modal: a touch wider for the 2-up row ---------- */
.acc-modal[data-modal="admin-edit-user"] .acc-modal__panel {
max-width: 520px;
}
/* ---------- Admin refund modal ---------- */
.admin-refund-summary {
background: #F7F4FF;
border: 1px solid #E8E0FF;
border-radius: 10px;
padding: 12px 14px;
margin: 4px 0 16px;
}
.admin-refund-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 14px;
color: #4A4658;
}
.admin-refund-summary__row strong {
color: #1F1B2D;
font-variant-numeric: tabular-nums;
}
.admin-refund-summary__row--already strong { color: #6B5BD3; }
.admin-refund-summary__row--remaining {
border-top: 1px solid #E0D6FA;
margin-top: 4px;
padding-top: 8px;
}
.admin-refund-summary__row--remaining strong {
color: #4A2CB8;
font-size: 16px;
}
.admin-refund-amount-wrap {
position: relative;
display: flex;
align-items: center;
}
.admin-refund-amount-prefix {
position: absolute;
left: 14px;
font-size: 16px;
font-weight: 600;
color: #6B6478;
pointer-events: none;
}
#admin-refund-amount {
padding-left: 28px !important;
font-variant-numeric: tabular-nums;
font-size: 16px;
}
.admin-refund-amount-max {
position: absolute;
right: 8px;
background: #F1ECFF;
border: 1px solid #D8CCFA;
color: #4A2CB8;
font-weight: 600;
font-size: 12px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 120ms ease;
}
.admin-refund-amount-max:hover { background: #E4D8FF; }
.admin-refund-amount-hint {
font-size: 12px;
color: #6B6478;
margin: 6px 0 0;
}
/* Partially refunded status pill */
.admin-status--partially-refunded {
background: rgba(168, 85, 247, 0.10);
color: #7c3aed;
}
/* Refund detail line in order view */
.admin-order-view__refund {
margin-top: 6px;
font-size: 13px;
color: #6B5BD3;
}
/* ============================================================
ADMIN ORDERS — multi-item expand, per-item rows, status pills
============================================================ */
/* Tiny purple square-rounded expand button on multi-item orders */
.admin-order-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border-radius: 6px;
border: 1px solid rgba(130, 71, 255, 0.30);
background: rgba(130, 71, 255, 0.08);
color: #6B45D6;
font-size: 16px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.admin-order-expand-btn:hover {
background: rgba(130, 71, 255, 0.16);
border-color: rgba(130, 71, 255, 0.55);
}
.admin-order-expand-btn:active {
transform: scale(0.94);
}
.admin-order-expand-btn:focus-visible {
outline: 2px solid #8247FF;
outline-offset: 2px;
}
/* Narrow first column reserved for the expand toggle */
.admin-table th.admin-col-expand,
.admin-table td.admin-col-expand {
width: 36px;
padding-left: 14px;
padding-right: 6px;
text-align: center;
}
/* When an order is expanded, dim the bottom border so its line-item rows
read as part of the same logical group. */
.admin-table tbody tr.admin-order-row.is-expanded > td {
border-bottom-color: rgba(130, 71, 255, 0.20);
background: rgba(130, 71, 255, 0.025);
}
/* Per-line-item sub-row */
.admin-table tbody tr.admin-order-item-row > td {
background: rgba(241, 236, 255, 0.45);
font-size: 13px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(130, 71, 255, 0.20);
}
.admin-table tbody tr.admin-order-item-row .admin-cell-strong { font-size: 13px; }
.admin-table tbody tr.admin-order-item-row .admin-cell-muted { font-size: 11px; }
.admin-order-item-cell {
font-style: italic;
color: #6B5BD3;
font-size: 12px;
}
/* Compact status pills used inside the per-item rows */
.admin-pill {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--radius-pill, 999px);
white-space: nowrap;
}
.admin-pill--delivered {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.admin-pill--partial {
background: rgba(168, 85, 247, 0.12);
color: #7c3aed;
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
font-size: 11px;
}
.admin-pill--refunded {
background: rgba(75, 85, 99, 0.12);
color: #4b5563;
}
/* Sortable header arrow chevrons */
.admin-table th[data-orders-sort] {
cursor: pointer;
user-select: none;
}
.admin-table th[data-orders-sort]:hover { color: #6B45D6; }
.admin-table th .admin-sort-arrow {
display: inline-block;
margin-left: 4px;
font-size: 10px;
color: #8247FF;
opacity: 0.85;
}
/* Numeric columns right-aligned */
.admin-table th.admin-col-num,
.admin-table td.admin-col-num {
text-align: right;
}
/* Hide secondary columns on narrow viewports — for now we let the table scroll horizontally */
@media (max-width: 880px) {
.admin-cell-hide-md { display: none; }
}
/* Broker-portal order row: refund window badge */
.order-row__refund {
font-size: 12px;
font-weight: 500;
}
.order-row__refund--ok { color: #6B5BD3; }
.order-row__refund--closed { color: #8a8696; }
/* ============================================================
BROKER PORTAL — BANNER + RICHER UI
============================================================ */
.broker-banner {
background: linear-gradient(95deg, #1F1B2D 0%, #4A4FE0 55%, #8247FF 100%);
color: #fff;
padding: 14px 0;
box-shadow: 0 2px 0 rgba(130,71,255,0.18), 0 8px 24px rgba(31,27,45,0.18);
position: fixed;
top: 72px; /* sits below fixed nav */
left: 0;
right: 0;
z-index: 90;
}
html:not(.is-admin) .account-page { padding-top: 120px; }
@media (max-width: 768px) {
.broker-banner { top: 64px; }
html:not(.is-admin) .account-page { padding-top: 108px; }
}
.broker-banner__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.broker-banner__left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.broker-banner__dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #4ade80;
box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
flex-shrink: 0;
animation: brokerPulse 2.4s ease-in-out infinite;
}
@keyframes brokerPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(74,222,128,0.18); }
50% { box-shadow: 0 0 0 8px rgba(74,222,128,0.05); }
}
.broker-banner__title {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.18em;
color: #fff;
}
.broker-banner__sub {
font-size: 13px;
color: rgba(255,255,255,0.78);
font-weight: 500;
}
.broker-banner__right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.broker-banner__chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
background: rgba(255,255,255,0.06);
}
.broker-banner__switch {
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
transition: background .15s ease;
}
.broker-banner__switch:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 640px) {
.broker-banner__sub { display: none; }
.broker-banner__chip { display: none; }
}
/* Admin view should hide broker banner */
html.is-admin .broker-banner { display: none; }
/* Broker head tag */
.broker-head-tag {
background: linear-gradient(135deg, #8247FF, #4A4FE0);
color: #fff;
padding: 4px 10px;
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 800;
border-radius: 6px;
vertical-align: middle;
margin-left: 8px;
}
/* Broker stats — same look as admin-stats; sparkline area */
.broker-stats .stat-card__sparkline {
display: block;
height: 28px;
margin: 6px 0 4px;
}
.broker-stats .stat-card__sparkline svg { width: 100%; height: 100%; display: block; }
.broker-chart-row { grid-template-columns: 1fr; }
/* Broker toolbar tweaks (reuse admin-toolbar) */
.broker-toolbar { margin-bottom: 16px; }
/* ============================================================
BROKER TABLES — ensure layout matches admin & avoid overflow
============================================================ */
.broker-orders-table .admin-col-actions,
.broker-subs-table .admin-col-actions {
text-align: right;
white-space: nowrap;
min-width: 160px;
}
/* Subscriptions: action buttons sit inline (full-width layout has room) */
.broker-subs-table .admin-col-actions {
white-space: nowrap;
min-width: 280px;
vertical-align: middle;
text-align: right;
}
.broker-subs-table .admin-col-actions .btn + .btn { margin-left: 6px; }
.broker-orders-table .admin-col-actions .btn + .btn { margin-left: 6px; }
/* Icon-only download button next to Receipt */
.broker-orders-table .broker-download-btn,
.broker-subs-table .broker-download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
width: 30px;
height: 30px;
vertical-align: middle;
}
.broker-orders-table .broker-download-btn:hover,
.broker-subs-table .broker-download-btn:hover {
background: #F1ECFF;
border-color: #8247FF;
color: #8247FF;
}
/* Allow wrap to grow past account-main */
.account-panel#subscriptions .admin-table-wrap,
.account-panel#orders .admin-table-wrap { overflow-x: visible; }
/* ============================================================
BROKER PORTAL — fluid full-width layout (like admin)
Break out of the centered 1200px container so tables get
the same horizontal room admin has.
============================================================ */
html.is-broker .account-page > .container {
max-width: none;
width: 100%;
padding-left: 28px;
padding-right: 28px;
}
html.is-broker .account-layout {
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
html.is-broker .account-main { min-width: 0; }
@media (max-width: 768px) {
html.is-broker .account-page > .container {
padding-left: 16px;
padding-right: 16px;
}
html.is-broker .account-layout { grid-template-columns: 1fr; }
}
/* Broker toolbar: keep on one row with wrap */
.broker-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.broker-toolbar .admin-search { flex: 1 1 240px; min-width: 200px; }
.broker-toolbar .admin-toolbar__filters { flex: 0 1 auto; }
.broker-toolbar .admin-pagesize-wrap { flex: 0 0 auto; margin-left: auto; }
/* Admin broker link — broker shop name is clickable wherever it appears.
Always purple + underlined-on-hover so the user knows it's a link. */
.admin-table button.admin-broker-link {
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
text-align: left;
cursor: pointer;
color: #6f42ff;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.admin-table button.admin-broker-link:hover,
.admin-table button.admin-broker-link:focus-visible {
color: #4a1eff;
border-bottom-color: currentColor;
outline: none;
}
/* ============================================================
Custom orders \u2014 admin + broker
============================================================ */
.admin-custom-form .admin-custom-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
margin-bottom: 14px;
}
.admin-custom-form .field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.admin-custom-form .field--full { grid-column: 1 / -1; }
.admin-custom-form .field__label {
font-size: 12px;
font-weight: 600;
color: var(--color-heading);
letter-spacing: 0.02em;
}
.admin-custom-form .field__hint {
font-size: 12px;
color: var(--color-text-muted);
}
.admin-custom-form .field input,
.admin-custom-form .field select,
.admin-custom-form .field textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid #E2E0EE;
border-radius: 8px;
background: #fff;
font: inherit;
color: var(--color-heading);
box-sizing: border-box;
}
.admin-custom-form .field input:focus,
.admin-custom-form .field select:focus,
.admin-custom-form .field textarea:focus {
border-color: #8247FF;
outline: 2px solid rgba(130, 71, 255, 0.18);
}
.admin-custom-form .field input[readonly] {
background: #F1ECFF;
color: #1F1B2D;
font-weight: 600;
}
.admin-custom-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px;
flex-wrap: wrap;
}
.admin-table--custom .admin-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.admin-table--custom .admin-cell-mono {
font-family: 'SF Mono', Menlo, monospace;
font-size: 12px;
color: var(--color-heading);
}
/* Compact density modifier — used by "Custom orders sent" so more info fits per row */
.admin-table--compact th,
.admin-table--compact td {
font-size: 12.5px;
padding: 8px 10px;
line-height: 1.35;
}
.admin-table--compact .admin-cell-strong { font-size: 13px; }
.admin-table--compact .admin-cell-muted { font-size: 11.5px; }
.admin-table--compact .admin-cell-mono { font-size: 11px; }
/* Snug the actions column against the right edge — broker complained about
too much empty space between the trash icon and the table border. */
.admin-table--compact th:last-child,
.admin-table--compact td:last-child { padding-right: 6px; }
.admin-table--compact td:last-child .admin-actions { padding-right: 0; }
.admin-table--compact .admin-status { font-size: 10.5px; padding: 3px 7px; }
.admin-table--compact .admin-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
white-space: nowrap;
}
.admin-table--compact td:last-child { white-space: nowrap; }
/* Icon-only action buttons for the Custom orders sent row */
.admin-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: 7px;
border: 1px solid var(--admin-card-border, #ececf3);
background: #fff;
color: var(--brand-700, #4A4FE0);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-icon-btn svg { width: 14px; height: 14px; display: block; }
.admin-icon-btn:hover { background: #F1ECFF; border-color: #8247FF; color: #8247FF; }
.admin-icon-btn--danger { color: #B91C1C; }
.admin-icon-btn--danger:hover { background: #FEF2F2; border-color: #DC2626; color: #DC2626; }
/* Broker pay modal pieces */
.broker-pay-summary {
margin: 16px 0;
border: 1px solid var(--color-border, #E6E1F5);
border-radius: 12px;
overflow: hidden;
background: #FAFAFE;
}
.broker-pay-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
font-size: 14px;
color: var(--color-text-muted, #5C566E);
border-bottom: 1px solid var(--color-border, #EFECF9);
}
.broker-pay-summary__row:last-child { border-bottom: 0; }
.broker-pay-summary__row strong { color: var(--color-text, #1A1432); font-weight: 600; }
.broker-pay-summary__row--total {
background: #fff;
font-size: 15px;
}
.broker-pay-summary__row--total strong { font-size: 18px; color: #1A1432; }
.broker-pay-bank {
margin: 14px 0 12px;
border: 1px solid var(--color-border, #E6E1F5);
border-radius: 12px;
overflow: hidden;
}
.broker-pay-bank__row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
padding: 9px 14px;
font-size: 13.5px;
border-bottom: 1px solid var(--color-border, #EFECF9);
background: #fff;
}
.broker-pay-bank__row:last-child { border-bottom: 0; }
.broker-pay-bank__row dt {
color: var(--color-text-muted, #5C566E);
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 11px;
align-self: center;
}
.broker-pay-bank__row dd {
margin: 0;
color: var(--color-text, #1A1432);
font-weight: 500;
font-family: 'SF Mono', Menlo, monospace;
font-size: 13px;
word-break: break-word;
}
.acc-modal__note {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--color-text-faint, #7A7591);
line-height: 1.5;
}
.admin-empty {
padding: 18px 16px;
margin: 0;
color: var(--color-text-muted);
font-size: 14px;
}
@media (max-width: 720px) {
.admin-custom-form .admin-custom-grid { grid-template-columns: 1fr; }
}
.admin-status--pending { background: #FFF3DD; color: #8B5A00; }
.admin-status--paid { background: #DDF1E5; color: #0A5C2A; }
.admin-status--delivered { background: #DDEBFF; color: #0A3B7F; }
.admin-status--unpaid { background: #FEE2E2; color: #991B1B; }
.admin-status--custom { background: #EDE3FF; color: #5B21B6; }
.admin-status--muted { background: #ECEAF4; color: #4A3D6C; }
.stat-card__sublabel { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #EDE3FF; color: #5B21B6; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.stat-card--admin-only { position: relative; }
.field__hint-inline { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #FFF3DD; color: #8B5A00; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.admin-status--inline { margin-left: 6px; vertical-align: middle; }
.admin-cell-typebadge { margin-top: 4px; }
.admin-cell-typebadge .admin-status--inline { margin-left: 0; font-size: 0.6875rem; padding: 2px 8px; }
/* Unified order-type badge (one-time vs subscription) — used on admin and broker custom-order tables */
.order-type-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
white-space: nowrap;
border: 1px solid transparent;
box-shadow: 0 1px 2px rgba(17, 12, 46, 0.04);
}
.order-type-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.85;
}
.order-type-badge--onetime {
background: #E6F4F1;
color: #0F5C52;
border-color: rgba(15, 92, 82, 0.18);
}
.order-type-badge--sub {
background: #EDE3FF;
color: #5B21B6;
border-color: rgba(91, 33, 182, 0.18);
}
.order-type-badge--inline {
margin-left: 6px;
vertical-align: middle;
}
.admin-cell-typebadge .order-type-badge {
margin-left: 0;
margin-top: 2px;
}
/* Sub-user edit dialog (broker + admin) */
.subuser-edit-overlay {
position: fixed;
inset: 0;
background: rgba(15, 12, 35, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 16px;
animation: subEditOverlayIn 0.15s ease;
}
@keyframes subEditOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.subuser-edit-card {
background: #fff;
border-radius: 14px;
padding: 24px 24px 20px;
max-width: 440px;
width: 100%;
box-shadow: 0 24px 48px rgba(15, 12, 35, 0.28);
animation: subEditCardIn 0.18s ease;
}
@keyframes subEditCardIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.subuser-edit-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: #1F1B2D; }
.subuser-edit-card__hint { margin: 0 0 16px; color: var(--color-text-muted, #6b6580); font-size: 0.875rem; }
.subuser-edit-card .field { display: block; margin-bottom: 14px; }
.subuser-edit-card .field__label { display: block; font-size: 0.8125rem; font-weight: 600; color: #1F1B2D; margin-bottom: 6px; }
.subuser-edit-card input[type="text"],
.subuser-edit-card input[type="email"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #d8d3e6;
border-radius: 10px;
font-size: 0.95rem;
font-family: inherit;
color: #1F1B2D;
background: #fff;
box-sizing: border-box;
}
.subuser-edit-card input:focus { outline: 2px solid #6F47FF; outline-offset: 1px; border-color: #6F47FF; }
.subuser-edit-card__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
/* Cleaner admin entry forms (Deliver leads + Custom orders) */
.admin-entry-form { display: flex; flex-direction: column; gap: 20px; }
.admin-entry-section {
border: 1px solid #ECE7F7;
border-radius: 14px;
padding: 18px 20px 20px;
background: #fff;
margin: 0;
position: relative;
}
.admin-entry-section--internal {
background: linear-gradient(180deg, #FBF8FF 0%, #fff 100%);
border-color: #E6DFFB;
}
.admin-entry-section__title {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 8px;
margin: 0 0 6px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #1F1B2D;
text-transform: none;
}
.admin-entry-section__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #6F47FF;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
.admin-entry-section__badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #FFF3DD;
color: #8B5A00;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-entry-form .account-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 720px) {
.admin-entry-form .account-form__row { grid-template-columns: 1fr; }
.admin-entry-section { padding: 16px; }
}
.admin-entry-form__actions { display: flex; align-items: center; gap: 14px; padding: 6px 4px 0; }
/* Custom-order form section dividers */
.admin-custom-grid--sectioned { row-gap: 14px; }
.admin-custom-section-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 10px 0 4px;
border-bottom: 1px solid #ECE7F7;
margin-bottom: 4px;
}
.admin-custom-section-head:first-child { padding-top: 2px; }
.admin-custom-section-head__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #6F47FF;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}
.admin-custom-section-head__title {
font-size: 0.9375rem;
font-weight: 700;
color: #1F1B2D;
}
.admin-custom-section-head__hint {
color: var(--color-text-muted, #6b6580);
font-size: 0.8125rem;
flex-basis: 100%;
margin-left: 32px;
}
@media (min-width: 721px) {
.admin-custom-section-head__hint { flex-basis: auto; margin-left: 0; }
}
/* Recurring custom-priced subscription row — subtle tint so admin/broker spot it */
tr.admin-row--custom-sub > td { background: rgba(130, 71, 255, 0.04); }
tr.admin-row--custom-sub:hover > td { background: rgba(130, 71, 255, 0.08); }
.admin-cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.78rem; color: #4A3D6C; }
/* Broker search typeahead (admin custom order form) */
.broker-search { position: relative; }
.broker-search__input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border, #d8d3e6);
border-radius: 10px;
background: #fff;
font-size: 0.95rem;
font-family: inherit;
color: #1F1B2D;
}
.broker-search__input:focus {
outline: none;
border-color: #8247FF;
box-shadow: 0 0 0 3px rgba(130,71,255,0.15);
}
.broker-search__results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 50;
max-height: 260px;
overflow-y: auto;
background: #fff;
border: 1px solid #d8d3e6;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(31,27,45,0.12);
padding: 4px;
}
.broker-search__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
line-height: 1.3;
}
.broker-search__item strong { font-size: 0.92rem; color: #1F1B2D; font-weight: 600; }
.broker-search__item span { font-size: 0.82rem; color: #6b6480; }
.broker-search__item:hover { background: #F1ECFF; }
.broker-search__item--new strong { color: #8247FF; }
.broker-search__empty {
padding: 10px 12px;
font-size: 0.85rem;
color: #6b6480;
}
/* Off-platform toggle + custom-grid embed */
.off-platform-toggle {
background: #F8F5FF;
border: 1px dashed #cfc1f7;
border-radius: 10px;
padding: 10px 12px;
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.92rem;
color: #1F1B2D;
line-height: 1.4;
}
.checkbox-row input[type="checkbox"] {
flex: 0 0 auto;
width: 18px; height: 18px;
margin-top: 1px;
accent-color: #8247FF;
cursor: pointer;
}
.admin-custom-offplatform {
background: #FDFCFF;
border: 1px solid #ece6fb;
border-radius: 12px;
padding: 14px;
grid-column: 1 / -1;
}
.admin-status--inline {
display: inline-block;
margin-left: 6px;
font-size: 0.72rem;
vertical-align: middle;
}
.admin-cell-refund {
color: #8B2A2A;
margin-top: 4px;
}
.admin-status--rep-denied { background: #FBE3E3; color: #8B2A2A; }
/* Custom-order modal share refund summary styles */
.admin-refund-summary {
background: #F8F5FF;
border-radius: 10px;
padding: 12px 14px;
margin: 10px 0 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-refund-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #1F1B2D;
}
.admin-refund-summary__row strong { font-weight: 600; }
.admin-refund-summary__row--remaining strong { color: #8247FF; }
.admin-refund-summary__row--already strong { color: #8B2A2A; }
.admin-refund-amount-wrap {
position: relative;
display: flex;
align-items: center;
}
.admin-refund-amount-prefix {
position: absolute;
left: 12px;
color: #6b6480;
pointer-events: none;
}
.admin-refund-amount-wrap input {
flex: 1;
padding-left: 24px;
padding-right: 60px;
}
.admin-refund-amount-max {
position: absolute;
right: 6px;
background: #fff;
border: 1px solid #d8d3e6;
border-radius: 6px;
padding: 4px 10px;
font-size: 0.78rem;
font-weight: 600;
color: #8247FF;
cursor: pointer;
}
.admin-refund-amount-max:hover { background: #F1ECFF; }
.admin-refund-amount-hint {
font-size: 0.78rem;
color: #6b6480;
margin-top: 4px;
}
/* Broker "payment sent — awaiting confirmation" badge (broker portal) */
.broker-pay-claimed {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: #FFF6E6;
border: 1px solid #F5C97A;
color: #8A5A00;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.broker-pay-claimed svg {
width: 14px;
height: 14px;
display: block;
flex-shrink: 0;
}
/* Admin: "Payment claimed" indicator on the Custom orders sent row */
.admin-claim-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 7px;
border-radius: 999px;
background: #FFF6E6;
border: 1px solid #F5C97A;
color: #8A5A00;
font-size: 10.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: help;
}
.admin-claim-badge svg { width: 12px; height: 12px; display: block; flex-shrink: 0; }
.admin-row--claimed > td { background: #FFFBF1; }
.admin-row--claimed:hover > td { background: #FFF6E0; }
/* Broker detail panel (item 6 — admin deep-dive) */
.broker-detail-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px 28px;
margin: 0;
padding: 4px 0 0;
}
.broker-detail-meta__row {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.broker-detail-meta__row dt {
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--admin-text-muted, #6b7280);
font-weight: 600;
}
.broker-detail-meta__row dd {
font-size: 14px;
color: var(--admin-text, #0a0c14);
margin: 0;
font-weight: 500;
}
.account-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
/* ===== Admin overview: 5-card single row =====
These rules must override html.is-admin .admin-stats (specificity 0,2,1),
so we anchor them with `html.is-admin [data-panel="admin-overview"] .admin-stats`
to get specificity 0,3,1. */
html.is-admin [data-panel="admin-overview"] .admin-stats {
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
html.is-admin [data-panel="admin-overview"] .admin-stats .stat-card {
min-width: 0; /* allow shrink */
padding: 16px 18px;
}
html.is-admin [data-panel="admin-overview"] .admin-stats .stat-card__label {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
letter-spacing: 0.06em;
}
html.is-admin [data-panel="admin-overview"] .admin-stats .stat-card__value {
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.01em;
}
html.is-admin [data-panel="admin-overview"] .admin-stats .stat-card__meta {
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Tablet — wrap to 3 + 2 */
@media (max-width: 1280px) {
html.is-admin [data-panel="admin-overview"] .admin-stats {
grid-template-columns: repeat(3, 1fr);
}
}
/* Mobile — 2 */
@media (max-width: 720px) {
html.is-admin [data-panel="admin-overview"] .admin-stats {
grid-template-columns: repeat(2, 1fr);
}
html.is-admin [data-panel="admin-overview"] .admin-stats .stat-card__value {
font-size: 22px;
}
}
/* Profit "Internal" badge — replaces old sublabel */
.stat-card__badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.stat-card__badge--internal {
background: rgba(130, 71, 255, 0.12);
color: #6b3df0;
border: 1px solid rgba(130, 71, 255, 0.22);
}
/* ===== Revenue / Profit chart toggle ===== */
.admin-chart-card__head-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
flex-shrink: 0;
}
.admin-chart-toggle {
display: inline-flex;
background: #f3f1fa;
border: 1px solid #e6e2f0;
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.admin-chart-toggle__btn {
appearance: none;
border: 0;
background: transparent;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
color: #5b5670;
border-radius: 7px;
cursor: pointer;
letter-spacing: 0.02em;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-chart-toggle__btn:hover {
color: #2f2a44;
}
.admin-chart-toggle__btn.is-active {
background: #fff;
color: #1f1b2d;
box-shadow: 0 1px 2px rgba(31, 27, 45, 0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.admin-chart-toggle__btn--internal.is-active {
color: #6b3df0;
}
/* ============================================================
RATINGS & REWARDS (Item 6)
============================================================ */
.rating-overlay .rating-card,
.reward-overlay .reward-card,
.greview-overlay .greview-card {
max-width: 520px;
padding: 28px 28px 24px;
}
.rating-card h3 {
font-size: 1.375rem;
margin: 0 0 6px;
}
.rating-card .subuser-edit-card__hint {
margin: 0 0 4px;
color: #6b6580;
}
.rating-stars {
display: flex;
justify-content: center;
gap: 10px;
margin: 18px 0 6px;
}
.rating-star {
background: none;
border: 0;
padding: 8px;
cursor: pointer;
color: #e2dff0;
border-radius: 10px;
transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.rating-star:hover { background: #f6f3ff; transform: translateY(-1px); }
.rating-star:focus-visible { outline: 2px solid #8247FF; outline-offset: 2px; }
.rating-star.is-on { color: #FFB020; }
.rating-star svg { display: block; width: 34px; height: 34px; }
.rating-score-label {
text-align: center;
font-size: 0.875rem;
font-weight: 600;
color: #8247FF;
min-height: 1.25rem;
margin: 0 0 18px;
letter-spacing: 0.01em;
}
.rating-score-label:empty::before {
content: 'Tap a star to rate';
color: #9b95ad;
font-weight: 500;
}
.rating-comment-field {
display: block;
width: 100%;
margin: 0 0 4px;
}
.rating-comment-field__label {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 0.8125rem;
font-weight: 600;
color: #2f2a44;
margin-bottom: 8px;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.rating-comment-field__label .rating-comment-field__optional {
font-size: 0.75rem;
font-weight: 500;
color: #9b95ad;
text-transform: none;
letter-spacing: 0;
}
.rating-comment-field__label .rating-comment-field__required {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 0.7rem;
font-weight: 600;
color: #6b3df0;
background: #f1ebff;
border-radius: 999px;
text-transform: none;
letter-spacing: 0;
}
.rating-comment-counter.is-short {
color: #c0392b;
font-weight: 600;
}
.rating-comment-field textarea {
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 12px 14px;
font-family: inherit;
font-size: 0.9375rem;
line-height: 1.5;
color: #1f1b2d;
background: #faf9fd;
border: 1.5px solid #e2dff0;
border-radius: 10px;
resize: vertical;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rating-comment-field textarea::placeholder {
color: #9b95ad;
}
.rating-comment-field textarea:hover {
border-color: #cabbf5;
background: #fff;
}
.rating-comment-field textarea:focus {
outline: none;
border-color: #8247FF;
background: #fff;
box-shadow: 0 0 0 3px rgba(130, 71, 255, 0.15);
}
.rating-comment-counter {
display: block;
text-align: right;
font-size: 0.75rem;
color: #9b95ad;
margin-top: 6px;
}
.rating-card .subuser-edit-card__actions {
margin-top: 18px;
}
.broker-rate-btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #6b3df0;
border-color: #d6c8ff;
}
.broker-rate-btn:hover { background: #f6f3ff; border-color: #8247FF; color: #4f23c8; }
.broker-rate-btn svg { color: #FFB020; }
.broker-rating-shown {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 6px;
background: #fff8eb;
border: 1px solid #ffe2a8;
}
.rating-inline { display: inline-flex; align-items: center; gap: 1px; color: #d8d3e6; }
.rating-inline__star { color: inherit; }
.rating-inline__star.is-on { color: #FFB020; }
.reward-card__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #FFB020 0%, #FF8A00 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
box-shadow: 0 6px 18px rgba(255, 138, 0, 0.32);
}
.reward-card h3 { text-align: center; }
.reward-card .subuser-edit-card__hint { text-align: center; }
.reward-code {
display: block;
margin: 14px auto;
padding: 12px 18px;
text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #1f1b2d;
background: linear-gradient(135deg, #f6f3ff 0%, #fff 100%);
border: 1.5px dashed #8247FF;
border-radius: 10px;
max-width: 320px;
}
.reward-card__meta {
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted, #6b6580);
margin: -2px 0 14px;
}
.greview-card h3 { color: #1f1b2d; }
.greview-card textarea { min-height: 96px; }
.admin-review-text {
white-space: pre-wrap;
max-width: 360px;
font-size: 0.875rem;
color: #2f2a44;
line-height: 1.4;
}
/* ===========================================================
Admin order Rating column + admin-only internal callout
----------------------------------------------------------
Rating column in admin orders table shows stars + truncated
comment underneath. Internal callout in the View modal
highlights lead source ID + broker rating + full comment.
=========================================================== */
.admin-rating-cell {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.admin-rating-cell__comment {
font-size: 0.75rem;
font-style: italic;
color: #6b6580;
max-width: 220px;
line-height: 1.35;
}
.admin-order-view__internal {
margin: 18px 0 8px;
padding: 16px 18px;
background: linear-gradient(135deg, #fff8e6 0%, #fff3d6 100%);
border: 1.5px solid #f5c451;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(180, 140, 20, 0.08);
}
.admin-order-view__internal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.admin-order-view__internal-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #1f1b2d;
color: #fff7d6;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
}
.admin-order-view__internal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
@media (max-width: 640px) {
.admin-order-view__internal-grid { grid-template-columns: 1fr; }
}
.admin-order-view__rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.admin-order-view__rating-score {
font-weight: 700;
font-size: 0.95rem;
color: #1f1b2d;
}
.admin-order-view__rating-comment {
margin: 8px 0 0;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.6);
border-left: 3px solid #8247FF;
border-radius: 6px;
font-style: italic;
color: #2f2a44;
font-size: 0.875rem;
line-height: 1.5;
}
/* ===========================================================
Clickable admin rating cell (opens detail modal)
=========================================================== */
.admin-rating-cell--btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid transparent;
padding: 6px 8px;
margin: -6px -8px;
border-radius: 8px;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
width: 100%;
}
.admin-rating-cell--btn:hover {
background: #f6f3ff;
border-color: #d6c8ff;
}
.admin-rating-cell--btn:focus-visible {
outline: 2px solid #8247FF;
outline-offset: 2px;
background: #f6f3ff;
}
.admin-rating-cell--btn:active { transform: translateY(1px); }
.admin-rating-cell__comment--empty { font-style: normal; opacity: 0.75; }
/* ===========================================================
Admin rating detail modal
=========================================================== */
.admin-rating-modal { display: flex; flex-direction: column; gap: 18px; }
.admin-rating-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: linear-gradient(135deg, #fff8eb 0%, #fff3d6 100%);
border: 1px solid #ffe2a8;
border-radius: 12px;
flex-wrap: wrap;
}
.admin-rating-modal__stars { font-size: 1.25rem; display: inline-flex; gap: 2px; }
.admin-rating-modal__stars .rating-inline { font-size: 1.5rem; }
.admin-rating-modal__score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.admin-rating-modal__score-num { font-weight: 700; font-size: 1.05rem; color: #1f1b2d; }
.admin-rating-modal__score-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 10px;
border-radius: 999px;
text-transform: uppercase;
}
.admin-rating-modal__score-label--good { background: #def7e6; color: #11663b; }
.admin-rating-modal__score-label--bad { background: #fde4e4; color: #962020; }
.admin-rating-modal__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin: 0;
padding: 0;
}
.admin-rating-modal__meta > div { margin: 0; }
.admin-rating-modal__meta dt {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b6580;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.admin-rating-modal__meta dd {
margin: 0;
font-size: 0.92rem;
color: #1f1b2d;
line-height: 1.4;
}
.admin-rating-modal__internal-pill {
display: inline-flex;
align-items: center;
padding: 1px 7px;
background: #1f1b2d;
color: #fff7d6;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 999px;
text-transform: uppercase;
}
@media (max-width: 560px) {
.admin-rating-modal__meta { grid-template-columns: 1fr; }
}
.admin-rating-modal__comment-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b6580;
}
.admin-rating-modal__comment {
margin: 0;
padding: 14px 18px;
background: #f8f6ff;
border-left: 3px solid #8247FF;
border-radius: 8px;
font-style: italic;
color: #2f2a44;
font-size: 0.95rem;
line-height: 1.55;
}
.admin-rating-modal__comment--empty {
background: #f4f3f8;
border-left-color: #c8c3d6;
color: #6b6580;
}
/* ===========================================================
Broker "rate 5 to unlock 10% off" loyalty CTA
Shown inline next to the Rate button on unrated delivered orders.
=========================================================== */
.broker-rate-wrap {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.broker-rate-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, #f6f3ff 0%, #ece2ff 100%);
border: 1px solid #d6c8ff;
border-radius: 999px;
font-size: 0.75rem;
color: #4f23c8;
line-height: 1.2;
white-space: nowrap;
}
.broker-rate-cta svg { color: #FFB020; flex-shrink: 0; }
.broker-rate-cta strong { font-weight: 700; color: #2a0f7d; }
.broker-rate-cta__text { white-space: nowrap; }
@media (max-width: 720px) {
.broker-rate-cta__text { white-space: normal; }
.broker-rate-cta { white-space: normal; }
}
/* =========================================================================
ADMIN PORTAL — 9-ITEM BATCH (mmmmm9)
Items 2, 4, 5, 7, 8, 9 styles + helpers
========================================================================= */
/* --- Item 2: File dropzone (deliver leads) --------------------------------- */
.file-dropzone {
display: block;
width: 100%;
border: 2px dashed #cdd2db;
background: #f7f8fb;
border-radius: 12px;
padding: 22px;
text-align: center;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
outline: none;
}
.file-dropzone:hover,
.file-dropzone:focus-visible {
border-color: #6f5cff;
background: #f1efff;
}
.file-dropzone.is-dragging {
border-color: #2a0f7d;
background: #ebe6ff;
}
.file-dropzone__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.file-dropzone__icon {
width: 32px;
height: 32px;
color: #6f5cff;
}
.file-dropzone__title {
font-weight: 600;
font-size: 15px;
color: #1d1b2e;
}
.file-dropzone__hint {
font-size: 13px;
color: #6a6b78;
}
/* Compact variant used inside the Deliver Leads upload+note side-by-side row */
.file-dropzone--compact { padding: 14px 14px; }
.file-dropzone--compact .file-dropzone__inner { gap: 4px; }
.file-dropzone--compact .file-dropzone__icon { width: 22px; height: 22px; }
.file-dropzone--compact .file-dropzone__title { font-size: 13.5px; }
.file-dropzone--compact .file-dropzone__hint { font-size: 12px; }
/* Side-by-side dropzone + note layout (R3.2) */
.deliver-upload-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
}
.deliver-upload-row__drop,
.deliver-upload-row__note { display: flex; flex-direction: column; min-width: 0; }
.deliver-upload-row .file-dropzone { flex: 1; display: flex; align-items: center; justify-content: center; }
.deliver-upload-row__note .field__label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: #2a0f7d;
letter-spacing: 0.01em;
}
.deliver-upload-row__note .field__label::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
flex: none;
}
.deliver-note-area {
width: 100%;
resize: vertical;
min-height: 112px;
padding: 12px 14px;
border: 1px solid #d9d4ec;
border-radius: 10px;
font: inherit;
font-size: 13.5px;
line-height: 1.55;
background:
linear-gradient(#fbfaff, #fbfaff) padding-box,
linear-gradient(180deg, #ece6ff 0%, #f6f3ff 100%) border-box;
color: #1f1f2c;
box-shadow: 0 1px 0 rgba(42, 15, 125, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.deliver-note-area::placeholder {
color: #8b86a3;
font-style: italic;
}
.deliver-note-area:hover {
border-color: #c4b8ec;
}
.deliver-note-area:focus {
outline: none;
border-color: #6f42ff;
background: #fff;
box-shadow: 0 0 0 3px rgba(111, 66, 255, 0.18), 0 1px 2px rgba(42, 15, 125, 0.06);
}
@media (max-width: 720px) {
.deliver-upload-row { grid-template-columns: 1fr; }
}
.file-dropzone__file {
display: inline-block;
margin-top: 8px;
padding: 6px 12px;
background: #2a0f7d;
color: #fff;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* --- Item 4: Notepad icon button + modal ----------------------------------- */
/* Inline-friendly note icon: small, borderless, sits next to short text
like "Disconnected" or a status pill without crowding the cell. */
.admin-note-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: 6px;
border-radius: 6px;
border: 0;
background: transparent;
color: #6f5cff;
cursor: pointer;
vertical-align: middle;
transition: background 0.12s ease, color 0.12s ease;
}
.admin-note-icon-btn:hover,
.admin-note-icon-btn:focus-visible {
background: rgba(130, 71, 255, 0.12);
color: #2a0f7d;
outline: none;
}
.admin-note-icon-btn svg { width: 14px; height: 14px; display: block; }
.admin-note-icon-btn.has-note { color: #2a0f7d; }
.admin-note-modal { max-width: 540px; }
.admin-note-modal__head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px 12px;
border-bottom: 1px solid #ececf2;
}
.admin-note-modal__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #f1efff;
color: #2a0f7d;
}
.admin-note-modal__icon svg { width: 18px; height: 18px; }
.admin-note-modal__head h2 { margin: 0; font-size: 17px; }
.admin-note-modal__body { padding: 18px 22px 22px; }
.admin-note-modal__body textarea {
width: 100%;
min-height: 140px;
font: inherit;
padding: 12px;
border-radius: 10px;
border: 1px solid #d8d9e3;
resize: vertical;
}
/* --- Item 5: Team role select font upgrade --------------------------------- */
#team-role,
#disc-type {
font-family: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1d1b2e;
line-height: 1.4;
padding: 11px 36px 11px 14px;
}
#team-role option,
#disc-type option {
font-size: 14.5px;
font-weight: 500;
font-family: inherit;
padding: 8px;
}
/* --- Items 2 & 7: Admin form selects readability --------------------------- */
.account-form select,
.admin-entry-form select {
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #1d1b2e;
}
/* --- Item 7: Discount create card / form polish (R3.4 condensed) ----------- */
html.is-admin .account-card.discount-create-card,
.account-card.discount-create-card {
background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
border: 1px solid #e6e3f5;
padding: 10px 14px 12px;
margin-bottom: 14px;
}
html.is-admin .discount-create-card .account-card__head,
.discount-create-card .account-card__head {
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid #ececf5;
gap: 8px;
}
.discount-create-card .account-card__head h3 {
font-size: 14px;
letter-spacing: 0.01em;
margin: 0;
line-height: 1.2;
}
.discount-create-card .account-card__head .admin-toolbar__hint { font-size: 11.5px; }
.discount-create-form .account-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
align-items: end;
margin-bottom: 6px;
}
.discount-create-form .account-form__row .form-field { margin-bottom: 0; }
@media (max-width: 560px) {
.discount-create-form .account-form__row { grid-template-columns: 1fr; }
}
.discount-create-form .form-field input,
.discount-create-form .form-field select {
border-radius: 7px;
border: 1px solid #d8d9e3;
padding: 6px 10px;
font-size: 13.5px;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.discount-create-form .form-field input:focus,
.discount-create-form .form-field select:focus {
outline: none;
border-color: #6f5cff;
box-shadow: 0 0 0 3px rgba(111, 92, 255, 0.18);
}
/* R4.3 / R5.1: Type dropdown must match Code input dimensions exactly
(override earlier #disc-type rule). Lock height with explicit
line-height + box-sizing so it cannot grow taller than its siblings. */
.discount-create-form .form-field #disc-type,
html.is-admin .discount-create-form .form-field #disc-type {
padding: 6px 28px 6px 10px;
font-size: 13.5px;
font-weight: 500;
line-height: normal;
height: 32px;
min-height: 0;
box-sizing: border-box;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px 6px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Match all other inputs/selects in the discount form to the same 32px so
the Date control and any browser-specific min-heights cannot push rows
out of alignment. */
.discount-create-form .form-field input,
.discount-create-form .form-field select {
height: 32px;
box-sizing: border-box;
line-height: normal;
}
.discount-create-form .field__label {
font-weight: 600;
font-size: 10.5px;
color: #2a0f7d;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 2px;
}
.discount-create-form .field__hint {
font-size: 11px;
color: #6a6b78;
margin-top: 2px;
line-height: 1.3;
}
.discount-create-form > .form-field { margin-top: 6px; margin-bottom: 0; }
.discount-create-form .account-form__actions {
margin-top: 8px;
}
/* --- Item 8: Filter chips -------------------------------------------------- */
.admin-filter-chips {
display: inline-flex;
gap: 6px;
padding: 4px;
background: #f3f3f8;
border-radius: 999px;
margin: 10px 0 16px;
}
.admin-chip {
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #4a4860;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-chip:hover { color: #2a0f7d; }
.admin-chip.is-active {
background: #fff;
color: #2a0f7d;
box-shadow: 0 1px 3px rgba(20, 12, 60, 0.08);
}
/* --- Item 9: Reviews tabs + source aggregation ----------------------------- */
.reviews-tabs {
display: inline-flex;
gap: 2px;
padding: 4px;
background: #f3f3f8;
border-radius: 10px;
margin: 0 0 18px;
}
.reviews-tab {
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 13.5px;
font-weight: 600;
color: #4a4860;
padding: 9px 18px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.reviews-tab:hover { color: #2a0f7d; }
.reviews-tab.is-active {
background: #fff;
color: #2a0f7d;
box-shadow: 0 1px 3px rgba(20, 12, 60, 0.08);
}
.reviews-pane[hidden] { display: none; }
.admin-table--source-reviews tbody tr.admin-source-row {
cursor: pointer;
transition: background 0.12s ease;
}
.admin-source-row:hover,
.admin-source-row:focus-visible {
background: #f6f3ff;
outline: none;
}
.admin-col-chevron { text-align: right; }
.source-reviews-modal { max-width: 880px; }
.acc-modal__panel--wide { max-width: 880px; width: min(92vw, 880px); }
.source-reviews-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 24px 14px;
border-bottom: 1px solid #ececf2;
}
.source-reviews-modal__head h2 { margin: 0 0 4px; font-size: 18px; }
.source-reviews-modal__body { padding: 16px 24px 22px; max-height: 70vh; overflow-y: auto; }
.source-reviews-modal__back { margin-bottom: 12px; }
.source-reviews-modal__back .link-back {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0; padding: 4px 0;
color: var(--smca-purple, #6f42ff); font-size: 13px; font-weight: 600;
cursor: pointer; letter-spacing: 0.01em;
}
.source-reviews-modal__back .link-back:hover { text-decoration: underline; }
.source-reviews-modal__back .link-back:focus-visible { outline: 2px solid var(--smca-purple, #6f42ff); outline-offset: 2px; border-radius: 4px; }
/* Inline reviews drill breadcrumbs (R3.5) */
.reviews-breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.reviews-breadcrumb__link {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0; padding: 2px 0;
color: var(--smca-purple, #6f42ff); font-size: 13px; font-weight: 600;
cursor: pointer; letter-spacing: 0.01em;
}
.reviews-breadcrumb__link:hover { text-decoration: underline; }
.reviews-breadcrumb__link:focus-visible { outline: 2px solid var(--smca-purple, #6f42ff); outline-offset: 2px; border-radius: 4px; }
.reviews-breadcrumb__sep { color: #9a9aa6; font-size: 13px; }
/* Inline avg star rating used in tables + broker page */
.rating-inline--avg {
display: inline-flex;
align-items: center;
gap: 8px;
}
.rating-inline__num {
font-weight: 700;
font-size: 13.5px;
color: #2a0f7d;
font-variant-numeric: tabular-nums;
}
/* --- Item 1: Clickable broker cell ----------------------------------------- */
.admin-broker-cell--link {
cursor: pointer;
color: #2a0f7d;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color 0.12s ease, color 0.12s ease;
}
.admin-broker-cell--link:hover,
.admin-broker-cell--link:focus-visible {
color: #5a3fff;
border-bottom-color: #5a3fff;
outline: none;
}
/* --- Generic admin card lede text ------------------------------------------ */
.admin-card__lede {
margin: -2px 0 14px;
color: #6a6b78;
font-size: 13.5px;
line-height: 1.5;
}
/* --- Item 9: Broker page ratings summary card ------------------------------ */
.broker-ratings-summary {
display: flex;
flex-direction: column;
gap: 16px;
}
.broker-ratings-summary__overall {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: #faf9ff;
border: 1px solid #ececf6;
border-radius: 12px;
}
.broker-ratings-summary__avg {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.broker-ratings-summary__avg-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #2a0f7d;
}
.broker-ratings-summary__count {
font-size: 13px;
}
.broker-ratings-summary__bysource:empty { display: none; }
/* === R4.4: Review pending/verified action buttons ========================= */
.admin-table--reviews-pending td.review-actions,
.admin-cell-actions.review-actions {
white-space: nowrap;
}
.admin-cell-actions.review-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.review-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 28px;
padding: 0 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.005em;
white-space: nowrap;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.review-action svg { flex: none; display: block; }
.review-action--view {
color: #4a4860;
background: transparent;
border: 1px solid transparent;
}
.review-action--view:hover {
color: #2a0f7d;
background: #f3f0ff;
border-color: #e0d9ff;
}
.review-action--google {
color: #2a0f7d;
background: #fff;
border: 1px solid #d6cdf2;
}
.review-action--google:hover {
background: #f5f1ff;
border-color: #b9acf0;
text-decoration: none;
}
.review-action--issue {
background: #6f42ff;
color: #fff;
border: 1px solid #6f42ff;
}
.review-action--issue:hover {
background: #5a31e6;
border-color: #5a31e6;
}
.review-action--reject,
.btn-icon-danger {
width: 28px;
height: 28px;
padding: 0;
background: #fff;
border: 1px solid #ead4d4;
color: #b3322d;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.review-action--reject:hover,
.btn-icon-danger:hover {
background: #fff1f0;
border-color: #f0b6b1;
color: #8a221d;
}
.review-action--reject:focus-visible,
.btn-icon-danger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(179, 50, 45, 0.22);
}
/* Generic btn-ghost (used by view button). Borderless, hover-tint. */
.btn-ghost {
background: transparent;
border: 1px solid transparent;
color: #4a4860;
}
.btn-ghost:hover {
background: #f3f0ff;
color: #2a0f7d;
border-color: #e0d9ff;
}
/* === R5.2: Split Review/Actions columns ============================== */
.admin-table--reviews-pending .col-review { width: 90px; text-align: left; }
.admin-table--reviews-pending .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.admin-table--reviews-pending td.col-actions {
text-align: right;
}
.admin-table--reviews-pending td.col-actions.review-actions {
display: table-cell; /* override the flex from .review-actions on this column */
white-space: nowrap;
}
.admin-table--reviews-pending td.col-actions .review-action {
margin-left: 6px;
vertical-align: middle;
}
.admin-table--reviews-pending td.col-actions .review-action:first-child { margin-left: 0; }
.admin-table--reviews-pending td.review-view-cell {
text-align: left;
white-space: nowrap;
}
/* ------------------------------------------------------------------
R6.2 Broker overview banner — surfaces auto-applied reward credits
(e.g. verified Google review = 25% off next order).
------------------------------------------------------------------ */
.broker-credit-banner {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 22px;
padding: 14px 18px;
border-radius: 14px;
border: 1px solid rgba(130, 71, 255, 0.28);
background: linear-gradient(135deg, rgba(130, 71, 255, 0.10), rgba(74, 79, 224, 0.06));
color: var(--text-strong, #1a1a2e);
box-shadow: 0 2px 14px rgba(74, 79, 224, 0.06);
}
.broker-credit-banner__icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(130, 71, 255, 0.16);
color: #8247FF;
}
.broker-credit-banner__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.broker-credit-banner__title {
font-size: 15px;
line-height: 1.3;
font-weight: 700;
color: var(--text-strong, #1a1a2e);
}
.broker-credit-banner__sub {
font-size: 13px;
line-height: 1.4;
color: var(--text-muted, #5a5a6e);
}
.broker-credit-banner__dismiss {
flex: 0 0 auto;
appearance: none;
border: 1px solid rgba(130, 71, 255, 0.35);
background: #fff;
color: #6233e0;
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.broker-credit-banner__dismiss:hover {
background: #6233e0;
color: #fff;
border-color: #6233e0;
}
.broker-credit-banner__dismiss:focus-visible {
outline: 2px solid #8247FF;
outline-offset: 2px;
}
@media (max-width: 640px) {
.broker-credit-banner {
flex-wrap: wrap;
}
.broker-credit-banner__dismiss {
width: 100%;
}
}
/* ------------------------------------------------------------------
Discount Codes \u2014 unified Enable / Disable pill toggle.
Matches the trash-icon button (btn-icon-danger) in height + radius so
the action cluster reads as one control bar instead of mixed sizes.
------------------------------------------------------------------ */
.disc-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
vertical-align: middle;
background: #fff;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.disc-toggle-btn svg {
flex: 0 0 auto;
display: block;
}
.disc-toggle-btn:focus-visible {
outline: 2px solid var(--brand, #8247FF);
outline-offset: 2px;
}
/* Disable = amber/orange tint \u2014 pausing, not destructive */
.disc-toggle-btn--disable {
border-color: rgba(217, 119, 6, 0.35);
background: rgba(255, 247, 235, 0.85);
color: #b45309;
}
.disc-toggle-btn--disable:hover {
background: #b45309;
border-color: #b45309;
color: #fff;
}
/* Enable = green tint \u2014 affirmative, brings the code back */
.disc-toggle-btn--enable {
border-color: rgba(22, 163, 74, 0.35);
background: rgba(236, 253, 245, 0.85);
color: #15803d;
}
.disc-toggle-btn--enable:hover {
background: #15803d;
border-color: #15803d;
color: #fff;
}
/* Sit nicely next to the trash icon button */
.admin-cell-actions .disc-toggle-btn + .btn-icon-danger,
.admin-cell-actions .btn-icon-danger + .disc-toggle-btn {
margin-left: 4px;
}
@media (max-width: 720px) {
.disc-toggle-btn span {
/* Keep label visible \u2014 mobile rows have room because actions column wraps */
}
}
/* ------------------------------------------------------------------
Discount Codes Actions cluster — perfectly align the pill toggle
and the trash icon. The global .btn-icon-danger is 28×28 with a 6px
radius; inside the codes table we override via .disc-icon-btn so
both controls share identical height + pill radius + spacing.
------------------------------------------------------------------ */
.admin-table .admin-cell-actions {
white-space: nowrap;
text-align: right;
}
.admin-table .admin-cell-actions .disc-toggle-btn,
.admin-table .admin-cell-actions .btn-icon-danger.disc-icon-btn {
vertical-align: middle;
}
.btn-icon-danger.disc-icon-btn {
width: 30px;
height: 30px;
border-radius: 999px;
}
/* Gap between the pill toggle and the trash; explicit margin overrides
the legacy 4px rule above so both adjacencies are visually identical. */
.admin-cell-actions .disc-toggle-btn + .btn-icon-danger.disc-icon-btn,
.admin-cell-actions .btn-icon-danger.disc-icon-btn + .disc-toggle-btn {
margin-left: 6px;
}
/* When the trash button sits alone (Past tab) keep it flush-right with no
leading margin so the column doesn't look indented. */
.admin-cell-actions > .btn-icon-danger.disc-icon-btn:only-child {
margin-left: 0;
}
/* ============================================================
Admin chat — embedded Tawk dashboard iframe (mmmmmJ)
============================================================ */
.chat-embed {
display: flex;
flex-direction: column;
border: 1px solid var(--c-border, #e5e7eb);
border-radius: 14px;
background: #fff;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.chat-embed__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px;
border-bottom: 1px solid var(--c-border, #e5e7eb);
background: #f8fafc;
flex-wrap: wrap;
}
.chat-embed__status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #475569;
font-weight: 500;
}
.chat-embed__dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #94a3b8;
display: inline-block;
}
.chat-embed__dot[data-state="online"] { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.22); }
.chat-embed__dot[data-state="away"] { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.22); }
.chat-embed__dot[data-state="offline"] { background: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,0.20); }
.chat-embed__dot[data-state="unknown"] { background: #94a3b8; }
.chat-embed__actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.chat-embed__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.chat-embed__frame-wrap {
position: relative;
width: 100%;
height: 720px;
background: #f1f5f9;
}
.chat-embed__frame {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.chat-embed__fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
padding: 24px;
text-align: center;
}
.chat-embed__fallback[hidden] { display: none; }
.chat-embed__fallback-inner {
max-width: 520px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: #475569;
}
.chat-embed__fallback-inner svg { color: #7866ff; }
.chat-embed__fallback-inner h3 {
margin: 4px 0 0 0;
font-size: 18px;
color: #0f172a;
}
.chat-embed__fallback-inner p {
margin: 0;
font-size: 14px;
line-height: 1.55;
}
.chat-embed__fallback-inner .btn { margin-top: 8px; }
.chat-inbox-secondary {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px;
margin-top: 20px;
}
@media (max-width: 880px) {
.chat-inbox-secondary { grid-template-columns: 1fr !important; }
.chat-embed__frame-wrap { height: 560px; }
}
.chat-inbox-secondary .chat-inbox__how,
.chat-inbox-secondary .chat-inbox__team {
background: #fff;
border: 1px solid var(--c-border, #e5e7eb);
border-radius: 12px;
padding: 18px 20px;
/* Reset legacy grid-area values inherited from the old .chat-inbox grid. */
grid-area: auto !important;
grid-column: auto !important;
grid-row: auto !important;
}
.chat-inbox-secondary h4 {
margin: 0 0 8px 0;
font-size: 14px;
color: #0f172a;
font-weight: 600;
}
.chat-inbox-secondary ol {
margin: 0;
padding-left: 18px;
color: #475569;
font-size: 13.5px;
line-height: 1.6;
}
.chat-inbox-secondary ol li + li { margin-top: 4px; }
.chat-inbox-secondary p { font-size: 13.5px; color: #475569; line-height: 1.55; margin: 0 0 6px 0; }
.chat-inbox-secondary .chat-inbox__note { color: #64748b; font-style: italic; font-size: 12.5px; }
/* ============ Tawk launcher (replaces broken iframe embed) ============ */
.chat-launcher {
background: #fff;
border: 1px solid var(--c-border, #e5e7eb);
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 24px;
}
.chat-launcher__status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #64748b;
padding: 6px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
align-self: flex-start;
}
.chat-launcher__hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: flex-start;
}
.chat-launcher__icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7866ff 0%, #9b8aff 100%);
color: #fff;
border-radius: 16px;
flex-shrink: 0;
}
.chat-launcher__copy h3 {
margin: 0 0 8px 0;
font-size: 19px;
font-weight: 600;
color: #0f172a;
}
.chat-launcher__copy p {
margin: 0 0 18px 0;
font-size: 14px;
color: #475569;
line-height: 1.6;
}
.chat-launcher__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.chat-launcher__actions .btn-lg {
padding: 11px 20px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.chat-launcher__shortcuts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding-top: 20px;
border-top: 1px solid #eef0f4;
}
.chat-launcher__shortcut {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.chat-launcher__shortcut:hover {
background: #f1f0ff;
border-color: #cdc4ff;
transform: translateY(-1px);
}
.chat-launcher__shortcut-label {
font-size: 13.5px;
font-weight: 600;
color: #0f172a;
}
.chat-launcher__shortcut-desc {
font-size: 12.5px;
color: #64748b;
line-height: 1.45;
}
@media (max-width: 720px) {
.chat-launcher { padding: 20px; }
.chat-launcher__hero { grid-template-columns: 1fr; }
.chat-launcher__icon { width: 48px; height: 48px; }
.chat-launcher__shortcuts { grid-template-columns: 1fr; }
}
/* =========================================================================
MESSAGES INBOX — native chat (smoother v2)
========================================================================= */
/* Panel header with right-aligned actions */
.account-panel__head--with-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.account-panel__head-actions {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
/* Live status pill */
.inbox__live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 9px;
border-radius: 999px;
background: #ecfdf5;
color: #047857;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid #a7f3d0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.inbox__live-pill.is-offline {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
.inbox__live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
animation: inbox-live-pulse 2s ease-in-out infinite;
}
.inbox__live-pill.is-offline .inbox__live-dot {
background: #ef4444;
animation: none;
}
@keyframes inbox-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* Nav badge pulse — for the Messages nav item */
.nav-badge--pulse {
position: relative;
background: #ef4444;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
animation: inbox-nav-pulse 2.2s ease-in-out infinite;
}
@keyframes inbox-nav-pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
/* Main grid */
.inbox {
display: grid;
grid-template-columns: 320px 1fr;
gap: 0;
height: 700px;
max-height: calc(100vh - 220px);
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
@media (max-width: 980px) {
.inbox { grid-template-columns: 1fr; height: auto; max-height: none; }
}
/* ---- Sidebar ---- */
.inbox__sidebar {
display: flex;
flex-direction: column;
background: #fbfbfd;
border-right: 1px solid #eef0f4;
min-height: 0;
}
.inbox__sidebar-head {
padding: 14px 14px 10px;
background: #fff;
border-bottom: 1px solid #eef0f4;
}
.inbox__search {
position: relative;
margin-bottom: 10px;
}
.inbox__search svg {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
pointer-events: none;
}
.inbox__search input {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 9px 11px 9px 34px;
font-size: 13px;
background: #f8fafc;
outline: none;
transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.inbox__search input:focus {
border-color: #7866ff;
background: #fff;
box-shadow: 0 0 0 3px rgba(120, 102, 255, 0.13);
}
/* Filter chips */
.inbox__filters {
display: flex;
gap: 4px;
}
.inbox__filter {
flex: 1;
border: 1px solid transparent;
background: transparent;
padding: 6px 8px;
border-radius: 8px;
font: 600 12px/1 system-ui, -apple-system, Segoe UI, sans-serif;
color: #64748b;
cursor: pointer;
transition: background 0.18s, color 0.18s, border-color 0.18s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}
.inbox__filter:hover { background: #f1f5f9; color: #0f172a; }
.inbox__filter.is-active {
background: #f1f0ff;
border-color: #cdc4ff;
color: #5d4cff;
}
.inbox__filter-count {
background: #e2e8f0;
color: #475569;
font-size: 10.5px;
padding: 1px 6px;
border-radius: 999px;
min-width: 18px;
text-align: center;
transition: background 0.18s, color 0.18s;
}
.inbox__filter.is-active .inbox__filter-count {
background: #5d4cff;
color: #fff;
}
/* Conversation list */
.inbox__list {
flex: 1;
overflow-y: auto;
padding: 6px;
scroll-behavior: smooth;
}
.inbox__list::-webkit-scrollbar { width: 8px; }
.inbox__list::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
border: 2px solid #fbfbfd;
}
.inbox__list-empty {
text-align: center;
color: #94a3b8;
font-size: 13px;
padding: 40px 16px;
}
.inbox__list-item {
width: 100%;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
padding: 10px;
display: flex;
gap: 11px;
align-items: flex-start;
cursor: pointer;
text-align: left;
transition: background 0.14s, border-color 0.14s, transform 0.06s;
margin-bottom: 3px;
position: relative;
}
.inbox__list-item:hover {
background: #fff;
border-color: #e5e7eb;
}
.inbox__list-item:active { transform: scale(0.995); }
.inbox__list-item.is-active {
background: #fff;
border-color: #cdc4ff;
box-shadow: 0 2px 12px rgba(120, 102, 255, 0.10);
}
.inbox__list-item.is-unread::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 26px;
border-radius: 2px;
background: #5d4cff;
}
.inbox__list-item.is-unread .inbox__list-name { color: #0f172a; font-weight: 700; }
.inbox__list-item.is-unread .inbox__list-snippet { color: #1e293b; font-weight: 500; }
.inbox__list-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #7866ff, #5d4cff);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font: 700 13px/1 system-ui;
text-transform: uppercase;
flex-shrink: 0;
letter-spacing: 0.3px;
}
.inbox__list-meta { flex: 1; min-width: 0; }
.inbox__list-top {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
margin-bottom: 3px;
}
.inbox__list-name {
font: 600 13.5px/1.2 system-ui;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox__list-time {
font-size: 11px;
color: #94a3b8;
flex-shrink: 0;
}
.inbox__list-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.inbox__list-snippet {
font-size: 12.5px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
line-height: 1.4;
}
.inbox__list-badge {
background: #ef4444;
color: #fff;
font: 700 10.5px/1 system-ui;
padding: 3px 7px;
border-radius: 999px;
flex-shrink: 0;
min-width: 18px;
text-align: center;
}
/* Desktop notification banner */
.inbox__notif-banner {
margin: 8px;
padding: 10px 12px;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border: 1px solid #ddd6fe;
border-radius: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.inbox__notif-banner[hidden] { display: none; }
.inbox__notif-banner-text { flex: 1; min-width: 0; }
.inbox__notif-banner-text strong {
display: block;
font-size: 12.5px;
color: #4c1d95;
font-weight: 700;
margin-bottom: 1px;
}
.inbox__notif-banner-text span {
display: block;
font-size: 11.5px;
color: #6d28d9;
line-height: 1.35;
}
.inbox__notif-banner-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.inbox__notif-banner-dismiss {
background: transparent;
border: 0;
font-size: 20px;
line-height: 1;
color: #6d28d9;
cursor: pointer;
padding: 0 4px;
opacity: 0.7;
transition: opacity 0.15s;
}
.inbox__notif-banner-dismiss:hover { opacity: 1; }
/* ---- Main pane ---- */
.inbox__main {
display: grid;
grid-template-columns: 1fr 270px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"head identity"
"msgs identity"
"comp identity";
min-height: 0;
background: #fff;
}
@media (max-width: 1200px) {
.inbox__main {
grid-template-columns: 1fr;
grid-template-areas: "head" "msgs" "comp";
}
.inbox__identity { display: none !important; }
}
.inbox__empty {
grid-column: 1 / -1;
grid-row: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
color: #64748b;
}
.inbox__empty-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: #7c6cff;
}
.inbox__empty h3 { margin: 0 0 6px; color: #0f172a; font-size: 17px; font-weight: 700; }
.inbox__empty p { margin: 0; max-width: 360px; font-size: 13.5px; line-height: 1.55; }
/* Thread */
.inbox__thread {
grid-area: 1 / 1 / 4 / 2;
display: contents;
}
.inbox__thread[hidden] { display: none; }
.inbox__thread-head {
grid-area: head;
padding: 14px 18px;
border-bottom: 1px solid #eef0f4;
display: flex;
align-items: center;
gap: 12px;
background: #fff;
}
.inbox__thread-identity {
display: flex;
gap: 12px;
align-items: center;
flex: 1;
min-width: 0;
}
.inbox__thread-identity-text { min-width: 0; }
.inbox__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #7866ff, #5d4cff);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 system-ui;
text-transform: uppercase;
flex-shrink: 0;
letter-spacing: 0.3px;
}
.inbox__thread-name {
font: 700 15px/1.2 system-ui;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox__thread-sub {
font-size: 12.5px;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox__thread-actions { display: flex; gap: 6px; }
.inbox__thread-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 11px;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #475569;
font: 600 12.5px/1 system-ui;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.inbox__thread-action:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #0f172a;
}
/* Messages list */
.inbox__messages {
grid-area: msgs;
overflow-y: auto;
padding: 20px 22px;
background: linear-gradient(180deg, #fafbfc 0%, #f6f8fb 100%);
display: flex;
flex-direction: column;
gap: 14px;
scroll-behavior: smooth;
}
.inbox__messages::-webkit-scrollbar { width: 8px; }
.inbox__messages::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
.inbox__messages-empty {
text-align: center;
color: #94a3b8;
font-size: 13px;
padding: 40px;
}
/* Day separator */
.inbox__day-sep {
align-self: center;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
background: #fff;
padding: 3px 12px;
border-radius: 999px;
border: 1px solid #e5e7eb;
margin: 4px 0;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.inbox__msg {
display: flex;
flex-direction: column;
max-width: 72%;
animation: inbox-msg-in 0.22s ease-out;
}
@keyframes inbox-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.inbox__msg[data-sender="admin"] { align-self: flex-end; align-items: flex-end; }
.inbox__msg[data-sender="visitor"] { align-self: flex-start; align-items: flex-start; }
.inbox__msg-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
margin-bottom: 4px;
padding: 0 8px;
}
.inbox__msg-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
white-space: pre-wrap;
max-width: 100%;
}
.inbox__msg[data-sender="admin"] .inbox__msg-bubble {
background: linear-gradient(135deg, #7866ff, #5d4cff);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 1px 3px rgba(93, 76, 255, 0.20);
}
.inbox__msg[data-sender="visitor"] .inbox__msg-bubble {
background: #fff;
color: #0f172a;
border: 1px solid #e5e7eb;
border-bottom-left-radius: 4px;
}
.inbox__msg-time {
font-size: 10.5px;
color: #94a3b8;
margin-top: 4px;
padding: 0 8px;
}
/* Typing-pulse "broker is typing" dots (rendered when broker typing) */
.inbox__typing {
align-self: flex-start;
display: inline-flex;
gap: 4px;
padding: 10px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px 16px 16px 4px;
margin-top: -4px;
}
.inbox__typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #94a3b8;
animation: inbox-typing 1.2s infinite ease-in-out;
}
.inbox__typing span:nth-child(2) { animation-delay: 0.15s; }
.inbox__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes inbox-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-3px); opacity: 1; }
}
/* Compose */
.inbox__compose {
grid-area: comp;
padding: 12px 14px;
border-top: 1px solid #eef0f4;
background: #fff;
display: flex;
gap: 10px;
align-items: flex-end;
}
.inbox__compose-input {
flex: 1;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 10px 14px;
font: 14px/1.5 system-ui;
resize: none;
max-height: 140px;
min-height: 40px;
outline: none;
background: #f8fafc;
transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.inbox__compose-input:focus {
border-color: #7866ff;
background: #fff;
box-shadow: 0 0 0 3px rgba(120, 102, 255, 0.13);
}
.inbox__compose-send {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: linear-gradient(135deg, #7866ff, #5d4cff);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(93, 76, 255, 0.25);
transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.inbox__compose-send:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(93, 76, 255, 0.35);
}
.inbox__compose-send:active { transform: scale(0.97); }
.inbox__compose-send:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ---- Identity sidebar ---- */
.inbox__identity {
grid-area: identity;
border-left: 1px solid #eef0f4;
padding: 16px 18px;
background: #fbfbfd;
overflow-y: auto;
}
.inbox__identity[hidden] { display: none; }
.inbox__identity h4 {
margin: 0 0 14px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #64748b;
}
.inbox__identity-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.inbox__identity-list > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.inbox__identity-list dt {
font-size: 10.5px;
color: #94a3b8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.inbox__identity-list dd {
margin: 0;
font-size: 13px;
color: #0f172a;
word-break: break-word;
line-height: 1.4;
}
.inbox__identity-vid {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px !important;
color: #64748b !important;
}
.inbox__identity-link {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: #6d4cff;
text-align: left;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(109, 76, 255, 0.4);
text-underline-offset: 2px;
word-break: break-word;
transition: color 0.15s;
}
.inbox__identity-link:hover,
.inbox__identity-link:focus-visible {
color: #5a36ff;
text-decoration-color: currentColor;
outline: none;
}
/* ==========================================================================
INBOX TABS — Chats / Forms
Sits above the search/filters in the sidebar.
========================================================================== */
.inbox__tabs {
display: flex;
gap: 4px;
padding: 10px 12px 0;
border-bottom: 1px solid #eef1f6;
background: #fafbfc;
}
.inbox__tab {
appearance: none;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 7px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #64748b;
padding: 9px 14px 11px;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.inbox__tab svg { opacity: 0.7; }
.inbox__tab:hover { color: #0f172a; }
.inbox__tab.is-active {
color: #6d4cff;
border-bottom-color: #6d4cff;
}
.inbox__tab.is-active svg { opacity: 1; }
.inbox__tab-badge {
background: #6d4cff;
color: white;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 999px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.inbox__tab:not(.is-active) .inbox__tab-badge {
background: #cbd5e1;
}
/* Form-mode visual differentiation */
.inbox__list-item--form .inbox__list-avatar {
background: linear-gradient(135deg, #f0c020, #f08020);
color: white;
}
.inbox__list-item--form .inbox__list-name::after {
content: " · form";
color: #94a3b8;
font-weight: 500;
font-size: 11px;
}
/* When in forms mode, hide the per-conv filter chips (Unread/Archived still apply) */
.inbox[data-inbox-tab="forms"] .inbox__filter[data-inbox-filter="unread"] .inbox__filter-count {
display: none;
}
/* Form submission thread (read-only, replaces chat thread/compose) */
.inbox__thread--form {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.inbox__avatar--form {
background: linear-gradient(135deg, #f0c020, #f08020);
}
.inbox__form-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 24px 28px;
background: #fafbfc;
}
.inbox__form-block {
background: white;
border: 1px solid #eef1f6;
border-radius: 12px;
padding: 20px 22px;
margin-bottom: 16px;
}
.inbox__form-block-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
margin: 0 0 12px;
}
.inbox__form-message {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.6;
color: #0f172a;
margin: 0;
}
.inbox__form-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px 24px;
margin: 0;
}
.inbox__form-field {
margin: 0;
}
.inbox__form-field dt {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 4px;
}
.inbox__form-field dd {
font-size: 14px;
color: #0f172a;
margin: 0;
word-break: break-word;
}
.inbox__form-field dd a {
color: #6d4cff;
text-decoration: none;
}
.inbox__form-field dd a:hover { text-decoration: underline; }
.inbox__form-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 12px;
color: #64748b;
padding-top: 4px;
}
.inbox__form-meta strong {
color: #0f172a;
font-weight: 600;
}
.inbox__identity--form h4 { color: #d97706; }
.inbox__thread-action[href]:hover { background: #f1f5f9; }
/* ===== End-chat: admin Close button + Closed-conversation indicators ===== */
.inbox__thread-action--close { color: #b45309; }
.inbox__thread-action--close:hover {
background: #fff7ed;
border-color: #fed7aa;
color: #9a3412;
}
.inbox__thread-action--close:disabled,
.inbox__thread-action--close.is-closed {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
cursor: default;
opacity: 0.85;
}
.inbox__thread-action--close.is-closed:hover {
background: #f1f5f9;
border-color: #e2e8f0;
}
/* Closed badge in conversation list */
.inbox__list-tag {
display: inline-block;
font: 600 10.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
white-space: nowrap;
}
.inbox__list-tag--closed {
background: #f1f5f9;
color: #64748b;
border: 1px solid #e2e8f0;
}
/* Dim closed conversation rows slightly */
.inbox__list-item.is-closed .inbox__list-name,
.inbox__list-item.is-closed .inbox__list-snippet {
color: #94a3b8;
}
.inbox__list-item.is-closed .inbox__list-avatar { opacity: 0.7; }
/* ============================== BROKER REVIEW PROMPT (overview) ============================== */
.broker-review-prompt {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
margin: 0 0 18px 0;
background: linear-gradient(135deg, #fff8e1, #fffaf0);
border: 1px solid #fde68a;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.08);
}
.broker-review-prompt__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fbbf24;
color: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
}
.broker-review-prompt__body { flex: 1; min-width: 0; }
.broker-review-prompt__title {
font: 600 15px/1.3 inherit;
color: #78350f;
margin-bottom: 4px;
}
.broker-review-prompt__sub {
font-size: 13px;
color: #92400e;
line-height: 1.5;
}
.broker-review-prompt__actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.broker-review-prompt__dismiss {
font-size: 12.5px;
color: #92400e;
background: transparent;
border: none;
cursor: pointer;
padding: 6px 8px;
text-decoration: underline;
}
.broker-review-prompt__dismiss:hover { color: #78350f; }
@media (max-width: 720px) {
.broker-review-prompt { flex-direction: column; align-items: flex-start; gap: 12px; }
.broker-review-prompt__actions { width: 100%; }
.broker-review-prompt__cta { flex: 1; text-align: center; }
}
/* ============================== BROKER MESSAGES (DM panel) — v2 ============================== */
.broker-messages {
--bm-bg: #ffffff;
--bm-rail-bg: #fafbfc;
--bm-thread-bg: #f5f6f8;
--bm-border: #e6e8ec;
--bm-border-soft: #eef0f3;
--bm-text: #0f172a;
--bm-muted: #6b7280;
--bm-faint: #9aa1ab;
--bm-accent: #6c5ce7;
--bm-accent-hover: #5849d6;
--bm-online: #10b981;
display: grid;
grid-template-columns: 280px 1fr;
background: var(--bm-bg);
border: 1px solid var(--bm-border);
border-radius: 16px;
overflow: hidden;
height: 680px;
max-height: 80vh;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}
/* ---------- LEFT RAIL ---------- */
.broker-messages__rail {
display: flex;
flex-direction: column;
background: var(--bm-rail-bg);
border-right: 1px solid var(--bm-border);
min-width: 0;
}
.broker-messages__rail-head {
padding: 18px 18px 12px;
border-bottom: 1px solid var(--bm-border-soft);
}
.broker-messages__rail-title {
font: 600 11px/1 inherit;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--bm-faint);
}
.broker-messages__rail-list {
flex: 1;
list-style: none;
margin: 0;
padding: 6px 8px;
overflow-y: auto;
}
.broker-messages__contact {
display: flex;
gap: 12px;
padding: 12px 12px;
border-radius: 10px;
cursor: pointer;
align-items: center;
transition: background 0.15s;
margin-bottom: 2px;
}
.broker-messages__contact:hover { background: rgba(108, 92, 231, 0.06); }
.broker-messages__contact.is-active {
background: rgba(108, 92, 231, 0.1);
}
.broker-messages__contact.is-active .broker-messages__contact-name { color: var(--bm-accent); }
.broker-messages__contact-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.broker-messages__contact-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.broker-messages__contact-name {
font: 600 13.5px/1.3 inherit;
color: var(--bm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.broker-messages__contact-time {
font-size: 11px;
color: var(--bm-faint);
flex-shrink: 0;
}
.broker-messages__contact-preview {
font: 12.5px/1.4 inherit;
color: var(--bm-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.broker-messages__contact-badge {
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--bm-accent);
color: #fff;
font: 600 10.5px/18px inherit;
text-align: center;
flex-shrink: 0;
}
.broker-messages__rail-foot {
padding: 12px 18px;
border-top: 1px solid var(--bm-border-soft);
}
.broker-messages__status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--bm-muted);
font-weight: 500;
}
.broker-messages__status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bm-online);
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
display: inline-block;
}
/* ---------- AVATAR ---------- */
.broker-messages__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 12px/1 inherit;
color: #fff;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.broker-messages__avatar--brand {
background: linear-gradient(135deg, #6c5ce7 0%, #4834d4 100%);
box-shadow: 0 2px 6px rgba(72, 52, 212, 0.25);
}
.broker-messages__avatar--lg {
width: 44px;
height: 44px;
font-size: 13px;
}
.broker-messages__avatar--sm {
width: 26px;
height: 26px;
font-size: 10px;
}
.broker-messages__avatar-spacer {
width: 26px;
height: 26px;
display: inline-block;
flex-shrink: 0;
}
/* Logo-bearing avatar variant — rectangular, white bg with the wordmark inside */
.broker-messages__avatar--logo {
width: 56px;
height: 44px;
border-radius: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
padding: 6px 8px;
overflow: hidden;
}
.broker-messages__avatar--logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ---------- MAIN PANE ---------- */
.broker-messages__main {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--bm-thread-bg);
}
.broker-messages__main-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 22px;
background: var(--bm-bg);
border-bottom: 1px solid var(--bm-border-soft);
flex-shrink: 0;
}
.broker-messages__peer {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.broker-messages__peer-meta {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.broker-messages__peer-name {
font: 600 15px/1.2 inherit;
color: var(--bm-text);
display: flex;
align-items: center;
gap: 6px;
}
.broker-messages__verified {
display: inline-flex;
color: #4834d4;
}
.broker-messages__peer-sub {
margin-top: 0;
font: 600 14px/1.2 inherit;
color: var(--bm-muted);
display: inline-flex;
align-items: center;
gap: 8px;
}
.broker-messages__peer-actions {
display: flex;
align-items: center;
gap: 8px;
}
.broker-messages__chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: #ecfdf5;
color: #047857;
font: 600 11px/1 inherit;
border-radius: 999px;
letter-spacing: 0.3px;
}
.broker-messages__chip::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
/* ---------- THREAD ---------- */
.broker-messages__thread {
flex: 1;
overflow-y: auto;
padding: 22px 28px 12px;
display: flex;
flex-direction: column;
gap: 2px;
scroll-behavior: smooth;
}
.broker-messages__thread::-webkit-scrollbar { width: 8px; }
.broker-messages__thread::-webkit-scrollbar-track { background: transparent; }
.broker-messages__thread::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.12);
border-radius: 999px;
}
.broker-messages__day {
text-align: center;
margin: 18px 0 10px;
position: relative;
}
.broker-messages__day::before,
.broker-messages__day::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 60px);
height: 1px;
background: var(--bm-border);
}
.broker-messages__day::before { left: 0; }
.broker-messages__day::after { right: 0; }
.broker-messages__day span {
display: inline-block;
padding: 3px 12px;
background: var(--bm-thread-bg);
font: 600 11px/1.4 inherit;
color: var(--bm-faint);
letter-spacing: 0.4px;
text-transform: uppercase;
position: relative;
}
/* ---------- EMPTY STATE ---------- */
.broker-messages__empty {
margin: auto;
text-align: center;
max-width: 360px;
padding: 28px 24px;
background: var(--bm-bg);
border: 1px solid var(--bm-border-soft);
border-radius: 16px;
}
.broker-messages__empty-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(108, 92, 231, 0.1), rgba(108, 92, 231, 0.04));
color: var(--bm-accent);
}
.broker-messages__empty-title {
font: 600 16px/1.3 inherit;
color: var(--bm-text);
margin-bottom: 6px;
}
.broker-messages__empty-sub {
font: 13px/1.5 inherit;
color: var(--bm-muted);
}
/* ---------- SKELETON ---------- */
.broker-messages__skeleton {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.broker-messages__skeleton-bubble {
height: 36px;
width: 220px;
border-radius: 14px;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.1) 50%, rgba(15, 23, 42, 0.06) 75%);
background-size: 200% 100%;
animation: bm-shimmer 1.4s ease-in-out infinite;
}
.broker-messages__skeleton-bubble--them { align-self: flex-start; }
.broker-messages__skeleton-bubble--me { align-self: flex-end; width: 180px; }
.broker-messages__skeleton-bubble--short { width: 120px; }
@keyframes bm-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---------- ROWS + BUBBLES ---------- */
.broker-messages__row {
display: flex;
align-items: flex-end;
gap: 8px;
margin: 1px 0;
}
.broker-messages__row--them { justify-content: flex-start; }
.broker-messages__row--me { justify-content: flex-end; }
.broker-messages__row.is-last { margin-bottom: 8px; }
.broker-messages__bubble-wrap {
display: flex;
flex-direction: column;
max-width: 70%;
min-width: 0;
}
.broker-messages__row--me .broker-messages__bubble-wrap { align-items: flex-end; }
.broker-messages__row--them .broker-messages__bubble-wrap { align-items: flex-start; }
.broker-messages__bubble {
padding: 9px 14px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
white-space: pre-wrap;
border-radius: 18px;
max-width: 100%;
}
.broker-messages__bubble--me {
background: linear-gradient(135deg, #6c5ce7 0%, #5849d6 100%);
color: #fff;
box-shadow: 0 1px 2px rgba(108, 92, 231, 0.25);
}
.broker-messages__bubble--them {
background: var(--bm-bg);
color: var(--bm-text);
border: 1px solid var(--bm-border-soft);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* Stacked-bubble corner sharpening (chat-app feel) */
.broker-messages__row--me .broker-messages__bubble { border-bottom-right-radius: 6px; }
.broker-messages__row--me.is-first .broker-messages__bubble { border-top-right-radius: 18px; }
.broker-messages__row--me:not(.is-first) .broker-messages__bubble { border-top-right-radius: 6px; }
.broker-messages__row--me.is-last .broker-messages__bubble { border-bottom-right-radius: 18px; }
.broker-messages__row--them .broker-messages__bubble { border-bottom-left-radius: 6px; }
.broker-messages__row--them.is-first .broker-messages__bubble { border-top-left-radius: 18px; }
.broker-messages__row--them:not(.is-first) .broker-messages__bubble { border-top-left-radius: 6px; }
.broker-messages__row--them.is-last .broker-messages__bubble { border-bottom-left-radius: 18px; }
.broker-messages__bubble-time {
font-size: 11px;
color: var(--bm-faint);
margin: 4px 4px 0;
}
/* ---------- ATTACHMENTS IN BUBBLES ---------- */
.broker-messages__bubble-att { margin-top: 6px; }
.broker-messages__att {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 11px;
border-radius: 10px;
text-decoration: none;
font-size: 12.5px;
max-width: 100%;
background: rgba(255, 255, 255, 0.18);
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.broker-messages__bubble--them .broker-messages__att {
background: #f3f4f6;
border-color: var(--bm-border-soft);
color: var(--bm-text);
}
.broker-messages__att--img {
padding: 0;
border: 1px solid rgba(15, 23, 42, 0.08);
background: transparent;
overflow: hidden;
display: block;
}
.broker-messages__att--img img {
display: block;
max-width: 260px;
max-height: 200px;
border-radius: 10px;
}
.broker-messages__att-meta { display: flex; flex-direction: column; min-width: 0; }
.broker-messages__att-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.broker-messages__att-size { font-size: 10.5px; opacity: 0.75; margin-top: 1px; }
/* ---------- ATTACH PREVIEW (above composer) ---------- */
.broker-messages__attach-preview {
display: flex;
align-items: center;
gap: 11px;
margin: 0 22px 8px;
padding: 10px 14px;
background: rgba(108, 92, 231, 0.08);
border: 1px solid rgba(108, 92, 231, 0.18);
border-radius: 10px;
color: var(--bm-text);
font-size: 13px;
}
.broker-messages__attach-preview-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(108, 92, 231, 0.15);
color: var(--bm-accent);
border-radius: 8px;
flex-shrink: 0;
}
.broker-messages__attach-preview-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.broker-messages__attach-preview-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.broker-messages__attach-preview-sub {
font-size: 11.5px;
color: var(--bm-muted);
margin-top: 1px;
}
.broker-messages__attach-preview-clear {
border: none;
background: transparent;
cursor: pointer;
color: var(--bm-muted);
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.broker-messages__attach-preview-clear:hover {
background: rgba(15, 23, 42, 0.06);
color: var(--bm-text);
}
/* ---------- COMPOSER ---------- */
.broker-messages__composer {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px 22px 18px;
background: var(--bm-thread-bg);
flex-shrink: 0;
}
.broker-messages__attach {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bm-bg);
border: 1px solid var(--bm-border);
border-radius: 12px;
cursor: pointer;
color: var(--bm-muted);
flex-shrink: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.broker-messages__attach:hover {
background: rgba(108, 92, 231, 0.08);
color: var(--bm-accent);
border-color: rgba(108, 92, 231, 0.3);
}
.broker-messages__attach:active { transform: scale(0.96); }
.broker-messages__composer-input {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bm-bg);
border: 1px solid var(--bm-border);
border-radius: 14px;
padding: 10px 14px 8px;
transition: border-color 0.15s, box-shadow 0.15s;
min-width: 0;
}
.broker-messages__composer-input:focus-within {
border-color: var(--bm-accent);
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}
.broker-messages__composer textarea {
width: 100%;
border: none;
outline: none;
background: transparent;
font: 14px/1.5 inherit;
resize: none;
min-height: 22px;
max-height: 140px;
padding: 0;
color: var(--bm-text);
}
.broker-messages__composer textarea::placeholder { color: var(--bm-faint); }
.broker-messages__composer-hint {
font-size: 10.5px;
color: var(--bm-faint);
margin-top: 4px;
letter-spacing: 0.2px;
}
.broker-messages__send {
width: 42px;
height: 42px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #6c5ce7 0%, #4834d4 100%);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(72, 52, 212, 0.3);
transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.broker-messages__send:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(72, 52, 212, 0.4);
}
.broker-messages__send:active { transform: translateY(0) scale(0.96); }
.broker-messages__send:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.broker-messages__send svg { transform: translate(-1px, 1px); }
/* ---------- SINGLE-CONVERSATION VARIANT (no rail) ---------- */
/* Align flush-left with the surrounding account-panel content (no centering). */
.broker-messages--single {
grid-template-columns: 1fr;
max-width: none;
margin: 0;
width: 100%;
}
.broker-messages--single .broker-messages__rail { display: none; }
/* Status dot colors — green when online, gray when offline */
.broker-messages__peer-sub[data-broker-messages-status][data-online="true"] .broker-messages__status-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.broker-messages__peer-sub[data-broker-messages-status][data-online="false"] .broker-messages__status-dot { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18); }
.broker-messages__peer-sub[data-broker-messages-status][data-online="true"] [data-status-text] { color: #16a34a; font-weight: 600; }
.broker-messages__peer-sub[data-broker-messages-status][data-online="false"] [data-status-text] { color: #6b7280; }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
.broker-messages {
grid-template-columns: 1fr;
height: 600px;
}
.broker-messages__rail {
display: none;
}
.broker-messages__thread { padding: 16px 16px 8px; }
.broker-messages__bubble-wrap { max-width: 85%; }
.broker-messages__main-head { padding: 12px 16px; }
.broker-messages__composer { padding: 12px 16px 14px; }
.broker-messages__attach-preview { margin: 0 16px 6px; }
}
/* ============================================================
BROKER OVERVIEW STAT CARDS — STRONGER VISUAL SEPARATION
(Marcel: "doesnt flow well it looks too much like its the background")
============================================================ */
html.is-broker .broker-stats .stat-card,
html.is-admin .admin-stats .stat-card {
background: #ffffff !important;
border: 1px solid #dfe3eb !important;
border-radius: 16px !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 8px 24px rgba(15, 23, 42, 0.05) !important;
padding: 20px 22px !important;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
html.is-broker .broker-stats .stat-card:hover,
html.is-admin .admin-stats .stat-card:hover {
transform: translateY(-2px) !important;
border-color: #cbd2dd !important;
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 14px 36px rgba(15, 23, 42, 0.10) !important;
}
/* Icon chip — give it a colored bg so it pops, not just an outline */
html.is-broker .broker-stats .stat-card .stat-card__icon,
html.is-admin .admin-stats .stat-card .stat-card__icon {
position: absolute !important;
top: 18px;
right: 18px;
width: 38px;
height: 38px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0eaff 0%, #e7e0ff 100%) !important;
color: #6e3eff !important;
border-radius: 12px !important;
border: 1px solid #e5dcff !important;
}
/* Cycle accent colors across the 4 KPI cards for visual rhythm */
html.is-broker .broker-stats .stat-card:nth-child(2) .stat-card__icon {
background: linear-gradient(135deg, #e6f4ff 0%, #d5ecff 100%) !important;
color: #1e6fd9 !important;
border-color: #cfe4fb !important;
}
html.is-broker .broker-stats .stat-card:nth-child(3) .stat-card__icon {
background: linear-gradient(135deg, #e6fbf0 0%, #d3f5e1 100%) !important;
color: #16a34a !important;
border-color: #c8eed7 !important;
}
html.is-broker .broker-stats .stat-card:nth-child(4) .stat-card__icon {
background: linear-gradient(135deg, #fff2e0 0%, #ffe7c8 100%) !important;
color: #c2570a !important;
border-color: #fcd9ad !important;
}
html.is-broker .broker-stats .stat-card .stat-card__label {
font-size: 12px !important;
font-weight: 600 !important;
color: #5a6173 !important;
margin-bottom: 8px !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
padding-right: 50px; /* keep clear of icon */
}
html.is-broker .broker-stats .stat-card .stat-card__value {
font-size: 30px !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: #0f172a !important;
margin: 0 0 6px !important;
}
html.is-broker .broker-stats .stat-card .stat-card__meta {
font-size: 12px !important;
color: #6b7280 !important;
}
/* ============================================================
ENTRY-FORM SYSTEM — Custom Order + Replacement Request
(Marcel: "UI should be nicer for entry sections")
============================================================ */
.account-card--entry {
border: 1px solid #e2e6ee;
border-radius: 18px;
background: #ffffff;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 10px 30px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.account-card--entry .account-card__head--flush {
padding: 22px 26px 18px;
border-bottom: 1px solid #eef0f5;
background: linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
}
.account-card--entry .account-card__head--flush h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 4px;
color: #0f172a;
}
.account-card--entry .account-card__lede {
font-size: 13px;
color: #5a6173;
margin: 0;
line-height: 1.5;
}
.entry-form {
padding: 0;
}
.entry-form__section {
padding: 22px 26px 6px;
border-bottom: 1px solid #f1f3f7;
}
.entry-form__section:last-of-type {
border-bottom: none;
}
.entry-form__section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #8a92a3;
margin-bottom: 14px;
}
.entry-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin-bottom: 16px;
}
.entry-form__grid .field--full {
grid-column: 1 / -1;
}
.entry-form__footer {
padding: 16px 26px 18px;
background: #fafbfd;
border-top: 1px solid #eef0f5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.entry-form__footer-note {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.entry-form__footer-note svg {
color: #8a92a3;
flex-shrink: 0;
}
.entry-form__footer-actions {
display: inline-flex;
align-items: center;
gap: 12px;
}
.entry-form__submit {
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
}
/* Polished file-upload dropzone */
.entry-form__upload-drop {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1.5px dashed #cdd3df;
border-radius: 14px;
background: #fafbfd;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease;
margin-bottom: 12px;
}
.entry-form__upload-drop:hover {
border-color: #8b6dff;
background: #f7f4ff;
}
.entry-form__upload-drop.is-dragover {
border-color: #6e3eff;
background: #f1ecff;
}
.entry-form__upload-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 11px;
background: linear-gradient(135deg, #f0eaff 0%, #e7e0ff 100%);
color: #6e3eff;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e5dcff;
}
.entry-form__upload-copy {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.entry-form__upload-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
.entry-form__upload-sub {
font-size: 12px;
color: #6b7280;
}
.entry-form__upload-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: #4b27c4;
background: #ffffff;
border: 1px solid #d7cdfb;
border-radius: 10px;
transition: background 140ms ease, border-color 140ms ease;
}
.entry-form__upload-drop:hover .entry-form__upload-btn {
background: #f1ecff;
border-color: #b5a1ff;
}
/* Acknowledgement checkbox row inside replacements */
.entry-form__section .replacement-ack {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12.5px;
color: #5a6173;
line-height: 1.5;
padding: 12px 14px;
border: 1px solid #eceff5;
border-radius: 10px;
background: #fafbfd;
}
.entry-form__section .replacement-ack input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
/* Inline checkbox row used in custom-order subscription section */
.entry-form__section .checkbox-row {
display: flex;
gap: 10px;
align-items: center;
font-size: 13.5px;
color: #2d3344;
}
/* Responsive */
@media (max-width: 720px) {
.entry-form__section,
.entry-form__footer { padding-left: 18px; padding-right: 18px; }
.entry-form__grid { grid-template-columns: 1fr; }
.entry-form__footer { flex-direction: column; align-items: stretch; }
.entry-form__footer-actions { justify-content: flex-end; }
.entry-form__upload-drop { flex-wrap: wrap; }
.entry-form__upload-btn { margin-left: 56px; }
}
/* Ensure .field layout inside .entry-form (used by replacement form) */
.entry-form .field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.entry-form .field__label {
font-size: 12px;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.02em;
}
.entry-form .field__hint {
font-size: 12px;
color: #6b7280;
}
.entry-form .field input,
.entry-form .field select,
.entry-form .field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #e2e0ee;
border-radius: 10px;
background: #fff;
color: #0f172a;
font-size: 14px;
font-family: inherit;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.entry-form .field input:hover,
.entry-form .field select:hover,
.entry-form .field textarea:hover {
border-color: #cdc1f3;
}
.entry-form .field input:focus,
.entry-form .field select:focus,
.entry-form .field textarea:focus {
outline: none;
border-color: #8b6dff;
box-shadow: 0 0 0 3px rgba(139, 109, 255, 0.18);
}
.entry-form .field textarea {
min-height: 92px;
resize: vertical;
}
/* ============================================================
Dual CTA on Fresh Leads — homepage showcase panel 03
AS cache buster
============================================================ */
.showcase__cta {
display: flex;
flex-wrap: nowrap;
gap: 10px;
align-self: flex-start;
margin-top: 6px;
}
.showcase__cta .btn { margin-top: 0; align-self: auto; white-space: nowrap; padding-left: 22px; padding-right: 22px; }
@media (max-width: 520px) {
.showcase__cta { flex-wrap: wrap; }
}
.showcase__cta-note {
font-size: 13px;
color: #6B6677;
margin: 4px 0 0;
max-width: 420px;
line-height: 1.5;
}
/* Fresh Leads — account banner on products page */
.fresh-account-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
margin-bottom: 16px;
background: #F4F1FB;
border: 1px solid #E5DEFA;
border-radius: 12px;
}
.fresh-account-banner__copy {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
line-height: 1.45;
color: #4A4660;
}
.fresh-account-banner__copy strong {
font-size: 14px;
font-weight: 600;
color: #1F1B2D;
}
.fresh-account-banner .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
.fresh-account-banner {
flex-direction: column;
align-items: flex-start;
}
.fresh-account-banner .btn { width: 100%; text-align: center; }
}
/* ============================================================
BLOG REDESIGN — Bluevine-inspired (AT cache buster)
============================================================ */
/* --- Blog hero --- */
.blog-hero {
position: relative;
text-align: center;
padding: 88px 24px 64px;
background: linear-gradient(180deg, #F4F0FF 0%, #FFFFFF 100%);
overflow: hidden;
}
.blog-hero .container { max-width: 820px; margin: 0 auto; }
.blog-hero__eyebrow {
display: inline-block;
margin-bottom: 18px;
color: #6a49f0;
}
.blog-hero__title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 60px);
line-height: 1.05;
letter-spacing: -1.8px;
color: #1F1B2D;
margin: 0 0 14px;
}
.blog-hero__title .highlight-solid {
color: #6a49f0;
}
.blog-hero__lede {
font-size: 18px;
line-height: 1.55;
color: #5b5670;
max-width: 620px;
margin: 0 auto 32px;
}
.blog-hero__ornament {
position: absolute;
width: 96px;
height: 96px;
opacity: 0.5;
pointer-events: none;
}
.blog-hero__ornament--left { left: 6%; top: 36%; transform: rotate(-8deg); }
.blog-hero__ornament--right { right: 6%; top: 30%; transform: rotate(8deg); }
@media (max-width: 768px) {
.blog-hero__ornament { display: none; }
}
/* --- Search input shared --- */
.blog-search {
position: relative;
max-width: 540px;
margin: 0 auto;
display: flex;
align-items: center;
}
.blog-search__label { position: absolute; left: -9999px; }
.blog-search__input {
width: 100%;
padding: 16px 56px 16px 22px;
background: #FFFFFF;
border: 1px solid #E0DAF0;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
color: #1F1B2D;
box-shadow: 0 4px 16px rgba(31, 27, 45, 0.05);
transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-search__input::placeholder { color: #9994A8; }
.blog-search__input:focus {
outline: none;
border-color: #8B6FF5;
box-shadow: 0 4px 20px rgba(130, 71, 255, 0.18);
}
.blog-search__btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px;
border-radius: 999px;
border: none;
background: #1F1B2D;
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
}
.blog-search__btn svg { width: 18px; height: 18px; }
.blog-search--inline { margin: 0; max-width: 380px; }
/* --- Generic section heads in blog --- */
.blog-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin: 0 0 32px;
flex-wrap: wrap;
}
.blog-section-head--row { align-items: flex-end; }
.blog-section-head__title {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 40px);
letter-spacing: -1px;
color: #1F1B2D;
margin: 0;
}
.blog-section-head__sub {
margin: 8px 0 0;
color: #5b5670;
font-size: 15px;
max-width: 540px;
line-height: 1.55;
}
.blog-section-head__link {
font-weight: 600;
color: #6a49f0;
text-decoration: none;
white-space: nowrap;
}
.blog-section-head__link:hover { text-decoration: underline; }
/* --- Featured split --- */
.blog-featured { padding: 64px 0; background: #FFFFFF; }
.blog-featured__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 40px;
align-items: stretch;
}
.blog-featured__big {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-radius: 18px;
overflow: hidden;
background: #FFFFFF;
transition: transform .2s ease;
}
.blog-featured__big:hover { transform: translateY(-2px); }
.blog-featured__big-media {
aspect-ratio: 16 / 10;
border-radius: 18px;
overflow: hidden;
}
.blog-featured__big-body { padding: 22px 4px 4px; }
.blog-featured__big-body h3 {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.18;
letter-spacing: -0.6px;
color: #1F1B2D;
margin: 10px 0 12px;
}
.blog-featured__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-featured__small {
display: block;
text-decoration: none;
color: inherit;
padding: 22px 4px 22px;
border-top: 1px solid #ECE7F6;
transition: padding-left .2s ease;
}
.blog-featured__small:first-child { border-top: none; padding-top: 4px; }
.blog-featured__small:hover { padding-left: 6px; }
.blog-featured__small h4 {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.3px;
color: #1F1B2D;
margin: 8px 0 10px;
}
@media (max-width: 900px) {
.blog-featured__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* --- Post card categories + meta (shared) --- */
.post-cat {
display: inline-block;
font-family: var(--font-body, 'Satoshi', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #6a49f0;
}
.post-meta {
display: flex;
gap: 8px;
color: #6B6677;
font-size: 13px;
margin-top: 4px;
}
.post-meta .dot { opacity: 0.45; }
/* --- Blog cover (gradient with city label + numeral) --- */
.blog-cover {
width: 100%; height: 100%;
position: relative;
display: flex; align-items: flex-end; justify-content: space-between;
padding: 22px 26px;
color: #fff;
overflow: hidden;
}
.blog-cover::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,0.18), transparent 55%);
}
.blog-cover__city {
position: relative; z-index: 1;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: 999px;
}
.blog-cover__num {
position: relative; z-index: 1;
font-family: var(--font-display);
font-size: clamp(48px, 7vw, 96px);
font-weight: 500;
letter-spacing: -2px;
line-height: 0.9;
opacity: 0.92;
}
.blog-cover--g1 { background: linear-gradient(135deg, #2E27A8 0%, #6a49f0 100%); }
.blog-cover--g2 { background: linear-gradient(135deg, #6a49f0 0%, #A06FFF 100%); }
.blog-cover--g3 { background: linear-gradient(135deg, #161229 0%, #6a49f0 100%); }
.blog-cover--g4 { background: linear-gradient(135deg, #8B6FF5 0%, #DFCBFF 100%); color: #1F1B2D; }
.blog-cover--g4 .blog-cover__city { background: rgba(31,27,45,0.10); color: #1F1B2D; }
.blog-cover--g5 { background: linear-gradient(135deg, #4A4FE0 0%, #161229 100%); }
.blog-cover--g6 { background: linear-gradient(135deg, #B9A4FF 0%, #6a49f0 100%); }
/* --- Category tiles --- */
.blog-categories { padding: 56px 0; background: #FAF8FD; }
.blog-categories__title {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.5px;
color: #1F1B2D;
margin: 0 0 28px;
text-align: center;
}
.blog-categories__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.cat-tile {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px;
background: #FFFFFF;
border: 1px solid #ECE7F6;
border-radius: 14px;
text-decoration: none;
color: #1F1B2D;
font-weight: 600;
font-size: 14px;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cat-tile:hover {
transform: translateY(-2px);
border-color: #B9A4FF;
box-shadow: 0 6px 18px rgba(106, 73, 240, 0.12);
}
.cat-tile__icon {
width: 36px; height: 36px;
border-radius: 10px;
background: #F1ECFF;
color: #6a49f0;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cat-tile__icon svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .blog-categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .blog-categories__grid { grid-template-columns: 1fr; } }
/* --- Main 3-col grid --- */
.blog-grid-section { padding: 64px 0 88px; background: #FFFFFF; }
.blog-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 28px;
}
.post-card-v2 {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform .2s ease;
}
.post-card-v2:hover { transform: translateY(-3px); }
.post-card-v2__media {
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
.post-card-v2__body { display: flex; flex-direction: column; gap: 8px; }
.post-card-v2__body h3 {
font-family: var(--font-display);
font-size: 19px;
line-height: 1.28;
letter-spacing: -0.3px;
color: #1F1B2D;
margin: 4px 0 6px;
}
@media (max-width: 900px) { .blog-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid-v2 { grid-template-columns: 1fr; } }
/* --- Newsletter band --- */
.blog-newsletter {
padding: 72px 0;
background: linear-gradient(135deg, #161229 0%, #2E1B66 60%, #6a49f0 130%);
color: #fff;
}
.blog-newsletter__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.blog-newsletter h2 {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -1px;
margin: 12px 0 10px;
color: #fff;
}
.blog-newsletter p { color: rgba(255,255,255,0.78); max-width: 460px; }
.blog-newsletter .eyebrow { color: #b9a4ff; }
.blog-newsletter__fields {
display: flex; flex-direction: column; gap: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
padding: 24px;
backdrop-filter: blur(4px);
}
.blog-newsletter__fields .field { display: flex; flex-direction: column; gap: 6px; }
.blog-newsletter__fields .field__label {
font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.blog-newsletter__fields input,
.blog-newsletter__fields select {
padding: 13px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
color: #fff;
font-family: inherit;
font-size: 15px;
}
.blog-newsletter__fields input::placeholder { color: rgba(255,255,255,0.4); }
.blog-newsletter__fields select option { color: #1F1B2D; }
.blog-newsletter__success {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
border-radius: 14px;
padding: 20px 22px;
color: #fff;
font-weight: 500;
}
@media (max-width: 900px) {
.blog-newsletter__inner { grid-template-columns: 1fr; }
}
/* ============================================================
ARTICLE PAGE — split hero + right-rail share (Bluevine-style)
============================================================ */
.article-hero-v2 {
background: linear-gradient(180deg, #F4F0FF 0%, #FFFFFF 100%);
padding: 36px 0 0;
}
.article-hero-v2__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
align-items: stretch;
padding-bottom: 0;
}
.article-hero-v2__left {
padding: 40px 0 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
.article-hero-v2__crumbs {
font-size: 13px;
color: #6B6677;
margin-bottom: 18px;
}
.article-hero-v2__crumbs a {
color: #6B6677;
text-decoration: none;
}
.article-hero-v2__crumbs a:hover { color: #6a49f0; text-decoration: underline; }
.article-hero-v2__crumbs .sep { margin: 0 6px; opacity: 0.5; }
.article-hero-v2 h1 {
font-family: var(--font-display);
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.06;
letter-spacing: -1.5px;
color: #1F1B2D;
margin: 0 0 18px;
}
.article-author {
display: flex; align-items: center; gap: 14px;
margin-top: 24px;
}
.article-author__avatar {
width: 44px; height: 44px;
border-radius: 999px;
background: linear-gradient(135deg, #6a49f0, #B9A4FF);
color: #fff;
font-weight: 700;
font-size: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.article-author__meta { display: flex; flex-direction: column; gap: 2px; }
.article-author__name { font-weight: 600; color: #1F1B2D; font-size: 15px; }
.article-author__sub { color: #6B6677; font-size: 13px; }
.article-hero-v2__right {
position: relative;
min-height: 320px;
border-radius: 18px 18px 0 0;
overflow: hidden;
display: flex; align-items: stretch;
}
.article-hero-v2__right .blog-cover { padding: 28px 30px; border-radius: 18px; }
@media (max-width: 900px) {
.article-hero-v2__inner { grid-template-columns: 1fr; gap: 24px; padding-bottom: 0; }
.article-hero-v2__right { min-height: 240px; }
}
/* Article shell + body share the SAME centered 880px column as the hero head + cover.
The vertical share rail is fixed to the right side of the viewport so it does
not affect the reading column's centering. */
.article-shell {
position: relative;
max-width: 880px;
margin: 0 auto;
padding: 0 24px;
}
.article-shell .article-body {
max-width: 100%;
margin: 0;
padding: 40px 0 60px;
font-size: 18px;
line-height: 1.75;
color: #2a2640;
}
.article-share {
position: fixed;
top: 50%;
right: max(24px, calc(50vw - 480px));
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
z-index: 5;
}
.article-share__label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #6B6677;
}
.article-share a {
width: 38px; height: 38px;
border-radius: 999px;
border: 1px solid #E5DEFA;
display: inline-flex; align-items: center; justify-content: center;
color: #4A4660;
background: #FFFFFF;
transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.article-share a:hover { color: #6a49f0; border-color: #8B6FF5; transform: translateY(-2px); }
.article-share a svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
/* Drop the fixed vertical share rail and render it inline-static at the top of the body on narrower screens, since there's no gutter space for it. */
.article-share {
position: static; transform: none;
flex-direction: row; justify-content: flex-start;
padding: 16px 0 8px;
margin: 0 0 8px;
border-top: 1px solid #ECE7F6;
}
.article-share__label { writing-mode: horizontal-tb; transform: none; }
}
@media (max-width: 900px) {
.article-shell { padding: 0 20px; }
}
/* Related posts (no images) */
.article-related { padding: 56px 0 72px; background: #FAF8FD; }
.article-related__title {
font-family: var(--font-display);
font-size: clamp(24px, 2.8vw, 32px);
letter-spacing: -0.6px;
color: #1F1B2D;
margin: 0 0 28px;
}
.article-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.related-card {
display: block;
padding: 22px;
background: #FFFFFF;
border: 1px solid #ECE7F6;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.related-card:hover {
transform: translateY(-2px);
border-color: #B9A4FF;
box-shadow: 0 8px 24px rgba(106, 73, 240, 0.10);
}
.related-card h3 {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.3;
letter-spacing: -0.2px;
color: #1F1B2D;
margin: 8px 0 8px;
}
@media (max-width: 900px) { .article-related__grid { grid-template-columns: 1fr; } }
/* Article tags row */
.article-tags {
border-top: 1px solid #ECE7F6;
border-bottom: 1px solid #ECE7F6;
padding: 20px 0;
margin: 32px 0 8px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.article-tags__label {
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: #6B6677;
}
.article-tags a {
padding: 6px 12px;
background: #F1ECFF;
border-radius: 999px;
color: #6a49f0;
font-size: 13px; font-weight: 600;
text-decoration: none;
}
.article-tags a:hover { background: #6a49f0; color: #fff; }
/* ============================================================
BLOG v3 — Real photos, no numerals, working cat filter,
lighter newsletter, new article hero layout
============================================================ */
/* Make image media tiles work for img children */
.blog-featured__big-media,
.post-card-v2__media { background: #F4F0FF; }
.blog-featured__big-media img,
.post-card-v2__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.blog-featured__big:hover .blog-featured__big-media img,
.post-card-v2:hover .post-card-v2__media img { transform: scale(1.025); }
/* Featured side list: each item gets a small image thumb on the left */
.blog-featured__list { gap: 20px; }
.blog-featured__small {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
align-items: center;
padding: 20px 4px;
border-top: 1px solid #ECE7F6;
}
.blog-featured__small:first-child { border-top: none; padding-top: 4px; }
.blog-featured__small:hover { padding-left: 6px; }
.blog-featured__small-media {
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
background: #F4F0FF;
}
.blog-featured__small-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.blog-featured__small h4 { margin: 6px 0 8px; font-size: 17px; }
.blog-featured__small .post-meta { font-size: 12px; }
@media (max-width: 600px) {
.blog-featured__small { grid-template-columns: 96px 1fr; gap: 12px; }
.blog-featured__small h4 { font-size: 15px; line-height: 1.3; }
}
/* Category tile: button reset + active state */
.blog-categories__grid .cat-tile {
background: #FFFFFF;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
}
.blog-categories__grid .cat-tile--active {
background: #6a49f0;
color: #FFFFFF;
border-color: #6a49f0;
box-shadow: 0 6px 18px rgba(106, 73, 240, 0.25);
}
.blog-categories__grid .cat-tile--active .cat-tile__icon {
background: rgba(255,255,255,0.18);
color: #FFFFFF;
}
.blog-grid-empty {
text-align: center;
padding: 48px 0 8px;
color: #6B6677;
font-size: 15px;
}
/* Newsletter: lighter, transitions to dark footer cleanly */
.blog-newsletter {
background: linear-gradient(180deg, #F4F0FF 0%, #E7DEFF 100%);
color: #1F1B2D;
}
.blog-newsletter h2 { color: #1F1B2D; }
.blog-newsletter p { color: #4A4660; }
.blog-newsletter .eyebrow { color: #6a49f0; }
.blog-newsletter__fields {
background: #FFFFFF;
border: 1px solid #E5DEFA;
box-shadow: 0 12px 32px rgba(46, 27, 102, 0.08);
}
.blog-newsletter__fields .field__label { color: #6B6677; }
.blog-newsletter__fields input,
.blog-newsletter__fields select {
background: #F8F5FF;
border: 1px solid #E5DEFA;
color: #1F1B2D;
}
.blog-newsletter__fields input::placeholder { color: #9893A4; }
.blog-newsletter__success {
background: #FFFFFF;
border: 1px solid #E5DEFA;
color: #1F1B2D;
}
/* ============================================================
ARTICLE PAGE v3 — full-width hero image on top, centered
readable title block below
============================================================ */
.article-hero-v3 {
background: #FFFFFF;
padding: clamp(120px, 13vw, 160px) 0 0;
}
.article-hero-v3__crumbs {
max-width: 880px;
margin: 0 auto;
padding: 0 24px 14px;
font-size: 13px;
color: #6B6677;
}
.article-hero-v3__crumbs a { color: #6B6677; text-decoration: none; }
.article-hero-v3__crumbs a:hover { color: #6a49f0; text-decoration: underline; }
.article-hero-v3__crumbs .sep { margin: 0 6px; opacity: 0.5; }
.article-hero-v3__head {
max-width: 880px;
margin: 0 auto;
padding: 0 24px 32px;
text-align: left;
}
.article-hero-v3__head .post-cat { margin-bottom: 14px; }
.article-hero-v3 h1 {
font-family: var(--font-display);
font-size: clamp(30px, 4.2vw, 48px);
line-height: 1.1;
letter-spacing: -1.2px;
color: #1F1B2D;
margin: 0 0 18px;
max-width: 760px;
}
.article-hero-v3__lede {
font-size: 19px;
line-height: 1.55;
color: #4A4660;
max-width: 720px;
margin: 0 0 24px;
}
.article-hero-v3__byline {
display: flex; align-items: center; gap: 14px;
padding-top: 18px;
border-top: 1px solid #ECE7F6;
}
.article-hero-v3__cover {
max-width: 880px;
margin: 0 auto;
padding: 0 24px 8px;
}
.article-hero-v3__cover img {
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
border-radius: 18px;
display: block;
}
@media (max-width: 600px) {
.article-hero-v3__cover img { aspect-ratio: 4 / 3; border-radius: 12px; }
}
/* Article body figures (inline images) */
.article-body .article-figure {
margin: 36px 0;
}
.article-body .article-figure img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 14px;
display: block;
}
.article-body .article-figure figcaption {
margin-top: 10px;
font-size: 13px;
color: #6B6677;
text-align: center;
font-style: normal;
}
/* Toast for copy-link share */
.share-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #1F1B2D;
color: #FFFFFF;
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 100;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.share-toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============================================================
Fresh Leads — intro-then-form card (BA cache buster)
Intro state shows price + bullets + two CTAs (Create account
primary, Request fresh leads secondary) + a Why-create-account
benefits block. Form is hidden by default; revealed when user
clicks Request fresh leads.
============================================================ */
/* Align white card top with the h2 baseline on the left column.
Left column starts with the .eyebrow (uppercase label) then the
h2; the card should start where the h2 starts, not above it. */
@media (min-width: 981px) {
.fresh-split__right {
margin-top: 44px;
}
}
.fresh-card__intro {
padding: 2px 0 4px;
}
.fresh-card__intro .fresh-card__price {
margin: 0 0 18px;
}
.fresh-card__bullets {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.fresh-card__bullets li {
position: relative;
padding-left: 26px;
font-size: 14px;
line-height: 1.45;
color: #2a2640;
}
.fresh-card__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #6a49f0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
}
.fresh-card__cta-row {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 0 0 22px;
}
.fresh-card__cta-row .btn {
flex: 1 1 auto;
white-space: nowrap;
text-align: center;
justify-content: center;
padding-left: 18px;
padding-right: 18px;
}
.fresh-card__cta-row .fresh-card__cta-main {
flex: 1 1 55%;
}
.fresh-card__cta-row .fresh-card__cta-alt {
flex: 1 1 45%;
}
/* Why-create-account benefits block */
.fresh-card__why {
margin-top: 4px;
padding-top: 18px;
border-top: 1px solid #ECE7F6;
}
.fresh-card__why-title {
display: block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6a49f0;
margin: 0 0 12px;
}
.fresh-card__why-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.fresh-card__why-list li {
font-size: 13px;
line-height: 1.5;
color: #4A4660;
}
.fresh-card__why-list li strong {
color: #1F1B2D;
font-weight: 600;
display: inline;
margin-right: 2px;
}
.fresh-card__back {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 0;
margin: 0 0 16px;
font-size: 13px;
color: #6a49f0;
cursor: pointer;
font-family: inherit;
font-weight: 600;
}
.fresh-card__back:hover { text-decoration: underline; }
@media (max-width: 560px) {
.fresh-card__cta-row { flex-wrap: wrap; }
.fresh-card__cta-row .btn { flex: 1 1 100%; }
}
/* ============= Checkout v2: Fast checkout + simplified card ============= */
.checkout-card--express {
background: #fff;
border: 1px solid rgba(31, 34, 64, 0.10);
position: relative;
padding-bottom: 0;
}
.checkout-express-head {
text-align: center;
margin-bottom: 14px;
}
.checkout-express-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--color-text-default, #1f2240);
letter-spacing: 0.01em;
}
.checkout-express-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 14px;
background: #f8f8fc;
border: 1px dashed rgba(31, 34, 64, 0.16);
border-radius: 10px;
color: #6b6e87;
font-size: 13px;
}
.checkout-express-empty svg { width: 16px; height: 16px; flex-shrink: 0; }
.checkout-express-empty[hidden] { display: none; }
.square-wallets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 0;
}
.square-wallets[hidden] { display: none; }
.square-wallets__btn {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.square-wallets__btn:empty { display: none !important; }
@media (max-width: 560px) {
.square-wallets { grid-template-columns: 1fr; }
}
.square-wallets__divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px -22px 0;
padding: 14px 22px 0;
border-top: 1px solid rgba(31, 34, 64, 0.08);
color: #6b6e87;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
justify-content: center;
}
.square-wallets__divider span {
display: inline-block;
padding: 0 4px;
}
/* ============= Contact information head (sign-in row, reference layout) ============= */
.checkout-contact-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.checkout-contact-head .checkout-card__title { margin: 0; }
.checkout-contact-signin {
font-size: 13px;
color: #6b6e87;
display: inline-flex;
gap: 6px;
align-items: baseline;
}
.checkout-contact-signin[hidden] { display: none; }
.checkout-contact-signin a {
color: var(--color-text-default, #1f2240);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.checkout-contact-signedin {
display: inline-flex;
align-items: center;
gap: 10px;
}
.checkout-contact-signedin[hidden] { display: none; }
.checkout-contact-signedin__avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #4A4FE0, #8247FF);
color: #fff;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
.checkout-contact-signedin strong {
display: block;
font-size: 13px;
color: var(--color-text-default, #1f2240);
line-height: 1.2;
}
.checkout-contact-signedin .muted {
display: block;
font-size: 11px;
color: #6b6e87;
line-height: 1.2;
}
.apple-pay-button {
display: inline-block;
width: 100%;
min-height: 44px;
-apple-pay-button-type: plain;
-apple-pay-button-style: black;
cursor: pointer;
-webkit-appearance: -apple-pay-button;
border-radius: 10px;
}
.square-card-container {
margin-top: 6px;
min-height: 90px;
}
.square-card-errors {
margin-top: 10px;
padding: 10px 12px;
background: #fff5f5;
color: #b3261e;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.checkout-billing {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(31, 34, 64, 0.08);
}
.checkout-billing__title {
font-size: 15px;
font-weight: 700;
margin: 0 0 4px;
color: var(--color-text-default, #1f2240);
}
.checkout-billing__sub {
font-size: 12px;
color: #6b6e87;
margin: 0 0 14px;
}
.checkout-billing .form-row {
display: grid;
grid-template-columns: 1fr 100px 130px;
gap: 12px;
margin-bottom: 12px;
}
.checkout-billing .form-row:has(.form-field--wide) {
grid-template-columns: 1fr;
}
.checkout-billing .form-field--wide { grid-column: 1 / -1; }
.checkout-billing .form-row:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
.checkout-billing .form-row {
grid-template-columns: 1fr 1fr;
}
.checkout-billing .form-row:has(.form-field--wide) {
grid-template-columns: 1fr;
}
}
/* ============= Product card: Buy now (one-click fast checkout) ============= */
.cart-cta__row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.cart-cta__buynow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: #1f2240;
color: #fff;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.cart-cta__buynow:hover:not(:disabled) {
background: #2a2e54;
transform: translateY(-1px);
}
.cart-cta__buynow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cart-cta__buynow svg { width: 14px; height: 14px; }
.cart-cta__buynow-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cart-cta__buynow-note {
font-size: 11px;
color: #6b6e87;
text-align: center;
margin: 2px 0 0;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
/* ============= Buy Now Modal (one-click product checkout) ============= */
.bn-modal {
position: fixed;
inset: 0;
z-index: 1500;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(15, 17, 36, 0.55);
backdrop-filter: blur(6px);
}
.bn-modal.is-open { display: flex; }
.bn-modal__panel {
background: #fff;
border-radius: 16px;
max-width: 460px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 28px;
box-shadow: 0 30px 80px rgba(15, 17, 36, 0.35);
position: relative;
}
.bn-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 8px;
color: #6b6e87;
}
.bn-modal__close:hover { background: #f4f4fa; color: #1f2240; }
.bn-modal__close svg { width: 18px; height: 18px; }
.bn-modal__head { margin-bottom: 18px; }
.bn-modal__eyebrow {
display: inline-block;
padding: 4px 10px;
background: linear-gradient(135deg, #4A4FE0, #8247FF);
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.bn-modal__title {
font-family: 'Clash Display', sans-serif;
font-size: 24px;
font-weight: 600;
color: #1f2240;
margin: 0 0 4px;
line-height: 1.2;
}
.bn-modal__sub {
font-size: 13px;
color: #6b6e87;
margin: 0;
}
.bn-modal__item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: #f8f8fc;
border-radius: 10px;
margin-bottom: 16px;
}
.bn-modal__item-body strong { display: block; font-size: 14px; color: #1f2240; }
.bn-modal__item-body span { display: block; font-size: 12px; color: #6b6e87; margin-top: 2px; }
.bn-modal__item-price {
font-family: 'Clash Display', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1f2240;
}
.bn-modal__wallets {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.bn-modal__wallets-empty {
padding: 14px;
background: #fff8f0;
border: 1px dashed #f5c46b;
border-radius: 10px;
color: #8a5a00;
font-size: 13px;
text-align: center;
}
.bn-modal__divider {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
color: #6b6e87;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bn-modal__divider::before,
.bn-modal__divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(31, 34, 64, 0.12);
}
.bn-modal__cart-btn {
width: 100%;
padding: 12px 16px;
background: transparent;
border: 1px solid rgba(31, 34, 64, 0.18);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #1f2240;
cursor: pointer;
transition: background 0.15s ease;
}
.bn-modal__cart-btn:hover { background: #f4f4fa; }
.bn-modal__note {
font-size: 11px;
color: #6b6e87;
text-align: center;
margin: 12px 0 0;
}
.bn-modal__success {
text-align: center;
padding: 18px 8px;
}
.bn-modal__success svg {
width: 48px;
height: 48px;
color: #22c55e;
margin: 0 auto 12px;
display: block;
}
.bn-modal__success h3 {
font-family: 'Clash Display', sans-serif;
font-size: 22px;
font-weight: 600;
color: #1f2240;
margin: 0 0 6px;
}
.bn-modal__success p {
font-size: 13px;
color: #6b6e87;
margin: 0 0 18px;
}
.bn-modal__err {
padding: 10px 12px;
background: #fff5f5;
color: #b3261e;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
.bn-modal__err[hidden] { display: none; }
/* Tighten the Buy now button to one line, matching Add to cart visual rhythm */
.cart-cta__buynow {
padding: 10px 14px;
font-size: 13px;
gap: 6px;
white-space: nowrap;
overflow: hidden;
flex-wrap: nowrap;
}
.cart-cta__buynow > span {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.cart-cta__buynow > span:last-child {
font-size: 11px;
opacity: 0.7;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
}
@media (max-width: 480px) {
.cart-cta__buynow > span:last-child { display: none; }
}
/* ============================================================
MOBILE RESPONSIVE OVERHAUL — 20260609mobile1
Additive-only. Desktop layout unchanged (rules gated to
small viewports). Targets: 375 / 390 / 414 px phones, 768 tablet.
============================================================ */
/* --- iOS zoom-on-focus guard: every form control >= 16px on phones --- */
@media (max-width: 640px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea,
.fresh-form input,
.fresh-form select,
.fresh-form textarea,
.field input {
font-size: 16px !important;
}
}
/* --- Global no-horizontal-scroll guard at phone widths --- */
@media (max-width: 640px) {
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
/* tables that are not converted to cards may still scroll inside their wrap */
.admin-table-wrap { -webkit-overflow-scrolling: touch; }
}
/* --- Stacked-card table tuning: make data-label readable & ensure
ALL admin-table variants (broker orders/subs, custom/compact)
collapse to cards, not just the base class --- */
@media (max-width: 720px) {
.admin-table td[data-label]::before {
display: inline-block;
min-width: 96px;
font-size: 11px;
color: var(--color-text-muted, #6B6677);
}
/* numeric/right-aligned cells read left-aligned as card rows */
.admin-table td.admin-col-num,
.admin-table td.admin-col-actions {
text-align: left;
}
/* action button rows wrap and stay tappable */
.admin-table .admin-col-actions .btn,
.admin-table .admin-actions .btn {
min-height: 40px;
}
.admin-table--compact td,
.admin-table--custom td { display: block; width: 100%; }
.admin-table--compact thead,
.admin-table--custom thead { display: none; }
}
/* --- Tap targets: ensure primary interactive elements are >= 44px --- */
@media (max-width: 640px) {
.btn,
.nav-link,
button.admin-pager-btn,
.nav-user__trigger {
min-height: 44px;
}
.admin-pager-btn {
min-width: 44px;
}
/* full-width CTAs on phones for easy thumb reach */
.checkout-card .btn-primary,
.fresh-form button[type="submit"],
.login-card .btn {
width: 100%;
}
}
/* --- Modals / overlays: reclaim width on phones (panels already
width:100% + scroll; just trim the container gutter & padding) --- */
@media (max-width: 480px) {
.acc-modal,
.bn-modal { padding: 12px; }
.acc-modal__panel,
.bn-modal__panel { padding: 22px 18px; }
.acc-modal__panel { max-height: calc(100dvh - 24px); }
}
/* --- Chat widget: confirm fit at 375px (panel already near-fullwidth
below 480px via inline styles; this is a defensive backstop) --- */
@media (max-width: 420px) {
.smca-chat-panel {
right: 8px !important;
left: 8px !important;
width: auto !important;
bottom: 76px !important;
height: calc(100vh - 92px) !important;
height: calc(100dvh - 92px) !important;
}
.smca-chat-fab {
right: 16px !important;
bottom: 16px !important;
}
}