/* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; /* `scroll-padding-top` keeps anchor jumps (#work, #services, #contact, and the JS scrollIntoView) from parking the target's headline under the fixed nav-pill. Matches the pill's top:24px + ~56px height + a touch of breathing room. */ scroll-padding-top: 96px; /* Set bg on too so the area outside body (scrollbar gutter, overscroll on mobile) takes the theme color cleanly. */ background: var(--bg); transition: background var(--dur-base) var(--ease-out); } body { background: var(--bg); color: var(--fg); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: inherit; font-size: inherit; } :root { /* ----- Theme tokens (defaults = DARK theme) ----- Override on `[data-theme="light"]` below. Anything visual that should flip with the theme goes through one of these vars. */ --bg: #1c1c1c; --fg: #ebebeb; --accent: #ff4a08; --accent-soft: #ff9966; /* peachy orange — secondary button accent */ --white: #fff; --hairline: rgba(235, 235, 235, 0.17); --surface-1: rgba(255, 255, 255, 0.02); /* card / faint chrome */ --surface-2: rgba(255, 255, 255, 0.06); /* card border */ --pill-bg: rgba(0, 0, 0, 0.55); /* nav-pill glass */ --pill-border: rgba(255, 255, 255, 0.06); --pill-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); --bg-glow-warm-1: rgba(255, 74, 8, 0.08); --bg-glow-warm-2: rgba(255, 74, 8, 0.05); --hero-decoration-opacity: 0.18; /* Width of the soft fade-out band at each edge of the marquee. The marquee uses `mask-image` (not a colored gradient overlay), so this controls how far inset the opaque-to-transparent ramp starts. Themed-independent: a mask cuts true transparency, so no color has to match the background. */ --marquee-fade-width: clamp(80px, 12vw, 200px); --cursor-border: rgba(255, 255, 255, 0.85); --scroll-tick-track: rgba(235, 235, 235, 0.6); /* Nav link + contact-pill tokens. The Contact CTA in the nav is a filled pill; in dark mode it's a white pill with dark text, in light mode it inverts to dark-pill + light-text so it stays as the strong call-to-action. */ --nav-link-color: var(--fg); --contact-bg: #fff; --contact-bg-hover: #e8e8e8; --contact-fg: #000; --contact-glow: rgba(255, 255, 255, 0.18); /* Case-row hover state — the headline brightens. In dark mode that means going from off-white to pure white; in light mode from mid-dark to pure black. */ --case-headline-hover: #ffffff; /* Non-themed tokens */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Fluid scale — designed at 1440px viewport */ --size-eyebrow: clamp(14px, 1.25vw, 20px); --size-body: clamp(15px, 1.25vw, 20px); --size-title-sm: clamp(22px, 2.2vw, 36px); --size-title-md: clamp(32px, 4.5vw, 64px); --size-display: clamp(40px, 6.4vw, 96px); --size-tagline: clamp(20px, 2.4vw, 36px); /* Spacing scale — fluid (vh-based), used for vertical gaps and section padding that should breathe with viewport height. The three vw-based clamps (btn-row gap, hero-inner gap, main-grid gap) stay literal at their use sites — vw and vh react to different axes, so consolidating them into vh tokens would change responsive behavior in a non-obvious way. Px constants for chrome (buttons, nav-pill, etc.) also stay literal — they're intentionally fixed at all viewports. Override via `spacing_scale` in settings.md. */ --space-xs: clamp(16px, 2vh, 28px); --space-sm: clamp(24px, 3vh, 48px); --space-md: clamp(32px, 5vh, 64px); --space-lg: clamp(40px, 6vh, 80px); --space-section-y: clamp(64px, 10vh, 120px); /* Duration scale — covers the four most-used transition/animation durations (76 of ~104 declarations across the file). `.45s` stays literal at its 4 use sites — three are tuned fades, one is the case-tooltip scale paired with --ease-spring where a longer duration would feel laggy. Loops + one-shots (800ms, 2.4s, 5s, 12s, 24s, 40s, 80s) also stay literal, each is a specific intent. Override via `duration_scale` in settings.md. */ --dur-fast: 0.2s; --dur-base: 0.4s; --dur-medium: 0.55s; --dur-slow: 0.6s; } /* ----- LIGHT theme overrides ----- Activated by ``. Set by the toggle button + the bootstrap inline script in index.html (which also restores the user's saved preference or falls back to prefers-color-scheme). */ [data-theme="light"] { --bg: #faf8f4; /* warm off-white, complements the orange */ --fg: #1c1c1c; /* dark text */ /* accent + accent-soft stay the same — orange works in either theme */ --hairline: rgba(28, 28, 28, 0.12); --surface-1: rgba(28, 28, 28, 0.03); --surface-2: rgba(28, 28, 28, 0.08); --pill-bg: rgba(255, 255, 255, 0.72); --pill-border: rgba(28, 28, 28, 0.08); --pill-shadow: 0 10px 40px rgba(28, 28, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); --bg-glow-warm-1: rgba(255, 74, 8, 0.12); --bg-glow-warm-2: rgba(255, 74, 8, 0.08); --hero-decoration-opacity: 0.12; /* `--marquee-fade-width` is themed-independent — see :root. */ --cursor-border: rgba(28, 28, 28, 0.65); --scroll-tick-track: rgba(28, 28, 28, 0.55); --nav-link-color: #1c1c1c; --contact-bg: #1c1c1c; --contact-bg-hover: #2a2a2a; --contact-fg: #faf8f4; --contact-glow: rgba(28, 28, 28, 0.18); --case-headline-hover: #000000; } /* ===== Theme toggle ===== A small frosted disc that swaps `[data-theme]` on the root. `position: fixed` to the BOTTOM-right of the viewport so it stays accessible while scrolling without competing with the nav-pill at the top. Same disc styling and click handler at every breakpoint — the mobile override below just shrinks the size a touch. */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; /* Solid-ish frosted dot for high visibility against either theme. In dark mode it's a clearly lit glass disc; in light mode it inverts to a warm white disc with a darker border. */ background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); color: var(--fg); z-index: 200; /* above nav-pill (100) and cursor (9999 has its own blend-mode pass; this 200 keeps the toggle clickable and stacked above the rest of the page chrome). */ display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } [data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.85); border-color: rgba(28, 28, 28, 0.18); box-shadow: 0 10px 30px rgba(28, 28, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .theme-toggle:hover { transform: scale(1.06); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; /* Centered absolutely so both icons stack on each other (we crossfade via opacity + scale). `translate(-50%, -50%)` is preserved in every transform variant below — the rotation/scale compose with it. */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* Convention: the icon shown represents the action — sun = "go light", moon = "go dark". So in DARK mode we show the SUN icon (click to go light), and in LIGHT mode we show the MOON icon (click to go dark). */ .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(0.7); } .theme-toggle .icon-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(30deg) scale(0.7); } /* ===== Language switcher ===== A small two-segment EN/ES pill, floating to the left of the theme toggle. Same frosted-glass chrome as the theme toggle. Visibility is controlled by `i18n.show_switcher` (applyI18n sets display); the active segment is highlighted. On mobile the theme toggle docks into the nav-pill, so this sits alone at the bottom-right. */ .lang-toggle { position: fixed; bottom: 24px; right: 80px; /* left of the 44px theme toggle (24 + 44 + 12) */ z-index: 200; display: inline-flex; align-items: stretch; height: 44px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); } [data-theme="light"] .lang-toggle { background: rgba(255, 255, 255, 0.85); border-color: rgba(28, 28, 28, 0.18); box-shadow: 0 10px 30px rgba(28, 28, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .lang-toggle button { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--fg); padding: 0 13px; cursor: pointer; opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .lang-toggle button.is-active { opacity: 1; background: rgba(255, 255, 255, 0.14); } [data-theme="light"] .lang-toggle button.is-active { background: rgba(28, 28, 28, 0.08); } .lang-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* The in-menu variant: not floating. It lives inside `.nav-overlay` (display:none on desktop, so it only ever shows on mobile) and sits centered below the menu links. */ .lang-toggle-inline { position: static; bottom: auto; right: auto; margin-top: clamp(28px, 5vh, 48px); } @media (max-width: 700px) { /* On mobile the floating switcher is replaced by the one inside the mobile menu (.lang-toggle-inline). */ .lang-toggle-floating { display: none; } } /* ===== Subtle ambient backdrop ===== */ .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 50% at 15% 20%, var(--bg-glow-warm-1), transparent 60%), radial-gradient(50% 50% at 85% 80%, var(--bg-glow-warm-2), transparent 60%); transition: background var(--dur-base) var(--ease-out); } main { position: relative; z-index: 1; } /* ===== Header / Nav ===== */ .site-header { position: fixed; top: 24px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; } .nav-pill { pointer-events: auto; width: 100%; max-width: 926px; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; background: var(--pill-bg); backdrop-filter: blur(35px) saturate(120%); -webkit-backdrop-filter: blur(35px) saturate(120%); border-radius: 16px; border: 1px solid var(--pill-border); box-shadow: var(--pill-shadow); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .nav-tag { font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; letter-spacing: -0.16px; color: var(--fg); white-space: nowrap; } .nav-logo img { width: 90px; height: 28px; transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .nav-logo:hover img { transform: scale(1.06); } /* The SVG ships with a light-gray fill (#EBEBEB) for the dark theme. In light theme, `brightness(0)` zeroes the lightness of every pixel while preserving alpha — the white logo becomes pure black on the warm-white background, no asset swap needed. */ [data-theme="light"] .nav-logo img { filter: brightness(0); } .nav-links { display: flex; align-items: center; gap: 24px; } /* Hamburger button — hidden by default so it doesn't take up `justify-content: space-between` slot in the desktop nav-pill (which would push the inline links inward and leave a gap on the right). Becomes `display: flex` inside the 700px mobile breakpoint. */ .nav-toggle { display: none; } /* Mobile menu overlay — hidden on desktop. Becomes the full-screen menu inside the 700px mobile breakpoint. Lives at the body level (sibling of .site-header) so the pill always stacks above it. */ .nav-overlay { display: none; } .nav-links a { font-size: 16px; font-weight: 500; letter-spacing: -0.08px; color: var(--nav-link-color); transition: opacity var(--dur-fast) ease, color var(--dur-base) var(--ease-out); } .nav-links a:hover { opacity: .65; } .btn-contact { background: var(--contact-bg); color: var(--contact-fg) !important; padding: 8px 14px; border-radius: 10px; font-weight: 500; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .btn-contact:hover { background: var(--contact-bg-hover); opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 6px 20px var(--contact-glow); } /* ----- Nav contact button with a variant applied (e.g. bv-270 primary). settings.js applies the primary `.bv-NNN` class to .btn-contact so the nav CTA matches the hero CTA. The variant base rules want larger padding/radius/font — fine on the hero, but in the nav we want to keep the compact pill proportions. Specificity (0,3,0) here beats the `.btn.bv-NNN` (0,2,0) base in buttons.css. */ .btn-contact.btn[class*="bv-"] { padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: -0.14px; } /* ===== Buttons — Liquid Glass ===== Each button is built from three stacked layers: 1. ::before → a colored, blurred blob that drifts behind the glass while the button is hovered, and grows to fill the whole button while the button is pressed. 2. ::after → a frosted-glass overlay (backdrop-filter: blur) that sits ABOVE the blob and refracts both the blob and the page behind the button. 3. .btn-label → the text, z-index 2, always crisp on top. The blob's color matches the button's border (--btn-color), so primary and secondary buttons are internally color-consistent. The two variants use related-but-distinct oranges (--accent and --accent-soft). No transforms or position changes on the button itself — the button's box is always static. All animation lives inside it. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 4px; font-size: clamp(13px, 1vw, 14px); font-weight: 600; letter-spacing: -0.14px; line-height: 1; background: rgba(255, 255, 255, 0.02); color: var(--fg); border: 1px solid var(--btn-color, var(--accent)); overflow: hidden; cursor: pointer; box-shadow: 0 10px 32px -10px var(--btn-glow, rgba(255, 74, 8, 0.3)); transition: box-shadow .45s var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* Layer 1 — the colored blob behind the glass. Heavy filter: blur dissolves the blob into a soft cloud of color rather than a defined shape. The animation morphs both the position and the four-corner border-radius so the cloud continuously warps like a viscous liquid. NOTE: every `.btn:not([class*="bv-"])` scope below means "only when no variant class from buttons.css is applied." When the user picks a V01–V188 variant via settings.js, the .bv-NN class wins and these defaults step aside — preventing pseudo-element conflicts between the two systems. */ .btn:not([class*="bv-"])::before { content: ""; position: absolute; top: 50%; left: 50%; width: 90%; height: 90%; border-radius: 50%; background: var(--btn-color, var(--accent)); filter: blur(22px); transform: translate(-50%, -50%); z-index: 0; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out), width var(--dur-medium) var(--ease-out), height var(--dur-medium) var(--ease-out), border-radius var(--dur-medium) var(--ease-out), filter var(--dur-medium) var(--ease-out); } /* Layer 2 — frosted glass overlay. Blurs everything behind it (the blob + the page beyond the button). Subtle inset highlight + bottom shadow for a tactile glass edge. */ .btn:not([class*="bv-"])::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.18); border-radius: inherit; } /* Layer 3 — the label, always above both. */ .btn-label { position: relative; z-index: 2; } /* Hover — blob fades in and drifts. */ .btn:not([class*="bv-"]):hover { box-shadow: 0 14px 40px -8px var(--btn-glow, rgba(255, 74, 8, 0.5)); } .btn:not([class*="bv-"]):hover::before { opacity: 0.92; animation: btn-shape-drift 12s ease-in-out infinite; } /* Pressed — the blob expands to fill the whole button. Filter blur is reduced and border-radius locks back to the button's shape so the fill reads as "lit-up glass" rather than the diffuse cloud of the hover. */ .btn:not([class*="bv-"]):active::before { opacity: 1; width: 115%; height: 115%; border-radius: 4px; filter: blur(10px); animation: none; transform: translate(-50%, -50%); } /* Variants — each defines its own --btn-color (border + blob match) and --btn-glow (the outer drop shadow). Both are warm oranges so the primary/secondary pairing reads as a family. */ .btn-filled { --btn-color: var(--accent); /* #ff4a08 — saturated orange */ --btn-glow: rgba(255, 74, 8, 0.4); } .btn-outline { --btn-color: var(--accent-soft); /* #ff9966 — peachy orange */ --btn-glow: rgba(255, 153, 102, 0.28); } .btn-row { display: flex; gap: 20px; flex-wrap: wrap; } /* ===== Button style swap (driven by settings.js) ===== Picking a button style in settings.md applies the corresponding `.bv-NN` class from buttons.css to .btn-filled / .btn-outline. The production default rules above use `:not([class*="bv-"])` so they only apply when NO variant class is present — meaning the buttons.css variant takes over cleanly when a style is chosen. */ /* The drift animation morphs translate, scale, rotate, AND border-radius through irregular four-corner values so the blurred cloud continuously warps into different organic shapes — no two frames have the same silhouette. 12s for a viscous, slow-changing-liquid pace. */ @keyframes btn-shape-drift { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50%; } 14% { transform: translate(-28%, -65%) scale(1.15) rotate(50deg); border-radius: 38% 62% 65% 35% / 55% 40% 60% 45%; } 28% { transform: translate(-70%, -45%) scale(0.95) rotate(110deg); border-radius: 65% 35% 40% 60% / 40% 60% 55% 45%; } 42% { transform: translate(-32%, -55%) scale(1.1) rotate(170deg); border-radius: 55% 45% 30% 70% / 65% 50% 50% 35%; } 57% { transform: translate(-62%, -28%) scale(1.0) rotate(220deg); border-radius: 35% 65% 55% 45% / 45% 55% 45% 55%; } 71% { transform: translate(-48%, -75%) scale(1.2) rotate(280deg); border-radius: 60% 40% 45% 55% / 35% 60% 40% 65%; } 85% { transform: translate(-42%, -40%) scale(1.05) rotate(330deg); border-radius: 45% 55% 60% 40% / 50% 50% 60% 40%; } 100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); border-radius: 50% 50% 50% 50%; } } /* ===== Sections — full viewport ===== */ .section { min-height: 100vh; min-height: 100svh; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 8vh, 140px) clamp(24px, 4vw, 64px); position: relative; } /* ===== Hero ===== */ .hero { align-items: center; text-align: left; overflow: hidden; } .hero-decoration { position: absolute; top: 50%; left: 50%; width: min(140vh, 120vw, 1400px); height: min(140vh, 120vw, 1400px); max-width: none; transform: translate(-50%, -50%); transform-origin: center center; /* Two animations: an 80s spin that never stops, and a one-shot 800ms fade from 0 → resting opacity right after first paint. `backwards` fill keeps the `from` (opacity 0) in effect before the animation starts. The resting opacity is theme-aware via --hero-decoration-opacity — duplicated as a literal in the keyframe `to` because animation end-state can't read a custom property at runtime in all browsers. We also apply the var to the static `opacity` property so the light-theme value is in effect once the animation completes. */ opacity: var(--hero-decoration-opacity); pointer-events: none; z-index: 0; animation: spin-slow 80s linear infinite, hero-decoration-in .8s var(--ease-out) backwards; filter: drop-shadow(0 0 60px rgba(255, 74, 8, 0.1)); transition: opacity var(--dur-base) var(--ease-out); } @keyframes spin-slow { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes hero-decoration-in { from { opacity: 0; } to { opacity: var(--hero-decoration-opacity); } } .hero > .hero-inner { position: relative; z-index: 1; } .hero > .scroll-hint { z-index: 1; } .hero-inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; gap: clamp(24px, 3vw, 56px); align-items: flex-start; } .hero-icon { width: clamp(48px, 5vw, 80px); height: clamp(48px, 5vw, 80px); flex-shrink: 0; } .hero-icon img { width: 100%; height: 100%; animation: gentle-spin 24s linear infinite; } @keyframes gentle-spin { to { transform: rotate(360deg); } } .hero-content { display: flex; flex-direction: column; gap: var(--space-md); flex: 1; min-width: 0; } .hero-title { font-size: var(--size-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg); } .hero-title span { display: block; white-space: nowrap; } .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 4vw, 80px); flex-wrap: wrap; } .hero-sub { max-width: 420px; font-size: var(--size-body); font-weight: 400; color: var(--fg); line-height: 1.5; opacity: 0.85; } /* Scroll hint Custom fade-in (rather than [data-reveal]) so the translateX(-50%) centering isn't clobbered by data-reveal's translateY rule. Delayed 580ms so it lands at the end of the hero entrance cadence. */ .scroll-hint { position: absolute; bottom: 32px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; color: var(--fg); transform: translateX(-50%); animation: scroll-hint-in var(--dur-slow) var(--ease-out) var(--dur-slow) both; } @keyframes scroll-hint-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 0.5; transform: translateX(-50%) translateY(0); } } .scroll-hint-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--scroll-tick-track), transparent); position: relative; overflow: hidden; } .scroll-hint-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, var(--accent)); animation: scroll-tick 2.4s var(--ease-out) infinite; } @keyframes scroll-tick { 0% { transform: translateY(0); } 100% { transform: translateY(300%); } } /* ===== Eyebrow ===== */ .eyebrow { font-size: var(--size-eyebrow); font-weight: 400; color: var(--fg); letter-spacing: 0; opacity: 0.7; } .eyebrow-center { text-align: center; align-self: center; } /* ===== What we do + Trusted by (combined) ===== */ .what-trusted { align-items: center; justify-content: space-between; gap: var(--space-sm); } .what-block { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1 1 auto; min-height: 0; } .trusted-block { width: 100%; display: flex; flex-direction: column; gap: var(--space-xs); flex-shrink: 0; } .what { align-items: center; gap: var(--space-sm); } .what > .eyebrow, .what-block > .eyebrow { width: 100%; max-width: 1200px; } .what-stage { position: relative; width: 100%; max-width: 1200px; height: min(58vh, 640px); flex: 1 1 auto; overflow: hidden; border-radius: 4px; } .what-bg { position: absolute; width: clamp(720px, 70vw, 1100px); aspect-ratio: 710 / 946; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center center; opacity: 0.95; } .what-content { position: absolute; left: clamp(24px, 6%, 96px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: var(--space-sm); max-width: min(748px, 70%); z-index: 2; } .what-title { font-size: var(--size-title-sm); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); } .what-bottom { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; } .what-sub { max-width: 394px; font-size: var(--size-body); font-weight: 400; letter-spacing: -0.01em; line-height: 1.4; color: var(--fg); opacity: 0.85; } /* ===== Trusted by ===== */ .trusted { align-items: stretch; justify-content: center; gap: var(--space-md); } .trusted .eyebrow, .trusted-block .eyebrow { align-self: center; } .marquee { position: relative; width: 100%; height: clamp(72px, 10vh, 110px); overflow: hidden; /* Edge fade-out via CSS mask, not a colored gradient overlay. This was previously done with two absolutely-positioned `.marquee-fade-left/right` divs filled with `linear-gradient(var(--marquee-fade), transparent)` — but that bakes in a SOLID color (the page bg) at the edges. The site has ambient warm `bg-glow` blobs behind every section, so the baked-in bg color never matched the real pixels behind the fade rectangle — a faint colored band was always visible at the page edges, especially noticeable on theme-toggle or as the user scrolls past a glow. A mask cuts TRUE transparency into the marquee itself, so the ambient pixels show through perfectly regardless of theme, glow position, or backdrop. `--marquee-fade-width` controls how far inset the ramp starts. */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--marquee-fade-width), #000 calc(100% - var(--marquee-fade-width)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--marquee-fade-width), #000 calc(100% - var(--marquee-fade-width)), transparent 100% ); } .marquee-track { display: flex; /* No `gap` on the track itself — each group carries its own trailing gap via `padding-right`, so the keyframe can land on an exact `-33.333%` seam regardless of viewport width. `--marquee-speed` is settable via `trusted_by.speed` in settings.md (applied by `applyTrustedBy` as a `