/* DESIGN SYSTEM & GLOBAL STYLES */
:root {
/* Primary Brand Colors */
--color-primary: #2f5a3d;
--color-primary-bright: #3f714f;
--color-primary-glow: rgba(47, 90, 63, 0.28);
/* Semantic Colors */
--color-success: #3f714f;
--color-error: #c04040;
--color-warning: #a05810;
/* Background System */
--bg-primary: #f5f3ef;
--bg-secondary: #f1efe8;
--surface: rgba(251, 249, 243, 0.86);
--surface-light: rgba(255, 255, 255, 0.78);
--border: rgba(32, 46, 33, 0.18);
/* Text System */
--text-primary: #1d2a1e;
--text-secondary: rgba(42, 58, 45, 0.82);
--text-muted: rgba(58, 76, 63, 0.82); /* Updated from 0.75 to 0.82 for WCAG AA compliance (4.82:1 contrast) */
/* Typography System */
--font-display: 'Crimson Pro', Georgia, serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-monospace: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', 'Menlo', monospace;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Font Sizes - Semantic + Scale Hybrid System */
/* ============================================= */
/* UI & Metadata Sizes - Use sparingly */
--font-size-caption: 0.75rem; /* 12px - ONLY timestamps, legal, footnotes */
--font-size-ui-small: 0.875rem; /* 14px - Labels, tags, small UI elements */
--font-size-ui-icon: 1.25rem; /* 20px - UI icons, close buttons */
/* Body Text Sizes - Primary usage */
--font-size-body: 1rem; /* 16px - DEFAULT body text (Inter 400) */
--font-size-body-large: 1.125rem; /* 18px - Emphasized paragraphs, lead text */
/* Heading Sizes - Display typography (Crimson Pro 300) */
--font-size-h4: 1.5rem; /* 24px */
--font-size-h3: 2rem; /* 32px */
--font-size-h3-5: 2.25rem; /* 36px - Price emphasis */
--font-size-h2: 3rem; /* 48px */
--font-size-h1: 4rem; /* 64px */
--font-size-display: 5rem; /* 80px - Hero headlines only */
/* UI Component Sizes - Buttons, Navigation, Forms */
--font-size-ui-nav: 0.9375rem; /* 15px - Navigation links */
--font-size-ui-button: 0.9375rem; /* 15px - Button text */
--font-size-ui-toggle: 0.875rem; /* 14px - Toggle buttons, table headers */
/* Feature Card Typography */
--font-size-feature-title: 1.5rem; /* 24px - Feature card titles */
--font-size-feature-subtitle: 1.0625rem; /* 17px - Reduced for more compact layout */
/* Special Purpose Sizes */
--font-size-emphasis: 1.5rem; /* 24px - Metric displays, callouts */
/* Legacy Aliases - Backward Compatibility (DEPRECATED) */
/* These maintain old code but redirect to semantic names */
--font-size-xs: var(--font-size-caption);
--font-size-sm: var(--font-size-ui-small);
--font-size-base: var(--font-size-body);
--font-size-md: var(--font-size-body-large);
--font-size-lg: var(--font-size-h4);
--font-size-xl: var(--font-size-h3);
--font-size-2xl: var(--font-size-h2);
--font-size-3xl: var(--font-size-h1);
--font-size-4xl: var(--font-size-display);
/* Line Heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.6;
/* Letter Spacing - Comprehensive Scale */
--letter-spacing-tightest: -0.02em; /* Display headings, hero text */
--letter-spacing-tight: -0.01em; /* Body headings (h2, h3) */
--letter-spacing-normal: 0; /* Body text, default */
--letter-spacing-relaxed: 0.01em; /* UI elements, navigation */
--letter-spacing-wide: 0.02em; /* Labels, small UI */
--letter-spacing-wider: 0.06em; /* Uppercase labels, metrics */
--letter-spacing-widest: 0.1em; /* Badges, tiny uppercase text */
--letter-spacing-badge: 0.08em; /* Badges - between wider and widest */
/* Border Radius System */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* Legacy/Warning Colors for Comparison Section */
--color-legacy: #7a3d0a;
--color-legacy-light: rgba(160, 88, 16, 0.12);
--color-legacy-border: rgba(160, 88, 16, 0.3);
/* Secondary Accent Color - Aged Gold/Amber (complements forest green) */
--color-accent: #c4a35a;
--color-accent-bright: #d4b86a;
--color-accent-muted: #b89545;
--color-accent-glow: rgba(196, 163, 90, 0.25);
--color-accent-subtle: rgba(196, 163, 90, 0.12);
/* Opacity Scales */
--opacity-subtle: 0.88;
--opacity-muted: 0.92;
/* Badge Typography */
--font-size-badge: 0.6875rem; /* 11px */
/* Icon Sizes */
--icon-xs: 12px; /* Tiny icons */
--icon-sm: 14px; /* Small icons in badges */
--icon-md: 18px; /* Medium icons in lists */
--icon-lg: 20px; /* Large UI icons */
--icon-xl: 24px; /* Extra large icons */
/* Spacing System (8px grid) */
--space-0-5: 4px; /* Micro-spacing */
--space-1: 8px;
--space-1-5: 12px; /* Intermediate spacing */
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-16: 128px;
--space-20: 160px;
/* Responsive Breakpoints */
--breakpoint-sm: 640px; /* Mobile landscape */
--breakpoint-md: 768px; /* Tablet portrait */
--breakpoint-lg: 1024px; /* Tablet landscape / small desktop */
--breakpoint-xl: 1280px; /* Desktop */
--breakpoint-2xl: 1536px; /* Large desktop */
/* Container Sizes */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1200px;
--container-2xl: 1400px;
/* Legacy aliases for backward compatibility */
--accent-green: var(--color-primary);
--accent-green-bright: var(--color-primary-bright);
--accent-green-glow: var(--color-primary-glow);
--accent-red: var(--color-error);
--accent-orange: var(--color-warning);
--bg: var(--bg-primary);
--bg-pattern:
radial-gradient(circle at 20% 78%, rgba(47, 90, 63, 0.18) 0%, transparent 55%),
radial-gradient(circle at 82% 18%, rgba(64, 104, 77, 0.12) 0%, transparent 48%),
linear-gradient(180deg, var(--bg-primary) 0%, #eee8de 50%, var(--bg-primary) 100%);
--text: var(--text-primary);
--accent: var(--color-primary);
--error: var(--color-error);
--warning: var(--color-warning);
--success: var(--color-success);
/* Button System - Scholarly Aesthetic */
--shadow-paper-rest:
0 1px 3px rgba(26, 36, 32, 0.06),
0 2px 6px rgba(26, 36, 32, 0.08);
--shadow-paper-lift:
0 2px 8px rgba(26, 36, 32, 0.08),
0 4px 16px rgba(26, 36, 32, 0.10);
--shadow-paper-press:
inset 0 1px 2px rgba(26, 36, 32, 0.12),
0 1px 2px rgba(26, 36, 32, 0.04);
/* Prominent shadow for modals, popovers */
--shadow-prominent:
0 4px 16px rgba(26, 36, 32, 0.12),
0 24px 48px rgba(26, 36, 32, 0.16);
--button-text-light: #fbf9f3;
--button-border-opacity: 0.4;
/* Button Padding System - Standardized Sizing Tiers */
--button-padding-large: 0.9rem 2.8rem; /* Hero CTAs, Primary actions (14.4px × 44.8px) */
--button-padding-medium: 0.75rem 2rem; /* Standard buttons, Secondary actions (12px × 32px) */
--button-padding-small: 0.375rem 0.875rem; /* Compact buttons like sign-in (6px × 14px) */
}
/* Performance-optimized Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body.modal-open,
body.nav-open {
overflow: hidden;
}
/* Reduce motion for users who prefer it */
@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;
}
}
/* Optimize font loading */
@media (prefers-reduced-data: reduce) {
* {
font-family: system-ui, -apple-system, sans-serif !important;
}
}
/* Accessibility Enhancements */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Focus styles - keyboard only */
*:focus-visible {
outline: 2px solid var(--accent-green) !important;
outline-offset: 2px !important;
}
/* Enhanced focus for interactive elements - Mycelium Network Rings */
.hero-button:focus-visible,
.cta-button:focus-visible,
.play-button:focus-visible,
.pricing-button:focus-visible,
.pricing-button-link:focus-visible {
outline: none !important;
box-shadow:
/* Core button shadow */
var(--shadow-paper-lift),
/* Inner ring (direct connection) */
0 0 0 2px var(--bg-primary),
/* Primary focus ring */
0 0 0 5px rgba(47, 90, 63, 0.5),
/* Outer diffusion ring (network spread) */
0 0 0 8px rgba(47, 90, 63, 0.2),
/* Furthest glow (mycelium tendrils) */
0 0 24px rgba(47, 90, 63, 0.15) !important;
transform: translateY(-1px);
transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Suppress mouse-only focus outline for header/footer links */
#main-header nav a:focus:not(:focus-visible),
.footer-links a:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
/* Suppress focus-visible outline for footer links to prevent rectangular box on hover */
.footer-links a:focus-visible {
outline: none !important;
}
/* Skip link */
.skip-link {
position: fixed;
top: 16px;
left: 16px;
transform: translateY(-200%);
background: var(--bg-primary);
color: var(--accent-green);
padding: 12px 16px;
min-height: 44px;
text-decoration: none;
font-weight: var(--font-weight-medium);
border-radius: 4px;
border: 1px solid transparent; /* hide border until focused */
z-index: 1001;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
box-shadow: none;
opacity: 0;
pointer-events: none;
}
.skip-link:focus {
transform: translateY(0);
background: var(--accent-green);
color: var(--bg-primary);
border-color: var(--accent-green);
box-shadow: 0 2px 8px rgba(32, 46, 33, 0.18);
opacity: 1;
pointer-events: auto;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--color-primary: #00ff00;
--color-primary-bright: #33ff33;
--text-primary: #ffffff;
--text-secondary: #cccccc;
--bg-primary: #000000;
}
.principle,
.timeline {
border: 2px solid var(--accent-green) !important;
}
}
/* Ensure sufficient color contrast */
.text-muted {
color: var(--text-muted);
}
body {
background: var(--bg-pattern);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal); /* Inter 400 */
line-height: var(--line-height-relaxed); /* 1.6 - standardized from 1.7 for consistency */
letter-spacing: -0.01em; /* Inter optimized spacing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
position: relative;
/* Custom Cursor - Mycelium Node Theme */
cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%232f5a3d' fill-opacity='0.85'/%3E%3Ccircle cx='12' cy='12' r='7' stroke='%232f5a3d' stroke-opacity='0.25' stroke-width='1'/%3E%3C/svg%3E") 12 12, auto;
}
/* Custom Cursor Variants for Interactive Elements */
a, button, [role="button"], .bento-box, .principle, .pricing-card, .comparison-toggle-option {
cursor: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='5' fill='%233f714f'/%3E%3Ccircle cx='16' cy='16' r='10' stroke='%233f714f' stroke-opacity='0.35' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='14' stroke='%233f714f' stroke-opacity='0.15' stroke-width='1'/%3E%3C/svg%3E") 16 16, pointer;
}
/* Grain/Noise Texture Overlay - Film Grain for Organic Depth */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 10000;
opacity: 0.028;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* Reduce grain on mobile for performance */
@media (max-width: 768px) {
body::before {
opacity: 0.02;
background-size: 256px 256px;
}
}
/* Respect reduced motion - disable grain animation if any */
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
}
}
h1,
h2 {
font-family: var(--font-display);
letter-spacing: 0.02em;
color: var(--text-primary);
}
h4,
h5,
h6 {
font-family: var(--font-sans);
color: var(--text-primary);
}
h3 {
font-family: var(--font-display); /* Crimson Pro for display typography hierarchy */
color: var(--text-primary);
}
#mycelium-background {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
}
#main-header,
main,
footer {
position: relative;
z-index: 1;
}
.container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-4);
}
section {
padding: var(--space-12) 0;
position: relative;
}
section:not(#hero):not(#final-cta) {
border-top: 1px solid var(--border);
}
/* Option C: Hero demo positioned in grid */
.hero-demo {
padding: 0;
border-top: none;
min-height: auto;
position: relative;
background: transparent;
margin-top: 0;
/* Removed grid positioning - now using flex layout */
width: 100%; /* Full width within flex container */
max-width: var(--container-xl); /* 1200px - Match header/nav container for visual alignment */
overflow: hidden; /* Contain video content */
}
/* Mobile: Reset grid positioning */
@media (max-width: 768px) {
.hero-demo {
padding: 0;
margin-top: var(--space-8);
}
}
.hero-demo > * {
position: relative;
z-index: 1;
}
.hero-demo .container {
max-width: none;
padding: 0;
}
main section:first-child { border-top: none; }
/* Enhanced Animation System */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale3d(0.95, 0.95, 1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translate3d(30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(47, 90, 63, 0.2);
}
50% {
box-shadow: 0 0 40px rgba(47, 90, 63, 0.4);
}
}
@keyframes magneticPull {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.02) rotate(1deg);
}
100% {
transform: scale(1.05) rotate(0deg);
}
}
/* NEW ANIMATIONS FOR D10: Animation Refinement */
@keyframes network-reveal {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes organic-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.02);
}
}
/* ===================================================================
SECTION-SPECIFIC ANIMATION PATTERNS
Varied entrance animations to create cinematic, crafted experience
================================================================ */
/* Philosophy Section: Slide from opposing sides - simplified for smooth performance */
@keyframes slideFromLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideFromRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Principles Section: Scale reveal - simplified */
@keyframes scaleReveal {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Pricing Section: Simple fade up (removed complex perspective for smoothness) */
@keyframes unfold {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Features/Bento: Simple scale up (removed blur for performance) */
@keyframes growFromCenter {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Final CTA: Simple rise (removed multi-step for smoothness) */
@keyframes riseWithGlow {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Utility class to apply organic-pulse to emphasis elements */
.organic-pulse {
animation: organic-pulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Apply subtle pulse to primary CTAs when not being interacted with
Note: Secondary buttons (.hero-button-secondary) are intentionally excluded
from the pulse animation to reduce visual noise and maintain clear hierarchy.
Only the highest-priority actions (Install/Get Started) receive pulse emphasis. */
.hero-button-primary:not(:hover):not(:focus):not(:active),
.pricing-button:not(:hover):not(:focus):not(:active) {
animation: organic-pulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Enhanced Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
letter-spacing: 0.01em;
margin: 0;
}
h1 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 3.8vw, var(--font-size-xl));
font-weight: 300; /* Crimson Pro Light */
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 3.4vw, var(--font-size-h2)); /* Increased from 28-32px to 36-48px for more impact */
font-weight: var(--font-weight-light); /* Crimson Pro Light */
text-align: center;
margin-bottom: var(--space-8);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-tight);
}
h3 {
/* font-family set globally - Crimson Pro for display typography */
font-size: var(--font-size-lg);
font-weight: 400; /* Crimson Pro Regular */
line-height: var(--line-height-normal);
}
h4 {
/* font-family set globally - Inter for functional typography */
font-size: var(--font-size-md);
font-weight: 500; /* Inter Medium */
line-height: var(--line-height-normal);
}
p {
max-width: 65ch;
line-height: var(--line-height-relaxed);
color: var(--text-primary);
}
.text-secondary {
color: var(--text-secondary);
}
p {
max-width: 65ch;
}
/* Tablet Portrait (md) - 768px and below */
@media (max-width: 768px) {
p {
max-width: none;
}
}
/* Header - with CSS custom properties for JS-driven scroll progress */
#main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* Scroll progress variable (0-1), set by JS */
--scroll-progress: 0;
background: rgba(245, 243, 239, calc(0.82 + var(--scroll-progress) * 0.12));
backdrop-filter: blur(calc(20px + var(--scroll-progress) * 4px));
/* Border with amber accent color for scroll progress indication */
border-bottom: 1px solid transparent;
border-image: linear-gradient(
90deg,
transparent 0%,
rgba(196, 163, 90, calc(0.1 + var(--scroll-progress) * 0.4)) 50%,
transparent 100%
) 1;
/* Layered shadows for organic depth */
box-shadow:
0 2px 8px rgba(32, 46, 33, 0.03),
0 8px 32px rgba(32, 46, 33, 0.06);
opacity: 1;
transition:
background 200ms cubic-bezier(0.4, 0, 0.2, 1),
backdrop-filter 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced header scroll behavior - more solid when scrolling */
#main-header.scrolled {
background: rgba(241, 238, 230, 0.94);
backdrop-filter: blur(24px);
/* Amber accent border when scrolled */
border-image: linear-gradient(
90deg,
transparent 0%,
rgba(196, 163, 90, 0.5) 50%,
transparent 100%
) 1;
box-shadow:
0 1px 4px rgba(32, 46, 33, 0.08),
0 4px 24px rgba(32, 46, 33, 0.14);
}
/* Deep scroll state - even more compact */
#main-header.deep-scroll {
background: rgba(241, 238, 230, 0.97);
backdrop-filter: blur(28px);
/* Full amber accent border when deep scrolled */
border-image: linear-gradient(
90deg,
transparent 0%,
rgba(196, 163, 90, 0.65) 50%,
transparent 100%
) 1;
box-shadow:
0 1px 2px rgba(32, 46, 33, 0.1),
0 2px 12px rgba(32, 46, 33, 0.16);
}
#main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
padding-bottom: 14px;
position: relative;
transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reduced padding when scrolled for compact reading mode */
#main-header.scrolled .container {
padding-top: 10px;
padding-bottom: 10px;
}
#main-header .logo {
font-size: calc(1.5rem - var(--scroll-progress, 0) * 0.125rem); /* 24px -> 22px progressive */
color: var(--text-primary);
font-weight: 300; /* Light weight - where Crimson Pro truly shines */
font-family: var(--font-display);
text-decoration: none;
letter-spacing: calc(0.07em + var(--scroll-progress, 0) * 0.01em); /* Slightly wider when compact */
text-transform: lowercase;
transition:
font-size 300ms cubic-bezier(0.4, 0, 0.2, 1),
letter-spacing 300ms cubic-bezier(0.4, 0, 0.2, 1),
color 300ms cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Slightly smaller logo when scrolled */
#main-header.scrolled .logo {
font-size: 1.375rem; /* 22px when scrolled */
}
/* Deep scroll - more compact logo */
#main-header.deep-scroll .logo {
font-size: 1.25rem; /* 20px when deep scrolled */
letter-spacing: 0.08em;
}
/* Recommendation 6: Logo hover and focus states */
#main-header .logo:hover {
color: var(--color-primary-bright);
letter-spacing: 0.075em; /* Slightly wider on hover */
}
#main-header .logo:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
border-radius: 4px;
}
#main-header .logo .underscore {
color: var(--color-primary);
}
/* Recommendation 9: Mobile menu backdrop overlay */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(32, 46, 33, 0.2);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 99; /* Below header (z-index: 100) but above content */
}
body.nav-open .nav-backdrop {
opacity: 1;
pointer-events: auto;
}
/* Recommendation 10: Reading progress indicator */
.reading-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, #7fa587 0%, #6b8f71 35%, #4a5d4f 100%);
width: 0%;
transition: width 0.1s ease-out;
opacity: 0;
pointer-events: none;
}
#main-header.scrolled .reading-progress {
opacity: 0.6;
}
.nav-toggle {
display: none;
margin-left: auto;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 10px 10px 9px 10px; /* Asymmetric organic for system coherence */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 44px;
min-width: 44px;
}
.nav-toggle:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.nav-toggle:hover {
background-color: rgba(47, 90, 63, 0.1);
transform: translateY(-2px);
box-shadow:
0 2px 8px rgba(26, 36, 32, 0.08),
0 8px 24px rgba(26, 36, 32, 0.12);
}
.nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
margin: 4px 0;
background: var(--text-primary);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Recommendation 8: Subtle brand color on middle bar */
.nav-toggle-bar:nth-child(2) {
background: linear-gradient(90deg,
var(--text-primary) 0%,
var(--color-primary) 50%,
var(--text-primary) 100%
);
background-size: 200% 100%;
background-position: 0% 0%;
}
.nav-toggle:hover .nav-toggle-bar:nth-child(2) {
background-position: 100% 0%;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
#main-header nav {
display: flex;
gap: var(--space-4);
align-items: center; /* Vertically center all nav items */
}
#main-header nav a {
color: rgba(42, 58, 45, 0.95); /* Increased from 0.9 to 0.95 for WCAG AA compliance (4.5:1 contrast for 14px text) */
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.875rem; /* Recommendation 4: 14px - down from 15px for better hierarchy */
font-weight: var(--font-weight-medium);
letter-spacing: 0.015em; /* Slightly wider to maintain readability */
position: relative;
/* Recommendation 7: Adjusted timing offsets for more organic feel */
transition:
color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Organic underline hover effect */
#main-header nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #7fa587 0%, #6b8f71 35%, #4a5d4f 100%);
opacity: 0.85;
/* Recommendation 7: Underline follows slightly behind color change */
transition:
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-header nav a:hover {
color: var(--color-primary);
transform: translateY(-2px);
}
#main-header nav a:hover::after {
width: 100%;
opacity: 1;
}
/* Recommendation 1: Navigation link focus indicators for accessibility */
#main-header nav a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
border-radius: 4px;
}
/* Recommendation 2: Active/current page indicator for wayfinding */
#main-header nav a.is-active {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
#main-header nav a.is-active::after {
width: 100%;
opacity: 1;
height: 2px;
}
/* Sign in button - Prominent button treatment */
.signin-nav-link {
color: var(--color-primary) !important;
font-weight: var(--font-weight-semibold);
position: relative;
padding: var(--button-padding-small) !important; /* Compact navigation button size tier */
border: 1px solid var(--color-primary); /* Normalized to 1px for consistency */
border-radius: 10px 11px 10px 10px; /* Asymmetric organic for system coherence */
background: rgba(47, 90, 63, 0.04);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.2; /* Explicit line-height prevents text overflow */
}
/* Remove underline for button treatment */
#main-header nav a.signin-nav-link::after {
display: none;
}
#main-header nav a.signin-nav-link:hover {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.1) 0%,
rgba(47, 90, 63, 0.08) 50%,
rgba(47, 90, 63, 0.12) 100%
);
color: var(--color-primary) !important;
border-color: rgba(47, 90, 63, 0.5);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.2),
0 0 20px rgba(47, 90, 63, 0.08);
}
#main-header nav a.signin-nav-link:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/* Main Content */
main,
footer {
opacity: 1;
transition: opacity 0.8s ease 0.8s;
}
html.js body.loaded main,
html.js body.loaded footer {
animation: fadeInContent 0.8s ease forwards;
}
@keyframes fadeInContent {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================
HERO SECTION - Cursor-style Editorial
Smooth unified animation, theatrical video
============================================ */
#hero {
padding-top: var(--space-16);
padding-bottom: var(--space-12);
position: relative;
overflow: visible;
background: transparent;
}
#hero video,
#hero iframe {
background: transparent !important;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(47, 90, 63, 0.05) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(47, 90, 63, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
#hero .container {
position: relative;
z-index: 1;
}
#hero .hero-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
/* ============================================
EDITORIAL TEXT BLOCK
============================================ */
.hero-editorial {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 var(--space-4);
max-width: 900px;
margin: 0 auto;
/* Individual elements now animate with staggered delays */
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered element animation for choreographed entrance */
@keyframes heroElementFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Headline - Single line on desktop */
.hero-headline {
font-family: var(--font-display);
font-weight: var(--font-weight-normal);
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.1;
letter-spacing: var(--letter-spacing-tightest);
color: var(--text-primary);
margin: 0;
/* Staggered animation */
opacity: 0;
animation: heroElementFadeIn 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s forwards;
}
.headline-line {
display: inline;
}
.headline-line-accent {
color: var(--color-primary);
}
/* Tagline */
.hero-tagline {
font-family: var(--font-monospace);
font-size: var(--font-size-ui-small);
font-weight: var(--font-weight-normal);
color: var(--text-muted);
margin-top: var(--space-3);
display: flex;
align-items: center;
gap: 0.5em;
/* Staggered animation */
opacity: 0;
animation: heroElementFadeIn 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards;
}
.tagline-decorator {
color: var(--color-primary);
opacity: 0.6;
}
.tagline-text {
letter-spacing: 0.01em;
}
/* Description - WIDE for 2 lines max */
.hero-description {
font-family: var(--font-sans);
font-size: var(--font-size-body);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
max-width: 720px;
margin-top: var(--space-4);
/* Staggered animation */
opacity: 0;
animation: heroElementFadeIn 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}
/* ============================================
CTA BUTTONS
============================================ */
.hero-actions {
display: flex;
gap: var(--space-2);
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: var(--space-6);
/* Staggered animation */
opacity: 0;
animation: heroElementFadeIn 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
}
.hero-cta {
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--font-size-ui-button);
font-weight: 500;
letter-spacing: -0.01em;
border-radius: 10px;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.hero-cta-primary {
padding: 0.75rem 1.75rem;
background: var(--color-primary);
color: #fbf9f3;
border: none;
box-shadow: 0 2px 8px rgba(47, 90, 63, 0.2);
}
.hero-cta-primary:hover {
background: var(--color-primary-bright);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(47, 90, 63, 0.25);
}
.cta-arrow {
transition: transform 0.25s ease;
}
.hero-cta-primary:hover .cta-arrow {
transform: translateX(2px);
}
.hero-cta-secondary {
padding: 0.75rem 1.5rem;
background: transparent;
color: var(--color-primary);
border: 1px solid rgba(47, 90, 63, 0.35);
}
.hero-cta-secondary:hover {
background: rgba(47, 90, 63, 0.06);
border-color: rgba(47, 90, 63, 0.5);
}
/* ============================================
VIDEO VISUAL - Theatrical Cursor-style
============================================ */
.hero-visual {
position: relative;
width: 100%;
max-width: var(--container-2xl);
margin: var(--space-8) auto 0;
padding: 0 var(--space-4);
/* Smooth fade in, slightly delayed for choreography */
opacity: 0;
animation: heroVisualReveal 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s forwards;
}
@keyframes heroVisualReveal {
from {
opacity: 0;
transform: translateY(24px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Atmospheric glow behind video - larger, more dramatic */
.visual-atmosphere {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 120%;
background: radial-gradient(
ellipse 70% 60% at 50% 50%,
rgba(47, 90, 63, 0.18) 0%,
rgba(47, 90, 63, 0.06) 50%,
transparent 80%
);
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
/* Video frame - centered, theatrical size */
.visual-frame {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
/* Placeholder gradient */
background: linear-gradient(
160deg,
rgba(47, 90, 63, 0.08) 0%,
rgba(34, 52, 40, 0.14) 40%,
rgba(47, 90, 63, 0.06) 100%
);
/* Subtle inner border for edge definition */
border: 1px solid rgba(32, 46, 33, 0.12);
/* Dramatic shadow for depth + inner glow for embedded feel */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(32, 46, 33, 0.06),
0 4px 20px rgba(32, 46, 33, 0.08),
0 20px 60px rgba(32, 46, 33, 0.12),
0 40px 100px rgba(32, 46, 33, 0.08);
}
.visual-video,
.visual-fallback {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
/* Bottom edge fade */
-webkit-mask-image:
linear-gradient(to bottom,
black 0%,
black 85%,
transparent 100%);
mask-image:
linear-gradient(to bottom,
black 0%,
black 85%,
transparent 100%);
}
/* ============================================
RESPONSIVE
============================================ */
/* Tablet breakpoint - intermediate styles */
@media (max-width: 1024px) {
#hero {
padding-top: var(--space-12);
}
.hero-headline {
font-size: clamp(2.25rem, 5.5vw, 3.5rem);
}
.hero-visual {
max-width: var(--container-xl);
margin-top: var(--space-6);
}
.hero-description {
max-width: 640px;
}
}
/* Mobile breakpoint */
@media (max-width: 768px) {
#hero {
padding-top: var(--space-12);
padding-bottom: var(--space-8);
}
.hero-headline {
font-size: clamp(2rem, 8vw, 2.75rem);
}
.headline-line {
display: block;
}
.hero-tagline {
font-size: var(--font-size-caption);
margin-top: var(--space-2);
}
.hero-description {
font-size: var(--font-size-ui-small);
margin-top: var(--space-3);
padding: 0 var(--space-2);
}
.hero-actions {
flex-direction: column;
width: 100%;
margin-top: var(--space-5);
}
.hero-cta {
width: 100%;
max-width: 280px;
}
.hero-visual {
margin-top: var(--space-5);
padding: 0 var(--space-2);
}
.visual-frame {
border-radius: var(--radius-md);
}
.visual-video,
.visual-fallback {
border-radius: var(--radius-md);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-headline,
.hero-tagline,
.hero-description,
.hero-actions,
.hero-visual {
opacity: 1;
transform: none;
animation: none;
}
}
/* ============================================
LEGACY GLASS PANEL - Keep for other sections
============================================ */
.glass-panel {
background: rgba(251, 249, 243, 0.9);
border: 1px solid rgba(32, 46, 33, 0.16);
box-shadow:
0 40px 120px rgba(32, 46, 33, 0.14),
0 12px 32px rgba(32, 46, 33, 0.12);
backdrop-filter: blur(12px);
border-radius: 36px;
}
/* Legacy hero-card for backward compatibility */
.hero-card {
position: relative;
padding: var(--space-8) clamp(var(--space-4), 7vw, var(--space-12));
border-radius: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
max-width: var(--container-xl);
width: 100%;
z-index: 1;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.hero-card {
max-width: 100%;
padding: var(--space-6) var(--space-4);
margin-left: auto;
margin-right: auto;
}
}
.hero-card .hero-subtitle {
font-family: var(--font-sans);
font-size: var(--font-size-body-large);
letter-spacing: 0.01em;
color: var(--text-secondary);
max-width: 660px;
margin: 0 auto;
}
/* Maximized Video Panel - Frameless, no glass-morphism */
.hero-demo-card {
padding: 0;
margin-top: 0;
border-radius: 24px;
border: none;
background: transparent;
backdrop-filter: none;
box-shadow: none;
z-index: 1;
position: relative;
width: 100%; /* Take full available width */
max-width: var(--container-xl); /* 1200px - Match header/nav container for visual alignment */
margin-left: auto;
margin-right: auto;
}
/* Mobile: Full width video panel */
@media (max-width: 768px) {
.hero-demo-card {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
.hero-demo-card .video-wrapper {
transform: none; /* Remove scale on mobile */
}
}
/* Ensure glass-panel class doesn't apply to video demo card */
.hero-demo-card.glass-panel {
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
}
.hero-demo-card .compilation-status {
border-radius: 24px 24px 0 0;
background: transparent;
border: none;
box-shadow: none;
}
.hero-demo-card .operation-log {
border-radius: 0 0 24px 24px;
border: none;
background: transparent;
box-shadow: none;
}
.hero-demo-card .video-wrapper {
transform: none; /* FIXED: Remove scale to prevent overflow */
margin-bottom: var(--space-4);
border-radius: 24px;
border: none;
background: transparent;
}
.hero-badge {
font-family: var(--font-sans); /* Inter, NOT monospace */
font-size: var(--font-size-caption); /* 12px */
font-weight: var(--font-weight-semibold); /* 600 */
letter-spacing: 0.06em; /* Moderate spacing, organic aesthetic */
text-transform: uppercase;
padding: 0.375rem 0.875rem;
border-radius: 6px; /* Organic rounded, NOT pill */
background: rgba(107, 143, 113, 0.12); /* Subtle moss green */
border: 1px solid rgba(107, 143, 113, 0.2);
color: var(--color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-badge:hover {
background: rgba(107, 143, 113, 0.18);
border-color: rgba(107, 143, 113, 0.3);
transform: translateY(-1px);
}
.headline-cascade {
margin-bottom: 0;
min-height: 1.2em;
font-family: var(--font-display);
font-weight: 300; /* Crimson Pro Light */
font-size: clamp(3rem, 5vw, 4.5rem); /* Increased from 32-48px to 48-72px for maximum first impression */
letter-spacing: var(--letter-spacing-tight);
color: var(--text-primary);
line-height: 1.1;
max-width: 800px; /* Optimal headline width for readability */
margin-left: auto;
margin-right: auto;
}
html.js .js-animate-prep {
color: transparent;
}
.headline-cascade span {
display: inline-block;
opacity: 0;
transform: translateY(15px);
animation: cascade-in 0.8s forwards;
}
@keyframes cascade-in {
to {
opacity: 1;
transform: translateY(0);
}
}
.subline-comment {
font-family: var(--font-monospace);
font-size: var(--font-size-body);
color: rgba(58, 76, 63, 0.82); /* Updated from 0.75 for WCAG AA compliance */
margin: 0;
text-align: center;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.subline-comment .comment-operator {
color: rgba(47, 63, 50, 0.75);
margin-right: 0.5em;
}
.subline-comment.is-visible {
opacity: 1;
transform: translateY(0);
}
#hero .subline-comment {
margin-top: calc(-1 * var(--space-2));
}
/* Scroll-Activated Content Reveals - GPU accelerated */
html.js .hero-subtitle,
html.js .hero-buttons {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
html.js .hero-subtitle.is-visible,
html.js .hero-buttons.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Demo section keeps existing animation behavior */
html.js .hero-demo .demo-section {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
html.js .hero-demo .demo-section.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.headline-cascade span,
.subline-comment,
.hero-subtitle,
.hero-buttons,
.hero-demo .demo-section {
opacity: 1;
transform: none;
animation: none;
transition: none;
}
.subline-comment.is-visible {
opacity: 1;
transform: none;
}
.hero-subtitle.is-visible,
.hero-buttons.is-visible,
.hero-demo .demo-section.is-visible {
opacity: 1;
transform: none;
}
}
#hero .subtitle {
font-size: var(--font-size-md);
font-weight: var(--font-weight-light);
line-height: var(--line-height-relaxed);
margin: 0 auto;
text-align: center;
max-width: 90ch;
color: var(--text-secondary);
}
.highlight-feature {
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
border: 1px solid var(--text-secondary);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-monospace);
font-size: 0.95em;
}
.hero-buttons {
display: flex;
gap: var(--space-3);
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hero-button {
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--font-size-ui-button);
font-weight: var(--font-weight-medium);
padding: var(--button-padding-large); /* Hero CTAs use large padding tier */
border-radius: 12px 11px 12px 11px; /* Asymmetric organic irregularity */
cursor: pointer;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: -0.005em; /* Inter optimized */
line-height: 1.2; /* Explicit line-height prevents text overflow */
border: 1px solid transparent;
min-height: 48px; /* TIER 1: Primary CTA height */
position: relative;
}
.hero-button-primary {
background: linear-gradient(
180deg,
#3a6449 0%, /* Slightly lighter top - scholarly depth */
var(--color-primary) 50%,
#2a5036 100% /* Slightly darker bottom */
);
color: var(--button-text-light);
border-color: rgba(47, 90, 63, var(--button-border-opacity));
box-shadow:
var(--shadow-paper-rest),
inset 0 0 0 1px rgba(47, 90, 63, 0.15); /* Inner border glow */
}
.hero-button-primary:hover {
background: linear-gradient(
180deg,
#4a7559 0%,
var(--color-primary-bright) 50%,
#356340 100%
);
border-color: rgba(47, 90, 63, 0.6);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.25), /* Outer ink diffusion */
inset 0 0 0 1px rgba(47, 90, 63, 0.3), /* Inner intensification */
0 0 16px rgba(47, 90, 63, 0.12); /* Ink spread glow */
}
.hero-button-secondary {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.02) 0%,
transparent 50%,
rgba(47, 90, 63, 0.03) 100%
);
color: var(--color-primary);
border-color: rgba(47, 90, 63, var(--button-border-opacity));
box-shadow: var(--shadow-paper-rest);
min-height: 44px; /* TIER 2: Secondary CTA height */
}
.hero-button-secondary:hover {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.1) 0%,
rgba(47, 90, 63, 0.08) 50%,
rgba(47, 90, 63, 0.12) 100%
);
color: var(--color-primary);
border-color: rgba(47, 90, 63, 0.5);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.2), /* Ink diffusion */
0 0 20px rgba(47, 90, 63, 0.08); /* Subtle glow */
}
.hero-button:active {
transform: translateY(0);
box-shadow: var(--shadow-paper-press);
}
.hero-button:disabled,
.hero-button[aria-disabled="true"],
.hero-button.disabled {
opacity: 0.5;
filter: grayscale(0.3); /* Makes disabled state more visually obvious */
cursor: not-allowed;
pointer-events: none;
box-shadow: var(--shadow-paper-rest);
}
.hero-button:disabled:hover,
.hero-button[aria-disabled="true"]:hover,
.hero-button.disabled:hover {
transform: none;
}
.hero-button.loading {
position: relative;
color: transparent;
pointer-events: none;
}
.hero-button.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: spin 0.6s linear infinite;
}
.hero-button-primary.loading::after {
border-color: var(--button-text-light);
border-top-color: transparent;
}
.hero-button-secondary.loading::after {
border-color: var(--color-primary);
border-top-color: transparent;
}
.hero-button-small {
font-size: var(--font-size-md);
width: 260px;
min-height: 44px; /* Maintain accessibility minimum */
}
.cta-buttons-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-top: 0;
}
.cta-buttons-horizontal {
display: flex;
gap: var(--space-3);
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 0;
}
.beta-access-description {
font-size: var(--font-size-body);
color: var(--text-muted);
max-width: 400px;
line-height: var(--line-height-normal);
margin-top: var(--space-2);
margin-bottom: 0;
}
/* Demo Section - Exact Original Implementation */
.demo-section {
max-width: var(--container-xl);
margin: 0 auto;
}
/* Demo Section Error State */
.demo-section[data-state="error"] {
opacity: 0.85;
}
.demo-section[data-state="error"] .compilation-status {
background: rgba(192, 64, 64, 0.08);
border-color: rgba(192, 64, 64, 0.25);
}
.demo-section[data-state="error"] .video-wrapper {
background: rgba(192, 64, 64, 0.03);
border-color: rgba(192, 64, 64, 0.2);
}
.demo-section[data-state="error"] .platforms-bar {
background: rgba(192, 64, 64, 0.05);
border-color: rgba(192, 64, 64, 0.2);
}
/* Compilation Status Bar */
.compilation-status {
background: rgba(251, 249, 243, 0.95);
border: 1px solid var(--border);
border-radius: 24px 24px 0 0;
padding: var(--space-2) var(--space-3);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: none;
backdrop-filter: blur(8px);
}
.status-indicator {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-body);
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
}
.status-indicator .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
position: relative;
}
.status-indicator[data-status="pending"] .dot {
background: var(--text-muted);
}
.status-indicator[data-status="running"] .dot {
background: var(--warning);
animation: pulse 1s infinite;
}
.status-indicator[data-status="success"] .dot {
background: var(--success);
animation: pulse-success 0.5s;
}
.status-indicator[data-status="error"] .dot {
background: var(--error);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.4);
}
50% {
opacity: 0.6;
box-shadow: 0 0 0 8px rgba(255, 170, 0, 0);
}
}
@keyframes pulse-success {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(47, 90, 63, 0.4);
}
50% {
transform: scale(1.2);
box-shadow: 0 0 0 16px rgba(47, 90, 63, 0);
}
100% {
transform: scale(1);
}
}
.build-timer {
font-variant-numeric: tabular-nums;
color: var(--text-muted);
font-size: var(--font-size-xs);
}
/* Video Container - Option C frameless with overflow effect */
.video-wrapper {
background: rgba(251, 249, 243, 0.95);
border: 1px solid var(--border);
border-top: none;
border-bottom: none;
position: relative;
overflow: hidden; /* FIXED: Contain video content within wrapper */
transform: none;
z-index: 10;
margin-bottom: var(--space-4);
border-radius: 0;
backdrop-filter: blur(8px);
}
/* Override for hero-demo-card wrapper to remove borders */
.hero-demo-card .video-wrapper {
border: none;
background: transparent;
backdrop-filter: none;
}
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: transparent;
cursor: pointer;
overflow: hidden; /* FIXED: Contain all child elements */
border-radius: 24px;
/* Performance optimizations */
contain: layout;
transform: translateZ(0); /* Force GPU acceleration */
}
/* Placeholder for actual video */
.video-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
position: relative;
z-index: 3;
border-radius: 24px;
/* FIXED: Removed scale transform to prevent overflow */
transform: none;
transform-origin: center;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}
.video-container video,
.video-container iframe {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: transparent;
}
.play-button {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
z-index: 10;
position: relative;
box-shadow:
0 4px 16px rgba(26, 36, 32, 0.15),
0 12px 48px rgba(26, 36, 32, 0.2);
/* Accessibility improvements */
font-size: 0; /* Hide any text */
}
.play-button:hover {
transform: scale(1.1);
box-shadow:
0 8px 24px rgba(26, 36, 32, 0.2),
0 16px 64px rgba(26, 36, 32, 0.25);
}
.play-button:active {
transform: scale(1.05);
box-shadow:
0 4px 16px rgba(26, 36, 32, 0.15),
0 12px 48px rgba(26, 36, 32, 0.2);
}
.play-button::after {
content: '';
width: 0;
height: 0;
border-left: 28px solid var(--accent);
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
margin-left: 8px;
}
.video-placeholder.playing .play-button {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
/* Trust Badge */
.trust-badge {
position: absolute;
top: 24px;
left: 24px;
background: rgba(47, 90, 63, 0.92);
color: #f6f3ea;
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
border-radius: 8px;
z-index: 20;
display: flex;
align-items: center;
gap: var(--space-1);
box-shadow:
0 2px 8px rgba(26, 36, 32, 0.08),
0 8px 24px rgba(26, 36, 32, 0.12);
}
.trust-badge::before {
content: '';
width: 8px;
height: 8px;
background: #f6f3ea;
border-radius: 50%;
animation: trust-badge-blink 2s infinite;
}
@keyframes trust-badge-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Operation Overlay Metrics */
.operation-overlay {
position: absolute;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 20;
pointer-events: none;
}
.metric-live {
background: rgba(251, 249, 243, 0.88);
backdrop-filter: blur(16px);
border: 1px solid rgba(32, 46, 33, 0.2);
padding: 16px 16px;
border-radius: 12px;
font-size: var(--font-size-xs);
min-width: 180px;
display: flex;
justify-content: space-between;
align-items: center;
transform: translateX(220px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-live.active {
transform: translateX(0);
opacity: 1;
}
.metric-label {
color: var(--text-muted);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
}
.metric-value {
color: var(--accent);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-body);
}
/* Split Screen Comparison */
.split-comparison {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
background: rgba(251, 249, 243, 0.92);
backdrop-filter: blur(18px);
border: 1px solid rgba(32, 46, 33, 0.18);
border-radius: 12px;
padding: var(--space-2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
transform: translateY(120px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 15;
}
.split-comparison.active {
transform: translateY(0);
opacity: 1;
}
.comparison-side {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.comparison-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: var(--space-1);
}
.comparison-title .indicator {
width: 8px;
height: 8px;
border-radius: 50%;
}
.comparison-side.ours .indicator {
background: var(--accent);
}
.comparison-side.theirs .indicator {
background: var(--warning);
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.comparison-time {
font-size: var(--font-size-emphasis); /* 24px - Changed from h4 for semantic clarity */
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
}
.comparison-side.ours .comparison-time {
color: var(--accent);
}
.comparison-side.theirs .comparison-time {
color: var(--warning);
}
.comparison-status {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
/* Operation Log */
.operation-log {
background: rgba(251, 249, 243, 0.95);
border: 1px solid var(--border);
border-radius: 0 0 24px 24px;
border-top: none;
padding: 24px;
max-height: 300px;
overflow-y: auto;
backdrop-filter: blur(8px);
}
.hero-demo-card .operation-log {
border: none;
box-shadow: none;
background: transparent;
}
.log-output {
font-family: 'SF Mono', 'Monaco', monospace;
font-size: var(--font-size-xs);
line-height: 1.6;
color: var(--text-muted);
white-space: pre-wrap;
margin: 0;
}
.log-line {
display: block;
padding: var(--space-1) 0;
opacity: 0;
transform: translateX(-10px);
animation: fadeInLog 0.3s forwards;
}
@keyframes fadeInLog {
to {
opacity: 1;
transform: translateX(0);
}
}
.log-line.command {
color: var(--text);
font-weight: var(--font-weight-semibold);
}
.log-line.success {
color: var(--accent);
}
.log-line.info {
color: var(--text-muted);
}
.log-line.highlight {
color: var(--warning);
font-weight: var(--font-weight-semibold);
}
/* Video Title Overlay */
.video-title-overlay {
position: absolute;
bottom: 48px;
left: 24px;
right: 24px;
background: rgba(251, 249, 243, 0.92);
backdrop-filter: blur(18px);
border: 1px solid rgba(32, 46, 33, 0.18);
border-radius: 12px;
padding: var(--space-2) var(--space-3);
font-family: var(--font-sans);
font-size: var(--font-size-ui-small);
color: var(--text-secondary);
text-align: center;
z-index: 35;
opacity: 1;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.4;
letter-spacing: 0.3px;
}
.video-placeholder.playing .video-title-overlay {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
/* Video Progress Bar */
.video-progress {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
height: 8px;
background: var(--surface-light);
z-index: 25;
}
.video-progress-bar {
height: 100%;
background: var(--accent);
width: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform 400ms linear;
position: relative;
will-change: transform;
}
.video-progress-bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px rgba(47, 90, 63, 0.6);
}
/* Demo Section Responsive Design - Tablet Landscape (lg) */
@media (max-width: 1024px) {
.demo-section {
margin: 0 var(--space-2);
}
}
/* Tablet Portrait (md) - 768px and below */
@media (max-width: 768px) {
.hero-demo {
padding: var(--space-8) var(--space-2) var(--space-8) var(--space-2);
margin-top: var(--space-6);
}
.operation-overlay {
top: var(--space-8);
right: var(--space-1);
}
.metric-live {
min-width: 144px;
padding: var(--space-1);
font-size: var(--font-size-xs);
}
.split-comparison {
grid-template-columns: 1fr;
gap: var(--space-2);
padding: var(--space-2);
}
.trust-badge {
font-size: var(--font-size-xs);
padding: var(--space-1);
letter-spacing: var(--letter-spacing-wide);
}
.video-title-overlay {
left: var(--space-1);
right: var(--space-1);
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
bottom: var(--space-5);
}
.compilation-status {
padding: var(--space-2);
font-size: var(--font-size-xs);
}
.operation-log {
padding: var(--space-2);
}
.log-output {
font-size: var(--font-size-xs);
}
}
/* Enhanced Loading Animations */
.loading-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(47, 90, 63, 0.15) 30%,
rgba(47, 90, 63, 0.3) 50%,
rgba(47, 90, 63, 0.15) 70%,
transparent 100%
);
animation: shimmer 2.5s infinite;
pointer-events: none;
}
@keyframes shimmer {
0% {
left: -100%;
transform: skewX(-15deg);
}
100% {
left: 100%;
transform: skewX(-15deg);
}
}
/* Content loading states */
.content-loading {
opacity: 0;
transform: translateY(var(--space-3));
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-loaded {
opacity: 1;
transform: translateY(0);
}
/* Button loading states */
.cta-button.loading {
pointer-events: none;
opacity: 0.7;
}
.cta-button.loading::after {
content: '';
position: absolute;
width: var(--space-2);
height: var(--space-2);
margin: auto;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Philosophy Section - Redesigned for 10/10 */
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
margin-top: var(--space-8);
margin-bottom: var(--space-12);
align-items: center;
}
.comparison-column {
border-radius: var(--radius-xl);
position: relative;
isolation: isolate;
opacity: 0;
--parallax-y: 0px;
transform: translateY(40px);
transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
backface-visibility: hidden;
}
/* Animation when in view - disable transition for parallax updates */
.comparison-column.in-view {
opacity: 1;
transform: translateY(var(--parallax-y)) translateZ(0);
transition: none;
}
/* GLASS BOX - MAKE IT POP (First Column) */
.comparison-column:nth-child(1) {
/* Animated gradient border using background-origin trick */
background:
linear-gradient(
135deg,
rgba(251, 249, 243, 1) 0%,
rgba(245, 251, 247, 0.98) 100%
) padding-box,
linear-gradient(
135deg,
rgba(47, 90, 61, 0.35) 0%,
rgba(47, 90, 61, 0.15) 50%,
rgba(47, 90, 61, 0.35) 100%
) border-box;
border: 2px solid transparent;
background-size: auto, 200% 200%;
position: relative;
/* Generous padding */
padding: var(--space-8);
/* Prominent shadow */
box-shadow:
0 24px 64px rgba(47, 90, 61, 0.16),
0 8px 24px rgba(47, 90, 61, 0.08),
0 2px 8px rgba(47, 90, 61, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
/* No vertical offset - aligned at top, with parallax support */
transform: translateY(var(--parallax-y)) translateZ(0);
z-index: 2;
}
@keyframes borderFlow {
0%, 100% {
background-position: 0% 0%, 0% 50%;
}
50% {
background-position: 0% 0%, 100% 50%;
}
}
.comparison-column:nth-child(1).in-view {
transform: translateY(var(--parallax-y)) translateZ(0);
opacity: 1;
}
/* Inner glow for glass box */
.comparison-column:nth-child(1)::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
background: radial-gradient(
circle at top right,
rgba(47, 90, 61, 0.04) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
/* Hover effect for glass box - enhanced with animation */
.comparison-column:nth-child(1):hover {
transform: translateY(calc(var(--parallax-y) - var(--space-1))) translateZ(0);
box-shadow:
0 32px 80px rgba(47, 90, 61, 0.2),
0 var(--space-1-5) var(--space-4) rgba(47, 90, 61, 0.12),
0 var(--space-0-5) var(--space-1-5) rgba(47, 90, 61, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
animation: borderFlow 3s ease-in-out infinite;
transition: transform 300ms ease, box-shadow 300ms ease;
}
/* BLACK BOX - MAKE IT RECEDE (Second Column) */
.comparison-column:nth-child(2) {
/* Cool, desaturated background - balanced transparency */
background: rgba(245, 245, 242, 0.88);
/* Weaker border */
border: 1px solid rgba(160, 88, 16, 0.12);
/* Match padding for better alignment */
padding: var(--space-8);
/* Weak shadow */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
z-index: 1;
}
.comparison-column:nth-child(2).in-view {
transform: translateY(var(--parallax-y)) translateZ(0);
opacity: 1;
}
/* Minimal hover for black box */
.comparison-column:nth-child(2):hover {
transform: translateY(var(--parallax-y)) translateZ(0);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
transition: box-shadow 300ms ease;
}
/* Badges */
.recommended-badge {
position: absolute;
top: calc(-1 * var(--space-1-5));
right: var(--space-3);
background: linear-gradient(135deg, var(--accent-green) 0%, #3d7a4f 100%);
color: white;
padding: 6px var(--space-2);
border-radius: var(--radius-lg);
font-size: var(--font-size-badge);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-badge);
text-transform: uppercase;
box-shadow: 0 var(--space-0-5) var(--space-1-5) rgba(47, 90, 61, 0.3);
display: flex;
align-items: center;
gap: 6px;
z-index: 10;
opacity: 0;
transform: scale(0.8) translateY(var(--space-1));
transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Badge animation when parent is in view */
.comparison-column.in-view .recommended-badge {
opacity: 1;
transform: scale(1) translateY(0);
}
.recommended-badge .badge-icon {
width: var(--icon-sm);
height: var(--icon-sm);
stroke: white;
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.recommended-badge:hover .badge-icon {
transform: rotate(360deg) scale(1.1);
}
.legacy-badge {
position: absolute;
top: calc(-1 * var(--space-1-5));
right: var(--space-3);
background: var(--color-legacy-light);
border: 1px solid var(--color-legacy-border);
color: var(--color-legacy);
padding: 6px var(--space-2);
border-radius: var(--radius-lg);
font-size: var(--font-size-badge);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-badge);
text-transform: uppercase;
z-index: 10;
}
/* Screen reader only class */
.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;
}
/* Modern Capability Comparison Section - Phase 1.4 Enhanced */
#comparison {
padding: var(--space-16) 0;
position: relative;
overflow: hidden;
}
#comparison::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120%;
height: 100%;
background: radial-gradient(
ellipse 80% 60% at 50% 40%,
rgba(47, 90, 63, 0.04) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
#comparison .container {
position: relative;
z-index: 1;
}
/* Section Bridge */
.section-bridge {
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-4) 0 var(--space-4) 0;
position: relative;
}
.bridge-connector {
width: 120px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(47, 90, 63, 0.3) 50%,
transparent 100%
);
position: relative;
}
.bridge-connector::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--space-0-5);
height: var(--space-0-5);
background: var(--accent-green);
border-radius: 50%;
box-shadow: 0 0 var(--space-1) rgba(47, 90, 63, 0.5);
}
.bridge-text {
margin: 0 var(--space-4);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
letter-spacing: 0.1em;
opacity: 0.8;
}
/* ===== COMPARISON SECTION ENHANCEMENTS ===== */
/* Heading Typography Enhancement - Consistent with Philosophy Section */
#comparison h2 {
margin-bottom: var(--space-8);
text-align: center;
}
/* Phase 1.2 & 1.3: Enhanced Toggle Design */
.comparison-toggle-container {
text-align: center;
margin-bottom: var(--space-6);
position: relative;
z-index: 10;
}
.comparison-toggle-label {
display: block;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-2);
}
.comparison-toggle {
display: inline-flex;
align-items: stretch;
gap: var(--space-1);
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(32, 46, 33, 0.18);
border-radius: 12px;
padding: var(--space-1);
margin: 0 auto;
box-shadow:
0 2px 8px rgba(26, 36, 32, 0.08),
0 4px 16px rgba(26, 36, 32, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
position: relative;
}
.comparison-toggle-option {
appearance: none;
border: none;
background: transparent;
color: var(--text-secondary);
padding: 0.625rem 1.25rem;
border-radius: 10px;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.01em;
cursor: pointer;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
min-width: 180px;
min-height: 48px;
white-space: nowrap;
position: relative;
}
/* Phase 2.8: Enhanced Hover States */
.comparison-toggle-option:hover:not(.is-active) {
color: var(--text-primary);
background: rgba(47, 90, 63, 0.06);
transform: translateY(-1px);
}
/* Current State (Warning Style) */
.comparison-toggle-option:first-child {
color: #d69a3a;
}
.comparison-toggle-option:first-child.is-active {
background: linear-gradient(
135deg,
rgba(214, 154, 58, 0.18) 0%,
rgba(214, 154, 58, 0.12) 100%
);
color: #d69a3a;
box-shadow:
0 2px 6px rgba(160, 88, 16, 0.15),
0 4px 12px rgba(160, 88, 16, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
/* Pando State (Success Style) */
.comparison-toggle-option.is-active {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.18) 0%,
rgba(47, 90, 63, 0.12) 100%
);
color: var(--accent-green);
box-shadow:
0 2px 6px rgba(47, 90, 63, 0.15),
0 4px 12px rgba(47, 90, 63, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
/* Phase 3.13: Focus states for accessibility */
.comparison-toggle-option:focus-visible {
outline: 3px solid var(--accent-green);
outline-offset: 2px;
z-index: 1;
}
.comparison-toggle-option .toggle-title {
display: block;
}
/* Phase 1.1: Glass-Panel Wrapper */
.comparison-table {
max-width: 920px;
margin: 0 auto;
position: relative;
}
.capability-table-wrapper {
background: rgba(251, 249, 243, 0.92);
border: 1px solid rgba(32, 46, 33, 0.16);
border-radius: 32px;
box-shadow:
0 40px 120px rgba(32, 46, 33, 0.12),
0 12px 32px rgba(32, 46, 33, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
backdrop-filter: blur(16px);
padding: var(--space-6);
position: relative;
overflow: hidden;
}
/* Subtle gradient overlay for depth - removed for visual balance */
.capability-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 var(--space-3);
background: transparent;
border: none;
font-family: var(--font-sans);
}
/* Hide table header - move info to toggle label (Phase 1.5) */
.capability-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Phase 1.5 & 2.6: Enhanced Row Styling with Scroll-Triggered Reveal Animation */
.capability-row {
opacity: 0;
transform: translateY(20px);
/* Separate transitions for reveal vs hover to prevent conflicts */
transition:
opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Revealed state - triggered by IntersectionObserver */
.capability-row.reveal-animated {
animation: revealRow 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Staggered reveal animation delays */
.capability-row[data-reveal="0"].reveal-animated { animation-delay: 100ms; }
.capability-row[data-reveal="1"].reveal-animated { animation-delay: 200ms; }
.capability-row[data-reveal="2"].reveal-animated { animation-delay: 300ms; }
.capability-row[data-reveal="3"].reveal-animated { animation-delay: 400ms; }
.capability-row[data-reveal="4"].reveal-animated { animation-delay: 500ms; }
.capability-row[data-reveal="5"].reveal-animated { animation-delay: 600ms; }
@keyframes revealRow {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Challenge column (left) */
.capability-table td:first-child {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(32, 46, 33, 0.12);
border-radius: var(--radius-md) 0 0 var(--radius-md);
padding: var(--space-4) var(--space-5);
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-body);
line-height: 1.4;
width: 45%;
vertical-align: middle;
border-right: none;
position: relative;
/* Smooth box-shadow transition for hover */
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Add subtle left border accent with state-based colors */
.capability-table td:first-child::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
/* Default: Pandō view (green) */
background: linear-gradient(
180deg,
var(--accent-green) 0%,
rgba(47, 90, 63, 0.3) 100%
);
border-radius: 0 2px 2px 0;
/* Smooth transitions for height, glow, and color state changes */
transition:
height 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
background 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Current State view: Orange/warning accent bars */
.comparison-table[data-view="current"] .capability-table td:first-child::before {
background: linear-gradient(
180deg,
#d69a3a 0%,
rgba(214, 154, 58, 0.3) 100%
);
}
/* Solution cell (right) */
.capability-table .solution-cell {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(32, 46, 33, 0.12);
border-left: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-4) var(--space-5);
width: 55%;
vertical-align: middle;
position: relative;
overflow: hidden;
min-height: 80px;
/* Smooth box-shadow transition for hover */
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Phase 2.7: Enhanced transition effect for solution text */
.current-solution,
.pando-solution {
display: block;
font-size: var(--font-size-body);
line-height: 1.5;
transition:
opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
left: var(--space-5);
right: var(--space-5);
top: 50%;
transform: translateY(-50%);
}
.current-solution {
color: #c04040;
font-weight: var(--font-weight-medium);
opacity: 1;
}
.current-solution.hidden {
opacity: 0;
transform: translateY(-50%) translateX(-20px);
pointer-events: none;
}
.pando-solution {
color: var(--accent-green);
font-weight: var(--font-weight-semibold);
opacity: 0;
transform: translateY(-50%) translateX(20px);
pointer-events: none;
}
.pando-solution.visible {
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
/* Phase 2.8: Hover effect on rows - Smooth and buttery */
.capability-row:hover {
/* Subtle lift - uses GPU-accelerated transform */
transform: translateY(-3px);
}
.capability-row:hover td {
/* Elegant shadow lift on both cells */
box-shadow: 0 6px 16px rgba(26, 36, 32, 0.12);
}
.capability-row:hover td:first-child::before {
/* Accent bar grows and glows smoothly - default green glow */
height: 85%;
box-shadow: 0 0 16px rgba(47, 90, 63, 0.5);
}
/* Current State view: Orange glow on hover */
.comparison-table[data-view="current"] .capability-row:hover td:first-child::before {
box-shadow: 0 0 16px rgba(214, 154, 58, 0.6);
}
/* Animate icons on toggle (Phase 2.8) */
.pando-solution.visible::before {
animation: checkBounce 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes checkBounce {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Phase 3.13: Accessibility - Keyboard navigation */
.capability-row:focus-within {
outline: 3px solid var(--accent-green);
outline-offset: 4px;
border-radius: var(--radius-md);
}
/* Phase 3.13: High contrast mode support */
@media (prefers-contrast: high) {
.capability-table td:first-child {
border: 2px solid var(--text-primary);
}
.current-solution {
color: #ff0000;
font-weight: var(--font-weight-bold);
}
.pando-solution {
color: #006400;
font-weight: var(--font-weight-bold);
}
}
/* Phase 3.13: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.capability-row,
.capability-row.reveal-animated,
.current-solution,
.pando-solution,
.comparison-toggle-option,
.capability-table td:first-child::before {
animation: none !important;
transition: none !important;
}
.capability-row,
.capability-row.reveal-animated {
opacity: 1;
transform: none;
}
}
/* Phase 3.11: Mobile Optimization - Tablet (768px and below) */
@media (max-width: 768px) {
#comparison {
padding: var(--space-12) 0;
}
#comparison h2 {
font-size: 2rem;
margin-bottom: var(--space-4);
}
.capability-table-wrapper {
padding: var(--space-4);
border-radius: 24px;
}
.comparison-toggle-option {
min-width: 140px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.capability-table {
border-spacing: 0 var(--space-2);
}
.capability-table td:first-child,
.capability-table .solution-cell {
padding: var(--space-3) var(--space-4);
font-size: 0.875rem;
}
}
/* Phase 3.11: Mobile (640px and below) - Stack into vertical cards */
@media (max-width: 640px) {
.capability-table {
display: block;
border-spacing: 0;
}
.capability-table tbody {
display: block;
}
.capability-row {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: var(--space-4);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 2px 8px rgba(26, 36, 32, 0.08);
}
.capability-table td:first-child {
width: 100%;
border-radius: var(--radius-md) var(--radius-md) 0 0;
border-right: 1px solid rgba(32, 46, 33, 0.12);
padding: var(--space-3);
text-align: center;
font-size: var(--font-size-body);
}
.capability-table td:first-child::before {
display: none;
}
.capability-table .solution-cell {
width: 100%;
border-radius: 0 0 var(--radius-md) var(--radius-md);
border-left: 1px solid rgba(32, 46, 33, 0.12);
border-top: 2px solid rgba(32, 46, 33, 0.12);
min-height: 72px;
padding: var(--space-4) var(--space-3);
}
.current-solution,
.pando-solution {
position: static;
transform: none !important;
left: auto;
right: auto;
text-align: center;
}
.current-solution.hidden {
display: none;
}
.pando-solution.visible {
display: block;
}
.comparison-toggle {
flex-direction: row;
width: 100%;
max-width: 400px;
}
.comparison-toggle-option {
flex: 1;
min-width: unset;
padding: 0.5rem 0.75rem;
}
}
/* Bridge Connector - Consistent with Philosophy Section */
.comparison-to-features-bridge {
/* Inherits from .section-bridge base styles */
}
/* Phase 3.10: Iconography for Challenge Cells */
.capability-table td:first-child::after {
content: '';
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
opacity: 0.2;
background-size: contain;
background-repeat: no-repeat;
}
/* Scale icon for bulk operations */
.capability-row[data-reveal="0"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Clock/history icon for time travel queries */
.capability-row[data-reveal="1"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Network icon for cross-package operations */
.capability-row[data-reveal="2"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Document icon for audit trail */
.capability-row[data-reveal="3"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Undo icon for rollback */
.capability-row[data-reveal="4"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Preview icon for impact analysis */
.capability-row[data-reveal="5"] td:first-child::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* Typography - Glass Box (First Column) */
.comparison-column:nth-child(1) h3 {
font-size: var(--font-size-h4); /* 24px */
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-4);
text-align: center;
color: var(--accent-green);
background: linear-gradient(
135deg,
var(--accent-green) 0%,
#3d7a4f 50%,
var(--accent-green) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
/* Legacy text icon styles removed - now using SVG icons */
.comparison-column:nth-child(1) h3 .subtitle {
font-size: var(--font-size-ui-small);
font-weight: var(--font-weight-medium);
letter-spacing: 0.05em;
text-transform: uppercase;
-webkit-text-fill-color: rgba(47, 90, 61, 0.6);
background: none;
}
/* Typography - Black Box (Second Column) */
.comparison-column:nth-child(2) h3 {
font-size: var(--font-size-ui-icon); /* 20px */
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-relaxed);
margin-bottom: var(--space-3);
text-align: center;
color: var(--color-legacy);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-0-5);
}
/* Legacy text icon styles removed - now using SVG icons */
.comparison-column:nth-child(2) h3 .subtitle {
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(122, 61, 10, 0.5);
}
.comparison-column ul {
list-style: none;
padding: 0;
}
/* Additional Responsive Enhancements for Comparison Section */
@media (max-width: 768px) {
.section-bridge {
margin: var(--space-6) 0 var(--space-4) 0;
}
.bridge-connector {
width: 80px;
}
.bridge-text {
font-size: var(--font-size-xs);
margin: 0 var(--space-3);
}
.capability-row:hover {
transform: none;
scale: 1;
box-shadow: none;
z-index: auto;
}
}
/* Glass Box List Items */
.comparison-column:nth-child(1) ul {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.comparison-column:nth-child(1) li {
position: relative;
list-style: none;
font-size: var(--font-size-feature-subtitle); /* 17px */
line-height: var(--line-height-relaxed);
color: var(--text-primary);
opacity: 0;
transform: translateX(-20px);
animation: slideIn 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
border-radius: var(--radius-sm);
padding: var(--space-1); /* Equal padding on all sides - SVG icons are flex items */
margin: 0 calc(-1 * var(--space-1));
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced hover state for glass box items */
.comparison-column:nth-child(1) li:hover {
background: rgba(47, 90, 61, 0.04);
transform: translateX(0);
padding-left: calc(var(--space-4) + 4px);
}
.comparison-column:nth-child(1) li:nth-child(1) { animation-delay: 400ms; }
.comparison-column:nth-child(1) li:nth-child(2) { animation-delay: 500ms; }
.comparison-column:nth-child(1) li:nth-child(3) { animation-delay: 600ms; }
.comparison-column:nth-child(1) li:nth-child(4) { animation-delay: 700ms; }
@keyframes slideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Text-based icons removed - now using SVG bullet icons */
.comparison-column:nth-child(1) li strong {
font-size: var(--font-size-body-large); /* 18px */
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
color: var(--accent-green);
display: block;
}
/* Make emojis in strong tags interactive */
.comparison-column li strong {
cursor: default;
}
/* Black Box List Items */
.comparison-column:nth-child(2) ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.comparison-column:nth-child(2) li {
position: relative;
padding-left: 0; /* Removed padding since SVG icons are now flex items */
list-style: none;
font-size: var(--font-size-ui-button); /* 15px */
line-height: var(--line-height-relaxed);
color: rgba(26, 26, 26, 0.75);
}
/* Text-based arrow icon removed - now using SVG bullet icons */
.comparison-column:nth-child(2) li strong {
font-size: var(--font-size-body); /* 16px */
font-weight: var(--font-weight-medium);
margin-bottom: 6px;
color: var(--color-legacy);
display: block;
}
/* De-emphasize the timeline only */
.timeline-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
position: relative;
margin-bottom: var(--space-8);
}
.timeline {
text-align: left;
padding: var(--space-5);
border-radius: var(--radius-xl);
position: relative;
font-family: var(--font-sans);
color: var(--text-secondary);
overflow: hidden;
}
/* First timeline - Match Glass Box colors */
.timeline:first-child,
#timeline-our-approach {
background: linear-gradient(
135deg,
rgba(251, 249, 243, 1) 0%,
rgba(245, 251, 247, 0.98) 100%
);
border: 2px solid rgba(47, 90, 61, 0.18);
box-shadow:
0 20px 50px rgba(47, 90, 61, 0.14),
0 8px 20px rgba(47, 90, 61, 0.08);
}
/* Timeline Race Indicators - Original subtle bars */
.race-indicator {
position: absolute;
left: var(--space-2);
width: var(--space-0-5);
height: var(--space-3);
border-radius: 2px;
transform: translateY(calc(-1 * var(--space-1-5)));
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.race-indicator.green {
background: var(--accent-green);
box-shadow: 0 0 var(--space-1-5) rgba(47, 90, 63, 0.6);
}
.race-indicator.orange {
background: var(--warning);
box-shadow: 0 0 var(--space-1-5) rgba(255, 170, 0, 0.6);
}
.timeline ul {
position: relative;
list-style: none;
padding: 0;
text-align: left;
}
.timeline li {
position: relative;
padding: var(--space-1-5) 0 var(--space-1-5) var(--space-4);
margin-bottom: var(--space-1);
border-radius: var(--space-0-5);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline li.active-step {
background: rgba(47, 90, 63, 0.06);
border-left: 2px solid var(--accent-green);
padding-left: calc(var(--space-4) - 2px);
}
.timeline span[data-value] {
font-variant-numeric: tabular-nums;
font-weight: var(--font-weight-bold);
font-family: var(--font-monospace);
font-size: 1.15em;
background: linear-gradient(135deg, var(--accent-green) 0%, #4a8f5f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding: 0 4px;
transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline li.completed span[data-value] {
color: var(--accent-green);
}
/* Completion indicators - Enhanced */
.completion-check {
display: inline-block;
margin-left: var(--space-1-5);
font-size: 1.25em;
color: var(--accent-green);
opacity: 0;
transform: scale(0) rotate(-45deg);
transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.completion-check.show {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* Second timeline - Match Black Box colors and transparency */
#timeline-state-of-the-art {
background: rgba(245, 245, 242, 0.88);
border: 1px solid rgba(160, 88, 16, 0.12);
box-shadow: 0 var(--space-1) var(--space-3) rgba(0, 0, 0, 0.06);
}
#timeline-state-of-the-art li.active-step {
border-left-color: var(--color-legacy);
background: rgba(160, 88, 16, 0.08);
}
#timeline-state-of-the-art span[data-value],
#timeline-state-of-the-art .completion-check {
color: var(--color-legacy);
}
/* Spinning loader for infinite items - Enhanced */
.infinite-loader {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 170, 0, 0.2);
border-top: 3px solid var(--warning);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: var(--space-1-5);
opacity: 0;
transform: scale(0);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.infinite-loader.show {
opacity: 1;
transform: scale(1);
}
/* Pulsing background for stuck steps */
#timeline-state-of-the-art li[data-step="2"],
#timeline-state-of-the-art li[data-step="3"],
#timeline-state-of-the-art li[data-step="4"] {
animation: errorPulse 2s ease-in-out infinite;
}
@keyframes errorPulse {
0%, 100% { background: rgba(255, 68, 68, 0.05); }
50% { background: rgba(255, 68, 68, 0.1); }
}
.timeline h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-4);
letter-spacing: -0.01em;
}
#timeline-our-approach h3 {
color: var(--accent-green);
}
#timeline-state-of-the-art h3 {
color: var(--color-legacy);
}
.timeline ul {
list-style: none;
padding: 0;
}
.timeline li {
margin-bottom: var(--space-1);
font-family: var(--font-sans);
font-size: var(--font-size-ui-button);
letter-spacing: 0.01em;
}
.timeline span {
color: var(--accent-green);
font-weight: bold;
}
/* Philosophy section header - now consistent with other sections */
/* Speed comparison chart removed */
/* SVG Icon Styles for Comparison Grid */
.icon-check-circle,
.icon-warning-circle {
width: 48px;
height: 48px;
margin-bottom: var(--space-2);
flex-shrink: 0;
}
.comparison-column:nth-child(1) .icon-check-circle {
color: var(--accent-green);
stroke-width: 1.5;
}
.comparison-column:nth-child(2) .icon-warning-circle {
color: var(--color-legacy);
stroke-width: 1.5;
}
.comparison-column h3 {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-5);
}
.bullet-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
color: var(--accent-green);
}
.comparison-column:nth-child(2) .bullet-icon {
color: var(--color-legacy);
opacity: 0.6;
}
.comparison-column ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.comparison-column li {
display: flex;
gap: var(--space-2);
align-items: flex-start;
line-height: 1.6;
}
.comparison-column li > div {
flex: 1;
}
/* Enhanced LEGACY Badge */
.legacy-badge {
position: absolute;
top: calc(-1 * var(--space-1-5));
right: var(--space-3);
background: linear-gradient(135deg, #d69a3a 0%, #b8802f 100%);
color: white;
padding: 6px var(--space-2);
border-radius: var(--radius-lg);
font-size: var(--font-size-badge);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-badge);
text-transform: uppercase;
box-shadow:
0 4px 12px rgba(214, 154, 58, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
z-index: 10;
}
/* Bridge Connector Enhancement */
.philosophy-bridge {
margin-top: var(--space-8);
margin-bottom: 0;
}
.bridge-connector {
width: 180px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(47, 90, 63, 0.4) 50%,
transparent 100%
);
position: relative;
}
.bridge-connector::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: var(--accent-green);
border-radius: 50%;
box-shadow: 0 0 16px rgba(47, 90, 63, 0.6);
}
.connector-pulse {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid var(--accent-green);
animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.bridge-text {
font-size: var(--font-size-md);
font-family: var(--font-display);
font-style: italic;
color: var(--text-secondary);
letter-spacing: 0.02em;
margin: 0 var(--space-4);
}
/* Micro-interactions and Hover States */
.timeline li {
cursor: pointer;
}
.timeline li:hover {
background: rgba(47, 90, 63, 0.04);
transform: translateX(4px);
padding-left: calc(var(--space-4) + 4px);
}
.timeline li:hover span[data-value] {
transform: scale(1.1);
display: inline-block;
}
.comparison-column:nth-child(1):hover h3 .icon-check-circle {
animation: checkBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkBounce {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.15) rotate(5deg); }
}
/* Features Section */
#features {
background: linear-gradient(180deg,
rgba(47, 90, 63, 0.005) 0%,
rgba(47, 90, 63, 0.003) 50%,
rgba(47, 90, 63, 0.002) 100%
);
}
/* Principles Section */
#principles {
background: linear-gradient(180deg,
rgba(47, 90, 63, 0.002) 0%,
rgba(47, 90, 63, 0.001) 50%,
rgba(47, 90, 63, 0.0005) 100%
);
}
.principles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-bottom: 0;
/* Removed padding - inherits from parent .container */
}
.principle {
text-align: center;
cursor: pointer;
padding: var(--space-6); /* Increased from var(--space-3) for better breathing room */
border-radius: var(--radius-xl); /* 28px - match comparison cards */
opacity: 0;
transform: translateY(40px);
/* EXACT transitions matching final-cta container - INCLUDING OPACITY */
transition:
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
background 600ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
/* Remove will-change from static state - add only during animation */
position: relative;
z-index: 1;
/* FIX #8: CSS containment for better rendering performance */
contain: layout style paint;
/* GLASS MORPHISM - EXACT match to final-cta container */
background: rgba(251, 249, 243, 0.75); /* Match final-cta base opacity */
backdrop-filter: blur(16px); /* MATCH final-cta EXACTLY: 16px not 12px */
-webkit-backdrop-filter: blur(16px); /* Safari support */
/* SOPHISTICATED BORDER - Gradient with inset highlight */
border: 1px solid rgba(32, 46, 33, 0.18);
/* MULTI-LAYERED SHADOW - Match comparison cards */
box-shadow:
0 24px 48px rgba(32, 46, 33, 0.10),
0 8px 16px rgba(32, 46, 33, 0.08),
0 2px 4px rgba(32, 46, 33, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Subtle top highlight */
isolation: isolate;
}
/* ADD SUBTLE GRADIENT OVERLAY - More visible on hover */
.principle::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
background: radial-gradient(
circle at top center,
rgba(47, 90, 61, 0.08) 0%,
transparent 70%
);
pointer-events: none;
z-index: -1;
opacity: 0;
transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Entrance animation - CLASS-BASED like final-cta (not keyframes) */
/* This avoids transform conflicts with hover state */
.principle.animate-in {
opacity: 1;
transform: translateY(0);
}
/* PREMIUM HOVER - SMOOTH like final-cta container */
/* Magnetic effect is disabled for principle cards, so no conflicts */
.principle.animate-in:hover {
/* Clean Y-axis lift matching final-cta container - NO SCALE, NO !important */
transform: translateY(-4px);
background: rgba(251, 249, 243, 0.95); /* Slightly more opaque on hover */
border-color: rgba(47, 90, 63, 0.35); /* Match final-cta border intensity EXACTLY */
box-shadow:
0 48px 100px rgba(32, 46, 33, 0.16),
0 20px 40px rgba(32, 46, 33, 0.12),
0 8px 16px rgba(32, 46, 33, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(47, 90, 63, 0.08); /* Match final-cta exactly */
}
.principle.animate-in:hover::before {
opacity: 1; /* Reveal gradient overlay on hover */
}
.principle-icon {
width: var(--space-8); /* 64px */
height: var(--space-8);
margin: 0 auto var(--space-4); /* Increased from var(--space-3) */
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-green);
position: relative;
/* ADD ICON BACKGROUND CIRCLE */
background: rgba(47, 90, 61, 0.06);
border-radius: 50%;
transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principle:hover .principle-icon {
background: rgba(47, 90, 61, 0.10);
box-shadow:
0 4px 12px rgba(47, 90, 61, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.principle-icon svg {
width: 60%; /* Icons were too large - reduce to 60% of container */
height: 60%;
transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principle:hover .principle-icon svg {
color: var(--accent-green-bright);
transform: scale(1.08); /* Reduced from 1.1 */
}
.principle h4 {
margin-bottom: var(--space-2);
color: var(--text-primary); /* Changed from --accent-green for better hierarchy */
transition: color 600ms cubic-bezier(0.4, 0, 0.2, 1);
font-weight: var(--font-weight-semibold);
font-family: var(--font-display); /* Use display font for elegance */
font-size: var(--font-size-body-large); /* 18px - slightly larger for impact */
line-height: var(--line-height-tight);
letter-spacing: -0.005em; /* Subtle tightening */
}
.principle:hover h4 {
color: var(--color-primary-bright);
}
.principle-text {
font-size: var(--font-size-body);
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
transition: color 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principle:hover .principle-text {
color: var(--text-primary); /* Darken on hover for emphasis */
}
/* Enhanced focus states for accessibility */
.principle:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
box-shadow:
0 32px 64px rgba(47, 90, 61, 0.14),
0 12px 24px rgba(47, 90, 61, 0.10),
0 0 0 4px rgba(47, 90, 61, 0.15);
}
/* Section Headlines Animations - Enhanced typography */
#principles h2,
#philosophy h2 {
opacity: 0;
transform: translateY(calc(var(--space-4) - 2px));
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
font-family: var(--font-display);
font-size: clamp(2.25rem, 3.2vw, 3rem); /* Slightly larger */
font-weight: var(--font-weight-light);
margin-bottom: var(--space-8); /* More space before cards */
letter-spacing: var(--letter-spacing-tight);
color: var(--text-primary);
}
#principles h2.animate-in,
#philosophy h2.animate-in {
opacity: 1;
transform: translateY(0);
}
.small-text {
font-size: var(--font-size-xs);
}
/* Tablet - 3 columns */
@media (max-width: 1024px) {
.principles-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.principle:nth-child(4) {
grid-column: 2 / 3; /* Center the 4th card */
}
}
/* Mobile - 2 columns */
@media (max-width: 768px) {
.principles-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.principle {
padding: var(--space-4);
}
.principle:nth-child(4) {
grid-column: auto; /* Reset centering */
}
}
/* Small mobile - 1 column */
@media (max-width: 480px) {
.principles-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
.cta-button {
background: transparent;
border: 1px solid var(--accent-green);
color: var(--accent-green);
padding: var(--space-3) var(--space-6);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 11px 12px 12px 11px; /* Asymmetric organic */
opacity: 0;
transform: translateY(30px);
box-shadow: var(--shadow-paper-rest);
/* Accessibility improvements */
min-height: 48px; /* TIER 1: Primary CTA height */
min-width: 180px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
position: relative;
z-index: 1;
text-align: center;
/* FIX #8: will-change managed dynamically by JS on hover for better performance */
/* FIX #8: CSS containment for smoother animations */
contain: layout style paint;
}
.cta-button.animate-in {
opacity: 1;
transform: translateY(0);
}
.download-icon {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Organic bounce-out easing */
flex-shrink: 0;
}
.cta-button:hover {
background: linear-gradient(
180deg,
#3a6449 0%,
var(--accent-green) 50%,
#2a5036 100%
);
color: var(--bg-primary);
border-color: var(--accent-green);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.25),
inset 0 0 0 1px rgba(47, 90, 63, 0.3),
0 0 16px rgba(47, 90, 63, 0.12);
}
.cta-button:hover .download-icon {
transform: translateY(2px); /* Organic settling motion */
}
.cta-button:active {
transform: translateY(0);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-paper-press);
}
.cta-button:active .download-icon {
transform: translateY(0);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-button:disabled,
.cta-button[aria-disabled="true"],
.cta-button.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
box-shadow: var(--shadow-paper-rest);
}
.cta-button:disabled:hover,
.cta-button[aria-disabled="true"]:hover,
.cta-button.disabled:hover {
transform: none;
background: transparent;
color: var(--accent-green);
border-color: var(--accent-green);
}
/* Supporting Visual Elements */
.cta-supporting-elements {
margin-top: var(--space-3);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.platform-badges {
display: flex;
gap: var(--space-3);
align-items: center;
}
.platform-badge {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: rgba(47, 90, 63, 0.08); /* Subtle organic background */
border-radius: 6px; /* Organic rounded, increased from 4px */
font-family: var(--font-sans); /* Inter */
font-size: var(--font-size-ui-small); /* 14px */
font-weight: var(--font-weight-medium); /* 500 */
color: var(--text-secondary);
letter-spacing: 0.01em; /* Subtle spacing */
border: 1px solid rgba(47, 90, 63, 0.15); /* Refined border */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.platform-badge:hover {
background: rgba(107, 143, 113, 0.12); /* Moss green on hover */
border-color: rgba(107, 143, 113, 0.25);
color: var(--text-primary);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(47, 90, 63, 0.1);
}
/* FOOTER - Organic Academia Aesthetic */
#main-footer {
border-top: 1px solid var(--border);
padding: var(--space-8) 0 var(--space-6);
background: linear-gradient(
180deg,
var(--bg-primary) 0%,
rgba(241, 239, 232, 0.4) 100%
);
position: relative;
overflow: hidden;
}
/* Living animated pulse line - ties back to mycelium theme */
#main-footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--color-primary) 20%,
var(--color-primary) 80%,
transparent
);
animation: footerPulse 4s ease-in-out infinite;
}
/* Secondary accent pulse with offset timing */
#main-footer::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--color-accent, #c4a35a) 30%,
var(--color-accent, #c4a35a) 70%,
transparent
);
animation: footerPulse 4s ease-in-out 2s infinite;
opacity: 0.6;
}
@keyframes footerPulse {
0%, 100% {
width: 200px;
opacity: 0.4;
}
50% {
width: 400px;
opacity: 0.7;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
#main-footer::before,
#main-footer::after {
animation: none;
width: 300px;
opacity: 0.5;
}
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.footer-links {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--font-size-ui-small);
color: var(--text-muted);
line-height: var(--line-height-normal);
}
.footer-copyright {
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal);
}
.footer-divider {
color: var(--text-secondary);
opacity: 0.5;
user-select: none;
margin: 0 6px;
}
.footer-brand-group,
.footer-legal-group {
display: inline-flex;
align-items: center;
}
.footer-divider-strong {
width: 1px;
height: 14px;
background: var(--text-secondary);
opacity: 0.25;
margin: 0 20px;
}
.footer-parent {
font-size: 0.8125rem;
color: var(--text-muted);
opacity: 0.8;
}
.footer-parent a {
color: var(--text-secondary);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color 300ms ease;
}
.footer-parent a:hover {
color: var(--color-primary);
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
position: relative;
padding: 4px 8px;
border-radius: 6px;
letter-spacing: var(--letter-spacing-normal);
transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-links a::after {
content: '';
position: absolute;
bottom: 2px;
left: 8px;
right: 8px;
height: 1px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-links a:hover {
color: var(--color-primary);
background-color: rgba(47, 90, 63, 0.04);
}
.footer-links a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* Enhanced focus state for footer links - Mycelium rings */
.footer-links a:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--bg-primary),
0 0 0 4px rgba(47, 90, 63, 0.5),
0 0 0 6px rgba(47, 90, 63, 0.2);
background-color: rgba(47, 90, 63, 0.06);
}
.footer-tagline {
font-family: var(--font-sans);
font-size: var(--font-size-ui-small);
letter-spacing: var(--letter-spacing-relaxed);
color: var(--text-muted);
text-align: center;
margin: 0;
opacity: 0.75;
font-style: italic;
position: relative;
padding-top: var(--space-3);
}
.footer-tagline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--text-secondary) 50%,
transparent 100%
);
opacity: 0.25;
}
/* Responsive adjustments for footer */
@media (max-width: 640px) {
#main-footer {
padding: var(--space-6) 0 var(--space-5);
margin-top: var(--space-8);
}
.footer-links {
flex-direction: column;
font-size: var(--font-size-caption);
gap: var(--space-2);
line-height: 1.6;
}
.footer-brand-group,
.footer-legal-group {
justify-content: center;
}
.footer-divider-strong {
display: none;
}
.footer-divider {
margin: 0 4px;
}
.footer-links a {
padding: 6px 8px;
}
.footer-tagline {
font-size: var(--font-size-caption);
padding: 0 var(--space-3);
padding-top: var(--space-4);
}
}
/* Legacy support for old .tagline class */
.tagline {
font-family: var(--font-sans);
font-size: var(--font-size-ui-small);
letter-spacing: var(--letter-spacing-relaxed);
color: var(--text-muted);
text-align: center;
margin: 0;
opacity: 0.75;
font-style: italic;
}
/* Pricing Section */
.why-this-works {
margin: var(--space-6) 0 var(--space-8);
text-align: center;
}
.pricing-bridge {
margin-top: var(--space-8);
margin-bottom: var(--space-6);
position: relative;
}
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
align-items: stretch;
}
.why-card {
background: rgba(251, 249, 243, 0.96);
border: 1px solid rgba(32, 46, 33, 0.12);
border-radius: 18px;
padding: var(--space-5);
text-align: left;
display: grid;
gap: var(--space-3);
align-content: start;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 20px 45px rgba(32, 46, 33, 0.08),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
isolation: isolate;
}
.why-card:hover {
border-color: rgba(47, 90, 63, 0.2);
transform: translateY(-4px);
box-shadow:
0 28px 50px rgba(32, 46, 33, 0.12),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.why-icon {
width: var(--space-6); /* 48px - reduced from 64px for better proportion */
height: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-green);
position: relative;
/* Match principle-icon background circle */
background: rgba(47, 90, 61, 0.06);
border-radius: 50%;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover .why-icon {
background: rgba(47, 90, 61, 0.10);
box-shadow:
0 4px 12px rgba(47, 90, 61, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.why-icon svg {
width: 60%; /* Match principle-icon svg sizing */
height: 60%;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover .why-icon svg {
color: var(--accent-green-bright);
transform: scale(1.08);
}
.why-card h4 {
margin: 0;
font-size: var(--font-size-md);
color: var(--text-primary);
letter-spacing: -0.01em;
transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover h4 {
color: var(--color-primary-bright);
}
.why-card p {
margin: 0;
font-size: var(--font-size-body);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover p {
color: var(--text-primary); /* Darken on hover for emphasis */
}
#pricing {
padding: var(--space-12) 0;
border-top: 1px solid var(--border);
background: linear-gradient(180deg,
rgba(47, 90, 63, 0.0005) 0%,
rgba(47, 90, 63, 0.0003) 40%,
rgba(47, 90, 63, 0.0001) 80%,
transparent 100%
);
}
#pricing h2 {
text-align: center;
margin-bottom: var(--space-8);
font-size: clamp(2.25rem, 3.4vw, var(--font-size-h2)); /* Increased from 28-32px to 36-48px for more impact */
color: var(--text-primary);
line-height: var(--line-height-tight);
}
.pricing-subtitle {
text-align: center;
margin-bottom: var(--space-8);
font-size: var(--font-size-md);
color: var(--text-secondary);
max-width: 90ch;
margin-left: auto;
margin-right: auto;
letter-spacing: -0.01em;
}
/* Pricing markers (check/dash) emphasis */
#pricing .pf-icon {
color: var(--accent-green);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-6);
width: 100%;
margin: 0 auto var(--space-8);
align-items: stretch;
}
.pricing-card {
background: rgba(251, 249, 243, 0.94);
border: 1px solid rgba(32, 46, 33, 0.16);
border-radius: 28px 32px 30px 32px; /* Organic asymmetry */
padding: var(--space-6);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
/* Simple fade-up animation */
animation: unfold 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
display: grid;
grid-template-rows: auto auto auto 1fr auto;
grid-template-areas:
"header"
"description"
"features"
"spacer"
"cta";
font-family: var(--font-sans);
box-shadow:
0 24px 48px rgba(32, 46, 33, 0.10),
0 8px 16px rgba(32, 46, 33, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 3px rgba(26, 36, 32, 0.06);
isolation: isolate;
}
.pricing-card:nth-child(1) {
animation-delay: 0.1s;
}
.pricing-card:nth-child(2) {
animation-delay: 0.2s;
}
.pricing-card:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes cardEntranceDelay {
to {
opacity: 1;
transform: translateY(0);
}
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(47, 90, 63, 0.05), transparent);
transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 0;
}
.pricing-card:hover::before {
left: 100%;
}
.pricing-card:hover {
transform: translateY(-8px) scale(1.01);
border-color: rgba(47, 90, 63, 0.4);
box-shadow: 0 24px 48px rgba(32, 46, 33, 0.18), 0 8px 24px rgba(47, 90, 63, 0.16);
}
.pricing-card-featured {
border-color: var(--color-primary);
position: relative;
transform: scale(1.02);
box-shadow: 0 32px 72px rgba(47, 90, 63, 0.2);
background: rgba(247, 244, 237, 0.95);
/* Featured card uses simple fade-up with pulse */
animation: unfold 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, featuredPulse 3s ease-in-out infinite;
animation-delay: 0.1s, 1.2s;
}
@keyframes featuredPulse {
0%, 100% {
box-shadow:
0 32px 72px rgba(47, 90, 63, 0.2),
0 0 0 1px var(--color-primary),
0 0 24px rgba(47, 90, 63, 0.3),
0 0 40px rgba(47, 90, 63, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
50% {
box-shadow:
0 36px 80px rgba(47, 90, 63, 0.28),
0 0 0 2px var(--color-primary-bright),
0 0 32px rgba(47, 90, 63, 0.45),
0 0 56px rgba(47, 90, 63, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
}
.pricing-card-featured:hover {
border-color: var(--color-primary-bright);
box-shadow: 0 40px 80px rgba(47, 90, 63, 0.28), 0 12px 32px rgba(47, 90, 63, 0.2);
transform: scale(1.04) translateY(-6px);
animation: none; /* Stop pulse on hover */
}
.pricing-header {
grid-area: header;
text-align: center;
margin-bottom: var(--space-4);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.85) 0%,
rgba(251, 249, 243, 0.75) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(32, 46, 33, 0.12);
border-radius: 28px 32px 0 0; /* Match card asymmetry, flat bottom */
padding: var(--space-5);
margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2) calc(-1 * var(--space-6));
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
/* Featured card header enhancement */
.pricing-card-featured .pricing-header {
background: linear-gradient(
180deg,
rgba(47, 90, 63, 0.08) 0%,
rgba(251, 249, 243, 0.85) 50%,
rgba(255, 255, 255, 0.9) 100%
);
border: 1px solid rgba(47, 90, 63, 0.15);
}
.pricing-header h3 {
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: var(--space-2);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.pricing-price {
font-size: clamp(2rem, 4vw, var(--font-size-h3-5)); /* Fluid scaling */
font-weight: var(--font-weight-medium);
font-family: var(--font-display);
letter-spacing: 0.02em;
line-height: var(--line-height-tight);
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-bright) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.pricing-price small {
font-size: var(--font-size-sm);
background: none;
-webkit-text-fill-color: var(--accent-green);
color: var(--accent-green);
font-weight: var(--font-weight-medium);
letter-spacing: 0.5px;
margin-top: 6px;
display: block;
line-height: 1.2;
text-shadow: none;
opacity: 0.9;
}
/* Removed redundant .pricing-card-featured .pricing-price override - now uses base 36px size */
/* REMOVED: Conflicting :first-child/:last-child selectors that interfered with .pricing-card-featured */
/* This eliminates specificity conflicts and simplifies the featured card logic */
.pricing-description {
grid-area: description;
font-size: var(--font-size-body); /* Increased from 14px to 16px for better hierarchy vs list items */
color: var(--text-primary); /* Darker color for emphasis as main description */
margin-bottom: var(--space-4);
line-height: var(--line-height-relaxed);
}
.pricing-features {
grid-area: features;
list-style: none;
margin-bottom: var(--space-6);
}
.pricing-features li {
padding: var(--space-2) 0;
font-size: var(--font-size-sm);
color: var(--text-primary);
line-height: var(--line-height-normal);
border-bottom: 1px solid transparent;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: flex-start;
gap: var(--space-2);
position: relative;
z-index: 2;
}
.pricing-features li:not(:last-child) {
border-bottom-color: rgba(32, 46, 33, 0.12);
}
.pricing-card:hover .pricing-features li {
padding-left: 4px; /* Subtle indent on card hover */
}
.pricing-card:hover .pricing-features li:not(:last-child) {
border-bottom-color: rgba(47, 90, 63, 0.18);
}
/* Pricing feature icon styling */
.pricing-features li .pf-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(47, 90, 63, 0.08);
color: var(--accent-green);
font-size: 12px;
font-weight: var(--font-weight-bold);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .pricing-features li .pf-icon {
background: rgba(47, 90, 63, 0.15);
transform: scale(1.1);
}
.pricing-cta {
grid-area: cta;
text-align: center;
align-self: end;
}
.pricing-button,
.pricing-button-link,
.pricing-included {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.02) 0%,
transparent 50%,
rgba(47, 90, 63, 0.03) 100%
);
border: 1px solid var(--color-primary);
color: var(--color-primary);
padding: 0.85rem 2.4rem;
font-family: var(--font-sans);
font-size: var(--font-size-ui-toggle);
font-weight: var(--font-weight-medium);
letter-spacing: -0.005em;
line-height: 1.2; /* Explicit line-height prevents text overflow */
cursor: pointer;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 12px 12px 11px 12px; /* Asymmetric organic */
min-height: 44px; /* TIER 2: Secondary CTA height */
min-width: 160px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
box-shadow: var(--shadow-paper-rest);
}
.pricing-button[disabled],
.pricing-button[aria-disabled="true"],
.pricing-button.disabled {
cursor: not-allowed;
opacity: 0.5;
filter: grayscale(0.3); /* Makes disabled state more visually obvious */
box-shadow: var(--shadow-paper-rest);
transform: none;
}
.pricing-button[disabled]:hover,
.pricing-button[aria-disabled="true"]:hover,
.pricing-button.disabled:hover {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.02) 0%,
transparent 50%,
rgba(47, 90, 63, 0.03) 100%
);
color: var(--color-primary);
transform: none;
}
.pricing-button:hover,
.pricing-button-link:hover {
background: linear-gradient(
180deg,
#3a6449 0%,
var(--color-primary) 50%,
#2a5036 100%
);
color: var(--bg-primary);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.25),
inset 0 0 0 1px rgba(47, 90, 63, 0.3),
0 0 16px rgba(47, 90, 63, 0.12);
}
.pricing-button:active,
.pricing-button-link:active {
transform: translateY(0);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-paper-press);
}
.pricing-button.loading {
pointer-events: none;
opacity: 0.8;
position: relative;
}
.pricing-button.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: buttonSpinner 0.8s linear infinite;
}
@keyframes buttonSpinner {
to {
transform: rotate(360deg);
}
}
.pricing-button-outline {
border-color: var(--text-secondary);
color: var(--text-secondary);
}
.pricing-button-outline:hover {
background-color: var(--text-secondary);
color: var(--bg-primary);
border-color: var(--text-secondary);
box-shadow: 0 4px 16px rgba(176, 176, 176, 0.2);
}
/* .pricing-included now shares styles with .pricing-button above */
.pricing-included:hover {
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.1) 0%,
rgba(47, 90, 63, 0.08) 50%,
rgba(47, 90, 63, 0.12) 100%
);
color: var(--color-primary);
border-color: rgba(47, 90, 63, 0.5);
transform: translateY(-1px);
box-shadow:
var(--shadow-paper-lift),
0 0 0 1px rgba(47, 90, 63, 0.2),
0 0 20px rgba(47, 90, 63, 0.08);
}
.pricing-footer {
text-align: center;
margin-top: var(--space-6);
}
.pricing-link {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: 12px 24px;
min-height: 44px; /* WCAG touch target */
/* Typography */
font-family: var(--font-sans);
font-size: var(--font-size-ui-button); /* 15px - matches nav and buttons */
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-relaxed);
color: var(--text-secondary);
text-decoration: none;
line-height: 1.2;
/* Visual Treatment - Subtle glass panel */
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.015) 0%,
transparent 50%,
rgba(47, 90, 63, 0.02) 100%
);
border: 1px solid rgba(32, 46, 33, 0.15);
border-radius: 10px 11px 10px 11px; /* Organic asymmetry, smaller than buttons */
box-shadow:
0 1px 2px rgba(32, 46, 33, 0.05),
0 0 0 0 rgba(255, 255, 255, 0.3) inset;
/* Interaction */
position: relative;
cursor: pointer;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Icon styling */
.pricing-link-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover state - refined botanical treatment */
.pricing-link:hover {
color: var(--color-primary);
background: linear-gradient(
135deg,
rgba(47, 90, 63, 0.06) 0%,
rgba(47, 90, 63, 0.04) 50%,
rgba(47, 90, 63, 0.08) 100%
);
border-color: rgba(47, 90, 63, 0.25);
box-shadow:
0 2px 8px rgba(32, 46, 33, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.4) inset,
0 0 12px rgba(47, 90, 63, 0.06); /* Subtle glow */
transform: translateY(-1px);
}
.pricing-link:hover .pricing-link-icon {
transform: translateX(2px); /* Arrow slides right */
}
/* Active state - paper press */
.pricing-link:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(32, 46, 33, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
/* Focus state - mycelium network rings (keyboard navigation) */
.pricing-link:focus-visible {
outline: none;
box-shadow:
/* Core shadow */
0 2px 8px rgba(32, 46, 33, 0.08),
/* Inner ring (direct connection) */
0 0 0 2px var(--bg-primary),
/* Primary focus ring */
0 0 0 5px rgba(47, 90, 63, 0.5),
/* Outer diffusion ring */
0 0 0 8px rgba(47, 90, 63, 0.2),
/* Furthest glow */
0 0 24px rgba(47, 90, 63, 0.15);
transform: translateY(-1px);
}
/* Pricing Responsive Enhancements */
@media (max-width: 768px) {
.pricing-grid {
grid-template-columns: 1fr;
gap: var(--space-8); /* More generous on mobile */
}
/* Featured card stays prominent on mobile */
.pricing-card-featured {
order: -1; /* Always first */
transform: scale(1); /* Remove scale */
border-width: 2px; /* Thicker border instead */
}
/* Pricing link mobile adjustments */
.pricing-link {
padding: 14px 28px; /* Larger touch area on mobile */
font-size: var(--font-size-body); /* 16px for better readability */
}
}
/* Final CTA Section */
#final-cta {
padding: var(--space-6) 0;
border-top: 1px solid var(--border);
border-bottom: none;
background: linear-gradient(180deg,
rgba(47, 90, 63, 0.0005) 0%,
rgba(47, 90, 63, 0.002) 50%,
rgba(47, 90, 63, 0.004) 100%
);
position: relative;
}
#final-cta .container {
border: 1px solid rgba(32, 46, 33, 0.12);
border-radius: 24px;
padding: var(--space-12) var(--space-8);
background: rgba(251, 249, 243, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: relative;
max-width: 900px;
margin: 0 auto;
box-shadow:
0 32px 64px rgba(32, 46, 33, 0.08),
0 12px 24px rgba(32, 46, 33, 0.06),
0 4px 8px rgba(32, 46, 33, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
isolation: isolate;
/* Entrance animation initial state */
opacity: 0;
transform: translateY(30px);
/* Combined transitions for both entrance and hover */
transition:
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
background 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#final-cta .container.is-visible {
opacity: 1;
transform: translateY(0);
}
#final-cta .container:hover {
border-color: rgba(47, 90, 63, 0.35);
background: rgba(251, 249, 243, 0.95);
transform: translateY(-4px);
box-shadow:
0 48px 100px rgba(32, 46, 33, 0.16),
0 20px 40px rgba(32, 46, 33, 0.12),
0 8px 16px rgba(32, 46, 33, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(47, 90, 63, 0.08);
}
#final-cta .container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 24px;
background: radial-gradient(
circle at 50% 0%,
rgba(47, 90, 63, 0.04) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
}
#final-cta h2 {
text-align: center;
margin-bottom: var(--space-4);
font-size: clamp(2.25rem, 3.4vw, var(--font-size-h2));
color: var(--text-primary);
position: relative;
z-index: 1;
}
.final-cta-subtitle {
margin-bottom: var(--space-8);
font-size: var(--font-size-body-large);
color: var(--text-secondary);
max-width: 720px;
margin-left: auto;
margin-right: auto;
line-height: var(--line-height-relaxed);
letter-spacing: 0;
text-align: center;
position: relative;
z-index: 1;
}
#final-cta .cta-buttons-horizontal {
margin-top: var(--space-1);
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
#final-cta .container {
opacity: 1;
transform: none;
transition:
box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
background 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#final-cta .container:hover {
transform: none;
}
}
/* Enhanced Responsive Design */
/* Tablet Landscape (lg) - 1024px and below */
@media (max-width: 1024px) {
.container {
padding: 0 var(--space-3);
}
#hero {
padding-top: var(--space-16);
}
h1 {
font-size: var(--font-size-xl);
}
h2 {
font-size: clamp(2rem, 5vw, 2.5rem); /* 32-40px fluid scaling for better hierarchy */
}
}
/* Tablet Portrait (md) - 768px and below */
@media (max-width: 768px) {
:root {
/* Reduce large spacing on mobile */
--space-12: 80px;
--space-16: 120px;
--space-20: 140px;
}
.container {
padding: 0 var(--space-2);
}
/* Footer mobile optimization */
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.footer-links a {
margin: 0;
padding: 12px 8px;
min-height: 44px;
display: inline-block;
}
.tagline {
font-size: var(--font-size-xs);
margin-top: var(--space-3);
line-height: var(--line-height-relaxed);
}
section {
padding: var(--space-8) 0;
}
#hero {
padding-top: var(--space-16);
padding-bottom: var(--space-8);
}
h1 {
font-size: var(--font-size-lg);
line-height: var(--line-height-tight);
}
h2 {
font-size: clamp(1.75rem, 7vw, 2.25rem); /* 28-36px fluid - stronger visual hierarchy */
margin-bottom: var(--space-6);
}
#hero .hero-content > * + * {
margin-top: var(--space-6);
}
#hero .subline-comment {
margin-top: calc(var(--space-6) / 2);
}
.hero-badge {
letter-spacing: 0.08em;
font-size: var(--font-size-xs); /* 12px - was 10.4px for better legibility */
padding: 0.35rem 0.8rem;
}
.hero-card {
padding: var(--space-6) var(--space-4);
border-radius: 28px;
}
.hero-demo-card {
padding: var(--space-4);
margin-top: var(--space-8);
}
#hero .subtitle {
font-size: var(--font-size-sm); /* 14px - was 12px for better readability */
line-height: 1.5;
max-width: 90%;
margin: calc(var(--space-6) / 2) auto 0;
}
.comparison-grid,
.timeline-comparison {
grid-template-columns: 1fr;
gap: var(--space-5);
margin-top: var(--space-6);
}
/* Glass box - Prominent on mobile */
.comparison-column:nth-child(1) {
padding: var(--space-5);
transform: translateY(0) !important;
order: 1;
}
.comparison-column:nth-child(1).in-view {
transform: translateY(0) !important;
}
.comparison-column:nth-child(1) h3 {
font-size: var(--font-size-h4); /* 24px - already correct */
}
.comparison-column:nth-child(1) li {
font-size: var(--font-size-body); /* 16px */
}
.comparison-column:nth-child(1) li strong {
font-size: var(--font-size-body-large); /* 18px - already correct */
}
/* Black box - De-emphasized on mobile */
.comparison-column:nth-child(2) {
padding: var(--space-4);
transform: scale(0.95) !important;
opacity: 0.9;
order: 2;
}
.comparison-column:nth-child(2).in-view {
transform: scale(0.95) !important;
opacity: 0.9;
}
.comparison-column:nth-child(2) h3 {
font-size: var(--font-size-ui-icon); /* 20px - already correct */
}
.comparison-column:nth-child(2) li {
font-size: var(--font-size-sm); /* 14px */
}
.comparison-column:nth-child(2) li strong {
font-size: var(--font-size-body); /* 16px - already correct */
}
/* Adjust badges for mobile */
.recommended-badge,
.legacy-badge {
top: -10px;
right: 16px;
padding: 4px 12px;
font-size: 10px;
}
.recommended-badge .badge-icon {
width: 12px;
height: 12px;
}
.principles-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.features-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* Feature titles with fluid scaling for better adaptation */
.feature-title {
font-size: clamp(1.25rem, 4vw, 1.5rem); /* 20-24px fluid scaling */
}
/* Mobile: Maintain comfortable touch targets with slightly larger padding */
#main-header .container {
flex-direction: row;
justify-content: space-between;
padding-top: 14px;
padding-bottom: 14px;
}
/* Mobile scrolled: Still compact but maintains 44px minimum touch target */
#main-header.scrolled .container {
padding-top: 12px;
padding-bottom: 12px;
}
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Recommendation 5: Enhanced mobile menu animation with scale and stagger */
#main-header nav {
position: absolute;
top: 100%;
right: var(--space-2);
left: var(--space-2);
flex-direction: column;
gap: var(--space-2);
background: rgba(245, 243, 239, 0.96);
padding: var(--space-3);
border-radius: 16px;
box-shadow: 0 22px 48px rgba(32, 46, 33, 0.16);
border: 1px solid rgba(32, 46, 33, 0.16);
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-12px) scale(0.96); /* Add scale */
transition:
max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), /* Slight bounce */
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#main-header nav.is-open {
max-height: 320px;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#main-header nav a {
font-size: var(--font-size-sm); /* 14px - was 12.8px for better readability */
padding: 14px 16px;
min-height: 44px;
text-align: center;
display: inline-block;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.3s ease;
}
/* Stagger animation for nav items */
#main-header nav.is-open a {
opacity: 1;
transform: translateY(0);
}
#main-header nav.is-open a:nth-child(1) { transition-delay: 0.05s; }
#main-header nav.is-open a:nth-child(2) { transition-delay: 0.08s; }
#main-header nav.is-open a:nth-child(3) { transition-delay: 0.11s; }
#main-header nav.is-open a:nth-child(4) { transition-delay: 0.14s; }
#main-header nav.is-open a:nth-child(5) { transition-delay: 0.17s; }
/* Mobile nav: underline appears centered below text */
#main-header nav a::after {
left: 50%;
transform: translateX(-50%);
}
#main-header nav a:hover::after {
left: 0;
transform: translateX(0);
}
/* Mobile: Inner focus ring due to centered layout */
#main-header nav a:focus-visible {
outline-offset: -2px;
background: rgba(47, 90, 63, 0.08);
}
/* Mobile: Enhanced active state visibility */
#main-header nav a.is-active {
background: rgba(47, 90, 63, 0.12);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
#main-header nav a.is-active::after {
width: 60%;
opacity: 1;
}
/* Mobile: Full-width button treatment for sign in */
.signin-nav-link {
padding: 14px 24px !important;
text-align: center;
background: var(--color-primary);
color: #ffffff !important;
border: none;
border-radius: 10px 11px 10px 10px; /* Maintain asymmetric organic on mobile */
margin-top: 8px; /* Separate from nav links */
}
.signin-nav-link:hover {
background: var(--color-primary-bright);
}
}
/* Small Mobile */
/* Mobile (sm) - 640px and below */
@media (max-width: 640px) {
.container {
padding: 0 var(--space-2);
}
/* Enhanced small mobile typography for optimal readability */
h1 {
font-size: clamp(1.25rem, 6vw, 1.5rem); /* 20-24px fluid */
}
h2 {
font-size: clamp(1.125rem, 5vw, 1.25rem); /* 18-20px fluid */
}
#hero .subtitle {
font-size: var(--font-size-sm); /* 14px - ensure readability */
line-height: 1.5;
}
.hero-button {
font-size: var(--font-size-sm); /* 14px for comfortable tap targets */
padding: 0.8rem 2rem;
}
/* Stack buttons vertically on small mobile */
.hero-buttons,
.cta-buttons-horizontal {
flex-direction: column;
width: 100%;
}
.hero-buttons .hero-button,
.cta-buttons-horizontal .hero-button {
width: 100%;
}
.principle {
padding: var(--space-2);
}
.principle-icon {
width: var(--space-6);
height: var(--space-6);
margin-bottom: var(--space-2);
}
}
/* Anchor offset for sticky header - adjusted for new adaptive height */
html {
scroll-padding-top: 60px; /* ~56px header + small buffer */
}
/* Tablet Portrait (md) - 768px and below */
@media (max-width: 768px) {
html { scroll-padding-top: 60px; } /* ~56px header on mobile */
/* Pricing Section Responsive */
.pricing-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
width: 100%;
}
.why-this-works {
margin: var(--space-6) 0;
}
.why-grid {
gap: var(--space-3);
}
.why-card {
padding: var(--space-3);
}
.pricing-card {
padding: var(--space-4);
}
#pricing {
padding: var(--space-8) 0;
}
#final-cta {
padding: var(--space-8) 0;
border-top: none;
border-bottom: none;
}
#final-cta .container {
padding: var(--space-8) var(--space-4);
border-radius: 20px;
max-width: 100%;
margin: 0 var(--space-2);
}
#final-cta h2 {
margin-bottom: var(--space-3);
font-size: clamp(1.75rem, 6vw, 2.25rem);
}
.final-cta-subtitle {
margin-bottom: var(--space-6);
font-size: var(--font-size-body);
}
#final-cta .cta-buttons-horizontal {
flex-direction: column;
gap: var(--space-2);
}
/* Pricing section typography improvements for mobile hierarchy */
.pricing-header h3 {
font-size: 1.375rem; /* 22px - increased from 18px for better prominence */
}
.pricing-price {
font-size: var(--font-size-h3-5); /* 36px - consistent sizing for both tiers */
line-height: 1.2;
}
/* Removed redundant .pricing-card-featured override - both cards now use 36px */
.pricing-description {
font-size: var(--font-size-body); /* 16px - restored from 14px for web standard readability */
line-height: 1.6;
}
.pricing-features li {
font-size: var(--font-size-ui-small); /* 14px - increased from 12px for readability */
line-height: 1.55;
}
.final-cta-subtitle {
margin-bottom: var(--space-6);
}
.platform-badges {
flex-wrap: wrap;
justify-content: center;
}
.platform-badge {
font-size: var(--font-size-xs);
padding: 6px var(--space-1);
}
}
/* Payment Notifications */
.payment-notification {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
max-width: 400px;
min-width: 300px;
transform: translateX(100%);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.payment-notification.show {
transform: translateX(0);
}
.notification-content {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
border-radius: 8px;
border: 1px solid;
background: var(--surface);
box-shadow: 0 8px 32px rgba(32, 46, 33, 0.18);
backdrop-filter: blur(16px);
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
}
.payment-notification.success .notification-content {
border-color: var(--color-success);
background: linear-gradient(135deg,
rgba(47, 90, 63, 0.1) 0%,
var(--surface) 100%);
}
.payment-notification.error .notification-content {
border-color: var(--color-error);
background: linear-gradient(135deg,
rgba(255, 51, 51, 0.1) 0%,
var(--surface) 100%);
}
.notification-icon {
font-size: var(--font-size-body-large);
flex-shrink: 0;
}
.notification-message {
flex: 1;
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
.notification-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: var(--font-size-ui-icon);
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
/* Mobile responsive notifications */
@media (max-width: 768px) {
.payment-notification {
left: 20px;
right: 20px;
max-width: none;
min-width: auto;
transform: translateY(-100%);
}
.payment-notification.show {
transform: translateY(0);
}
}
/* Payment Modal */
.payment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.payment-modal.show {
opacity: 1;
visibility: visible;
}
.modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
}
.modal-content {
position: relative;
background: var(--surface);
border: 1px solid var(--color-primary);
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(47, 90, 63, 0.2),
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(47, 90, 63, 0.1);
transform: scale(0.9) translateY(20px);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.payment-modal.show .modal-content {
transform: scale(1) translateY(0);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
border-bottom: 1px solid rgba(47, 90, 63, 0.2);
background: linear-gradient(135deg,
rgba(47, 90, 63, 0.05) 0%,
transparent 100%);
}
.modal-header h3 {
margin: 0;
color: var(--text-primary);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: var(--font-size-h4);
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
.modal-body {
padding: var(--space-4);
overflow-y: auto;
max-height: calc(90vh - 80px);
}
/* Checkout Loading State */
.checkout-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
text-align: center;
}
.checkout-loading.hidden {
display: none;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(47, 90, 63, 0.2);
border-top: 3px solid var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: var(--space-3);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.checkout-loading p {
color: var(--text-secondary);
font-size: var(--font-size-xs);
margin: 0;
}
/* Checkout Container */
#checkout-container {
min-height: 400px;
}
/* Ensure Stripe iframe inherits dark styling where possible */
#checkout-container iframe {
border-radius: 8px;
background: var(--surface-light);
}
/* Mobile responsive modal */
@media (max-width: 768px) {
.modal-content {
width: 95%;
max-width: none;
margin: var(--space-2);
max-height: 95vh;
}
.modal-header {
padding: var(--space-3);
}
.modal-body {
padding: var(--space-3);
max-height: calc(95vh - 70px);
}
.checkout-loading {
padding: var(--space-6) var(--space-3);
}
}
/* ============================================
ADDITIONAL BADGE VARIANTS - Organic Academia
Added: TASK D6 Badges & Labels Redesign
============================================ */
/* SUCCESS BADGE - Green/positive indicators */
.badge-success {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-caption); /* 12px */
font-weight: var(--font-weight-semibold); /* 600 */
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(107, 143, 113, 0.12);
color: #3d4f42;
border: 1px solid rgba(107, 143, 113, 0.2);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-success:hover {
background: rgba(107, 143, 113, 0.18);
border-color: rgba(107, 143, 113, 0.3);
transform: translateY(-1px);
}
/* INFO BADGE - Amber/informational indicators */
.badge-info {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-caption); /* 12px */
font-weight: var(--font-weight-semibold); /* 600 */
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(212, 163, 115, 0.12);
color: #8b6f47;
border: 1px solid rgba(212, 163, 115, 0.2);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-info:hover {
background: rgba(212, 163, 115, 0.18);
border-color: rgba(212, 163, 115, 0.3);
transform: translateY(-1px);
}
/* WARNING BADGE - Orange/caution indicators */
.badge-warning {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-caption); /* 12px */
font-weight: var(--font-weight-semibold); /* 600 */
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(160, 88, 16, 0.12);
color: #8b6f47;
border: 1px solid rgba(160, 88, 16, 0.2);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-warning:hover {
background: rgba(160, 88, 16, 0.18);
border-color: rgba(160, 88, 16, 0.3);
transform: translateY(-1px);
}
/* ERROR BADGE - Red/error indicators */
.badge-error {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-caption); /* 12px */
font-weight: var(--font-weight-semibold); /* 600 */
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(192, 64, 64, 0.12);
color: #8b4747;
border: 1px solid rgba(192, 64, 64, 0.2);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-error:hover {
background: rgba(192, 64, 64, 0.18);
border-color: rgba(192, 64, 64, 0.3);
transform: translateY(-1px);
}
/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.comparison-column,
.comparison-column:nth-child(1),
.comparison-column:nth-child(2),
.comparison-column:nth-child(1) li,
.comparison-column:nth-child(2) li {
animation: none !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
opacity: 1 !important;
transform: none !important;
}
.comparison-column:nth-child(1).in-view {
transform: none !important;
}
.comparison-column:nth-child(2).in-view {
transform: none !important;
}
}
/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
.comparison-column:nth-child(1) {
border: 3px solid var(--accent-green);
}
.comparison-column:nth-child(2) {
border: 3px solid #7a3d0a;
}
.recommended-badge {
border: 2px solid white;
}
.legacy-badge {
border: 2px solid #7a3d0a;
}
}
/* Touch Device Optimizations */
@media (max-width: 768px) and (hover: none) {
.comparison-column:hover,
.comparison-column:nth-child(1):hover,
.comparison-column:nth-child(2):hover {
transform: none !important;
box-shadow: none !important;
}
}
/* Small Mobile - Further Adjustments */
@media (max-width: 480px) {
.comparison-column:nth-child(1) {
padding: var(--space-4);
}
.comparison-column:nth-child(2) {
padding: var(--space-3);
}
.comparison-grid {
gap: var(--space-4);
}
}
/* Philosophy Section Mobile Responsiveness */
@media (max-width: 768px) {
#philosophy h2 {
font-size: clamp(2rem, 5vw, 2.5rem);
}
.timeline-comparison {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.comparison-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
/* Stack recommended first, then legacy */
.comparison-column:nth-child(2) {
order: 2;
}
.bullet-icon {
width: 18px;
height: 18px;
}
.icon-check-circle,
.icon-warning-circle {
width: 40px;
height: 40px;
}
}
/* ===================================================================
BENTO GRID - PRODUCTION-READY STYLES
Add this to the END of /Users/my/Documents/ASTLandingPage/assets/styles.css
================================================================ */
/* ===================================================================
DESIGN TOKENS - Bento Grid Specific
================================================================ */
:root {
/* Transition Durations - Organic Rhythm */
--bento-duration-shrink: 250ms;
--bento-duration-expand: 450ms;
--bento-duration-content-out: 150ms;
--bento-duration-content-in: 300ms;
--bento-delay-expand: 150ms;
--bento-delay-content: 250ms;
/* Easing Curves - Natural Movement */
--bento-ease-shrink: cubic-bezier(0.23, 1, 0.32, 1);
--bento-ease-expand: cubic-bezier(0.34, 1.26, 0.64, 1);
--bento-ease-fade-out: cubic-bezier(0.4, 0, 1, 1);
--bento-ease-fade-in: cubic-bezier(0, 0, 0.2, 1);
--bento-ease-hover: cubic-bezier(0.34, 1.26, 0.64, 1);
/* Box Dimensions - Desktop */
--bento-box-resting-height: 480px;
--bento-box-expanded-height: 560px;
--bento-box-thumbnail-height: 300px;
/* Box Dimensions - Mobile */
--bento-mobile-expanded-height: 520px;
--bento-mobile-collapsed-height: 80px;
/* Spacing */
--bento-gap: 24px;
/* Shadows (using design system) */
--bento-shadow-rest: var(--shadow-paper-rest);
--bento-shadow-hover: var(--shadow-paper-lift);
--bento-shadow-expanded:
0 8px 24px rgba(26, 36, 32, 0.12),
0 16px 48px rgba(26, 36, 32, 0.16);
/* Z-index layers */
--bento-z-base: 1;
--bento-z-expanded: 10;
}
/* ===================================================================
SECTION LAYOUT
================================================================ */
.bento-grid-section {
padding: var(--space-12) 0;
position: relative;
z-index: 1;
}
.bento-grid-section h2 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 3.4vw, 3rem);
font-weight: var(--font-weight-light);
text-align: center;
margin-bottom: var(--space-6);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--text-primary);
}
/* Bento boxes entrance animation - removed, handled by existing JS */
/* ===================================================================
GRID CONTAINER
================================================================ */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bento-gap);
max-width: var(--container-xl);
margin: 0 auto;
position: relative;
/* Removed padding - inherits from parent .container */
}
/* Grid state modifications for expansion */
.bento-grid[data-expanded="1"] {
grid-template-columns: 1fr 200px 200px;
}
.bento-grid[data-expanded="2"] {
grid-template-columns: 200px 1fr 200px;
}
.bento-grid[data-expanded="3"] {
grid-template-columns: 200px 200px 1fr;
}
/* ===================================================================
BENTO BOX - BASE STYLES
================================================================ */
.bento-box {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
/* Performance optimizations - will-change only during transitions */
contain: layout style paint;
transform: translateZ(0);
backface-visibility: hidden;
/* Dimensions */
height: var(--bento-box-resting-height);
/* Default transition */
transition:
height var(--bento-duration-shrink) var(--bento-ease-shrink),
box-shadow var(--bento-duration-shrink) var(--bento-ease-shrink),
opacity var(--bento-duration-shrink) var(--bento-ease-shrink),
transform var(--bento-duration-shrink) var(--bento-ease-shrink);
}
/* Magnetic Tilt Effect - Simplified 3D perspective hover */
.bento-box {
--mouse-x: 0.5;
--mouse-y: 0.5;
}
/* Hover anticipation - Simplified tilt micro-interaction */
.bento-box:not(.active):not(.thumbnail):hover {
box-shadow: var(--bento-shadow-hover);
transform: translateY(-3px) scale(1.01);
will-change: transform, box-shadow;
transition:
transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-box:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
box-shadow:
var(--bento-shadow-hover),
0 0 0 4px var(--color-primary-glow);
}
/* Thumbnail state - Fast shrink */
.bento-box.thumbnail {
height: var(--bento-box-thumbnail-height);
opacity: 0.9;
transform: scale(0.98) translateZ(0);
cursor: pointer;
transition:
height var(--bento-duration-shrink) var(--bento-ease-shrink),
opacity var(--bento-duration-shrink) var(--bento-ease-shrink),
transform var(--bento-duration-shrink) var(--bento-ease-shrink),
box-shadow var(--bento-duration-shrink) var(--bento-ease-shrink);
transition-delay: 0ms;
}
/* Active state - Delayed expand with subtle spring */
.bento-box.active {
height: var(--bento-box-expanded-height);
box-shadow: var(--bento-shadow-expanded);
z-index: var(--bento-z-expanded);
cursor: default;
transform: scale(1.0) translateZ(0);
opacity: 1;
will-change: transform, height;
transition:
height var(--bento-duration-expand) var(--bento-ease-expand),
box-shadow var(--bento-duration-expand) var(--bento-ease-expand),
transform var(--bento-duration-expand) var(--bento-ease-expand),
opacity var(--bento-duration-expand) var(--bento-ease-expand);
transition-delay: var(--bento-delay-expand);
}
/* Remove will-change after transition completes */
.bento-box:not(:hover):not(.active) {
will-change: auto;
}
/* ===================================================================
CONTENT STATES
================================================================ */
.bento-content-resting,
.bento-content-expanded,
.bento-content-thumbnail {
padding: var(--space-4);
transition: opacity var(--bento-duration-content-out) var(--bento-ease-fade-out);
}
/* Hide inactive content */
.bento-content-resting[hidden],
.bento-content-expanded[hidden],
.bento-content-thumbnail[hidden] {
display: none;
opacity: 0;
}
/* Expanded content uses more padding */
.bento-content-expanded {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
}
/* Expanded content fade in - gentle entrance with delay */
.bento-content-expanded:not([hidden]) {
transition: opacity var(--bento-duration-content-in) var(--bento-ease-fade-in);
transition-delay: var(--bento-delay-content);
}
/* ===================================================================
RESTING STATE CONTENT
================================================================ */
.bento-content-resting {
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
}
.bento-number {
font-family: var(--font-display);
font-size: var(--font-size-body-large);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
letter-spacing: var(--letter-spacing-wider);
}
.bento-title {
font-family: var(--font-display);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--text-primary);
letter-spacing: var(--letter-spacing-tight);
margin: 0;
}
.bento-subtitle {
font-size: var(--font-size-body);
line-height: var(--line-height-normal);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
}
/* ===================================================================
VIDEO PLACEHOLDERS (Ready for easy swap to real videos)
================================================================ */
.bento-video-placeholder {
width: 100%;
max-height: 180px;
border-radius: var(--radius-md);
background: linear-gradient(135deg,
rgba(47, 90, 63, 0.04) 0%,
rgba(47, 90, 63, 0.08) 50%,
rgba(47, 90, 63, 0.04) 100%);
margin: var(--space-2) 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4);
border: 1px solid var(--border);
}
.bento-video-placeholder-large {
max-height: 280px;
flex-shrink: 0;
}
.bento-placeholder-icon {
width: 48px;
height: 48px;
color: var(--color-primary);
opacity: 0.6;
}
.bento-placeholder-text {
font-size: var(--font-size-ui-small);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
/* Real video styles (when placeholders are replaced) */
.bento-video,
.bento-video-hd {
width: 100%;
height: auto;
border-radius: var(--radius-md);
background: rgba(47, 90, 63, 0.04);
margin: var(--space-2) 0;
display: block;
}
.bento-video {
max-height: 180px;
object-fit: cover;
}
.bento-video-hd {
max-height: 280px;
object-fit: contain;
flex-shrink: 0;
}
/* ===================================================================
EXPANDED STATE CONTENT
================================================================ */
.bento-title-large {
font-family: var(--font-display);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--text-primary);
letter-spacing: var(--letter-spacing-tight);
margin: 0;
}
.bento-description-full {
font-size: var(--font-size-body-large);
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
}
/* Staggered content reveal - Cascade effect */
.bento-box.active .bento-title-large {
animation: fadeInUp 300ms var(--bento-ease-fade-in) 300ms both;
}
.bento-box.active .bento-description-full {
animation: fadeInUp 300ms var(--bento-ease-fade-in) 400ms both;
}
.bento-box.active .bento-video-hd,
.bento-box.active .bento-video-placeholder-large {
animation: fadeInUp 300ms var(--bento-ease-fade-in) 500ms both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================================================
THUMBNAIL STATE CONTENT
================================================================ */
.bento-content-thumbnail {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
height: 100%;
}
.bento-number-small {
font-family: var(--font-display);
font-size: var(--font-size-ui-small);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
letter-spacing: var(--letter-spacing-wider);
flex-shrink: 0;
opacity: 0.9;
}
.bento-text-stack {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.bento-title-small {
font-family: var(--font-display);
font-size: var(--font-size-body-large);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--text-primary);
letter-spacing: var(--letter-spacing-tight);
margin: 0;
}
.bento-subtitle-small {
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: var(--line-height-normal);
color: var(--text-secondary);
opacity: 0.85;
margin: 0;
font-weight: var(--font-weight-normal);
/* Graceful text overflow handling */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===================================================================
ACCESSIBILITY
================================================================ */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.bento-box,
.bento-content-resting,
.bento-content-expanded,
.bento-content-thumbnail {
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
animation: none !important;
}
.bento-box {
transform: none !important;
}
.bento-video,
.bento-video-hd,
.bento-video-placeholder,
.bento-title-large,
.bento-description-full {
animation: none !important;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.bento-box {
border-width: 2px;
}
.bento-box:focus-visible {
outline-width: 4px;
outline-offset: 6px;
}
}
/* ===================================================================
MOBILE LAYOUT - VERTICAL ACCORDION
================================================================ */
@media (max-width: 640px) {
.bento-grid {
grid-template-columns: 1fr !important;
gap: var(--space-2);
padding: 0 var(--space-2);
}
.bento-box {
height: var(--bento-mobile-collapsed-height);
}
.bento-box.active {
height: var(--bento-mobile-expanded-height);
}
.bento-box.thumbnail {
height: var(--bento-mobile-collapsed-height);
}
/* Mobile content adjustments */
.bento-content-resting,
.bento-content-thumbnail {
padding: var(--space-3);
}
.bento-content-expanded {
padding: var(--space-4);
}
.bento-title {
font-size: 1.25rem;
}
.bento-title-large {
font-size: var(--font-size-h4);
}
.bento-subtitle,
.bento-description-full {
font-size: 0.9375rem;
}
.bento-video-placeholder {
max-height: 120px;
}
.bento-video-placeholder-large {
max-height: 200px;
}
.bento-video {
max-height: 120px;
}
.bento-video-hd {
max-height: 200px;
}
/* Mobile thumbnail layout */
.bento-content-thumbnail {
flex-direction: row;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
}
.bento-text-stack {
gap: 6px;
}
.bento-title-small {
font-size: 0.9375rem;
}
.bento-subtitle-small {
font-size: 0.75rem;
-webkit-line-clamp: 2;
}
}
/* Tablet breakpoint adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
.bento-grid {
max-width: 100%;
padding: 0 var(--space-3);
}
.bento-box {
height: 420px;
}
.bento-box.active {
height: 520px;
}
.bento-box.thumbnail {
height: 280px;
}
.bento-title-small {
font-size: var(--font-size-body);
}
.bento-subtitle-small {
font-size: 0.8125rem;
-webkit-line-clamp: 3;
}
}