/*
=========================================================================
UNBLO LANDING PAGE — STUNNING VISUAL DESIGN
=========================================================================
Design Inspiration:
- Linear: Dark, sophisticated, clean product-focused approach
- Figma: Playful elements, bright accents, multiple product examples
- Intercom Fin: Dramatic aurora glow, elegant typography, warm atmosphere
Philosophy (Dieter Rams + Jony Ive):
- Less, but better — every element earns its place
- Honest design — buttons look pressable, inputs look typeable
- Obsessive attention to detail — the cumulative effect creates quality
Typography System:
- Inter: Professional sans-serif for all text (headlines, body, UI elements).
The gold standard for modern SaaS products, used by Linear and other
premium products. Variable font with optical sizing for crisp rendering.
- Univers: Clean geometric sans for logo (using --font-logo variable).
- Berkeley Mono/SF Mono: Monospace for code and technical content.
Font Weight Scale (Linear-inspired):
- Light: 300 (rarely used)
- Regular: 400 (body text)
- Medium: 510 (labels, subtle emphasis)
- Semibold: 590 (card titles, subheadings)
- Bold: 680 (headlines, strong emphasis)
Color System:
- Accent Blue (#3B82F6): Interactive elements, buttons, links — vibrant and accessible.
- Klein Blue (#002FA7): Atmospheric effects, glows, shadows — sophisticated and premium.
- Semantic colors: Success (#22C55E), Warning (#F59E0B), Error (#EF4444).
- All colors use CSS variables for consistent theming across light/dark modes.
*/
/*
=========================================================================
@FONT-FACE DECLARATIONS
=========================================================================
Custom fonts from Klim Type Foundry for distinctive typography.
NOTE: Tiempos Headline is defined below but not currently used.
All typography uses Inter (defined via CSS variables) for consistency.
Tiempos may be used in future design iterations.
*/
/* Tiempos Headline @font-face declarations removed — font files didn't exist.
Serif typography now uses Source Serif 4 via Google Fonts. */
@font-face {
font-family: 'Tw Cen MT Medium';
src: url('/fonts/TwentiethCenturyMedium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/*
NOTE: Söhne Breit font declarations removed - logo now uses Univers font stack
via --font-logo CSS variable for consistency with the rest of the design system.
*/
/*
=========================================================================
CSS CUSTOM PROPERTIES — DESIGN TOKENS
=========================================================================
Using CSS variables for theming. Dark mode is the default,
inspired by Linear/Raycast/VS Code aesthetics.
*/
:root {
/*
=======================================================================
DARK THEME (Default)
=======================================================================
Deep, sophisticated dark with a cohesive blue color system.
Uses two blue tones for different purposes:
- Accent blue (#3B82F6): Interactive elements, buttons, links
- Klein blue (#002FA7): Atmospheric glows, shadows, highlights
*/
/*
Primary Accent: Blue-500 — vibrant, accessible, interactive
Used for buttons, links, and interactive UI elements.
This brighter blue ensures good contrast and accessibility.
*/
--color-accent: #3B82F6;
--color-accent-hover: #60A5FA;
--color-accent-muted: rgba(59, 130, 246, 0.15);
--color-accent-glow: rgba(59, 130, 246, 0.4);
/*
Klein Blue Base Color (#002FA7)
International Klein Blue — deep, rich, sophisticated.
Used as a base for atmospheric glows and subtle highlights.
This creates a cohesive, premium color system.
*/
--color-klein-blue: #002FA7;
--color-klein-blue-rgb: 0, 47, 167;
/*
Glow Colors — derived from Klein Blue
These create the atmospheric effects (hero glow, card highlights).
Using rgb() format allows easy opacity adjustments.
*/
--color-glow-primary: rgba(var(--color-klein-blue-rgb), 0.4);
--color-glow-secondary: rgba(var(--color-klein-blue-rgb), 0.25);
--color-glow-tertiary: rgba(var(--color-klein-blue-rgb), 0.15);
/* Background Colors — deep, rich with warm undertones */
--color-bg-primary: #0A0A0B;
--color-bg-secondary: #111113;
--color-bg-tertiary: #18181B;
--color-bg-elevated: #1F1F23;
--color-bg-card: #141416;
/* Text Colors — off-white hierarchy */
--color-text-primary: #FAFAFA;
--color-text-secondary: #A1A1AA;
--color-text-tertiary: #71717A;
--color-text-muted: #52525B;
/* Border Colors */
--color-border: rgba(255, 255, 255, 0.12);
--color-border-hover: rgba(255, 255, 255, 0.25);
--color-border-focus: rgba(59, 130, 246, 0.8);
/* Surface Colors */
--color-surface-glass: rgba(20, 20, 22, 0.6);
/* INDUSTRIAL THEME VARIABLES (Dark Default) */
--color-card-industrial: #141416;
--color-card-industrial-hover: #18181B;
--border-industrial: rgba(255, 255, 255, 0.05);
--border-industrial-hover: rgba(255, 255, 255, 0.15);
--color-icon-bg: rgba(255, 255, 255, 0.05);
--noise-blend-mode: overlay;
--noise-opacity: 0.04;
/* Chassis Spacing (Bento Grid) */
--chassis-gap-sm: 12px;
--chassis-gap-md: 16px;
--chassis-gap-lg: 24px;
/* Semantic Colors */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-error: #EF4444;
/*
=======================================================================
/*
TYPOGRAPHY — UNIVERSAL SWISS CONSISTENCY
========================================
Strict adherence to Univers/Helvetica stack for that cohesive
"engineered" look.
*/
--font-display: 'UniversTE20T', 'UnicodeT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-headline: var(--font-display);
--font-logo: 'Tw Cen MT Medium', 'Twentieth Century Pro', 'Tw Cen MT', 'Century Gothic', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Consistent branding */
--font-body: 'Linotype Univers W01', 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Berkeley Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
/*
Font Sizes — DRAMATIC SCALE FOR TEXT-FORWARD DESIGN
=====================================================
Inspired by Raycast, Linear, and Figma landing pages where
the headline is the undeniable main actor of the page.
Key insight: Those pages use headlines that are 64-88px,
taking up significant viewport space and commanding attention.
This scale is more aggressive than typical SaaS — because
great typography IS the design.
*/
--text-xs: 0.75rem;
/* 12px - micro text, labels */
--text-sm: 0.875rem;
/* 14px - small text, captions */
--text-base: 1rem;
/* 16px - body text */
--text-lg: 1.125rem;
/* 18px - large body, lead paragraphs */
--text-xl: 1.25rem;
/* 20px - subheadings */
--text-2xl: 1.5rem;
/* 24px - small titles */
--text-3xl: 2rem;
/* 32px - section intros */
--text-4xl: 2.5rem;
/* 40px - mobile headlines */
--text-5xl: 3.25rem;
/* 52px - tablet headlines */
--text-6xl: 4rem;
/* 64px - desktop headlines */
--text-7xl: 5rem;
/* 80px - hero headline (large screens) */
--text-8xl: 6rem;
/* 96px - ultra-large hero (XL screens) */
/*
Font Weights — Standardized Industrial
Pure, unpretentious weights.
*/
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Standard semi-bold */
--font-bold: 700;
/* Standard bold */
/*
=======================================================================
SPACING SCALE
=======================================================================
*/
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/*
=======================================================================
BORDERS & SHADOWS
=======================================================================
*/
/*
BORDER RADIUS SCALE — UNIFIED & CONSISTENT
===========================================
All border radiuses across the landing page use these variables.
This ensures visual consistency and makes future adjustments easy.
Usage guidelines:
- xs (4px): Very small elements like labels, tags, tiny inputs
- sm (6px): Small elements like nav links, sidebar items, inputs
- md (10px): Medium elements like buttons, URL bars, form fields
- lg (16px): Large containers like navigation bar, cards, logs
- xl (24px): Extra large cards, modals, hero elements
- 2xl (32px): Very large containers (rarely used)
- full (9999px): Pills, avatars, circular buttons
*/
/*
BORDER RADIUS SCALE — INDUSTRIAL & PRECISE
===========================================
Sharper corners for that "machined" look.
*/
--radius-xs: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 4px;
/* Standardizing on tight radii */
--radius-xl: 6px;
--radius-2xl: 8px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 60px var(--color-accent-glow);
/*
=======================================================================
TRANSITIONS — LINEAR-STYLE SNAPPY MOTION
=======================================================================
Linear's signature: extremely fast, direct motion curves.
Transitions occur in 100-200ms, with tighter easing that feels
responsive and efficient — not bouncy or springy.
Key insight: Linear uses nearly linear easing (hence the name!)
with very slight ease-out for micro-polish. This creates that
"snappy" feel that reinforces speed and efficiency.
*/
/*
LINEAR'S SIGNATURE EASING — tight, direct, no bounce.
Unlike iOS springy animations, Linear uses controlled deceleration.
*/
--ease-linear-out: cubic-bezier(0.2, 0, 0, 1);
--ease-linear-in: cubic-bezier(0.4, 0, 1, 1);
--ease-linear-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Legacy easing for backward compatibility */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/*
TRANSITION DURATIONS — Linear-style fast transitions.
Most interactions should complete in 100-200ms for that
"instant response" feel that Linear is known for.
*/
--transition-instant: 80ms var(--ease-linear-out);
/* Click feedback */
--transition-fast: 120ms var(--ease-linear-out);
/* Hovers, toggles */
--transition-base: 180ms var(--ease-linear-out);
/* Standard interactions */
--transition-slow: 300ms var(--ease-linear-out);
/* Larger movements */
/*
SPOTLIGHT/GLOW ANIMATION VARIABLES
==================================
For the illumination effects that reveal content on scroll.
*/
--glow-spread: 120px;
--glow-opacity: 0.15;
/* Layout */
--container-max: 1280px;
--container-narrow: 800px;
--nav-height: 72px;
/* Z-Index Scale — global stacking order */
--z-bg-canvas: -10;
--z-bg-effects: 1;
--z-noise-overlay: 50;
--z-nav: 1000;
--z-nav-dropdown: 1010;
--z-theme-toggle: 1020;
--z-notifications: 9000;
--z-page-loader: 9999;
--z-skip-link: 10000;
/*
=======================================================================
COLOR ALIASES — SEMANTIC SHORTCUTS FOR COMMON USE CASES
=======================================================================
These aliases provide semantic names for frequently used colors.
They ensure backward compatibility and make the CSS more readable
by providing context-appropriate names.
*/
--color-text: var(--color-text-primary);
--color-bg: var(--color-bg-primary);
--color-surface: var(--color-bg-secondary);
--color-text-on-accent: var(--color-bg-primary);
/*
=======================================================================
RESPONSIVE CONTAINER PADDING
=======================================================================
Consistent padding values for responsive layouts.
Used across all sections to ensure visual consistency.
*/
--container-padding-mobile: var(--space-4);
/* 16px — mobile phones */
--container-padding-tablet: var(--space-6);
/* 24px — tablets */
--container-padding-desktop: var(--space-8);
/* 32px — laptops */
--container-padding-wide: var(--space-12);
/* 48px — large monitors */
}
/*
=========================================================================
LIGHT THEME
=========================================================================
*/
/*
Light theme uses slightly darker accent blues for better contrast
against light backgrounds while maintaining the same color system.
*/
[data-theme="light"] {
--color-accent: #2563EB;
--color-accent-hover: #1D4ED8;
--color-accent-muted: rgba(37, 99, 235, 0.1);
--color-accent-glow: rgba(37, 99, 235, 0.2);
/*
Light mode glow — softer Klein Blue opacities.
Lower opacities work better against light backgrounds.
*/
--color-glow-primary: rgba(var(--color-klein-blue-rgb), 0.15);
--color-glow-secondary: rgba(var(--color-klein-blue-rgb), 0.1);
--color-glow-tertiary: rgba(var(--color-klein-blue-rgb), 0.06);
--color-bg-primary: #FAFAFA;
--color-bg-secondary: #F4F4F5;
--color-bg-tertiary: #E4E4E7;
--color-bg-elevated: #FFFFFF;
--color-bg-card: #FFFFFF;
--color-text-primary: #18181B;
--color-text-secondary: #52525B;
--color-text-tertiary: #71717A;
--color-text-muted: #A1A1AA;
--color-border: rgba(0, 0, 0, 0.08);
--color-border-hover: rgba(0, 0, 0, 0.16);
--color-border: rgba(0, 0, 0, 0.08);
--color-border-hover: rgba(0, 0, 0, 0.16);
--color-surface-glass: rgba(250, 250, 250, 0.9);
/* INDUSTRIAL THEME VARIABLES (Light Override) */
--color-card-industrial: #FFFFFF;
--color-card-industrial-hover: #F4F4F5;
--border-industrial: rgba(0, 0, 0, 0.08);
--border-industrial-hover: rgba(0, 0, 0, 0.16);
--color-icon-bg: rgba(0, 0, 0, 0.04);
--noise-blend-mode: normal;
/* Overlay can be weird on white, normal subtle is safer or multiply */
--noise-opacity: 0.02;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);
/* Light theme color aliases — same semantic names as dark theme */
--color-text: var(--color-text-primary);
--color-bg: var(--color-bg-primary);
--color-surface: var(--color-bg-secondary);
--color-text-on-accent: #FFFFFF;
}
/*
=========================================================================
LIGHT THEME — GLASSMORPHIC NAV OVERRIDES
=========================================================================
The floating nav bar needs specific styling for light mode to maintain
the premium glassmorphic feel while ensuring proper contrast and readability.
Light mode glassmorphism is trickier than dark mode because:
- We need more opacity to maintain contrast against varied backgrounds
- Shadows appear softer and need to be more pronounced
- Border needs to be visible without being too harsh
*/
[data-theme="light"] .nav__container {
/*
Light glass background — slightly more opaque than dark mode
for better contrast against bright content.
*/
background: rgba(250, 250, 250, 0.75);
/*
Darker border in light mode to catch the eye.
Still subtle but visible against the light background.
*/
border-color: rgba(0, 0, 0, 0.08);
/*
Softer shadows for light mode.
Light mode shadows should be lighter but cover more area
to create that floating effect without looking too heavy.
*/
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Light mode hover effects for hamburger */
[data-theme="light"] .nav__mobile-toggle:hover {
background: rgba(0, 0, 0, 0.05);
}
/*
=========================================================================
CSS RESET & BASE STYLES
=========================================================================
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
scroll-behavior: smooth;
scrollbar-gutter: stable;
scroll-padding-top: calc(var(--nav-height) + var(--space-8));
}
body {
font-family: var(--font-body);
/*
Slightly larger base font (16px) for better readability
against the dramatically larger headlines. The contrast
between headline and body should be clear but body text
should never feel cramped or difficult to read.
*/
font-size: var(--text-base);
font-weight: var(--font-regular);
line-height: 1.65;
/* Slightly more generous line-height */
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
/*
LINEAR-INSPIRED FONT RENDERING
==============================
These settings ensure crisp, refined text rendering:
- font-feature-settings: enables stylistic alternates for cleaner glyphs
- font-variation-settings: optical sizing for variable fonts
- text-rendering: prioritizes legibility over speed
*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv01", "ss03";
font-variation-settings: "opsz" auto;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ul,
ol {
list-style: none;
padding: 0;
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent-hover);
}
/*
TOUCH OPTIMIZATION — Mobile-first interaction improvements
==========================================================
- touch-action: manipulation removes 300ms tap delay on mobile
- -webkit-tap-highlight-color removes blue highlight flash on iOS/Android
Applied to all interactive elements for a more responsive, native-like feel.
*/
button,
a,
[role="button"],
input[type="button"],
input[type="submit"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/*
SCROLL MARGIN — Anchor link offset for fixed navigation
========================================================
When users click anchor links (like #features, #pricing), this ensures
the content isn't hidden behind the fixed navigation bar.
The offset = nav height + some breathing room for visual comfort.
*/
[id="features"],
[id="how-it-works"],
[id="pricing"],
[id="integrations"],
[id="access-gap"] {
scroll-margin-top: calc(var(--nav-height) + 2rem);
}
::selection {
background-color: var(--color-accent);
color: var(--color-bg-primary);
}
/*
=========================================================================
TYPOGRAPHY
=========================================================================
*/
/*
HEADLINES — BOLD, COMMANDING TYPOGRAPHY
========================================
Following the design philosophy of Raycast, Linear, and Figma:
text should be the main actor, not a supporting element.
Key principles:
- Bold weight for impact and confidence
- READABLE letter-spacing — tight but not suffocating
- Very tight line-height for large display text
- Each heading level is dramatically different in size
to create unmistakable hierarchy
DESIGN CRITIQUE FIX: Loosened letter-spacing from -0.03em to -0.015em.
The previous value was so tight the letters were "making out" —
creating legibility friction. This is a UX tool, so we shouldn't
start by assaulting eyes with claustrophobic typesetting.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: var(--font-medium);
/* Elegant Swiss Medium */
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--color-text-primary);
text-wrap: balance;
text-transform: lowercase;
}
/*
HEADLINE ACCENT TEXT — SECONDARY COLOR FOR EMPHASIS
===================================================
The accent portion of headlines uses a lighter color to
create visual interest and guide the eye. This is more
sophisticated than using color — it's typographic rhythm.
*/
h1 em,
h2 em,
h3 em,
.hero__headline-accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: var(--font-regular);
color: var(--color-text-secondary);
display: block;
margin-top: 0.5rem;
}
/*
H1 — Hero headlines, rarely used outside of hero section.
The hero has its own specific styling, so this is a fallback.
*/
h1 {
font-size: var(--text-6xl);
}
/*
H2 — SECTION HEADLINES: THE SECTION'S STAR
==========================================
Section headlines should feel substantial and commanding.
They mark major page divisions and need presence.
Using fluid typography for smooth scaling across devices.
*/
h2 {
/*
Fluid: scales from 32px (mobile) to 48px (large desktop).
This is smaller than h1 but still commands attention.
*/
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
line-height: 1.1;
}
/* Even larger on big screens for that text-forward impact */
@media (min-width: 1200px) {
h2 {
font-size: clamp(2.5rem, 3.5vw, 3.5rem);
line-height: 1.05;
}
}
/*
H3 — CARD TITLES AND SUBSECTIONS
================================
These are used within feature cards, pricing cards, etc.
Should be readable and clear but not compete with h2.
*/
h3 {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
/* Slightly lighter than h1/h2 */
line-height: 1.2;
letter-spacing: -0.02em;
/* Less aggressive tracking */
}
@media (min-width: 1200px) {
h3 {
font-size: var(--text-2xl);
}
}
p {
color: var(--color-text-secondary);
}
strong {
color: var(--color-text-primary);
font-weight: var(--font-semibold);
}
/*
=========================================================================
BUTTON STYLES
=========================================================================
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
text-transform: lowercase;
/* Lowercase Buttons */
border: none;
/*
Using --radius-lg to match the navigation bar's border radius.
This creates visual consistency across all interactive elements.
*/
border-radius: var(--radius-lg);
cursor: pointer;
/*
LINEAR-STYLE TRANSITIONS — fast and direct (no bounce).
Using separate transitions for different properties:
- Transform: instant (80ms) for tactile click feedback
- Colors/shadows: fast (120ms) for hover states
*/
transition:
transform var(--transition-instant),
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
color var(--transition-fast);
}
/* Primary button — solid fill with subtle glow on hover */
.btn--primary {
background: var(--color-text-primary);
color: var(--color-bg-primary);
box-shadow: var(--shadow-md);
}
/*
LINEAR-STYLE HOVER — subtle lift with soft glow.
The lift is smaller (1px vs 2px) for more refined feel.
Glow is reduced for subtlety (Linear prefers restraint).
*/
.btn--primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 255, 255, 0.1);
color: var(--color-bg-primary);
}
/*
LINEAR-STYLE TACTILE PRESS — scale down + slight push.
Creates satisfying "click" feel. Happens FAST (80ms).
*/
.btn--primary:active {
transform: translateY(1px) scale(0.98);
box-shadow: var(--shadow-sm);
}
/*
SECONDARY BUTTON — STRONGER VISUAL HIERARCHY
=============================================
Thickened the border from 1px to 1.5px so it doesn't
disappear next to the heavy primary button.
The previous thin stroke was too weak — now it has
proper visual weight to compete with the filled button.
*/
/*
OIL BRUSH CANVAS — PROCEDURAL BACKGROUND
=========================================
*/
.oil-brush-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: var(--z-bg-canvas);
pointer-events: none;
}
/*
NOISE OVERLAY — INDUSTRIAL TEXTURE
==================================
*/
.noise-overlay {
position: fixed;
inset: 0;
z-index: var(--z-noise-overlay);
pointer-events: none;
opacity: var(--noise-opacity);
mix-blend-mode: var(--noise-blend-mode);
}
/*
SECONDARY BUTTON — INDUSTRIAL
*/
.btn--secondary {
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border-hover);
box-shadow: none;
}
.btn--secondary:hover {
border-color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.02);
}
/* LINEAR-STYLE HOVER — subtle background fill */
.btn--secondary:hover {
background: var(--color-bg-tertiary);
border-color: var(--color-text-tertiary);
/* Even more visible on hover */
color: var(--color-text-primary);
}
/* LINEAR-STYLE TACTILE PRESS — same as primary for consistency */
.btn--secondary:active {
transform: translateY(1px) scale(0.98);
}
/*
LARGE BUTTON — HERO CTA SCALE
=============================
With dramatically larger headlines, the hero CTAs need
to be proportionally substantial. They should feel like
a confident next step, not a tiny afterthought.
*/
.btn--large {
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
}
@media (min-width: 1200px) {
.btn--large {
/*
Generous padding creates a substantial button that
balances against the massive headlines above.
*/
padding: var(--space-5) var(--space-10);
font-size: var(--text-lg);
}
}
/* Extra-large screens — even more substantial CTA */
@media (min-width: 1440px) {
.btn--large {
padding: 1.25rem 3rem;
/* 20px 48px — very substantial */
}
}
/* Nav button */
/*
Navigation CTA button — enhanced for glassmorphic nav bar.
The button should feel premium but not overpower the minimal nav design.
Raycast uses a clean, solid button with subtle depth.
*/
.btn--nav {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
/*
BORDER-RADIUS MATCHED TO HERO BUTTON VISUAL APPEARANCE
======================================================
Using --radius-md (10px) instead of --radius-lg (16px) because
the smaller nav button size makes the same radius value appear
proportionally more rounded (almost pill-shaped).
By using a smaller radius on the smaller button, we achieve
VISUAL consistency with the larger hero button (.btn--large),
which uses --radius-lg (16px) from the base .btn class.
This creates matching visual proportions across different
button sizes — both appear similarly rounded to the eye.
*/
border-radius: var(--radius-md);
/*
Slightly reduce shadow compared to other primary buttons —
within the glassmorphic nav, we want subtle depth, not dramatic.
*/
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* LINEAR-STYLE TRANSITIONS — fast and direct */
transition:
transform var(--transition-instant),
box-shadow var(--transition-fast),
background-color var(--transition-fast);
}
/* Hover state for nav button — subtle lift without being too dramatic */
.btn--nav:hover {
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* LINEAR-STYLE TACTILE PRESS for nav button */
.btn--nav:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn__arrow {
width: 18px;
height: 18px;
transition: transform var(--transition-base);
}
.btn:hover .btn__arrow {
transform: translateX(4px);
}
.btn__icon {
width: 14px;
height: 14px;
}
/*
=========================================================================
NAVIGATION — RAYCAST-INSPIRED GLASSMORPHIC FLOATING NAV
=========================================================================
Inspired by Raycast's beautiful floating pill-shaped navigation bar.
Key characteristics:
- Floating design that doesn't touch edges (creates visual breathing room)
- Heavy glassmorphism with strong blur and semi-transparent dark background
- Pill-shaped with generous border-radius
- Subtle border that catches light, creating a soft glow effect
- Compact and clean with perfect typographic hierarchy
This creates a "command bar" aesthetic — feels like a premium macOS app UI.
*/
/*
Outer nav wrapper — provides the floating positioning context.
We use this to center the nav bar without affecting the inner layout.
*/
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
/*
Add padding around the nav so it "floats" away from edges.
This creates that premium Raycast aesthetic where the nav
appears as a floating island rather than a fixed toolbar.
*/
padding: var(--space-4) var(--space-6);
/*
Remove the old background — we'll apply it to __container instead
so the glassmorphism only applies to the actual nav bar, not the full width.
*/
background: transparent;
/*
Smooth transitions for scroll-based changes.
FIXED: List properties explicitly instead of 'all' for better performance.
*/
transition: background-color, border-color, box-shadow var(--transition-base);
}
/*
The actual nav bar — this is where the magic happens.
Raycast's signature look: dark glass pill floating over content.
*/
.nav__container {
display: flex;
align-items: center;
/*
CRITICAL: Position relative is required for the mobile hamburger menu.
The dropdown menu uses position: absolute and needs this container
as its positioning reference.
*/
position: relative;
/*
Slightly narrower than content width (1280px - 80px = 1200px).
This creates the subtle inset that makes the floating nav
feel distinct from the content while still being substantial.
Like Raycast — the nav is wide but with visible breathing room.
*/
max-width: calc(var(--container-max) - 80px);
margin: 0 auto;
/*
Generous horizontal padding for comfortable breathing room.
*/
padding: var(--space-3) var(--space-6);
/*
Height is slightly smaller than traditional nav to feel more
compact and app-like rather than website-like.
*/
height: auto;
min-height: 56px;
/* Balanced gap between elements */
gap: var(--space-8);
/*
=======================================================================
GLASSMORPHISM — THE RAYCAST SIGNATURE LOOK
=======================================================================
Multiple layered techniques create the rich glass effect:
*/
/*
1. Semi-transparent dark background.
Using a slightly warmer dark than pure black for sophistication.
The alpha value (0.75) allows enough content to show through
while maintaining excellent text readability.
*/
background: rgba(10, 10, 11, 0.75);
/*
2. Heavy backdrop blur — this is what makes it feel like glass.
Raycast uses a strong blur (around 24px) for that frosted look.
The blur makes the content behind appear soft and dreamy.
*/
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
/*
3. Pill-shaped border-radius — Raycast's signature.
Full radius creates a capsule shape that feels modern and friendly.
Using --radius-lg for consistency with large container elements.
*/
border-radius: var(--radius-lg);
/*
4. Subtle border that catches light.
The gradient border creates a soft "glow" at the top,
simulating light hitting the edge of a glass surface.
This is what makes it feel 3D and tactile.
*/
border: 1px solid rgba(255, 255, 255, 0.08);
/*
5. Subtle box shadow for depth and floating effect.
Multiple shadows create layered depth:
- First shadow: soft ambient shadow (makes it float)
- Second shadow: tight dark shadow (grounds it)
*/
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.3),
0 1px 3px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/*
Logo container — anchored to the left side.
flex-shrink: 0 prevents the logo from being compressed
when space gets tight on smaller screens.
*/
.nav__brand {
flex-shrink: 0;
}
/*
LOGO TYPOGRAPHY — BOLDER, MORE CONFIDENT
========================================
Increased size by ~20% to anchor the top-left with confidence.
Previously felt too small and "placeholder-like" — now it
commands attention as a bold AI solution brand should.
Using font-size var(--text-xl) instead of var(--text-lg),
and adding more letter-spacing for that premium tech feel.
*/
.nav__logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-logo);
font-size: calc(var(--text-xl) + 0.32rem);
font-weight: var(--font-medium);
font-style: normal;
color: var(--color-text-primary);
letter-spacing: -0.02em;
text-transform: lowercase;
transition: color var(--transition-fast);
}
/* Logo mark — PNG icon next to text */
.logo-mark {
height: 22px;
width: auto;
display: block;
filter: invert(1); /* Dark mode default — invert black mark to white */
}
[data-theme="light"] .logo-mark {
filter: none; /* Light mode — keep original black mark */
}
/* Logo hover — subtle brightness increase */
.nav__logo:hover {
color: var(--color-text-primary);
}
/*
The iconic dot after "Unblo" — uses the accent color
to add a pop of brand identity within the minimal design.
*/
.nav__logo-dot {
color: var(--color-accent);
}
/*
Navigation links container.
margin-left: auto pushes the links to the center/right,
creating the classic "logo left, links right" pattern.
*/
.nav__links {
display: flex;
align-items: center;
gap: var(--space-5);
margin-left: auto;
}
/*
Individual navigation links.
Clean, understated styling that doesn't compete for attention.
The focus is on readability and clear hover states.
*/
.nav__link {
font-size: var(--text-sm);
font-weight: var(--font-regular);
/* Lighter for elegance */
color: var(--color-text-secondary);
transition: color var(--transition-fast);
text-transform: lowercase;
/* Consistent lowercase */
/*
Subtle padding for better touch targets.
Even though this is primarily desktop, accessible
hit areas are always good practice.
*/
padding: var(--space-2) var(--space-1);
/*
Border-radius for potential background on hover.
We're not using it now but it's ready if we want
to add a subtle hover background later.
Using --radius-sm for consistency with small interactive elements.
*/
border-radius: var(--radius-sm);
}
/* Hover state — simple color transition to primary */
.nav__link:hover {
color: var(--color-text-primary);
}
/*
"Docs" link — SAME AS OTHER NAV ITEMS
=====================================
No special highlighting needed. Keeps the nav clean and uniform.
Inherits the same color as other nav links.
*/
.nav__link--docs {
color: var(--color-text-secondary);
/* Same as other nav links */
}
.nav__link--docs:hover {
color: var(--color-text-primary);
/* Same hover as other nav links */
}
/*
Actions container (Sign In + CTA button).
Separated from nav links with margin-left spacing.
flex-shrink: 0 ensures buttons maintain their size.
*/
.nav__actions {
display: flex;
align-items: center;
gap: var(--space-3);
margin-left: var(--space-4);
flex-shrink: 0;
/*
Add extra left padding to accommodate the divider line.
This creates breathing room between the divider and "Sign In".
*/
padding-left: var(--space-5);
/*
Position relative is needed so the ::before pseudo-element
(the vertical divider) can be positioned correctly.
*/
position: relative;
}
/*
=========================================================================
NAVIGATION DIVIDER — VISUAL SEPARATOR
=========================================================================
A subtle vertical line that separates the main navigation links
(Product, Resources, Pricing) from the auth actions (Sign In, Start Free).
Design Rationale:
- Creates clear visual grouping: navigation on left, auth on right
- Uses a subtle opacity so it doesn't compete with content
- Height is constrained to feel balanced with text elements
- Smooth transition on hover allows the entire nav to feel cohesive
*/
.nav__actions::before {
content: '';
/*
Position to the left edge of .nav__actions.
The element is 1px wide and vertically centered.
*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
/*
Height is set to 20px for a compact, elegant appearance.
This is roughly the height of the nav text, creating visual balance.
*/
height: 20px;
width: 1px;
/*
Subtle divider color — uses the text muted color with low opacity.
This ensures it's visible but doesn't draw attention away from
the actual navigation items.
*/
background: var(--color-text-muted);
opacity: 0.3;
/*
Rounded ends for a softer, more polished appearance.
Even at 1px, the rounded caps add subtle refinement.
*/
border-radius: 1px;
}
/*
Sign In link — secondary action, subtle styling.
Doesn't draw attention away from the primary CTA.
*/
.nav__signin {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
padding: var(--space-2) var(--space-3);
transition: color var(--transition-fast);
/* Using --radius-sm for consistency with other small interactive nav elements */
border-radius: var(--radius-sm);
text-transform: lowercase;
}
.nav__signin:hover {
color: var(--color-text-primary);
}
/*
=======================================================================
NAVIGATION DROPDOWN MENUS — LINEAR-INSPIRED MEGA MENUS
=======================================================================
These mega menus reveal rich content on hover, providing users with a
clear overview of Unblo's capabilities and resources.
Design Principles:
1. Glassmorphism matching the nav bar for visual consistency
2. Two-column layout for organized content grouping
3. Smooth, subtle animations that feel intentional
4. Clear visual hierarchy with labels, titles, and descriptions
Inspired by Linear's elegant product navigation.
*/
/*
Dropdown wrapper — provides the hover trigger area.
Position relative creates the coordinate system for the
absolutely-positioned dropdown panel.
*/
.nav__dropdown {
position: relative;
}
/*
Dropdown trigger button — looks like a nav link but is actually a button.
This ensures proper accessibility (buttons are for actions/menus,
links are for navigation).
*/
.nav__dropdown-trigger {
/* Inherit styling from .nav__link */
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
/* Reset button defaults */
background: none;
border: none;
cursor: pointer;
/* Match nav link padding */
padding: var(--space-2) var(--space-1);
border-radius: var(--radius-sm);
/* Flexbox for arrow alignment */
display: flex;
align-items: center;
gap: var(--space-1);
/* Smooth hover transition */
transition: color var(--transition-fast);
}
.nav__dropdown-trigger:hover {
color: var(--color-text-primary);
}
/*
Dropdown arrow — rotates when open.
Small, subtle chevron that indicates expandable content.
*/
.nav__dropdown-arrow {
width: 12px;
height: 12px;
opacity: 0.6;
transition: transform var(--transition-base), opacity var(--transition-fast);
}
.nav__dropdown:hover .nav__dropdown-arrow,
.nav__dropdown-trigger:focus .nav__dropdown-arrow {
opacity: 1;
transform: rotate(180deg);
}
/*
Dropdown panel — the mega menu container.
Positioned below and centered relative to the trigger.
Uses absolute positioning for overlay behavior.
*/
.nav__dropdown-panel {
/* Position absolutely below the trigger */
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
/*
Add top padding to create hover "bridge" between trigger and panel.
This prevents the menu from closing when moving cursor to it.
*/
padding-top: var(--space-3);
/* Initially hidden */
opacity: 0;
visibility: hidden;
pointer-events: none;
/* Smooth reveal animation */
transition:
opacity var(--transition-base),
visibility var(--transition-base),
transform var(--transition-base);
/* Start slightly up, animate down */
transform: translateX(-50%) translateY(-8px);
/* High z-index to appear above content */
z-index: var(--z-nav-dropdown);
}
/*
Show dropdown on hover or focus-within.
The focus-within pseudo-class enables keyboard navigation.
*/
.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/*
The dropdown content container.
Uses glassmorphism matching the navigation bar.
Two-column grid for organized content layout.
*/
.dropdown {
/* Generous width for comfortable content reading */
min-width: 520px;
/* Two-column grid layout */
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-1);
/* Comfortable internal padding */
padding: var(--space-4);
/*
Glassmorphism — matching nav bar aesthetic.
High opacity (0.98) for excellent readability while maintaining
subtle depth. The blur still provides a soft edge effect.
*/
background: rgba(10, 10, 11, 0.98);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
/* Rounded corners matching nav bar */
border-radius: var(--radius-lg);
/* Subtle border for depth */
border: 1px solid rgba(255, 255, 255, 0.08);
/* Shadow for floating effect */
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
0 4px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/*
Dropdown column — groups related items.
Contains label + list of items.
*/
.dropdown__column {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/*
Column label — category header.
Small, uppercase, muted — doesn't compete with items.
*/
.dropdown__label {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: var(--space-2) var(--space-3);
padding-bottom: var(--space-3);
}
/*
Individual dropdown item — link with icon + text.
Hover reveals background highlight.
*/
.dropdown__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
text-decoration: none;
}
.dropdown__item:hover {
background: rgba(255, 255, 255, 0.05);
}
/*
Item icon container — provides consistent sizing.
The icon adds visual interest and quick recognition.
*/
.dropdown__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
opacity: 0.7;
transition: opacity var(--transition-fast), color var(--transition-fast);
}
.dropdown__icon svg {
width: 100%;
height: 100%;
}
.dropdown__item:hover .dropdown__icon {
opacity: 1;
color: var(--color-accent);
}
/*
Item content — title + description.
Title is prominent, description is supporting.
*/
.dropdown__content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
/* Enables text truncation if needed */
}
.dropdown__title {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-primary);
transition: color var(--transition-fast);
}
.dropdown__item:hover .dropdown__title {
color: var(--color-text-primary);
}
.dropdown__desc {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
line-height: 1.4;
}
/*
Dropdown footer — spans full width for highlight items.
Used for featured announcements like "New" features.
*/
.dropdown__footer {
grid-column: 1 / -1;
/* Span all columns */
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/*
Highlight item — featured announcement.
Styled differently to draw attention.
*/
.dropdown__highlight {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
text-decoration: none;
transition: background var(--transition-fast);
}
.dropdown__highlight:hover {
background: rgba(255, 255, 255, 0.05);
}
/*
Badge — "New" or "Guide" label.
Accent color to draw attention.
*/
.dropdown__highlight-badge {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-on-accent);
background: var(--color-accent);
padding: 2px 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.dropdown__highlight-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
flex: 1;
}
.dropdown__highlight-arrow {
width: 12px;
height: 12px;
color: var(--color-text-tertiary);
flex-shrink: 0;
transition: transform var(--transition-fast), color var(--transition-fast);
}
.dropdown__highlight:hover .dropdown__highlight-arrow {
transform: translate(2px, -2px);
color: var(--color-accent);
}
/*
LIGHT MODE DROPDOWN OVERRIDES
==============================
Adjust glassmorphism and colors for light theme.
*/
[data-theme="light"] .dropdown {
/* High opacity (0.98) for excellent readability in light mode */
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 0, 0, 0.1);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.18),
0 4px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .dropdown__item:hover {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .dropdown__highlight:hover {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .dropdown__footer {
border-top-color: rgba(0, 0, 0, 0.06);
}
/*
MOBILE DROPDOWN BEHAVIOR
========================
On mobile, dropdowns become accordion-style.
Triggered by click/tap instead of hover.
*/
@media (max-width: 768px) {
/* Hide dropdown on mobile — handled by mobile menu */
.nav__dropdown-panel {
display: none;
}
.nav__dropdown-arrow {
display: none;
}
.nav__dropdown-trigger {
/* Make it look like a regular link on mobile */
pointer-events: none;
}
}
/*
Mobile toggle (hamburger icon).
Hidden by default, shown on mobile via media query.
The hamburger has a beautiful animation when toggled:
- Top line rotates 45° clockwise and moves down
- Middle line fades out
- Bottom line rotates -45° counterclockwise and moves up
- Together they form an "X" close icon
*/
.nav__mobile-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
/*
Fixed dimensions create a consistent touch target.
The 44px minimum is Apple's accessibility guideline.
*/
width: 44px;
height: 44px;
padding: var(--space-2);
/*
Transparent background with subtle hover state.
This makes the hamburger feel interactive.
*/
background: transparent;
border: none;
/* Using --radius-sm for consistency with other small interactive elements */
border-radius: var(--radius-sm);
cursor: pointer;
/* Smooth transitions for hover and focus states */
transition: background var(--transition-fast);
}
/* Hover state — subtle background reveal */
.nav__mobile-toggle:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Focus state for accessibility */
.nav__mobile-toggle:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Individual hamburger bars */
.nav__mobile-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--color-text-secondary);
/* Using --radius-xs for consistency with micro elements */
border-radius: var(--radius-xs);
/*
Transform origin centered for proper rotation animation.
Transitions are set for smooth animation.
*/
transform-origin: center;
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease-out,
background 0.2s ease-out;
}
/* Hover state brightens the bars */
.nav__mobile-toggle:hover span {
background: var(--color-text-primary);
}
/*
========================================
HAMBURGER → X ANIMATION (is-active state)
========================================
When the menu is open, the hamburger morphs into an X icon.
*/
/* Top bar: rotate 45° and translate down */
.nav__mobile-toggle.is-active span:first-child {
transform: translateY(7px) rotate(45deg);
}
/* Middle bar: fade out completely */
.nav__mobile-toggle.is-active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
/* Bottom bar: rotate -45° and translate up */
.nav__mobile-toggle.is-active span:last-child {
transform: translateY(-7px) rotate(-45deg);
}
/*
=======================================================================
RESPONSIVE ADJUSTMENTS — MAINTAINING THE RAYCAST AESTHETIC
=======================================================================
The floating nav works great across screen sizes, but we need
to adjust spacing and max-widths to keep it feeling balanced.
*/
/* Tablet — slightly tighter spacing */
@media (max-width: 1024px) and (min-width: 769px) {
.nav {
padding: var(--space-3) var(--space-5);
}
.nav__container {
padding: var(--space-3) var(--space-5);
gap: var(--space-5);
/* Slightly inset from edges on tablet */
max-width: calc(100% - 40px);
}
.nav__links {
gap: var(--space-4);
}
.nav__actions {
gap: var(--space-3);
margin-left: var(--space-4);
/*
Adjust padding to match smaller margin at this breakpoint.
Keeps the divider proportionally spaced.
*/
padding-left: var(--space-4);
}
}
/*
Large screens — slightly narrower than content for that
subtle floating inset effect.
*/
@media (min-width: 1200px) {
.nav {
padding: var(--space-5) var(--space-8);
}
.nav__container {
padding: var(--space-3) var(--space-8);
gap: var(--space-8);
/* Slightly narrower than content (1280px - 80px = 1200px) */
max-width: calc(var(--container-max) - 80px);
}
.nav__links {
gap: var(--space-6);
}
.nav__actions {
gap: var(--space-4);
margin-left: var(--space-6);
/*
More generous padding on large screens for breathing room.
The divider gets more prominence with extra space.
*/
padding-left: var(--space-6);
}
}
/*
=========================================================================
HERO SECTION — DRAMATIC & ATMOSPHERIC
=========================================================================
Inspired by Intercom Fin's warm aurora glow and Linear's product focus.
The goal is to capture attention with drama while maintaining clarity.
*/
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
/* Tighter padding - nav height + minimal breathing room */
padding: calc(var(--nav-height) + var(--space-4)) 0 var(--space-4);
overflow: hidden;
}
@media (min-width: 1200px) {
.hero {
/* Still compact at larger screens */
padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-4);
}
}
/*
Background effects — creating the dramatic atmosphere
Using multiple layered gradients for depth (like Intercom's aurora)
*/
.hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
/* Subtle grain texture for warmth */
/* Hero grain handled by global .noise-overlay */
.hero__grain {
display: none;
}
/*
PRIMARY GLOW — INTERNATIONAL KLEIN BLUE (#002FA7)
==================================================
A sophisticated, deep blue glow that feels premium
and cohesive. Much cleaner than the warm amber gradient.
Klein Blue is artistic, confident, and memorable —
perfect for a bold AI product.
*/
/*
PRIMARY GLOW — NEUTRALIZED FOR INDUSTRIAL LOOK
*/
.hero__glow--primary {
display: none;
}
/*
SECONDARY GLOW — SUBTLE ACCENT
==============================
A softer secondary glow that adds depth without
competing with the primary glow.
*/
.hero__glow--secondary {
display: none;
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.8;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.05);
}
}
.hero__glow--secondary {
animation: glowPulse2 10s ease-in-out infinite 2s;
}
@keyframes glowPulse2 {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 0.9;
}
}
/*
=========================================================================
HERO CONTAINER — REFINED TWO-COLUMN LAYOUT SYSTEM
=========================================================================
DESIGN PRINCIPLES:
==================
1. TEXT IS ALWAYS THE STAR — The headline/copy column consistently takes
priority across all breakpoints. The showcase supports, never competes.
2. CONSISTENT PROPORTIONS — Instead of flip-flopping ratios, we use a
stable ~55:45 (or 60:40) split that scales predictably.
3. FLUID GAPS — Using clamp() for gaps creates smooth transitions instead
of jarring jumps between breakpoints.
4. INTRINSIC SIZING — The showcase column uses min-content/auto sizing
where possible, letting the content determine its natural width.
5. VERTICAL ALIGNMENT — Using align-items: start with padding-top on the
showcase creates visual balance when content heights differ.
LAYOUT MATH:
============
- Mobile (<768px): Single column, content stacked above showcase
- Tablet (768-1024px): 55/45 split, content on left
- Desktop (1024-1440px): 50/50 split, balanced but text optically heavier
- Large (1440px+): 45/55 split, showcase gets more room on big screens
The key insight: As screens get larger, users sit further back, so the
showcase can (and should) take more visual real estate to remain impactful.
*/
.hero__container {
position: relative;
display: grid;
/*
MOBILE-FIRST: Single column layout
Content stacks above showcase for natural reading order.
*/
grid-template-columns: 1fr;
grid-template-rows: auto auto;
/*
FLUID GAP: Smoothly scales from 2.5rem (40px) at small sizes
to 4rem (64px) at large sizes. Eliminates jarring jumps.
*/
gap: clamp(2.5rem, 4vw, 4rem);
/*
ALIGN START: Keeps both columns pinned to top, preventing
awkward vertical centering when heights differ significantly.
The hero section itself handles overall vertical centering.
*/
align-items: start;
/* Full width with max constraint */
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
/*
FLUID PADDING: Responsive container padding that scales smoothly.
Minimum 1rem (16px) on mobile, max 3rem (48px) on desktop.
*/
padding: 0 clamp(1rem, 4vw, 3rem);
}
/*
TABLET BREAKPOINT (768px+)
==========================
Transition to two-column layout.
Text column is slightly wider (55/45) to maintain reading hierarchy.
*/
@media (min-width: 768px) {
.hero__container {
/*
CONSISTENT RATIO: 55/45 split keeps text as the star.
Using minmax() ensures the showcase never gets too cramped.
*/
grid-template-columns: 1.1fr minmax(300px, 0.9fr);
grid-template-rows: 1fr;
/*
CENTER ALIGNMENT: At this breakpoint, content heights are
similar enough that centering looks balanced.
*/
align-items: center;
}
}
/*
DESKTOP BREAKPOINT (1024px+)
============================
More balanced layout as screens get larger.
50/50 split, but text side uses left-alignment for optical weight.
*/
@media (min-width: 1024px) {
.hero__container {
/*
BALANCED 50/50: Equal columns, but the text naturally
appears "heavier" due to content density vs. visual.
*/
grid-template-columns: 1fr 1fr;
/* Increased gap for breathing room on larger screens */
gap: clamp(3rem, 5vw, 5rem);
}
}
/*
LARGE DESKTOP BREAKPOINT (1280px+)
==================================
Showcase gets slightly more room to really shine.
The 45/55 split works because users sit further from large monitors.
*/
@media (min-width: 1280px) {
.hero__container {
/*
SHOWCASE-FORWARD: At large sizes, the interactive demo
deserves more visual real estate to make an impact.
*/
grid-template-columns: minmax(400px, 0.9fr) 1.1fr;
/* Generous gap prevents elements from feeling cramped */
gap: 4rem;
}
}
/*
EXTRA LARGE BREAKPOINT (1440px+)
================================
Maximum container width with proportional spacing.
*/
@media (min-width: 1440px) {
.hero__container {
/*
SHOWCASE EMPHASIS: On very large screens, the showcase
panel is the hero — it needs room to breathe.
*/
grid-template-columns: minmax(420px, 0.85fr) 1.15fr;
gap: 5rem;
/* Slightly more padding for luxury feel */
padding: 0 clamp(2rem, 4vw, 4rem);
}
}
/*
ULTRA-WIDE BREAKPOINT (1600px+)
===============================
Cap the container width and add generous spacing.
*/
@media (min-width: 1600px) {
.hero__container {
/* Prevent layout from becoming too wide */
max-width: 1480px;
/* Maximum gap for ultra-wide displays */
gap: 6rem;
}
}
/*
=========================================================================
HERO CONTENT — TEXT COLUMN LAYOUT
=========================================================================
The content column contains the headline, subheadline, CTAs, and trust line.
It needs careful vertical rhythm and responsive width constraints.
LAYOUT STRATEGY:
- Mobile: Centered text with max-width to maintain line length
- Tablet+: Left-aligned, fills the column with optical margins
- The content uses flexbox for internal vertical rhythm
*/
.hero__content {
/*
LINEAR-STYLE ENTRANCE ANIMATION
================================
Fast, direct animation that snaps content into place.
500ms duration feels responsive without being jarring.
*/
animation: fadeInUp 0.5s var(--ease-linear-out);
/*
FLEXBOX FOR VERTICAL RHYTHM
===========================
Using flex-direction: column allows us to control spacing
between headline, subheadline, CTAs, and trust line precisely.
*/
display: flex;
flex-direction: column;
/*
MOBILE: Center-aligned with constrained width.
Max-width of 540px ensures comfortable line length for reading.
*/
align-items: center;
text-align: center;
width: 100%;
max-width: 540px;
margin: 0 auto;
/*
VERTICAL PADDING: Adds breathing room when stacked on mobile.
The showcase appears below, so we need some bottom space.
*/
padding-bottom: var(--space-4);
}
/*
TABLET BREAKPOINT (768px+)
==========================
Switch to left-aligned layout for the two-column grid.
*/
@media (min-width: 768px) {
.hero__content {
/*
LEFT ALIGNMENT: Natural reading direction in two-column layout.
Text should anchor to the left edge of its column.
*/
align-items: flex-start;
text-align: left;
/*
FILL THE COLUMN: Remove max-width constraint so the text
can breathe within its grid column.
*/
max-width: 100%;
margin: 0;
/* No bottom padding needed in side-by-side layout */
padding-bottom: 0;
/*
SLIGHT RIGHT PADDING: Creates optical margin between
text and showcase columns without using grid gap alone.
*/
padding-right: var(--space-4);
}
}
/*
DESKTOP BREAKPOINT (1024px+)
============================
Slightly more padding between columns for breathing room.
*/
@media (min-width: 1024px) {
.hero__content {
/*
INCREASED OPTICAL MARGIN: More space between text and
showcase creates a more luxurious, spacious feel.
*/
padding-right: var(--space-6);
}
}
/*
LARGE DESKTOP (1280px+)
=======================
Generous spacing for large monitors.
*/
@media (min-width: 1280px) {
.hero__content {
/*
MAX WIDTH RETURNS: On very large screens, we reintroduce
a max-width to prevent uncomfortably long line lengths.
This is a typography best practice (45-75 characters per line).
*/
max-width: 580px;
padding-right: var(--space-8);
}
}
/*
LINEAR-STYLE FADE-IN ANIMATION
==============================
Key differences from typical fade-in:
- Shorter distance (20px vs 30px) — feels more controlled
- Faster duration (handled in animation declaration)
- Direct easing (no overshoot or bounce)
*/
@keyframes fadeInUp {
from {
opacity: 0;
/*
SCALE-AWARE ENTRANCE:
We include a CSS variable-driven scale here so any component
can stay scaled even while this animation runs. Without this,
the animation's transform would overwrite scale values and the
showcase would appear "wrong size" after the entrance.
*/
transform: translateY(20px) scale(var(--fade-scale, 1));
}
to {
opacity: 1;
/*
KEEP SCALE CONSISTENT:
Using the same scale variable in the final keyframe ensures
the element ends at the intended size for its breakpoint.
*/
transform: translateY(0) scale(var(--fade-scale, 1));
}
}
/* Small intro text above headline */
.hero__headline-small {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-tertiary);
margin-bottom: var(--space-4);
}
@media (min-width: 1200px) {
.hero__headline-small {
font-size: var(--text-sm);
margin-bottom: var(--space-5);
}
}
/*
MAIN HEADLINE — THE STAR OF THE SHOW
=====================================
Inspired by Raycast, Linear, and Figma landing pages where
the headline dominates the viewport and commands immediate attention.
Key design decisions:
- DRAMATICALLY larger font sizes (64-80px on desktop)
- READABLE letter-spacing — tight but not suffocating
- Comfortable line-height so text doesn't feel cramped
- Bold weight for maximum visual impact
DESIGN CRITIQUE FIX: Loosened letter-spacing from -0.03em to -0.02em.
The headline should command attention through SIZE and WEIGHT,
not through cramming letters together. Legibility > density.
*/
.hero__headline {
/*
Fluid typography: scales from 36px (mobile) to 56px (large desktop).
Reduced from previous sizes to be more proportional with the layout.
Still impactful but leaves room for other content in the viewport.
*/
font-size: clamp(2.25rem, 3.5vw + 0.75rem, 3.5rem);
font-weight: var(--font-bold);
/* Bolder than before for impact */
line-height: 1.1;
/* Comfortable breathing room */
letter-spacing: -0.02em;
/* Tight but readable — letters can breathe */
color: var(--color-text-primary);
text-wrap: balance;
/* Prevents awkward line breaks */
margin-bottom: var(--space-6);
/*
Subtle text-shadow adds depth and makes the headline
"lift" off the page slightly. Very subtle — almost imperceptible.
*/
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}
/*
Large screens (14-16" laptops) — push the headline even bigger.
At this screen size, we have room for truly commanding typography.
*/
@media (min-width: 1200px) {
.hero__headline {
/*
At 1200px+, headline is larger but still proportional.
Reduced from 80px max to 64px max for better balance.
This keeps the headline impactful without dominating the viewport.
*/
font-size: clamp(2.75rem, 3vw + 1rem, 4rem);
line-height: 1.08;
/* Comfortable, not cramped */
letter-spacing: -0.02em;
/* Readable, not suffocating */
margin-bottom: var(--space-6);
}
}
/*
Extra-large screens (1440px+ external monitors) — go even bigger.
The headline should feel like it owns the viewport.
*/
@media (min-width: 1440px) {
.hero__headline {
font-size: clamp(3rem, 3.5vw + 1rem, 4.5rem);
}
}
/*
SUBHEADLINE — SUPPORTING ACTOR, NOT BACKGROUND EXTRA
=====================================================
The subheadline provides context for the bold headline.
It should be readable and comfortable, but not compete
with the headline's dominance.
Proportions: roughly 25-30% the size of the headline.
This creates clear visual hierarchy while keeping the
supporting text substantial enough to read comfortably.
*/
.hero__subheadline {
/*
TWO-LINE SUBHEADLINE — ELEGANT & SCANNABLE
==========================================
Serif body text for a refined, editorial feel.
The two lines (separated by
) each convey one thought:
Line 1: What happens (AI testers work overnight)
Line 2: What you get (replays, feedback, next steps)
Generous line-height creates clear separation between the two
statements without needing extra markup or padding.
*/
font-family: var(--font-serif);
font-size: 0.9375rem;
/* 15px — slightly smaller, more elegant */
line-height: 1.8;
/* Extra generous for clear line separation */
letter-spacing: 0.01em;
/* Subtle tracking for clarity */
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
/* Breathing room before CTAs */
max-width: 560px;
/* Wider to fit longer lines comfortably */
/*
Slightly lighter weight makes it feel supportive rather than
competing with the bold headline above.
*/
font-weight: var(--font-regular);
}
/*
EMPHASIZED TEXT WITHIN SUBHEADLINE
===================================
Strong elements serve as visual anchors — they're the words
the eye lands on first when scanning. Using primary color
and semibold weight creates clear hierarchy without being loud.
*/
.hero__subheadline strong {
color: var(--color-text-primary);
font-weight: var(--font-semibold);
letter-spacing: 0;
/* Reset letter-spacing for tighter strong text */
}
@media (min-width: 1200px) {
.hero__subheadline {
/*
LARGER SCREENS — TWO ELEGANT LINES
===================================
Slightly larger but still understated. The two lines should
read clearly without overwhelming the headline above.
*/
font-size: 1rem;
/* 16px — clean, readable */
line-height: 1.85;
/* Generous space between the two lines */
margin-bottom: var(--space-8);
max-width: 600px;
/* Comfortable width for both lines */
}
}
/*
Extra-large screens — subheadline can be even more substantial
to maintain proportion with the enormous headline.
*/
@media (min-width: 1440px) {
.hero__subheadline {
/*
ULTRA-LARGE SCREENS — REFINED TWO-LINE LAYOUT
==============================================
At this size, we can afford slightly larger text while
keeping the elegant, understated feel. Both lines should
fit comfortably without wrapping awkwardly.
*/
font-size: 1.0625rem;
/* 17px — refined, not competing with headline */
line-height: 1.9;
/* Maximum breathing room between lines */
max-width: 640px;
/* Ensures both lines fit without wrapping */
}
}
/* Social proof badges — credibility markers */
.hero__proof {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-8);
}
@media (min-width: 1200px) {
.hero__proof {
gap: var(--space-3);
margin-bottom: var(--space-10);
}
}
.hero__proof-badge {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px 12px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
@media (min-width: 1200px) {
.hero__proof-badge {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
}
.hero__proof-icon {
font-size: var(--text-base);
}
.hero__proof-icon--yc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-bold);
color: #FF6600;
background: rgba(255, 102, 0, 0.15);
/* Using --radius-xs for consistency with small icon elements */
border-radius: var(--radius-xs);
}
/* CTA buttons */
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
@media (min-width: 1200px) {
.hero__cta {
gap: var(--space-4);
margin-bottom: var(--space-5);
}
}
/*
TRUST LINE — DE-RISKING COPY
============================
This is crucial de-risking text for users about to click.
Must be clearly legible — with the larger CTAs, this text
needs to be proportionally larger too.
*/
.hero__trust {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
margin-top: var(--space-2);
/* Slight gap from CTA buttons */
}
@media (min-width: 1200px) {
.hero__trust {
font-size: var(--text-base);
}
}
/*
=========================================================================
HERO SHOWCASE — INTRINSIC LAYOUT APPROACH
=========================================================================
DESIGN PHILOSOPHY:
==================
Instead of using transform: scale() to resize the showcase at different
breakpoints (which is brittle and causes layout issues), we use intrinsic
sizing that lets the content flow naturally within its container.
KEY PRINCIPLES:
1. LET THE GRID COLUMN DEFINE WIDTH — The showcase fills its grid column.
2. NO SCALE TRANSFORMS — These cause accessibility and layout issues.
3. FLEXBOX FOR ALIGNMENT — Centers/aligns the showcase within its column.
4. CONSISTENT ENTRANCE ANIMATION — Simple, reliable reveal effect.
The showcase component inside (.op-console) handles its own internal
sizing with fixed dimensions. This wrapper just positions it correctly.
*/
.hero__showcase {
/*
STAGGERED ENTRANCE ANIMATION
============================
Appears 100ms after the hero content for a polished sequenced reveal.
Animation is simple (opacity + translateY) to avoid complexity.
*/
animation: showcaseReveal 0.6s var(--ease-linear-out) 0.1s both;
/*
FLEXBOX CONTAINER
=================
Positions the showcase panel within its grid column.
Default: centered horizontally and vertically.
*/
display: flex;
justify-content: center;
align-items: flex-start;
/*
FILL THE GRID COLUMN
====================
Width is 100% to fill the grid column, but the inner
.op-console has its own fixed dimensions.
*/
width: 100%;
/*
MOBILE: Add top padding so the showcase doesn't bump
against the CTA buttons above it.
*/
padding-top: var(--space-4);
}
/*
TABLET BREAKPOINT (768px+)
==========================
In two-column layout, align showcase to the right edge of its column.
*/
@media (min-width: 768px) {
.hero__showcase {
/*
RIGHT ALIGNMENT: Pushes the showcase toward the text column,
creating visual connection while maintaining separation.
*/
justify-content: flex-start;
/*
VERTICAL CENTER: Aligns with the text content when
they sit side-by-side.
*/
align-items: center;
/* No top padding needed in side-by-side layout */
padding-top: 0;
/*
LEFT PADDING: Creates optical margin from the grid column edge.
This balances with the padding-right on .hero__content.
*/
padding-left: var(--space-2);
}
}
/*
DESKTOP BREAKPOINT (1024px+)
============================
More generous spacing between columns.
*/
@media (min-width: 1024px) {
.hero__showcase {
/* Slightly more breathing room */
padding-left: var(--space-4);
}
}
/*
LARGE DESKTOP (1280px+)
=======================
Center the showcase for balanced composition on large screens.
*/
@media (min-width: 1280px) {
.hero__showcase {
/*
CENTER ALIGNMENT: On large screens, the showcase has enough
room that centering looks more balanced than edge alignment.
*/
justify-content: center;
padding-left: 0;
}
}
/*
SHOWCASE REVEAL ANIMATION
=========================
Simple, reliable entrance animation without scale transforms.
*/
@keyframes showcaseReveal {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*
=========================================================================
PRODUCT SHOWCASE — AI AGENTS TESTING A WEBSITE
=========================================================================
The interactive demo showing AI agents moving around and testing
a website skeleton in real-time with feedback bubbles.
*/
/*
=========================================================================
SHOWCASE CONTAINER — FIXED-DIMENSION UNIFIED STACK
=========================================================================
CRITICAL REQUIREMENT: NO DYNAMIC RESIZING
=========================================
The showcase container must have FIXED dimensions at each breakpoint.
It should NEVER resize based on the messages in the activity feed.
Structure: Browser → Metrics Bar → Activity Log
All elements connect visually as one cohesive "analysis panel".
IMPLEMENTATION STRATEGY:
1. Use explicit height values instead of auto/min-content
2. All child elements have flex-shrink: 0 to prevent collapsing
3. Activity log uses overflow for content that exceeds fixed height
4. Responsive breakpoints change sizes discretely, not dynamically
*/
/*
PRODUCT SHOWCASE CONTAINER
=========================
Minimalist/Symbolic: Floating data layer.
No frame, no shadow, just pure content.
*/
.showcase {
/*
FIXED DIMENSIONS — BOTH WIDTH AND HEIGHT
*/
display: flex;
flex-direction: column;
gap: 0;
/*
FIXED WIDTH FOR MOBILE (< 768px)
Set to 100% of parent but constrained by parent's max-width
*/
width: 100%;
max-width: 480px;
/* Prevent any flex-based resizing */
flex-shrink: 0;
flex-grow: 0;
/* Clip all content to prevent any overflow-based expansion */
overflow: hidden;
/*
FIXED TOTAL HEIGHT FOR MOBILE (< 768px)
Browser (200px) + Metrics (~32px) + Log (~128px) = ~360px
*/
height: 360px;
background: transparent;
/* Seamless */
}
/*
MAIN BROWSER WINDOW — AI ANALYSIS TOOL AESTHETIC
================================================
DESIGN CRITIQUE FIX: The previous version looked like "a wireframing tool."
New approach: Visual elements that scream "AI analysis tool at work."
Added:
- Subtle scanline overlay (like security camera footage)
- Diagnostic grid pattern in corner
- Enhanced depth and presence
LIGHT MODE FIX: Reduced shadow intensity for light mode.
*/
/*
BROWSER WINDOW MOCKUP
====================
Minimalist: No chrome, just structure.
*/
.showcase__browser {
/*
BROWSER WINDOW — FIXED HEIGHT, NEVER CHANGES
*/
position: relative;
background: transparent;
/* No background */
border: none;
/* No border */
border-radius: 0;
/* No radius */
box-shadow: none;
/* No shadow */
overflow: hidden;
/* FIXED DIMENSIONS — absolute stability guarantee */
flex-shrink: 0;
flex-grow: 0;
height: 280px;
/* Mobile/tablet base height */
width: 100%;
}
/* LIGHT MODE — Much softer shadows so content isn't obscured */
/* LIGHT MODE — Reset */
[data-theme="light"] .showcase__browser {
box-shadow: none;
border: none;
background: transparent;
}
/*
SCANLINE OVERLAY — Creates "analysis in progress" feel
This subtle effect adds technical personality without being distracting.
Like the scan lines on security cameras or medical imaging equipment.
*/
.showcase__browser::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
pointer-events: none;
z-index: 5;
/* Subtle horizontal scanlines */
background: repeating-linear-gradient(0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.02) 2px,
rgba(0, 0, 0, 0.02) 4px);
/* Animated scan effect — very subtle */
animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
0% {
background-position: 0 0;
}
100% {
background-position: 0 100px;
}
}
/* Use a pseudo-element for the rounded corner clipping on the content only */
.showcase__browser::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
pointer-events: none;
z-index: 0;
}
/* Browser header (chrome) */
.showcase__browser-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
/*
Match the parent's top border-radius so corners aren't cut off.
Subtract 1px to account for the parent's border width.
*/
border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
}
.showcase__browser-dots {
display: flex;
gap: 5px;
}
.showcase__dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.showcase__dot--red,
.showcase__dot--yellow,
.showcase__dot--green {
background: #333;
}
.showcase__browser-url {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
}
.showcase__lock {
width: 12px;
height: 12px;
color: var(--color-success);
}
/*
ANALYSIS STATUS BADGE — DISTINCTIVE BRAND ELEMENT
=================================================
DESIGN CRITIQUE FIX: This status indicator is now MORE distinctive.
It's styled like a technical readout, not a generic "live" badge.
The pulsing ring animation creates urgency and shows the AI is
actively analyzing — this is the VALUE of the product made visible.
*/
.showcase__browser-status {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 9px;
font-weight: var(--font-bold);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-success);
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: var(--radius-full);
}
/* Pulsing status dot with ring animation */
.showcase__status-dot {
position: relative;
width: 6px;
height: 6px;
background: var(--color-success);
border-radius: 50%;
}
/* Animated ring that expands outward — creates urgency */
.showcase__status-dot::after {
content: '';
position: absolute;
inset: -4px;
border: 1px solid var(--color-success);
border-radius: 50%;
animation: statusRing 2s ease-out infinite;
}
@keyframes statusRing {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* Website container — ANALYSIS FRAME AESTHETIC */
.showcase__website {
position: relative;
padding: var(--space-3);
flex: 1;
min-height: 0;
/* Allow flexible sizing */
}
/*
RICH SHOWCASE — Additional styling for the filled-in version
==========================================================
DESIGN CRITIQUE FIX: Added corner markers like a viewfinder/scanner.
This creates the "AI is analyzing this" aesthetic that matches
the high-tech product positioning.
*/
.showcase__website--rich::before,
.showcase__website--rich::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border: 2px solid rgba(59, 130, 246, 0.3);
pointer-events: none;
z-index: 4;
}
/* Top-left corner marker */
.showcase__website--rich::before {
top: var(--space-3);
left: var(--space-3);
border-right: none;
border-bottom: none;
border-radius: 4px 0 0 0;
}
/* Bottom-right corner marker */
.showcase__website--rich::after {
bottom: var(--space-3);
right: var(--space-3);
border-left: none;
border-top: none;
border-radius: 0 0 4px 0;
}
/* Laptop screens */
@media (min-width: 1024px) {
.showcase__website {
padding: var(--space-3);
min-height: 220px;
}
}
/* Larger laptops */
@media (min-width: 1200px) {
.showcase__website {
padding: var(--space-4);
min-height: 240px;
}
.showcase__website--rich::before {
top: var(--space-2);
left: var(--space-2);
width: 20px;
height: 20px;
}
.showcase__website--rich::after {
bottom: var(--space-2);
right: var(--space-2);
width: 20px;
height: 20px;
}
}
/* Large desktop */
@media (min-width: 1440px) {
.showcase__website {
padding: var(--space-5);
min-height: 280px;
}
.showcase__website--rich::before {
top: var(--space-3);
left: var(--space-3);
width: 24px;
height: 24px;
}
.showcase__website--rich::after {
bottom: var(--space-3);
right: var(--space-3);
width: 24px;
height: 24px;
}
}
/* Website header skeleton */
.website__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-4);
}
/*
WEBSITE LOGO — RICH VERSION
===========================
DESIGN CRITIQUE FIX: Now shows an actual logo with icon + text
instead of a gray skeleton placeholder. This makes it feel like
a real app being analyzed, not a wireframe tool.
*/
.website__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
}
.website__logo-icon {
font-size: var(--text-base);
color: var(--color-text-secondary);
}
.website__logo-text {
font-size: var(--text-sm);
letter-spacing: 0.02em;
}
.website__nav {
display: flex;
gap: var(--space-4);
}
/*
NAV ITEMS — Now showing actual text, not skeleton bars
*/
.website__nav-item {
width: 50px;
height: 12px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
/* Text variant for rich showcase */
.website__nav-item--text {
width: auto;
height: auto;
background: transparent;
font-size: 11px;
color: var(--color-text-tertiary);
font-weight: var(--font-medium);
}
/*
NAV CTA — Now shows actual button text
*/
.website__nav-cta {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
font-size: 10px;
font-weight: var(--font-semibold);
color: var(--color-text-secondary);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
/* Main content area with sidebar */
.website__content {
display: grid;
grid-template-columns: 100px 1fr 120px;
gap: var(--space-2);
}
@media (min-width: 1200px) {
.website__content {
grid-template-columns: 120px 1fr 140px;
gap: var(--space-3);
}
}
/*
CHECKOUT LAYOUT — 2 columns, no sidebar
=======================================
DESIGN CRITIQUE FIX: Cleaner 2-column layout that looks like
a real checkout page, not a complex dashboard wireframe.
*/
.website__content--checkout {
grid-template-columns: 1fr 140px;
gap: var(--space-3);
}
@media (min-width: 1200px) {
.website__content--checkout {
grid-template-columns: 1fr 160px;
gap: var(--space-4);
}
}
/* Sidebar */
.website__sidebar {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
}
.website__sidebar-item {
height: 28px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
/*
ACTIVE SIDEBAR ITEM — subtle indicator without accent color.
Uses a brighter neutral to show selection state.
*/
.website__sidebar-item--active {
background: var(--color-bg-elevated);
border-left: 2px solid var(--color-text-tertiary);
}
/* Main form area */
.website__main {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Section title — skeleton version */
.website__section-title {
width: 40%;
height: 20px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
/* Section title — text version for rich showcase */
.website__section-title--text {
width: auto;
height: auto;
background: transparent;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-4);
}
.website__form {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.website__field {
display: flex;
flex-direction: column;
gap: 2px;
}
.website__field--half {
flex: 1;
}
.website__field-row {
display: flex;
gap: var(--space-3);
}
/* Form label — skeleton version */
.website__label {
width: 30%;
height: 10px;
background: var(--color-bg-tertiary);
/* Using --radius-xs for consistency with micro skeleton elements */
border-radius: var(--radius-xs);
}
/* Form label — text version for rich showcase */
.website__label--text {
width: auto;
height: auto;
background: transparent;
font-size: 10px;
font-weight: var(--font-medium);
color: var(--color-text-tertiary);
text-transform: none;
letter-spacing: normal;
}
/* Form input */
.website__input {
height: 28px;
/* Compact for viewport fit */
display: flex;
align-items: center;
padding: 0 var(--space-2);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform var(--transition-fast);
}
/* Input with value filled in */
.website__input--filled {
background: var(--color-bg-tertiary);
border-color: var(--color-border-hover);
}
/* Actual text content inside inputs */
.website__input-text {
font-size: 11px;
font-family: var(--font-mono);
color: var(--color-text-primary);
}
/* Placeholder text inside inputs */
.website__input-placeholder {
font-size: 11px;
font-family: var(--font-mono);
color: var(--color-text-muted);
}
/*
INPUT ACTIVE STATE — shows when agent is interacting with a field.
Uses a subtle neutral highlight instead of accent color to maintain
the refined wireframe aesthetic.
*/
.website__input--active {
border-color: var(--color-text-tertiary);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
background: var(--color-bg-tertiary);
}
/*
CTA BUTTON IN WEBSITE — STYLED VERSION
======================================
DESIGN CRITIQUE FIX: Now looks like an actual button in a real app.
Uses a visible but neutral style that's clearly interactive.
*/
.website__cta {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
/* Compact for viewport fit */
margin-top: var(--space-2);
font-size: 11px;
font-weight: var(--font-semibold);
color: var(--color-text-secondary);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-hover);
border-radius: var(--radius-md);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform var(--transition-fast);
}
/* Styled CTA for rich showcase — looks like a real button */
.website__cta--styled {
color: var(--color-bg-primary);
background: var(--color-text-primary);
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/*
HOVER STATE — subtle highlight without accent color glow.
Just a slight brightness increase to show interaction.
*/
.website__cta--hover {
transform: scale(1.02);
background: var(--color-bg-elevated);
border-color: var(--color-text-tertiary);
color: var(--color-text-primary);
}
/*
HELP LINK — STYLED VERSION
===========================
DESIGN CRITIQUE FIX: Now shows actual help text, not a gray bar.
*/
.website__help {
width: 60%;
height: 10px;
margin-top: var(--space-3);
background: var(--color-bg-tertiary);
border-radius: var(--radius-xs);
transition: transform 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
/* Text version for rich showcase */
.website__help--text {
width: auto;
height: auto;
background: transparent;
text-align: center;
}
.website__help--text span {
font-size: 10px;
color: var(--color-text-muted);
}
/*
HELP LINK ACTIVE STATE — subtle highlight.
When agent cursor is pointing at it, show a refined glow.
*/
.website__help--active {
transform: scale(1.05);
/* Neutral glow instead of accent-colored glow */
box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
background: var(--color-text-tertiary);
}
/* Summary panel */
.website__summary {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
}
/* Summary title — skeleton version */
.website__summary-title {
width: 60%;
height: 14px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
/* Summary title — text version */
.website__summary-title--text {
width: auto;
height: auto;
background: transparent;
font-size: 11px;
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-3);
}
/* Summary item — skeleton version */
.website__summary-item {
display: flex;
justify-content: space-between;
height: 10px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-xs);
}
/* Summary row — text version for rich showcase */
.website__summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-1) 0;
}
.website__summary-label {
font-size: 10px;
color: var(--color-text-tertiary);
}
.website__summary-value {
font-size: 10px;
font-weight: var(--font-medium);
color: var(--color-text-secondary);
}
.website__summary-value--muted {
color: var(--color-text-muted);
}
.website__summary-row--total {
margin-top: var(--space-2);
}
.website__summary-value--total {
font-size: 12px;
font-weight: var(--font-bold);
color: var(--color-text-primary);
}
.website__summary-divider {
height: 1px;
background: var(--color-border);
margin: var(--space-2) 0;
}
.website__summary-total {
height: 16px;
background: var(--color-text-muted);
border-radius: var(--radius-sm);
opacity: 0.3;
}
/* =============================================================================
B2B SAAS INTERFACE STYLES
=============================================================================
Complex dashboard interface for the hero showcase.
Represents a typical CRM/project management app with:
- Sidebar navigation with buried settings
- Data table with filters
- Ambiguous action buttons
- Complex information architecture
This better demonstrates the value of AI testing for enterprise software
compared to a simple checkout flow.
============================================================================= */
/*
B2B SaaS Layout — sidebar + main content area
=============================================
Uses CSS Grid for the classic dashboard layout:
- Narrow sidebar on left with icon-based nav
- Wide main area with header, filters, and data table
RESPONSIVE FIX: Use 100% height to fill parent container.
*/
.showcase__website--saas {
display: grid;
grid-template-columns: 32px 1fr;
gap: 0;
padding: 0;
height: 100%;
min-height: 0;
/* Allow shrinking */
overflow: hidden;
}
/*
SIDEBAR NAVIGATION
==================
Vertical icon-based nav typical of B2B SaaS apps.
Settings is buried at the bottom — a common IA issue.
FIXED: Tighter spacing and smaller icons.
*/
.website__sidebar {
display: flex;
flex-direction: column;
background: var(--color-bg-tertiary);
border-right: 1px solid var(--color-border);
padding: 6px 0;
}
.website__sidebar-logo {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
margin-bottom: 6px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 6px;
}
.website__sidebar-logo .website__logo-icon {
font-size: 10px;
color: var(--color-text-secondary);
}
.website__sidebar-nav {
display: flex;
flex-direction: column;
flex: 1;
gap: 2px;
padding: 0 4px;
}
.website__sidebar-item {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
width: 22px;
border-radius: 4px;
color: var(--color-text-muted);
cursor: pointer;
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform, color 0.15s var(--ease-out);
}
.website__sidebar-item svg {
width: 11px;
height: 11px;
}
.website__sidebar-item--active {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
}
.website__sidebar-item--muted {
color: var(--color-text-muted);
opacity: 0.6;
}
/*
Spacer pushes Settings to bottom — demonstrates buried IA
*/
.website__sidebar-spacer {
flex: 1;
min-height: 8px;
}
/*
MAIN CONTENT AREA
=================
Header with breadcrumb + actions, filter bar, data table
FIXED: Tighter padding and gaps.
FIXED: Added height: 100% to fill container without expanding it.
*/
.website__main-area {
display: flex;
flex-direction: column;
padding: 8px;
gap: 6px;
overflow: hidden;
height: 100%;
min-height: 0;
/* Allow flex shrinking */
}
/*
PAGE HEADER — Breadcrumb + action buttons
*/
.website__page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-border);
}
.website__breadcrumb {
display: flex;
align-items: center;
gap: 4px;
font-size: 9px;
}
.website__breadcrumb-item {
color: var(--color-text-muted);
}
.website__breadcrumb-item--active {
color: var(--color-text-primary);
font-weight: var(--font-medium);
}
.website__breadcrumb-sep {
color: var(--color-text-muted);
opacity: 0.4;
}
.website__page-actions {
display: flex;
gap: 6px;
}
/*
BUTTONS — Including the ambiguous "Commit Changes" button
FIXED: Smaller padding for compact appearance.
*/
.website__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
font-size: 8px;
font-weight: var(--font-medium);
border-radius: 4px;
cursor: pointer;
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform, color, background-color 0.15s var(--ease-out);
white-space: nowrap;
}
.website__btn--secondary {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.website__btn--primary {
background: var(--color-text-primary);
color: var(--color-bg-primary);
border: 1px solid transparent;
}
/*
FILTER BAR — Where "Date" ambiguity causes confusion
FIXED: Tighter spacing.
*/
.website__filters {
display: flex;
gap: 6px;
align-items: center;
padding: 4px 0;
}
.website__filter {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 6px;
font-size: 8px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform, color, background-color, border-color 0.15s var(--ease-out);
white-space: nowrap;
}
.website__filter-label {
color: var(--color-text-muted);
}
.website__filter-value {
color: var(--color-text-secondary);
font-weight: var(--font-medium);
}
.website__filter-arrow {
width: 6px;
height: 6px;
color: var(--color-text-muted);
}
/*
Ambiguous filter visual treatment — subtle warning indicator
*/
.website__filter--ambiguous {
border-color: var(--color-border-hover);
}
.website__search {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 8px;
color: var(--color-text-muted);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 4px;
margin-left: auto;
white-space: nowrap;
}
.website__search svg {
width: 8px;
height: 8px;
opacity: 0.5;
flex-shrink: 0;
}
/*
DATA TABLE
==========
Clickable rows, sortable columns, action menus.
FIXED: Tighter grid and smaller fonts.
FIXED: Added overflow-y: auto to scroll if content exceeds space.
*/
.website__table {
display: flex;
flex-direction: column;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 6px;
overflow: hidden;
overflow-y: auto;
flex: 1;
min-height: 0;
max-height: 100%;
/* Prevent expansion beyond container */
}
.website__table-header {
display: grid;
grid-template-columns: 16px 1fr 60px 50px 20px;
gap: 6px;
padding: 5px 8px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
font-size: 7px;
font-weight: var(--font-medium);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.website__table-row {
display: grid;
grid-template-columns: 16px 1fr 60px 50px 20px;
gap: 6px;
padding: 5px 8px;
border-bottom: 1px solid var(--color-border);
font-size: 8px;
color: var(--color-text-secondary);
transition: background 0.15s var(--ease-out);
}
.website__table-row:last-child {
border-bottom: none;
}
.website__table-row:hover {
background: var(--color-bg-tertiary);
}
.website__table-cell {
display: flex;
align-items: center;
min-width: 0;
}
.website__table-cell--checkbox {
justify-content: center;
}
.website__table-cell--name {
display: flex;
align-items: center;
gap: 6px;
font-weight: var(--font-medium);
color: var(--color-text-primary);
overflow: hidden;
}
.website__table-cell--name span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.website__table-cell--actions {
justify-content: center;
}
.website__checkbox {
width: 10px;
height: 10px;
border: 1px solid var(--color-border);
border-radius: 2px;
background: var(--color-bg-secondary);
flex-shrink: 0;
}
.website__checkbox--checked {
background: var(--color-text-tertiary);
border-color: var(--color-text-tertiary);
}
.website__checkbox--checked::after {
content: '✓';
color: var(--color-bg-primary);
font-size: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.website__avatar {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-bg-elevated);
color: var(--color-text-muted);
font-size: 6px;
font-weight: var(--font-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/*
STATUS BADGES
*/
.website__badge {
padding: 1px 5px;
font-size: 6px;
font-weight: var(--font-medium);
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
.website__badge--green {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.website__badge--yellow {
background: rgba(234, 179, 8, 0.15);
color: #eab308;
}
.website__badge--gray {
background: var(--color-bg-tertiary);
color: var(--color-text-muted);
}
/*
ROW ACTION MENU — Archive vs Delete confusion happens here
*/
.website__row-action {
padding: 1px 3px;
font-size: 8px;
color: var(--color-text-muted);
border-radius: 3px;
cursor: pointer;
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform, color, background-color 0.15s var(--ease-out);
}
.website__row-action:hover {
background: var(--color-bg-elevated);
}
/*
TABLE FOOTER — Pagination
*/
.website__table-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
font-size: 7px;
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
background: var(--color-bg-tertiary);
}
.website__table-count {
color: var(--color-text-tertiary);
}
.website__pagination {
display: flex;
align-items: center;
gap: 6px;
}
.website__page-btn {
padding: 1px 4px;
color: var(--color-text-muted);
cursor: pointer;
}
.website__page-num {
padding: 1px 5px;
background: var(--color-bg-elevated);
border-radius: 3px;
color: var(--color-text-secondary);
}
/*
UNIVERSAL ELEMENT HIGHLIGHT
===========================
Applied when AI agent cursor is "looking at" an element.
Works for any element type in the B2B SaaS interface.
FIXED: No layout-affecting properties to prevent shifts.
*/
.website__element--highlight {
outline: 2px solid rgba(255, 255, 255, 0.25);
outline-offset: 1px;
border-radius: 4px;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
/* Light mode highlight */
[data-theme="light"] .website__element--highlight {
outline-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
/* Specific highlight for sidebar items — no transform to prevent layout shift */
.website__sidebar-item.website__element--highlight {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
}
/* Specific highlight for buttons — no transform */
.website__btn.website__element--highlight {
background: var(--color-bg-elevated);
}
/* Specific highlight for table rows */
.website__table-row.website__element--highlight {
background: var(--color-bg-elevated);
}
/* Specific highlight for filters */
.website__filter.website__element--highlight {
border-color: var(--color-text-tertiary);
}
/* Agent cursors container */
.showcase__agents {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Individual agent cursor */
/* Individual agent cursor */
.agent-cursor {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
transform: translate(-12px, -12px);
/* Center the crosshair */
/*
MECHANICAL MOTION
=================
Precise, "robotic" easing. Fast snap with no overshoot.
*/
transition:
left 0.5s cubic-bezier(0.2, 0, 0, 1),
top 0.5s cubic-bezier(0.2, 0, 0, 1),
opacity 0.1s linear;
z-index: 10;
pointer-events: none;
/* Ensure clicks pass through */
}
.agent-cursor__pointer {
width: 24px;
height: 24px;
color: var(--color-text-primary);
/* No shadow - flat technical look */
}
/*
Agent cursor label — TECHNICAL IDENTIFIER STYLE
===============================================
DESIGN CRITIQUE FIX: Previous labels felt like a "Figma collaboration
session gone wrong." New style feels like technical test infrastructure:
- Compact, monospace font for that "test lab" feel
- No emoji avatars — just a colored status dot
- Darker, more subtle background
- Feels like cursor labels in a sophisticated debugging tool
*/
/*
Agent cursor label — TECHNICAL SPEC STYLE
=========================================
*/
.agent-cursor__label {
display: inline-flex;
align-items: center;
padding: 2px 6px;
font-size: 10px;
font-weight: var(--font-medium);
font-family: var(--font-mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: #000;
background: #FFF;
/* High contrast technical label */
border: 1px solid #000;
border-radius: 0;
/* Boxy Vitsoe style */
white-space: nowrap;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
/* Hard shadow */
}
/*
AGENT DOT — DISTINCTIVE COLOR PER AGENT
=======================================
Each agent has their own dot color set inline via JavaScript:
- Agent-S1: Klein Blue (#002FA7)
- Agent-M2: Burgundy (#722F37)
- Agent-C3: Tangerine (#E07020)
This makes agents instantly distinguishable at a glance.
*/
/*
SYMBOLIC DOT
============
A simple node representing intelligence.
Black in light mode, White in dark mode.
*/
.agent-cursor__dot {
width: 6px;
height: 6px;
background: currentColor;
/* Inherits from parent */
border-radius: 50%;
/* No blur, no shadow - sharp symbol */
}
/*
CURSOR COLOR — HIGH CONTRAST
============================
*/
.agent-cursor {
color: #FFF;
/* Default for dark mode */
}
/*
ACTIVE CURSOR STATE — APPLE-STYLE SUBTLE EMPHASIS
==================================================
When an agent is "speaking" (their log entry is showing),
we highlight them in a refined, understated way that's
characteristic of Apple design:
- Slight scale increase for prominence
- Subtle white glow instead of colored glow
- The label gets a refined border highlight
The key is restraint — just enough visual feedback to
indicate activity without being flashy or distracting.
*/
/*
ACTIVE STATE — SIGNAL PULSE
===========================
Symbolic representation of "thinking" or "transmitting".
*/
.agent-cursor--active .agent-cursor__dot {
transform: scale(2);
/* Expands when active */
animation: signalPulse 2s infinite;
}
@keyframes signalPulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/*
REFINED GLOW — neutral white/gray instead of blue.
Creates a soft halo effect that's visible but not loud.
*/
.agent-cursor--active .agent-cursor__pointer {
/*
Brightened cursor color when active for contrast.
The subtle white glow creates depth without using accent colors.
*/
color: var(--color-text-primary);
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/*
ACTIVE LABEL — enhanced border glow instead of pulse animation.
More sophisticated than a bouncy pulse; Apple prefers subtle
state changes over distracting animations.
*/
.agent-cursor--active .agent-cursor__label {
background: #000;
color: #FFF;
border-color: #FFF;
}
/*
LIGHT MODE AGENT CURSOR
=======================
Inverted colors for light mode while maintaining the professional feel.
*/
/* Light mode cursor - High Contrast Black */
[data-theme="light"] .agent-cursor {
color: #000;
}
/*
Feedback bubbles — DISABLED
===========================
Removed to reduce visual noise. The activity log already shows
what each agent is discovering during their testing session.
*/
.showcase__feedback {
display: none;
}
.feedback-bubble {
/* No longer absolutely positioned — flows in the flex container */
position: relative;
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
font-size: 11px;
line-height: 1.3;
color: var(--color-text-primary);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
/* LINEAR-STYLE: Fast slide-in animation (200ms instead of 300ms) */
animation: toastSlideIn 0.2s var(--ease-linear-out);
/* Left border accent (color set by JS to match agent) */
border-left-width: 3px;
border-left-style: solid;
}
.feedback-bubble--warning {
border-color: var(--color-warning);
background: rgba(245, 158, 11, 0.1);
}
.feedback-bubble--error {
border-color: var(--color-error);
background: rgba(239, 68, 68, 0.1);
}
.feedback-bubble--success {
border-color: var(--color-success);
background: rgba(34, 197, 94, 0.1);
}
/*
FEEDBACK BUBBLE WITH AGENT — REFINED NEUTRAL BORDER
====================================================
Using a subtle neutral border instead of the accent color.
The feedback type (warning/error/success) already provides
color coding, so the left border can be more understated.
*/
.feedback-bubble--with-agent {
border-left: 3px solid var(--color-text-tertiary);
}
.feedback-bubble__icon {
font-size: var(--text-base);
flex-shrink: 0;
}
/*
LINEAR-STYLE TOAST ANIMATIONS
=============================
Fast entrance (200ms), even faster exit (150ms).
Direct easing for that snappy Linear feel.
*/
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Toast slide-out animation — exits to the right */
@keyframes toastSlideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(16px);
}
}
/*
ANALYSIS METRICS BAR — REAL-TIME STATS
======================================
DESIGN CRITIQUE FIX: This metrics bar shows live numbers that
prove the AI is actively working. It's styled like a technical
dashboard readout — matches the "sophisticated AI tool" positioning.
CRT SCANLINE EFFECT: Added to match the browser window aesthetic.
*/
.showcase__metrics {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
/* FIXED HEIGHT — ensures no vertical resizing */
height: 40px;
flex-shrink: 0;
flex-grow: 0;
padding: 0 var(--space-3);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-top: none;
/* Connects to browser above */
font-family: var(--font-mono);
}
/* CRT scanline overlay for metrics bar */
.showcase__metrics::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: repeating-linear-gradient(0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.015) 2px,
rgba(0, 0, 0, 0.015) 4px);
animation: scanlines 8s linear infinite;
}
.showcase__metric {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.showcase__metric-value {
font-size: 14px;
/* Base size for smaller screens */
font-weight: var(--font-bold);
color: var(--color-text-primary);
line-height: 1;
/* Smooth transition for number updates */
transition: transform 0.15s var(--ease-out);
}
/* Scale up metric values for larger screens */
@media (min-width: 1024px) {
.showcase__metric-value {
font-size: 16px;
}
}
@media (min-width: 1440px) {
.showcase__metric-value {
font-size: 18px;
}
}
.showcase__metric-value--warning {
color: #FBBF24;
/* Amber for issues count */
}
.showcase__metric-value--time {
font-variant-numeric: tabular-nums;
}
.showcase__metric-label {
font-size: 8px;
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
/* Scale up metric labels for larger screens */
@media (min-width: 1024px) {
.showcase__metric-label {
font-size: 9px;
}
}
@media (min-width: 1440px) {
.showcase__metric-label {
font-size: 10px;
}
}
/* Light mode adjustments */
[data-theme="light"] .showcase__metric-value--warning {
color: #B45309;
}
/* Responsive metrics bar padding */
@media (min-width: 1024px) {
.showcase__metrics {
padding: var(--space-3) var(--space-5);
}
}
@media (min-width: 1440px) {
.showcase__metrics {
padding: var(--space-3) var(--space-6);
}
}
/*
=========================================================================
ACTIVITY LOG — FIXED HEIGHT, NO DYNAMIC RESIZING
=========================================================================
CRITICAL: The activity log has a FIXED total height that never changes
based on the messages inside it. This prevents the jarring "jumping"
effect when new messages appear or old ones are removed.
Height breakdown:
- Header: ~36px (fixed)
- Content: remaining space (scrollable)
The log scrolls internally; its outer container never resizes.
*/
.showcase__log {
/*
FIXED DIMENSIONS — ABSOLUTE STABILITY
=====================================
Both width and height are fixed to prevent ANY dynamic resizing.
Width: 100% of parent (which has fixed width per breakpoint)
Height: 140px base (changes per breakpoint)
The key is that the parent .showcase has fixed width, and this
element fills that width exactly without expanding it.
VISIBILITY:
Always visible on all screen sizes. Never hidden or collapsed.
*/
position: relative;
z-index: 1;
flex-shrink: 0;
flex-grow: 0;
width: 100%;
height: 140px;
/* Fixed total height for mobile/tablet */
/* Ensure visibility on all devices */
display: flex;
flex-direction: column;
visibility: visible;
opacity: 1;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-top: none;
/* Connects to metrics above */
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
overflow: hidden;
/* Softer shadow for better light mode compatibility */
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.15),
0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Light mode — very soft shadow */
[data-theme="light"] .showcase__log {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
}
/*
LOG HEADER — FIXED HEIGHT TERMINAL-STYLE BAR
============================================
Fixed height of 36px ensures the log content calc works correctly.
Styled like a console/terminal header bar.
*/
.showcase__log-header {
display: flex;
justify-content: space-between;
align-items: center;
/* FIXED HEIGHT — must match calc in .showcase__log-content */
height: 36px;
flex-shrink: 0;
padding: 0 var(--space-4);
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
/*
LOG TITLE — Made more prominent with accent color
so users know this is important data
*/
.showcase__log-title {
font-size: var(--text-xs);
font-weight: var(--font-bold);
/* Bolder */
color: var(--color-text-secondary);
/* Brighter than before */
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Active agents indicator with pulse animation */
.showcase__log-count {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-success);
}
/* Add pulsing dot before count for liveness indicator */
.showcase__log-count::before {
content: '';
width: 6px;
height: 6px;
background: var(--color-success);
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
/*
=========================================================================
LOG CONTENT — FIXED HEIGHT SCROLLABLE AREA
=========================================================================
CRITICAL: The log content area has a FIXED height calculated as:
Total log height (140px) - Header height (~36px) = ~104px
This area scrolls internally but NEVER changes its outer dimensions.
New entries push old ones up and out of view; the container stays fixed.
CRT scanline effect adds the "analysis tool" aesthetic.
*/
.showcase__log-content {
position: relative;
/*
FIXED DIMENSIONS — NO DYNAMIC RESIZING
======================================
Width: 100% of parent (which is 100% of fixed-width showcase)
Height: Calculated to fill log container minus header
Parent is 140px, header is ~36px, so content is ~104px
Using calc for precision
*/
width: 100%;
height: calc(100% - 36px);
padding: var(--space-2) var(--space-3);
/*
SCROLLING STRATEGY:
- overflow-y: auto — show scrollbar only when needed
- overflow-x: hidden — prevent horizontal scrolling entirely
- scrollbar-gutter: stable — reserve space to prevent width jumps
The vertical scrollbar may appear/disappear but the gutter is
always reserved, so the content area width stays constant.
*/
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.6;
background: var(--color-bg-card);
}
/* CRT scanline overlay for activity log */
.showcase__log-content::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: repeating-linear-gradient(0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.015) 2px,
rgba(0, 0, 0, 0.015) 4px);
animation: scanlines 8s linear infinite;
}
/*
CUSTOM SCROLLBAR — SUBTLE & UNOBTRUSIVE
========================================
The scrollbar should be barely perceptible until interacted with.
In light mode especially, the default dark scrollbar was too heavy
and drew the eye away from the log content.
*/
.showcase__log-content::-webkit-scrollbar {
width: 6px;
}
.showcase__log-content::-webkit-scrollbar-track {
background: transparent;
}
.showcase__log-content::-webkit-scrollbar-thumb {
background: var(--color-border);
/* Using --radius-xs for consistency with micro elements */
border-radius: var(--radius-xs);
}
.showcase__log-content::-webkit-scrollbar-thumb:hover {
background: var(--color-border-hover);
}
/* Light mode: even lighter scrollbar so it's barely visible */
[data-theme="light"] .showcase__log-content::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .showcase__log-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
/*
=========================================================================
SHOWCASE RESPONSIVE BREAKPOINTS — FIXED HEIGHTS AT EACH SIZE
=========================================================================
The showcase has DISCRETE fixed heights at each breakpoint.
Heights change only when crossing a breakpoint, never dynamically.
BREAKPOINT STRATEGY:
- Mobile (< 900px): Height 460px = Browser 280 + Metrics 40 + Log 140
- Tablet (900-1023px): Height 500px = Browser 300 + Metrics 40 + Log 160
- Laptop (1024-1199px): Height 540px = Browser 320 + Metrics 44 + Log 176
- Desktop (1200-1439px): Height 580px = Browser 340 + Metrics 48 + Log 192
- Large (1440px+): Height 620px = Browser 360 + Metrics 52 + Log 208
*/
/* Tablet (900px - 1023px) */
@media (min-width: 900px) {
.showcase {
/*
FIXED DIMENSIONS FOR TABLET
Width: 520px (fixed, never changes based on content)
Height: 500px = Browser 300 + Metrics 40 + Log 160
*/
width: 520px;
max-width: 520px;
height: 500px;
}
.showcase__browser {
height: 300px;
}
.showcase__metrics {
height: 40px;
}
.showcase__log {
height: 160px;
}
}
/* Laptop (1024px - 1199px) */
@media (min-width: 1024px) {
.showcase {
/*
FIXED DIMENSIONS FOR LAPTOP
Width: 560px (fixed, never changes based on content)
Height: 540px = Browser 320 + Metrics 44 + Log 176
*/
width: 560px;
max-width: 560px;
height: 540px;
}
.showcase__browser {
height: 320px;
}
.showcase__metrics {
height: 44px;
padding: 0 var(--space-4);
}
.showcase__log {
height: 176px;
}
.showcase__log-header {
height: 40px;
}
.showcase__log-content {
height: calc(100% - 40px);
padding: var(--space-2) var(--space-4);
}
}
/* Desktop (1200px - 1439px) */
@media (min-width: 1200px) {
.showcase {
/*
FIXED DIMENSIONS FOR DESKTOP
Width: 620px (fixed, never changes based on content)
Height: 580px = Browser 340 + Metrics 48 + Log 192
*/
width: 620px;
max-width: 620px;
height: 580px;
}
.showcase__browser {
height: 340px;
}
.showcase__metrics {
height: 48px;
padding: 0 var(--space-5);
}
.showcase__log {
height: 192px;
}
.showcase__log-header {
height: 44px;
}
.showcase__log-content {
height: calc(100% - 44px);
padding: var(--space-3) var(--space-5);
}
}
/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
.showcase {
/*
FIXED DIMENSIONS FOR LARGE DESKTOP
Width: 680px (fixed, never changes based on content)
Height: 620px = Browser 360 + Metrics 52 + Log 208
*/
width: 680px;
max-width: 680px;
height: 620px;
}
.showcase__browser {
height: 360px;
}
.showcase__metrics {
height: 52px;
padding: 0 var(--space-6);
}
.showcase__log {
height: 208px;
}
.showcase__log-header {
height: 48px;
padding: 0 var(--space-6);
}
.showcase__log-content {
height: calc(100% - 48px);
padding: var(--space-3) var(--space-6);
}
}
/*
=========================================================================
LOG ENTRIES — FIXED-SIZE ITEMS WITH SMOOTH ANIMATIONS
=========================================================================
CRITICAL: Each log entry has a fixed height to prevent layout shifts.
Entries animate in from the top and are clipped by the fixed-height
parent container. No dynamic resizing occurs.
*/
.log-entry {
/*
FIXED DIMENSIONS PER ENTRY
==========================
Each log entry has:
- Fixed height: 28px (never changes)
- Width: 100% of parent (constrained by parent's fixed width)
- max-width: 100% to prevent any expansion
This ensures consistent sizing regardless of content.
*/
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
height: 28px;
/* Fixed height per entry */
width: 100%;
max-width: 100%;
flex-shrink: 0;
/* Ensure the flex container doesn't expand based on children */
overflow: hidden;
border-radius: var(--radius-sm);
/*
ANIMATION STRATEGY:
- Entries start invisible and slide in from top
- 200ms animation for snappy feel
- Use transform for GPU-accelerated animation
*/
opacity: 0;
animation: logEntryAppear 0.2s var(--ease-linear-out) forwards;
/* Smooth, subtle exit animation when JS removes entries
Longer duration (0.4s) makes disappearance less noticeable */
transition: opacity 0.4s ease-out;
/* Subtle background for visual separation */
background: rgba(255, 255, 255, 0.02);
/* Prevent horizontal expansion from long text */
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/*
LOG ENTRY APPEAR ANIMATION
==========================
Fast, snappy entrance from top.
GPU-accelerated using transform.
*/
@keyframes logEntryAppear {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.log-entry__time {
color: var(--color-text-muted);
flex-shrink: 0;
font-size: 10px;
opacity: 0.7;
}
/*
AGENT NAME IN LOG — WITH COLORED DOT
====================================
Each agent has a distinctive colored dot that matches their cursor.
This creates visual connection between log entries and cursor movement.
*/
.log-entry__agent {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-text-secondary);
font-weight: var(--font-medium);
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
}
/* Colored dot in log entries — matches cursor dot color */
.log-entry__dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
/* Background color set inline by JavaScript */
}
.log-entry__action {
color: var(--color-text-secondary);
flex: 1;
/*
CRITICAL: Prevent width expansion from long text
================================================
These properties ensure that no matter how long the log message is,
it will NEVER cause the parent container to expand in width.
- min-width: 0 — Allows flex item to shrink below content size
- max-width: 100% — Constrains to available space
- overflow: hidden — Clips any overflow
- text-overflow: ellipsis — Shows ... for truncated text
- white-space: nowrap — Prevents wrapping (which could cause height changes)
*/
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
STATUS HIGHLIGHTING — HIGH CONTRAST FOR ACCESSIBILITY
=====================================================
DESIGN CRITIQUE FIX: Warning/error colors now have sufficient
contrast against both light and dark backgrounds. Using stronger
colors and ensuring WCAG AA compliance.
*/
/*
MONOCHROME LOG SYSTEM
=====================
Technical, spec-sheet aesthetic.
No colors - just structure and contrast.
*/
.log-entry__status--warning {
color: var(--color-text-primary);
font-weight: var(--font-bold);
}
/* Warning: High visibility through weight */
.log-entry:has(.log-entry__status--warning) {
background: transparent;
border-left: 4px solid var(--color-text-primary);
/* Thick logic rail */
}
.log-entry__status--error {
color: var(--color-bg-primary);
/* Inverted text */
background: var(--color-text-primary);
/* Inverted block */
padding: 0 4px;
font-weight: var(--font-bold);
}
/* Error: Inverted block for critical fail */
.log-entry:has(.log-entry__status--error) {
background: transparent;
border-left: 4px solid var(--color-text-primary);
}
.log-entry__status--success {
color: var(--color-text-secondary);
/* Subtle */
font-family: var(--font-mono);
}
/* Success: Minimal interference */
.log-entry:has(.log-entry__status--success) {
background: transparent;
border-left: 1px solid var(--color-border);
/* Thin pass rail */
}
/*
LIGHT MODE ACCESSIBILITY FIXES
==============================
Ensure all status colors pass WCAG AA (4.5:1 ratio) against
the light mode backgrounds.
*/
[data-theme="light"] .log-entry__status--warning {
color: #000;
}
[data-theme="light"] .log-entry:has(.log-entry__status--warning) {
background: transparent;
border-left-color: #000;
}
[data-theme="light"] .log-entry__status--error {
color: #FFF;
background: #000;
}
[data-theme="light"] .log-entry:has(.log-entry__status--error) {
background: transparent;
border-left-color: #000;
}
[data-theme="light"] .log-entry__status--success {
color: var(--color-text-tertiary);
}
[data-theme="light"] .log-entry:has(.log-entry__status--success) {
background: transparent;
border-left-color: rgba(0, 0, 0, 0.1);
}
/*
=========================================================================
INTEGRATIONS SECTION
=========================================================================
*/
/*
Section dividers — consistent 1px border between every major landing section.
Applied to all sections except .final-cta (last on the page).
*/
.hero,
.integrations,
.problem,
.features,
.how-it-works,
.pricing,
.faq,
.founders {
border-bottom: 1px solid var(--color-border);
}
.integrations {
padding: var(--space-6) 0;
}
.integrations__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
text-align: center;
}
.integrations__label {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin-bottom: var(--space-8);
}
.integrations__logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-4);
}
.integrations__logo {
/* Fixed-size square containers for uniform alignment */
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
/* Subtle card-style background */
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
opacity: 0.9;
/* Smooth transitions */
transition:
opacity var(--transition-fast),
transform var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
/* Hover: lift effect with subtle glow */
.integrations__logo:hover {
opacity: 1;
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.integrations__logo:active {
transform: translateY(0) scale(0.98);
}
/* Light mode adjustments */
[data-theme="light"] .integrations__logo {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .integrations__logo:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/*
Base SVG sizing for integration logos.
All logos use consistent 36px height for uniform appearance in 72x72 containers.
*/
.integrations__logo svg {
height: 36px;
width: auto;
max-width: 48px;
}
/*
LOGO-SPECIFIC SIZE ADJUSTMENTS
==============================
Fine-tuning for different logo proportions.
*/
/* Figma — Vertical logo, slightly smaller to balance */
.integrations__logo[data-name="Figma"] svg {
height: 38px;
}
/* PostHog — Wide hedgehog mark, needs to fit width constraint */
.integrations__logo[data-name="PostHog"] svg {
height: 32px;
max-width: 52px;
}
/* Hotjar — Flame icon, good at default size */
.integrations__logo[data-name="Hotjar"] svg {
height: 36px;
}
/* Primary integration logos — no special styling needed */
.integrations__logo--primary {
position: relative;
}
/* Prominent integration label with stats */
.integrations__label--prominent {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/*
Integration stats use semibold weight from our design system
for consistent visual hierarchy across the page.
*/
.integrations__stat {
font-weight: var(--font-semibold);
color: var(--color-text);
}
/*
=========================================================================
ACCESS GAP SECTION — PROBLEM AGITATION
=========================================================================
Visual comparison: Traditional Research vs Unblo
Two-column layout with contrasting styling
*/
.access-gap {
padding: var(--space-24) 0;
background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
position: relative;
}
/* Subtle top border */
.access-gap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--color-border) 20%,
var(--color-border) 80%,
transparent);
}
.access-gap__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
}
/*
ACCESS GAP HEADER — ANIMATED SECTION HEADER
============================================
Following the same animation pattern as features, how-it-works,
and pricing headers. The header animates in with a subtle scale
and fade effect when the section comes into view.
*/
.access-gap__header {
text-align: center;
margin-bottom: var(--space-12);
/*
ANIMATION INITIAL STATE
Same transform/opacity pattern as other section headers
for consistent reveal animation when scrolling into view.
*/
opacity: 0;
transform: translateY(30px) scale(0.98);
transition:
opacity 0.6s var(--ease-linear-out),
transform 0.6s var(--ease-linear-out);
}
/*
ACCESS GAP LABEL — PILL-STYLE SECTION INDICATOR
================================================
Updated to match the pill design language used across the page
(features, how-it-works, pricing sections). The pill creates a
polished, professional look that signals section context.
Uses warning color (amber/orange) to thematically indicate
"challenge/problem" context, differentiating it from the blue
accent used for solution-focused sections.
*/
.access-gap__label {
display: inline-block;
padding: var(--space-1) var(--space-4);
margin-bottom: var(--space-4);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
background: var(--color-accent-muted);
border-radius: var(--radius-full);
}
/*
Access gap headline uses the same bold weight as other section
headlines (h2) for consistent visual hierarchy across the page.
*/
.access-gap__headline {
font-family: var(--font-headline);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-bold);
line-height: 1.1;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.access-gap__headline em {
font-style: italic;
color: var(--color-accent);
}
.access-gap__subheadline {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
/* Two-column comparison layout */
.access-gap__comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
@media (max-width: 768px) {
.access-gap__comparison {
grid-template-columns: 1fr;
}
}
/* Comparison columns */
/*
Comparison columns use consistent border-radius from our design system.
*/
.access-gap__column {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.access-gap__column:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Old way — subtle muted styling */
.access-gap__column--old {
border-color: rgba(239, 68, 68, 0.2);
}
/*
New way column — accent highlight with Klein Blue glow.
Uses CSS variables for consistent color system.
*/
.access-gap__column--new {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent), 0 8px 32px var(--color-glow-tertiary);
}
.access-gap__column-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.access-gap__column-icon {
font-size: 1.5rem;
}
/*
Column titles use semibold weight from our design system
for clear visual hierarchy within comparison cards.
*/
.access-gap__column-title {
font-family: var(--font-headline);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
}
/* List of comparison items */
.access-gap__list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.access-gap__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-text-secondary);
}
.access-gap__item-icon {
flex-shrink: 0;
width: 20px;
text-align: center;
}
.access-gap__item--negative .access-gap__item-icon {
color: var(--color-error);
}
/*
Positive item icons use bold weight from our design system
for emphasis on success checkmarks.
*/
.access-gap__item--positive .access-gap__item-icon {
color: var(--color-success);
font-weight: var(--font-bold);
}
/* Stat callout at bottom of column */
/*
Stat callout uses consistent border-radius from our design system.
*/
.access-gap__stat {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-lg);
text-align: center;
}
/*
Stat values use semibold weight from our design system
for emphasis while maintaining readability.
*/
.access-gap__stat-value {
font-family: var(--font-headline);
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.access-gap__stat-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/*
Highlighted stat for Unblo column.
Uses Klein Blue glow colors for consistent color system.
*/
.access-gap__stat--highlight {
background: linear-gradient(135deg, rgba(var(--color-klein-blue-rgb), 0.1), rgba(var(--color-klein-blue-rgb), 0.05));
border: 1px solid rgba(var(--color-klein-blue-rgb), 0.2);
}
.access-gap__stat--highlight .access-gap__stat-value {
color: var(--color-accent);
}
/* CTA text at bottom */
.access-gap__cta-text {
text-align: center;
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
}
/*
=========================================================================
INDUSTRIAL LABELS — TECHNICAL, MACHINE-STAMPED AESTHETIC
========================================================
Unified style for section labels.
- Font: Monospaced for technical feel
- Shape: Sharp corners (radius-sm)
- Vibe: Uppercase, wide tracking, low-opacity background
*/
.features__label,
.access-gap__label,
.how-it-works__label,
.pricing__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
background: rgba(59, 130, 246, 0.1);
/* --color-accent with opacity */
padding: 6px 12px;
border-radius: var(--radius-sm);
display: inline-block;
margin-bottom: var(--space-4);
border: 1px solid rgba(59, 130, 246, 0.2);
/* Subtle technical border */
backdrop-filter: blur(4px);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: color, background-color var(--transition-fast);
}
.features__label:hover,
.access-gap__label:hover,
.how-it-works__label:hover,
.pricing__label:hover {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
/*
=========================================================================
FEATURES SECTION
=========================================================================
*/
.features {
padding: var(--space-24) 0;
}
.features__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
}
.features__header {
text-align: center;
margin-bottom: var(--space-16);
}
/*
FEATURES HEADLINE — COMMANDING SECTION PRESENCE
===============================================
With the larger h2 sizes, we need appropriate spacing
to let the headline breathe and command attention.
*/
.features__headline {
margin-bottom: var(--space-6);
}
/*
FEATURES SUBHEADLINE — SUPPORTIVE TEXT
======================================
Larger to maintain proportion with the bigger headline.
Should feel substantial, not like tiny fine print.
*/
.features__subheadline {
font-family: var(--font-serif);
max-width: var(--container-narrow);
margin: 0 auto;
font-size: var(--text-lg);
line-height: 1.6;
}
@media (min-width: 1200px) {
.features__subheadline {
font-size: var(--text-xl);
}
}
/*
Features grid — RESPONSIVE COLUMNS
===================================
Base: 1 column on mobile (handled by mobile breakpoint)
Tablet (768px+): 2 columns
Desktop (1024px+): 3 columns
This progressive approach prevents layout jumps and ensures
content is always readable at every screen size.
*/
/*
FEATURES GRID — ASYMMETRIC BENTO LAYOUT
========================================
Creates a layout with:
- Left column: 2 larger feature cards (stacked vertically)
- Right side: 4 smaller cards in a 2x2 grid
The grid uses 3 columns with the first column slightly wider
to give visual weight to the "hero" features on the left.
*/
.features__grid {
display: grid;
/* Left column is 1.3x wider than the two right columns for visual hierarchy */
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--chassis-gap-lg);
container-type: inline-size;
}
@media (max-width: 1024px) {
/* On tablets: Stack large cards on top, 2x2 grid below */
.features__grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: var(--chassis-gap-md);
}
}
@media (max-width: 640px) {
/* On mobile: Single column stack */
.features__grid {
grid-template-columns: 1fr;
gap: var(--chassis-gap-sm);
}
}
/* Feature card — Industrial Finish */
.feature-card {
position: relative;
padding: var(--space-8);
background: var(--color-card-industrial);
border: 1px solid var(--border-industrial);
border-radius: var(--radius-lg);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: opacity, transform 120ms cubic-bezier(0.2, 0, 0, 1);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
contain: content;
display: flex;
flex-direction: column;
}
.feature-card:hover {
border-color: var(--border-industrial-hover);
background: var(--color-card-industrial-hover);
transform: none;
/* No movement, just state change */
}
/*
LARGE FEATURE CARDS — Left Column Heroes
=========================================
These cards occupy the left column of the asymmetric bento layout.
They have additional padding and styling to emphasize their importance
as the "hero" features (Grounded in Your Data, Test Every Iteration).
*/
.feature-card--large {
/* Stays in natural flow - left column via grid order */
padding: var(--space-10);
/* Extra padding to feel more substantial */
}
/* On tablets, large cards span full width at top */
@media (max-width: 1024px) {
.feature-card--large {
grid-column: span 2;
}
}
/* On mobile, large cards are same as regular (single column) */
@media (max-width: 640px) {
.feature-card--large {
grid-column: span 1;
padding: var(--space-6);
}
}
.feature-card__icon {
width: 40px;
height: 40px;
margin-bottom: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
background: var(--color-icon-bg);
border-radius: var(--radius-sm);
}
.feature-card__icon svg {
width: 20px;
height: 20px;
}
/*
FEATURE CARD TITLE — CLEAR HIERARCHY
====================================
Card titles should be readable and distinct but not
compete with the section headline above.
*/
.feature-card__title {
font-family: var(--font-body);
font-size: var(--text-xl);
font-weight: var(--font-medium);
/* Lighter than semibold */
margin-bottom: var(--space-3);
letter-spacing: -0.015em;
/* Subtle tightening */
}
@media (min-width: 1200px) {
.feature-card__title {
font-size: var(--text-2xl);
/* Larger on desktop */
}
}
/*
FEATURE CARD DESCRIPTION — READABLE BODY TEXT
=============================================
Slightly larger for comfortable reading within cards.
*/
.feature-card__description {
font-family: var(--font-serif);
font-size: var(--text-sm);
line-height: 1.7;
}
@media (min-width: 1200px) {
.feature-card__description {
font-size: var(--text-base);
/* Larger for readability */
}
}
/* Mini agents visual in feature card */
.feature-card__visual {
margin-top: var(--space-6);
}
.feature-card__agents {
display: flex;
gap: var(--space-3);
}
.mini-agent {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
animation: miniAgentFloat 3s ease-in-out infinite;
}
.mini-agent--1 {
animation-delay: 0s;
}
.mini-agent--2 {
animation-delay: 0.5s;
}
.mini-agent--3 {
animation-delay: 1s;
}
@keyframes miniAgentFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.mini-agent__avatar {
font-size: var(--text-base);
}
.mini-agent__name {
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
}
/*
=========================================================================
HOW IT WORKS SECTION
=========================================================================
*/
.how-it-works {
padding: var(--space-24) 0;
background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}
.how-it-works__container {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--space-6);
}
.how-it-works__header {
text-align: center;
margin-bottom: var(--space-16);
}
/*
How-it-works headline uses the same bold weight as other section
headlines for consistent visual hierarchy across the page.
*/
.how-it-works__headline {
font-family: var(--font-headline);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-bold);
line-height: 1.1;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.how-it-works__headline em {
font-style: italic;
color: var(--color-accent);
}
.how-it-works__subheadline {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Steps */
.steps {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.step {
display: flex;
gap: var(--space-6);
padding: var(--space-6);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: border-color, transform var(--transition-base);
}
.step:hover {
border-color: var(--color-border-hover);
transform: translateX(8px);
}
.step__number {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: var(--font-semibold);
letter-spacing: 0.04em;
color: var(--color-accent);
background: var(--color-accent-muted);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
}
.step__content {
flex: 1;
}
.step__time {
display: inline-block;
margin-bottom: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-accent);
}
/*
STEP TITLE — CLEAR HIERARCHY
============================
Step titles need to be substantial enough to anchor
each step card, creating clear visual landmarks.
*/
.step__title {
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
@media (min-width: 1200px) {
.step__title {
font-size: var(--text-xl);
/* Larger on desktop */
}
}
/*
STEP DESCRIPTION — READABLE BODY TEXT
=====================================
Comfortable reading size within the step cards.
*/
.step__description {
font-family: var(--font-serif);
font-size: var(--text-sm);
line-height: 1.7;
}
@media (min-width: 1200px) {
.step__description {
font-size: var(--text-base);
/* Larger on desktop */
}
}
/*
=========================================================================
PRICING SECTION
=========================================================================
*/
.pricing {
padding: var(--space-24) 0;
}
.pricing__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
}
.pricing__header {
max-width: var(--container-narrow);
margin: 0 auto;
padding: var(--space-12) var(--space-10);
text-align: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 18px 44px -34px rgba(0, 0, 0, 0.32);
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.pricing__header:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.4);
}
.pricing__header .pricing__label {
margin-bottom: var(--space-5);
}
.pricing__headline {
margin-top: 0;
margin-bottom: var(--space-4);
font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
line-height: 1.15;
letter-spacing: -0.02em;
}
.pricing__headline em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
color: var(--color-accent);
}
.pricing__subheadline {
font-family: var(--font-serif);
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 44ch;
margin: 0 auto;
}
.pricing__cta {
margin-top: var(--space-8);
display: flex;
justify-content: center;
}
@media (max-width: 640px) {
.pricing__header {
padding: var(--space-8) var(--space-5);
}
}
/*
=========================================================================
FAQ SECTION — Objection-handling per landing-copy-guide §6.
Native / for progressive disclosure (no JS, accessible).
=========================================================================
*/
.faq {
padding: var(--space-24) 0;
}
.faq__container {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.faq__header {
text-align: center;
margin-bottom: var(--space-12);
}
.faq__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
background: rgba(59, 130, 246, 0.1);
padding: 6px 12px;
border-radius: var(--radius-sm);
display: inline-block;
margin-bottom: var(--space-4);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.faq__headline {
font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
.faq__list {
border-top: 1px solid var(--color-border);
}
.faq__item {
border-bottom: 1px solid var(--color-border);
}
.faq__question {
list-style: none;
cursor: pointer;
padding: var(--space-5) 0;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-text-primary);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: color 0.15s ease;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::after {
content: "";
flex-shrink: 0;
width: 12px;
height: 12px;
border-right: 1.5px solid var(--color-text-secondary);
border-bottom: 1.5px solid var(--color-text-secondary);
transform: rotate(45deg) translateY(-3px);
transition: transform 0.2s ease;
}
.faq__item[open] .faq__question::after {
transform: rotate(225deg) translateY(2px);
}
.faq__question:hover {
color: var(--color-accent);
}
.faq__answer {
padding: 0 0 var(--space-6);
font-family: var(--font-serif);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 70ch;
}
.faq__answer p {
margin: 0 0 var(--space-3);
}
.faq__answer ol,
.faq__answer ul {
margin: 0 0 var(--space-3);
padding-left: var(--space-5);
list-style-position: outside;
}
.faq__answer ul {
list-style-type: disc;
}
.faq__answer ol li,
.faq__answer ul li {
margin-bottom: var(--space-2);
padding-left: var(--space-1);
}
.faq__answer ul li::marker {
color: var(--color-accent);
}
.faq__answer p:last-child,
.faq__answer ol:last-child,
.faq__answer ul:last-child {
margin-bottom: 0;
}
/*
=========================================================================
FINAL CTA SECTION
=========================================================================
*/
.final-cta {
padding: var(--space-24) 0;
text-align: center;
position: relative;
overflow: hidden;
}
/* Background gradient — Klein Blue glow */
.final-cta::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200%;
height: 100%;
background: radial-gradient(ellipse 50% 80% at 50% 20%, var(--color-glow-primary) 0%, transparent 70%);
pointer-events: none;
opacity: 0.5;
}
.final-cta__container {
position: relative;
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Testimonial quote */
.final-cta__quote {
margin-bottom: var(--space-12);
padding: var(--space-8);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
text-align: left;
}
/*
TESTIMONIAL QUOTE — IMPACTFUL SOCIAL PROOF
==========================================
The quote should feel substantial and credible.
Larger text makes it more impactful and trustworthy.
*/
.final-cta__quote p {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-style: italic;
line-height: 1.55;
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
@media (min-width: 1200px) {
.final-cta__quote p {
font-size: var(--text-2xl);
/* Larger on desktop for impact */
line-height: 1.5;
}
}
.final-cta__quote cite {
display: flex;
flex-direction: column;
font-style: normal;
}
.final-cta__cite-name {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
}
.final-cta__cite-role {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
}
.final-cta__headline {
margin-bottom: var(--space-8);
}
.final-cta__btn {
margin-bottom: var(--space-4);
}
.final-cta__social-proof {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
}
/*
=========================================================================
FOOTER
=========================================================================
*/
.footer {
position: relative;
padding: var(--space-16) 0 var(--space-8);
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.footer__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: var(--space-12);
margin-bottom: var(--space-12);
}
.footer__brand {
max-width: 220px;
}
/* Footer logo matches the nav logo for brand consistency */
.footer__logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-logo);
font-size: calc(var(--text-xl) + 0.32rem);
font-weight: var(--font-medium);
font-style: normal;
color: var(--color-text-primary);
letter-spacing: -0.02em;
text-transform: lowercase;
margin-bottom: var(--space-3);
}
.footer__logo:hover {
color: var(--color-text-primary);
}
.footer__logo-dot {
color: var(--color-accent);
}
.footer__tagline {
font-family: var(--font-serif);
font-size: var(--text-sm);
font-style: italic;
color: var(--color-text-tertiary);
}
.footer__column-title {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-tertiary);
margin-bottom: var(--space-4);
}
.footer__links li {
margin-bottom: var(--space-2);
}
.footer__links a {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.footer__links a:hover {
color: var(--color-text-primary);
}
/*
=========================================================================
THEME TOGGLE
=========================================================================
*/
.theme-toggle {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: var(--z-theme-toggle);
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
background: var(--color-surface-glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
box-shadow: var(--shadow-lg);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: transform, border-color, box-shadow var(--transition-base);
}
.theme-toggle:hover {
transform: scale(1.05);
border-color: var(--color-border-hover);
box-shadow: var(--shadow-xl);
}
.theme-toggle:active {
transform: scale(0.95);
}
.theme-toggle__icon {
width: 20px;
height: 20px;
color: var(--color-text-primary);
/* FIXED: List properties explicitly instead of 'all' for better performance */
transition: color, opacity, transform var(--transition-base);
}
[data-theme="dark"] .theme-toggle__icon--sun {
opacity: 1;
}
[data-theme="dark"] .theme-toggle__icon--moon {
position: absolute;
opacity: 0;
}
[data-theme="light"] .theme-toggle__icon--sun {
position: absolute;
opacity: 0;
}
[data-theme="light"] .theme-toggle__icon--moon {
opacity: 1;
}
/*
=========================================================================
RESPONSIVE STYLES
=========================================================================
Target Resolutions:
DESKTOP:
- 1920×1080 (Full HD) — covered by 1440px+ breakpoint
- 1536×864 (Common laptop) — covered by 1440px+ and 1200px+ breakpoints
- 1366×768 (Smaller laptop) — new breakpoint added
TABLET:
- 768×1024 (iPad 9.7")
- 810×1080 (iPad 10th gen)
- 820×1180 (iPad Air)
MOBILE:
- 360×800 (Small Android)
- 390×844 (iPhone 14/15)
- 393×873 (Google Pixel)
*/
/*
=========================================================================
DESKTOP BREAKPOINTS (Large Laptops & Monitors)
=========================================================================
*/
/*
1366px Desktop (smaller laptops like 13" MacBook Air)
===================================================
Optimized for 1366×768 resolution — common on older/smaller laptops.
Need slightly tighter spacing while maintaining readability.
*/
/*
1280-1399px DESKTOP (13-14" laptops like MacBook Air)
=====================================================
Typography and component spacing adjustments for smaller laptops.
Note: Hero container layout is handled by the main hero__container
media queries above — these are supplementary styles only.
*/
@media (min-width: 1280px) and (max-width: 1399px) {
/* Container max-width for this range */
:root {
--container-max: 1200px;
}
/*
TYPOGRAPHY SCALING: Slightly smaller headlines for 1366px screens
to ensure comfortable line lengths.
*/
.hero__headline {
font-size: 2.75rem;
/* 44px — commanding but not overwhelming */
line-height: 1.1;
margin-bottom: var(--space-5);
}
.hero__subheadline {
font-size: 0.9375rem;
margin-bottom: var(--space-6);
}
/* Features grid with tighter gaps */
.features__grid {
gap: var(--space-4);
}
.feature-card {
padding: var(--space-6);
}
/* Footer with tighter spacing */
.footer__grid {
gap: var(--space-6);
}
}
/*
1400-1599px DESKTOP (15" laptops, common resolution)
====================================================
Typography adjustments for 1536×864 resolution.
Hero layout is handled by the main hero__container queries.
*/
@media (min-width: 1400px) and (max-width: 1599px) {
:root {
--container-max: 1320px;
}
/* Typography scaling for this range */
.hero__headline {
font-size: 3.25rem;
/* 52px */
margin-bottom: var(--space-6);
}
.hero__subheadline {
font-size: 1rem;
}
}
/*
1600px+ DESKTOP (Full HD & Large Monitors)
==========================================
Generous spacing for 1920×1080 and larger displays.
Hero layout is handled by the main hero__container queries.
*/
@media (min-width: 1600px) {
:root {
--container-max: 1400px;
}
/* Generous hero padding on large screens */
.hero {
padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-6);
}
/* Large headline for big screens */
.hero__headline {
font-size: 4rem;
/* 64px — commanding on large screens */
line-height: 1.05;
}
.hero__subheadline {
font-size: 1.125rem;
/* 18px */
line-height: 1.9;
}
.showcase__log-content {
font-size: 13px;
}
/* Features with generous spacing */
.features {
padding: var(--space-32) 0;
}
.features__grid {
gap: var(--space-8);
}
.feature-card {
padding: var(--space-10);
}
/* Pricing with more breathing room */
.pricing {
padding: var(--space-32) 0;
}
/* Footer spreads out nicely */
.footer__container {
padding: var(--space-16) var(--space-8);
}
}
/*
=========================================================================
TABLET BREAKPOINTS (768-1024px)
=========================================================================
Covers: 768×1024, 810×1080, 820×1180 (iPad variants)
*/
/*
900-1023px TABLET LANDSCAPE / SMALL DESKTOP
===========================================
Transition zone between tablet and desktop layouts.
Hero layout is managed by the main hero__container queries.
*/
@media (min-width: 900px) and (max-width: 1023px) {
/* Typography scaling for this breakpoint */
.hero__headline {
font-size: 2.25rem;
/* 36px */
line-height: 1.12;
margin-bottom: var(--space-4);
}
.hero__subheadline {
font-size: 0.875rem;
margin-bottom: var(--space-5);
}
.showcase__website {
min-height: 180px;
}
/* Features as 2 columns */
.features__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.feature-card--large {
grid-column: span 2;
}
.feature-card {
padding: var(--space-5);
}
}
/*
Tablet portrait (768-899px) — iPad, iPad 10th gen, iPad Air
===========================================================
Optimized for portrait tablet viewing.
Shows stacked layout with larger touch targets.
*/
@media (min-width: 768px) and (max-width: 899px) {
/* Navigation stays desktop-style on tablets */
.nav {
padding: var(--space-3) var(--space-5);
}
.nav__container {
padding: var(--space-3) var(--space-5);
max-width: calc(100% - 32px);
}
.nav__links {
gap: var(--space-4);
}
.nav__link {
font-size: var(--text-xs);
}
.nav__actions {
gap: var(--space-2);
margin-left: var(--space-3);
/*
Smaller padding on tablet portrait to conserve space.
The divider is still visible but more compact.
*/
padding-left: var(--space-3);
}
/*
Slightly shorter divider on smaller tablets to maintain proportion.
*/
.nav__actions::before {
height: 16px;
}
/* Slightly smaller nav CTA button */
.btn--nav {
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
}
/*
HERO ADJUSTMENTS FOR TABLET PORTRAIT
====================================
The main hero layout is handled by hero__container queries.
These are supplementary typography and spacing adjustments.
*/
.hero {
min-height: auto;
padding: calc(var(--nav-height) + var(--space-10)) 0 var(--space-10);
}
.hero__headline {
font-size: 2.5rem;
/* 40px — commanding on tablet */
line-height: 1.1;
margin-bottom: var(--space-5);
}
.hero__subheadline {
font-size: 1rem;
/* 16px — comfortable reading on tablet */
margin-bottom: var(--space-6);
}
.hero__cta {
justify-content: center;
gap: var(--space-4);
}
/*
SHOWCASE SIZING FOR TABLET PORTRAIT
===================================
Constrain the showcase width on tablet portrait.
*/
.hero__showcase {
max-width: 560px;
margin: 0 auto;
}
/*
SHOWCASE — TABLET PORTRAIT FIXED DIMENSIONS (768-899px)
=======================================================
Fixed width AND height for tablet portrait orientation.
Width: 500px (never changes based on content)
Height: 480px = Browser 290 + Metrics 40 + Log 150
*/
.showcase {
width: 500px;
max-width: 500px;
height: 480px;
}
.showcase__browser {
height: 290px;
}
.showcase__metrics {
height: 40px;
}
.showcase__log {
height: 150px;
}
.showcase__log-header {
height: 36px;
}
.showcase__log-content {
height: calc(100% - 36px);
}
/* Show summary panel on tablets */
.website__summary {
display: flex;
}
.website__content--checkout {
grid-template-columns: 1fr 140px;
}
/* Features as 2 columns */
.features {
padding: var(--space-16) 0;
}
.features__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
.feature-card--large {
grid-column: span 2;
}
.feature-card {
padding: var(--space-6);
}
.feature-card__title {
font-size: var(--text-lg);
}
/* How it works */
.how-it-works {
padding: var(--space-16) 0;
}
.step {
gap: var(--space-5);
padding: var(--space-5);
}
.step__number {
width: 44px;
height: 44px;
font-size: var(--text-base);
}
.pricing {
padding: var(--space-16) 0;
}
/* Footer adjustments */
.footer__grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--space-6);
}
.footer__brand {
grid-column: span 4;
text-align: center;
margin-bottom: var(--space-4);
}
}
/*
=========================================================================
MOBILE BREAKPOINTS (below 768px)
=========================================================================
*/
/* Tablet to Mobile transition (481-767px) */
@media (max-width: 767px) {
/*
Navigation — Mobile Floating Glassmorphic Bar
=============================================
On mobile, we keep the beautiful floating aesthetic but make
the bar simpler: just logo + hamburger toggle.
This maintains the Raycast feel while being practical for mobile.
*/
.nav {
/* Reduce padding on mobile for more screen real estate */
padding: var(--space-3) var(--space-4);
}
.nav__container {
/*
On mobile, the nav bar expands more but stays floating.
We use a slightly reduced padding for compact feel.
*/
padding: var(--space-3) var(--space-4);
max-width: 100%;
gap: var(--space-4);
/*
Maintain that premium glassmorphic look on mobile too.
Using --radius-lg for consistency with desktop nav container.
*/
border-radius: var(--radius-lg);
}
/*
Hide desktop navigation links and actions on mobile.
Uses high specificity to ensure it overrides desktop styles.
Note: Do NOT use !important here as JavaScript needs to override
these styles when the hamburger menu is opened.
*/
.nav .nav__container .nav__links,
.nav .nav__container .nav__actions {
display: none;
}
/* Show the hamburger toggle — positioned at the end via flex */
.nav .nav__container .nav__mobile-toggle {
display: flex;
margin-left: auto;
}
/*
HERO MOBILE ADJUSTMENTS
=======================
The main hero layout is handled by hero__container queries.
These are supplementary typography and spacing adjustments.
*/
.hero {
min-height: auto;
padding-top: calc(var(--nav-height) + var(--space-10));
padding-bottom: var(--space-10);
}
.hero__headline {
font-size: 2rem;
/* 32px — bold but fits mobile screens */
line-height: 1.1;
margin-bottom: var(--space-4);
}
.hero__subheadline {
font-size: 0.9375rem;
/* 15px — comfortable on mobile */
margin-bottom: var(--space-5);
}
.hero__proof {
justify-content: center;
}
.hero__cta {
justify-content: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.hero__trust {
text-align: center;
}
/*
SHOWCASE MOBILE ADJUSTMENTS
===========================
Overflow hidden prevents horizontal scroll on mobile.
*/
.hero__showcase {
overflow-x: hidden;
}
/* Showcase content adjustments */
.website__content {
grid-template-columns: 1fr;
}
.website__sidebar,
.website__summary {
display: none;
}
.website__content--checkout {
grid-template-columns: 1fr;
}
/*
B2B SaaS interface mobile adjustments
=====================================
On mobile, the sidebar becomes a minimal icon strip.
The main content area adapts to smaller screens.
FIXED: Tighter values matching the desktop updates.
*/
.showcase__website--saas {
grid-template-columns: 24px 1fr;
}
.showcase__website--saas .website__sidebar {
display: flex;
padding: 4px 0;
}
.website__sidebar-item {
width: 18px;
height: 18px;
}
.website__sidebar-item svg {
width: 9px;
height: 9px;
}
.website__main-area {
padding: 4px;
gap: 4px;
}
.website__page-header {
padding-bottom: 4px;
}
.website__breadcrumb {
font-size: 7px;
}
.website__btn {
padding: 2px 5px;
font-size: 6px;
}
.website__filters {
gap: 4px;
padding: 3px 0;
}
.website__filter {
padding: 2px 4px;
font-size: 6px;
}
.website__search {
font-size: 6px;
padding: 2px 5px;
}
.website__table-header,
.website__table-row {
grid-template-columns: 12px 1fr 45px 40px 16px;
gap: 4px;
padding: 4px 6px;
font-size: 6px;
}
.website__avatar {
width: 12px;
height: 12px;
font-size: 5px;
}
.website__checkbox {
width: 8px;
height: 8px;
}
.website__badge {
padding: 1px 3px;
font-size: 5px;
}
.website__table-footer {
padding: 3px 6px;
font-size: 6px;
}
/* Integrations */
.integrations {
padding: var(--space-8) 0;
}
.integrations__logos {
gap: var(--space-6);
}
.integrations__logo svg {
height: 24px;
}
/* Features */
.features {
padding: var(--space-12) 0;
}
.features__header {
margin-bottom: var(--space-10);
}
.features__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.feature-card--large {
grid-column: span 1;
}
.feature-card {
padding: var(--space-5);
}
.feature-card__icon {
width: 40px;
height: 40px;
margin-bottom: var(--space-4);
}
.feature-card__title {
font-size: var(--text-lg);
}
.feature-card__description {
font-size: var(--text-sm);
}
/* How it works */
.how-it-works {
padding: var(--space-12) 0;
}
.steps {
gap: var(--space-5);
}
.step {
gap: var(--space-4);
padding: var(--space-4);
}
.pricing {
padding: var(--space-12) 0;
}
/* Final CTA */
.final-cta {
padding: var(--space-12) 0;
}
.final-cta__quote {
padding: var(--space-5);
font-size: var(--text-base);
}
/* Footer */
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.footer__brand {
grid-column: span 2;
max-width: none;
text-align: center;
margin-bottom: var(--space-4);
}
.footer__column {
text-align: center;
}
}
/*
Mobile (360-480px) — Small phones (360×800, 390×844, 393×873)
=============================================================
Optimized for typical smartphone screens.
Even on small screens, text should feel bold and commanding.
*/
@media (max-width: 480px) {
/*
MOBILE HEADLINE — STILL BOLD, JUST SMALLER
==========================================
Using a fixed size that's still quite large for mobile.
The clamp() in the base rule will handle this, but we
ensure a minimum dramatic presence on small screens.
*/
.hero__headline {
font-size: 1.875rem;
/* 30px — bold even on small phones */
line-height: 1.1;
letter-spacing: -0.02em;
}
/*
MOBILE SUBHEADLINE — TWO CLEAR LINES ON SMALL SCREENS
=======================================================
On mobile, the
may cause awkward line breaks. We allow
natural word wrapping while keeping the two statements
visually distinct through generous line-height.
*/
.hero__subheadline {
font-size: 0.875rem;
/* 14px — compact but readable on mobile */
line-height: 1.7;
/* Clear separation between thoughts */
margin-bottom: var(--space-5);
max-width: 100%;
/* Allow full width on mobile */
}
/* On mobile, let the line break create natural separation */
.hero__subheadline br {
display: block;
/* Ensure the break works */
content: "";
/* No visual artifact */
margin-top: var(--space-2);
/* Tiny gap between the two lines */
}
.hero__proof {
flex-direction: column;
align-items: center;
}
.hero__cta {
flex-direction: column;
width: 100%;
}
.hero__cta .btn {
width: 100%;
}
/* Buttons sized appropriately for touch */
.btn--large {
padding: var(--space-4) var(--space-6);
font-size: var(--text-base);
}
/* Section headlines should still be substantial on mobile */
h2 {
font-size: 1.5rem;
/* 24px — still commanding on small screens */
line-height: 1.15;
}
/*
SHOWCASE — MOBILE FIXED DIMENSIONS (480px and below)
====================================================
Fixed width AND height on small screens.
Width: 100% of container, max 360px (never changes based on content)
Height: 380px = Browser 200 + Metrics 32 + Log 148 (increased for better visibility)
ACTIVITY FEED VISIBILITY:
The activity feed is fully visible and readable on mobile with:
- Increased log height (148px vs 128px) to show more content
- Readable font sizes (10-11px instead of 8-9px)
- Proper spacing and padding for touch interaction
*/
.showcase {
width: 100%;
max-width: 360px;
height: 380px;
/* Increased from 360px to accommodate larger log */
}
.showcase__browser {
height: 200px;
}
.showcase__browser-header {
padding: var(--space-1) var(--space-2);
}
.showcase__browser-url {
font-size: 9px;
padding: 4px var(--space-2);
}
.showcase__browser-status {
display: none;
/* Hide on very small screens for space */
}
.showcase__metrics {
height: 32px;
padding: 0 var(--space-2);
}
.showcase__metric-value {
font-size: 12px;
}
.showcase__metric-label {
font-size: 7px;
}
/*
ACTIVITY LOG — MOBILE OPTIMIZED FOR VISIBILITY
==============================================
Increased height and font sizes to ensure the activity feed
is clearly visible and readable on all mobile devices.
*/
.showcase__log {
height: 148px;
/* Increased from 128px for better visibility */
}
.showcase__log-header {
height: 32px;
/* Increased from 28px for better touch targets */
padding: 0 var(--space-3);
}
.showcase__log-title {
font-size: 10px;
/* Slightly larger for readability */
}
.showcase__log-count {
font-size: 9px;
/* Readable on mobile */
}
.showcase__log-content {
height: calc(100% - 32px);
/* 116px content area */
padding: var(--space-2) var(--space-3);
/* More padding for readability */
font-size: 10px;
/* Increased from 9px for better readability */
/* Ensure scrolling works smoothly on mobile */
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
.log-entry {
height: 26px;
/* Increased from 24px for better readability */
padding: 0 var(--space-3);
/* More horizontal padding */
gap: var(--space-2);
/* Slightly more gap between elements */
}
.log-entry__time {
font-size: 9px;
/* Increased from 8px */
}
.log-entry__agent {
font-size: 9px;
/* Increased from 8px */
}
.log-entry__action {
font-size: 10px;
/* Increased from 9px for better readability */
}
/* Website content adjustments for mobile */
.showcase__website {
padding: var(--space-2);
}
.showcase__website--saas {
grid-template-columns: 20px 1fr;
}
.website__header {
margin-bottom: var(--space-2);
padding-bottom: var(--space-1);
}
.website__logo-text {
font-size: var(--text-xs);
}
.website__nav {
display: none;
}
.website__form {
gap: var(--space-2);
}
.website__input {
height: 24px;
font-size: 10px;
}
.website__cta {
height: 28px;
font-size: 10px;
}
/* Integrations on mobile */
.integrations__logos {
gap: var(--space-4);
}
.integrations__logo svg {
height: 20px;
}
/* Features adjustments */
.feature-card__agents {
flex-direction: column;
align-items: flex-start;
}
.mini-agent {
padding: 6px 10px;
}
/* Steps on mobile */
.step {
flex-direction: column;
text-align: center;
}
.step__number {
margin: 0 auto;
}
/* Footer on mobile */
.footer__grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer__brand {
grid-column: span 1;
}
.theme-toggle {
bottom: var(--space-4);
right: var(--space-4);
width: 40px;
height: 40px;
}
}
/*
EXTRA SMALL MOBILE (below 360px)
================================
Safety net for very small devices or split-screen mode.
Only typography and padding adjustments — layout handled by main queries.
*/
@media (max-width: 359px) {
.hero__headline {
font-size: 1.625rem;
/* 26px — minimum readable headline */
}
.hero__subheadline {
font-size: 0.8125rem;
/* 13px */
}
.btn--large {
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
}
h2 {
font-size: 1.375rem;
/* 22px */
}
.features__container,
.how-it-works__container,
.pricing__container,
.footer__container {
padding: 0 var(--space-4);
}
.feature-card,
.step {
padding: var(--space-4);
}
}
/*
=========================================================================
RESPONSIVE CONTAINER UTILITY
=========================================================================
A consistent container class that provides responsive padding
across all breakpoints. Use this for any section container to
ensure consistent spacing throughout the landing page.
This ensures visual consistency and makes responsive adjustments
easier to manage from one central location.
*/
.container-responsive {
/*
Base mobile padding (16px) — comfortable on small screens.
Uses the CSS variable defined in :root for consistency.
*/
padding-left: var(--container-padding-mobile);
padding-right: var(--container-padding-mobile);
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
/* Tablet: Increase padding for more breathing room */
@media (min-width: 768px) {
.container-responsive {
padding-left: var(--container-padding-tablet);
padding-right: var(--container-padding-tablet);
}
}
/* Desktop: Generous padding for laptops and monitors */
@media (min-width: 1024px) {
.container-responsive {
padding-left: var(--container-padding-desktop);
padding-right: var(--container-padding-desktop);
}
}
/* Wide screens: Extra padding for large monitors */
@media (min-width: 1440px) {
.container-responsive {
padding-left: var(--container-padding-wide);
padding-right: var(--container-padding-wide);
}
}
/*
=========================================================================
ACCESSIBILITY
=========================================================================
*/
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
=========================================================================
LINEAR-STYLE ANIMATIONS — SPOTLIGHT REVEALS & SHIMMER EFFECTS
=========================================================================
Inspired by Linear's signature animation patterns:
1. SPOTLIGHT REVEALS: Content is "illuminated" by a passing glow as it
enters the viewport. A gradient beam sweeps across the border/text,
guiding the user's eye down the page like a flashlight.
2. SHIMMER EFFECT: A diagonal shimmer mask that runs across card borders
and buttons. Creates polish and suggests activity even on static elements.
3. MOUSE-FOLLOWING GLOW: Buttons and cards have a subtle glow that tracks
the mouse cursor (proximity glow effect).
4. TACTILE FEEDBACK: Elements scale down slightly on click for that
responsive, "clicky" feel that makes interactions satisfying.
*/
/*
SHIMMER ANIMATION — diagonal sweep across element borders.
This creates that polished "active" feeling Linear is known for.
The shimmer moves slowly and subtly — not distracting.
*/
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/*
SPOTLIGHT SWEEP — illuminates border on scroll reveal.
A horizontal glow that passes across the element once,
drawing the eye to newly visible content.
*/
@keyframes spotlightSweep {
0% {
opacity: 0;
background-position: -100% 50%;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
background-position: 200% 50%;
}
}
/*
BORDER GLOW PULSE — subtle illumination on spotlight reveal.
Creates the "flashlight shining on content" effect.
*/
@keyframes borderGlow {
0% {
box-shadow:
0 0 0 1px var(--color-border),
0 0 0 0 transparent;
}
50% {
box-shadow:
0 0 0 1px var(--color-border-hover),
0 0 30px 0 rgba(59, 130, 246, 0.15);
}
100% {
box-shadow:
0 0 0 1px var(--color-border),
0 0 0 0 transparent;
}
}
/*
SHIMMER BORDER — Applied to cards and interactive elements.
Creates a moving highlight along the border that suggests polish.
Usage: Add class "shimmer-border" to any element.
The shimmer runs continuously but very slowly for subtlety.
*/
.shimmer-border {
position: relative;
overflow: hidden;
}
/* The shimmer effect runs along the border via a pseudo-element */
.shimmer-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
/* Border thickness */
pointer-events: none;
/*
Diagonal gradient creates the shimmer highlight.
The gradient is mostly transparent with a bright spot
that sweeps across as the background-position animates.
*/
background: linear-gradient(110deg,
transparent 25%,
rgba(255, 255, 255, 0.08) 37%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.08) 63%,
transparent 75%);
background-size: 200% 100%;
/* Mask to only show the border, not fill */
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
/* Slow, continuous animation — subtle, not distracting */
animation: shimmer 6s ease-in-out infinite;
opacity: 0.6;
}
/* Hover intensifies the shimmer slightly */
.shimmer-border:hover::before {
opacity: 1;
animation-duration: 3s;
}
/*
SPOTLIGHT REVEAL — Applied to elements as they scroll into view.
Creates the "illuminated" entrance effect Linear is known for.
The element starts with a dim glow that sweeps across once,
then settles into its final state.
*/
.spotlight-reveal {
position: relative;
}
/* The spotlight effect is a sweeping highlight */
.spotlight-reveal::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
pointer-events: none;
opacity: 0;
/* Horizontal gradient beam that sweeps across */
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 45%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.1) 55%,
transparent 100%);
background-size: 200% 100%;
}
/* When the element is revealed, play the spotlight animation */
.spotlight-reveal.is-revealed::after {
animation: spotlightSweep 1.2s var(--ease-linear-out) forwards;
}
/*
MOUSE-FOLLOWING GLOW — proximity glow effect on interactive elements.
The glow "follows" the mouse cursor, creating depth and interactivity.
This is controlled via JavaScript which updates CSS custom properties:
--mouse-x and --mouse-y based on cursor position relative to element.
*/
.mouse-glow {
position: relative;
overflow: hidden;
}
/*
CRITICAL FIX: Nav container must allow overflow for mobile menu
==============================================================
The .mouse-glow and .shimmer-border classes add overflow:hidden
for their visual effects, but the nav container needs overflow:visible
so the mobile hamburger dropdown menu (which is positioned absolutely)
can extend beyond the container boundaries.
Without this fix, the mobile menu gets clipped and appears broken.
*/
.nav__container.mouse-glow,
.nav__container.shimmer-border {
overflow: visible;
}
/* The glow itself is a radial gradient that moves with the mouse */
.mouse-glow::before {
content: '';
position: absolute;
width: var(--glow-spread, 120px);
height: var(--glow-spread, 120px);
border-radius: 50%;
pointer-events: none;
/* Position based on mouse coordinates (set by JS) */
left: var(--mouse-x, 50%);
top: var(--mouse-y, 50%);
transform: translate(-50%, -50%);
/* Soft radial glow that fades at edges */
background: radial-gradient(circle,
rgba(255, 255, 255, var(--glow-opacity, 0.1)) 0%,
transparent 70%);
/* Smooth transition as mouse moves — but fast for responsiveness */
transition: opacity var(--transition-fast);
opacity: 0;
z-index: 1;
}
/* Show glow on hover */
.mouse-glow:hover::before {
opacity: 1;
}
/*
TACTILE CLICK FEEDBACK — Linear-style "press down" effect.
Elements scale down slightly on click, creating satisfying tactile feel.
This happens FAST (80ms) for that instant response.
*/
.tactile-press {
transition: transform var(--transition-instant);
}
.tactile-press:active {
transform: scale(0.97);
}
/*
BUTTON-SPECIFIC TACTILE FEEDBACK
================================
Buttons get enhanced tactile behavior: scale + subtle shadow change.
The combination creates a convincing "pressed" state.
*/
.btn {
/* Already has transitions from base styles, add tactile behavior */
transition:
transform var(--transition-instant),
box-shadow var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast);
}
/* Tactile press-down on click */
.btn:active {
transform: scale(0.97) translateY(1px);
}
/*
FEATURE CARDS — Apply shimmer and spotlight effects.
Cards get the full Linear treatment: shimmer border + spotlight reveal.
*/
.feature-card {
transition:
transform var(--transition-base),
box-shadow var(--transition-base),
border-color var(--transition-fast);
}
/* Subtle scale on hover — Linear uses very restrained hover states */
.feature-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
}
/* Tactile press feedback on cards */
.feature-card:active {
transform: translateY(0) scale(0.99);
}
/*
NAV LINKS — Faster hover transitions for snappy feel.
*/
.nav__link {
transition: color var(--transition-fast);
}
/*
INTEGRATION LOGOS — Subtle scale on hover with fast transition.
*/
.integrations__logo {
transition:
transform var(--transition-fast),
opacity var(--transition-fast);
}
.integrations__logo:hover {
transform: scale(1.05);
}
/*
STEP ITEMS — Apply spotlight reveal behavior.
*/
.step {
transition:
opacity var(--transition-slow),
transform var(--transition-slow);
}
/*
THEME TOGGLE — Tactile press + fast transitions.
*/
.theme-toggle {
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast);
}
.theme-toggle:active {
transform: scale(0.9);
}
/*
SCROLL REVEAL BASE STATES
=========================
Elements that will be revealed on scroll start in these states.
JavaScript will add .is-revealed class to trigger animations.
*/
.reveal-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
.reveal-on-scroll.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Staggered reveal for multiple items — adds slight delay per item */
.reveal-on-scroll[data-reveal-delay="1"] {
transition-delay: 50ms;
}
.reveal-on-scroll[data-reveal-delay="2"] {
transition-delay: 100ms;
}
.reveal-on-scroll[data-reveal-delay="3"] {
transition-delay: 150ms;
}
.reveal-on-scroll[data-reveal-delay="4"] {
transition-delay: 200ms;
}
.reveal-on-scroll[data-reveal-delay="5"] {
transition-delay: 250ms;
}
/*
=========================================================================
LOUIS VUITTON INSPIRED ANIMATIONS
=========================================================================
Based on Louis Vuitton's sophisticated animation techniques:
1. CSS VARIABLE DRIVEN ANIMATIONS
Instead of JavaScript-controlled pixel animations, we use CSS
custom properties (--progress, --i, --carousel-length) that
JavaScript simply updates. The CSS engine handles smooth rendering.
2. STAGGERED ENTRANCE ANIMATIONS
Using --i variable to calculate animation-delay for each item:
animation-delay: calc(var(--i) * 100ms)
Creates a cascading "waterfall" effect.
3. PROGRESS-BASED LOADING
The page loader uses --progress (0 to 1) to control scaleX().
JavaScript updates the variable; CSS handles the visual.
4. DYNAMIC TEXT CAROUSEL
Uses --carousel-length to calculate animation duration for
seamless vertical text cycling.
*/
/*
=========================================================================
PAGE LOADER — LV-STYLE PROGRESS BAR
=========================================================================
A sophisticated loading experience that uses CSS variable --progress
to control the visual expansion. JavaScript updates this variable
as resources load (0 → 0.5 → 1), and CSS uses transform: scaleX()
to smoothly animate the bar.
Key technique: All animation logic is in CSS. JavaScript only
updates a single variable value. This is highly performant.
*/
.lv-page-loader {
/*
Full-screen overlay that covers the page during loading.
Uses the same background as the site for visual continuity.
*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-page-loader);
background: var(--color-bg-primary);
/*
Center the content (logo and loading bar) within the overlay.
Flexbox makes this trivial and responsive.
*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-8);
/*
The loader fades out when complete.
We use opacity + visibility for smooth disappearance.
The 'both' ensures animation state is maintained after completion.
*/
opacity: 1;
visibility: visible;
transition:
opacity 0.6s var(--ease-linear-out),
visibility 0.6s var(--ease-linear-out);
}
/*
LOADING COMPLETE STATE
======================
When JavaScript adds this class, the loader fades out elegantly.
The visibility change ensures it doesn't block interactions after hiding.
*/
.lv-page-loader.is-complete {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/*
LOADING BAR TRACK
=================
The container for the progress bar. Creates the "rail" that
the progress fill slides along.
*/
.lv-page-loader__bar {
/*
Fixed width bar that looks elegant on all screens.
Not too wide, not too narrow — just right for the logo above it.
*/
width: 200px;
height: 2px;
background: var(--color-border);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
}
/*
PROGRESS FILL
=============
This is where the magic happens. The ::after pseudo-element is
the actual colored fill that expands based on --progress.
Key technique: transform: scaleX(var(--progress))
The --progress variable ranges from 0 (empty) to 1 (full).
scaleX transforms this into visual width: 0% to 100%.
transform-origin: left ensures it grows from left to right.
*/
.lv-page-loader__bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-accent);
border-radius: inherit;
/*
THE CORE ANIMATION TECHNIQUE
===========================
scaleX uses the --progress CSS variable (0 to 1).
JavaScript updates --progress; CSS handles the smooth visual.
*/
transform: scaleX(var(--progress, 0));
transform-origin: left center;
/*
Smooth transition when --progress changes.
This creates the progressive "filling" effect.
*/
transition: transform 0.4s var(--ease-linear-out);
}
/*
LOADER LOGO
===========
Brand mark that pulses subtly during loading.
Creates a focal point and builds brand recognition.
*/
.lv-page-loader__logo {
font-family: var(--font-logo);
font-size: var(--text-3xl);
font-weight: var(--font-medium);
font-style: normal;
color: var(--color-text-primary);
letter-spacing: -0.02em;
/* Subtle pulse animation to indicate activity */
animation: lvLoaderPulse 2s ease-in-out infinite;
}
.lv-page-loader__dot {
color: var(--color-accent);
}
/*
LOADER PULSE ANIMATION
======================
Subtle opacity breathing that indicates the page is loading.
Not too dramatic — just enough to show something is happening.
*/
@keyframes lvLoaderPulse {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/*
=========================================================================
STAGGERED ENTRANCE ANIMATIONS — LV-STYLE CASCADE
=========================================================================
The most distinctive LV animation technique: cascading reveals.
Each element uses an inline style --i (index) that CSS uses to
calculate animation-delay: animation-delay: calc(var(--i) * 100ms)
Example:
First → appears at 0ms
Second → appears at 100ms
Third → appears at 200ms
This creates the elegant "waterfall" effect seen on LV's navigation.
*/
/*
STAGGER CONTAINER
=================
Parent element that triggers the stagger animation for its children.
When this container is visible (has .lv-stagger-active), children animate in.
*/
/* .lv-stagger-group is used for logical grouping in JS */
/*
STAGGER ITEMS — INITIAL STATE
=============================
Before animation, items are invisible and slightly offset.
This creates the "sliding in from below" effect when revealed.
*/
.lv-stagger-item {
opacity: 1;
transform: none;
transition: none;
}
/*
STAGGER ITEMS — REVEALED STATE
==============================
When the parent group has .lv-stagger-active class (added by JS
on page load or intersection), items become visible with stagger.
*/
.lv-stagger-group.lv-stagger-active .lv-stagger-item,
.lv-stagger-item.lv-revealed {
opacity: 1;
transform: translateY(0);
}
/*
ALTERNATIVE: ANIMATION-BASED STAGGER
====================================
For elements that should animate on initial page load (like nav),
we use @keyframes instead of transitions. This gives more control
and works without JavaScript intersection observers.
*/
.lv-stagger-animate .lv-stagger-item {
/* Initial state handled by keyframes */
animation: lvStaggerIn 0.5s var(--ease-linear-out) forwards;
animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes lvStaggerIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*
=========================================================================
DYNAMIC TEXT CAROUSEL — LV-STYLE VERTICAL TICKER
=========================================================================
A smooth vertical text carousel that cycles through multiple items.
Uses --carousel-length CSS variable to calculate animation timing.
How it works:
1. The UL contains multiple LI items (e.g., 4 items + 1 duplicate)
2. CSS variable --carousel-length tells animation how many items
3. Animation translates the UL upward by (--carousel-length * item-height)
4. The duplicate first item at the end creates seamless loop
*/
.lv-text-carousel {
/*
Inline layout: "Test your [carousel] overnight."
The carousel sits inline with static text.
*/
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin-top: var(--space-4);
}
.lv-text-carousel__prefix,
.lv-text-carousel__suffix {
/* Static text styling */
flex-shrink: 0;
}
/*
CAROUSEL CONTAINER
==================
The overflow: hidden mask that hides items above/below the viewport.
Only one item is visible at a time through this "window".
*/
.lv-text-carousel__container {
/*
Height matches one line of text.
This creates the "window" through which one item shows.
*/
height: 1.5em;
overflow: hidden;
position: relative;
/*
Visual emphasis on the cycling text.
Makes it stand out from the static prefix/suffix.
*/
color: var(--color-accent);
font-weight: var(--font-medium);
}
/*
CAROUSEL LIST
=============
The UL that contains all carousel items stacked vertically.
This entire list translates upward to cycle through items.
*/
.lv-text-carousel__list {
list-style: none;
padding: 0;
margin: 0;
/*
THE KEY ANIMATION
=================
Animation duration is calculated from --carousel-length.
Each item shows for 2.5s, so total = 2.5s * item count.
calc(var(--carousel-length, 4) * 2.5s) = total animation time
*/
animation: lvCarouselSlide calc(var(--carousel-length, 4) * 2.5s) infinite;
animation-timing-function: steps(var(--carousel-length, 4), end);
}
/*
CAROUSEL ITEMS
==============
Each item is one "slide" in the carousel.
Height matches the container for proper alignment.
*/
.lv-text-carousel__item {
height: 1.5em;
display: flex;
align-items: center;
white-space: nowrap;
}
/*
CAROUSEL SLIDE ANIMATION
========================
Translates the list upward to cycle through items.
The key insight: we move by (100% / carousel-length) per step.
With steps() timing function, this creates discrete "jumps"
between items rather than smooth scrolling.
Example with 4 items:
- 0%: translateY(0) — show item 1
- 25%: translateY(-25%) — show item 2 (but steps makes it jump)
- 50%: translateY(-50%) — show item 3
- 75%: translateY(-75%) — show item 4
- 100%: translateY(-100%) — show item 5 (duplicate of item 1)
The duplicate at the end + seamless loop creates infinite cycling.
*/
@keyframes lvCarouselSlide {
0% {
transform: translateY(0);
}
100% {
/*
Move up by 100% of the list height.
With --carousel-length items, this cycles through all.
The duplicate first item makes the loop seamless.
*/
transform: translateY(calc(-100% + (100% / (var(--carousel-length, 4) + 1))));
}
}
/*
ALTERNATIVE: SMOOTH CAROUSEL
============================
For a smoother sliding effect (like a physical ticker),
replace steps() with ease-in-out and use this animation.
*/
@keyframes lvCarouselSlideSmooth {
0%,
18% {
transform: translateY(0);
}
20%,
38% {
transform: translateY(-20%);
}
40%,
58% {
transform: translateY(-40%);
}
60%,
78% {
transform: translateY(-60%);
}
80%,
98% {
transform: translateY(-80%);
}
100% {
transform: translateY(-100%);
}
}
/* Mobile: Stack carousel vertically */
@media (max-width: 640px) {
.lv-text-carousel {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-base);
}
}
/*
=========================================================================
LV-STYLE FADE TRANSITIONS
=========================================================================
Inspired by Vue.js transition components used on LV's site.
These classes can be applied to elements for smooth enter/leave animations.
Naming convention follows Vue's pattern:
- .lv-fade-enter-from: starting state when element enters
- .lv-fade-enter-active: applied during entire enter phase
- .lv-fade-enter-to: ending state (usually same as normal state)
- .lv-fade-leave-from: starting state when element leaves
- .lv-fade-leave-active: applied during entire leave phase
- .lv-fade-leave-to: ending state (usually invisible)
*/
/* Fade transition — simple opacity change */
.lv-fade-enter-from,
.lv-fade-leave-to {
opacity: 0;
}
.lv-fade-enter-active,
.lv-fade-leave-active {
transition: opacity 0.3s var(--ease-linear-out);
}
.lv-fade-enter-to,
.lv-fade-leave-from {
opacity: 1;
}
/*
FADE + SCALE — More dramatic entrance for modals/notifications
*/
.lv-fade-scale-enter-from,
.lv-fade-scale-leave-to {
opacity: 0;
transform: scale(0.95);
}
.lv-fade-scale-enter-active,
.lv-fade-scale-leave-active {
transition:
opacity 0.3s var(--ease-linear-out),
transform 0.3s var(--ease-linear-out);
}
.lv-fade-scale-enter-to,
.lv-fade-scale-leave-from {
opacity: 1;
transform: scale(1);
}
/*
SLIDE + FADE — For elements entering from a direction
*/
.lv-slide-up-enter-from,
.lv-slide-up-leave-to {
opacity: 0;
transform: translateY(20px);
}
.lv-slide-up-enter-active,
.lv-slide-up-leave-active {
transition:
opacity 0.4s var(--ease-linear-out),
transform 0.4s var(--ease-linear-out);
}
.lv-slide-up-enter-to,
.lv-slide-up-leave-from {
opacity: 1;
transform: translateY(0);
}
/*
=========================================================================
LV-STYLE NOTIFICATION SYSTEM
=========================================================================
Toast notifications that fade in/out with Vue-style transitions.
These overlay in the corner and stack automatically.
*/
.lv-notifications {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: var(--z-notifications);
display: flex;
flex-direction: column-reverse;
gap: var(--space-3);
pointer-events: none;
}
.lv-notification {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
box-shadow: var(--shadow-lg);
pointer-events: auto;
max-width: 360px;
/* Entrance animation */
animation: lvNotificationIn 0.3s var(--ease-linear-out);
}
.lv-notification.is-leaving {
animation: lvNotificationOut 0.2s var(--ease-linear-out) forwards;
}
@keyframes lvNotificationIn {
from {
opacity: 0;
transform: translateX(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes lvNotificationOut {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(20px) scale(0.95);
}
}
/*
=========================================================================
ENHANCED HERO ANIMATIONS — LV-STYLE DRAMATIC ENTRANCE
=========================================================================
The hero section gets special treatment with more elaborate
entrance animations that create a luxurious first impression.
*/
/*
HERO CONTENT STAGGER
====================
Each major element in the hero staggers in with careful timing.
This creates a "directed reveal" where the eye is guided through
headline → subheadline → carousel → CTAs in sequence.
*/
.hero__content>* {
opacity: 0;
transform: translateY(25px);
animation: lvHeroReveal 0.7s var(--ease-linear-out) forwards;
}
/* Stagger timing for hero elements */
.hero__headline {
animation-delay: 0.1s;
}
.hero__subheadline {
animation-delay: 0.2s;
}
.lv-text-carousel {
animation-delay: 0.3s;
}
.hero__cta {
animation-delay: 0.4s;
}
@keyframes lvHeroReveal {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*
HERO SHOWCASE — SCALE + FADE ENTRANCE
=====================================
The product showcase (right side) scales up from slightly smaller,
creating depth and drawing the eye after the text content appears.
*/
/*
NOTE: The hero__showcase animation is now defined in the main
hero layout section using the showcaseReveal keyframes.
This block has been removed to prevent conflicts.
*/
/*
=========================================================================
SECTION REVEAL ANIMATIONS — LV-STYLE SCROLL TRIGGERS
=========================================================================
Sections reveal with a sophisticated animation as they scroll into view.
Uses IntersectionObserver in JS to add .lv-section-visible class.
*/
.lv-section-reveal {
opacity: 1;
transform: none;
transition: none;
}
.lv-section-reveal.lv-section-visible {
opacity: 1;
transform: translateY(0);
}
/*
SECTION HEADERS — Extra emphasis
================================
Section headers get a subtle scale animation for emphasis.
This creates a polished reveal effect when sections scroll into view.
Note: .access-gap__header also has these styles defined in its own
section (access-gap styles) for organization, but is included here
in the revealed state selectors for the animation trigger.
*/
.features__header,
.how-it-works__header,
.pricing__header,
.access-gap__header {
opacity: 1;
transform: none;
transition: none;
}
/*
REVEALED STATE — Section headers become visible
================================================
When the parent section has .lv-stagger-active or the header
has .lv-revealed (added by intersection observer), the header
animates into its final visible state.
*/
.lv-stagger-active .features__header,
.lv-stagger-active .how-it-works__header,
.lv-stagger-active .pricing__header,
.lv-stagger-active .access-gap__header,
.features__header.lv-revealed,
.how-it-works__header.lv-revealed,
.pricing__header.lv-revealed,
.access-gap__header.lv-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
/*
=========================================================================
CURSOR TRAIL EFFECT — LV-STYLE POINTER FOLLOWING
=========================================================================
Optional: A subtle glow that follows the cursor on the page.
Creates an elegant, luxurious feel reminiscent of LV's site.
*/
.lv-cursor-glow {
position: fixed;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle at center,
var(--color-glow-tertiary) 0%,
transparent 70%);
pointer-events: none;
z-index: var(--z-bg-effects);
opacity: 0.5;
transform: translate(-50%, -50%);
transition:
left 0.3s var(--ease-linear-out),
top 0.3s var(--ease-linear-out),
opacity 0.3s var(--ease-linear-out);
}
/* Hide on mobile where there's no cursor */
@media (max-width: 768px) {
.lv-cursor-glow {
display: none;
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.lv-page-loader__logo,
.lv-stagger-item,
.lv-text-carousel__list,
.hero__content>*,
.hero__showcase {
animation: none;
opacity: 1;
transform: none;
}
.lv-stagger-item {
transition: none;
}
}
/*
=========================================================================
ACCESSIBILITY — SKIP LINK
=========================================================================
Provides a way for keyboard users to skip the navigation and go directly
to the main content. Hidden visually until focused.
*/
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-skip-link);
padding: var(--space-3) var(--space-6);
background: var(--color-accent);
color: var(--color-text-on-accent);
font-weight: var(--font-semibold);
font-size: var(--text-sm);
border-radius: var(--radius-md);
text-decoration: none;
transition: top 0.2s ease-out;
}
.skip-link:focus {
top: var(--space-4);
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/*
=========================================================================
ACCESSIBILITY — REDUCED MOTION
=========================================================================
Respects the user's "reduce motion" preference by disabling transitions
and animations site-wide. This is critical for users with vestibular
disorders who may experience nausea or discomfort from motion.
Rule: prefers-reduced-motion (fixing-motion-performance skill)
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Disable specific animated elements */
.hero__glow,
.hero__grain,
.showcase__status-dot,
.mini-agent {
animation: none !important;
}
}
/* =============================================================================
* NEW SECTION STYLES — added for landing rewrite (YC-application alignment).
* Token-only: --color-accent, --color-klein-blue, --space-*, --text-*, etc.
* No new colors, no new fonts. Light-mode rules use the existing pattern of
* relying on theme-token swaps already declared at :root and [data-theme=light].
* =============================================================================
*/
/* SR-only utility (used by in the matrix) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* -----------------------------------------------------------------------------
* TRUST STRIP — replaces the 3-logo integrations row.
* PostHog-only logo + 6,000-session stat. Single row at desktop, stacks
* on mobile.
* -----------------------------------------------------------------------------
*/
.trust-strip {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-10);
flex-wrap: wrap;
}
.trust-strip__cell {
display: flex;
align-items: center;
gap: var(--space-3);
}
.trust-strip__caption {
font-family: var(--font-serif);
font-size: var(--text-sm);
line-height: 1.45;
color: var(--color-text-secondary);
white-space: nowrap;
}
.trust-strip__caption strong {
color: var(--color-text-primary);
font-weight: 600;
}
.trust-strip__posthog {
display: inline-flex;
align-items: center;
height: 22px;
}
.trust-strip__posthog svg {
height: 22px;
width: auto;
display: block;
}
/* PostHog logo has a black path for the "H" character that disappears on dark backgrounds. */
.trust-strip__posthog svg path[fill="#000"] {
fill: var(--color-text-primary);
}
.trust-strip__divider {
width: 1px;
height: 18px;
background: var(--color-border);
}
.trust-strip__stat-value {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.02em;
line-height: 1;
}
@media (max-width: 767px) {
.trust-strip {
flex-direction: column;
gap: var(--space-4);
}
.trust-strip__divider {
width: 32px;
height: 1px;
}
}
/* -----------------------------------------------------------------------------
* PROBLEM SECTION — "Shipping faster than testing."
* Single-column header, no comparison columns.
* -----------------------------------------------------------------------------
*/
.problem {
padding: var(--space-20) 0 var(--space-12);
}
.problem__container {
max-width: var(--container-narrow, 800px);
margin: 0 auto;
padding: 0 var(--space-6);
text-align: center;
}
.problem__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
background: rgba(59, 130, 246, 0.1);
padding: 6px 12px;
border-radius: var(--radius-sm);
display: inline-block;
margin-bottom: var(--space-4);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.problem__headline {
font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--space-5);
}
.problem__headline em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-text-secondary);
}
/* Blinking terminal-style caret after the em line — echoes the live agent feed in the hero. */
.problem__headline-cursor::after {
content: "";
display: inline-block;
width: 0.08em;
height: 0.95em;
margin-left: 0.12em;
vertical-align: -0.12em;
background: var(--color-accent);
animation: problemCursorBlink 1.05s steps(1) infinite;
}
@keyframes problemCursorBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.problem__headline-cursor::after {
animation: none;
opacity: 0.7;
}
}
.problem__subheadline {
font-family: var(--font-serif);
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 64ch;
margin: 0 auto;
}
/* -----------------------------------------------------------------------------
* WEDGE — three sharp cards. Replaces the 6-card asymmetric grid.
* -----------------------------------------------------------------------------
*/
.wedge__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
align-items: stretch;
}
@media (max-width: 1023px) {
.wedge__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.wedge__grid {
grid-template-columns: 1fr;
}
}
.wedge__card {
display: flex;
flex-direction: column;
padding: var(--space-8);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 18px 44px -34px rgba(0, 0, 0, 0.32);
transition: border-color var(--transition-fast),
background-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.wedge__card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.4);
}
.wedge__icon {
width: 32px;
height: 32px;
margin-bottom: var(--space-5);
color: var(--color-accent);
}
.wedge__icon svg {
width: 32px;
height: 32px;
display: block;
}
.wedge__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-text-primary);
margin-bottom: var(--space-3);
}
.wedge__title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
color: var(--color-accent);
}
.wedge__description {
font-family: var(--font-serif);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text-secondary);
}
/* -----------------------------------------------------------------------------
* HOW-IT-WORKS outcome line — between the 3 steps and the CTA.
* -----------------------------------------------------------------------------
*/
.how-it-works__outcome {
display: flex;
gap: var(--space-6);
margin: var(--space-8) 0 0;
padding: var(--space-6);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
transition: border-color, transform var(--transition-base);
}
.how-it-works__outcome:hover {
border-color: var(--color-border-hover);
transform: translateX(8px);
}
.how-it-works__outcome-content {
flex: 1;
}
.how-it-works__outcome-label {
display: inline-block;
margin-bottom: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-accent);
}
.how-it-works__outcome-title {
margin: 0 0 var(--space-2);
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
@media (min-width: 1200px) {
.how-it-works__outcome-title {
font-size: var(--text-xl);
}
}
.how-it-works__outcome-body {
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-secondary);
}
@media (min-width: 1200px) {
.how-it-works__outcome-body {
font-size: var(--text-base);
}
}
/* -----------------------------------------------------------------------------
* FOUNDERS — Two photos + bios, then a third paragraph with the origin story.
* -----------------------------------------------------------------------------
*/
.founders {
padding: var(--space-20) 0 var(--space-12);
}
.founders__container {
max-width: min(var(--container-max, 1280px), 1080px);
margin: 0 auto;
padding: 0 var(--space-6);
}
.founders__header {
text-align: center;
margin-bottom: var(--space-12);
}
.founders__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
background: rgba(59, 130, 246, 0.1);
padding: 6px 12px;
border-radius: var(--radius-sm);
display: inline-block;
margin-bottom: var(--space-4);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.founders__headline {
font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
line-height: 1.1;
letter-spacing: -0.02em;
}
.founders__headline em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-text-secondary);
}
.founders__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
@media (max-width: 900px) {
.founders__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
}
.founder-card {
display: flex;
align-items: flex-start;
gap: var(--space-5);
min-height: 100%;
padding: var(--space-6);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 18px 44px -34px rgba(0, 0, 0, 0.32);
}
.founder-card__photo {
flex-shrink: 0;
width: 112px;
height: 112px;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: calc(var(--radius-md) - 1px);
background: var(--color-bg-tertiary);
}
.founder-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
display: block;
filter: grayscale(100%);
transition: filter 600ms ease;
}
.founder-card:hover .founder-card__photo img {
filter: grayscale(0%);
}
.founder-card__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.founder-card__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 var(--space-1);
letter-spacing: -0.01em;
line-height: 1.2;
}
.founder-card__role {
display: inline-block;
margin-left: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
font-weight: 500;
}
.founder-card__bio {
font-family: var(--font-serif);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0;
max-width: 32ch;
}
.founder-card__linkedin {
display: inline-block;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
text-decoration: none;
transition: opacity 0.15s ease;
}
.founder-card__linkedin:hover,
.founder-card__linkedin:focus-visible {
opacity: 0.7;
}
@media (max-width: 640px) {
.founder-card {
flex-direction: column;
padding: var(--space-5);
}
.founder-card__photo {
width: 96px;
height: 96px;
}
.founder-card__bio {
max-width: none;
}
}
[data-theme="light"] .wedge__card,
[data-theme="light"] .founder-card {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(24, 24, 27, 0.1);
box-shadow: 0 26px 60px -36px rgba(24, 24, 27, 0.18);
}
[data-theme="light"] .wedge__card:hover {
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 30px 68px -38px rgba(24, 24, 27, 0.22);
}
/* -----------------------------------------------------------------------------
* VISIBILITY GUARANTEE for new landing sections.
*
* script.js:initLinearScrollAnimations() force-sets inline `opacity: 0` and
* `transform: translateY(20px)` on every `.step` and `.feature-card`, then
* relies on an IntersectionObserver to flip them
* to `opacity: 1` on scroll. Inline styles beat all class-based rules,
* so when the observer doesn't fire reliably (e.g. during automated full-
* page screenshots, or if the user lands deep-linked without scrolling),
* cards stay invisible.
*
* For the new landing rewrite we'd rather ship readable content than a
* fade-in animation, so we hard-pin visibility on the rewritten sections.
* Native users still get the staggered reveal via .lv-stagger-* on first
* paint; the !important here just guarantees the floor.
* -----------------------------------------------------------------------------
*/
.wedge .wedge__grid .wedge__card,
.how-it-works .steps .step {
opacity: 1 !important;
transform: none !important;
}
/* =============================================================================
* NUCLEAR VISIBILITY OVERRIDE — added because the user's browser was rendering
* sections invisible despite earlier !important rules and lv-stagger-active
* baked-in flags. Multiple reveal mechanisms in script.js (lvHeroReveal keyframe,
* lv-stagger-item baseline, reveal-on-scroll, initLinearScrollAnimations inline
* styles) intermittently keep content at opacity:0 in environments where their
* IntersectionObservers don't fire as expected. This block disables all of them
* for the new YC-aligned landing content. Content visibility > animation polish.
* =============================================================================
*/
/* Hero content stays visible after first paint (no reveal animation). */
.hero__content > *,
.hero__headline,
.hero__subheadline,
.hero__cta,
.hero__showcase {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* All children of new sections — pin visibility unconditionally. */
.problem,
.problem *,
.wedge,
.wedge *,
.founders,
.founders *,
.trust-strip,
.trust-strip * {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Section headers and cards that might still be hooked into legacy reveal CSS. */
.features__header,
.how-it-works__header,
.pricing__header,
.steps,
.steps .step,
.steps .step * {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Defensive: any element inside the new sections that script.js attached
inline styles to. CSS !important still wins even when JS sets style.opacity. */
.wedge .lv-stagger-item,
.problem .lv-stagger-item,
.founders .lv-stagger-item,
.steps .lv-stagger-item {
opacity: 1 !important;
transform: none !important;
}