/* Herb Immortal — homepage */ :root { /* White + dark-green light theme. Deep forest text on white, with a tight range of green shades for accents, chips, and tinted panels. */ --bg: #FFFFFF; --bg-2: #F3F7F0; --ink: #14281A; --ink-2: #45594B; --ink-mute: #78887B; --line: rgba(20, 45, 28, 0.10); --accent: #1F6B3B; --accent-deep: #14512B; --paper: #FFFFFF; --tag-bg: #E8F1E4; /* Deep-green anchor sections (Stats, Ecosystem) */ --forest: #123B22; --forest-2: #0E2F1B; --on-forest: #EAF3E7; --on-forest-mute: rgba(234, 243, 231, 0.66); --forest-accent: #8FD69A; --pine-green: #14512B; --kelly-green: #1F6B3B; --pale-green: #E8F1E4; --font-heading: "Sora", sans-serif; --font-body: "Manrope", sans-serif; --font-display: "Bebas Neue", sans-serif; /* Role aliases mapped onto the new type system */ --font-sans: var(--font-body); --font-label: var(--font-heading); --font-mono: var(--font-body); --gutter: clamp(20px, 4vw, 56px); --maxw: 1400px; --rad: 2px; --density: 1; /* --- Premium Design Tokens --- */ /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-20: 80px; --space-30: 120px; --section-pad-y: 64px; --section-pad-x: 40px; /* Radii */ --rad-btn: 999px; --rad-input: 12px; --rad-card: 16px; --rad-modal: 16px; /* Shadows */ --shadow-e0: 0px 1px 2px 0px rgba(0,0,0,0.04); --shadow-e1: 0px 10px 20px 0px rgba(0,0,0,0.05); --shadow-e2: 0px 16px 32px 0px rgba(0,0,0,0.08); /* Typography Scale */ --fs-display-xl: clamp(42px, 5vw, 72px); --lh-display-xl: 1.0; --ls-display-xl: -0.05em; --fs-h1: clamp(40px, 4.5vw, 64px); --lh-h1: 1.05; --ls-h1: -0.04em; --fs-h2: clamp(32px, 3.5vw, 48px); --lh-h2: 1.1; --ls-h2: -0.03em; --fs-h3: clamp(26px, 2.5vw, 36px); --lh-h3: 1.15; --ls-h3: -0.02em; --fs-h4: clamp(22px, 2vw, 28px); --lh-h4: 1.2; --ls-h4: -0.01em; --fs-h5: clamp(15px, 1.5vw, 18px); --lh-h5: 1.3; --ls-h5: 0.03em; --fs-h6: clamp(11px, 1vw, 12px); --lh-h6: 1.2; --ls-h6: 0.06em; --fs-body-lg: clamp(16px, 1.5vw, 18px); --lh-body-lg: 1.5; --ls-body-lg: 0; --fs-body: clamp(15px, 1.2vw, 17px); --lh-body: 1.5; --ls-body: 0; --fs-caption: clamp(12px, 1vw, 14px); --lh-caption: 1.4; --ls-caption: 0; } @media (max-width: 768px) { :root { --section-pad-y: 40px; --section-pad-x: 24px; --gutter: 24px; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Horizontal clipping lives on the root only: the root's overflow propagates to the viewport, so the page still never scrolls sideways. Putting it on as well turns into a scroll container, which silently breaks every `position: sticky` on the page (the ecosystem header depends on it). */ html { overflow-x: hidden; } /* Lenis owns scrolling — native smooth-scroll must be OFF or it fights the JS loop. Reduced-motion users (Lenis disabled) fall back to instant/native behaviour. */ html { scroll-behavior: auto; } /* Official Lenis recommended styles */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-feature-settings: 'blwf' on, 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on, 'ss03' on; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Single light theme — kept aligned so a stray data-theme never re-darkens. */ body[data-theme="dark"] { --bg: #FFFFFF; --bg-2: #F3F7F0; --ink: #14281A; --ink-2: #45594B; --ink-mute: #78887B; --line: rgba(20, 45, 28, 0.10); --accent: #1F6B3B; --accent-deep: #14512B; --paper: #FFFFFF; --tag-bg: #E8F1E4; } ::selection { background: var(--accent); color: var(--paper); } a { color: inherit; text-decoration: none; } /* Typography Utilities */ .display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); font-weight: 400; } .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 400; } .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 400; } .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 400; } .h4 { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: 400; } .h5 { font-family: var(--font-label); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-weight: 500; text-transform: uppercase; font-feature-settings: 'ss03' on; } .h6, .label, .eyebrow { font-family: var(--font-label); font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: 500; text-transform: uppercase; font-feature-settings: 'ss03' on; } .body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); font-weight: 400; } .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; } .caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 400; } .mono { font-family: var(--font-mono); font-weight: 400; } .mono-bold { font-family: var(--font-mono); font-weight: 500; } .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: none; padding: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .tag::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } p { margin: 0; } /* Container */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Section */ section { padding-block: var(--section-pad-y); position: relative; } section+section { border-top: 1px solid var(--line); } .eyebrow-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(24px, 3vw, 48px); flex-wrap: wrap; gap: 12px; } .eyebrow-row .num { color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; } /* Buttons */ .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 480px) { .btn-row { flex-direction: column; width: 100%; } .btn-row .btn { text-align: center; justify-content: center; } } .btn { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; padding: 13px 32px; min-height: 44px; border-radius: var(--rad-btn); border: 1px solid var(--accent); background: var(--accent); color: #FFFFFF; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; } .btn:hover { transform: translateY(-1px); background: var(--accent-deep); border-color: var(--accent-deep); color: #FFFFFF; box-shadow: 0 6px 18px rgba(20, 45, 28, 0.14); } .btn.ghost { background: transparent; color: var(--accent); border: 1px solid rgba(20, 45, 28, 0.18); } .btn.ghost:hover { background: var(--tag-bg); border-color: var(--accent); color: var(--accent-deep); } .btn.link { background: transparent; border: none; padding: 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; border-radius: 0; padding-bottom: 4px; } /* Nav */ .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 30; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-radius: 20px; margin: 0 auto; max-width: calc(var(--maxw) - 32px); width: calc(100% - 32px); /* backdrop-filter is deliberately not transitioned. Interpolating a blur radius re-blurs everything behind the bar on every frame of the 0.45s run — and that run is triggered by crossing 24px, i.e. the moment a scroll starts, in both directions. The 8px -> 12px step is imperceptible when it lands at once; the transition was not. */ transition: background-color 0.45s ease, border-color 0.45s ease; } .nav-scrolled { border-bottom: 1px solid var(--shadow-e0); } .nav.nav-hidden { transform: translateY(calc(-100% - 32px)); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.01em; } .brand .mark { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: block; object-fit: contain; } .brand .wordmark { font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; } .nav-inner { gap: 24px; } /* Footer brand mark */ .footer .brand-block .name-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .footer .brand-block .name-row .mark { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: block; object-fit: contain; } .nav-links { display: flex; gap: 32px; font-size: 13px; color: var(--ink-2); white-space: nowrap; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-cta .btn { padding: 9px 16px; font-size: 13px; } /* Mobile menu button - hidden on desktop */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 50; margin-left: auto; } .hamburger { display: flex; flex-direction: column; gap: 6px; width: 22px; } .hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.open span:first-child { transform: translateY(4px) rotate(45deg); } .hamburger.open span:last-child { transform: translateY(-4px) rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu-overlay { position: fixed; inset: 0; z-index: 25; background: var(--bg); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 100px var(--gutter) var(--gutter); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .mobile-menu-overlay.open { opacity: 1; pointer-events: auto; } .mobile-menu-content { display: flex; flex-direction: column; gap: 8px; } .mobile-menu-actions { margin-top: auto; width: 100%; display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: 0.3s; } .mobile-menu-overlay.open .mobile-menu-actions { opacity: 1; transform: translateY(0); } .mobile-menu-link { font-size: clamp(32px, 8vw, 48px); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); text-decoration: none; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease; } .mobile-menu-overlay.open .mobile-menu-link { opacity: 1; transform: translateY(0); } .mobile-menu-overlay.open .mobile-menu-link:nth-child(1) { transition-delay: 0.05s; } .mobile-menu-overlay.open .mobile-menu-link:nth-child(2) { transition-delay: 0.1s; } .mobile-menu-overlay.open .mobile-menu-link:nth-child(3) { transition-delay: 0.15s; } .mobile-menu-overlay.open .mobile-menu-link:nth-child(4) { transition-delay: 0.2s; } .mobile-menu-overlay.open .mobile-menu-link:nth-child(5) { transition-delay: 0.25s; } .mobile-menu-link:hover { color: var(--accent-deep); } body[data-theme="dark"] .mobile-menu-link:hover { color: var(--accent); } @media (max-width: 880px) { .nav-links { display: none; } .desktop-only { display: none; } .mobile-menu-btn { display: block; } .brand { position: absolute; left: 50%; transform: translateX(-50%); } } /* Hero */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding-block: 100px 48px; } .hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .dna-helix-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .hero-dna-helix { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* Behind content */ pointer-events: none; /* Let clicks pass through if needed, though mouse moves still track */ } .hero-center { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; gap: clamp(28px, 4vw, 48px); position: relative; z-index: 1; } .hero-center .display { margin: 0; font-size: clamp(48px, 5.5vw, 50px); line-height: 1.05; } .hero-slogan { font-family: var(--font-heading); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin: 0; } .hero-center .btn-row { justify-content: center; } /* Hero entrance animation */ .hero-anim { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--hero-delay, 0s); } .hero-anim-in { opacity: 1; transform: translateY(0); } @media (max-width: 720px) { .hero { min-height: 100svh; padding-block: 80px 40px; } .display { font-size: clamp(42px, 10vw, 72px); } .hero-slogan { font-size: clamp(15px, 3.8vw, 18px); } } /* Animated globe */ .globe-wrap { position: absolute; right: calc(var(--gutter) * 0.5); top: 4%; width: clamp(260px, 32vw, 480px); aspect-ratio: 1; pointer-events: none; opacity: 0.85; } body[data-theme="dark"] .globe-wrap { opacity: 0.7; } body[data-theme="dark"] .globe-canvas { filter: invert(1) hue-rotate(180deg); } @media (max-width: 720px) { .globe-wrap { width: 200px; right: 0; top: 2%; opacity: 0.5; } } /* Botanical decorations */ .botanical-leaf { position: absolute; width: 120px; pointer-events: none; opacity: 0.5; } .botanical-branch { width: 100%; max-width: 600px; pointer-events: none; } /* Photo placeholders */ .photo-placeholder { background: linear-gradient(145deg, var(--bg-2) 0%, color-mix(in oklab, var(--accent) 8%, var(--bg-2)) 100%); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .photo-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } /* Image strip */ .image-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; overflow: hidden; } .image-strip-inner { display: flex; gap: 16px; padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; } .image-strip .photo-placeholder { flex: 0 0 auto; width: 240px; height: 180px; } @media (max-width: 720px) { .image-strip-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; } .image-strip .photo-placeholder { width: 180px; height: 140px; } } /* Vision botanical sidebar */ .vision-with-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .vision-art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(100px, 12vw, 180px); opacity: 0.3; pointer-events: none; } @media (max-width: 880px) { .vision-art { display: none; } } /* Gap section sidebar leaf */ .gap-with-art { position: relative; } .gap-botanical { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 100px; opacity: 0.4; pointer-events: none; } @media (max-width: 1200px) { .gap-botanical { display: none; } } /* Seed section photo grid */ .seed-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: clamp(40px, 4vw, 64px); } .seed-photos .photo-placeholder { height: 200px; } @media (max-width: 720px) { .seed-photos { grid-template-columns: 1fr 1fr; } .seed-photos .photo-placeholder:last-child { display: none; } } /* Traditions Showcase */ .traditions-section { padding: 80px 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } .traditions-showcase-container { border-radius: 36px; padding: 32px 48px; background: rgba(255,255,255,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.06); background-image: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.45)); box-shadow: 0 12px 40px rgba(0,0,0,0.04); position: relative; max-width: 1200px; margin: 0 auto; } body[data-theme="dark"] .traditions-showcase-container { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); background-image: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); } .traditions-background-effects { position: absolute; inset: 0; pointer-events: none; border-radius: 36px; overflow: hidden; } .traditions-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); opacity: 0.03; } body[data-theme="dark"] .traditions-glow { background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); } .traditions-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.03; mix-blend-mode: overlay; } .traditions-list { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: clamp(24px, 3vw, 48px); position: relative; z-index: 1; animation: slow-drift 20s ease-in-out infinite alternate; } @keyframes slow-drift { 0% { transform: translateX(-12px); } 100% { transform: translateX(12px); } } .traditions-showcase-container:hover .traditions-list { animation-play-state: paused; } .tradition-item { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px 16px; border-radius: 20px; transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .tradition-item span { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; color: rgba(0,0,0,0.88); transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1); } body[data-theme="dark"] .tradition-item span { color: rgba(255,255,255,0.88); } .tradition-icon { color: rgba(0,0,0,0.6); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1); } body[data-theme="dark"] .tradition-icon { color: rgba(255,255,255,0.6); } /* Hover state */ .tradition-item:hover { background: rgba(255,255,255,0.6); transform: translateY(-2px); } body[data-theme="dark"] .tradition-item:hover { background: rgba(255,255,255,0.1); } .tradition-item:hover span { color: var(--accent-deep); } body[data-theme="dark"] .tradition-item:hover span { color: #fff; } .tradition-item:hover .tradition-icon { transform: scale(1.1) rotate(5deg); color: var(--accent); } body[data-theme="dark"] .tradition-item:hover .tradition-icon { color: #fff; } /* Responsiveness */ @media (max-width: 1024px) { .traditions-list { flex-wrap: wrap; justify-content: center; } } @media (max-width: 768px) { .traditions-showcase-container { padding: 24px; border-radius: 24px; } .traditions-list { gap: 16px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; /* For scrollbar */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .traditions-list::-webkit-scrollbar { display: none; } .tradition-item { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.04); white-space: nowrap; } body[data-theme="dark"] .tradition-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.05); } } /* Industry gap */ .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 20px; } } .gap-list { display: flex; flex-direction: column; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); } .gap-row-interactive { position: relative; overflow: hidden; padding: clamp(24px, 3.5vw, 40px) 0; border-bottom: 1px solid var(--line); cursor: pointer; background-color: transparent; } .gap-row-default { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; transition: opacity 0.3s ease; gap: 24px; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .gap-row-header { display: flex; align-items: center; gap: 24px; } .gap-row-header .num { font-family: var(--font-mono); font-size: clamp(14px, 1.2vw, 18px); color: var(--ink-mute); width: 40px; } .gap-row-header .title { font-family: var(--font-heading); font-size: clamp(32px, 3.5vw, 48px); font-weight: 300; color: var(--ink); letter-spacing: -0.02em; } .gap-row-default .body { font-family: var(--font-sans); font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-mute); max-width: 45ch; font-weight: 300; line-height: 1.5; } .gap-row-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: flex; align-items: center; background-color: #04140A; transform: translateY(101%); overflow: hidden; pointer-events: none; } .marquee__inner-wrap { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; will-change: transform; } .marquee-content { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); flex-shrink: 0; animation: gapMarquee 25s linear infinite; } .marquee-content span.marquee-detail-text { font-family: var(--font-sans); font-size: clamp(24px, 2.5vw, 40px); font-weight: 300; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; } .marquee-content img { width: clamp(80px, 8vw, 120px); height: clamp(50px, 5vw, 75px); border-radius: 999px; object-fit: cover; border: 1px solid var(--line); } @keyframes gapMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 768px) { .gap-row-default { flex-direction: column; align-items: flex-start; gap: 12px; } .gap-row-interactive { padding: 24px 0; } } /* Stats */ .stats { background: var(--forest); color: var(--on-forest); position: relative; overflow: hidden; } body[data-theme="dark"] .stats { background: var(--forest); color: var(--on-forest); } /* Subtle botanical atmosphere details */ .stats::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.03; mix-blend-mode: overlay; pointer-events: none; } .stats::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: radial-gradient(circle at top, rgba(203, 246, 150, 0.05) 0%, transparent 70%); pointer-events: none; } .stats .h2 { color: #F4FBF0; } .stats .body-lg { color: rgba(244, 251, 240, 0.72) !important; } .stats .tag, .stats .ink-mute { color: rgba(244, 251, 240, 0.45) !important; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 56px); border-top: 1px solid rgba(203, 246, 150, 0.05); /* Thin botanical separator */ position: relative; z-index: 1; } /* Override the default .stat and .premium-card styles just for this section */ .stats .stat { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; min-height: 220px; border-radius: var(--rad-card, 16px); box-shadow: none !important; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important; } .stats .stat:hover { transform: translateY(-6px) !important; border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 12px 40px rgba(203, 246, 150, 0.15) !important; /* Soft glow using brand green */ } .stats .stat .figure { font-family: var(--font-heading); font-size: clamp(48px, 6.5vw, 96px); line-height: 0.95; letter-spacing: -0.025em; color: var(--forest-accent); } .stats .stat .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 251, 240, 0.45); } .stats .stat .desc { font-size: 14px; color: rgba(244, 251, 240, 0.72); margin-top: auto; max-width: 32ch; } @media (max-width: 880px) { .stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stats-row { grid-template-columns: 1fr; } } .stats-foot { margin-top: clamp(24px, 3vw, 40px); font-family: var(--font-heading); font-size: clamp(20px, 1.8vw, 26px); font-style: italic; letter-spacing: -0.005em; max-width: 60ch; color: color-mix(in oklab, currentColor 86%, transparent); } /* Vision quote */ #vision { text-align: left; } .vision-quote { font-family: var(--font-heading); font-size: clamp(36px, 5.5vw, 80px); line-height: 1.05; letter-spacing: -0.02em; margin-top: clamp(24px, 3vw, 40px); max-width: 22ch; } .vision-quote em { color: var(--accent); font-style: italic; } body[data-theme="dark"] .vision-quote em { color: var(--accent); } .vision-tagline { margin-top: clamp(32px, 4vw, 56px); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } /* Solutions cards */ .sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 56px); } .premium-modal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rad-modal); box-shadow: var(--shadow-e2); padding: 40px 36px; width: 100%; max-width: 520px; position: relative; max-height: 90vh; overflow-y: auto; } .premium-input { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--rad-input); font-family: var(--font-sans); font-size: 15px; background: var(--bg); color: var(--ink); box-sizing: border-box; margin-top: 6px; display: block; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } .premium-input:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-deep) 20%, transparent); } .sol-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rad-card); box-shadow: var(--shadow-e1); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; min-height: 220px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; cursor: default; } .sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-e2); } .sol-card-icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 8%, var(--bg)); display: flex; align-items: center; justify-content: center; color: var(--accent-deep); } body[data-theme="dark"] .sol-card-icon { color: var(--accent); } .sol-card-title { font-family: var(--font-heading); font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.01em; } .sol-card-body { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-top: auto; } /* Staggered reveal for sol-cards */ .sol-card.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; transition-delay: calc(var(--i, 0) * 0.08s); } .sol-card.reveal.in { opacity: 1; transform: translateY(0); } .sol-card.reveal.in:hover { transform: translateY(-4px); } @media (max-width: 880px) { .sol-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sol-cards { grid-template-columns: 1fr; gap: 12px; } } /* Platforms Carousel */ .platform-tabs-container { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(32px, 4vw, 48px); } .platform-tabs { display: flex; position: relative; background: color-mix(in oklab, var(--line) 40%, transparent); border-radius: 99px; padding: 4px; } .platform-tab-highlight { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--paper); border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; } body[data-theme="dark"] .platform-tab-highlight { background: var(--ink-2); } .platform-tab { position: relative; z-index: 2; flex: 1; background: transparent; border: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-mute); padding: 10px 24px; cursor: pointer; transition: color 0.3s ease; white-space: nowrap; } .platform-tab.active { color: var(--ink); } .platforms-carousel { max-width: 700px; margin: 0 auto; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .platform-card { display: flex; flex-direction: column; align-items: center; gap: 24px; } .platform-card-visual { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(145deg, var(--bg-2) 0%, color-mix(in oklab, var(--accent) 6%, var(--bg-2)) 100%); border: 1px solid var(--line); border-radius: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .platform-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .platform-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .platform-card-title { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; line-height: 1; } .platform-card-title .ext { color: var(--accent-deep); } body[data-theme="dark"] .platform-card-title .ext { color: var(--accent); } .platform-card-sub { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--ink-mute); } .platform-card-desc { font-family: var(--font-heading); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-2); text-align: left; max-width: 56ch; } @media (max-width: 720px) { .platforms-carousel { max-width: 100%; } .platform-card-visual { aspect-ratio: 4 / 3; border-radius: 12px; } } /* Founders */ .founders-quote { font-family: var(--font-heading); font-style: italic; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.015em; margin-block: clamp(36px, 4vw, 64px); max-width: 22ch; } .founders-quote::before { content: "“"; color: var(--accent-deep); margin-right: 4px; } .founders-quote::after { content: "”"; color: var(--accent-deep); } body[data-theme="dark"] .founders-quote::before, body[data-theme="dark"] .founders-quote::after { color: var(--accent); } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); } .value { padding: clamp(28px, 3vw, 36px) clamp(20px, 2vw, 24px); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 240px; } .value:last-child { border-right: none; } .value .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-mute); } .value .title { font-family: var(--font-heading); font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.01em; } .value .body { font-size: 14px; color: var(--ink-2); margin-top: auto; } @media (max-width: 880px) { .values-grid { grid-template-columns: repeat(2, 1fr); } .value:nth-child(2) { border-right: none; } .value:nth-child(1), .value:nth-child(2) { border-bottom: 1px solid var(--line); } } @media (max-width: 520px) { .values-grid { grid-template-columns: 1fr; } .value { border-right: none; border-bottom: 1px solid var(--line); } .value:last-child { border-bottom: none; } } /* Seed round */ .seed { background: var(--bg-2); } .seed-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: end; } @media (max-width: 880px) { .seed-inner { grid-template-columns: 1fr; } } .seed .display { font-size: clamp(46px, 6vw, 88px); } /* Footer */ .footer { background: var(--ink); color: var(--bg); padding-block: clamp(48px, 5vw, 80px) 28px; } body[data-theme="dark"] .footer { background: var(--paper); color: var(--ink); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, currentColor 60%, transparent); margin-bottom: 18px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer ul a { font-size: 14px; color: color-mix(in oklab, currentColor 86%, transparent); } .footer ul a:hover { color: currentColor; } .footer .brand-block .name { font-family: var(--font-heading); font-size: 32px; letter-spacing: -0.02em; } .footer .brand-block .desc { font-size: 14px; color: color-mix(in oklab, currentColor 78%, transparent); max-width: 38ch; } .footer .locales { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, currentColor 60%, transparent); } .footer-meta { margin-top: clamp(36px, 4vw, 64px); padding-top: 28px; border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, currentColor 56%, transparent); } /* Footer large decorative name */ .footer-bigname { text-align: center; margin-top: clamp(32px, 4vw, 56px); padding-bottom: 8px; overflow: hidden; } .footer-bigname .serif { font-family: var(--font-heading); font-size: clamp(48px, 10vw, 200px); line-height: 0.9; letter-spacing: -0.03em; font-weight: 400; color: color-mix(in oklab, currentColor 12%, transparent); white-space: nowrap; display: block; } /* Reveal animation */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); } .reveal.in { opacity: 1; transform: none; } /* Subtle hover on links */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 4px; } .link-arrow:hover { color: var(--accent-deep); } body[data-theme="dark"] .link-arrow:hover { color: var(--accent); } /* Accessibility & Focus States */ .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Premium UI / UX Overhaul Classes --- */ /* Premium Card */ .premium-card { background: var(--paper); border-radius: var(--rad-card); padding: var(--space-8); box-shadow: var(--shadow-e1); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); border: 1px solid var(--line); } .premium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-e2); } /* Glassmorphic Nav */ .nav.scrolled { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 24px rgba(0,0,0,0.02); } body[data-theme="dark"] .nav.scrolled { background: rgba(14, 17, 13, 0.65) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Marquee Edge Fades */ .marquee-wrap { position: relative; overflow: hidden; } .marquee-wrap::before, .marquee-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15%; z-index: 2; pointer-events: none; } .marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } /* Button Refinements */ .btn { border-radius: var(--rad-btn); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .btn:active { transform: translateY(1px) scale(0.98); } /* Accessibility */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Premium Marquee */ .premium-marquee { width: 100%; overflow: hidden; white-space: nowrap; position: relative; border-bottom: 1px solid var(--line); background: var(--bg); padding: 18px 0; display: flex; align-items: center; } .premium-marquee-track { display: flex; animation: marquee-scroll 25s linear infinite; will-change: transform; } .premium-marquee-item { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ink); font-weight: 400; margin-right: 2.5rem; } .premium-marquee-dash { display: inline-block; width: 24px; height: 3px; background-color: var(--ink-mute); margin-left: 2.5rem; border-radius: 4px; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } } body[data-theme="dark"] .premium-marquee { border-bottom-color: var(--line); } /* ===================== Connected Ecosystem (Solutions) ===================== A pinned, full-bleed scene: the pillar images stack in the background while the intro holds and the pillar copy swaps in place. ScrollScene.jsx owns the motion and the track height; everything here is looks. */ .eco-section { padding: 0; background-color: var(--forest); } .eco-stage { background-color: var(--forest); } .eco-stage-bg { position: absolute; inset: 0; z-index: 0; } /* Two washes: a top-to-bottom fall-off for the copy at the bottom, and a light overall darkening so white type holds over any part of any photograph. */ .eco-stage-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(9, 22, 14, 0.78) 0%, rgba(9, 22, 14, 0.34) 32%, rgba(9, 22, 14, 0.72) 62%, rgba(9, 22, 14, 0.95) 100% ), linear-gradient(to right, rgba(9, 22, 14, 0.55) 0%, rgba(9, 22, 14, 0) 62%); } .eco-stage-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 6vh, 72px); padding-top: clamp(104px, 14vh, 168px); padding-bottom: clamp(48px, 8vh, 96px); } /* ---- Intro (holds for the whole scene) ---- */ .eco-head { max-width: 44ch; } .eco-eyebrow { display: block; font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-accent); margin-bottom: 14px; } .eco-section-main-title { color: #fff; font-family: var(--font-heading); font-size: clamp(30px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 400; margin: 0; } .eco-section-sub { font-family: var(--font-sans); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 42ch; margin: 14px 0 0; } /* ---- Lead: swapping pillar copy + progress rail, at the top of the stage ---- */ .eco-stage-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 64px); } /* Every step sits in the same grid cell, so the block is as tall as the tallest one and nothing shifts as the copy crossfades. */ .eco-steps { display: grid; flex: 1 1 auto; min-width: 0; max-width: 56ch; } .eco-step { grid-area: 1 / 1; } .eco-step-index { display: block; font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--forest-accent); font-variant-numeric: tabular-nums; margin-bottom: 16px; } .eco-step-title { font-family: var(--font-heading); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: #fff; margin: 0 0 12px; text-wrap: balance; } .eco-step-body { font-family: var(--font-sans); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 48ch; margin: 0; } .eco-rail { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding-bottom: 6px; } .eco-tick { display: block; width: 2px; height: 28px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); transition: background-color 0.4s ease, height 0.4s ease; } .eco-tick.is-active { height: 40px; background: var(--forest-accent); } /* ---- Tablet / mobile: same scene, tighter type; the rail lies flat ---- */ @media (max-width: 900px) { .eco-stage-content { padding-top: clamp(88px, 13vh, 128px); padding-bottom: clamp(36px, 6vh, 64px); } .eco-head { max-width: none; } .eco-stage-lead { flex-direction: column; /* rail sits under the copy */ align-items: stretch; gap: 20px; } .eco-steps { max-width: none; } .eco-rail { flex-direction: row; gap: 8px; padding-bottom: 0; } .eco-tick { width: 100%; height: 2px; } .eco-tick.is-active { height: 2px; width: 100%; } } /* Reduced motion — ScrollScene switches images and copy without sliding or fading; the scene still reads, it just doesn't move. */ @media (prefers-reduced-motion: reduce) { .eco-tick { transition: none; } }