/* ================================================================
VoxClient — style.css
Highly Aesthetic — Deep Purple Theme
================================================================
HOW CSS WORKS (for beginners):
- CSS (Cascading Style Sheets) controls how HTML elements LOOK.
- A "rule" is made of a SELECTOR (which element to target) and
DECLARATIONS (what to change), e.g.:
h1 { color: red; font-size: 40px; }
- Comments like this one are ignored by the browser. They are
only for humans reading the code.
================================================================ */
/* ── Google Fonts ──────────────────────────────────────────────── */
/* Fonts are loaded in HTML via tags for better performance. */
/* ── Design Tokens (CSS Custom Properties / Variables) ─────────── */
/* :root targets the very top of the HTML document (the element).
Declaring variables here makes them available EVERYWHERE in this file.
A variable is declared with two dashes: --my-variable: value;
It's used later with: var(--my-variable)
This is like a global settings panel — change one value here and
it updates everywhere that variable is used. */
.signup-credit-strip {
position: fixed;
top: 86px;
right: 24px;
z-index: 3000;
max-width: calc(100vw - 48px);
padding: 12px 22px;
border: 1px solid rgba(74, 222, 128, .55);
border-radius: 8px;
background: #14532d;
color: #dcfce7;
font-size: 14px;
font-weight: 700;
box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
@media (max-width: 600px) {
.signup-credit-strip {
top: 74px;
right: 16px;
max-width: calc(100vw - 32px);
}
}
:root {
/* ── Purple Dark Backgrounds
These are the main background colours used across the page.
They go from darkest (--bg) to slightly lighter (--surface-3).
"hex" colours like #07040F are written as #RRGGBB (red, green, blue in hex). */
--bg: #07040F; /* The deepest, darkest background — almost black-purple */
--surface: #0E0A1A; /* Slightly lighter — used for card backgrounds */
--surface-2: #140F24; /* Even lighter — for layered surfaces */
--surface-3: #1C1530; /* Lightest surface — used for highlighted areas */
/* ── Borders
rgba() lets us set a colour WITH an opacity (transparency).
rgba(red, green, blue, alpha) where alpha is 0 (invisible) to 1 (solid).
These soft glowing purple borders give a premium "glassmorphism" feel. */
--border: rgba(167, 139, 250, 0.2); /* Brighter purple border */
--border-mid: rgba(167, 139, 250, 0.35); /* More visible border */
--border-hover: rgba(196, 181, 253, 0.6); /* Bright border on hover */
--border-glow: rgba(196, 181, 253, 0.85); /* Strong glowing border */
/* ── Accent Colours (Violet / Purple / Fuchsia)
"Accent" colours are the main brand colours used for buttons, links, highlights. */
--accent: #8B5CF6; /* Core violet/purple — used for buttons and glows */
--accent-light: #A78BFA; /* Lighter purple — used for text and softer elements */
--accent-bright: #C4B5FD; /* Very light purple — for small labels and badges */
--accent-dim: rgba(139, 92, 246, 0.12); /* Nearly transparent purple background */
--accent-glow: rgba(139, 92, 246, 0.3); /* Glow colour for shadows */
--fuchsia: #D946EF; /* Bright pink-purple — used as a secondary accent */
--fuchsia-dim: rgba(217, 70, 239, 0.12); /* Semi-transparent fuchsia for backgrounds */
--indigo: #6366F1; /* Indigo blue-purple — used for bottom ambient lighting */
--pink: #EC4899; /* Bright pink — available as extra accent if needed */
/* ── Text Colours
Different shades of off-white/lavender for text.
Using pure white (#fff) everywhere would be too harsh on dark backgrounds. */
--text-primary: #FFFFFF; /* Pure crisp white for max contrast */
--text-secondary: #C4B5FD; /* Bright lavender for great readability */
--text-muted: #A78BFA; /* Visible but soft muted text */
--text-accent: #C4B5FD; /* Highlighted text that uses the brand accent colour */
/* ── Typography Scale
A consistent set of font-size values so all text sizes are proportional.
Using variables means you only change one number to resize everything. */
--text-xs: 11px; /* Tiny — for labels, badges, legal text */
--text-sm: 13px; /* Small — for secondary metadata */
--text-base: 15px; /* Base reading size */
--text-md: 16px; /* Default body text size */
--text-lg: 18px; /* Slightly larger body text */
--text-xl: 20px; /* Subheadings */
--text-2xl: 24px; /* Section sub-headings */
--text-3xl: 30px; /* Medium headings */
--text-4xl: 40px; /* Section titles */
--text-5xl: 56px; /* Large headings */
--text-hero: 78px; /* Giant hero headline — the biggest text on the page */
/* ── Spacing & Shape */
--section-pad: 60px;
--card-pad: 36px; /* Slightly more breathable padding inside cards */
--radius-sm: 8px; /* Slightly rounded — for small chips and tags */
--radius-md: 14px; /* Apple-like squircle radius for buttons and inputs */
--radius-lg: 20px; /* Elegant rounding for standard cards */
--radius-xl: 32px; /* Deep rounding for large hero panels */
/* ── Easing (Animation Curves)
cubic-bezier() defines HOW an animation accelerates and decelerates.
These are smooth "spring" curves that feel natural and premium. */
--ease: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth spring — fast start, gentle end */
--ease-fast: cubic-bezier(0.4, 0, 0.2, 1); /* Quick ease — snappy but not harsh */
}
/* ── Theme Overrides (Light Mode - REDEFINED) ──────────────────── */
[data-theme="light"] {
/* Ultra-premium cool light gray background */
--bg: #F8FAFC;
--surface: #FFFFFF;
--surface-2: #F1F5F9;
--surface-3: #E2E8F0;
/* Very delicate slate borders instead of muddy purple */
--border: rgba(15, 23, 42, 0.08);
--border-mid: rgba(15, 23, 42, 0.12);
--border-hover: rgba(139, 92, 246, 0.4);
--border-glow: rgba(139, 92, 246, 0.2);
/* Deep slate text for maximum contrast without being stark black */
--text-primary: #020617;
--text-secondary: #475569;
--text-muted: #94A3B8;
}
/* Light Mode Global Transitions */
body {
transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.pricing-card, .credit-topup-new, .faq-item, .nav, .mobile-menu, .hero-panel, .panel-prompt-box, .panel-output-box, .hero-float-tag {
transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
/* 1. Navigation & Text Fixes */
[data-theme="light"] .nav {
background-color: rgba(248, 250, 252, 0.85); /* Frosty gray */
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
[data-theme="light"] .nav-logo-text,
[data-theme="light"] .footer-logo-text { color: var(--text-primary) !important; }
[data-theme="light"] .nav-logo-text span,
[data-theme="light"] .footer-logo-text span { color: var(--accent) !important; }
[data-theme="light"] .nav-links a { color: var(--text-secondary); }
[data-theme="light"] .nav-links a:hover { color: var(--text-primary); background-color: rgba(15, 23, 42, 0.04); }
/* 2. Hero Background Mesh (Apple-style ultra-subtle pastel washes) */
[data-theme="light"] .bg-lights::before { background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, transparent 60%) !important; }
[data-theme="light"] .bg-lights::after { background: radial-gradient(circle at center, rgba(217, 70, 239, 0.06) 0%, transparent 60%) !important; }
[data-theme="light"] .bg-orb-bottom { background: radial-gradient(circle at center, rgba(99, 102, 241, 0.06) 0%, transparent 60%) !important; }
/* 3. Hero Mock App Panel (Glassmorphism Light) */
[data-theme="light"] .hero-panel {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow:
0 40px 80px -20px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
[data-theme="light"] .hero-panel::before { display: none !important; } /* Remove harsh neon top line */
/* 4. Inside the Hero Panel */
[data-theme="light"] .panel-title-bar { color: var(--text-muted) !important; font-weight: 700; }
[data-theme="light"] .panel-client-selector,
[data-theme="light"] .panel-prompt-box,
[data-theme="light"] .panel-output-box {
background-color: rgba(15, 23, 42, 0.02) !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
color: var(--text-primary) !important;
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.01) !important;
}
[data-theme="light"] .panel-client-avatar { color: #FFFFFF !important; }
[data-theme="light"] .panel-btn-approve {
background-color: rgba(139, 92, 246, 0.1) !important;
border: 1px solid rgba(139, 92, 246, 0.2) !important;
color: var(--accent) !important;
}
[data-theme="light"] .panel-btn-approve:hover { background-color: rgba(139, 92, 246, 0.15) !important; }
[data-theme="light"] .panel-btn-reject {
background-color: rgba(217, 70, 239, 0.05) !important;
border: 1px solid rgba(217, 70, 239, 0.1) !important;
color: var(--fuchsia) !important;
}
[data-theme="light"] .panel-btn-reject:hover { background-color: rgba(217, 70, 239, 0.1) !important; }
/* 5. Floating Tags & Badges */
[data-theme="light"] .hero-float-tag {
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(12px);
border: 1px solid rgba(15, 23, 42, 0.06) !important;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
color: var(--text-primary) !important;
}
[data-theme="light"] .nav-badge,
[data-theme="light"] .hero-badge {
background-color: rgba(139, 92, 246, 0.1) !important;
color: var(--accent) !important;
border: 1px solid rgba(139, 92, 246, 0.2) !important;
}
[data-theme="light"] .hero-sp-avatar { border-color: var(--bg); }
/* 6. All Standard Cards (Features, Pricing, FAQ) */
[data-theme="light"] .feature-large,
[data-theme="light"] .feature-card,
[data-theme="light"] .step-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .credit-topup-new,
[data-theme="light"] .calculator-card,
[data-theme="light"] .cta-box {
background: #FFFFFF !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
box-shadow:
0 4px 6px -1px rgba(15, 23, 42, 0.02),
0 20px 40px -10px rgba(15, 23, 42, 0.04) !important;
}
/* Remove dark-mode top rim glows */
[data-theme="light"] .feature-large::before,
[data-theme="light"] .feature-card::before,
[data-theme="light"] .pricing-card.featured::before,
[data-theme="light"] .cta-box::before { display: none !important; }
/* 7. Specific Accents */
[data-theme="light"] .pricing-card.featured {
border: 2px solid var(--accent) !important;
box-shadow: 0 20px 50px -10px rgba(139, 92, 246, 0.15) !important;
}
[data-theme="light"] .feature-icon,
[data-theme="light"] .step-number {
background: rgba(139, 92, 246, 0.08) !important;
color: var(--accent) !important;
border: 1px solid rgba(139, 92, 246, 0.15) !important;
}
[data-theme="light"] .cta-inner {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(217, 70, 239, 0.05)) !important;
}
[data-theme="light"] .mobile-menu {
background-color: #FFFFFF !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .billing-toggle-wrapper {
background: rgba(15, 23, 42, 0.03) !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
/* ── CSS Reset ─────────────────────────────────────────────────── */
/* Browsers have DEFAULT styles (margin, padding, box-sizing) that differ
between Chrome, Firefox, Safari, etc. This reset zeroes them out so
every browser starts from the same blank slate — giving us full control.
* = "select every single element"
*::before and *::after = "also select the invisible pseudo-elements
that can be inserted before/after any element using CSS 'content:'" */
*, *::before, *::after {
box-sizing: border-box; /* Makes padding/borders count INSIDE an element's width,
not added on top. Without this, a 100px-wide div with
20px padding would actually be 140px. With it: 100px. */
margin: 0; /* Remove all default outer spacing */
padding: 0; /* Remove all default inner spacing */
}
/* Make scrolling smooth when clicking anchor links like
font-size: 16px sets the base size that rem units are calculated from */
html { font-size: 16px; }
body {
/* The holds all visible content, so global styles go here */
background-color: var(--bg); /* Deep dark purple background for the whole page */
color: var(--text-primary); /* Default text colour — everything inherits this */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* ↑ Try "Inter" first. If not loaded yet, fall back to the OS system font,
then any generic sans-serif font. This is called a "font stack". */
font-size: var(--text-md); /* Default body font size (16px) */
line-height: 1.6; /* Space between lines of text (1.6 × font-size) */
-webkit-font-smoothing: antialiased; /* Makes text edges smoother on Mac/Chrome */
-moz-osx-font-smoothing: grayscale; /* Same fix but for Firefox on Mac */
overflow-x: hidden; /* Prevent horizontal scrollbar from appearing */
}
/* Remove underlines from all links and make them inherit the parent colour */
a { color: inherit; text-decoration: none; }
/* Remove bullet points from all lists — we style them ourselves */
ul { list-style: none; }
/* Prevent images from exceeding their container width */
img { display: block; max-width: 100%; }
/* Make buttons use the same font as the rest of the page */
button { font-family: inherit; }
/* ═══════════════════════════════════════════════════════════════
AMBIENT BACKGROUND LIGHTS
These decorative glowing orbs sit behind all content.
They create the "deep space" atmosphere of the design.
They are purely visual — pointer-events: none means you can
click right through them to the real content underneath.
═══════════════════════════════════════════════════════════════ */
/* The main background canvas — position: fixed keeps it pinned to
the viewport even when the user scrolls. inset: 0 means
top: 0; right: 0; bottom: 0; left: 0 — it covers the full screen. */
.bg-lights {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bg-lights::before {
content: '';
position: absolute;
top: -15%;
left: -10%;
width: 75vw;
height: 75vw;
background: radial-gradient(circle at center,
rgba(139, 92, 246, 0.25) 0%,
rgba(109, 40, 217, 0.15) 40%,
transparent 70%
);
border-radius: 50%;
animation: aurora-1 12s ease-in-out infinite alternate;
will-change: transform;
}
.bg-lights::after {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 60vw;
height: 60vw;
background: radial-gradient(circle at center,
rgba(217, 70, 239, 0.2) 0%,
rgba(217, 70, 239, 0.08) 45%,
transparent 70%
);
border-radius: 50%;
animation: aurora-2 15s ease-in-out infinite alternate;
will-change: transform;
}
.bg-orb-bottom {
position: fixed;
bottom: -15%;
left: 20%;
width: 50vw;
height: 50vw;
background: radial-gradient(circle at center,
rgba(99, 102, 241, 0.2) 0%,
rgba(99, 102, 241, 0.08) 50%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
z-index: 0;
animation: aurora-3 14s ease-in-out infinite alternate;
will-change: transform;
}
/* ── Aurora Fluid Animations ───────────────────────────────────── */
@keyframes aurora-1 {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(8vw, 6vh) scale(1.1); }
100% { transform: translate(-4vw, 10vh) scale(0.95); }
}
@keyframes aurora-2 {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-10vw, -8vh) scale(1.2); }
100% { transform: translate(5vw, 5vh) scale(0.9); }
}
@keyframes aurora-3 {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-8vw, -12vh) scale(1.15); }
100% { transform: translate(6vw, -4vh) scale(0.9); }
}
/* Grain / noise texture overlay — adds a subtle analog film grain that
prevents the gradients from looking too "digital" and flat.
The background-image is an SVG data URI (an image encoded directly
as text — no separate file needed). opacity: 0.04 = almost invisible. */
.bg-noise {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1; /* Sits just above the orbs */
opacity: 0.04; /* Only 4% visible — barely perceptible grain */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size: 180px; /* Tile the grain pattern every 180px */
}
/* A very faint dot-grid overlay — like graph paper on the background.
Uses two overlapping linear-gradients (horizontal + vertical) to draw
the grid lines. background-size: 60px 60px = one grid cell = 60×60px. */
.bg-grid {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px), /* Horizontal lines */
linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px); /* Vertical lines */
background-size: 60px 60px; /* Distance between grid lines */
animation: pan-grid 15s linear infinite; /* Highly professional subtle motion */
}
@keyframes pan-grid {
0% { background-position: 0px 0px; }
100% { background-position: 60px 60px; }
}
/* ── Ambient Motion Canvas ───────────────────────────────────── */
#ambient-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 1;
pointer-events: none;
}
/* The wrapper for all visible page content.
z-index: 2 places it above all background layers (which are at 0 and 1).
position: relative is required for z-index to work. */
.page-content {
position: relative;
z-index: 2;
}
/* ── Layout Helpers ────────────────────────────────────────────── */
/* The .container constrains content to a maximum readable width
and centres it horizontally with margin: 0 auto.
padding: 0 28px prevents text from touching the screen edges on mobile. */
.container {
max-width: 1440px; /* Balanced industry-standard SaaS width */
margin: 0 auto; /* 0 top/bottom, auto left/right = centred horizontally */
padding: 0 24px; /* Balanced side breathing room */
}
/* Every main section gets equal top/bottom spacing using the token */
.section { padding: var(--section-pad) 0; } /* 120px top and bottom, 0 left/right */
/* ── Typography Helpers ────────────────────────────────────────── */
/* The small pill-shaped label above section titles like "Features" or "Pricing".
display: inline-flex + gap makes the dot and text sit side-by-side with spacing. */
.section-label {
display: inline-flex; /* Lay children in a row, shrink to content width */
align-items: center; /* Vertically centre the dot and text */
gap: 8px; /* Space between the dot and the label text */
font-size: var(--text-xs); /* Small text (11px) */
font-weight: 700; /* Bold */
color: var(--accent-light); /* Light purple text */
text-transform: uppercase; /* ALL CAPS, regardless of how it's typed in HTML */
letter-spacing: 0.14em; /* Extra space between each letter (tracking) */
margin-bottom: 20px; /* Gap below the label, above the section title */
background: rgba(139, 92, 246, 0.08); /* Barely-visible purple tinted background */
border: 1px solid rgba(139, 92, 246, 0.18); /* Faint purple outline */
padding: 5px 12px; /* Inner breathing room */
border-radius: 100px; /* 100px radius = fully rounded pill shape */
width: fit-content; /* Only as wide as its content — no stretching */
}
/* The small glowing dot inside the section label pill */
.section-label-dot {
width: 4px;
height: 4px;
border-radius: 50%; /* Makes the 4×4 square into a circle */
background-color: var(--accent); /* Solid purple dot */
flex-shrink: 0; /* Never shrink even if space is tight */
}
/* Large bold section headings like "Built around how agencies actually work" */
.section-title {
font-size: var(--text-4xl); /* 40px */
font-weight: 800; /* Extra-bold */
line-height: 1.12; /* Tight line spacing for headlines */
letter-spacing: -0.025em; /* Slightly compressed — looks more premium */
color: var(--text-primary);
}
/* The paragraph of description text that sits below a section title */
.section-sub {
font-size: var(--text-lg); /* 18px */
color: var(--text-secondary); /* Muted purple-grey */
line-height: 1.7; /* Comfortable reading line height */
max-width: 560px; /* Never stretch too wide — limits line length */
margin-top: 16px;
}
/* ═══════════════════════════════════════════════════════════════
BUTTONS
All buttons share the .btn base class, then a modifier class
like .btn-primary or .btn-ghost adds the specific colour style.
This is called BEM (Block Element Modifier) methodology.
═══════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; /* Shrink-wrap around text; allow icon + text side-by-side */
align-items: center; /* Vertically centre content inside the button */
justify-content: center; /* Horizontally centre content */
gap: 8px; /* Space between icon and text */
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1; /* No extra line height inside buttons */
padding: 14px 28px; /* 14px top/bottom (vertical), 28px left/right (horizontal) */
border-radius: var(--radius-md); /* Rounded corners */
border: none; /* Remove default browser button border */
cursor: pointer; /* Show a hand/pointer cursor on hover */
white-space: nowrap; /* Prevent button text from wrapping to a second line */
transition: filter 0.2s var(--ease-fast), /* Animate brightness changes */
transform 0.2s var(--ease-fast), /* Animate position (for hover lift) */
background-color 0.2s var(--ease-fast), /* Animate colour changes */
box-shadow 0.2s var(--ease-fast); /* Animate shadow changes */
/* transition: smoothly animates changes to the listed properties over 0.2s */
}
/* Primary button — solid violet background.
Used for the main call-to-action. */
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--fuchsia)); /* Bold gradient */
color: #fff; /* White text */
box-shadow:
0 4px 15px rgba(139, 92, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25); /* Premium inner rim highlight */
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* What the primary button looks like when hovered */
.btn-primary:hover {
filter: brightness(1.15); /* Brighter */
transform: translateY(-2px) scale(1.02); /* Lift and slight grow */
box-shadow:
0 12px 35px rgba(217, 70, 239, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Stronger fuchsia shadow + glow */
}
/* Ghost button — nearly invisible with a faint border.
Used for secondary actions like "See how it works" */
.btn-ghost {
background-color: rgba(167, 139, 250, 0.08); /* More visible background */
color: var(--text-primary);
border: 1px solid var(--border-mid); /* More visible border */
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background-color: rgba(167, 139, 250, 0.18); /* More visible on hover */
color: #fff;
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}
/* Outline accent button — transparent with a coloured border.
Used for the launch pricing card button. */
.btn-outline-accent {
background-color: rgba(139, 92, 246, 0.05);
color: #fff;
border: 1.5px solid var(--accent-light); /* Brighter border */
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
}
.btn-outline-accent:hover {
background-color: var(--accent-dim); /* Subtle purple fill on hover */
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}
/* Size modifier — makes the button larger.
Add .btn-lg alongside .btn-primary, .btn-ghost, etc. */
.btn-lg {
padding: 16px 36px; /* More padding = bigger button */
font-size: 16px;
border-radius: var(--radius-md);
}
/* ═══════════════════════════════════════════════════════════════
[1] NAV — The sticky top navigation bar
position: sticky keeps it fixed at the top as the user scrolls.
backdrop-filter: blur() creates the "frosted glass" effect.
═══════════════════════════════════════════════════════════════ */
.nav {
position: sticky; /* Sticks to the top of the viewport as you scroll */
top: 0; /* The "sticky" position — 0px from the top edge */
z-index: 999; /* Must be ABOVE all other page content */
background-color: rgba(7, 4, 15, 0.72); /* Semi-transparent dark background */
border-bottom: 1px solid rgba(139, 92, 246, 0.12); /* Subtle bottom border line */
backdrop-filter: blur(24px); /* Blurs everything behind the nav (frost glass) */
-webkit-backdrop-filter: blur(24px); /* Same thing but for Safari browser */
}
/* Flex container to space logo, nav links, and action buttons apart */
.nav-inner {
display: flex; /* Lay children in a horizontal row */
align-items: center; /* Vertically centre all children */
justify-content: space-between; /* Push logo left, links centre, buttons right */
height: 68px; /* Fixed nav height */
}
/* Logo (left side of nav) */
.nav-logo {
display: flex;
align-items: center;
gap: 10px; /* Space between the SVG icon and the "VoxClient" text */
flex-shrink: 0; /* Never let the logo shrink when space is tight */
}
.nav-logo-mark { width: 32px; height: 32px; flex-shrink: 0; } /* The SVG icon */
.nav-logo-text {
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: -0.03em; /* Slightly compressed lettering for a premium look */
}
/* The "Client" part of "VoxClient" gets the purple accent colour */
.nav-logo-text span { color: var(--accent-light); }
/* Nav links (centre of nav) — flex row with no list bullets */
.nav-links {
display: flex;
align-items: center;
gap: 2px; /* Tiny gap — the padding on each provides the real visual spacing */
}
/* Individual navigation links */
.nav-links a {
font-size: 13.5px;
font-weight: 500;
color: var(--text-secondary); /* Start muted */
padding: 7px 14px; /* Comfortable click area */
border-radius: var(--radius-sm);
transition: color 0.15s ease, background-color 0.15s ease; /* Smooth colour transition */
}
.nav-links a:hover {
color: var(--text-primary); /* Brighten text on hover */
background-color: rgba(139, 92, 246, 0.08); /* Faint purple tint on hover */
}
/* Workspace uses the same text-link treatment as the primary nav links. */
.nav-link-button {
appearance: none;
border: 0;
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: 15px;
font-weight: 600;
padding: 8px 16px;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link-button:hover,
.nav-link-button:focus-visible {
color: var(--text-primary);
background-color: rgba(139, 92, 246, 0.08);
}
.profile-edit-link {
appearance: none;
border: 1px solid rgba(167, 139, 250, 0.35);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 600;
padding: 9px 15px;
border-radius: 8px;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.profile-edit-link:hover,
.profile-edit-link:focus-visible {
color: var(--text-primary);
border-color: rgba(167, 139, 250, 0.65);
background-color: rgba(139, 92, 246, 0.08);
}
/* Right side of nav — contains the status badge + CTA button */
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Keep the signed-in profile control close to the viewport edge while retaining a small gap. */
.nav-actions .public-profile-btn { margin-right: -16px; }
.profile-menu-item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: 0;
color: #fff;
text-align: left;
cursor: pointer;
font-size: 14px;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.profile-menu-item:hover { background: rgba(255,255,255,0.1); }
/* Personalization is temporarily disabled until its content is implemented. */
.profile-menu-item[onclick*="openVoxPersonalization"] { display: none !important; }
.profile-menu-divider { height: 1px; margin: 8px 0; background: rgba(167,139,250,0.18); }
/* The status pill badge */
.nav-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.25);
color: var(--accent-bright);
font-size: 11px;
font-weight: 600;
padding: 4px 11px;
border-radius: 100px; /* Fully rounded pill shape */
letter-spacing: 0.03em;
}
/* The animated pulse dot inside the status badge */
.nav-badge-pulse {
width: 5px;
height: 5px;
background-color: var(--fuchsia); /* Bright fuchsia/pink dot */
border-radius: 50%;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
[2] HERO — The first big section of the page
This is the most important section — it's the first thing visitors see.
═══════════════════════════════════════════════════════════════ */
.hero {
padding-top: 50px;
padding-bottom: 60px;
position: relative; /* Needed so ::before (the vertical beam) is positioned relative to .hero */
}
/* A decorative vertical glow beam that drops from the top of the hero section.
It's 1px wide — an ultra-thin glowing line. */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 50%; /* Start at the horizontal centre */
transform: translateX(-50%); /* Shift left by half its own width to truly centre it */
width: 1px;
height: 140px;
background: linear-gradient(180deg,
transparent, /* Invisible at the top */
rgba(139, 92, 246, 0.7), /* Bright purple glow in the middle */
rgba(217, 70, 239, 0.3), /* Fading to fuchsia */
transparent /* Invisible at the bottom */
);
}
/* Two-column layout: left = copy/text, right = UI panel demo */
.hero-layout {
display: grid; /* CSS Grid creates side-by-side columns */
grid-template-columns: 1fr 420px; /* Left takes all remaining space; right = 420px fixed */
align-items: center; /* Vertically centre both columns */
gap: 64px; /* Space between the two columns */
}
/* The left column with headline, subtext, and CTA buttons */
.hero-content {
display: flex;
flex-direction: column; /* Stack children vertically (top to bottom) */
gap: 0; /* Children manage their own spacing via margin-bottom */
}
/* The pill badge above the headline */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.25);
color: var(--accent-bright);
font-size: var(--text-xs);
font-weight: 600;
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 28px; /* Push the headline 28px below the badge */
letter-spacing: 0.04em;
width: fit-content; /* Only as wide as its text */
}
/* The pink dot inside the hero badge */
.hero-badge-dot {
width: 5px;
height: 5px;
background-color: var(--fuchsia);
border-radius: 50%;
}
/* The massive main headline: "Every client. One voice. Zero guesswork." */
.hero-headline {
font-size: var(--text-hero);
font-weight: 900; /* Heaviest possible weight */
line-height: 1.05;
letter-spacing: -0.05em; /* Extra tight for extreme editorial polish */
color: var(--text-primary);
margin-bottom: 24px;
background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero-headline {
background: linear-gradient(180deg, #020617 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* "One voice." gets special purple styling + a glow effect */
.hero-headline .accent-word {
color: var(--accent-light); /* Light purple text */
position: relative; /* Needed for the ::after glow to be positioned relative to it */
display: inline-block; /* Needed for transforms and pseudo-elements to work on text */
}
/* A duplicate of the text rendered in transparent with a text-shadow glow.
This creates the "luminous glow" effect behind the accent word. */
.hero-headline .accent-word::after {
content: attr(data-text); /* content: attr() reads the value of an HTML attribute */
position: absolute;
inset: 0; /* Cover the same exact space as the real text */
color: transparent; /* The duplicate text is invisible */
text-shadow: 0 0 60px rgba(139, 92, 246, 0.6); /* But it has a glowing shadow */
}
/* The subtitle paragraph below the headline */
.hero-sub {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.7;
max-width: 500px;
margin-bottom: 36px; /* Space before the CTA buttons */
font-weight: 400;
}
/* The row of two CTA buttons */
.hero-ctas {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 40px; /* Space before the social proof strip */
}
/* Social proof strip: avatars + "Trusted by X agencies" text */
.hero-social-proof {
display: flex;
align-items: center;
gap: 16px;
padding-top: 24px;
border-top: 1px solid rgba(139, 92, 246, 0.1); /* Subtle divider line above */
}
/* The container for the overlapping avatar circles */
.hero-sp-avatars {
display: flex;
align-items: center;
}
/* Each individual avatar circle (contains two-letter initials like "SM") */
.hero-sp-avatar {
width: 28px;
height: 28px;
border-radius: 50%; /* Circle */
border: 2px solid var(--bg); /* Dark ring around each avatar creates separation */
margin-right: -8px; /* Negative margin makes them overlap each other */
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
/* Each avatar gets a slightly different purple gradient background */
.hero-sp-avatar:nth-child(1) { background-color: #7C3AED; } /* Darkest violet */
.hero-sp-avatar:nth-child(2) { background-color: #9333EA; }
.hero-sp-avatar:nth-child(3) { background-color: #A855F7; }
.hero-sp-avatar:nth-child(4) { background-color: #D946EF; } /* Lightest fuchsia */
/* The "Trusted by X agencies" text. JavaScript targets this to update the count live. */
.hero-sp-text {
font-size: 13px;
color: var(--text-secondary);
padding-left: 12px; /* Extra gap after the last avatar (which has -8px margin) */
}
/* The number inside the social proof text is bold and bright */
.hero-sp-text strong {
color: var(--text-primary);
font-weight: 600;
}
/* ── Hero right column: Fake UI Panel ──────────────────────────── */
/* The right column holds the decorative mock app interface */
.hero-visual {
position: relative; /* Allows the floating tags to be positioned relative to this */
height: 480px; /* Fixed height so the panel fills the column neatly */
overflow: visible; /* Tags with negative top/bottom values must NOT be clipped */
padding: 20px 0; /* 20px breathing room above/below so edge-straddling tags show */
box-sizing: content-box; /* padding adds to height, keeping the 480px panel intact */
}
/* The main dark glass card that mimics a real app window */
.hero-panel {
position: absolute;
inset: 0; /* Fills the entire .hero-visual container */
background: linear-gradient(150deg,
rgba(28, 21, 48, 0.95) 0%,
rgba(14, 10, 26, 0.98) 100%
);
border: 1px solid rgba(139, 92, 246, 0.25); /* Faint purple border around the panel */
border-radius: var(--radius-xl); /* Very rounded corners */
overflow: hidden; /* Clip child elements at the rounded corners */
}
/* Top glowing edge line on the panel — like a neon light on the top rim */
.hero-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px; /* A single-pixel line */
background: linear-gradient(90deg,
transparent,
rgba(139, 92, 246, 0.8), /* Bright purple at the centre */
rgba(217, 70, 239, 0.5), /* Fuchsia at the right of centre */
transparent
);
}
/* Ambient inner glow at the top of the panel */
.hero-panel::after {
content: '';
position: absolute;
top: -50%; /* Positioned above the panel, reaching down into it */
left: -10%;
width: 120%;
height: 80%;
background: radial-gradient(ellipse at top,
rgba(139, 92, 246, 0.12) 0%, /* Purple glow from above */
rgba(217, 70, 239, 0.05) 50%,
transparent 70%
);
pointer-events: none;
}
/* The inner content of the panel — uses flexbox to stack all rows vertically */
.hero-panel-content {
position: relative;
z-index: 1; /* Sits above the ::after glow overlay */
padding: 26px;
height: 100%;
display: flex;
flex-direction: column; /* Stack: header → client → prompt → output → buttons */
gap: 12px; /* 12px between each stacked row */
}
/* The "window chrome" row at the top — mimics macOS traffic light dots + title bar */
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid rgba(139, 92, 246, 0.1); /* Divider below the chrome */
}
/* Container for the three coloured dots */
.panel-dots { display: flex; gap: 6px; }
/* Each individual dot */
.panel-dot { width: 8px; height: 8px; border-radius: 50%; }
/* Colour each dot to mimic macOS: red = close, yellow = minimise, green = maximise */
.panel-dot:nth-child(1) { background-color: rgba(255, 100, 100, 0.5); } /* Red */
.panel-dot:nth-child(2) { background-color: rgba(255, 200, 50, 0.4); } /* Yellow */
.panel-dot:nth-child(3) { background-color: rgba(100, 210, 100, 0.4); } /* Green */
/* The "VoxClient — Generate" text in the centre of the title bar */
.panel-title-bar {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* The client name row inside the panel */
.panel-client-selector {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background-color: rgba(139, 92, 246, 0.08); /* Faint purple tinted row */
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: var(--radius-md);
}
/* The small avatar/icon for the client */
.panel-client-avatar {
width: 26px;
height: 26px;
border-radius: 7px; /* Rounded square (not a circle) */
background: linear-gradient(135deg, #7C3AED, #D946EF); /* Purple-to-pink gradient */
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: white;
flex-shrink: 0;
}
/* "Bright Spark Agency" text */
.panel-client-name {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
}
/* The "Voice active" tag on the right of the client row */
.panel-client-tag {
margin-left: auto; /* Push this element all the way to the right */
font-size: 9px;
font-weight: 700;
color: var(--accent-light);
background-color: rgba(139, 92, 246, 0.12);
padding: 2px 8px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Small labels above the prompt and output boxes ("YOUR PROMPT", "GENERATED OUTPUT") */
.panel-prompt-label,
.panel-output-label {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.09em;
padding-top: 2px;
display: flex;
align-items: center;
gap: 6px;
}
/* Adds a small purple dot after the "GENERATED OUTPUT" label */
.panel-output-label::after {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #A855F7; /* Purple dot indicating "AI is active" */
}
/* The grey box showing the user's prompt text */
.panel-prompt-box {
background-color: rgba(255, 255, 255, 0.025); /* Almost invisible white */
border: 1px solid rgba(139, 92, 246, 0.12);
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.55;
}
/* The box showing the AI-generated copy — slightly more prominent than the prompt box.
JavaScript changes the text in this box when "Reject" is clicked. */
.panel-output-box {
background-color: rgba(139, 92, 246, 0.05); /* Slightly purple tinted */
border: 1px solid rgba(139, 92, 246, 0.18);
border-radius: var(--radius-md);
padding: 14px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.68;
flex: 1; /* Take up all remaining vertical space in the flex column */
}
/* The blinking cursor at the end of the generated text */
.output-cursor {
display: inline-block;
width: 1.5px;
height: 12px;
background-color: var(--accent); /* Purple cursor */
vertical-align: middle; /* Align with surrounding text */
margin-left: 2px;
}
/* Row containing the Approve and Reject buttons */
.panel-actions { display: flex; gap: 8px; margin-top: auto; }
/* margin-top: auto pushes this row to the very bottom of the flex column */
/* Base styles shared by both panel buttons */
.panel-btn {
flex: 1; /* Each button takes equal half of the row */
padding: 9px 0;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
text-align: center;
cursor: pointer; /* Pointer cursor makes it obvious these are clickable */
letter-spacing: 0.02em;
transition: all 0.2s ease;
}
/* "Approve output" button — purple tinted, JavaScript adds the green flash */
.panel-btn-approve {
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.25);
color: var(--accent-light);
}
.panel-btn-approve:hover {
background-color: rgba(139, 92, 246, 0.2);
border-color: rgba(139, 92, 246, 0.4);
}
/* "Reject" button — fuchsia tinted */
.panel-btn-reject {
background-color: rgba(217, 70, 239, 0.06);
border: 1px solid rgba(217, 70, 239, 0.15);
color: rgba(217, 70, 239, 0.5);
}
.panel-btn-reject:hover {
background-color: rgba(217, 70, 239, 0.15);
border-color: rgba(217, 70, 239, 0.3);
color: rgba(217, 70, 239, 0.8);
}
/* Floating status tags — positioned INSIDE .hero-visual so they never
clip into adjacent columns or conflict with panel rows at any viewport.
z-index: 10 guarantees they float visually above the panel card.
cursor: default so the cursor doesn't change on hover (they're decorative). */
.hero-float-tag {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(28, 21, 48, 0.96);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: var(--radius-md);
padding: 9px 15px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(139, 92, 246, 0.1);
z-index: 10; /* Always on top of all panel layers */
cursor: default;
}
/* Coloured dot inside each floating tag */
.hero-float-tag-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* "Tone match: 97%" — straddles the BOTTOM edge of the panel.
bottom: -18px places the tag half below the panel border;
impossible to overlap any internal content row. */
.float-tag-1 { bottom: -18px; left: 24px; }
.float-tag-1 .hero-float-tag-dot { background-color: #A855F7; }
/* "12 client profiles active" — straddles the TOP edge of the panel.
top: -18px places the tag half above the panel border;
impossible to overlap any internal content row. */
.float-tag-2 { top: -18px; right: 24px; }
.float-tag-2 .hero-float-tag-dot { background-color: #D946EF; }
/* ═══════════════════════════════════════════════════════════════
[3] PROBLEM — Three pain-point cards
═══════════════════════════════════════════════════════════════ */
/* position: relative enables the ::before section divider line */
.problem { position: relative; }
/* A horizontal glowing divider line above the problem section */
.problem::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 30%; /* Line is 30% of container width */
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(139, 92, 246, 0.3), /* Purple glow in the centre */
transparent
);
}
.problem-header { margin-bottom: 60px; } /* Space between heading and cards */
/* Three-column grid for the three problem cards */
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
gap: 20px;
}
/* Each individual problem card */
.problem-card {
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.7) 0%, /* Slightly lighter purple at top-left */
rgba(14, 10, 26, 0.9) 100% /* Darker at bottom-right */
);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--card-pad); /* 32px all around */
transition: border-color 0.25s var(--ease-fast),
background 0.25s var(--ease-fast);
position: relative;
overflow: hidden; /* Clip the corner glow pseudo-element */
}
/* Corner glow that appears on hover — starts invisible, fades in */
.problem-card::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 100px;
height: 100px;
background: radial-gradient(circle,
rgba(139, 92, 246, 0.12) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
opacity: 0; /* Invisible by default */
transition: opacity 0.3s ease; /* Animate to visible on hover */
}
.problem-card:hover::before { opacity: 1; } /* Show the glow on hover */
.problem-card:hover {
border-color: var(--border-hover); /* Purple border brightens on hover */
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.9) 0%,
rgba(20, 15, 36, 0.95) 100%
);
}
/* "01", "02", "03" labels above each card title */
.problem-number {
font-size: 11px;
font-weight: 700;
color: var(--fuchsia);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 18px;
opacity: 0.7; /* Slightly dimmed */
}
.problem-title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
margin-bottom: 14px;
letter-spacing: -0.015em;
}
.problem-body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.72; /* Comfortable reading line height */
}
/* ═══════════════════════════════════════════════════════════════
[4] HOW IT WORKS — Three step cards with a connector line
═══════════════════════════════════════════════════════════════ */
.how { position: relative; }
.how-header { margin-bottom: 72px; }
/* Three-column grid for the step cards */
.steps-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative; /* Needed for the ::before connector line */
}
/* The horizontal connecting line between step icons.
It runs across the top of the grid, from card 1 to card 3. */
.steps-layout::before {
content: '';
position: absolute;
top: 54px; /* Aligned with the vertical centre of the icons */
left: calc(33.33% - 8px); /* Starts at the right edge of card 1's icon */
right: calc(33.33% - 8px); /* Ends at the left edge of card 3's icon */
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(139, 92, 246, 0.5), /* Purple glow */
rgba(217, 70, 239, 0.4), /* Fuchsia in the middle */
rgba(139, 92, 246, 0.5),
transparent
);
pointer-events: none;
}
/* Each step card */
.step-card {
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.7) 0%,
rgba(14, 10, 26, 0.9) 100%
);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--card-pad);
position: relative;
overflow: hidden;
transition: border-color 0.25s var(--ease-fast);
z-index: 1; /* Sit above the connector line */
}
.step-card:hover { border-color: var(--border-hover); }
/* Giant ghost number ("01", "02", "03") in the background of each card.
Very large, very faint — purely decorative texture. */
.step-bg-number {
position: absolute;
bottom: -18px; /* Pokes slightly below the card bottom */
right: 8px;
font-size: 120px; /* Enormous */
font-weight: 900;
color: var(--accent);
opacity: 0.06; /* 6% opacity — just barely visible */
line-height: 1;
pointer-events: none;
user-select: none; /* Prevent the user from accidentally selecting/copying it */
letter-spacing: -0.06em;
}
/* The small icon box at the top of each step card */
.step-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.15) 0%,
rgba(217, 70, 239, 0.08) 100%
);
border: 1px solid rgba(139, 92, 246, 0.25);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0;
position: relative;
z-index: 1; /* Above the ghost number */
}
/* Style the SVG icon inside each step icon box */
.step-icon svg {
width: 20px;
height: 20px;
stroke: var(--accent-light); /* Purple outline (stroke) colour */
fill: none; /* No fill — icons are outline style */
stroke-width: 1.75;
stroke-linecap: round; /* Rounded ends on strokes */
stroke-linejoin: round; /* Rounded corners where strokes meet */
}
/* "01 — Train" labels above the step title */
.step-label {
font-size: 11px;
font-weight: 700;
color: var(--fuchsia);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
z-index: 1;
opacity: 0.85;
}
/* "Train", "Generate", "Refine" headings */
.step-heading {
font-size: var(--text-2xl); /* 24px */
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
/* Description paragraph in each step card */
.step-body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.72;
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
[5] FEATURES — Sticky left heading + scrollable right list
═══════════════════════════════════════════════════════════════ */
.features { position: relative; }
/* Two-column layout: fixed-width left header + flexible right list */
.features-layout {
display: grid;
grid-template-columns: 400px 1fr; /* Left column = 400px; right = all remaining */
gap: 80px;
align-items: center;
}
/* The left column "sticks" to 100px from the top while you scroll the right column */
.features-left { position: sticky; top: 100px; }
/* Stack feature cards vertically */
.features-list {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Each individual feature card */
.feature-item {
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.65) 0%,
rgba(14, 10, 26, 0.85) 100%
);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px 28px;
transition: border-color 0.25s var(--ease-fast),
background 0.25s var(--ease-fast),
transform 0.2s var(--ease-fast);
cursor: default;
position: relative;
overflow: hidden;
}
/* A vertical colour streak on the left edge of each card — appears on hover */
.feature-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px; /* Just 2px wide — a thin stripe */
background: linear-gradient(180deg,
rgba(139, 92, 246, 0), /* Transparent at top */
rgba(139, 92, 246, 0.8), /* Bright purple in the middle */
rgba(217, 70, 239, 0.6), /* Fuchsia accent */
rgba(139, 92, 246, 0) /* Back to transparent at bottom */
);
opacity: 0; /* Invisible by default */
transition: opacity 0.3s ease;
}
.feature-item:hover::before { opacity: 1; } /* Reveal the stripe on hover */
.feature-item:hover {
border-color: var(--border-hover);
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.85) 0%,
rgba(20, 15, 36, 0.95) 100%
);
transform: translateX(4px); /* Nudge card 4px to the right on hover */
}
.feature-item-title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.feature-item-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════════════
[6] PRICING — Two pricing plan cards
═══════════════════════════════════════════════════════════════ */
.pricing { position: relative; }
.pricing-header {
text-align: center; /* Centre the heading and subtext */
margin-bottom: 64px;
}
/* Centre the section-sub (subheading) inside the centred header */
.pricing-header .section-sub { margin: 16px auto 0; }
/* Default grid — used as fallback */
.pricing-grid {
display: grid;
gap: 16px;
margin: 0 auto;
}
/* 5-column grid for the five subscription plans.
We use auto-fit with a min width so that on smaller screens
the cards wrap automatically into rows. */
.pricing-grid-5 {
grid-template-columns: repeat(5, 1fr); /* 5 equal columns on wide screens */
max-width: 1200px;
gap: 16px;
}
/* Short description text below each plan price */
.pricing-plan-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.55;
margin-top: -10px; /* Pull closer to the price above */
}
/* "Limited" feature rows — shown in a dimmed colour with a strikethrough-style bullet */
.pricing-feature-row.limited-row {
color: var(--text-muted);
opacity: 0.55;
}
/* Responsive: on tablet (max 900px) switch to 2-3 columns */
@media (max-width: 900px) {
.pricing-grid-5 {
grid-template-columns: repeat(3, 1fr);
}
}
/* Responsive: on mobile (max 600px) switch to 1 column */
@media (max-width: 600px) {
.pricing-grid-5 {
grid-template-columns: 1fr;
}
}
/* Base style for both pricing cards */
.pricing-card {
background: linear-gradient(160deg,
rgba(20, 15, 36, 0.9) 0%,
rgba(10, 8, 18, 0.95) 100%
);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px 24px;
display: flex;
flex-direction: column; /* Stack plan label, price, features, CTA vertically */
gap: 24px; /* Space between each stacked item */
position: relative;
overflow: hidden;
transition: border-color 0.25s var(--ease-fast);
}
/* The featured card gets extra emphasis */
.pricing-card.featured {
border-color: rgba(139, 92, 246, 0.45); /* More visible purple border */
background: linear-gradient(160deg,
rgba(28, 21, 48, 0.95) 0%,
rgba(20, 15, 36, 0.98) 100%
);
}
/* Top glowing border on the featured card */
.pricing-card.featured::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(139, 92, 246, 0.9), /* Strong purple glow */
rgba(217, 70, 239, 0.6), /* Fuchsia accent */
transparent
);
}
/* Inner ambient glow on the featured card */
.pricing-card.featured::after {
content: '';
position: absolute;
top: -40%;
left: 10%;
width: 80%;
height: 70%;
background: radial-gradient(ellipse,
rgba(139, 92, 246, 0.12) 0%,
rgba(217, 70, 239, 0.04) 50%,
transparent 70%
);
pointer-events: none;
}
/* Row containing the plan status badge */
.pricing-plan-label {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
/* Plan name text */
.pricing-plan-name {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.09em;
}
/* Override plan name colour for the featured card */
.pricing-card.featured .pricing-plan-name { color: var(--accent-light); }
/* "Open now" / "Coming soon" badge */
.pricing-badge {
font-size: 9px;
font-weight: 700;
background-color: rgba(139, 92, 246, 0.12);
border: 1px solid rgba(139, 92, 246, 0.28);
color: var(--accent-bright);
padding: 3px 7px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* "$0" / "$49" price display */
.pricing-price {
display: flex;
align-items: flex-end; /* Align the "/month" text to the bottom of the big number */
gap: 4px;
line-height: 1;
}
/* The large price number */
.pricing-amount {
font-size: 46px;
font-weight: 900;
color: var(--text-primary);
letter-spacing: -0.045em; /* Very compressed for that bold premium look */
line-height: 0.9;
}
/* Dim the price on the non-featured card */
.pricing-card.muted .pricing-amount { color: var(--text-secondary); }
/* "/ month" text beside the price */
.pricing-period {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 5px; /* Aligns it to the bottom of the price number */
}
/* Vertical list of feature bullets */
.pricing-features {
display: flex;
flex-direction: column;
gap: 11px;
}
/* Each feature row — the checkmark bullet is added via CSS ::before */
.pricing-feature-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
}
/* The checkmark bullet — created with CSS, no HTML element needed.
background-image loads an inline SVG checkmark icon via data URI. */
.pricing-feature-row::before {
content: '';
width: 17px;
height: 17px;
border-radius: 50%;
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.22);
flex-shrink: 0; /* Never shrink the bullet point */
margin-top: 0px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M4.5 9l2.5 2.5 5.5-5.5' stroke='%238B5CF6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* CTA button at the bottom of each card */
.pricing-cta-wrap { margin-top: auto; position: relative; z-index: 1; }
/* margin-top: auto pushes it to the very bottom regardless of content above */
.pricing-cta-wrap .btn { width: 100%; } /* Full-width button */
/* Small disclaimer text below the pricing cards */
.pricing-footnote {
text-align: center;
margin-top: 36px;
font-size: 14px;
color: var(--text-muted);
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════════
[7] SOCIAL PROOF — Testimonial quote cards
═══════════════════════════════════════════════════════════════ */
.proof { position: relative; }
.proof-header { margin-bottom: 56px; }
/* Two-column grid for quote cards */
.proof-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
/* Each testimonial card */
.quote-card {
background: linear-gradient(145deg,
rgba(28, 21, 48, 0.7) 0%,
rgba(14, 10, 26, 0.88) 100%
);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 36px;
transition: border-color 0.25s var(--ease-fast);
position: relative;
overflow: hidden;
}
.quote-card:hover { border-color: var(--border-hover); }
/* Subtle corner glow in the bottom-right corner */
.quote-card::after {
content: '';
position: absolute;
bottom: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle,
rgba(217, 70, 239, 0.1) 0%, /* Fuchsia glow */
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
/* The large decorative " quotation mark at the top of each card */
.quote-mark {
font-family: 'Georgia', serif; /* Serif font — classic typographic quote mark */
font-size: 60px;
line-height: 0.85;
/* Creates a gradient-filled text effect:
1. Set the text background to a gradient
2. Clip the background to the text shape
3. Make the text colour transparent so you see through to the gradient */
background: linear-gradient(135deg, var(--accent), var(--fuchsia));
-webkit-background-clip: text; /* Clip background to text (Chrome/Safari) */
-webkit-text-fill-color: transparent; /* Make text transparent (Chrome/Safari) */
background-clip: text; /* Standard property */
display: block;
margin-bottom: 18px;
opacity: 0.8;
}
/* The actual quote text */
.quote-body {
font-size: 17px;
color: var(--text-primary);
line-height: 1.72;
margin-bottom: 24px;
font-weight: 400;
}
/* The author info row (avatar + name + role) */
.quote-author {
display: flex;
align-items: center;
gap: 12px;
}
/* Circular avatar with initials */
.quote-author-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: white;
flex-shrink: 0;
}
/* Unique gradient for each author */
.quote-author-avatar.av1 {
background: linear-gradient(135deg, #7C3AED, #A855F7); /* Violet */
}
.quote-author-avatar.av2 {
background: linear-gradient(135deg, #9333EA, #D946EF); /* Violet to fuchsia */
}
.quote-author-name {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
}
.quote-author-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
/* Small italic disclaimer below the quote cards */
.proof-disclaimer {
font-size: 13px;
color: var(--text-muted);
font-style: italic;
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
[8] FINAL CTA — The email sign-up section at the bottom
JavaScript intercepts the form submit and validates the email.
═══════════════════════════════════════════════════════════════ */
.final-cta { position: relative; }
/* Large radial glow orb centred behind the CTA card */
.final-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centre it both horizontally AND vertically */
width: 700px;
height: 700px;
background: radial-gradient(circle,
rgba(109, 40, 217, 0.18) 0%,
rgba(217, 70, 239, 0.07) 40%,
transparent 68%
);
pointer-events: none;
}
/* The card that wraps the headline, subtext, and email form */
.cta-wrapper {
background: linear-gradient(160deg,
rgba(28, 21, 48, 0.9) 0%,
rgba(14, 10, 26, 0.96) 100%
);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: var(--radius-xl);
padding: 88px 80px; /* Generous padding for a spacious feel */
text-align: center;
position: relative;
overflow: hidden;
}
/* Top glowing line on the CTA card */
.cta-wrapper::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(139, 92, 246, 0.8),
rgba(217, 70, 239, 0.6),
rgba(99, 102, 241, 0.5),
transparent
);
}
/* Inner glow from above */
.cta-wrapper::after {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 90%;
background: radial-gradient(ellipse,
rgba(139, 92, 246, 0.12) 0%,
rgba(217, 70, 239, 0.05) 50%,
transparent 70%
);
pointer-events: none;
}
/* Signup confirmation headline */
.cta-headline {
font-size: var(--text-5xl); /* 56px */
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1.1;
color: var(--text-primary);
margin-bottom: 16px;
position: relative;
z-index: 1; /* Sit above the ::after glow */
}
/* Sub-text below the CTA headline */
.cta-sub {
font-size: var(--text-lg);
color: var(--text-secondary);
margin-bottom: 44px;
position: relative;
z-index: 1;
}
/* The email input + submit button form row.
JavaScript targets this with document.querySelector(".cta-form") */
.cta-form {
display: flex;
gap: 10px;
max-width: 500px; /* Form doesn't stretch too wide */
margin: 0 auto 16px; /* Centred + 16px space below */
position: relative;
z-index: 1;
}
/* The email text input field.
JavaScript reads its value with document.getElementById("cta-email").value */
.cta-input {
flex: 1; /* Stretch to fill all available space beside the button */
background-color: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.15);
border-radius: var(--radius-md);
padding: 14px 18px;
font-size: 15px;
font-family: 'Inter', sans-serif;
color: var(--text-primary);
outline: none; /* Remove the default browser blue focus outline */
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Styles the placeholder text ("your@agency.com") */
.cta-input::placeholder { color: var(--text-muted); }
/* When the input is focused/active, it glows purple */
.cta-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); /* Outer glow ring */
}
/* Signup fine print */
.cta-fine {
font-size: 13px;
color: var(--text-muted);
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
[9] FOOTER
═══════════════════════════════════════════════════════════════ */
.footer {
border-top: 1px solid rgba(139, 92, 246, 0.1); /* Subtle separator from main content */
padding: 60px 0 40px;
}
/* Two-column layout: brand/tagline on left, nav links on right */
.footer-top {
display: grid;
grid-template-columns: 280px 1fr;
gap: 64px;
margin-bottom: 56px;
}
/* Logo + tagline wrapper */
.footer-brand-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.footer-logo-text {
font-size: 17px;
font-weight: 800;
color: #fff;
letter-spacing: -0.03em;
}
/* "Client" part of "VoxClient" in purple */
.footer-logo-text span { color: var(--accent-light); }
/* Tagline below logo */
.footer-tagline {
font-size: 14px;
color: var(--text-muted);
line-height: 1.65;
max-width: 220px;
}
/* Three-column nav grid (Product / Company / Legal) */
.footer-nav-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* Column headings ("PRODUCT", "COMPANY", "LEGAL") */
.footer-nav-col-title {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
/* Vertical list of links inside each column */
.footer-nav-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-col a {
font-size: 14px;
color: var(--text-secondary);
transition: color 0.15s ease;
}
.footer-nav-col a:hover { color: var(--text-primary); } /* Brighten on hover */
/* Bottom bar with copyright + legal links */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 28px;
border-top: 1px solid rgba(139, 92, 246, 0.08); /* Very faint separator */
}
.footer-copyright { font-size: 13px; color: var(--text-muted); }
/* Row of "Privacy · Terms · Contact" links */
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
font-size: 13px;
color: var(--text-muted);
transition: color 0.15s ease;
}
.footer-legal a:hover { color: var(--text-secondary); }
/* ── Accessibility Utility ─────────────────────────────────────── */
/* .visually-hidden hides content from the SCREEN but keeps it accessible
to screen readers (assistive technology used by visually impaired users).
Used on