/* ============================================================ Optima website — base styles Builds on tokens.css. Page-agnostic primitives + components. ============================================================ */ @import url('./tokens.css'); /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--ink-800); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink-900); letter-spacing: -0.015em; } /* ---------- Language switching ---------- Every translatable element carries lang="fr" or lang="en". is set by inline script in BEFORE paint. The non-active language is hidden via CSS — no FOUC. */ html[lang="fr"] [lang="en"], html[lang="en"] [lang="fr"] { display: none !important; } /* ---------- Layout ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 768px) { .container { padding: 0 var(--space-4); } } .section { padding: var(--space-24) 0; } .section-tight { padding: var(--space-16) 0; } @media (max-width: 768px) { .section { padding: var(--space-16) 0; } .section-tight { padding: var(--space-12) 0; } } /* ---------- Typography helpers ---------- */ .eyebrow { font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-ls); font-weight: 600; text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--space-4); display: inline-block; } .display-xl { font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); font-weight: 600; } .display-lg { font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls); font-weight: 600; } .display-md { font-size: var(--t-display-md-size); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls); font-weight: 600; } .h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: 600; } .h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: 600; } .h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: 600; } .lead { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--ink-600); max-width: 640px; } .body { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--ink-800); } .body p + p { margin-top: var(--space-4); } .muted { color: var(--ink-600); } .subtle { color: var(--ink-500); } .accent { color: var(--brand-600); } .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; } @media (max-width: 768px) { .display-xl { font-size: 2.5rem; } .display-lg { font-size: 2.125rem; } .display-md { font-size: 1.75rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out); white-space: nowrap; } .btn-primary { background: var(--brand-500); color: #fff; border: 1px solid var(--brand-500); } .btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); } .btn-primary:active { background: var(--brand-700); border-color: var(--brand-700); } .btn-ghost { background: transparent; color: var(--ink-800); border: 1px solid var(--ink-200); } .btn-ghost:hover { background: var(--ink-100); border-color: var(--ink-300); } .btn-link { color: var(--brand-600); font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-1); } .btn-link:hover { color: var(--brand-700); } .btn-lg { height: 56px; padding: 0 var(--space-8); font-size: 16px; } .btn-sm { height: 36px; padding: 0 var(--space-4); font-size: 13px; } /* ---------- Cards ---------- */ .card { background: var(--surface-canvas); border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); } .card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--ink-300); } .card-feature { padding: var(--space-8); border-radius: var(--radius-lg); } .card-highlighted { border-color: var(--brand-300); box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-200); position: relative; } .card-dark { background: var(--ink-900); color: var(--ink-100); border-color: var(--ink-800); } .card-dark h3, .card-dark .h3 { color: #fff; } .card-dark .muted { color: var(--ink-300); } /* Badge inside highlighted card */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--brand-500); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-full); } .badge-popular { position: absolute; top: calc(var(--space-4) * -1); left: 50%; transform: translateX(-50%); } /* ---------- Top nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--topnav-h); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--ink-100); } .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .nav-logo { display: inline-flex; align-items: center; height: 28px; } .nav-logo img { height: 24px; width: auto; } .nav-tabs { display: flex; align-items: center; gap: var(--space-1); } .nav-tab { position: relative; padding: var(--space-2) var(--space-3); font-size: 14px; font-weight: 500; color: var(--ink-600); border-radius: var(--radius-sm); transition: color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out); } .nav-tab:hover { color: var(--ink-900); background: var(--ink-100); } .nav-tab.is-active { color: var(--brand-600); background: var(--brand-50); } .nav-right { display: flex; align-items: center; gap: var(--space-3); } .lang-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); font-size: 13px; font-weight: 500; color: var(--ink-600); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); transition: color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out); } .lang-toggle:hover { color: var(--ink-900); border-color: var(--ink-300); } .nav-mobile-toggle { display: none; } .nav-mobile-menu { display: none; } @media (max-width: 900px) { .nav-tabs { display: none; } .nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--ink-700); } .nav-mobile-toggle:hover { background: var(--ink-100); } .nav-mobile-menu { position: absolute; top: var(--topnav-h); left: 0; right: 0; background: var(--surface-canvas); border-bottom: 1px solid var(--ink-200); box-shadow: var(--shadow-md); padding: var(--space-4) var(--space-6); display: none; flex-direction: column; gap: var(--space-1); } .nav-mobile-menu.is-open { display: flex; } .nav-mobile-menu .nav-tab { padding: var(--space-3) var(--space-4); font-size: 15px; } } /* ---------- Hero ---------- */ .hero { position: relative; padding: var(--space-24) 0 var(--space-20); overflow: hidden; isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 0%, var(--brand-50) 0%, transparent 70%); } .hero-content { max-width: 760px; } .hero h1 { margin-bottom: var(--space-6); } .hero .lead { margin-bottom: var(--space-8); font-size: 1.125rem; max-width: 640px; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* 2-column hero variant (text left, visual right) */ .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-16); align-items: center; } .hero-grid .hero-content { max-width: none; } .hero-visual { width: 100%; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } } /* ---------- Trust strip ---------- */ .trust-strip { padding: var(--space-12) 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); } .trust-strip-label { font-size: 13px; color: var(--ink-500); text-align: center; margin-bottom: var(--space-6); } .trust-strip-logos { display: flex; align-items: center; justify-content: center; gap: var(--space-12); flex-wrap: wrap; } .trust-logo { height: 32px; width: auto; opacity: 0.7; filter: grayscale(100%); transition: opacity var(--dur-instant) var(--ease-out), filter var(--dur-instant) var(--ease-out); } .trust-logo:hover { opacity: 1; filter: grayscale(0); } .trust-logo-text { font-size: 17px; font-weight: 600; color: var(--ink-700); letter-spacing: -0.005em; } /* ---------- Grids ---------- */ .grid { display: grid; gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---------- Persona / value-prop / step cards ---------- */ .persona-card .persona-icon, .value-card .value-icon, .step-card .step-num { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .step-card .step-num { font-family: var(--font-mono); font-size: 16px; font-weight: 600; } .persona-card h3, .value-card h3, .step-card h3 { margin-bottom: var(--space-3); } /* ---------- Quote / testimonial ---------- */ .quote { font-size: 1.125rem; line-height: 1.55; color: var(--ink-800); font-weight: 400; margin-bottom: var(--space-4); } .quote-attr { font-size: 13px; color: var(--ink-500); } .quote-card { padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-lg); border: 1px solid var(--ink-100); } /* ---------- Stats strip ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding: var(--space-8) 0; } .stat-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; margin-bottom: var(--space-2); } .stat-label { font-size: 14px; color: var(--ink-600); } @media (max-width: 640px) { .stats { grid-template-columns: 1fr; gap: var(--space-6); } } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { display: flex; flex-direction: column; padding: var(--space-8); } .pricing-card .h3 { margin-bottom: var(--space-2); } .pricing-card-tagline { font-size: 14px; color: var(--ink-600); margin-bottom: var(--space-6); } .pricing-features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); flex: 1; } .pricing-feature { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; line-height: 1.5; color: var(--ink-700); } .pricing-feature::before { content: ''; display: block; width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; } .pricing-price { font-size: 14px; color: var(--ink-600); margin-bottom: var(--space-4); font-style: italic; } /* ---------- FAQ accordion ---------- */ .faq-list { border-top: 1px solid var(--ink-200); } .faq-item { border-bottom: 1px solid var(--ink-200); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; text-align: left; font-size: 16px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; transition: color var(--dur-instant) var(--ease-out); } .faq-question:hover { color: var(--brand-600); } .faq-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-500); transition: transform var(--dur-quick) var(--ease-out); } .faq-item.is-open .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-medium) var(--ease-out); } .faq-item.is-open .faq-answer { max-height: 600px; } .faq-answer-inner { padding: 0 0 var(--space-6); font-size: 15px; line-height: 1.6; color: var(--ink-700); max-width: 760px; } .faq-answer-inner strong { color: var(--ink-900); font-weight: 600; } /* ---------- Vision (with / without) split ---------- */ .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } @media (max-width: 768px) { .split-grid { grid-template-columns: 1fr; } } .split-card { padding: var(--space-8); border-radius: var(--radius-lg); } .split-card-positive { background: var(--brand-50); border: 1px solid var(--brand-200); } .split-card-negative { background: var(--surface-raised); border: 1px solid var(--ink-200); } .split-card h3 { margin-bottom: var(--space-4); } .split-card p + p { margin-top: var(--space-3); } /* ---------- Objection blocks (Section 12) ---------- */ .objection { padding: var(--space-6) 0; border-bottom: 1px solid var(--ink-100); } .objection:last-child { border-bottom: 0; } .objection-q { font-size: 17px; font-weight: 600; color: var(--ink-900); margin-bottom: var(--space-3); letter-spacing: -0.005em; } .objection-a { font-size: 15px; line-height: 1.6; color: var(--ink-700); max-width: 760px; } .objection-a strong { color: var(--ink-900); font-weight: 600; } .objection-lead { font-weight: 500; color: var(--ink-900); margin-bottom: var(--space-2); } /* ---------- Guarantee block ---------- */ .guarantee { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); padding: var(--space-12); background: var(--ink-900); color: #fff; border-radius: var(--radius-lg); align-items: center; } .guarantee-icon { width: 96px; height: 96px; flex-shrink: 0; color: var(--brand-300); } .guarantee h2 { color: #fff; margin-bottom: var(--space-4); } .guarantee p { color: var(--ink-200); } .guarantee p + p { margin-top: var(--space-3); } .guarantee strong { color: #fff; font-weight: 600; } @media (max-width: 768px) { .guarantee { grid-template-columns: 1fr; padding: var(--space-8); } .guarantee-icon { width: 64px; height: 64px; } } /* ---------- Final CTA band ---------- */ .cta-band { padding: var(--space-20) 0; text-align: center; background: radial-gradient(60% 80% at 50% 100%, var(--brand-50) 0%, transparent 70%); } .cta-band h2 { margin-bottom: var(--space-4); } .cta-band .lead { margin: 0 auto var(--space-8); } /* ---------- Footer ---------- */ .footer { padding: var(--space-12) 0 var(--space-8); background: var(--surface-raised); border-top: 1px solid var(--ink-100); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand img { height: 24px; margin-bottom: var(--space-3); } .footer-tagline { font-size: 14px; color: var(--ink-600); max-width: 360px; } .footer-col h4 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; margin-bottom: var(--space-4); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col a { font-size: 14px; color: var(--ink-700); } .footer-col a:hover { color: var(--brand-600); } .footer-bottom { padding-top: var(--space-6); border-top: 1px solid var(--ink-200); display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-500); } /* ---------- Process steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .steps.steps-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1100px) { .steps.steps-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps.steps-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .steps.steps-5 { grid-template-columns: 1fr; } } /* ---------- Section header ---------- */ .section-header { max-width: 760px; margin-bottom: var(--space-12); } .section-header h2 { margin-bottom: var(--space-4); } .section-header.center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------- Utility ---------- */ .center { text-align: center; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* ============================================================ Scroll-triggered reveal animations Activated by IntersectionObserver in scripts/site.js ============================================================ */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered reveal for children of a parent */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Mid-page CTA mini-band Less dominant than the final .cta-band — single line + button ============================================================ */ .cta-mini { padding: var(--space-16) 0; text-align: center; background: var(--surface-canvas); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); } .cta-mini-inner { max-width: 680px; margin: 0 auto; } .cta-mini h3 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); margin-bottom: var(--space-6); } @media (max-width: 640px) { .cta-mini h3 { font-size: 1.25rem; } .cta-mini { padding: var(--space-12) 0; } } /* ============================================================ Free tier badge variant ============================================================ */ .badge-free { background: var(--success-fg); color: #fff; position: absolute; top: calc(var(--space-4) * -1); left: 50%; transform: translateX(-50%); } .pricing-card-free { border-color: var(--success-fg); box-shadow: var(--shadow-md), 0 0 0 1px rgba(19, 152, 106, 0.2); position: relative; } .pricing-card-free .pricing-price { color: var(--success-fg); font-style: normal; font-weight: 600; font-size: 16px; } /* ============================================================ Side-by-side text + illustration layout Used in Problem and Opportunity sections ============================================================ */ .split-text-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } /* Desktop-only modifier: locks left column to image width (420px) and reverses the visual order so the image (last in DOM) appears first. Markup is text-first so mobile stacks correctly; CSS order flips it on desktop. */ @media (min-width: 901px) { .split-text-visual.cols-image-text { grid-template-columns: 420px 1fr; } .split-text-visual.cols-image-text > :first-child { order: 2; } .split-text-visual.cols-image-text > :last-child { order: 1; } } .split-text-visual.reverse { direction: rtl; } .split-text-visual.reverse > * { direction: ltr; } @media (max-width: 900px) { .split-text-visual { grid-template-columns: 1fr; gap: var(--space-8); } .split-text-visual.reverse { direction: ltr; } } .illustration { width: 100%; height: auto; display: block; } .illustration-card { background: var(--surface-canvas); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .illustration-card-tinted { background: linear-gradient(135deg, var(--brand-50) 0%, var(--surface-canvas) 100%); border-color: var(--brand-100); } /* ============================================================ Scrollytelling layout — visual + numbered beats side by side Used in Problem and Opportunity sections. Static (no scroll animation): all beats and all SVG stages are visible at once. ============================================================ */ .scrollytelling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; } .scrollytelling.reverse { direction: rtl; } .scrollytelling.reverse > * { direction: ltr; } .scrollytelling-beats { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0; } .scrolly-beat { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-6) 0; } .scrolly-beat-marker { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; background: var(--brand-600); border: 1.5px solid var(--brand-600); color: #fff; } .scrolly-beat-headline { font-size: 1.18rem; font-weight: 600; color: var(--ink-900); margin: 0 0 6px 0; line-height: 1.3; } .scrolly-beat-body { color: var(--ink-600); line-height: 1.55; margin: 0; font-size: 0.98rem; } @media (max-width: 900px) { .scrollytelling { grid-template-columns: 1fr; gap: var(--space-8); } .scrollytelling.reverse { direction: ltr; } } /* ============================================================ Raster image placeholder (user swaps for real image later) Marked clearly so it's obvious it's a placeholder ============================================================ */ .img-placeholder { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: repeating-linear-gradient( 45deg, var(--ink-100), var(--ink-100) 12px, var(--surface-raised) 12px, var(--surface-raised) 24px ); border: 2px dashed var(--ink-300); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-6); color: var(--ink-600); font-size: 13px; font-family: var(--font-mono); } .img-placeholder-label { background: var(--surface-canvas); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--ink-200); max-width: 90%; } /* ============================================================ Floating animated dots — subtle motion on hero / illustration card ============================================================ */ @keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float-slow { animation: float-slow 4s var(--ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { .float-slow { animation: none; } } /* ============================================================ Card hover lift enhancement — slightly more pronounced for the cards-driven sections (personas, values, steps) ============================================================ */ .card-hover { transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .card-hover:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card-hover:hover { transform: none; } }