/* ============================================================ Actia AI — Wizard styles.css Native, zero-dependency. Hand-authored utility-first CSS. Single source of truth = the :root tokens below. The wizard is its OWN product surface: a bridge between the marketing website (flamboyant) and the Actia Console (utilitarian, AWS/Workspace-like). Calmer than the site, warmer than the console, and friendly/easy by design. Shared with the site (ported into this sheet, not linked): - the header (transparent nav) and footer Parlayed from the site: - the chevron step rail (filled purple badges, one lime pop) STATUS KEY: [REAL] from Actia AI Brand Guide v1.0. [BRIDGE] chosen to bridge site <-> console; confirm with Stephanie. [PLACEHOLDER] estimate awaiting Stephanie's spec. ============================================================ */ /* ------------------------------------------------------------ FONTS — self-hosted, drop .woff2 in ./fonts/ and uncomment. Display/headings: Alan Sans. Body/UI: Plus Jakarta Sans. System fallback until the files land. ------------------------------------------------------------ */ /* @font-face { font-family:"Alan Sans"; src:url("./fonts/alan-sans-regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Alan Sans"; src:url("./fonts/alan-sans-bold.woff2") format("woff2"); font-weight:700; font-display:swap; } @font-face { font-family:"Plus Jakarta Sans"; src:url("./fonts/plus-jakarta-sans-regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Plus Jakarta Sans"; src:url("./fonts/plus-jakarta-sans-semibold.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face { font-family:"Plus Jakarta Sans"; src:url("./fonts/plus-jakarta-sans-bold.woff2") format("woff2"); font-weight:700; font-display:swap; } */ :root { /* ----- TIER 1 — BRAND PALETTE [REAL — Brand Guide v1.0] ----- */ --c-frequency: #46186B; /* deep purple, brand anchor */ --c-signal: #8B5CF6; /* bright purple, emphasis / primary action */ --c-pulse: #E1F770; /* yellow-green, used sparingly */ --c-node: #5A546E; /* muted purple-gray */ --c-stack: #130F17; /* near-black */ --c-kernel: #F4F6F6; /* near-white */ /* ----- TIER 2 — SEMANTIC ROLES (what the markup references) ----- Bridge surface: flat near-black canvas (between the site's pure black and the console's charcoal), a lifted card, and inset fields — the console's bordered-box idiom, not the site underline. */ --bg: #0A0710; /* [BRIDGE] page canvas */ --surface: #151019; /* [BRIDGE] wizard card */ --surface-2: #1C1626; /* [BRIDGE] inputs / insets */ --text: var(--c-kernel); /* [REAL] primary text */ --text-muted: #9B96A8; /* [BRIDGE] secondary text */ --text-on-accent: var(--c-stack); /* [BRIDGE] dark text on purple */ --accent: var(--c-signal); /* [REAL] primary action (purple) */ --accent-hover: #7C4DF0; /* [BRIDGE] */ --accent-press: #6D3EE0; /* [BRIDGE] */ --accent-soft: rgba(139, 92, 246, 0.14); /* [BRIDGE] tint / ring */ --pulse: var(--c-pulse); /* [REAL] sparing pop (active step) */ --brand: var(--c-frequency); /* [REAL] deep brand purple */ --border: rgba(244, 246, 246, 0.12); /* [BRIDGE] hairline (console-like) */ --border-strong: rgba(244, 246, 246, 0.20); /* [BRIDGE] field / ghost-btn edge */ --line-soft: rgba(244, 246, 246, 0.12); /* alias kept for existing utilities */ --error: #FB7185; /* [PLACEHOLDER] validation error */ --focus-ring: var(--c-signal); /* [BRIDGE] visible keyboard focus */ /* header/footer port needs these site names — unified on Signal purple */ --purple: var(--c-signal); --lime: var(--c-pulse); --font: var(--font-body); /* site alias */ --margin: 5%; /* header/footer inline gutter */ --max-w: 1264px; /* ----- TYPE [PLACEHOLDER — awaiting Stephanie's scale] ----- */ --font-display: "Alan Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; --lh-xs: 1.4; --fs-sm: 0.875rem; --lh-sm: 1.45; --fs-base: 1rem; --lh-base: 1.6; --fs-lg: 1.125rem; --lh-lg: 1.6; --fs-xl: 1.25rem; --lh-xl: 1.5; --fs-2xl: 1.5rem; --lh-2xl: 1.35; --fs-3xl: 1.875rem; --lh-3xl: 1.25; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-wide: 0.05em; --tracking-widest: 0.14em; /* ----- SPACING [PLACEHOLDER] — 4px base ----- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* ----- RADII [BRIDGE] — medium throughout (console-ish), no site 50px ----- */ --radius-sm: 0.375rem; /* 6 */ --radius-md: 0.625rem; /* 10 — inputs, buttons */ --radius-lg: 0.75rem; /* 12 */ --radius-xl: 1rem; /* 16 — the wizard card */ --radius-full: 9999px; --bw-thin: 1px; --bw-2: 2px; /* ----- EFFECTS ----- */ --panel-border: rgba(139, 92, 246, 0.60); /* [BRIDGE] 1px purple panel edge */ --shadow-card: 0 22px 52px -16px rgba(139, 92, 246, 0.42), 0 10px 30px -18px rgba(0, 0, 0, 0.7); /* pronounced, purple-tinted */ --ring-active: 0 0 0 5px rgba(225, 247, 112, 0.16); /* active step glow (pulse) */ /* ----- LAYOUT ----- */ --wizard-panel-w: 300px; /* [BRIDGE] left rail column (desktop) */ --wiz-node-size: 2.5rem; /* chevron badge diameter */ --page-x: 6%; /* wizard content inline margin */ --t-fast: 120ms ease; --t-base: 200ms ease; } @media (min-width: 768px) { :root { --page-x: 8%; --margin: 6%; } } @media (min-width: 1024px) { :root { --page-x: 10%; --margin: 7.5%; } } /* ============================================================ BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } input, textarea, select { font: inherit; color: inherit; background: none; } ul, ol { list-style: none; padding: 0; } /* the [hidden] attribute must win over any display-setting utility/component class (e.g. .btn sets display:inline-flex), else JS-hidden buttons/panels show */ [hidden] { display: none !important; } :focus-visible { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } /* ============================================================ PAGE FRAME — header / wizard / footer stack The wizard content is capped and centered like the site; the footer spans full width. A soft purple glow (echo of the sign-in screen) keeps the canvas warmer than the console. ============================================================ */ .wiz-page { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .wiz-page::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -12%; right: -8%; width: 46rem; height: 46rem; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent 70%); filter: blur(8px); } .wiz-main { position: relative; z-index: 1; flex: 1 1 auto; } /* ============================================================ UTILITIES (lean; grows with the markup) ============================================================ */ .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-rows-wizard { grid-template-rows: auto 1fr; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } .shrink-0 { flex-shrink: 0; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .p-6 { padding: var(--sp-6); } .p-8 { padding: var(--sp-8); } .px-page { padding-inline: var(--page-x); } .py-6 { padding-block: var(--sp-6); } .py-10 { padding-block: var(--sp-10); } .py-12 { padding-block: var(--sp-12); } .mx-auto { margin-inline: auto; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); } .mt-12 { margin-top: var(--sp-12); } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-8 { margin-bottom: var(--sp-8); } .mb-10 { margin-bottom: var(--sp-10); } .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .text-base { font-size: var(--fs-base); line-height: var(--lh-base); } .text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); } .text-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); } .text-2xl { font-size: var(--fs-2xl); line-height: var(--lh-2xl); } .text-3xl { font-size: var(--fs-3xl); line-height: var(--lh-3xl); } .font-normal { font-weight: var(--fw-normal); } .font-medium { font-weight: var(--fw-medium); } .font-semibold { font-weight: var(--fw-semibold); } .font-bold { font-weight: var(--fw-bold); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .tracking-tight { letter-spacing: var(--tracking-tight); } .tracking-widest { letter-spacing: var(--tracking-widest); } .uppercase { text-transform: uppercase; } .text-left { text-align: left; } .text-center { text-align: center; } .text-primary { color: var(--text); } .text-muted { color: var(--text-muted); } .text-error { color: var(--error); } .text-accent { color: var(--accent); } .text-pulse { color: var(--pulse); } .bg-surface { background-color: var(--surface); } .bg-transparent { background-color: transparent; } .border { border: var(--bw-thin) solid var(--border); } .border-soft { border-color: var(--border); } .border-strong { border-color: var(--border-strong); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } .shadow-card { box-shadow: var(--shadow-card); } .relative { position: relative; } .absolute { position: absolute; } .overflow-hidden { overflow: hidden; } .cursor-pointer { cursor: pointer; } .transition { transition: color var(--t-base), background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } /* ============================================================ RESPONSIVE VARIANTS (mobile-first; lg = >=1024 primary target) ============================================================ */ @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:grid { display: grid; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .lg\:grid-cols-panel { grid-template-columns: var(--wizard-panel-w) 1fr; } .lg\:grid-rows-fill { grid-template-rows: 1fr; } .lg\:gap-8 { gap: var(--sp-8); } .lg\:gap-12 { gap: var(--sp-12); } .lg\:py-12 { padding-block: var(--sp-12); } .lg\:p-10 { padding: var(--sp-10); } .lg\:sticky { position: sticky; } .lg\:top-12 { top: var(--sp-12); } .lg\:self-start { align-self: start; } } /* ============================================================ COMPONENT — BUTTONS Reusable across every wizard. Primary = purple fill (matches the sign-in screen the user hits next). Ghost = bordered, for Back / secondary. Link = inline text action (Resend, change email). ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-base); letter-spacing: 0.01em; border-radius: var(--radius-md); padding: 0.75rem 1.35rem; min-height: 44px; /* touch target */ cursor: pointer; transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--text-on-accent); border: var(--bw-thin) solid transparent; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-primary:active:not(:disabled) { background: var(--accent-press); } .btn-ghost { background: transparent; color: var(--text); border: var(--bw-thin) solid var(--border-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .btn-link { background: none; border: 0; padding: 0; min-height: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--accent); } .btn-link:hover { color: var(--accent-hover); } .btn-link.btn-muted { color: var(--text-muted); } .btn-link.btn-muted:hover { color: var(--text); } /* ============================================================ COMPONENT — WIZARD SHELL (card + rail + nav) The repeatable skeleton every wizard inherits. ============================================================ */ .wiz-card { position: relative; /* offset parent for the pinned Turnstile */ background: var(--surface); border: var(--bw-thin) solid var(--panel-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .wiz-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-2xl); } .wiz-lede { color: var(--text-muted); font-size: var(--fs-sm); } /* nav footer pinned to the card floor */ .wiz-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-12); } /* ============================================================ COMPONENT — WIZARD PROGRESS RAIL Parlayed from the landing page's "How it works" timeline: circular chevron badges on a connector line. States via [data-state]: upcoming = dim outline badge completed = filled Signal purple, white chevron, purple connector active = filled Pulse (the one lime pop), dark chevron, glow ORIENTATION: base = horizontal (portrait); >=1024 = vertical rail. ============================================================ */ .wiz-steps { display: flex; flex-direction: row; align-items: flex-start; } .wiz-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); } /* connector (horizontal) */ .wiz-step:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: calc(var(--wiz-node-size) / 2 - 1px); left: 50%; width: 100%; height: 2px; background: var(--border); } .wiz-step[data-state="completed"]:not(:last-child)::before { background: var(--accent); } .wiz-node { position: relative; z-index: 1; flex-shrink: 0; width: var(--wiz-node-size); height: var(--wiz-node-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: transparent; border: var(--bw-thin) solid var(--border-strong); color: var(--text-muted); transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base); } .wiz-node svg { width: 56%; height: 56%; } .wiz-step[data-state="completed"] .wiz-node { background: var(--accent); border-color: var(--accent); color: var(--c-kernel); } .wiz-step[data-state="active"] .wiz-node { background: var(--pulse); border-color: var(--pulse); color: var(--c-stack); box-shadow: var(--ring-active); } .wiz-step[data-state="upcoming"] { opacity: 0.55; } .wiz-step-title { font-family: var(--font-display); font-weight: var(--fw-semibold); } .wiz-step[data-state="active"] .wiz-step-title { color: var(--text); } /* flip to VERTICAL rail at desktop */ @media (min-width: 1024px) { .wiz-steps { flex-direction: column; } .wiz-step { flex: 0 0 auto; flex-direction: row; align-items: flex-start; text-align: left; gap: var(--sp-4); } .wiz-step:not(:last-child) { padding-bottom: var(--sp-8); } .wiz-step:not(:last-child)::before { top: var(--wiz-node-size); left: calc(var(--wiz-node-size) / 2 - 1px); bottom: 0; width: 2px; height: auto; } } /* ============================================================ COMPONENT — FORM FIELDS (bordered box — console / sign-in idiom) Default / focus / filled / error. :user-invalid flags errors only after interaction, not on initial empty-required. ============================================================ */ .field { display: flex; flex-direction: column; gap: var(--sp-2); } .field-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); } .field-hint { font-size: var(--fs-xs); color: var(--text-muted); } .input { width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: var(--bw-thin) solid var(--border-strong); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base); } .input::placeholder { color: var(--text-muted); opacity: 0.8; } .input:hover { border-color: var(--border-strong); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input:user-invalid { border-color: var(--error); } .input:disabled, .input[readonly] { opacity: 0.7; } /* Kill the browser autofill white/blue wash — keep our dark inset field. The big inset box-shadow paints over the UA autofill background. */ .input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus, .input:autofill, .input:autofill:hover, .input:autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset; box-shadow: 0 0 0 100px var(--surface-2) inset; caret-color: var(--text); border: var(--bw-thin) solid var(--border-strong); /* match a normal filled field exactly */ transition: background-color 9999s ease 0s; /* defeat the autofill fade-in */ } /* Titled frame around the optional card fields on the Billing Info step. */ .card-box { border: var(--bw-thin) solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6) var(--sp-6); } .card-box > legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); } /* Turnstile — normal widget scaled to 0.9 (short + wide, ~270x58). Mobile: in flow. Desktop: pinned to the card's bottom-left corner, clear of the Send button and the Back/Next row. Hidden automatically off step 1 because it lives inside the collect block. */ [data-turnstile] { margin-bottom: var(--sp-5); transform: scale(0.9); transform-origin: left top; } @media (min-width: 1024px) { [data-turnstile] { position: absolute; left: var(--sp-10); bottom: var(--sp-10); margin: 0; transform: scale(0.9); transform-origin: left bottom; z-index: 1; } } /* rail heading above the step list — sized/weighted like the site page headers (font-display, medium). */ .wiz-rail-heading { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-2xl); line-height: var(--lh-2xl); color: var(--text); margin-bottom: var(--sp-6); } /* ============================================================ COMPONENT — TIER CARDS (radio-selectable) Native radio hidden; label is the card. Selected via :has. ============================================================ */ .tier-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 1024px) { .tier-grid { grid-template-columns: 1fr 1fr; } } .tier-card { position: relative; display: block; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border: var(--bw-thin) solid var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base); } .tier-card input { position: absolute; opacity: 0; pointer-events: none; } .tier-card:hover { border-color: var(--accent); } .tier-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tier-card:has(input:focus-visible) { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 2px; } .tier-name { display: block; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); } .tier-price { display: block; margin-top: var(--sp-1); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--text); letter-spacing: var(--tracking-tight); } .tier-per { font-family: var(--font-body); font-weight: var(--fw-normal); font-size: var(--fs-sm); color: var(--text-muted); } .tier-desc { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } /* ============================================================ COMPONENT — VISIT-2 (provision) pieces Stripe mount slot, provisioning status + spinner, and the terminal fork actions. Shared here so both wizards draw from one sheet. ============================================================ */ .stripe-slot { border: var(--bw-thin) dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); padding: var(--sp-8) var(--sp-6); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; text-align: center; } .prov-status { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-base); } .wiz-spinner { width: 1.15rem; height: 1.15rem; flex-shrink: 0; border: var(--bw-2) solid var(--border-strong); border-top-color: var(--accent); border-radius: var(--radius-full); animation: wiz-spin 0.8s linear infinite; } @keyframes wiz-spin { to { transform: rotate(360deg); } } .prov-status.done { color: var(--text); } .prov-status.done .wiz-spinner { border-color: var(--pulse); border-top-color: var(--pulse); animation: none; } .prov-status.error { color: var(--error); } .prov-status.error .wiz-spinner { border-color: var(--error); border-top-color: var(--error); animation: none; } @media (prefers-reduced-motion: reduce) { .wiz-spinner { animation: none; } } .fork-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); } /* ============================================================ PORTED — SITE HEADER (transparent nav) + FOOTER Copied from the marketing site so the wizard carries the same chrome. Kept self-contained in this sheet (site styles.css is not linked). Unified on Signal purple via --purple. ============================================================ */ /* Reserve the nav's height on the empty placeholder so injecting the header at load doesn't shift the page down (mirrors #site-header in the site sheet). Matches .nav-inner height below. */ #site-header { min-height: 90px; } .nav { position: sticky; top: 0; z-index: 100; background: transparent; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 90px; padding-inline: var(--margin); } .nav-logo { display: block; } .nav-logo img { height: 36px; display: block; } .nav-menu { position: relative; top: 2px; } .nav-menu > summary { display: block; list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu-list { display: flex; gap: 32px; list-style: none; } .nav-menu-item { position: relative; } .nav-menu-top { font: 700 13px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color 0.15s; } .nav-menu-item:hover .nav-menu-top, .nav-menu-item:focus-within .nav-menu-top { color: var(--text); } .nav-menu-drop { position: absolute; top: 100%; left: 0; min-width: 180px; display: flex; flex-direction: column; padding: 8px 0; background: rgba(10, 7, 16, 0.94); border: 1px solid var(--purple); border-radius: 12px; opacity: 0; visibility: hidden; transition: opacity 0.15s; } .nav-menu-item:hover .nav-menu-drop, .nav-menu-item:focus-within .nav-menu-drop { opacity: 1; visibility: visible; } .nav-menu-drop a { padding: 8px 16px; color: var(--text-muted); } .nav-menu-drop a:hover { color: var(--text); background: rgba(255,255,255,0.05); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #F5F5F5; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; border: 2px solid var(--purple); border-radius: 40px; padding: 8px 20px; min-width: 120px; cursor: pointer; transition: background 0.2s, color 0.2s; } .btn-outline:hover { background: var(--purple); color: var(--c-stack); } @media (min-width: 769px) { .nav-menu > summary { display: none; } .nav-menu-list { display: flex; } .nav-menu::details-content { content-visibility: visible; } } @media (max-width: 768px) { .nav-menu { position: static; } .nav-menu > summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 10px; cursor: pointer; } .nav-burger span { height: 2px; width: 100%; background: var(--text); border-radius: 2px; } .nav-menu[open] .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-menu[open] .nav-burger span:nth-child(2) { opacity: 0; } .nav-menu[open] .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-menu-list { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 5%; background: rgba(10,7,16,0.97); border-bottom: 1px solid var(--purple); } .nav-menu-top { width: 100%; text-align: left; min-height: 44px; } .nav-menu-drop { position: static; opacity: 1; visibility: visible; background: none; border: 0; border-radius: 0; padding: 0 0 8px 12px; } } .footer { background: #270842; width: 100%; padding-block: 60px; } .footer-inner { padding-inline: var(--margin); } .footer-content { display: flex; justify-content: space-between; align-items: flex-start; } .footer-left { display: flex; flex-direction: column; } .footer-logo { height: 48px; width: auto; display: block; margin-bottom: 24px; } .footer-contact { font-size: 14px; line-height: 26px; color: #F8F7F2; margin-bottom: 20px; } .footer-copy { font-size: 14px; line-height: 20px; color: #F8F7F2; margin-bottom: 26px; } .footer-social { display: flex; align-items: center; gap: 16px; } .footer-social-link { display: flex; align-items: center; justify-content: center; opacity: 0.9; transition: opacity 0.2s; } .footer-social-link:hover { opacity: 1; } .footer-nav { display: flex; gap: 64px; } .footer-nav-col { list-style: none; display: flex; flex-direction: column; } .footer-nav-col li a { display: block; font-size: 15px; line-height: 32px; color: #F8F7F2; transition: opacity 0.2s; } .footer-nav-col li a:hover { opacity: 0.7; text-decoration: underline; } @media (max-width: 768px) { .footer-content { flex-direction: column; align-items: center; text-align: center; } .footer-left { display: contents; } .footer-logo { order: 1; height: 60px; margin-bottom: 32px; } .footer-contact { order: 2; font-size: 16px; margin-bottom: 32px; } .footer-nav { order: 3; flex-direction: column; gap: 0; align-items: center; margin-bottom: 32px; } .footer-nav-col { align-items: center; } .footer-social { order: 4; justify-content: center; margin-bottom: 28px; } .footer-copy { order: 5; text-align: center; margin-bottom: 0; } } /* ============================================================ COMPONENT — CREATE-AGENT WIZARD (agent.html) Reuses the tokens above. Adds: a segmented control (gender), a styled native