/* Design tokens — dark mode is the default (:root); light mode overrides below via [data-theme="light"] on . Values from the Figma design system (Sections-Dark Mode / Sections-Light Mode). */ :root { --bg-canvas: #04220F; /* page background — same value as wordmark --dark */ --bg-surface: #2E4034; /* small UI chrome, e.g. the theme-toggle pill */ --bg-elevated: #102A1B; /* cards, modal, panels */ --bg-brand: #3DE83D; /* solid brand-green fills (chips, filled buttons) — constant across themes */ --text-primary: #EDF2EE; /* body text — off-white, never pure white */ --text-muted: #8FA396; /* labels, captions, metadata — constant across themes */ --text-accent: #3DE83D; /* colored text/links — shifts per theme for contrast */ --border-rule: #1E3A28; /* dividers, hairlines */ --border-button: #3DE83D; /* pill button outlines — shifts per theme, matches --text-accent */ --bg-sunken: #02190A; /* recessed panel fill (darker than canvas), e.g. the scan-banner card */ --border-bright: #438259; /* border on sunken panels — shifts per theme */ --accent-ink: #0B1F14; /* text sitting on brand-green blocks — constant across themes */ /* Wordmark logo palette — fixed, independent of page theme (the green logo block itself doesn't change between dark/light per the design) */ --lime: #3DE83D; --dark: #04220F; --white: #EDF2EE; --mid: #0E4A22; /* transient flicker state only, never a resting state */ /* Type scale — Figma "Sections" variable collection (Size/*, Line Height/*). EN sizes only; ja.css layers JP-specific overrides (line-height, tracking) on top of these the same way it already does for .emphasis/.stat-number. */ --font-size-eyebrow: 13px; /* Heading/EN/H2 — section-title pill, journal badge */ --font-size-label-small: 11px; /* Size/label-small — added w/ Tools page: CategoryTag, Verdict eyebrow */ --font-size-label-medium:12px; /* Size/label-medium — added w/ Tools page: StatusBadge text */ --font-size-body-md: 16px; /* Size/body-medium — default body copy */ --font-size-body-lg: 20px; /* Size/body-large — CTA buttons, intro paragraphs */ --font-size-heading-3: 24px; /* Size/heading-3 — added w/ Tools page: ToolCard title */ --font-size-heading-2: 28px; /* Size/heading-2 — card/FAQ headings */ --font-size-heading-1: 36px; /* Size/heading-1 — section display headings */ --font-size-display: 72px; /* added w/ Tools page: "AI TOOLS" hero heading (unbound in Figma, no Size/* token) */ --line-height-eyebrow: 0.86; --line-height-label: 20px; /* Line Height/label-height — added w/ Tools page: StatusBadge text */ --line-height-body: 24px; /* Line Height/body-height */ --line-height-heading: 28px; /* Line Height/heading-height */ --line-height-heading-large: 36px; /* Line Height/heading-height-large — reused across journal-card-title (232:4846) and stat-bar-value (231:3476), confirmed identically in both Figma files */ --tracking-eyebrow: 0.52px; --tracking-section-title: 1px; /* plain uppercase field labels with no pill background — MY ROLE, PUBLISHED, etc. Distinct from --tracking-eyebrow (0.52px), which is reserved for pill/badge components (.section-label, .tool-card-tag). Confirmed independently in two Figma files: project template (144:1183) and article template (231:3476). */ --weight-regular: 400; --weight-medium: 500; /* added w/ Tools page: StatusBadge text (Label/EN/Small) */ --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* Spacing scale — Figma "layout/gap-*" and "padding/container-*" */ --space-xs: 4px; --space-sm: 8px; --space-6: 6px; /* layout/gap-xs — added w/ Tools page: StatusBadge dot-to-label gap, doesn't fit the xs/sm scale */ --space-md: 16px; --space-12: 12px; /* padding/container-xs — added w/ Tools page: badge/tag horizontal padding */ --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-xxxl: 60px; --space-huge: 96px; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; } [data-theme="light"] { --bg-canvas: #F7FFF7; --bg-surface: #EBF7EB; --bg-elevated: #EBF7EB; /* no separate modal spec in the light-mode file; reusing --bg-surface's tone */ --text-primary: #000000; --text-accent: #159845; --border-rule: #CFE5D7; --border-button: #159845; --bg-sunken: #EAFFEA; --border-bright: #A9C7B4; } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 65px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-optical-sizing: auto; letter-spacing: 0; line-height: 1.55; color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 900-weight display type — Inter Black needs auto optical sizing and looser tracking than Instrument 600 to avoid muddying at heavy weight */ .intro-heading, .section-label, .project-name, .connect-heading, h1, h2, h3 { font-weight: 900; font-optical-sizing: auto; font-variation-settings: 'opsz' 32; font-feature-settings: "kern" 1, "cv11" 1; text-rendering: optimizeLegibility; } .emphasis { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 1; letter-spacing: -0.03em; font-size: 145px; line-height: 0; color: var(--text-accent); display: inline-block; position: relative; top: 0; vertical-align: baseline; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } p { margin: 0; } /* Nav Header */ .nav-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 66px; padding: 0 15px; background: rgba(11, 31, 20, 0.85); background: rgb(from var(--bg-canvas) r g b / 85%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-logotype { flex: 0 0 auto; display: flex; align-items: center; height: 100%; padding: 12px 20px 10px 0; border-bottom: 1px solid var(--border-rule); } .nav-logo-text { font-family: 'Noto Sans JP', sans-serif; font-size: var(--font-size-body-lg); font-weight: 900; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: center; } .nav-logo-gif { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; overflow: hidden; /* Trims 3px further in from the circle above, past the gif's own edge. */ clip-path: circle(calc(50% - 3px)); } .nav-logo-gif--dark { display: block; } .nav-logo-gif--light { display: none; } [data-theme="light"] .nav-logo-gif--dark { display: none; } [data-theme="light"] .nav-logo-gif--light { display: block; } /* Accent-green icon SVGs — same dark/light swap idea as the nav logo just above. Flat external assets (not inline, so currentColor can't reach them); light mode uses a real darker-green (#159845, matching --text-accent's light-mode value) asset rather than the default-green one going low-contrast against the light canvas. Promoted here from design-foundation/design-system's page-local copies once a second page (the homepage) needed the same swap. */ .svg-icon--light { display: none; } [data-theme="light"] .svg-icon--dark { display: none; } [data-theme="light"] .svg-icon--light { display: block; } .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 40px; height: 100%; padding: 12px 30px 10px 20px; border-bottom: 1px solid var(--border-rule); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { font-size: var(--font-size-body-md); font-weight: 400; letter-spacing: -0.02em; line-height: 1; padding-bottom: 4px; flex-shrink: 0; transition: color 0.2s; } .nav-link:hover { color: var(--text-accent); } .nav-lang { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: var(--font-size-body-md); font-weight: var(--weight-black); line-height: 1; } .nav-lang-active { color: var(--text-primary); } .nav-lang-divider { color: var(--text-muted); } .nav-lang-inactive { color: var(--text-muted); transition: color 0.2s; } .nav-lang-inactive:hover { color: var(--text-accent); } .theme-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 8px; border: none; border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; transition: background 0.2s; } .theme-toggle:hover { background: var(--border-rule); } .theme-toggle-icon { width: 20px; height: 20px; } .theme-toggle-icon--sun { display: none; } [data-theme="light"] .theme-toggle-icon--sun { display: block; } [data-theme="light"] .theme-toggle-icon--moon { display: none; } .nav-hamburger { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 55px; height: 32px; padding: 0; border: none; border-radius: 3px; /* sits exactly between --radius-sm (2px) and --radius-md (4px), no Figma source to confirm which is correct — left as a literal rather than guessed */ background: var(--bg-brand); color: var(--accent-ink); cursor: pointer; margin-left: auto; } /* Mobile Menu Overlay — hidden by default; only openable below the 768px breakpoint where the nav row switches to the hamburger trigger. The breakpoint-gated .open rule also force-closes it if the viewport is resized past 768px while it's open. z-index sits above the Ishmael chat dock (--chat-z-dock: 410 in raft-chat.css) — a full-screen nav takeover should cover the persistent floating chat bar, not sit under it; this became visible once the "Book a call" button pushed content low enough to reach the dock's footprint. */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 420; background: var(--bg-canvas); padding: 20px; overflow-y: auto; } .mobile-menu-topbar { display: flex; align-items: center; justify-content: space-between; } .mobile-menu-logo { font-family: 'Noto Sans JP', sans-serif; font-size: var(--font-size-body-lg); font-weight: var(--weight-black); letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); } .mobile-menu-controls { display: flex; align-items: center; gap: 24px; } .mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: none; color: var(--text-primary); cursor: pointer; } .mobile-menu-links { display: flex; flex-direction: column; margin-top: 32px; } .mobile-menu-link { font-size: var(--font-size-body-lg); font-weight: var(--weight-regular); letter-spacing: -0.02em; line-height: var(--line-height-heading); color: var(--text-primary); padding: 11px 0; border-bottom: 1px solid var(--border-rule); transition: color 0.2s; } .mobile-menu-link:hover { color: var(--text-accent); } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-logotype { border-bottom: none; } .nav-header { border-bottom: 1px solid var(--border-rule); } .mobile-menu-overlay.open { display: flex; flex-direction: column; } } /* Intro Section */ .intro-section { padding: 45px 15px 0; } /* Video background — homepage only (Figma node 649:4819). Video + scrim sit behind .hero-lockup via z-index, absolutely positioned to the section so they extend the full hero height including the client-logo row. Nav stays outside this section, on its own solid background, not overlaid on the video — that's a bigger sitewide change than "update the hero area" asked for. */ .intro-section--video { position: relative; padding-left: 55px; padding-bottom: 130px; /* not overflow:hidden — the video/scrim intentionally extend 66px above this section's own top edge (see below) to show through the sticky nav's translucent background, matching the Figma reference where the video is visible behind the header. */ } /* Desktop hero fills the viewport below the sticky nav (Figma node 649:4819): .hero-lockup (logo/headline/subhead/scroll-CTA) anchors to the top, .client-logos anchors to the bottom, with any extra vertical space on tall viewports distributed as one gap between them via space-between — rather than a fixed margin-top on .client-logos, which would either leave dead space or overflow depending on viewport height. Mobile keeps natural content-height stacking (no min-height), since a forced full-screen hero reads as awkward empty space on a phone. */ @media (min-width: 1025px) { .intro-section--video { min-height: calc(100vh - 66px); display: flex; flex-direction: column; justify-content: space-between; } /* space-between (above) bottom-anchors .client-logos on tall viewports, which makes its own margin-top a no-op there (it only matters as a floor on short viewports — see .client-logos itself). transform moves it regardless of which mechanism is actually positioning it. -50px = the last two requested nudges (-20, -30). */ .client-logos { transform: translateY(-70px); } } /* Below ~870px of viewport HEIGHT (old MacBook Air screens, 1440x900 scaled or similar), .intro-section--video's own min-height leaves little to no natural space-between gap — the -70px transform above was a blind shift with no regard for available room, so on these short screens it pushed .client-logos up underneath .hero-links. Canceling it here lets normal flow (and .client-logos' own margin-top floor) keep it below the CTAs instead. */ @media (min-width: 1025px) and (max-height: 869px) { .client-logos { transform: none; } } .intro-bg-video, .intro-bg-scrim { position: absolute; top: -66px; /* .nav-header's rendered height, so the layer reaches y:0 */ left: 0; right: 0; bottom: 0; } .intro-bg-video { width: 100%; height: calc(100% + 66px); object-fit: cover; z-index: 0; } .intro-bg-scrim { background: transparent; z-index: 1; } /* Dark/light video swap — same pattern as .nav-logo-gif--dark/--light. */ .intro-bg-video--dark { display: block; } .intro-bg-video--light { display: none; } [data-theme="light"] .intro-bg-video--dark { display: none; } [data-theme="light"] .intro-bg-video--light { display: block; } @media (prefers-reduced-motion: reduce) { .intro-bg-video { display: none; } } .hero-lockup { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 66px; row-gap: 25px; } .logo-block { grid-column: 1; grid-row: 1; flex-shrink: 0; width: 240px; height: 240px; background: var(--lime); overflow: hidden; margin-top: 100px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; } .logo-tagline { grid-column: 1; grid-row: 2; align-self: start; font-weight: var(--weight-black); font-size: var(--font-size-body-md); letter-spacing: -0.02em; color: var(--text-accent); } .wordmark { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 4px; } .wordmark-line { display: flex; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 900; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.85; white-space: nowrap; } .wordmark-line--raft { letter-spacing: -0.06em; clip-path: inset(0 100% 0 0); transition: clip-path 0.33s cubic-bezier(0.65, 0, 0.35, 1); } .wordmark-line--studio { letter-spacing: -0.04em; clip-path: inset(0 0 0 100%); transition: clip-path 0.33s cubic-bezier(0.65, 0, 0.35, 1) 0.12s; } .wordmark-line--raft.revealed, .wordmark-line--studio.revealed { clip-path: inset(0 0 0 0); } .letter { color: var(--tc); } @media (prefers-reduced-motion: reduce) { .wordmark-line--raft, .wordmark-line--studio { transition: none; clip-path: inset(0 0 0 0); } } .intro-heading { grid-column: 2; grid-row: 1; min-width: 0; margin-top: 50px; } /* EN homepage hero (Figma node 649:4819): headline + subhead are grouped in their own flex stack, spanning what would be rows 1-2 in column 2, so their 32px gap is a real flex gap between the two text blocks — independent of .logo-block's 300px height, which otherwise forces .intro-heading's grid cell (and therefore row 2's start position) to be much taller than a single short headline actually needs. ja/index.html doesn't use this wrapper, so its .intro-heading/.hero-tags keep the original grid-row placement below untouched. */ .hero-copy { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 100px; /* matches .logo-block's own margin-top, so the headline's top edge lines up with the logo's top edge instead of vertically centering within the row (which drifted once the new scroll-down CTA made this column taller). */ display: flex; flex-direction: column; gap: 20px; min-width: 0; } .hero-copy .intro-heading { grid-column: auto; grid-row: auto; margin-top: -5px; order: 0; /* .headline-line's own clip-path (reveal-on-load wipe) makes it a stacking context, which traps the AI-native definition panel's z-index inside it — without this, the later .hero-tags--subhead flex sibling (also a clip-path stacking context) paints on top of the panel regardless. z-index works here with no position needed: .intro-heading is a flex item of .hero-copy. */ z-index: 2; } .hero-copy .hero-tags { grid-column: auto; grid-row: auto; align-self: auto; order: 0; } .hero-tags { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-wrap: nowrap; gap: 20px; clip-path: inset(-20% 100% -20% 0); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .hero-tags.revealed { clip-path: inset(-20% 0 -20% 0); } .hero-tag { font-size: var(--font-size-body-md); line-height: 0.95; color: var(--text-primary); } .hero-tag-arrow { color: var(--text-accent); } /* New homepage hero subhead (Figma node 642:4754) — a single sentence, not a row of tags, so it needs its own inner treatment. Reuses the .hero-tags wrapper only for its existing clip-path reveal mechanism (same JS hook); ja/index.html keeps the original plain .hero-tags (flex row of four tag items) untouched via this modifier scoping. */ .hero-tags--subhead { display: block; max-width: 800px; } .hero-subhead { font-size: var(--font-size-heading-2); font-weight: var(--weight-regular); letter-spacing: -1px; line-height: 1.4; color: var(--text-primary); } /* Hero scroll-down CTA (Figma node 649:4819) — anchors to the Approach section right below. Reuses .scan-cta's pill/outline treatment; the arrow is the shared .scan-cta-arrow span, rotated 90deg to point down. */ .hero-scroll-cta { align-self: flex-start; margin-top: 38px; opacity: 0; transition: opacity 0.6s ease; } .hero-scroll-cta.revealed { opacity: 1; } .hero-scroll-arrow { display: inline-block; transform: rotate(90deg); } .client-logos { /* No longer a .hero-lockup grid item — it's a sibling of .hero-lockup now, so .intro-section--video's flex space-between (desktop) handles the gap above it; this margin-top is the floor for that gap on short viewports and the actual gap on mobile, where space-between isn't applied (see .intro-section--video's 1025px breakpoint). 30px (not the original 60px) to offset .hero-links' own 68px margin-top, which both languages' hero now shares — see .hero-links above. Nudged tighter twice more on top of that (-20px, then -30px). */ margin-top: -20px; width: 100%; overflow: hidden; opacity: 0; transition: opacity 1s ease; } .client-logos.revealed { opacity: 1; } .client-logos-track { display: flex; gap: 40px; width: max-content; animation: client-logos-scroll 24s linear infinite; --marquee-distance: 33.333%; /* fallback for one of 3 sets, before JS measures the exact seam */ } .client-logo { flex-shrink: 0; width: 125px; height: 35px; object-fit: contain; } /* Logo assets are solid white on transparent — built for the dark theme. Light mode has no separate asset set, so force them black in place (brightness(0) maps any opaque pixel to black, alpha untouched). */ [data-theme="light"] .client-logo { filter: brightness(0) saturate(100%); } @keyframes client-logos-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance))); } } @media (prefers-reduced-motion: reduce) { .client-logos-track { animation: none; } } .headline-line { display: block; font-size: clamp(40px, 6vw, 100px); font-weight: 800; line-height: 0.95; letter-spacing: -0.5px; text-transform: uppercase; color: var(--text-primary); clip-path: inset(-100% 100% -100% 0); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } /* Homepage hero "momentum" (Figma node 649:4819 / 658:4966) — animated green gradient sweeping left to right on a seamless loop. Figma's static version is a plain 2-stop light->dark gradient spanning the FULL word width. To keep that full-width span at every frame while still looping, the stop sequence is a symmetric light->dark->light wave repeated twice (5 stops over a 400%-wide background — each half-wave = 1 full word width, vs. a 200%-wide background where each half-wave is only half the word). Shifting background-position by exactly one wave-period lands on a color-for-color identical frame, so the loop has no visible seam. */ .headline-momentum { background-image: linear-gradient(90deg, #3FE83D, #159845, #3FE83D, #159845, #3FE83D); background-size: 400% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: headline-momentum-gradient 2.67s linear infinite; } @keyframes headline-momentum-gradient { from { background-position: 0% 0%; } to { background-position: -66.6667% 0%; } } @media (prefers-reduced-motion: reduce) { .headline-momentum { animation: none; } } .headline-line.revealed { clip-path: inset(-100% 0 -100% 0); } /* EN homepage hero v3 (Figma node 740:2229) — single flowing sentence in Inter Regular, not .headline-line's default uppercase/800-weight treatment; "AI-native" highlighted as a plain solid accent color, not a gradient. EN-only: ja/index.html keeps its original uppercase .headline-line + .headline-momentum treatment untouched. */ .headline-line--single { font-weight: var(--weight-regular); font-size: clamp(28px, 4.9vw, 70px); line-height: 1.03; letter-spacing: -2px; text-transform: none; } .headline-highlight { color: var(--text-accent); } /* AI-native asterisk + hover definition panel — sits right after the headline highlight, spins continuously, and reveals a plain-language definition on hover/focus. tabindex on the trigger (not the img) so keyboard users can reach it; :focus-within keeps the panel open while it holds focus. */ .ai-native-trigger { position: relative; top: -18px; display: inline-block; margin-left: 4px; margin-right: 6px; vertical-align: super; cursor: help; } @media (max-width: 768px) { html[lang="en"] .ai-native-trigger { top: -11px; margin-left: 3px; } } .ai-native-asterisk { display: block; width: 22px; height: 22px; animation: ai-native-spin 6s linear infinite; } @keyframes ai-native-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ai-native-asterisk { animation: none; } } .ai-native-panel { /* Centered under the trigger (not left:0) — .headline-line's own clip-path (used for its reveal-on-load wipe) stays clipped exactly at the line's horizontal box edges even once "revealed", so a panel anchored to the trigger's left edge risked being cut off on the right for a long headline. Centering keeps it inside that box. */ position: absolute; top: calc(100% + 14px); left: 50%; width: 320px; max-width: min(80vw, 320px); padding: 20px; background: rgb(69, 95, 78); border: 1px solid var(--border-rule); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--text-primary); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 10; pointer-events: none; } .ai-native-trigger:hover .ai-native-panel, .ai-native-trigger:focus .ai-native-panel, .ai-native-trigger:focus-within .ai-native-panel, .ai-native-trigger.is-open .ai-native-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } /* Mobile: center in the viewport instead of under the trigger — the trigger can sit anywhere in the flowing headline text, so an under-trigger position isn't reliably centered (or even fully on-screen) at phone widths. */ @media (max-width: 768px) { .ai-native-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ai-native-trigger:hover .ai-native-panel, .ai-native-trigger:focus .ai-native-panel, .ai-native-trigger:focus-within .ai-native-panel, .ai-native-trigger.is-open .ai-native-panel { transform: translate(-50%, -50%); } } /* Hero text-link stack (Figma node 740:2201) — replaces the old single .hero-scroll-cta pill button on the EN homepage only; ja/index.html still uses .hero-scroll-cta/.hero-scroll-arrow as-is, so those classes stay untouched above. Reveal timing/mechanism (opacity fade via JS adding .revealed) mirrors .hero-scroll-cta's own. Plain text, no arrow glyph — a deliberate change from the previous arrow+label row. */ .hero-links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 48px; opacity: 0; transition: opacity 0.6s ease; } .hero-links.revealed { opacity: 1; } .hero-link { font-size: var(--font-size-heading-2); font-weight: var(--weight-regular); letter-spacing: -0.56px; line-height: var(--line-height-heading); color: var(--text-accent); transition: opacity 0.2s; } .hero-link:hover { opacity: 0.75; } /* EN homepage headline re-break for mobile only (Figma's 2-line split is "We're here to" / "build momentum.", tuned for desktop width). At phone widths "We're here to" wraps mid-line, orphaning "to" on its own row away from "build" below it. Rendering both wordings and toggling with display keeps "to build" together below 768px without touching the desktop split or the JA headline (which has its own markup). */ .headline-variant--mobile { display: none; } /* JA hero headline (Figma node 655:4858) — Noto Sans JP kanji sit taller in their em-box than Latin glyphs, so the EN line-height (0.95, tuned for Inter) clips JP strokes; Figma's own JA spec uses line-height ~1.12 (101px/90px) instead. Only 400/500/900 are loaded for Noto Sans JP (no 700), so 900 stands in for Figma's Bold. */ html[lang="ja"] .headline-line { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; } /* JA homepage hero v2 (Figma node 740:2314) — matches the EN single-sentence treatment (.headline-line--single/.hero-subhead) rather than the older uppercase/900-weight styling above. Sized smaller than EN's Latin values since Noto Sans JP glyphs render visually larger at the same px; weight stays Medium per the JA spec (EN uses Regular). */ html[lang="ja"] .headline-line--single { font-family: 'Noto Sans JP', sans-serif; font-weight: var(--weight-medium); font-size: clamp(26px, 3.4vw, 52px); line-height: 1.167; letter-spacing: -2px; } html[lang="ja"] .hero-subhead { font-family: 'Noto Sans JP', sans-serif; font-size: 24px; letter-spacing: normal; line-height: 1.7; } /* Wide enough that the text only wraps at the manual
after 「ために、」, not earlier — EN's 800px cap (above) is too narrow for this text at 24px Noto Sans JP. */ html[lang="ja"] .hero-tags--subhead { max-width: 900px; } html[lang="ja"] .hero-link { font-family: 'Noto Sans JP', sans-serif; font-size: 24px; } html[lang="ja"] .ai-native-panel { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.8; } /* JA mobile pass: headline +10% (the desktop clamp's fluid mid-value sits below its own 26px floor at phone widths anyway, so this is effectively a floor bump: 26/52 -> 29/57), subhead and CTA -20% (24px -> 19px), keeping the CTA matched to the subhead per the desktop rule above. */ @media (max-width: 768px) { html[lang="ja"] .headline-line--single { font-size: clamp(29px, 3.74vw, 57px); } html[lang="ja"] .hero-subhead { font-size: 19px; } html[lang="ja"] .hero-link { font-size: 19px; } /* Manual breaks in the JA headline/subhead (after "ブランディング・" and "ために、") are tuned for the wide desktop column — on mobile's narrow width they'd force an extra-short first line on top of natural wrapping, so drop them and let the text reflow on its own. */ .hero-break-desktop { display: none; } } @media (prefers-reduced-motion: reduce) { .headline-line { transition: none; clip-path: inset(-100% 0 -100% 0); } .hero-tags { transition: none; clip-path: inset(-20% 0 -20% 0); } } /* Thesis Section */ .approach-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .approach-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .approach-text { display: flex; flex-direction: column; gap: var(--space-lg); } .approach-heading { font-size: var(--font-size-heading-2); line-height: 0.95; color: var(--text-primary); max-width: 368px; } .approach-body { font-size: var(--font-size-body-md); line-height: 1.4; color: var(--text-primary); max-width: 615px; } .approach-badge { position: relative; flex-shrink: 0; width: 250px; height: 250px; background: var(--lime); overflow: hidden; border-radius: var(--radius-sm); } .approach-laptop { position: absolute; inset: 51.025px 2.525px 50.1px 0; width: auto; height: auto; } .approach-badge-viewport { position: absolute; left: 30.61px; top: 61.22px; width: 186.224px; height: 109.694px; overflow: hidden; } .approach-marquee { position: absolute; left: 191.36px; top: 17.858px; width: 169.894px; height: 76.534px; animation: approach-marquee-scroll 3s linear infinite; } .approach-marquee-item { position: absolute; top: 0; height: 100%; width: auto; } .approach-marquee-item--1 { left: 0; } .approach-marquee-item--2 { left: 53.51px; } .approach-marquee-item--3 { left: 107.11px; } .approach-girl2 { position: absolute; left: 191.36px; top: 11.266px; width: auto; height: 91.01px; animation: approach-girl2-scroll 3s linear infinite; } .approach-girl { position: absolute; left: 48.47px; top: 11.266px; width: auto; height: 91.01px; animation: approach-girl-scroll 3s linear infinite; } .approach-oddball { position: absolute; left: 193.90px; top: 7.657px; width: auto; height: 94.38px; animation: approach-oddball-scroll 3s linear infinite; } @keyframes approach-marquee-scroll { 0% { translate: 0px 0px; } 15.93% { animation-timing-function: ease-out; translate: -5.102px 0px; } 32.14% { translate: -183.673px 0px; } 47.91% { translate: -181.122px 0px; } 64.2% { translate: -362.245px 0px; } 100% { translate: -362.245px 0px; } } @keyframes approach-girl2-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 83.277% { animation-timing-function: ease-out; translate: -2.551px 0px; } 100% { translate: -142.857px 0px; } } @keyframes approach-girl-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 15.97% { animation-timing-function: ease-out; translate: 2.553px 0px; } 32.14% { translate: -147.959px 0px; } 100% { translate: -147.959px 0px; } } @keyframes approach-oddball-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 47.92% { animation-timing-function: ease-out; translate: -7.653px 0px; } 64.2% { animation-timing-function: ease-out; translate: -130.102px 0px; } 83.277% { animation-timing-function: ease-out; translate: -127.551px 0px; } 100% { translate: -257.653px 0px; } } @media (prefers-reduced-motion: reduce) { .approach-marquee, .approach-girl2, .approach-girl, .approach-oddball { animation: none; } } /* Services Section */ .expertise-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .expertise-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .expertise-cards { display: flex; flex-direction: column; gap: 40px; } .expertise-row { display: flex; gap: 40px; } .service-card { display: flex; flex-direction: column; gap: 13px; width: 480px; } .service-title { font-size: var(--font-size-heading-2); line-height: 0.95; color: var(--text-primary); } .service-body { font-size: var(--font-size-body-md); line-height: 1.4; color: var(--text-primary); } .service-tag { font-size: var(--font-size-body-md); line-height: 1.4; font-weight: var(--weight-semibold); color: var(--text-accent); } .expertise-badge { position: relative; flex-shrink: 0; width: 250px; height: 250px; background: var(--lime); overflow: hidden; border-radius: var(--radius-sm); } .expertise-leg { position: absolute; width: auto; height: auto; } .expertise-leg--1 { left: 67.45px; top: 107.025px; } .expertise-leg--2 { left: 0.225px; top: 107.025px; } .expertise-leg--3 { left: 136.1px; top: 107.025px; } .expertise-diamond-wrap { position: absolute; left: 93.95px; top: 45.925px; width: 54.975px; height: 54.95px; display: flex; align-items: center; justify-content: center; animation: expertise-diamond-move 2.5s linear infinite, expertise-diamond-scale 2.5s linear infinite; } .expertise-diamond { width: 38.8668px; height: 38.8619px; transform: rotate(-45deg); } .expertise-diamond img { width: 100%; height: 100%; display: block; } .expertise-triangle { position: absolute; left: 160.9px; top: 54.95px; width: 61.68px; height: 46.17px; animation: expertise-triangle-move 2.5s linear infinite, expertise-triangle-scale 2.5s linear infinite; } .expertise-triangle img { width: 100%; height: 100%; display: block; } .expertise-circle { position: absolute; left: 31.175px; top: 50.4px; width: 46.08px; height: 46.08px; animation: expertise-circle-move 2.5s linear infinite, expertise-circle-scale 2.5s linear infinite; } .expertise-circle img { width: 100%; height: 100%; display: block; } @keyframes expertise-diamond-move { 0% { translate: 0px -96.939px; } 4% { translate: 0px -119.527px; } 8% { translate: 0px -142.114px; } 12% { translate: 0px -164.701px; } 16% { translate: 0px -187.289px; } 20% { translate: 2.891px -97.487px; } 24% { translate: 1.822px -40.872px; } 28% { translate: 1.096px -19.843px; } 32% { translate: -12.255px 9.482px; } 36% { translate: -8.718px -31.237px; } 40% { translate: -0.329px -88.154px; } 44% { translate: 2.941px -65.008px; } 48% { translate: -2.085px -18.112px; } 52% { translate: 0.739px -21.778px; } 56% { translate: 1.469px -24.28px; } 60% { translate: -0.197px 0.371px; } 64% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes expertise-diamond-scale { 0% { scale: 1 1; } 19.743% { animation-timing-function: ease-out; scale: 1 1; } 27.282% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 32.576% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.818 0.55; } 41.46% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.8 1.25; } 49.357% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.25 0.8; } 54.786% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.909 1.1; } 58.735% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.064 0.94; } 62.19% { scale: 1 1; } 100% { scale: 1 1; } } @keyframes expertise-triangle-move { 0% { translate: 0px -100.865px; } 31.694% { animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); translate: 0px -100.865px; } 35.558% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 5.771px; } 40.389% { animation-timing-function: cubic-bezier(0, 0, 0.4, 1); translate: 0px -87.256px; } 47.152% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -139.656px; } 51.982% { animation-timing-function: cubic-bezier(0.7, 0, 1, 0.7); translate: 0px -69.251px; } 55.847% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 9.233px; } 61.644% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -79.639px; } 67.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 5.078px; } 71.788% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -29.547px; } 75.652% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); translate: 0px 2.308px; } 80% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes expertise-triangle-scale { 0% { scale: 1 1; } 31.694% { animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); scale: 1 1; } 35.558% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.333 0.75; } 40.389% { animation-timing-function: cubic-bezier(0, 0, 0.4, 1); scale: 0.847 1.18; } 47.152% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.952 1.05; } 51.982% { animation-timing-function: cubic-bezier(0.7, 0, 1, 0.7); scale: 1 1; } 55.847% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.667 0.6; } 61.644% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.87 1.15; } 67.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.282 0.78; } 71.788% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 75.652% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.111 0.9; } 80% { scale: 1 1; } 100% { scale: 1 1; } } @keyframes expertise-circle-move { 0% { translate: 0px -184.332px; } 7.956% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: -2.476px -100.223px; } 22.4% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: -18.852px 20.737px; } 32.48% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 3.515px -109.678px; } 41.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: -5.76px 9.217px; } 48.16% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 1.707px -40.553px; } 52.08% { animation-timing-function: ease-out; translate: -2.004px 3.687px; } 56% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes expertise-circle-scale { 0% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 1 1; } 22.4% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.818 0.55; } 32.48% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.847 1.18; } 41.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.25 0.8; } 48.16% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 52.08% { animation-timing-function: ease-out; scale: 1.087 0.92; } 56% { scale: 1 1; } 100% { scale: 1 1; } } @media (prefers-reduced-motion: reduce) { .expertise-diamond-wrap, .expertise-triangle, .expertise-circle { animation: none; } } /* AI Systems Panel */ .ai-systems-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } /* AI Systems Panel only (EN "Engage" / JA equivalent): .section-label's shared 133px margin-bottom is 40px tighter here than the rest of the site's sections. */ .ai-systems-section > .section-label { margin-bottom: 93px; } .ai-systems-content { display: flex; gap: var(--space-xxl); align-items: flex-start; margin-top: var(--space-xxl); } .ai-systems-text { display: flex; flex-direction: column; gap: var(--space-xl); width: 483px; flex-shrink: 0; } .ai-systems-heading { font-size: var(--font-size-heading-2); line-height: 1.3; font-weight: var(--weight-regular); color: var(--text-primary); margin: 0; } .ai-systems-body { font-size: var(--font-size-body-md); line-height: 1.5; color: var(--text-primary); margin: 0; } .ai-systems-content .scan-cta { align-self: flex-start; } .ai-systems-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-rule); flex: 1; } /* Homepage's AI Systems panel split into two offerings (Foundation Design Sprint + AI-ready design systems) side by side, replacing the second .ai-systems-text's fixed 483px width (meant for pairing with the 4-column .ai-systems-grid, no longer used here) with an even flexible split. Scoped to this modifier so ja/index.html's unmodified single-text + grid layout keeps the original fixed width. */ .ai-systems-content--split .ai-systems-text { width: auto; flex: 1; } .ai-systems-item { padding: 36px 28px; border-right: 1px solid var(--border-rule); display: flex; flex-direction: column; gap: 12px; } .ai-systems-item:last-child { border-right: none; } .ai-systems-item-title { font-size: var(--font-size-body-md); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; } .ai-systems-item-body { font-size: var(--font-size-label-medium); color: var(--text-primary); line-height: 1.4; margin: 0; } /* Work Section */ .work-section { padding: 20px 15px 50px; display: flex; flex-direction: column; gap: 10px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .section-label { display: inline-block; align-self: flex-start; font-size: var(--font-size-eyebrow); letter-spacing: var(--tracking-eyebrow); line-height: var(--line-height-eyebrow); text-transform: uppercase; background: var(--bg-brand); color: var(--accent-ink); padding: 5px 20px; border-radius: var(--radius-sm); margin-bottom: 133px; } .work-section-footer { display: flex; justify-content: center; margin-top: 40px; } .view-work-cta { font-size: var(--font-size-body-lg); text-decoration: none; } /* Reel */ .reel-section { padding: 120px 60px 60px 60px; max-width: 1920px; position: relative; } /* Pulled up 60px past the section's own 120px top padding (180px total) so the video itself visually overlaps the hero section above it — .reel-section is later in DOM order than the hero, so it paints on top wherever they overlap, with no z-index needed. 60px left/right section padding (above) gives the video an even gap on both sides — replaces the old JS that stretched it to align with the first Project tile's left edge, which is no longer used. */ .reel-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: -250px; border-radius: 24px; overflow: hidden; border: 1px solid var(--lime); margin-bottom: 31px; /* Fades in once the hero text/CTAs finish their own reveal (see the revealHeadline() JS, which adds .revealed at the same moment as .hero-links/.client-logos), rather than appearing immediately with the rest of the page. */ opacity: 0; transition: opacity 0.8s ease; } .reel-video.revealed { opacity: 1; } /* Mobile: the -250px desktop overlap (tuned for the tall desktop hero) would swallow the whole mobile hero, which is much shorter — so drop it back to normal flow. Side padding matches raft-chat's own mobile gutter (--chat-gutter, raft-chat.css) so the video reads the same width as the chat box below it, instead of the wider desktop-tuned 60px inset. */ @media (max-width: 768px) { .reel-section { padding-top: 60px; padding-left: 15px; padding-right: 15px; } .reel-video { margin-top: 31px; } } /* Short desktop screens (old MacBook Airs etc., see the matching .client-logos fix above) — 30px less overlap than the default -250px, so the video doesn't eat as far into the shorter hero. */ @media (min-width: 1025px) and (max-height: 869px) { .reel-video { margin-top: -220px; } } .reel-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Project */ .project { display: flex; flex-direction: column; gap: 20px; padding: 0 15px 50px; max-width: 1920px; } .project-images { margin-right: -15px; overflow: visible; } .image-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-right: 15px; cursor: grab; scrollbar-width: none; } .image-grid::-webkit-scrollbar { display: none; } .image-grid.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .image-grid img { flex: 0 0 calc(42% - 5px); width: calc(42% - 5px); object-fit: cover; aspect-ratio: 1; border-radius: var(--radius-md); border: 1px solid var(--border-rule); user-select: none; -webkit-user-drag: none; } .project-info { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--font-size-body-md); letter-spacing: -0.48px; } .project-title { display: flex; gap: var(--space-md); font-weight: var(--weight-semibold); font-size: 24px; width: 682px; line-height: 1; } .project-label { color: var(--text-accent); flex-shrink: 0; } .project-names { display: flex; flex-direction: column; gap: 4px; width: 572px; } .project-name { color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.0; } .project-subtitle { color: var(--text-muted); font-weight: 500; } .project-body { display: flex; flex-direction: column; gap: 30px; max-width: 360px; width: 316px; line-height: 1.1; } /* Text Link */ .text-link { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: var(--font-size-body-lg); font-weight: 500; transition: color 0.2s; } .text-link:hover { color: var(--text-primary); } .text-link .arrow { color: var(--text-accent); } .text-link-large { font-size: var(--font-size-body-lg); letter-spacing: -0.6px; } /* Stats Section */ .stats-section { padding: 0 15px 50px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .stats-section .section-label { margin-top: 20px; margin-bottom: 133px; } .stats-content { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 40px; } .stats-badge { flex-shrink: 0; width: 250px; height: 250px; border-radius: var(--radius-sm); overflow: hidden; } .stats-intro { width: 633px; flex-shrink: 0; padding-top: 12px; } .stats-intro-text { font-size: 30px; font-weight: var(--weight-regular); line-height: 1; letter-spacing: -0.6px; max-width: 325px; margin-bottom: var(--space-lg); } .stats-intro-bio { font-size: var(--font-size-body-md); font-weight: 400; line-height: 1.5; color: var(--text-primary); max-width: 500px; } .stats-contain { flex: 1; display: flex; flex-direction: column; gap: 73px; padding-bottom: 30px; } .stats-list { display: flex; flex-direction: column; gap: 20px; width: 417px; } .stat { display: flex; flex-direction: column; gap: 17px; line-height: 1.1; } .stat-number { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-size: 105px; letter-spacing: -0.03em; line-height: 0.9; color: var(--text-accent); } .stat-description { font-size: var(--font-size-body-md); letter-spacing: -0.48px; line-height: 1.1; color: var(--text-muted); } .divider { border: none; border-top: 1px solid var(--border-rule); width: 100%; } .awards-section { margin-top: var(--space-xxl); margin-bottom: var(--space-lg); } .awards-heading { font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.6px; margin-bottom: 32px; } .awards-row { display: flex; align-items: flex-start; gap: var(--space-xxl); } .awards-list { display: flex; flex-direction: column; min-width: 0; width: fit-content; } .awards-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--border-rule); } .awards-item p { font-size: var(--font-size-body-md); line-height: 1.5; color: var(--text-primary); } .awards-logos-wrap { flex: 1; display: flex; justify-content: center; } .awards-logos { flex-shrink: 0; width: auto; height: 570px; } .awards-logos--dark { display: block; } .awards-logos--light { display: none; } [data-theme="light"] .awards-logos--dark { display: none; } [data-theme="light"] .awards-logos--light { display: block; } /* Design Intelligence Banner (Scan CTA) */ .scan-banner-section { padding: var(--space-xl); max-width: 1920px; border-top: 1px solid var(--border-rule); } .scan-banner-box { display: flex; align-items: center; gap: 40px; padding: var(--space-xxxl) var(--space-xxl); background-color: var(--bg-sunken); border: 1px solid var(--border-bright); } .scan-banner-text { display: flex; flex-direction: column; gap: var(--space-md); max-width: 832px; flex-shrink: 0; } .scan-banner-cta-wrap { display: flex; justify-content: center; flex: 1; } .scan-banner-heading { font-weight: var(--weight-regular); font-size: var(--font-size-heading-1); line-height: var(--font-size-heading-1); letter-spacing: 0.4px; color: var(--text-accent); } .scan-banner-body { font-size: var(--font-size-body-lg); line-height: var(--line-height-heading); font-weight: var(--weight-regular); color: var(--text-primary); } .scan-banner-box .scan-cta { flex-shrink: 0; } /* FAQs Section */ .faq-section { padding: var(--space-lg) var(--space-md) var(--space-huge); max-width: 1920px; border-top: 1px solid var(--border-rule); } .faq-section .section-label { margin-bottom: var(--space-xxl); } .faq-grid { display: flex; flex-direction: column; gap: var(--space-xxl); width: 100%; } .faq-row { display: flex; align-items: flex-start; gap: var(--space-xxxl); width: 100%; } .faq-item { display: flex; flex-direction: column; gap: var(--space-md); flex: 1 0 0; min-width: 0; } /* A trailing row with a single item would otherwise stretch to the full row width — cap it to match a normal column's width instead. */ .faq-row--single .faq-item { max-width: calc(50% - 30px); } .faq-question { font-size: var(--font-size-heading-2); line-height: 1; color: var(--text-primary); font-weight: var(--weight-regular); } .faq-answer { font-size: var(--font-size-body-md); line-height: 1.5; color: var(--text-primary); } /* Connect Section */ .connect-section { padding: 0 30px 50px; display: flex; flex-direction: column; gap: 34px; max-width: 1920px; } .connect-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .connect-cta-group { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; flex: 1 1 auto; } .connect-heading { font-size: var(--font-size-heading-1); line-height: 0.95; letter-spacing: -0.025em; } .cta-accent { color: var(--text-accent); } .scan-cta { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; padding: 20px 30px; border: 1px solid var(--border-button); border-radius: var(--radius-pill); background: none; color: var(--text-primary); font-family: inherit; font-size: var(--font-size-body-lg); line-height: var(--line-height-heading); font-weight: var(--weight-regular); cursor: pointer; transition: background 0.2s, color 0.2s; } .scan-cta--wide { padding: 20px var(--space-xxxl); } .scan-cta:hover { background: var(--bg-brand); color: var(--accent-ink); } .scan-cta-arrow { font-weight: var(--weight-bold); } /* .hero-scroll-cta's own opacity transition (styles.css, above .scan-cta in source) loses the cascade tie to this transition: shorthand — same specificity, later source order wins the whole longhand property, not a merge. Redeclaring the full list here (after .scan-cta) keeps both the reveal fade and the hover transition working. */ .hero-scroll-cta { transition: opacity 0.6s ease, background 0.2s, color 0.2s; } /* Contact Modal */ .contact-modal-overlay { display: none; position: fixed; inset: 0; z-index: 950; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s ease-out; } [data-theme="light"] .contact-modal-overlay { background: rgba(165, 165, 165, 0.5); } .contact-modal-overlay.active { display: flex; } .contact-modal-overlay.visible { opacity: 1; } .contact-modal { width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-canvas); border: 1px solid var(--border-rule); border-radius: var(--radius-md); transform: scale(0.96); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } .contact-modal-overlay.visible .contact-modal { transform: scale(1); opacity: 1; } .contact-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-xl) var(--space-xl) 25px; border-bottom: 1px solid var(--border-rule); } .contact-modal-header-text { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-modal-header-text .section-label { margin-bottom: 0; } .contact-modal-headline { font-size: 22px; line-height: 1.25; letter-spacing: -0.5px; color: var(--text-primary); } .contact-modal-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--border-rule); border-radius: var(--radius-pill); background: none; color: var(--text-primary); cursor: pointer; transition: background 0.2s; } .contact-modal-close:hover { background: var(--border-rule); } .contact-modal-close svg { width: 14px; height: 14px; } .contact-modal-body { padding: var(--space-xl); } .contact-modal-form { display: flex; flex-direction: column; gap: var(--space-lg); } .contact-modal-field { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-modal-field label { font-size: 12px; font-weight: 500; letter-spacing: 0.48px; text-transform: uppercase; color: var(--text-muted); } .contact-modal-field input, .contact-modal-field textarea { width: 100%; padding: 13px 17px; background: rgba(44, 71, 54, 0.35); border: 1px solid var(--border-rule); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-body-md); color: var(--text-primary); transition: border-color 0.2s; } .contact-modal-field input { height: 50px; } .contact-modal-field textarea { height: 122px; line-height: 1.5; resize: vertical; } .contact-modal-field input::placeholder, .contact-modal-field textarea::placeholder { color: var(--border-rule); } [data-theme="light"] .contact-modal-field input::placeholder, [data-theme="light"] .contact-modal-field textarea::placeholder { color: var(--border-rule); } .contact-modal-field input:focus, .contact-modal-field textarea:focus { outline: none; border-color: var(--border-button); } .contact-modal-field-error { font-size: 13px; color: #FF8A80; min-height: 0; } [data-theme="light"] .contact-modal-field-error { color: #C62828; } .contact-modal-field-error:empty { display: none; } .contact-modal-submit-row { display: flex; justify-content: flex-end; } .contact-modal-submit { font-size: var(--font-size-body-md); } [data-fs-success], [data-fs-error] { display: none; } [data-fs-success][data-fs-active], [data-fs-error][data-fs-active] { display: block; } [data-fs-success][data-fs-active] ~ #contact-modal-form { display: none; } .contact-modal-body .contact-modal-success, .contact-modal-body .contact-modal-error-banner { padding: var(--space-md); border: 1px solid var(--border-rule); border-radius: var(--radius-sm); /* !important: overrides a background-color the @formspree/ajax runtime injects into its own