/* ================================================================
* DISEENI — FLOW PREVIEW | Stylesheet
*
* Sections (Ctrl+F to jump):
* 1. RESET & ROOT TOKENS
* 2. PAGE SHELL
* 3. TOP BAR · left / center / right columns
* 4. CONTENT FRAME · hero stage
* 5. MODAL SHARED · backdrop + close button
* 6. AUTH MODAL · sign-in card
* 7. PRICING TIER MODAL · tier cards (JS-injected)
* 8. CALCULATOR MODAL · left panel + right form
* 8a. Left panel — "What you get"
* 8b. Right panel — form inputs & breakdown cards
* 8c. Add-ons section
* 8d. Total bar
* 8e. Footer links
* 9. CLIENTS CAROUSEL · phase 1 right bar
* 10. RESPONSIVE · ≤700px (calculator stack) · ≤620px (mobile)
* ================================================================ */
/* ── 1. RESET & ROOT TOKENS ──────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
hyphens: none;
/* no auto word-breaks anywhere */
}
:root {
/* ═══════════════════════════════════════════════════════════════
* DESIGN SYSTEM v5 · CSS CUSTOM PROPERTIES
* Ref: 1855 × 911 px · 8px base · Montserrat + Zilla Slab
* Two fonts · Expanded palette · Fluid type · 3-tier buttons
*
* THREE MOMENT TYPES — classify every element before placing:
* IDENTITY → brand-deep fill · Zilla Slab headline · cream text (max 1/page)
* ACTION → brand-mid fill · capsule shape · Montserrat 700 (1 per page)
* CONTENT → neutral surfaces only (bg-warm/cool/sand) (everything else)
*
* RATIO RULE: brand fills ≤ 20% of total visual area.
* When uncertain about any element → default to neutral. Always safe.
* ═══════════════════════════════════════════════════════════════ */
/* ── Reference canvas ────────────────────────────────────────── */
--ref-w: 1855px;
--ref-h: 911px;
/* ── Spacing scale (8px base) ────────────────────────────────── */
--sp-0: 0px;
--sp-1: 8px;
/* micro gap · icon-to-label */
--sp-2: 16px;
/* content ↔ card · side pad */
--sp-3: 24px;
/* title / subtitle → content */
--sp-4: 32px;
/* section spacing (medium) */
--sp-5: 40px;
/* section spacing (large) */
--sp-6: 48px;
/* section spacing (XL) */
--side-pad: 16px;
/* ── Button radii — 3-tier system ────────────────────────────── */
/* capsule → CTAs, nav pills, top-bar actions */
/* rounded → form buttons, modal actions, card-level buttons */
/* compact → search rows, inline apply/filter, small chips */
--btn-capsule: 9999px;
--btn-rounded: 12px;
--btn-compact: 9px;
/* ── Brand palette ───────────────────────────────────────────── */
/* Deep Navy → identity, covers, authority (IDENTITY moments) */
/* Brand Blue → primary actions, links (ACTION moments) */
/* Sky Blue → accents, badges, hover tints (text/accent only) */
--brand-deep: #031F56;
--brand-mid: #064ACF;
--brand-light: #719EF8;
/* ── Product / UI darks ──────────────────────────────────────── */
/* Product Dark → dark panels, pricing bars, data drawers */
/* Ink → body copy, pure text */
--ui-dark: #1A1A22;
--ui-ink: #0F0E0B;
/* ── Background scale (warm → cool → structural) ─────────────── */
/* Stack rule: Warm Canvas → Cool Surface → Sand as depth grows */
/* Jump to Product Dark / Deep Navy for full-bleed moments only */
--bg-warm: #F4F1E8;
/* page / slide background (resting state) */
--bg-cool: #FAF8F2;
/* cards, modals, elevated surfaces */
--bg-sand: #EDE9DF;
/* section fills, input bg, tab bars, pills */
--bg-peach: #FEF2E7;
/* warm notices, caution highlights */
/* ── Utility palette ─────────────────────────────────────────── */
/* Confirm Green → success states, WhatsApp CTA (never decorative) */
/* Premium Purple → Tier 2 / AI-powered features (never decorative) */
--util-green: #22C55E;
--util-purple: #6C3CDC;
/* ── Heatmap (data intensity only — never identity fills) ─────── */
--heat-vlow: #23447F;
--heat-low: #86C184;
--heat-med: #E3BF65;
--heat-high: #C45538;
--heat-vhigh: #A82323;
/* ── Typography ──────────────────────────────────────────────── */
/* Zilla Slab → brand names, page-level hero hooks at ≥18px only */
/* NEVER at T3 (12px) — serifs collapse at small sizes */
/* Montserrat → everything else without exception */
--font-display: 'Zilla Slab', Georgia, serif;
--font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
/* Backward-compat alias (used by existing component CSS below) */
--font-hook: var(--font-display);
/* ── Type scale — fluid (web · clamp to viewport) ───────────── */
/* T1 = 40px → brand logo "Diseeni" · page headlines */
/* T2 = 20px → section hooks · panel titles · total price */
/* T3 = 12px → everything else (buttons, inputs, labels, …) */
--fs-t1: clamp(28px, 2.5vw, 40px);
--fs-t2: clamp(14px, 1.25vw, 20px);
--fs-t3: clamp(9px, 0.75vw, 12px);
/* ── Type scale — fixed (documents · slides) ────────────────── */
--t1: 40px;
--t2: 20px;
--t3: 12px;
/* ── Fluid aliases (same values, semantic names) ─────────────── */
--wt1: clamp(28px, 2.5vw, 40px);
--wt2: clamp(14px, 1.25vw, 20px);
--wt3: clamp(9px, 0.75vw, 12px);
/* ── Backward-compat legacy aliases ─────────────────────────── */
--cream: var(--bg-warm);
/* → use --bg-warm in new code */
--dark: var(--ui-dark);
/* → use --ui-dark in new code */
/* ── Component tokens ────────────────────────────────────────── */
--radius-card: 12px;
--shadow-sm: 0 1px 4px rgba(3, 31, 86, 0.06);
/* subtle cards */
--shadow: 0 2px 12px rgba(3, 31, 86, 0.08);
/* default cards */
--shadow-md: 0 4px 20px rgba(3, 31, 86, 0.14);
/* hover / float */
--shadow-lg: 0 24px 80px rgba(3, 31, 86, 0.22),
0 4px 16px rgba(3, 31, 86, 0.10);
/* modals/drawers */
/* ── Montserrat weight guide ──────────────────────────────────
* 800–900 → page / slide title (T1)
* 700 → section heading (T2) · card labels (uppercase)
* 600–700 → card labels (non-uppercase) · button labels
* 400–500 → body copy · data values · captions
* NEVER → weights 100–300 on any element in any context
* ══════════════════════════════════════════════════════════════ */
}
/* ── 2. PAGE SHELL ───────────────────────────────────────────── */
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
background: var(--bg-warm);
}
/* screen-reader only helper */
.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;
}
/* ── 3. TOP BAR ──────────────────────────────────────────────── */
/* Three-column grid: left (explain/back) · center (hook/actions) · right (legend/clients) */
#top-bar {
flex-shrink: 0;
display: grid;
grid-template-columns: 1fr 1.2fr 0.95fr;
height: clamp(148px, 18.5vh, 188px);
background: var(--bg-warm);
border-bottom: 1px solid rgba(30, 30, 40, 0.09);
z-index: 20;
}
/* — left column — */
#bar-left {
display: flex;
flex-direction: column;
padding: clamp(12px, 1.5vh, 19px) clamp(14px, 1.5vw, 24px);
border-right: 1px solid rgba(30, 30, 40, 0.06);
}
/* phase description text, fades in after phase 1 */
#bar-explain {
flex: 1;
display: flex;
align-items: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.54);
line-height: 1.58;
text-align: justify;
text-align-last: left;
opacity: 0;
transition: opacity 600ms ease;
}
/* "← Back" link, shown from phase 2 onward */
#bar-back {
flex-shrink: 0;
align-self: flex-start;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.04em;
color: rgba(30, 30, 40, 0.32);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0;
pointer-events: none;
user-select: none;
transition: opacity 380ms ease, color 180ms;
}
#bar-back:hover {
color: rgba(30, 30, 40, 0.6);
}
/* — center column — */
#bar-center {
display: flex;
flex-direction: column;
padding: clamp(11px, 1.3vh, 17px) clamp(14px, 1.6vw, 26px);
gap: clamp(7px, 0.9vh, 11px);
border-right: 1px solid rgba(30, 30, 40, 0.06);
min-width: 0;
/* prevent fr column from expanding beyond allocated fraction */
}
/* clip container: hides hook text sliding in/out */
#hook-clip {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
@keyframes ring-march {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -48;
}
}
/* hook text — T2 by default; upgraded to T1 when .brand class is applied */
#bar-hook {
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t2);
color: var(--dark);
line-height: 1.22;
letter-spacing: -0.02em;
transform: translateY(150%);
opacity: 0;
/* animated in by JS */
}
#bar-hook.brand {
font-size: 0;
line-height: 0;
}
/* "Diseeni" logo state — SVG img only, no font strut */
/* action row: skip-calc link · next button · login · help */
#bar-center-actions {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(8px, 0.9vw, 14px);
overflow: hidden;
/* contain nowrap text so it never pushes column width */
}
/* "Already know what you need? Get an estimate →" — hidden on non-phase-1 */
#bar-skip-calc {
display: none;
/* shown by JS on phase 1 only */
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.01em;
color: rgba(30, 30, 40, 0.42);
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 160ms;
}
#bar-skip-calc:hover {
color: rgba(30, 30, 40, 0.72);
}
/* pill CTA button — "Reveal the …" etc.
* DS: primary ACTION moment → brand-mid + capsule (btn-capsule) shape */
#bar-next {
overflow: hidden;
padding: clamp(6px, 0.8vh, 9px) clamp(12px, 1.1vw, 18px);
border-radius: var(--btn-capsule);
background: var(--ui-dark);
border: none;
cursor: pointer;
white-space: nowrap;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity 380ms ease, box-shadow 180ms;
}
#bar-next:hover {
box-shadow: var(--shadow-md);
}
.btn-text {
display: block;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: #fff;
letter-spacing: 0.03em;
}
/* "Show report example" — stage-centered link rendered in the same
hero-text style as the "Move your cursor here" hint, just underlined. */
#stage-report-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
/* let canvas clicks through */
opacity: 0;
transition: opacity 480ms ease 80ms;
z-index: 6;
padding: 0 24px;
}
#stage-report-wrap.is-visible {
opacity: 1;
pointer-events: auto;
}
#bar-report-example {
pointer-events: none;
/* only clickable while wrap.is-visible (phase 6) */
display: inline-block;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t1);
letter-spacing: -0.02em;
word-spacing: 0.18em;
color: #fff;
text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
text-align: center;
line-height: 1;
text-decoration: underline solid rgba(255, 255, 255, 0.85);
text-decoration-thickness: 0.06em;
text-underline-offset: 0.18em;
transition: text-decoration-color 200ms, color 180ms;
}
#stage-report-wrap.is-visible #bar-report-example {
pointer-events: auto;
}
#bar-report-example .sre-arrow {
/* inline so parent's text-decoration flows beneath it too;
spacing comes from the space text node + word-spacing on parent
so the underline stays connected. */
font-weight: 600;
}
#bar-report-example:hover {
text-decoration-color: #fff;
}
#bar-report-example:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 6px;
border-radius: 4px;
}
/* Compact bottom-of-stage pill — same dark CTA style as #bar-next.
Visible only on phase 1 AND only after recs has been reached once
this session. The big hero version takes over on phase 6. */
#stage-report-btn-bottom {
position: absolute;
left: 50%;
bottom: clamp(20px, 4vh, 36px);
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: clamp(6px, 0.8vh, 9px) clamp(14px, 1.2vw, 20px);
border-radius: var(--btn-capsule);
background: var(--ui-dark);
color: var(--bg-warm);
border: none;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.03em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 2px 10px rgba(5, 5, 13, 0.22);
opacity: 0;
pointer-events: none;
transition: opacity 380ms ease, box-shadow 180ms, transform 200ms;
z-index: 7;
}
#stage-report-btn-bottom.is-visible {
opacity: 1;
pointer-events: auto;
}
#stage-report-btn-bottom:hover {
box-shadow: 0 4px 16px rgba(5, 5, 13, 0.32);
}
#stage-report-btn-bottom:active {
transform: translateX(-50%) scale(0.985);
}
#stage-report-btn-bottom:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 4px;
}
#stage-report-btn-bottom .srbb-arrow {
font-weight: 600;
}
/* "Log in" pill — DS: ghost/neutral secondary action → btn-capsule */
#bar-login {
cursor: pointer;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.65);
white-space: nowrap;
padding: clamp(5px, 0.7vh, 8px) clamp(10px, 1vw, 15px);
border-radius: var(--btn-capsule);
border: 1.5px solid rgba(30, 30, 40, 0.22);
background: rgba(30, 30, 40, 0.04);
transition: color 180ms, border-color 180ms, background 180ms;
}
#bar-login:hover {
color: rgba(30, 30, 40, 0.9);
border-color: rgba(30, 30, 40, 0.38);
background: rgba(30, 30, 40, 0.08);
}
/* "Help" green link — DS: util-green for WhatsApp/support action */
#bar-help {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
white-space: nowrap;
color: var(--util-green);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 180ms;
}
#bar-help:hover {
color: #16a34a;
}
/* — right column — */
/* Note: position:relative is required by the absolutely-placed clients carousel */
#bar-right {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(10px, 1.2vh, 15px) clamp(12px, 1.3vw, 20px);
overflow: hidden;
}
/* legend (heatmap / diversity colours) — fades in on phase 2+ */
#bar-legend-wrap {
flex: 1;
overflow: hidden;
opacity: 0;
transition: opacity 500ms ease;
}
/* "Terms & Privacy" bottom-right link */
#bar-tos {
flex-shrink: 0;
align-self: flex-end;
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.3);
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 200ms;
}
#bar-tos:hover {
color: rgba(30, 30, 40, 0.58);
}
/* ── 4. CONTENT FRAME ────────────────────────────────────────── */
/* Padded wrapper around the main hero stage */
#content-frame {
flex: 1;
min-height: 0;
padding: clamp(8px, 0.75vw, 13px);
background: var(--bg-warm);
overflow: hidden;
}
/* hero: heatmap canvas + SVG map + smoke + burst overlay */
#full-stage {
position: relative;
width: 100%;
height: 100%;
border-radius: clamp(6px, 0.7vw, 11px);
overflow: hidden;
cursor: pointer;
background: #1e3b73;
}
/* ── 5. MODAL SHARED ─────────────────────────────────────────── */
/* Both auth and pricing modals share a backdrop + close button pattern */
#auth-backdrop,
#pricing-backdrop {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(5, 5, 13, 0.72);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#auth-backdrop.open,
#pricing-backdrop.open {
opacity: 1;
pointer-events: auto;
}
/* shared close "✕" button — used by both auth-close and pricing-close */
#auth-close,
#pricing-close {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(30, 30, 40, 0.06);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(30, 30, 40, 0.45);
font-size: 15px;
transition: background 180ms;
}
#auth-close:hover,
#pricing-close:hover {
background: rgba(30, 30, 40, 0.12);
}
/* ── 6. AUTH MODAL ───────────────────────────────────────────── */
/* Sign-in card: Google SSO · email/password · WhatsApp alternative */
/* DS: modal card → bg-cool surface, shadow-lg, radius-card */
#auth-card {
position: relative;
width: min(420px, 92vw);
background: var(--bg-cool);
border-radius: 18px;
padding: clamp(28px, 4vh, 40px) clamp(24px, 4vw, 36px);
box-shadow: var(--shadow-lg);
border: 1px solid var(--bg-sand);
font-family: var(--font-ui);
transform: translateY(-18px) scale(0.97);
opacity: 0;
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
#auth-backdrop.open #auth-card {
transform: translateY(0) scale(1);
opacity: 1;
}
/* "Welcome back" — T2, only title on the card */
.auth-title {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t2);
letter-spacing: -0.025em;
color: var(--ui-ink);
margin: 0 0 4px;
}
.auth-sub {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.48);
margin: 0 0 22px;
}
/* DS: form-level button → btn-rounded */
.auth-google {
width: 100%;
padding: 11px 16px;
border-radius: var(--btn-rounded);
background: var(--bg-cool);
border: 1.5px solid rgba(30, 30, 40, 0.15);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
cursor: pointer;
box-shadow: 0 1px 4px rgba(30, 30, 40, 0.06);
transition: border-color 180ms, box-shadow 180ms;
}
.auth-google:hover {
border-color: rgba(30, 30, 40, 0.3);
box-shadow: 0 2px 8px rgba(30, 30, 40, 0.1);
}
.auth-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0;
font-family: var(--font-ui);
font-size: var(--fs-t3);
letter-spacing: 0.08em;
color: rgba(30, 30, 40, 0.32);
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(30, 30, 40, 0.1);
}
/* DS: input fields → bg-cool bg, btn-compact radius */
.auth-field {
width: 100%;
padding: 10px 13px;
border-radius: var(--btn-compact);
border: 1.5px solid rgba(30, 30, 40, 0.13);
background: var(--bg-cool);
font-family: var(--font-ui);
font-size: var(--fs-t3);
color: var(--ui-ink);
outline: none;
margin-bottom: 10px;
transition: border-color 180ms;
}
.auth-field:focus {
border-color: rgba(30, 30, 40, 0.4);
}
.auth-field::placeholder {
color: rgba(30, 30, 40, 0.32);
}
.auth-forgot {
display: block;
text-align: right;
margin-top: -4px;
margin-bottom: 14px;
font-family: var(--font-ui);
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.46);
text-decoration: none;
cursor: pointer;
transition: color 160ms;
}
.auth-forgot:hover {
color: rgba(30, 30, 40, 0.75);
}
/* DS: form submit → ui-dark bg, btn-rounded, cream text on dark */
.auth-submit {
width: 100%;
padding: 11px;
border-radius: var(--btn-rounded);
background: var(--ui-dark);
color: var(--bg-warm);
border: none;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
cursor: pointer;
transition: opacity 180ms;
}
.auth-submit:hover {
opacity: 0.85;
}
.auth-switch {
text-align: center;
margin-top: 16px;
font-family: var(--font-ui);
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.46);
}
.auth-switch a {
color: var(--ui-ink);
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: opacity 160ms;
}
.auth-switch a:hover {
opacity: 0.6;
}
/* DS: WhatsApp CTA → util-green tint, btn-rounded */
.auth-whatsapp {
width: 100%;
margin-top: 18px;
padding: 10px 16px;
border-radius: var(--btn-rounded);
background: rgba(37, 211, 102, 0.1);
border: 1.5px solid rgba(37, 211, 102, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: #1a6632;
cursor: pointer;
transition: background 180ms, border-color 180ms;
}
.auth-whatsapp:hover {
background: rgba(37, 211, 102, 0.18);
border-color: rgba(37, 211, 102, 0.5);
}
/* "Not ready to sign in? Get an estimate →" */
.auth-calc-link {
margin-top: 10px;
text-align: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.42);
}
.auth-calc-link a {
color: rgba(30, 30, 40, 0.6);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-calc-link a:hover {
color: rgba(30, 30, 40, 0.9);
}
/* ── 7. PRICING TIER MODAL ───────────────────────────────────── */
/* Tier comparison cards — content is JS-injected into #pricing-card.
* The base card styling below is shared with the calculator modal (section 8).
* The calculator OVERRIDES the layout via a second #pricing-card block. */
/* DS: modal card → bg-cool, shadow-lg, bg-sand border */
#pricing-card {
position: relative;
width: min(900px, 96vw);
max-height: 92vh;
overflow-y: auto;
background: var(--bg-cool);
border-radius: 22px;
padding: clamp(28px, 4vh, 44px) clamp(22px, 3vw, 40px);
box-shadow: var(--shadow-lg);
border: 1px solid var(--bg-sand);
transform: translateY(-18px) scale(0.97);
opacity: 0;
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
#pricing-backdrop.open #pricing-card {
transform: translateY(0) scale(1);
opacity: 1;
}
.p-header {
margin-bottom: clamp(18px, 2.5vh, 28px);
}
.p-title {
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t3);
letter-spacing: -0.02em;
color: var(--ui-ink);
margin-bottom: 6px;
}
.p-sub {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.52);
}
.p-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px, 1.2vw, 18px);
}
@media (max-width: 600px) {
.p-tiers {
grid-template-columns: 1fr;
}
}
.tier {
background: rgba(244, 241, 232, 0.55);
border: 1.5px solid rgba(30, 30, 40, 0.07);
border-radius: 16px;
padding: clamp(16px, 2vh, 24px) clamp(14px, 1.4vw, 20px);
display: flex;
flex-direction: column;
position: relative;
}
/* DS: Product Dark tier card → ui-dark bg, bg-warm (cream) text */
.tier-pro {
background: var(--ui-dark);
border-color: var(--ui-dark);
color: var(--bg-warm);
}
.tier-badge {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.8);
padding: 3px 8px;
border-radius: 20px;
display: inline-block;
align-self: flex-start;
margin-bottom: 10px;
}
.tier-name {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
color: inherit;
opacity: 0.7;
margin-bottom: 4px;
}
.tier-price {
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t3);
color: inherit;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 2px;
}
.tier-price span {
font-family: var(--font-ui);
font-size: 0.45em;
font-weight: 400;
opacity: 0.6;
letter-spacing: 0;
vertical-align: middle;
}
.tier-billing {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
opacity: 0.45;
margin-bottom: clamp(12px, 1.6vh, 18px);
}
.tier-features {
list-style: none;
flex: 1;
display: flex;
flex-direction: column;
gap: clamp(5px, 0.7vh, 8px);
margin-bottom: clamp(14px, 1.8vh, 20px);
}
.tier-features li {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: inherit;
display: flex;
align-items: baseline;
gap: 7px;
}
.tier-features li::before {
content: '✓';
font-weight: 500;
opacity: 0.65;
flex-shrink: 0;
font-size: 0.9em;
}
.tier-features li.unavail {
opacity: 0.28;
}
.tier-features li.unavail::before {
content: '—';
}
.feat-badge {
font-family: var(--font-ui);
font-size: var(--fs-t3);
font-weight: 500;
letter-spacing: 0.04em;
background: rgba(80, 50, 200, 0.12);
color: rgba(80, 50, 200, 0.85);
padding: 1px 5px;
border-radius: 4px;
margin-left: 3px;
vertical-align: middle;
flex-shrink: 0;
}
.tier-pro .feat-badge {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
}
/* DS: card-level action button → btn-rounded */
.tier-btn {
width: 100%;
padding: clamp(9px, 1.1vh, 13px) 16px;
border-radius: var(--btn-rounded);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
border: 1.5px solid rgba(30, 30, 40, 0.18);
background: rgba(30, 30, 40, 0.06);
color: var(--ui-ink);
cursor: pointer;
transition: opacity 180ms, box-shadow 180ms;
}
.tier-btn:hover {
opacity: 0.82;
}
/* DS: primary action btn on dark tier card → bg-cool (warm white) not pure white */
.tier-btn-primary {
background: var(--bg-cool);
color: var(--ui-ink);
border-color: var(--bg-cool);
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.18);
}
.p-footer {
margin-top: clamp(14px, 1.8vh, 20px);
text-align: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.4);
}
.p-footer a {
color: rgba(30, 30, 40, 0.6);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── 8. CALCULATOR MODAL ─────────────────────────────────────── */
/* Overrides the base #pricing-card style above to become a two-column grid */
#pricing-card {
width: min(1020px, 96vw);
padding: 0;
max-height: none;
overflow-y: visible;
display: grid;
grid-template-columns: 280px 1fr;
overflow: hidden;
}
/* ── 8a. Left panel — "What you get" ── */
/* DS: Product Dark context → ui-dark bg, bg-warm text (cream on dark)
* DS Rule: use #F4F1E8 (cream) not pure white on dark surfaces — warmer */
.calc-left-panel {
background: var(--ui-dark);
color: var(--bg-warm);
padding: clamp(28px, 4vh, 44px) clamp(20px, 2.2vw, 30px);
display: flex;
flex-direction: column;
gap: clamp(20px, 2.6vh, 30px);
overflow-y: auto;
max-height: 92vh;
scrollbar-width: thin;
scrollbar-color: rgba(244, 241, 232, 0.18) transparent;
}
.calc-left-panel::-webkit-scrollbar {
width: 6px;
}
.calc-left-panel::-webkit-scrollbar-thumb {
background: rgba(244, 241, 232, 0.18);
border-radius: 3px;
}
.calc-left-panel::-webkit-scrollbar-track {
background: transparent;
}
/* "What you get" — T2 eyebrow */
.calc-panel-eyebrow {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t2);
letter-spacing: 0.04em;
color: rgba(244, 241, 232, 0.38);
}
/* "Location Intelligence, delivered as an interactive dashboard." — T2 hook */
.calc-panel-title {
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t2);
color: var(--bg-warm);
letter-spacing: -0.02em;
line-height: 1.26;
margin-top: -12px;
overflow-wrap: break-word;
word-break: break-word;
}
/* tier block: badge + name + features */
.calc-what-tier {
display: flex;
flex-direction: column;
gap: 10px;
}
.calc-tier-badge {
display: inline-block;
align-self: flex-start;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.03em;
padding: 3px 9px;
border-radius: 20px;
background: rgba(244, 241, 232, 0.1);
color: rgba(244, 241, 232, 0.55);
}
.calc-tier-badge.t2 {
background: rgba(37, 211, 102, 0.14);
color: rgba(37, 211, 102, 0.85);
}
.calc-tier-name {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
color: var(--bg-warm);
margin-bottom: 2px;
}
.calc-tier-desc {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(244, 241, 232, 0.45);
line-height: 1.55;
}
/* features list:
* bullet sits in a fixed-width left gutter; all content (title + br + subtitle)
* wraps inside the right column so the subtitle's left edge aligns with the title.
*/
.calc-tier-features {
list-style: none;
display: flex;
flex-direction: column;
gap: clamp(7px, 0.9vh, 11px);
margin-top: 6px;
}
.calc-tier-features li {
position: relative;
padding-left: 18px;
/* gutter for the bullet */
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(244, 241, 232, 0.78);
line-height: 1.4;
}
.calc-tier-features li::before {
content: '✓';
position: absolute;
left: 0;
top: 0.05em;
color: rgba(37, 211, 102, 0.7);
font-size: 0.88em;
}
.calc-tier-features li.plus::before {
content: '+';
color: rgba(37, 211, 102, 0.9);
}
/* feature subtitle — sits under each bold feature name, flush-left with the title */
.calc-feat-sub {
display: block;
margin-top: 3px;
font-family: var(--font-ui);
font-weight: 400;
font-size: var(--fs-t3);
letter-spacing: 0.01em;
color: rgba(244, 241, 232, 0.48);
line-height: 1.5;
}
/* the explicit
between title and subtitle is redundant once .calc-feat-sub is block */
.calc-tier-features li br {
display: none;
}
.calc-exclusive-badge {
display: inline-block;
margin-left: 5px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
background: rgba(130, 80, 220, 0.18);
color: rgba(170, 130, 255, 0.9);
vertical-align: middle;
flex-shrink: 0;
}
.calc-tier-sep {
height: 1px;
background: rgba(244, 241, 232, 0.08);
margin: 2px 0;
}
.calc-tier-access {
margin-top: 8px;
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(244, 241, 232, 0.38);
}
.calc-tier-access::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(37, 211, 102, 0.5);
flex-shrink: 0;
}
/* ── 8b. Right panel — form inputs & breakdown cards ── */
/* DS: form panel → bg-cool surface (Content moment) */
.calc-right-panel {
padding: clamp(28px, 4vh, 44px) clamp(22px, 2.5vw, 36px);
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 92vh;
background: var(--bg-cool);
}
.calc-right-header {
padding-bottom: clamp(16px, 2.2vh, 24px);
border-bottom: 1px solid rgba(30, 30, 40, 0.08);
margin-bottom: clamp(16px, 2.2vh, 24px);
}
/* "Estimate your cost" — T2 title */
.calc-right-title {
font-family: var(--font-hook);
font-weight: 700;
font-size: var(--fs-t2);
letter-spacing: -0.02em;
color: var(--ui-ink);
margin-bottom: 5px;
}
.calc-right-sub {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.48);
.calc-section {
padding-bottom: clamp(16px, 2.2vh, 24px);
border-bottom: 1px solid rgba(30, 30, 40, 0.08);
margin-bottom: clamp(16px, 2.2vh, 24px);
}
.calc-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
padding-bottom: clamp(16px, 2.2vh, 24px);
border-bottom: 1px solid rgba(30, 30, 40, 0.08);
margin-bottom: clamp(16px, 2.2vh, 24px);
}
.calc-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
.calc-section-label {
display: block;
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.45);
margin-bottom: 8px;
}
/* search row: text input + Search button */
.calc-search-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
/* manual row: "Or enter manually:" + size input + unit select + Apply */
.calc-manual-row {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.calc-manual-label {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.42);
white-space: nowrap;
}
/* DS: inline input → btn-compact radius, bg-sand background */
.calc-input {
flex: 1;
min-width: 0;
padding: 9px 12px;
border-radius: var(--btn-compact);
border: 1.5px solid rgba(30, 30, 40, 0.13);
background: rgba(30, 30, 40, 0.03);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
outline: none;
transition: border-color 180ms;
}
.calc-input:focus {
border-color: rgba(30, 30, 40, 0.35);
}
.calc-input.input-error,
.cpm-poi-textarea.input-error {
border-color: #e53e3e !important;
background: rgba(229, 62, 62, 0.04);
}
@keyframes input-shake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-5px);
}
40% {
transform: translateX(5px);
}
60% {
transform: translateX(-4px);
}
80% {
transform: translateX(4px);
}
}
.calc-input.input-shake,
.cpm-poi-textarea.input-shake {
animation: input-shake 0.38s ease;
}
.calc-input-sm {
flex: 0 0 68px;
}
.calc-select-sm {
padding: 9px 8px;
border-radius: var(--btn-compact);
border: 1.5px solid rgba(30, 30, 40, 0.13);
background: rgba(30, 30, 40, 0.03);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
outline: none;
cursor: pointer;
}
.calc-code-sel {
min-width: 96px;
}
.calc-code-manual {
flex: 0 0 84px;
max-width: 84px;
}
/* DS: inline row (search/apply) → btn-compact · Search = ui-dark · Apply = neutral */
.calc-btn-search,
.calc-btn-apply {
padding: 9px 16px;
border-radius: var(--btn-compact);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.03em;
border: 1.5px solid rgba(30, 30, 40, 0.18);
background: var(--ui-dark);
color: var(--bg-warm);
cursor: pointer;
white-space: nowrap;
transition: opacity 160ms;
}
.calc-btn-search:hover,
.calc-btn-apply:hover {
opacity: 0.78;
}
.calc-btn-apply {
background: rgba(30, 30, 40, 0.07);
color: var(--ui-ink);
border-color: rgba(30, 30, 40, 0.11);
}
/* status line below search row */
.calc-status {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.45);
min-height: 18px;
margin-bottom: 6px;
transition: color 200ms;
}
.calc-status.warn {
color: #c07000;
}
.calc-status.ok,
.calc-status.found {
color: #1a6632;
}
/* — breakdown cards (two per row) — */
.calc-breakdown {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: clamp(14px, 1.9vh, 20px);
}
@media (max-width: 520px) {
.calc-breakdown {
grid-template-columns: 1fr;
}
}
/* rate label on each card */
.calc-bd-card-rate {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 700;
margin-top: 4px;
letter-spacing: 0.01em;
}
/* strikethrough + savings in total bar */
.calc-total-price-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.calc-total-scratch {
font-family: var(--font-ui);
font-size: 1rem;
font-weight: 500;
color: rgba(244, 241, 232, 0.35);
text-decoration: line-through;
}
.calc-savings-note {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
color: rgba(37, 211, 102, 0.78);
margin-top: 3px;
display: block;
}
.calc-bd-card {
position: relative;
background: rgba(30, 30, 40, 0.04);
border: 1.5px solid rgba(30, 30, 40, 0.08);
border-radius: 11px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.calc-bd-card.extra {
border-color: rgba(30, 30, 40, 0.11);
}
/* extra card transitions to purple when Tier 2 add-ons are active */
/* selectable coverage cards */
.calc-bd-card.card-sel {
cursor: pointer;
user-select: none;
transition: border-color 220ms ease, opacity 180ms ease, background 220ms ease;
}
.calc-bd-card.card-on {
border-color: rgba(37, 211, 102, 0.65);
}
.calc-bd-card.card-off {
border-color: rgba(30, 30, 40, 0.07);
}
.calc-bd-card.card-sel:hover {
box-shadow: 0 0 0 3px rgba(30, 30, 40, 0.06);
}
.calc-bd-card.card-sel.card-off:hover {
border-color: rgba(30, 30, 40, 0.2);
}
.calc-bd-card.card-sel.card-on:hover {
border-color: rgba(37, 211, 102, 0.9);
}
.calc-bd-check {
position: absolute;
top: 8px;
right: 8px;
width: 17px;
height: 17px;
border-radius: 50%;
background: rgba(37, 211, 102, 0.85);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
}
.card-on .calc-bd-check {
display: flex;
}
#calc-extra-card {
cursor: pointer;
user-select: none;
}
#calc-extra-card.is-t2 {
background: rgba(108, 60, 220, 0.05);
}
#calc-extra-card.is-t2.card-on {
border-color: rgba(37, 211, 102, 0.65);
}
#calc-extra-card.is-t2 .calc-bd-card-label {
color: rgba(108, 60, 220, 0.65);
}
#calc-extra-card.is-t2 .calc-bd-card-grids {
color: var(--util-purple);
}
#calc-extra-card.is-t2 .calc-bd-card-area {
color: rgba(108, 60, 220, 0.55);
}
.calc-total-rec-note {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
color: rgba(37, 211, 102, 0.82);
display: none;
margin-top: 3px;
}
.calc-total-rec-note.visible {
display: block;
}
.calc-bd-base-pct {
font-family: var(--font-ui);
font-size: var(--fs-t3);
font-weight: 500;
color: rgba(30, 30, 40, 0.4);
margin-top: 4px;
line-height: 1.35;
}
.calc-bd-benefit-stat {
font-family: var(--font-ui);
font-size: var(--fs-t3);
font-weight: 700;
color: rgba(30, 30, 40, 0.82);
margin-top: 6px;
line-height: 1.35;
}
#calc-extra-card.is-t2 .calc-bd-benefit-stat {
color: var(--util-purple);
}
.calc-bd-benefit-why {
font-family: var(--font-ui);
font-size: var(--fs-t3);
font-weight: 500;
color: rgba(30, 30, 40, 0.42);
margin-top: 3px;
line-height: 1.38;
}
.calc-bd-card-toggle-hint {
font-family: var(--font-ui);
font-size: 0.78em;
font-weight: 500;
color: rgba(30, 30, 40, 0.28);
margin-top: 5px;
}
/* disabled submit button */
.calc-btn-submit:disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
.calc-btn-submit-hint {
display: none;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(244, 241, 232, 0.55);
margin-top: 6px;
text-align: right;
}
.calc-btn-submit-hint.visible {
display: block;
}
.calc-total-plus-t1 {
opacity: 0.65;
}
.calc-total-plus-t2 {
color: #8b5cf6;
font-weight: 700;
}
/* Tier 1 price row — always visible */
.calc-bd-t1-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.calc-bd-t1-row .calc-bd-row-rate {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.45);
}
.calc-bd-t1-row .calc-bd-row-price {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
white-space: nowrap;
}
/* Tier 2 price row — hidden, slides in when add-ons are active */
.calc-bd-t2-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
transition: max-height 340ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 260ms ease 80ms,
margin-top 340ms ease;
}
.calc-bd-t2-row.visible {
max-height: 32px;
opacity: 1;
margin-top: 2px;
}
.calc-bd-t2-row .calc-bd-row-rate {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(108, 60, 220, 0.65);
}
.calc-bd-t2-row .calc-bd-row-price {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
color: var(--util-purple);
white-space: nowrap;
}
/* card label, grid count, area note, price */
.calc-bd-card-label {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.42);
margin-bottom: 4px;
}
.calc-bd-card-grids {
font-family: var(--font-ui);
font-weight: 700;
font-size: var(--fs-t3);
letter-spacing: -0.01em;
line-height: 1;
color: var(--ui-ink);
}
.calc-bd-card-area {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.45);
}
.calc-bd-card-price {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
color: var(--ui-ink);
margin-top: 6px;
}
/* ── 8c. Add-ons section ── */
.calc-var-header {
margin-bottom: 8px;
}
.calc-var-add-row {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.calc-var-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
/* variable cost breakdown cards (purple tint) */
.calc-var-breakdown {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.calc-bd-card.t2-var {
border-color: rgba(108, 60, 220, 0.22);
background: rgba(108, 60, 220, 0.04);
}
.calc-bd-card.t2-var .calc-bd-card-label {
color: rgba(108, 60, 220, 0.6);
}
.calc-bd-card.t2-var .calc-bd-row-price {
color: var(--util-purple);
}
/* selected variable chips */
.calc-var-chip {
display: flex;
align-items: center;
gap: 5px;
background: rgba(30, 30, 40, 0.07);
border-radius: 20px;
padding: 5px 10px 5px 12px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
}
.calc-var-remove {
border: none;
background: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0 2px;
color: rgba(30, 30, 40, 0.38);
transition: color 140ms;
}
.calc-var-remove:hover {
color: #c03030;
}
/* "if area exceeds base: +Rp 1.000…" notice */
.calc-addon-area-notice {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(180, 100, 0, 0.7);
margin: 4px 0 6px;
}
/* sub-notes below breakdown */
.calc-var-pricing-hint {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.35);
margin: 5px 0 8px;
}
.calc-var-price-note {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.45);
margin-bottom: 8px;
}
/* "scroll down to see total" floating capsule */
.calc-scroll-hint-wrap {
position: sticky;
bottom: 12px;
display: flex;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 280ms ease;
}
.calc-scroll-hint-wrap.visible {
opacity: 1;
pointer-events: auto;
}
.calc-scroll-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px 7px 12px;
border-radius: 999px;
background: rgba(22, 22, 30, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.88);
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
transition: background 160ms ease, transform 160ms ease;
}
.calc-scroll-hint:hover {
background: rgba(22, 22, 30, 0.94);
transform: translateY(1px);
}
.calc-scroll-hint svg {
flex-shrink: 0;
animation: hint-bounce 1.6s ease-in-out infinite;
}
@keyframes hint-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
/* contact fields */
.calc-contact-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.calc-phone-row {
display: flex;
gap: 8px;
}
/* ── 8d. Total bar ── */
/* DS: pricing/total bar → ui-dark (Product Dark context) */
.calc-total-bar {
display: flex;
flex-direction: column;
gap: clamp(10px, 1.4vh, 14px);
background: var(--ui-dark);
border-radius: 14px;
padding: clamp(14px, 1.8vh, 20px) clamp(16px, 1.6vw, 22px);
margin-top: clamp(10px, 1.4vh, 16px);
}
.calc-total-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
min-height: clamp(46px, 5.2vh, 58px);
}
.calc-total-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(6px, 0.8vh, 10px);
text-align: left;
}
/* "Estimated total / 1 month" label */
.calc-total-label {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(244, 241, 232, 0.55);
}
.calc-total-duration {
font-size: 1em;
opacity: 0.6;
font-weight: 500;
letter-spacing: 0.02em;
}
/* DS: price display in dark panel → font-display (Zilla Slab) at T2, bg-warm cream text */
.calc-total-val {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-t2);
letter-spacing: -0.02em;
line-height: 1;
color: var(--bg-warm);
}
/* placeholder state before area is entered — overrides to T3 */
.calc-total-empty {
font-family: var(--font-ui) !important;
font-weight: 500 !important;
font-size: var(--fs-t3) !important;
letter-spacing: 0 !important;
color: rgba(244, 241, 232, 0.35) !important;
}
.calc-submit-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* DS: submit inside dark panel → btn-compact (inline row context), ghost style */
.calc-btn-submit {
display: inline-flex;
align-items: center;
gap: 8px;
padding: clamp(10px, 1.2vh, 13px) clamp(16px, 1.6vw, 22px);
border-radius: var(--btn-compact);
border: 1.5px solid rgba(244, 241, 232, 0.35);
background: transparent;
color: var(--bg-warm);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
cursor: pointer;
white-space: nowrap;
transition: border-color 180ms, background 180ms;
}
.calc-btn-submit:hover {
border-color: rgba(244, 241, 232, 0.7);
background: rgba(244, 241, 232, 0.07);
}
.calc-btn-submit svg {
flex-shrink: 0;
}
/* "We'll follow up within 1 business day" — centered under the whole total bar */
.calc-submit-hint {
display: block;
text-align: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.01em;
color: rgba(30, 30, 40, 0.45);
padding-top: clamp(10px, 1.2vh, 14px);
}
/* ── 8e. Footer links ── */
/* "Estimate only — final pricing confirmed after consultation." */
.calc-tos-line {
margin-top: 10px;
text-align: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.32);
}
/* "Want a custom order? Contact us" */
.calc-custom-order {
margin-top: 8px;
text-align: center;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
}
.calc-custom-order a {
color: rgba(30, 30, 40, 0.5);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 160ms;
}
.calc-custom-order a:hover {
color: rgba(30, 30, 40, 0.85);
}
/* ── 9. CLIENTS CAROUSEL ─────────────────────────────────────── */
/* Phase 1 only — right bar, absolutely positioned so it doesn't
* affect the legend flex layout. Track is duplicated for seamless loop. */
#bar-clients {
position: absolute;
top: clamp(10px, 1.2vh, 15px);
bottom: clamp(28px, 3.2vh, 40px);
/* bottom clears Terms & Privacy */
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(6px, 0.7vh, 10px);
opacity: 1;
pointer-events: none;
/* carousel never blocks legend clicks */
transition: opacity 380ms ease;
}
#bar-clients.hidden {
opacity: 0;
}
.clients-label {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.06em;
color: rgba(30, 30, 40, 0.28);
flex-shrink: 0;
padding: 0 clamp(12px, 1.3vw, 20px);
/* align with bar-right padding */
}
/* fade edges with mask so logos don't hard-clip */
.clients-track-wrap {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.clients-track {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 18px);
width: max-content;
padding: 0 clamp(12px, 1.3vw, 20px);
animation: clients-scroll-h 160s linear infinite;
will-change: transform;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
@keyframes clients-scroll-h {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
/* text logos now; swap to ![]()
later — max-height keeps images restrained */
.client-logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 100px;
height: 46px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 1px 8px rgba(30, 30, 40, 0.10), 0 0.5px 2px rgba(30, 30, 40, 0.06);
padding: 8px 12px;
overflow: hidden;
}
.client-logo img {
max-height: 28px;
max-width: 74px;
width: auto;
height: auto;
object-fit: contain;
opacity: 1;
}
.client-logo svg {
flex-shrink: 0;
}
/* ── 10. RESPONSIVE ──────────────────────────────────────────── */
/* 700px — calculator: stack left panel above right panel */
@media (max-width: 700px) {
#pricing-card {
grid-template-columns: 1fr;
width: min(460px, 96vw);
}
.calc-left-panel {
max-height: 44vh;
}
/* stack: independent scroll preserved */
.calc-right-panel {
max-height: 60vh;
}
/* .calc-breakdown single-col on all sizes */
}
/* 620px — mobile: collapse to center bar only; overlays replace left/right */
#mob-back-btn {
display: none;
}
/* desktop off */
#mob-legend-wrap {
display: none;
}
/* desktop off */
@media (max-width: 620px) {
#top-bar {
grid-template-columns: 1fr;
height: auto;
}
#bar-left {
display: none;
}
#bar-right {
display: none;
}
#bar-center {
border-right: none;
padding: clamp(8px, 2.2vw, 13px) clamp(14px, 4.5vw, 22px) clamp(6px, 1.8vw, 10px);
gap: clamp(4px, 1.4vw, 8px);
}
/* explicit height: parent is auto so flex:1 on #hook-clip would collapse */
#hook-clip {
flex: 0 0 auto;
min-height: clamp(46px, 10vh, 66px);
justify-content: center;
}
/* mobile font scale overrides */
#bar-hook.brand {
font-size: 0;
line-height: 0;
}
#bar-hook {
font-size: clamp(14px, 4.2vw, 20px);
}
#full-hint-h1 {
font-size: clamp(20px, 6.5vw, 30px);
}
/* bigger touch targets */
#bar-next {
padding: 14px 28px;
flex: 1;
}
.btn-text {
font-size: clamp(14px, 4vw, 17px);
}
#bar-login {
padding: 13px 22px;
font-size: clamp(13px, 3.5vw, 16px);
}
#bar-help {
font-size: clamp(12px, 3.2vw, 15px);
padding: 13px 3px;
gap: 6px;
}
#bar-help svg {
width: 13px;
height: 12px;
}
/* tighter content frame */
#content-frame {
padding: clamp(5px, 1.5vw, 8px);
}
/* back button — absolute overlay top-left of hero; DS: capsule pill */
#mob-back-btn {
display: block;
position: absolute;
top: 11px;
left: 11px;
z-index: 20;
background: rgba(244, 241, 232, 0.88);
backdrop-filter: blur(10px);
border: 1px solid rgba(30, 30, 40, 0.09);
border-radius: var(--btn-capsule);
padding: 11px 18px;
cursor: pointer;
font-family: var(--font-ui);
font-weight: 500;
font-size: clamp(11px, 3vw, 13px);
letter-spacing: 0.03em;
color: rgba(30, 30, 40, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 380ms ease;
}
/* legend strip — absolute overlay bottom of hero */
#mob-legend-wrap {
display: block;
position: absolute;
bottom: 11px;
left: 11px;
right: 11px;
z-index: 20;
background: rgba(244, 241, 232, 0.90);
backdrop-filter: blur(12px);
border: 1px solid rgba(30, 30, 40, 0.07);
border-radius: 14px;
padding: 10px 14px;
opacity: 0;
pointer-events: none;
transition: opacity 400ms ease;
max-height: 40vh;
overflow-y: auto;
}
}
/* ── EXTEND COVERAGE CHECKBOX (inside total bar) ───────── */
.calc-extend-row {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(244, 241, 232, 0.12);
}
.calc-extend-note {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(244, 241, 232, 0.52);
line-height: 1.5;
}
/* ── ADD-ONS CHECKLIST ───────────────────────────────────── */
.calc-var-checklist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 10px;
margin-bottom: 10px;
}
.calc-var-check-item {
display: flex;
align-items: flex-start;
gap: 7px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
cursor: pointer;
user-select: none;
padding: 5px 6px;
border-radius: 7px;
border: 1.5px solid transparent;
transition: background 140ms, border-color 140ms;
}
.calc-var-check-item:hover {
background: rgba(30, 30, 40, 0.04);
}
.calc-var-check-item.checked {
background: rgba(108, 60, 220, 0.06);
border-color: rgba(108, 60, 220, 0.25);
}
.calc-var-check-item input[type="checkbox"] {
accent-color: var(--util-purple);
margin-top: 1px;
flex-shrink: 0;
cursor: pointer;
}
.calc-var-check-label {
line-height: 1.35;
}
.calc-var-check-badge {
font-size: 0.82em;
letter-spacing: 0.03em;
background: rgba(130, 80, 220, 0.12);
color: rgba(110, 60, 200, 0.85);
padding: 1px 5px;
border-radius: 4px;
margin-left: 4px;
vertical-align: middle;
}
.calc-var-manual-row {
display: flex;
gap: 8px;
margin-top: 4px;
}
/* ── DURATION CARDS ─────────────────────────────────────── */
.calc-duration-wrap {
margin-bottom: clamp(10px, 1.4vh, 16px);
}
.calc-duration-label-row {
display: block;
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.45);
margin-bottom: 8px;
}
.calc-duration-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
/* DS: selectable card → radius-card */
.calc-duration-card {
padding: 12px 14px;
border-radius: var(--radius-card);
border: 1.5px solid rgba(30, 30, 40, 0.12);
background: rgba(30, 30, 40, 0.03);
cursor: pointer;
text-align: left;
transition: border-color 160ms, background 160ms;
font-family: var(--font-ui);
display: flex;
flex-direction: column;
}
.calc-duration-card:hover {
background: rgba(30, 30, 40, 0.06);
}
/* DS: selected card → ui-dark bg, bg-warm (cream) text */
.calc-duration-card.selected {
border-color: var(--ui-dark);
background: var(--ui-dark);
color: var(--bg-warm);
cursor: default;
}
.calc-dur-pricing {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(30, 30, 40, 0.1);
}
.calc-duration-card.selected .calc-dur-pricing {
border-top-color: rgba(244, 241, 232, 0.12);
}
.calc-dur-price-row {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.calc-dur-scratch-price {
font-size: 0.75rem;
font-weight: 500;
color: rgba(30, 30, 40, 0.3);
text-decoration: line-through;
}
.calc-duration-card.selected .calc-dur-scratch-price {
color: rgba(244, 241, 232, 0.28);
}
.calc-dur-real-price {
font-size: 1.0rem;
font-weight: 700;
color: var(--ui-ink);
letter-spacing: -0.3px;
}
.calc-duration-card.selected .calc-dur-real-price {
color: var(--bg-warm);
}
.calc-dur-unit-lbl {
font-size: 0.58rem;
font-weight: 500;
margin-top: 3px;
color: rgba(30, 30, 40, 0.38);
line-height: 1.3;
}
.calc-duration-card.selected .calc-dur-unit-lbl {
color: rgba(244, 241, 232, 0.35);
}
.calc-dur-saving {
font-size: 0.63rem;
font-weight: 700;
margin-top: 5px;
color: rgba(37, 211, 102, 0.9);
}
.calc-dur-cta-slot {
margin-top: 12px;
}
.calc-dur-cta-slot .calc-btn-submit {
width: 100%;
justify-content: center;
}
.calc-dur-months {
font-weight: 600;
font-size: var(--fs-t3);
line-height: 1.2;
}
.calc-dur-discount {
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(34, 197, 94, 0.9);
margin-top: 2px;
}
.calc-duration-card.selected .calc-dur-discount {
color: rgba(110, 230, 140, 0.9);
}
.calc-dur-sublabel {
font-weight: 400;
font-size: var(--fs-t3);
opacity: 0.45;
margin-top: 2px;
}
/* ── PRICING MATRIX (unified tier × duration) ─────────────── */
.calc-pricing-matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 4px;
}
.cpm-col {
border: 1.5px solid rgba(30, 30, 40, 0.12);
border-radius: 14px;
padding: 14px 12px;
background: rgba(30, 30, 40, 0.03);
cursor: pointer;
display: flex;
flex-direction: column;
transition: border-color 160ms, background 160ms;
font-family: var(--font-ui);
}
.cpm-col:hover:not(.col-locked):not(.col-dimmed):not(.col-active) {
background: rgba(30, 30, 40, 0.06);
}
/* DS: active pricing column → ui-dark bg, bg-warm text */
.cpm-col.col-active {
border-color: var(--ui-dark);
background: var(--ui-dark);
color: var(--bg-warm);
cursor: default;
}
.cpm-col.col-locked {
cursor: not-allowed;
}
.cpm-col.col-dimmed {
cursor: not-allowed;
}
/* Dim content children individually — leaves hints at full opacity */
.cpm-col.col-locked .cpm-tier-badge,
.cpm-col.col-locked .cpm-tier-grids,
.cpm-col.col-locked .cpm-tier-area,
.cpm-col.col-locked .cpm-tier-rate,
.cpm-col.col-locked .cpm-divider,
.cpm-col.col-locked .cpm-dur-label,
.cpm-col.col-locked .cpm-dur-disc,
.cpm-col.col-locked .cpm-price,
.cpm-col.col-locked .cpm-scratch,
.cpm-col.col-locked .cpm-dur-unit,
.cpm-col.col-locked .cpm-saving,
.cpm-col.col-locked .cpm-pts {
opacity: 0.35;
}
.cpm-col.col-dimmed .cpm-tier-badge,
.cpm-col.col-dimmed .cpm-tier-grids,
.cpm-col.col-dimmed .cpm-tier-area,
.cpm-col.col-dimmed .cpm-tier-rate,
.cpm-col.col-dimmed .cpm-divider,
.cpm-col.col-dimmed .cpm-dur-label,
.cpm-col.col-dimmed .cpm-dur-disc,
.cpm-col.col-dimmed .cpm-price,
.cpm-col.col-dimmed .cpm-scratch,
.cpm-col.col-dimmed .cpm-dur-unit,
.cpm-col.col-dimmed .cpm-saving,
.cpm-col.col-dimmed .cpm-pts {
opacity: 0.35;
}
.cpm-col.col-t2 .cpm-tier-rate {
color: #7c3aed;
}
.cpm-col.col-active .cpm-tier-rate {
color: rgba(244, 241, 232, 0.65) !important;
}
.cpm-tier-badge {
font-weight: 700;
font-size: var(--fs-t2);
}
.cpm-t2-label {
color: #8b5cf6;
}
.cpm-col.col-active .cpm-t2-label {
color: rgba(37, 211, 102, 0.95);
}
.cpm-tier-grids {
font-size: var(--fs-t3);
font-weight: 600;
opacity: 0.65;
margin-top: 3px;
}
.cpm-tier-area {
font-size: var(--fs-t3);
font-weight: 400;
opacity: 0.40;
}
.cpm-tier-rate {
font-size: var(--fs-t2);
font-weight: 700;
margin-top: 6px;
color: rgba(30, 30, 40, 0.72);
letter-spacing: -0.02em;
line-height: 1;
}
.cpm-col.col-full .cpm-tier-rate {
color: rgba(37, 211, 102, 0.9);
}
.cpm-col.col-active .cpm-tier-rate {
color: rgba(244, 241, 232, 0.82) !important;
}
.cpm-divider {
height: 1px;
background: rgba(30, 30, 40, 0.1);
margin: 10px 0;
}
/* ── RATE HIGHLIGHT: green on black for 500/grid and 400/grid ─── */
.cpm-col.col-full.col-active .cpm-tier-rate,
.cpm-col.col-t2.col-active .cpm-tier-rate {
color: rgba(110, 230, 140, 0.95) !important;
}
.cpm-col.col-active .cpm-divider {
background: rgba(244, 241, 232, 0.12);
}
.cpm-dur-rows {
display: flex;
flex-direction: column;
gap: 2px;
}
.cpm-dur-row {
padding: 8px 9px;
border-radius: 8px;
cursor: pointer;
transition: background 130ms;
}
.cpm-dur-row:hover {
background: rgba(30, 30, 40, 0.07);
}
.cpm-col.col-active .cpm-dur-row:hover {
background: rgba(244, 241, 232, 0.08);
}
.cpm-dur-row.row-active {
background: rgba(30, 30, 40, 0.08);
}
.cpm-col.col-active .cpm-dur-row.row-active {
background: rgba(244, 241, 232, 0.1);
}
.cpm-dur-label {
font-size: var(--fs-t3);
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.cpm-dur-disc {
font-size: var(--fs-t3);
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
background: rgba(37, 211, 102, 0.12);
color: rgba(37, 211, 102, 0.9);
}
.cpm-col.col-active .cpm-dur-disc {
background: rgba(110, 230, 140, 0.13);
color: rgba(110, 230, 140, 0.95);
}
.cpm-price {
display: block;
font-size: var(--fs-t2);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
margin-top: 3px;
}
.cpm-scratch {
display: block;
font-size: var(--fs-t3);
font-weight: 500;
text-decoration: line-through;
opacity: 0.30;
margin-top: 1px;
}
.cpm-dur-unit {
font-size: var(--fs-t3);
font-weight: 500;
opacity: 0.36;
margin-top: 2px;
line-height: 1.3;
}
.cpm-saving {
font-size: var(--fs-t3);
font-weight: 700;
color: rgba(37, 211, 102, 0.9);
margin-top: 3px;
}
.cpm-col.col-active .cpm-saving {
color: rgba(110, 230, 140, 0.95);
}
.cpm-pts {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(30, 30, 40, 0.08);
}
.cpm-col.col-active .cpm-pts {
border-top-color: rgba(244, 241, 232, 0.1);
}
.cpm-pts ul {
list-style: none;
padding: 0;
margin: 0;
}
.cpm-pts li {
font-size: var(--fs-t3);
font-weight: 400;
opacity: 0.55;
padding: 2px 0 2px 14px;
position: relative;
}
.cpm-pts li::before {
content: '·';
position: absolute;
left: 4px;
opacity: 0.5;
}
/* Add-ons applied badge in column header */
.cpm-addon-badge {
display: inline-flex;
align-items: center;
font-size: var(--fs-t3);
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
margin-left: 6px;
background: rgba(139, 92, 246, 0.12);
color: #8b5cf6;
white-space: nowrap;
vertical-align: middle;
}
.cpm-col.col-active .cpm-addon-badge {
background: rgba(37, 211, 102, 0.15);
color: rgba(37, 211, 102, 0.95);
}
.cpm-lock-hint,
.cpm-move-hint {
font-size: var(--fs-t3);
font-weight: 700;
color: #8b5cf6 !important;
opacity: 1 !important;
text-align: center;
margin-top: 8px;
padding: 5px 8px;
border-radius: 6px;
background: rgba(139, 92, 246, 0.1);
}
.cpm-cta-slot {
margin-top: auto;
padding-top: 12px;
}
.cpm-cta-slot .calc-btn-submit {
width: 100%;
justify-content: center;
}
/* POI reference box — appears in Basic card when area > 10k grids */
.cpm-poi-box {
display: none;
/* shown by JS */
margin-bottom: 10px;
}
.cpm-poi-sep {
height: 1px;
background: rgba(244, 241, 232, 0.12);
margin: 10px 0 12px;
}
.cpm-col:not(.col-active) .cpm-poi-sep {
background: rgba(30, 30, 40, 0.1);
}
.cpm-poi-label {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.02em;
color: rgba(30, 30, 40, 0.52);
margin-bottom: 5px;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.cpm-col.col-active .cpm-poi-label {
color: rgba(244, 241, 232, 0.52);
}
.cpm-poi-required {
font-family: var(--font-ui);
font-weight: 600;
font-size: var(--fs-t3);
letter-spacing: 0.04em;
color: rgba(220, 80, 60, 0.75);
}
.cpm-col.col-active .cpm-poi-required {
color: rgba(255, 130, 110, 0.8);
}
.cpm-poi-note {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: rgba(180, 100, 0, 0.8);
margin-bottom: 7px;
line-height: 1.45;
}
.cpm-col.col-active .cpm-poi-note {
color: rgba(255, 190, 90, 0.85);
}
.cpm-poi-textarea {
width: 100%;
min-height: 96px;
padding: 9px 11px;
border-radius: 9px;
border: 1.5px solid rgba(30, 30, 40, 0.15);
background: rgba(30, 30, 40, 0.04);
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
color: var(--ui-ink);
line-height: 1.5;
resize: vertical;
outline: none;
transition: border-color 180ms;
}
.cpm-poi-textarea:focus {
border-color: rgba(30, 30, 40, 0.38);
}
.cpm-poi-textarea::placeholder {
color: rgba(30, 30, 40, 0.32);
}
.cpm-col.col-active .cpm-poi-textarea {
background: rgba(244, 241, 232, 0.08);
border-color: rgba(244, 241, 232, 0.2);
color: var(--bg-warm);
}
.cpm-col.col-active .cpm-poi-textarea::placeholder {
color: rgba(244, 241, 232, 0.3);
}
.cpm-col.col-active .cpm-poi-textarea:focus {
border-color: rgba(244, 241, 232, 0.5);
}
/* ── JAKPAT LOGO inline SVG in top bar ─────────────────── */
/* Height sized so the text glyphs (~57% of viewBox) visually match
the surrounding Montserrat font-size. Cap-height ≈ 1em × 0.74 (Montserrat),
SVG needed ≈ 0.74 / 0.57 ≈ 1.3em so glyphs align with surrounding text. */
.jakpat-logo-svg {
display: inline-block;
vertical-align: -0.22em;
/* sink to sit on baseline */
height: 1.35em;
}
/* ── CUSTOM SUB-AREA DROPDOWN ────────────────────────────── */
.calc-subarea-dropdown {
position: relative;
width: 100%;
}
.calc-subarea-trigger {
width: 100%;
padding: 9px 12px;
border-radius: var(--btn-compact);
border: 1.5px solid rgba(30, 30, 40, 0.18);
background: var(--bg-cool);
font-family: var(--font-ui);
font-size: var(--fs-t3);
color: rgba(30, 30, 40, 0.38);
cursor: pointer;
user-select: none;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: border-color 160ms;
}
.calc-subarea-trigger:hover {
border-color: rgba(30, 30, 40, 0.32);
}
.calc-subarea-trigger.has-value {
color: var(--ui-ink);
}
.calc-subarea-trigger-arrow {
flex-shrink: 0;
opacity: 0.4;
font-size: 0.8em;
transition: transform 200ms;
}
.calc-subarea-trigger.open .calc-subarea-trigger-arrow {
transform: rotate(180deg);
}
/* DS: dropdown surface → bg-cool (not pure white) */
.calc-subarea-options {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 200;
background: var(--bg-cool);
border: 1.5px solid rgba(30, 30, 40, 0.15);
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
}
.calc-subarea-options.open {
display: block;
}
.calc-subarea-opt {
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
font-family: var(--font-ui);
font-size: var(--fs-t3);
color: var(--ui-ink);
cursor: pointer;
text-align: left;
background: none;
border: none;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 100ms;
}
.calc-subarea-opt:hover,
.calc-subarea-opt:focus {
background: rgba(30, 30, 40, 0.06);
outline: none;
}
.calc-subarea-opt:first-child {
border-radius: 8px 8px 0 0;
}
.calc-subarea-opt:last-child {
border-radius: 0 0 8px 8px;
}
.calc-subarea-opt.placeholder {
color: rgba(30, 30, 40, 0.4);
}
/* Card 3 — locked when no vars */
#calc-card-3.card-locked {
opacity: 0.42;
cursor: not-allowed;
}
.calc-bd-lock-hint {
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 500;
color: rgba(30, 30, 40, 0.4);
margin-top: 6px;
text-align: center;
font-style: italic;
line-height: 1.3;
}
/* Card 3 selected = full purple */
#calc-card-3.card-on {
border-color: rgba(108, 60, 220, 0.6) !important;
background: rgba(108, 60, 220, 0.06);
}
#calc-card-3.card-on .calc-bd-check {
background: rgba(108, 60, 220, 0.8);
}
/* Bullet points inside cards */
.calc-bd-pts {
list-style: none;
margin: 8px 0 0;
padding: 8px 0 0;
border-top: 1px solid rgba(30, 30, 40, 0.07);
display: flex;
flex-direction: column;
gap: 4px;
}
.calc-bd-pts li {
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 500;
color: rgba(30, 30, 40, 0.48);
line-height: 1.35;
padding-left: 10px;
position: relative;
}
.calc-bd-pts li::before {
content: '·';
position: absolute;
left: 0;
top: 0;
}
/* per-unit price sub-label */
.calc-bd-price-unit {
font-family: var(--font-ui);
font-size: 0.62rem;
font-weight: 500;
color: rgba(30, 30, 40, 0.32);
margin-top: 1px;
}
/* card 2 dimmed when Tier 2 is active */
#calc-card-2.card-dimmed {
opacity: 0.42;
cursor: not-allowed;
}
/* card 2 auto-move indicator */
.calc-bd-move-hint {
font-family: var(--font-ui);
font-size: 0.63rem;
font-weight: 600;
color: rgba(108, 60, 220, 0.6);
margin-top: 6px;
text-align: center;
letter-spacing: 0.01em;
}
/* ── YOGYAKARTA BACKGROUND MAP ──────────────────────────────── */
#yogya-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
#yogya-map .leaflet-container {
width: 100%;
height: 100%;
cursor: default !important;
background: var(--bg-warm);
}
#yogya-map .leaflet-control-attribution {
display: none;
}
/* ── DEMO DATA NOTICE ───────────────────────────────────────────── */
/* DS: demo notice badge → ui-dark bg, bg-warm (cream) text, btn-capsule */
#demo-notice {
position: absolute;
bottom: clamp(10px, 1.4vh, 16px);
left: clamp(12px, 1.4vw, 18px);
z-index: 6;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--fs-t3);
letter-spacing: 0.03em;
color: var(--bg-warm);
background: var(--ui-dark);
padding: clamp(5px, 0.65vh, 8px) clamp(10px, 0.9vw, 14px) clamp(5px, 0.65vh, 8px) clamp(8px, 0.75vw, 12px);
border-radius: var(--btn-capsule);
box-shadow: var(--shadow);
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity 500ms ease;
}
#demo-notice svg {
flex-shrink: 0;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════
* DESIGN SYSTEM v5 — VISUAL LANGUAGE RULES
* (injected alongside live product CSS — governs every placement decision)
*
* THREE MOMENT TYPES — classify before placing:
* ┌─────────────┬──────────────────┬───────────────────────────────────────┐
* │ IDENTITY │ brand-deep fill │ Zilla Slab headline · cream text │
* │ │ (max 1/page) │ Product Dark authority sections only │
* ├─────────────┼──────────────────┼───────────────────────────────────────┤
* │ ACTION │ brand-mid fill │ capsule shape · Montserrat 700 │
* │ │ (1 per page) │ Primary CTA, nav pill │
* ├─────────────┼──────────────────┼───────────────────────────────────────┤
* │ CONTENT │ neutral surfaces │ bg-warm → bg-cool → bg-sand (depth) │
* │ │ (everything else)│ Never brand fill on CONTENT elements │
* └─────────────┴──────────────────┴───────────────────────────────────────┘
*
* RATIO RULE:
* Brand fills ≤ 20% of total visual area.
* When over budget → convert secondary elements to neutral surfaces.
*
* SURFACE SYSTEM (depth hierarchy):
* bg-warm (#F4F1E8) → resting page / slide background
* bg-cool (#FAF8F2) → cards, modals, dropdowns (one step up)
* bg-sand (#EDE9DF) → secondary cards, active states (two steps up)
* bg-peach (#FEF2E7) → warm alert / notice strips
* ui-dark (#1A1A22) → Product Dark: authority panels (IDENTITY only)
* brand-deep (#031F56) → Deep Navy: hero / full-bleed sections (IDENTITY only)
* RULE: never pure #fff or #000 on any surface — use the scale above.
* RULE: text on dark surfaces → use var(--bg-warm) cream, NOT #fff.
*
* 3-TIER BUTTON SYSTEM:
* --btn-capsule (9999px) → primary CTAs, nav pills, floating badges
* --btn-rounded (12px) → form buttons, modal actions, card CTAs
* --btn-compact (9px) → inline search rows, apply rows, small chips
* RULE: never mix tiers within a single component row.
*
* TYPOGRAPHY DECISION TREE:
* Q1: Is this a brand/hero moment at ≥ 18px?
* YES → font-display (Zilla Slab) — IDENTITY moment only
* NO → font-ui (Montserrat) — all body, UI, labels, badges
* Q2: Never use Zilla Slab at T3 (12px) — too small, use Montserrat.
* Q3: Clamp sizes: --fs-t1 (28–40px) / --fs-t2 (14–20px) / --fs-t3 (9–12px)
*
* COLOR COLLISION RULES:
* - brand-mid + brand-deep: never adjacent without a neutral separator
* - util-green: only for confirmation / success / WhatsApp — never decoration
* - util-purple: only for Tier 2 add-on pricing — never decoration
* - heatmap colors: only for data intensity — never used for identity or buttons
* - heat-vlow..heat-vhigh: 5-step ramp, assign from data value not aesthetics
*
* AI DESIGN GUIDANCE:
* When asked to add a new section: classify it as IDENTITY / ACTION / CONTENT
* first, then pick surface and typography accordingly.
* When in doubt → CONTENT: neutral surface, Montserrat, no brand fill.
* ═══════════════════════════════════════════════════════════════ */
/* ─── PAGE HEADER ─── */
.page-header {
padding: var(--sp-3) var(--side-pad) var(--sp-2);
border-bottom: 1px solid var(--bg-sand);
margin-bottom: var(--sp-3);
display: flex;
align-items: baseline;
gap: var(--sp-2);
flex-wrap: wrap;
}
.page-header h1 {
font-size: var(--t1);
font-weight: 800;
color: var(--brand-deep);
line-height: 1;
letter-spacing: -1px;
}
.page-header span {
font-size: var(--t3);
color: var(--brand-mid);
font-weight: 600;
letter-spacing: .5px;
}
/* ─── SECTION LAYOUT ─── */
.section {
margin-bottom: var(--sp-5);
}
.section-title {
font-size: var(--t2);
font-weight: 700;
color: var(--brand-deep);
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-1);
}
.section-title .badge {
font-size: var(--t3);
font-weight: 600;
background: var(--brand-light);
color: var(--brand-deep);
padding: 3px 10px;
border-radius: 9999px;
}
.cards-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.card {
background: var(--bg-cool);
border-radius: var(--radius-card);
padding: var(--sp-3);
box-shadow: var(--shadow);
border: 1px solid var(--bg-sand);
flex: 1 1 220px;
min-width: 200px;
}
.card-label {
font-size: var(--t3);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--brand-mid);
margin-bottom: var(--sp-2);
}
/* ─── SPACING ─── */
.spacing-grid {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.sp-row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.sp-bar-wrap {
flex: 1;
height: 28px;
background: var(--bg-sand);
border-radius: 4px;
overflow: hidden;
}
.sp-bar {
height: 100%;
background: linear-gradient(90deg, var(--brand-mid), var(--brand-light));
border-radius: 4px;
display: flex;
align-items: center;
padding-left: 8px;
transition: width .4s;
}
.sp-bar span {
color: #fff;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.sp-label {
font-size: var(--t3);
font-weight: 700;
width: 52px;
color: var(--brand-deep);
}
.sp-note {
font-size: 10px;
color: #888;
width: 160px;
}
/* ─── COLOR SWATCHES ─── */
.color-strip {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
position: relative;
}
.swatch-box {
width: 64px;
height: 64px;
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, .08);
transition: transform .15s, box-shadow .15s;
}
.swatch:hover .swatch-box {
transform: scale(1.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.swatch-hex {
font-size: 10px;
font-weight: 700;
color: var(--ui-ink);
letter-spacing: .3px;
}
.swatch-name {
font-size: 9px;
color: #888;
text-align: center;
}
.copied-toast {
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
background: var(--brand-deep);
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 3px 8px;
border-radius: 9999px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.swatch.copied .copied-toast {
opacity: 1;
}
/* ─── HEATMAP DEMO ─── */
.heatmap-demo {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.heat-cell {
padding: var(--sp-2) var(--sp-1);
border-radius: 8px;
text-align: center;
color: #fff;
font-size: var(--t3);
font-weight: 700;
}
.heat-cell small {
display: block;
font-weight: 400;
font-size: 10px;
margin-top: 4px;
opacity: .85;
}
/* ─── BACKGROUND STACK DEMO ─── */
.bg-stack {
display: flex;
gap: 0;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.bg-slab {
flex: 1;
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.bg-slab-name {
font-size: 10px;
font-weight: 800;
color: var(--brand-deep);
}
.bg-slab-hex {
font-size: 9px;
font-weight: 600;
color: rgba(3, 31, 86, 0.5);
font-family: monospace;
}
.bg-slab-use {
font-size: 9px;
color: rgba(3, 31, 86, 0.42);
margin-top: 3px;
line-height: 1.45;
}
.bg-slab-dark {
border-left: 3px solid rgba(255, 255, 255, 0.1);
}
.bg-slab-dark .bg-slab-name {
color: rgba(255, 255, 255, 0.9);
}
.bg-slab-dark .bg-slab-hex {
color: rgba(255, 255, 255, 0.45);
}
.bg-slab-dark .bg-slab-use {
color: rgba(255, 255, 255, 0.38);
}
/* ─── TYPOGRAPHY ─── */
.type-demo {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.type-row {
display: flex;
align-items: baseline;
gap: var(--sp-2);
border-bottom: 1px dashed var(--bg-sand);
padding-bottom: var(--sp-2);
}
.type-tag {
font-size: 10px;
font-weight: 700;
color: var(--brand-mid);
background: var(--bg-sand);
padding: 2px 8px;
border-radius: 9999px;
min-width: 38px;
text-align: center;
flex-shrink: 0;
}
.type-meta {
font-size: 10px;
color: #aaa;
min-width: 110px;
flex-shrink: 0;
}
.t-disp-demo {
font-family: var(--font-display);
font-size: var(--t1);
font-weight: 700;
color: var(--brand-deep);
line-height: 1;
}
.t1-ui-demo {
font-family: var(--font-ui);
font-size: var(--t1);
font-weight: 800;
color: var(--brand-deep);
line-height: 1;
}
.t2-demo {
font-family: var(--font-ui);
font-size: var(--t2);
font-weight: 700;
color: var(--brand-deep);
line-height: 1.2;
}
.t3-demo {
font-family: var(--font-ui);
font-size: var(--t3);
font-weight: 500;
color: var(--ui-ink);
}
.type-variants {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: var(--sp-2);
}
.type-variant {
background: var(--bg-sand);
padding: 6px 14px;
border-radius: 6px;
font-size: var(--t3);
}
/* font context demo cards */
.font-demo-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.font-demo-card {
border-radius: var(--radius-card);
padding: var(--sp-3);
}
.font-demo-card.light {
background: var(--bg-cool);
border: 1px solid var(--bg-sand);
}
.font-demo-card.dark {
background: var(--ui-dark);
}
.fdc-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: .45;
margin-bottom: 8px;
}
.font-demo-card.dark .fdc-label {
color: #fff;
}
.fdc-hook {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.4px;
}
.font-demo-card.light .fdc-hook {
color: var(--brand-deep);
}
.font-demo-card.dark .fdc-hook {
color: var(--bg-warm);
}
.fdc-sub {
font-family: var(--font-ui);
font-weight: 500;
font-size: var(--t3);
margin-top: 8px;
line-height: 1.55;
}
.font-demo-card.light .fdc-sub {
color: rgba(3, 31, 86, 0.55);
}
.font-demo-card.dark .fdc-sub {
color: rgba(244, 241, 232, 0.50);
}
.fdc-btn {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-weight: 700;
font-size: var(--t3);
padding: 7px 16px;
border-radius: var(--btn-capsule);
border: none;
cursor: default;
}
.font-demo-card.light .fdc-btn {
background: var(--brand-mid);
color: #fff;
}
.font-demo-card.dark .fdc-btn {
background: rgba(255, 255, 255, 0.1);
color: var(--bg-warm);
border: 1.5px solid rgba(255, 255, 255, 0.2);
}
/* ─── BUTTONS ─── */
.btn-grid {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
}
.btn {
font-family: var(--font-ui);
font-size: var(--t3);
font-weight: 700;
letter-spacing: .5px;
padding: 10px 24px;
border: none;
cursor: pointer;
transition: opacity .15s, transform .1s, box-shadow .15s;
outline: none;
}
.btn:active {
transform: scale(.97);
}
.btn-capsule {
border-radius: var(--btn-capsule);
}
.btn-rounded {
border-radius: var(--btn-rounded);
}
.btn-compact {
border-radius: var(--btn-compact);
padding: 8px 16px;
}
.btn-primary {
background: var(--brand-mid);
color: #fff;
box-shadow: 0 2px 8px rgba(6, 74, 207, 0.25);
}
.btn-deep {
background: var(--brand-deep);
color: #fff;
}
.btn-light {
background: var(--brand-light);
color: var(--brand-deep);
}
.btn-ghost {
background: transparent;
color: var(--brand-mid);
border: 2px solid var(--brand-mid);
}
.btn-neutral {
background: var(--bg-sand);
color: var(--ui-ink);
}
.btn-dark {
background: var(--ui-dark);
color: #fff;
}
.btn-green {
background: var(--util-green);
color: #fff;
}
.btn-purple {
background: var(--util-purple);
color: #fff;
}
.btn-danger {
background: var(--heat-high);
color: #fff;
}
.btn:hover {
opacity: .85;
box-shadow: 0 4px 14px rgba(6, 74, 207, .25);
}
.btn-ghost:hover {
background: var(--bg-sand);
opacity: 1;
}
.btn-dark:hover {
opacity: .85;
box-shadow: 0 4px 14px rgba(26, 26, 34, .3);
}
.btn-green:hover {
opacity: .85;
box-shadow: 0 4px 14px rgba(34, 197, 94, .3);
}
.btn-purple:hover {
opacity: .85;
box-shadow: 0 4px 14px rgba(108, 60, 220, .3);
}
.btn-group-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
width: 100%;
margin-top: var(--sp-1);
}
/* ─── CANVAS SPEC ─── */
.canvas-viz {
background: var(--bg-sand);
border-radius: 10px;
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.canvas-bar {
height: 18px;
background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-mid) 60%, var(--brand-light) 100%);
border-radius: 9999px;
display: flex;
align-items: center;
padding: 0 12px;
}
.canvas-bar span {
color: #fff;
font-size: 10px;
font-weight: 700;
}
.canvas-spec-row {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.canvas-spec {
background: var(--bg-cool);
border-radius: 8px;
padding: 10px 16px;
border-left: 4px solid var(--brand-mid);
font-size: var(--t3);
font-weight: 600;
flex: 1 1 160px;
}
.canvas-spec small {
display: block;
font-weight: 400;
color: #888;
margin-top: 2px;
}
/* shadow scale demo */
.shadow-demo {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
margin-top: var(--sp-2);
}
.shadow-card {
background: var(--bg-cool);
border-radius: var(--radius-card);
padding: var(--sp-3);
flex: 1 1 120px;
text-align: center;
}
.shadow-card .sd-name {
font-size: var(--t3);
font-weight: 700;
color: var(--brand-deep);
}
.shadow-card .sd-val {
font-size: 9px;
color: #aaa;
margin-top: 4px;
font-family: monospace;
word-break: break-all;
}
/* ─── DOCUMENT LAYOUT TEMPLATES ─── */
.doc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.doc-card {
background: var(--bg-cool);
border-radius: var(--radius-card);
padding: var(--sp-3);
box-shadow: var(--shadow);
border: 1px solid var(--bg-sand);
}
.doc-wireframe {
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: var(--shadow-md);
}
.doc-spec-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.doc-spec-item {
padding: 6px 8px;
background: var(--bg-sand);
border-radius: 6px;
font-size: 10px;
line-height: 1.55;
}
.doc-spec-item.warn {
background: var(--bg-peach);
border-left: 3px solid var(--heat-med);
}
.doc-rule-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
margin-top: var(--sp-1);
}
.doc-rule-card {
padding: 12px 14px;
background: var(--bg-cool);
border-radius: 10px;
box-shadow: var(--shadow);
font-size: 11px;
line-height: 1.6;
}
/* ─── TABS ─── */
.tabs {
display: flex;
gap: var(--sp-1);
margin-bottom: var(--sp-3);
background: var(--bg-sand);
padding: 4px;
border-radius: 10px;
width: fit-content;
flex-wrap: wrap;
}
.tab {
font-family: var(--font-ui);
font-size: var(--t3);
font-weight: 700;
padding: 7px 18px;
border-radius: 7px;
border: none;
cursor: pointer;
background: transparent;
color: #888;
transition: background .2s, color .2s;
}
.tab.active {
background: var(--brand-mid);
color: #fff;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.vl-tab-btn {
background: linear-gradient(135deg, var(--brand-deep), var(--brand-mid)) !important;
color: #fff !important;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.cards-row {
flex-direction: column;
}
}
/* ─── FOOTER ─── */
.ds-footer {
margin-top: var(--sp-6);
padding-top: var(--sp-2);
border-top: 1px solid var(--bg-sand);
font-size: var(--t3);
color: #bbb;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-1);
}
/* ═══ VISUAL LANGUAGE TAB ════════════════════════════════════════ */
.principle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-2);
}
.principle-card {
background: var(--bg-cool);
border-radius: var(--radius-card);
padding: var(--sp-3);
box-shadow: var(--shadow);
border-top: 4px solid var(--brand-mid);
}
.principle-card.dark {
border-top-color: var(--brand-deep);
}
.principle-card.light {
border-top-color: var(--brand-light);
}
.principle-card.warm {
border-top-color: var(--heat-med);
}
.principle-card.product {
border-top-color: var(--ui-dark);
}
.principle-card.green {
border-top-color: var(--util-green);
}
.principle-card.purple {
border-top-color: var(--util-purple);
}
.principle-num {
font-size: 28px;
font-weight: 900;
color: var(--brand-light);
line-height: 1;
margin-bottom: 6px;
}
.principle-title {
font-size: 13px;
font-weight: 800;
color: var(--brand-deep);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: .5px;
}
.principle-body {
font-size: 11px;
color: #555;
line-height: 1.6;
}
/* Archetypes */
.archetypes-row {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
}
.archetype-wrap {
flex: 1 1 240px;
}
.archetype-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--brand-mid);
margin-bottom: 8px;
}
.archetype-desc {
font-size: 10px;
color: #777;
margin-top: 8px;
line-height: 1.5;
}
.archetype-mock {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(3, 31, 86, 0.15);
aspect-ratio: 16/9;
position: relative;
display: flex;
flex-direction: column;
}
/* Cover mock */
.mock-cover {
background: var(--brand-mid);
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
}
.mock-cover-blob {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 45%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(113, 158, 248, 0.25) 50%, transparent 70%);
border-radius: 50%;
filter: blur(8px);
}
.mock-cover-eyebrow {
font-size: 8px;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 6px;
}
.mock-cover-h1 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 1.1;
max-width: 58%;
}
.mock-cover-sub {
font-size: 8px;
color: rgba(255, 255, 255, 0.72);
margin-top: 6px;
max-width: 55%;
line-height: 1.5;
}
.mock-cover-logo {
position: absolute;
bottom: 12px;
left: 16px;
font-size: 9px;
font-weight: 800;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1px;
}
/* Navy Impact mock */
.mock-impact {
background: var(--brand-deep);
padding: 20px 24px;
flex-direction: column;
justify-content: center;
}
.mock-impact-corner {
position: absolute;
bottom: 0;
right: 0;
width: 35%;
height: 45%;
background: radial-gradient(circle at bottom right, rgba(113, 158, 248, 0.35) 0%, transparent 70%);
border-radius: 50% 0 0 0;
}
.mock-impact-tag {
font-size: 7px;
font-weight: 800;
color: var(--brand-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.mock-impact-name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: #fff;
line-height: 1;
letter-spacing: -1px;
}
.mock-impact-sub {
font-size: 8px;
color: rgba(255, 255, 255, 0.6);
margin-top: 6px;
max-width: 60%;
line-height: 1.5;
}
.mock-impact-tagline {
margin-top: 14px;
font-size: 11px;
font-weight: 800;
color: #fff;
line-height: 1.3;
}
/* Card Grid mock */
.mock-grid {
background: #ECEBF5;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: flex-start;
}
.mock-grid-title {
font-size: 12px;
font-weight: 800;
color: var(--brand-deep);
}
.mock-grid-title span {
color: var(--brand-mid);
}
.mock-grid-cards {
display: flex;
gap: 6px;
flex: 1;
}
.mock-grid-card {
flex: 1;
background: rgba(255, 255, 255, 0.85);
border-radius: 8px;
padding: 7px 6px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
}
.mock-grid-card-blob {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: rgba(200, 200, 240, 0.5);
border-radius: 50%;
}
.mock-grid-card-icon {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
}
.mock-grid-card-name {
font-size: 6px;
font-weight: 800;
text-transform: uppercase;
color: var(--brand-deep);
line-height: 1.2;
margin-top: 36px;
}
.mock-grid-card-body {
font-size: 5px;
color: #777;
line-height: 1.4;
margin-top: 3px;
}
/* Product Dark mock — NEW */
.mock-product-dark {
background: var(--ui-dark);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
}
.mock-pd-eyebrow {
font-size: 7px;
font-weight: 600;
color: rgba(244, 241, 232, 0.38);
letter-spacing: 2px;
text-transform: uppercase;
}
.mock-pd-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--bg-warm);
line-height: 1.25;
letter-spacing: -0.3px;
}
.mock-pd-cards {
display: flex;
gap: 5px;
}
.mock-pd-card {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
padding: 7px 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.mock-pd-card-label {
font-size: 5.5px;
font-weight: 700;
color: rgba(244, 241, 232, 0.40);
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 3px;
}
.mock-pd-card-value {
font-size: 11px;
font-weight: 700;
color: var(--bg-warm);
letter-spacing: -0.3px;
}
.mock-pd-card-sub {
font-size: 5px;
color: rgba(244, 241, 232, 0.36);
margin-top: 2px;
}
.mock-pd-bar {
height: 26px;
border-radius: 6px;
background: var(--brand-mid);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.mock-pd-bar-label {
font-size: 7px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
}
.mock-pd-bar-price {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
color: #fff;
}
/* Surface System */
.surface-system {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--sp-2);
}
.surface-card {
border-radius: var(--radius-card);
padding: var(--sp-3);
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.surface-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.surface-hex {
font-size: 9px;
font-family: monospace;
font-weight: 600;
opacity: 0.55;
margin-bottom: 8px;
display: block;
}
.surface-use {
font-size: 10px;
line-height: 1.55;
opacity: 0.65;
}
.surface-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
opacity: 0.1;
}
.sc-warm {
background: var(--bg-warm);
color: var(--brand-deep);
border-color: rgba(3, 31, 86, 0.08);
}
.sc-cool {
background: var(--bg-cool);
color: var(--brand-deep);
border-color: rgba(3, 31, 86, 0.08);
}
.sc-sand {
background: var(--bg-sand);
color: var(--brand-deep);
border-color: rgba(3, 31, 86, 0.08);
}
.sc-ui-dark {
background: var(--ui-dark);
color: var(--bg-warm);
}
.sc-brand-deep {
background: var(--brand-deep);
color: var(--bg-warm);
}
.sc-ui-dark .surface-label,
.sc-brand-deep .surface-label {
color: rgba(250, 248, 242, 0.9);
}
/* AI note */
.ai-note {
background: var(--brand-deep);
color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: var(--sp-3);
font-size: 11px;
line-height: 1.7;
}
.ai-note h3 {
font-size: 13px;
font-weight: 800;
color: var(--brand-light);
margin-bottom: 10px;
letter-spacing: .3px;
}
.ai-note code {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
padding: 1px 6px;
font-family: monospace;
font-size: 10px;
color: #a8c8ff;
}
.ai-rule {
border-left: 3px solid var(--brand-light);
padding-left: 12px;
margin: 8px 0;
}
.ai-rule strong {
color: #fff;
}
/* Mood */
.mood-strip {
display: flex;
gap: 0;
border-radius: 10px;
overflow: hidden;
height: 56px;
margin-bottom: 6px;
}
.mood-strip div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: .5px;
}
.mood-word {
display: inline-block;
background: var(--bg-sand);
border-radius: 9999px;
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
color: var(--brand-deep);
margin: 3px;
}
/* Collision demo */
.collision-demo {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
margin-top: var(--sp-2);
}
.collision-case {
flex: 1 1 240px;
}
.collision-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.collision-label.bad {
color: #C45538;
}
.collision-label.good {
color: #4a8f49;
}
.collision-cards {
display: flex;
gap: 6px;
border-radius: 10px;
padding: 10px;
}
.cc {
flex: 1;
border-radius: 8px;
padding: 10px 8px;
font-size: 10px;
font-weight: 700;
text-align: center;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
}
.collision-rule-note {
font-size: 10px;
color: #666;
margin-top: 7px;
line-height: 1.5;
padding: 7px 10px;
border-radius: 6px;
background: var(--bg-sand);
}
/* Interpolation */
.interp-row {
display: flex;
gap: 4px;
margin-bottom: 6px;
border-radius: 8px;
overflow: hidden;
}
.interp-cell {
flex: 1;
height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
color: rgba(255, 255, 255, 0.92);
text-align: center;
line-height: 1.3;
}
.interp-cell.dark-text {
color: rgba(0, 0, 0, 0.55);
}
.interp-cell small {
font-weight: 400;
font-size: 7px;
opacity: 0.8;
display: block;
}
.interp-defined {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: -3px;
}
.interp-legend {
display: flex;
gap: 16px;
font-size: 10px;
color: #777;
margin-top: 4px;
flex-wrap: wrap;
}
.interp-legend span {
display: flex;
align-items: center;
gap: 5px;
}
.interp-legend-dot {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
* DISEENI BRAND INJECTION — Design System v5 emphasis layer
*
* What changed and why:
* ACTION moments: ui-dark → brand-mid (DS rule: primary CTA = brand-mid)
* IDENTITY hook: var(--dark) → brand-deep (DS rule: brand name = brand-deep)
* Top-bar: subtle rgba border → 2px brand-mid (DS: header identity line)
* Focus/hover: generic → brand-mid tints
* Bar login ghost: brand-mid hover
* Calc submit CTA: ghost-on-dark → brand-mid fill (DS: action bar on dark = brand-mid)
* Stage bg: approx navy → brand-deep (IDENTITY moment, exact DS value)
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Top-bar identity line ──────────────────────────────────────────────── */
/* DS: header strip → brand-mid 2px border-bottom signals authority */
#top-bar {
border-bottom: 1px solid var(--bg-sand) !important;
}
/* Column dividers inside top-bar → brand-light, very subtle */
#bar-left {
border-right-color: rgba(6, 74, 207, 0.12) !important;
}
#bar-center {
border-right-color: rgba(6, 74, 207, 0.12) !important;
}
/* ── Brand hook — "Diseeni" logo state ─────────────────────────────────── */
/* DS: IDENTITY moment — brand name displayed at T1 → brand-deep color */
#bar-hook {
color: var(--brand-deep) !important;
}
/* The brand logo .brand class keeps the display font but deepens the color */
#bar-hook.brand {
color: var(--brand-deep) !important;
letter-spacing: -0.03em;
}
/* ── PRIMARY CTA — "Reveal the…" next button ───────────────────────────── */
/* DS: ACTION moment → brand-mid fill + capsule shape + box-shadow */
/* Previously: var(--ui-dark) [Product Dark — wrong for a primary CTA] */
#bar-next {
background: var(--brand-mid) !important;
box-shadow: 0 2px 10px rgba(6, 74, 207, 0.28) !important;
}
#bar-next:hover {
box-shadow: 0 4px 18px rgba(6, 74, 207, 0.38) !important;
opacity: 0.93;
}
/* ── "Skip to estimate" underline hover ────────────────────────────────── */
#bar-skip-calc:hover {
color: var(--brand-mid) !important;
}
/* ── Back link hover ─────────────────────────────────────────────────────── */
#bar-back:hover {
color: var(--brand-mid) !important;
}
/* ── Login pill — ghost → brand-mid hover tint ─────────────────────────── */
/* DS: secondary / ghost action → brand-mid on hover for brand direction */
#bar-login:hover {
color: var(--brand-mid) !important;
border-color: rgba(6, 74, 207, 0.35) !important;
background: rgba(6, 74, 207, 0.04) !important;
}
/* ── Hero stage background → DS brand-deep (exact IDENTITY value) ──────── */
/* Previous: #1e3b73 — close but not a DS token. Now exact brand-deep. */
#full-stage {
background: var(--brand-deep) !important;
}
/* ── Auth modal — form field focus → brand-mid ─────────────────────────── */
/* DS: input focus = brand signal to indicate active state */
.auth-field:focus {
border-color: var(--brand-mid) !important;
box-shadow: 0 0 0 3px rgba(6, 74, 207, 0.08) !important;
}
/* ── Auth modal — SUBMIT button → brand-mid + btn-rounded ──────────────── */
/* DS: form submit → btn-primary + btn-rounded */
/* Previously: var(--ui-dark) [Product Dark — reserved for data panels] */
.auth-submit {
background: var(--brand-mid) !important;
color: #fff !important;
border-radius: var(--btn-rounded) !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(6, 74, 207, 0.22) !important;
}
.auth-submit:hover {
opacity: 0.88 !important;
box-shadow: 0 4px 14px rgba(6, 74, 207, 0.32) !important;
}
/* ── Auth modal — "Sign in / Sign up" tab links ─────────────────────────── */
.auth-switch a {
color: var(--brand-mid) !important;
}
.auth-switch a:hover {
color: var(--brand-deep) !important;
opacity: 1 !important;
}
/* ── Auth modal — "Not ready? Get estimate" link ────────────────────────── */
.auth-calc-link a {
color: var(--brand-mid) !important;
}
/* ── Calculator — inline SEARCH button → brand-mid + btn-compact ─────────── */
/* DS: inline row search = btn-primary. btn-compact (9px) radius. */
/* Previously: var(--ui-dark) [Product Dark — wrong for inline CTA] */
.calc-btn-search {
background: var(--brand-mid) !important;
border-color: var(--brand-mid) !important;
color: #fff !important;
border-radius: var(--btn-compact) !important;
font-weight: 700 !important;
box-shadow: 0 1px 6px rgba(6, 74, 207, 0.2) !important;
}
.calc-btn-search:hover {
opacity: 0.88 !important;
box-shadow: 0 2px 10px rgba(6, 74, 207, 0.3) !important;
}
/* ── Calculator — APPLY inline button stays neutral (DS: apply = neutral) ── */
.calc-btn-apply {
background: var(--bg-sand) !important;
color: var(--brand-deep) !important;
border-color: var(--bg-sand) !important;
border-radius: var(--btn-compact) !important;
}
.calc-btn-apply:hover {
border-color: rgba(6, 74, 207, 0.25) !important;
color: var(--brand-mid) !important;
}
/* ── Calculator — text input focus → brand-mid ─────────────────────────── */
.calc-input:focus {
border-color: var(--brand-mid) !important;
box-shadow: 0 0 0 3px rgba(6, 74, 207, 0.07) !important;
}
/* ── Calculator — total bar SUBMIT CTA → brand-mid fill ────────────────── */
/* DS: "Action bar: Brand blue (#064ACF) fill, white text. */
/* The one color-pop on a dark surface." */
/* Previously: transparent ghost on dark — undersells the action */
.calc-btn-submit {
background: var(--brand-mid) !important;
border-color: var(--brand-mid) !important;
color: #fff !important;
border-radius: var(--btn-compact) !important;
font-weight: 700 !important;
box-shadow: 0 2px 10px rgba(6, 74, 207, 0.35) !important;
}
.calc-btn-submit:hover:not(:disabled) {
opacity: 0.88 !important;
box-shadow: 0 4px 16px rgba(6, 74, 207, 0.45) !important;
}
.calc-btn-submit:disabled {
background: rgba(6, 74, 207, 0.35) !important;
border-color: transparent !important;
box-shadow: none !important;
opacity: 0.5 !important;
}
/* The hint text beneath submit CTA on dark panel */
.calc-btn-submit-hint {
color: rgba(244, 241, 232, 0.52) !important;
}
/* ── Calculator — breakdown card selected state: card-on border ─────────── */
/* DS: Confirm Green (util-green) for selected/on states */
.calc-bd-card.card-on {
border-color: var(--util-green) !important;
}
.calc-bd-card.card-sel:hover {
box-shadow: 0 0 0 3px rgba(6, 74, 207, 0.07) !important;
}
/* ── Pricing tier — FEATURE badge → brand-light tint ───────────────────── */
/* DS: Premium/AI feature badge → util-purple per token */
.feat-badge {
background: rgba(108, 60, 220, 0.10) !important;
color: var(--util-purple) !important;
}
/* ── Pricing tier — primary tier CTA on dark card → brand-light cream ───── */
/* DS: btn on Product Dark bg: bg-warm cream fill, brand-deep text */
.tier-btn-primary {
background: var(--bg-warm) !important;
color: var(--brand-deep) !important;
border-color: var(--bg-warm) !important;
font-weight: 700 !important;
}
/* ── Pricing — modal header title ───────────────────────────────────────── */
.p-title {
font-size: var(--fs-t2) !important;
letter-spacing: -0.02em !important;
}
/* ── Section report link — "Show report example" ────────────────────────── */
/* DS: this is a hero link on dark bg — keep white, it's on brand-deep stage */
/* Stage bottom pill: keep ui-dark (secondary, floats over hero) — correct */
/* ── Terms & Privacy link → brand-mid on hover ──────────────────────────── */
#bar-tos:hover {
color: var(--brand-mid) !important;
}
/* ── Help (WhatsApp) — already uses util-green, reinforce ───────────────── */
#bar-help {
color: var(--util-green) !important;
font-weight: 600 !important;
}
/* ── Mobile back overlay → brand-deep text ──────────────────────────────── */
#mob-back-btn {
color: var(--brand-deep) !important;
}
/* ── Scroll-to-total hint pill → brand-mid ──────────────────────────────── */
.calc-scroll-hint {
background: var(--brand-deep) !important;
color: var(--bg-warm) !important;
}
.calc-scroll-hint:hover {
background: var(--brand-mid) !important;
}
/* ── Status line: .ok/.found → util-green; .warn → heat-high ────────────── */
.calc-status.ok,
.calc-status.found {
color: var(--util-green) !important;
}
.calc-status.warn {
color: var(--heat-high) !important;
}
/* ── Add-on checklist: checked item → subtle brand-mid tint ─────────────── */
.calc-var-check-item:hover {
background: rgba(6, 74, 207, 0.04) !important;
}
/* Checked stays purple (util-purple) — correct for Premium/AI tier feature */
/* ── Modal backdrop close button → brand-mid on hover ───────────────────── */
#auth-close:hover,
#pricing-close:hover {
background: rgba(6, 74, 207, 0.10) !important;
color: var(--brand-mid) !important;
}
/* ── Demo notice badge: ui-dark is correct (label, not CTA) ─────────────── */
/* No change needed. ui-dark = Product Dark identity. */
/* ── Duration card selected: ui-dark is correct (selection state card) ───── */
/* No change needed. ui-dark = correct for selected data card background. */
/* ═══════════════════════════════════════════════════════════════════════════
* DISEENI DESIGN SYSTEM v1 · Web Override · full_flow_v6
* Layered over existing DS v5 block above. Rules here take final precedence.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. NEW TOKEN ─────────────────────────────────────────────────────────── */
:root {
--bg-sand-dark: #9B9590;
/* Lines, separators, muted text */
}
/* ── 2. DEEP NAVY = STANDARD PRIMARY ─────────────────────────────────────── */
/* DS v1: all primary CTAs → brand-deep (#031F56), not brand-mid (#064ACF). */
#bar-next {
background: var(--brand-deep) !important;
border-color: var(--brand-deep) !important;
box-shadow: 0 2px 10px rgba(3, 31, 86, 0.28) !important;
color: var(--bg-warm) !important;
}
#bar-next:hover {
box-shadow: 0 4px 18px rgba(3, 31, 86, 0.40) !important;
opacity: 0.92;
}
.auth-submit {
background: var(--brand-deep) !important;
border-color: var(--brand-deep) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(3, 31, 86, 0.25) !important;
}
.auth-submit:hover {
opacity: 0.88 !important;
box-shadow: 0 4px 14px rgba(3, 31, 86, 0.35) !important;
}
.calc-btn-search {
background: var(--brand-deep) !important;
border-color: var(--brand-deep) !important;
color: #fff !important;
box-shadow: 0 1px 6px rgba(3, 31, 86, 0.22) !important;
}
.calc-btn-search:hover {
opacity: 0.88 !important;
box-shadow: 0 2px 10px rgba(3, 31, 86, 0.32) !important;
}
.calc-btn-submit {
background: var(--brand-deep) !important;
border-color: var(--brand-deep) !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(3, 31, 86, 0.38) !important;
}
.calc-btn-submit:hover:not(:disabled) {
opacity: 0.88 !important;
box-shadow: 0 4px 16px rgba(3, 31, 86, 0.50) !important;
}
.calc-btn-submit:disabled {
background: rgba(3, 31, 86, 0.30) !important;
border-color: transparent !important;
box-shadow: none !important;
opacity: 0.5 !important;
}
/* ── 3. UNIVERSAL PILL SHAPE ──────────────────────────────────────────────── */
/* DS v1: 9999px for all action buttons. Exceptions: icon/close = 8px. */
#bar-next,
#bar-login,
#bar-skip-calc,
#bar-tos,
#mob-back-btn,
#bar-help,
.auth-submit,
.auth-google,
.auth-whatsapp,
.tier-btn,
.tier-btn-primary,
.calc-btn-search,
.calc-btn-apply,
.calc-btn-submit,
#bar-report-example,
#stage-report-btn-bottom,
.calc-scroll-hint,
#demo-notice {
border-radius: 9999px !important;
}
/* Icon-only close buttons — rounded square, NOT pill */
#auth-close,
#pricing-close,
#calc-close {
border-radius: 8px !important;
}
/* Dropdown trigger — form input control, keep 12px */
.calc-subarea-trigger {
border-radius: 12px !important;
}
/* ── 4. GHOST BUTTON: BRAND-DEEP PALETTE ─────────────────────────────────── */
/* Secondary/ghost top-bar buttons use deep navy, not brand-mid. */
#bar-login {
border-color: rgba(3, 31, 86, 0.28) !important;
color: var(--brand-deep) !important;
}
#bar-login:hover {
color: var(--brand-deep) !important;
border-color: rgba(3, 31, 86, 0.45) !important;
background: rgba(3, 31, 86, 0.05) !important;
}
/* ── 5. TOP-BAR IDENTITY BORDER ──────────────────────────────────────────── */
/* brand-mid 2px accent at base of header signals product authority. */
#top-bar {
border-bottom: 1px solid var(--bg-sand) !important;
}
/* Column dividers → sand-dark, structural not branded */
#bar-left {
border-right-color: var(--bg-sand) !important;
}
#bar-center {
border-right-color: var(--bg-sand) !important;
}
/* ── 6. MUTED TEXT → SAND-DARK ───────────────────────────────────────────── */
/* All subtle/info text → sand-dark (#9B9590) instead of raw rgba grays. */
.auth-sub,
.auth-switch,
.auth-calc-link {
color: var(--bg-sand-dark) !important;
}
.clients-label {
color: var(--bg-sand-dark) !important;
}
.calc-feat-sub,
.calc-bd-lock-hint,
.calc-bd-price-unit,
.calc-dur-sublabel {
color: var(--bg-sand-dark) !important;
}
/* ── 7. TIER BUTTONS ON DARK CARD ────────────────────────────────────────── */
/* .tier-btn-primary sits on brand-deep card → inverted bg-warm button. */
/* .tier-btn (secondary) → ghost-on-dark style. */
.tier-btn-primary {
background: var(--bg-warm) !important;
color: var(--brand-deep) !important;
border-color: var(--bg-warm) !important;
}
.tier-btn:not(.tier-btn-primary) {
background: transparent !important;
border: 1.5px solid rgba(244, 241, 232, 0.30) !important;
color: var(--bg-warm) !important;
}
.tier-btn:not(.tier-btn-primary):hover {
border-color: rgba(244, 241, 232, 0.55) !important;
background: rgba(244, 241, 232, 0.06) !important;
}
/* ── 8. APPLY BUTTON → NEUTRAL GHOST ON DARK PANEL ──────────────────────── */
/* calc-btn-apply lives inside the dark calc panel — ghost treatment. */
.calc-btn-apply {
background: rgba(244, 241, 232, 0.08) !important;
border: 1.5px solid rgba(244, 241, 232, 0.18) !important;
color: rgba(244, 241, 232, 0.75) !important;
}
.calc-btn-apply:hover {
background: rgba(244, 241, 232, 0.14) !important;
border-color: rgba(244, 241, 232, 0.30) !important;
color: var(--bg-warm) !important;
}
/* ── 9. BOUNDARY LINES — top-bar column dividers only (see section 5) ─────── */
/* All other element borders left to original DS values. */