/* ____________________________________________________________ */ /* ________________________[ VARIABLES ]_______________________ */ /* ____________________________________________________________ */ :root { --navy: #0B1320; --accent: #ff413b; --secondary: #28d0ae; --platform-bg: linear-gradient(135deg, #ffffffee 0%, #ffffff 40%, #ffffff 60%, #ffffffc7 100%); --platform-bg: linear-gradient(135deg, #f4fdfe 0%, #ffffff 40%, #ffffff 60%, #e1eef7 100%); --platform-bg: linear-gradient(135deg, #f4fdfe 0%, #ffffff 40%, #ffffff 100%); --platform-max: 100rem; /* max total stage width (hero platform == S1 platform + cards) */ --glass: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.20) 100%); --strip-w: 5.5rem; /* S2: width of the white "path" strip on the left (read by JS) */ --journey-gap: 3rem; /* S2: connector length from the path to each stage card */ --contact-glass-start: calc(max(1.05rem, (100vw - var(--platform-max)) / 2) + min(41vw, 35rem) + 3.5rem); /* desktop: white platform's right edge */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* ____________________________________________________________ */ /* _________________________[ RESET ]__________________________ */ /* ____________________________________________________________ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; overscroll-behavior: none; } html::-webkit-scrollbar { display: none; } body { background: var(--navy); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; cursor: pointer; } ul { list-style: none; } img, svg { display: block; } button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; } input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; width: 100%; } textarea { resize: vertical; } /* ____________________________________________________________ */ /* _______________________[ TYPOGRAPHY ]_______________________ */ /* ____________________________________________________________ */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; } h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); } h2 { font-size: clamp(2.4rem, 4.5vw, 4rem); } h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-family: var(--font-sans); font-weight: 600; } h4 { font-size: 0.8rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } p { font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.75; } em { font-style: italic; } /* Longer (DE/ES/TR) and full-width (CJK) scripts wrap the titles one line too many. Nudge just those down a hair — one knob per language (1 = unchanged, lower = smaller). English is never listed, so it keeps its exact size. */ :root:lang(de), :root:lang(es), :root:lang(tr), :root:lang(ar) { --head-scale: 0.9; } :root:lang(zh), :root:lang(ja), :root:lang(ko) { --head-scale: 0.86; } /* ---- Non-Latin headline typography (CJK + Arabic) ---- Cormorant (the Latin display serif) has no glyphs here; a mixed CJK fallback also lands different characters in different fonts (uneven strokes), and a synthesized bold looks fake/blotchy. So: ONE clean system family PER script, a single normal weight (no fake bold anywhere), reset tracking, roomy lines. The teal accent stays — by colour, not by a heavier stroke. Latin is untouched (its is en/de/es/tr). */ :lang(zh) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; } :lang(ja) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; } :lang(ko) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; } :lang(ar) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) { font-family: "Geeza Pro", "SF Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; } :lang(zh) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline), :lang(ja) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline), :lang(ko) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline), :lang(ar) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) { font-weight: 400; /* normal, even stroke — never a synthesized bold */ letter-spacing: normal; /* Latin's negative tracking crams these glyphs together */ line-height: 1.4; } :lang(zh) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) em, :lang(ja) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) em, :lang(ko) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) em, :lang(ar) :is(.hero-headline, .challenge-headline, .offer-headline, .why-headline, .contact-headline) em { font-style: normal; /* no synthesized italic */ font-weight: inherit; /* same stroke as the rest — the accent is the teal colour */ } /* ____________________________________________________________ */ /* __________________________[ NAV ]___________________________ */ /* ____________________________________________________________ */ #site-nav { /* Single scale factor — every nav dimension is derived from it, so shrinking keeps the exact same proportions. */ --nav-s: 1; position: fixed; top: 2.2rem; /* Same side inset as the platform, so the lang button never sits to the right of the white platform on wide screens (on normal screens this resolves to 1.05rem, i.e. unchanged). The centred nav stays centred. */ left: max(1.05rem, (100vw - var(--platform-max)) / 2); right: max(1.05rem, (100vw - var(--platform-max)) / 2); z-index: 10; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.75rem; pointer-events: none; /* Contact (mobile) nudges the bar up via .nav-contact — one smooth glide, same easing as the platform. Desktop never changes top, so the transition just sits idle there. */ transition: top 0.55s cubic-bezier(0.645, 0.045, 0.355, 1); } #site-nav > * { pointer-events: auto; } #nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; height: calc(3.15rem * var(--nav-s)); padding: calc(0.5rem * var(--nav-s)); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: calc(1.575rem * var(--nav-s)); /* exactly half the height → full pill */ box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12); /* inner shadow on light sections (hero / S1) */ transition: box-shadow 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } #nav-indicator { position: absolute; top: calc(0.35rem * var(--nav-s)); bottom: calc(0.35rem * var(--nav-s)); left: 0; width: 0; background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: calc(1.225rem * var(--nav-s)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity 0.3s; pointer-events: none; } #nav-links button { position: relative; z-index: 1; font-size: calc(0.75rem * var(--nav-s)); font-weight: 500; color: var(--navy); opacity: 0.55; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.2s, color 0.3s; padding: 0 calc(0.9rem * var(--nav-s)); height: 100%; } #nav-links button:hover { opacity: 1; color: var(--secondary); } #nav-links button.is-active { opacity: 1; } /* Dark sections (platform shrunk away from behind the nav): outer shadow + white text — active fully white, the rest dimmed (the navy treatment, inverted). */ #site-nav.nav-dark #nav-links { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } #site-nav.nav-dark #nav-links button { color: #fff; } #site-nav.nav-dark #nav-links button:hover { color: var(--secondary); } #nav-lang { display: flex; align-items: center; } /* Burger button — hidden on desktop, shown instead of the links bar on mobile */ #burger-btn { display: none; width: calc(3.15rem * var(--nav-s)); height: calc(3.15rem * var(--nav-s)); border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-direction: column; align-items: center; justify-content: center; gap: 0.32rem; transition: box-shadow 0.2s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s ease; } #burger-btn:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); } #burger-btn span { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--navy); } /* Mobile — same proportions, just scaled down; lang + burger sit together on the right */ @media (max-width: 850px) { #site-nav { --nav-s: 0.72; top: 1.7rem; /* 0.5rem less than the desktop 2.2rem — burger + lang closer to the top edge */ padding: 0 0.8rem; /* right gap also 0.5rem less (was 1rem; the 1.05rem side inset stays) */ justify-content: flex-end; gap: 0.5rem; } #nav-links { display: none; } #burger-btn { display: flex; } /* When lang overlay opens: lang slides right into burger's spot, burger slides off */ #nav-lang { transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } #site-nav.lang-is-open #nav-lang { transform: translateX(calc(3.15rem * 0.72 + 0.5rem)); } #site-nav.lang-is-open #burger-btn { transform: translateX(calc(3.15rem * 0.72 + 0.5rem + 100%)); opacity: 0; pointer-events: none; } } /* ____________________________________________________________ */ /* ________________________[ LAYOUT ]__________________________ */ /* ____________________________________________________________ */ .container { width: 100%; margin: 0 auto; } .section { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: transparent; } #bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background-color: #021803; transition: background-color 0.9s cubic-bezier(0.645, 0.045, 0.355, 1); } #bg-inner { position: absolute; width: 170vmax; height: 170vmax; top: 50%; left: 50%; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 42% at 28% 28%, rgba(0, 216, 235, 0.859) 0%, transparent 54%), radial-gradient(ellipse 55% 48% at 72% 72%, rgba(10, 206, 220, 0.719) 0%, transparent 54%), radial-gradient(ellipse 42% 50% at 75% 20%, rgba(0, 165, 210, 0.60) 0%, transparent 50%), radial-gradient(ellipse 58% 42% at 20% 76%, rgba(0, 115, 180, 0.70) 0%, transparent 52%); filter: blur(55px); } #fluid-platform-wrap { position: fixed; top: 1.05rem; bottom: 1.05rem; /* Caps at --platform-max and centres; beyond that the extra width is just bg. */ left: max(1.05rem, (100vw - var(--platform-max)) / 2); right: max(1.05rem, (100vw - var(--platform-max)) / 2); z-index: 2; /* stacking: bg(-1) < challenge cards(1) < platform(2) < section text(3) */ transform-origin: top right; /* Approach: the scale-to-nothing shrink collapses into the top-right corner */ filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.225)); transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), right 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), bottom 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } #fluid-platform { position: absolute; inset: 0; background: var(--platform-bg); } /* Section content rides above the platform so text sits on the white. */ #fullpage { position: relative; z-index: 3; } /* ____________________________________________________________ */ /* ______________________[ LANGUAGE ]__________________________ */ /* ____________________________________________________________ */ #lang-btn { width: calc(3.15rem * var(--nav-s)); /* same height as the nav bar */ height: calc(3.15rem * var(--nav-s)); border-radius: 50%; overflow: hidden; /* clip the flag to the circle */ background: rgba(0, 0, 0, 0.07); display: flex; align-items: center; justify-content: center; font-size: calc(0.68rem * var(--nav-s)); font-weight: 600; letter-spacing: 0.06em; color: var(--navy); transition: background 0.2s; } #lang-btn:hover { background: rgba(0, 0, 0, 0.13); } /* current-language flag fills the round button */ #lang-current { display: block; width: 100%; height: 100%; } #lang-current img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Desktop: language button is as tall as the nav-indicator (not the full nav bar), on the same level. 851px = the SAME breakpoint where the nav switches to burger (max-width: 850px) — a different cutoff here left a 769–850px window where the burger was already out but the lang button still had its small desktop size, so the two circles didn't match. */ @media (min-width: 851px) { #lang-btn { width: calc(2.45rem * var(--nav-s)); height: calc(2.45rem * var(--nav-s)); } } /* ____________________________________________________________ */ /* ___________[ SECTION 3 — WHY KOIPORT (cut-outs) ]___________ */ /* ____________________________________________________________ */ #s3 { text-align: left; } .why { width: 100%; max-width: var(--platform-max); margin-inline: auto; padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4.5rem); /* horizontal matches .challenge → S3 content lines up with S1 at every width */ } @media (max-width: 900px) { .why { padding-inline: max(2rem, 8vw); } } /* match .challenge's mobile inset */ /* reveal: text fades in; holes + panes grow small → big (JS holes + the .hole-pane scale below) */ /* head text (eyebrow/headline/sub) is handled by the section text-reveal (slides in); only the labels fade + rise here, staggered by JS after their holes/panes appear */ .stat-label, .cl-label { opacity: 0; transform: translateY(0.7rem); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .why.is-on .stat-label, .why.is-on .cl-label { opacity: 1; transform: none; } .why-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 19, 32, 0.55); } .why-index { color: var(--accent); font-weight: 700; } .why-rule { width: 2.4rem; height: 1px; background: rgba(11, 19, 32, 0.22); } .why-headline { font-family: var(--font-serif); font-weight: 500; font-size: calc(clamp(2.3rem, 4.2vw, 3.9rem) * var(--head-scale, 1)); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); margin-top: 1.2rem; } .why-headline em { font-style: italic; color: var(--secondary); } .why-sub { font-family: var(--font-sans); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; color: rgba(11, 19, 32, 0.6); margin-top: 1rem; max-width: 46ch; } /* three number panes — glass floating in the platform holes */ .why-stats { list-style: none; display: flex; gap: 1.5rem; margin-top: 2.5rem; } .stat-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .hole-pane { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 0.6rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transform: scale(0); /* pops in behind its hole; per-pane delay set by JS */ transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1); /* gentle overshoot */ } .why.is-on .hole-pane { transform: scale(1); } /* exit: glass shrinks away fast (the holes follow via JS) */ .why.is-leaving .hole-pane { transform: scale(0); transition: transform 0.2s cubic-bezier(0.5, 0, 0.85, 0.4); } /* menu (language / burger) open: glass shrinks away like the exit, but at 2× the reveal speed (0.3s vs the 0.6s come-in); the holes follow via JS (exitWhyHoles called with the menu duration) */ .why.menu-out .hole-pane { transform: scale(0); transition: transform 0.3s cubic-bezier(0.5, 0, 0.85, 0.4); } .stat-pane { width: 100%; height: clamp(7rem, 17vh, 11rem); display: flex; align-items: center; justify-content: center; } .stat-num { font-family: 'Space Grotesk', var(--font-sans); font-weight: 600; font-size: clamp(1.6rem, 6vw, 5rem); line-height: 1; /* min lowered so "450+" fits the narrow pane on small screens */ color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(11, 19, 32, 0.5); padding-top: 0.3vh; } .why-cl { margin-top: 5vh; /* normal block → band spans the content width, so its hole lines up with the outer edges of the number holes */ } .cl-label { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(11, 19, 32, 0.45); margin-top: 0.9rem; } .cl-pane { --band-h: 5.5rem; /* FIXED (no vh): resize must not re-rasterise the logos */ --logo-w: 10.5rem; /* Logofläche — für ALLE gleich, contain skaliert hinein */ --logo-h: 2.6rem; /* ≈ die Hälfte der Bandhöhe → ringsum Luft */ height: var(--band-h); /* The sheet itself is INVISIBLE now — each logo rides its own plate (.cl-tile below). The element still earns its keep as the platform HOLE (its rect gets punched), the marquee clip (overflow) and the reveal scaler (.hole-pane transform). */ background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; overflow: hidden; display: flex; align-items: center; } /* Each logo on its OWN little plate, scrolling across the dark cut-out band. The plates are SOLID WHITE, not glass: client logos are drawn for white stock (dark and mid-tone marks, with white knockouts inside the coloured shapes), and over a translucent pane against the dark band they lost contrast and the knockouts read as holes. White also drops 30 backdrop-filter layers out of the marquee — the band now scrolls without recompositing a blur every frame. */ .cl-tile { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: var(--band-h); /* plates span the FULL sheet: the visible gap to the hole edge is then exactly the hole's own 0.4rem float-gap (computeWhyHoles), identical on all four sides */ padding: 0 1.25rem; /* seitliche Luft; Kachelbreite = --logo-w + 2× dieser Wert */ margin-right: 2.5rem; background: #fff; border: 1px solid rgba(11, 19, 32, 0.08); /* hairline, so a white logo edge still has a boundary */ border-radius: 0.6rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .cl-track { display: flex; align-items: center; white-space: nowrap; width: max-content; flex: none; /* exactly its content width, so -50% == one full copy */ will-change: transform; /* own GPU layer → no per-frame repaint stutter */ animation: cl-marquee 60s linear infinite; /* one copy = 15 svgs; 60s ≈ the old pace */ } .cl-seq { display: contents;} /* groups a copy without affecting the flex layout */ /* While the window is being dragged: drop the blur + pause the scroll so the band stays calm (backdrop-filter otherwise re-blurs every frame as the platform behind it resizes). script.js restores this and hard-re-renders the marquee once the resize settles. */ .cl-pane.cl-resizing { -webkit-backdrop-filter: none; backdrop-filter: none; } .cl-pane.cl-resizing .cl-track { animation-play-state: paused; } /* the tiles are opaque white now — nothing left to unblur */ .svg-box { flex: 0 0 auto; /* EINHEITLICHE Box für jedes Logo. Vorher bestimmte das Seitenverhältnis der jeweiligen SVG die Breite (height × ratio) — dadurch reichten die Kacheln von 139px bis 393px, Faktor 2,8, und die höchsten Logos füllten 64 von 88px Bandhöhe. Jetzt geben Breite und Höhe die Box vor und background-size:contain passt jedes Logo proportional hinein: gleiche Plattenbreite für alle, und ringsum sichtbar Luft. */ width: var(--logo-w); height: var(--logo-h); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Telefone: das Band ist dort nur rund 275px breit — mit der Desktop-Platte (210px + 40px Abstand) bliebe kaum ein Logo im Bild. Platte, Logofläche und Abstand schrumpfen gemeinsam, das Verhältnis bleibt damit dasselbe wie am Desktop. */ @media (max-width: 768px) { .cl-pane { --logo-w: 7rem; --logo-h: 2.1rem; } .cl-tile { padding: 0 0.9rem; margin-right: 1.25rem; } } @keyframes cl-marquee { to { transform: translateX(-50%); } } .box-01 { background-image: url("elements/el/l-01.svg"); } .box-02 { background-image: url("elements/el/l-02.svg"); } .box-03 { background-image: url("elements/el/l-03.svg"); } .box-04 { background-image: url("elements/el/l-04.svg"); } .box-05 { background-image: url("elements/el/l-05.svg"); } .box-06 { background-image: url("elements/el/l-06.svg"); } .box-07 { background-image: url("elements/el/l-07.svg"); } .box-08 { background-image: url("elements/el/l-08.svg"); } .box-09 { background-image: url("elements/el/l-09.svg"); } .box-10 { background-image: url("elements/el/l-10.svg"); } .box-11 { background-image: url("elements/el/l-11.svg"); } .box-12 { background-image: url("elements/el/l-12.svg"); } .box-13 { background-image: url("elements/el/l-13.svg"); } .box-14 { background-image: url("elements/el/l-14.svg"); } .box-15 { background-image: url("elements/el/l-15.svg"); } /* ____________________________________________________________ */ /* ___________________[ CONTACT ]______________________________ */ /* ____________________________________________________________ */ /* On the full white platform (navy type), like the other content sections. The background/platform choreography is intentionally untouched for now. */ #contact { text-align: left; } /* two-column: white platform left (text) · glass panel right (swapping panes). The fluid platform's right edge is moved to the panel's left edge by JS. */ .contact { position: relative; width: 100%; height: 100%; } #contact { pointer-events: none; } /* whole section is click-through (inherits) so clicks in the glass area reach the panel behind #fullpage */ .contact-left, .contact-btns, .contact-foot { pointer-events: auto; } /* real content stays interactive (direct value beats the inherited none) */ .contact-left { position: absolute; top: calc(50% + 3.25rem); transform: translateY(-50%); /* centred in the lowered platform */ left: max(1.05rem, (100vw - var(--platform-max)) / 2); width: min(41vw, 35rem); padding: 0 2rem 0 clamp(1.25rem, 3vw, 3.5rem); } .contact-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 19, 32, 0.55); } .contact-index { color: var(--accent); font-weight: 700; } .contact-rule { width: 2.4rem; height: 1px; background: rgba(11, 19, 32, 0.22); } .contact-headline { font-family: var(--font-serif); font-weight: 500; font-size: calc(clamp(2.3rem, 4.2vw, 3.9rem) * var(--head-scale, 1)); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); margin-top: 1.2rem; } .contact-headline em { font-style: italic; color: var(--secondary); } .contact-sub { font-family: var(--font-sans); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; color: rgba(11, 19, 32, 0.6); margin-top: 1rem; max-width: 42ch; } .contact-promise { font-family: var(--font-sans); font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.6; color: rgba(11, 19, 32, 0.72); margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--accent); max-width: 46ch; } .contact-foot { position: absolute; bottom: 2rem; right: calc(100vw - var(--contact-glass-start) + 2rem); /* bottom-right, just inside the white platform */ display: flex; align-items: center; gap: 1.5rem; font-family: var(--font-sans); font-size: 0.72rem; color: rgba(11, 19, 32, 0.45); } .contact-impressum { color: rgba(11, 19, 32, 0.55); transition: color 0.2s; } .contact-impressum:hover { color: var(--accent); } /* ---- circular buttons (straddle the platform edge) ---- */ .contact-btns { position: absolute; top: calc(50% + 3.25rem); transform: translateY(-50%); left: calc(max(1.05rem, (100vw - var(--platform-max)) / 2) + min(41vw, 35rem) + 3.5rem - 2rem); display: flex; flex-direction: column; gap: 1rem; z-index: 4; /* above platform (2) + panel (3) so they straddle the edge */ } .cbtn { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */ color: var(--navy); font-size: 1.15rem; line-height: 1; transition: transform 0.2s, background-color 0.45s, box-shadow 0.2s; background-repeat: no-repeat; background-position: center; background-size: contain; } .cbtn:hover, .cbtn.is-active { transform: scale(1.1); background-color: var(--secondary); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); } .cbtn img { width: 1.5rem; height: 1.5rem; object-fit: contain; } /* icons you drop into the buttons */ .cbtn1{background-image: url("elements/Icons/q&a-inactive.svg");} .cbtn2{background-image: url("elements/Icons/email-inactive.svg");} .cbtn3{background-image: url("elements/Icons/wechat-inactive.svg");} .cbtn5{background-image: url("elements/Icons/phone-inactive.svg");} .cbtn6{background-image: url("elements/Icons/office-inactive.svg");} /* hover / active → swap to the active-02 icon (shown on the secondary-colour background) */ .cbtn1:hover, .cbtn1.is-active { background-image: url("elements/Icons/q&a-active-02.svg"); } .cbtn2:hover, .cbtn2.is-active { background-image: url("elements/Icons/email-active-02.svg"); } .cbtn3:hover, .cbtn3.is-active { background-image: url("elements/Icons/wechat-active-02.svg"); } .cbtn5:hover, .cbtn5.is-active { background-image: url("elements/Icons/phone-active-02.svg"); } .cbtn6:hover, .cbtn6.is-active { background-image: url("elements/Icons/office-active-02.svg"); } /* Contact buttons build up one after another, sliding in from the left exactly like the text (same 2.6rem, same 0.85s easing). The slide uses `translate` — a SEPARATE property from `transform` — so it composes with, and never clashes with, each button's own hover/active `transform: scale(1.1)`. The reveal transition also lists the hover props, but with PER-PROPERTY delays, so only the reveal (opacity + translate) is staggered — the hover stays instant. The stagger continues the text's 60ms cadence (buttons = the next items after the 5 contact lines). Menu open (.rv-out): all slide back out together, immediately, 2× faster. Driven by the section's .rv-in / .rv-out — no JS. Gated by .rv-ready so the buttons stay visible without JS. */ .rv-ready .cbtn { opacity: 0; translate: -2.6rem 0; } .rv-ready .rv-in .cbtn { opacity: 1; translate: 0 0; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), translate 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s, background-color 0.45s, box-shadow 0.2s; } .rv-ready .rv-in .cbtn:nth-child(1) { transition-delay: 0.30s, 0.30s, 0s, 0s, 0s; } .rv-ready .rv-in .cbtn:nth-child(2) { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; } .rv-ready .rv-in .cbtn:nth-child(3) { transition-delay: 0.42s, 0.42s, 0s, 0s, 0s; } .rv-ready .rv-in .cbtn:nth-child(4) { transition-delay: 0.48s, 0.48s, 0s, 0s, 0s; } .rv-ready .rv-in .cbtn:nth-child(5) { transition-delay: 0.54s, 0.54s, 0s, 0s, 0s; } .rv-ready .rv-in .cbtn:nth-child(6) { transition-delay: 0.60s, 0.60s, 0s, 0s, 0s; } .rv-ready .rv-out .cbtn { opacity: 0; translate: -2.6rem 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), translate 0.425s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0s !important; /* all at once, immediately, 2× faster */ } /* ---- glass panel on the right (over the dark bg); panes swap on hover ---- */ /* Contact glass panel — fixed BELOW the platform (z-1), exactly like #challenge-cards, so the scheiben tuck UNDER the white. Its left edge runs --contact-overlap under the platform's right edge; the white (z-2) covers that overlap and hides the tucked scheibe. */ .contact-panel { --contact-overlap: 2.5rem; position: fixed; z-index: 1; top: 7.55rem; /* lowered: nav sits centred between screen top and the platform */ bottom: 1.05rem; right: max(1.05rem, (100vw - var(--platform-max)) / 2); left: calc(max(1.05rem, (100vw - var(--platform-max)) / 2) + min(41vw, 35rem) + 3.5rem - var(--contact-overlap)); border-radius: 0 24px 24px 0; /* rounded right; the panes are clipped to this box */ overflow: hidden; /* a tucking scheibe is cut off here (under the white) — never pokes out the left */ visibility: hidden; /* only revealed on the contact section */ pointer-events: none; } .contact-panel.is-open { pointer-events: auto; } /* visibility toggled inline by JS (delayed hide) */ /* each scheibe IS glass and slides in/out as a whole; hidden = tucked fully left under the white */ .contact-pane { --pane-pad: clamp(1.8rem, 3vw, 3rem); --pane-box: 25rem; /* the centred content box = the form's width; info panes narrow it below so the box hugs their content */ position: absolute; inset: 0; /* extra left pad = overlap, so the content starts at the visible glass edge, not under the white */ padding: var(--pane-pad) var(--pane-pad) var(--pane-pad) calc(var(--pane-pad) + var(--contact-overlap) + 3rem); /* ONE left gap for ALL panes (form + info): the 25rem content box is centred between the buttons' inner edge (they poke 1.5rem past the platform) and the right glass edge; on wide screens the gap CAPS at the old fixed value, so nothing drifts further right. The shorthand above stays as the fallback for browsers without clamp(). Mobile overrides the whole padding anyway. */ padding-left: calc(var(--contact-overlap) + 1.5rem + clamp(0.5rem, (100% - var(--contact-overlap) - 1.5rem - var(--pane-box)) / 2, var(--pane-pad) + 1.5rem)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0 24px 24px 0; /* square left (stays under the white), rounded right */ transform: translateX(-100%); /* tucked fully under the platform */ transition: transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1); } .contact-panel.is-open .contact-pane.is-active { transform: translateX(0); } .contact-pane:not(.contact-pane--form) { --pane-box: 20rem; } /* info panes: box as wide as their actual content (text + QR), so centring is true */ .pane-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .pane-value { font-family: var(--font-sans); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; color: #fff; margin-top: 0.5rem; transition: color 0.2s; } a.pane-value:hover { color: var(--secondary); } .pane-note { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin-top: 0.5rem; } /* Office pane: the street address, in ONE uniform colour. Sits tight under the company name it belongs to, and brighter than the note below — that line is prose, this is data a visitor reads off or types into a map. */ .pane-address { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; } /* …and the closing sentence gets real air, so it reads as a separate thought rather than a fourth line of the address. */ .contact-pane[data-pane="4"] .pane-note { margin-top: 1.2rem; } .pane-img { margin-top: 1.8rem; width: 220px; /* fallback if min()/svh unsupported (older browsers) → box never collapses */ width: min(34svh, var(--pane-box)); /* fills the content box (34svh guards short screens) */ aspect-ratio: 1 / 1; flex-shrink: 0; /* the pane is a column flex box: without this, a cramped pane compresses the HEIGHT and aspect-ratio loses — a QR must stay square or it stops scanning */ border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } /* WeChat: the QR rides a SOLID WHITE plate, not the glass. This is the one element on the page whose job is to be read by a camera — dark modules on light is what scanners expect, and the white padding is the code's quiet zone, without which many readers fail to lock on. The plate also matches the white logo plates in Experience, so it reads as the same family. */ /* Email + WeChat + Phone: the QR as the box's background. White behind it because the codes are dark on transparent — on the glass tint they would neither read nor scan. All three SVGs carry their own quiet zone (measured: 9.3% a side, more than the spec asks), so they sit at full size. */ .contact-pane[data-pane="0"] .pane-img, .contact-pane[data-pane="1"] .pane-img, .contact-pane[data-pane="3"] .pane-img { background-color: #fff; background-position: center; background-size: contain; background-repeat: no-repeat; border-color: rgba(255, 255, 255, 0.35); } .contact-pane[data-pane="0"] .pane-img { background-image: url("elements/qr-codes/email-qr.svg"); } .contact-pane[data-pane="1"] .pane-img { background-image: url("elements/qr-codes/wechat_qr.svg"); } .contact-pane[data-pane="3"] .pane-img { background-image: url("elements/qr-codes/phone-qr.svg"); } .pane-cta { display: none; } /* desktop shows the visual box; mobile swaps to a tap-to-open button */ /* Desktop: text spans exactly the content box, so box = content = QR edge (nothing pokes out right, and the centred box doesn't look shifted left). max-width guards very narrow glass. */ @media (min-width: 769px) { .pane-label, .pane-value, .pane-note, .pane-address { width: var(--pane-box); max-width: 100%; } } /* ================= Guided lead form (the "message" scheibe) ================= */ .lead-form { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 25rem; height: 23rem; caret-color: transparent; } /* fixed-height box, vertically centred by the pane → Back/Skip and dots stay put */ .lf-top { display: flex; align-items: center; gap: 1rem; min-height: 1.4rem; margin-bottom: 1.7rem; } .lf-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 1rem; } .lf-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); } .lf-dot.is-on { background: var(--secondary); transform: scale(1.25); } .lf-viewport { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; } /* question + answers centred between the fixed Back/Skip and dots */ .lf-step { display: none; } .lf-step.is-active { display: block; animation: lf-step-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes lf-step-in { from { opacity: 0; transform: translateX(1.6rem); } to { opacity: 1; transform: none; } } .lf-q { font-family: var(--font-sans); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.3; color: #fff; margin: 0 0 1rem; } .lf-opts { display: flex; flex-direction: column; gap: 0.5rem; } .lf-opts[data-field="Help"], .lf-opts[data-field="Blocked"] { display: grid; grid-template-columns: 1fr 1fr; } /* the after-Q1 questions: 2 options per row */ .lf-opt { display: flex; align-items: center; /* centre text vertically so 2-col cells of unequal length line up */ text-align: left; font-family: var(--font-sans); font-size: 0.92rem; color: #fff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0.7rem; padding: 0.6rem 1rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .lf-opt:hover, .lf-opt:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); outline: none; } .lf-slider-out { display: block; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--secondary); margin-bottom: 0.8rem; min-height: 1.2rem; } /* small, light running label */ /* The input itself is a FAT touch target: 2rem tall so a finger can actually land on it (the old 4px-high input was near impossible to grab on a phone). Negative margins keep the LAYOUT footprint at the old 4px line; the slim visible track is drawn by the track pseudos on transparent background. touch-action:none = a finger on the slider drags the thumb, the browser never reads it as a scroll/pan gesture. */ .lf-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; margin: -0.9rem 0; background: transparent; outline: none; cursor: pointer; touch-action: none; position: relative; z-index: 1; } .lf-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); } .lf-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); } .lf-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.4rem; height: 1.4rem; margin-top: calc(2px - 0.7rem); border-radius: 50%; background: var(--secondary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); cursor: pointer; } .lf-slider input[type="range"]::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--secondary); border: 3px solid #fff; cursor: pointer; } .lf-slider-ends { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); margin: 0.55rem 0 0; } .lf-in { width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: #fff; caret-color: #fff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0.7rem; padding: 0.7rem 1rem; margin-bottom: 0.55rem; transition: border-color 0.2s, background 0.2s; } .lf-in::placeholder { color: rgba(255, 255, 255, 0.4); } .lf-in:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.12); } .lf-area { resize: none; display: block; margin-bottom: 0; } /* block kills the inline baseline gap under a textarea; Send provides the only spacing */ .lf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lf-next, .lf-send { margin-top: 1.1rem; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: #fff; background: var(--navy); border: none; border-radius: 0.7rem; padding: 0.75rem 1.6rem; cursor: pointer; transition: transform 0.2s, filter 0.2s; } .lf-send { margin-top: 0.55rem; } /* a little air under the textarea (Continue keeps its 1.1rem) */ .lf-next:hover, .lf-send:hover { transform: translateY(-2px); filter: brightness(1.08); } .lf-send.is-busy { opacity: 0.6; pointer-events: none; } .lf-back, .lf-skip { font-family: var(--font-sans); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s; -webkit-user-select: none; user-select: none; } .lf-back:hover, .lf-skip:hover { color: #fff; } .lf-skip { margin-left: auto; } /* stays on the right even when Back is hidden */ .lf-intro { font-family: var(--font-sans); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); -webkit-user-select: none; user-select: none; } .lf-err { font-family: var(--font-sans); font-size: 0.82rem; color: #ff9c9c; margin: 0.5rem 0 0; } .lf-thanks .lf-q { color: #fff; } @media (prefers-reduced-motion: reduce) { .lf-step.is-active { animation: none; } } /* ---- MOBILE ONLY: Contact flips to a VERTICAL split — glass on TOP, white the bottom band. Desktop keeps the horizontal left/right split above. JS (platformToContact) mirrors this: on mobile it moves the platform's TOP edge to the split line. ---- */ @media (max-width: 768px) { :root { --contact-split: 64svh; } /* svh, NOT vh: iOS vh = large viewport → line too low. White kept small: the contact step (3 inputs) needs the glass height */ /* On Contact the nav glides up to the hero platform's edge (1.05rem, .nav-contact set by script.js on section change), freeing height for the glass. The panel top follows: the buttons (2.27rem tall → centre at 2.18rem) sit exactly midway between the screen's top edge and the glass edge, so panel top = 2 × 2.18 = 4.37rem (was 5.5rem). */ #site-nav.nav-contact { top: 1.05rem; } .contact-panel { top: 4.37rem; left: 1.05rem; right: 1.05rem; bottom: calc(100svh - var(--contact-split) - var(--contact-overlap)); border-radius: 24px 24px 0 0; /* rounded top; the bottom is under the white */ } .contact-pane { /* overlap padding moves to the BOTTOM (that edge is under the white now); the visible bottom air = side-gap logic (pane-pad), smaller — PLUS 1.25rem clearance for the cbtn row, whose upper half pokes that far above the split line into the glass */ padding: var(--pane-pad) var(--pane-pad) calc(var(--pane-pad) * 0.6 + 1.25rem + var(--contact-overlap)) var(--pane-pad); justify-content: center; /* content vertically CENTRED in the glass (the bottom padding below keeps it clear of the cbtn row) */ align-items: center; /* content box centred horizontally, like the question form */ border-radius: 24px 24px 0 0; transform: translateY(100%); /* tucked DOWN under the white */ } /* same side treatment as the question form: a centred 24rem box, text left-aligned inside */ .pane-label, .pane-value, .pane-note, .pane-address { width: 100%; max-width: 24rem; } .pane-note { margin-top: 0.3rem; } /* a touch closer to the value above; the button below got more air instead */ .contact-panel.is-open .contact-pane.is-active { transform: translateY(0); } .contact-btns { /* NOT plain var(--contact-split): svh is the SMALL viewport, but the white edge is set by JS from the panel rect, which follows the CURRENT viewport (innerHeight — grows when the browser bar collapses on scroll). Anchoring from the BOTTOM with the same svh remainder the panel uses makes both track the bar identically, so the row stays ON the edge. */ top: calc(100% - (100svh - var(--contact-split))); left: 50%; transform: translate(-50%, -50%); flex-direction: row; /* horizontal row straddling the split line */ gap: 0.5rem; /* 6 buttons now → tighter so the row fits phone width */ } .cbtn { width: 2.5rem; height: 2.5rem; } .cbtn img { width: 1.2rem; height: 1.2rem; } .lead-form { max-width: 24rem; height: 100%; } /* fills the band → Back/Skip and dots keep a FIXED height on every step */ /* tighter form spacing on the short band, so even the contact step (3 inputs) fits and centres */ .lf-dots { display: none; } /* no progress dots on mobile */ .lf-top { margin-bottom: 0.9rem; } .lf-in { padding: 0.6rem 0.9rem; } .lf-next { margin-top: 0.8rem; } .lf-send { margin-top: 0.55rem; } /* a little air under the textarea — the band is short */ .contact-left { top: calc(100% - (100svh - var(--contact-split)) + 3.25rem); transform: none; /* text at the TOP of the white band — bottom-anchored like .contact-btns so it tracks the real edge */ left: 1.05rem; right: 1.05rem; width: auto; padding: 0 clamp(1.25rem, 5vw, 2rem); } .contact-sub { display: none; } /* drop one of the two sentences on small screens */ .contact-foot { right: 2.5rem; } /* bottom-right inside the mobile platform (bottom stays 2rem) */ .pane-img { display: none; } /* no QR on a phone (you can't scan your own screen) */ /* A pill, not the old 7rem glass disc. That disc read as an empty placeholder rather than a control: glass-on-glass has nothing to sit against here, so it went flat grey, and "Send an email" broke onto two lines inside it. It also ate ~4rem of a band that is already tight. Teal because on this dark pane navy (the button colour everywhere else) would be dark on dark — and teal is what "active" already means in this section, on the button row below. */ /* The is only the alignment box: it shares the exact 24rem column the text above uses, so the pill starts on the same left edge at EVERY mobile width. (With the pill itself set to align-self:flex-start it sat at the pane's padding edge instead — 11px off at 500px and over 140px off at the 768px end of this breakpoint, where the text column is centred and the button was not.) The inner carries the button. */ .pane-cta { display: flex; justify-content: flex-start; align-self: center; width: 100%; max-width: 24rem; margin-top: 1.4rem; padding: 0; background: none; border: none; box-shadow: none; text-decoration: none; } .pane-cta span { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; min-height: 2.75rem; /* comfortable thumb target */ border-radius: 999px; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; white-space: nowrap; /* the label must never wrap into a second line again */ color: var(--navy); background: var(--secondary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, filter 0.15s ease; } .pane-cta:active span { transform: translateY(1px); filter: brightness(0.94); } /* tap feedback */ /* Landscape phones: the glass band is only ~450px tall and the pane centres its content, so below this the button pushed down into the round button row on the split line. The note is the one line that can go — the same trade .contact-sub already makes on small screens. */ @media (max-height: 500px) { .pane-note { display: none; } .pane-cta { margin-top: 0.7rem; } .pane-value { font-size: 1.25rem; } /* the clamp floor is 1.4rem, too tall for a landscape band */ } } /* Short phones (same height threshold the other sections already use): the round disc would eat the band — a normal compact pill instead. Mobile AND short only, not short in general. */ @media (max-width: 768px) and (max-height: 660px) { /* The CTA is one shape at every mobile size now, so this only trims its air on short phones. */ .pane-cta { margin-top: 1rem; } .pane-note { margin-top: 0.35rem; } /* Lead form: the glass band is a fixed svh height, so on short phones — or in a language whose strings run longer than the English baseline — the form (worst case: 3 stacked inputs + textarea + button on the contact step) can be taller than the band. This tightens spacing so everything fits. */ .lead-form { transform: scale(0.95); } /* the WHOLE form (questions, options, inputs, buttons) a tick smaller — one uniform 5%, not twenty individual values */ .lf-top { margin-bottom: 0.6rem; margin-top: -0.1em;} .lf-q { font-size: 1.05rem; margin-bottom: 0.7rem; } .lf-opts { gap: 0.4rem; } .lf-opt { padding: 0.5rem 0.8rem; font-size: 0.86rem; } .lf-slider-out { margin-bottom: 0.5rem; } .lf-in { padding: 0.55rem 0.8rem; margin-bottom: 0.4rem; } .lf-next, .lf-send { padding: 0.6rem 1.4rem; } .lf-next { margin-top: 0.55rem; } .lf-send { margin-top: 0.2rem; } /* just a sliver of air under the textarea — the band is at its shortest here */ } #lang-overlay { position: fixed; top: 1.05rem; /* Same side inset as the platform so the panel opens to the white platform's right edge, not the screen edge (resolves to 1.05rem on normal screens). */ right: max(1.05rem, (100vw - var(--platform-max)) / 2); bottom: 1.05rem; left: max(1.05rem, (100vw - var(--platform-max)) / 2); z-index: 5; clip-path: circle(0% at 50% 50%); pointer-events: none; } #lang-overlay.is-open { pointer-events: auto; } #lang-circles-grid { position: absolute; right: 0; top: 0; bottom: 0; width: 22rem; max-width: 100%; border-radius: 24px; background: var(--platform-bg); filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.225)); display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 2rem 2.5rem; overflow-y: auto; } .lang-circle { display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; padding: 0.8rem 1rem; border-radius: 10px; border: none; border-bottom: 1px solid rgba(11, 19, 32, 0.07); background: none; color: var(--navy); cursor: pointer; transition: background 0.15s; } .lang-circle:last-child { border-bottom: none; } .lang-circle:hover { background: rgba(11, 19, 32, 0.05); } .lang-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: rgba(11, 19, 32, 0.07); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; flex-shrink: 0; transition: background 0.15s; } /* flag fills the circle */ .lang-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .lang-circle:hover .lang-icon { background: rgba(11, 19, 32, 0.13); } .lang-label { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; flex: 1; } .lang-circle.is-picked .lang-icon, .lang-circle.is-picked .lang-label { color: var(--secondary); transition: color 0.15s ease; } /* SHORT screens only: when there isn't enough height for one tall column, split the same flag + name rows into TWO columns (≈5 × 2). Narrow-but-tall screens stay single-column (that's the right fit there) — so this triggers on height, not width. Labels stay; spacing just tightens so two fit side by side. */ @media (max-height: 660px) { #lang-circles-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0.5rem; align-content: center; padding: 1.5rem 1.25rem; } .lang-circle { gap: 0.6rem; padding: 0.7rem 0.6rem; } .lang-label { font-size: 0.82rem; } } /* ____________________________________________________________ */ /* _____________________[ BURGER MENU ]________________________ */ /* ____________________________________________________________ */ /* Mirrors the language overlay, but the panel is anchored to the TOP and the fluid platform retreats downward instead of to the side. */ #nav-overlay { position: fixed; top: 1.05rem; right: 1.05rem; bottom: 1.05rem; left: 1.05rem; z-index: 5; clip-path: circle(0% at 50% 50%); pointer-events: none; } #nav-overlay.is-open { pointer-events: auto; } #nav-menu { position: absolute; top: 0; left: 0; right: 0; /* height = content — only takes the space it needs */ border-radius: 24px; background: var(--platform-bg); filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.225)); display: flex; flex-direction: column; padding: 4.25rem 1.75rem 1.25rem; /* top clears the burger + lang row */ } .nav-menu-link { width: 100%; padding: 0.9rem 1rem; border: none; border-bottom: 1px solid rgba(11, 19, 32, 0.07); background: none; color: var(--navy); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .nav-menu-link:last-child { border-bottom: none; } .nav-menu-link:hover { background: rgba(11, 19, 32, 0.05); border-radius: 10px; } .nav-menu-link.is-picked { color: var(--secondary); } /* ____________________________________________________________ */ /* ________________________[ HERO ]____________________________ */ /* ____________________________________________________________ */ /* Sits on the white platform. Left-aligned editorial layout, restrained navy palette, serif headline — "Trust & Authority" not generic SaaS. */ #home { text-align: left; } .hero { width: 100%; max-width: var(--platform-max); margin-inline: auto; padding: 6rem clamp(1.5rem, 5vw, 4.5rem) 3rem; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-text { display: flex; flex-direction: column; align-items: flex-start; } /* — Eyebrow: brand mark (placeholder) + rule + location kicker — */ .hero-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 19, 32, 0.55); } .hero-logo { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); /* PLACEHOLDER — replace with logo */ flex-shrink: 0; } .hero-eyebrow-rule { width: 2.4rem; height: 1px; background: rgba(11, 19, 32, 0.22); } /* — Headline — */ .hero-headline { font-family: var(--font-serif); font-weight: 500; font-size: calc(clamp(2.6rem, 5.2vw, 5rem) * var(--head-scale, 1)); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); margin-top: 1.7rem; } .hero-headline em { font-style: italic; color: var(--secondary); } /* — Subheadline — */ .hero-sub { font-family: var(--font-sans); font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.62; color: rgba(11, 19, 32, 0.62); max-width: 34rem; margin-top: 1.6rem; } /* — CTAs — */ .hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.4rem; } .hero-btn-primary { background: var(--navy); color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; padding: 1rem 1.9rem; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .hero-btn-primary:hover { background: #1b2640; color: var(--secondary); } .hero-btn-ghost { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--navy); font-size: 0.92rem; font-weight: 600; padding: 0.5rem 0.25rem; cursor: pointer; } .hero-btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; } /* — Trust strip: real USPs, hairline divider, dot separators — */ .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.7rem; width: 100%; /* max-width: 38rem; */ margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(11, 19, 32, 0.12); } .hero-trust li { position: relative; font-family: var(--font-sans); font-size: 0.73rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(11, 19, 32, 0.5); } .hero-trust li:not(:last-child)::after { content: ''; position: absolute; right: -0.95rem; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(11, 19, 32, 0.28); } /* — Visual: tall image placeholder — */ .hero-visual { display: flex; justify-content: center; align-items: center; } .hero-image { position: relative; width: 100%; aspect-ratio: 1 / 1; /* perfect square window — matches the 960×960 koi video */ max-width: min(40rem, 70vh); /* cap the side by width AND height, so it never clips or wobbles */ margin-inline: auto; /* border-radius: 16px; */ overflow: hidden; } .hero-image video { width: 100%; height: 100%; object-fit: contain; display: block; } /* ____________________________________________________________ */ /* ____________________[ HERO responsive ]_____________________ */ /* ____________________________________________________________ */ @media (max-width: 880px) { .hero-btn-ghost{display: none;} } @media (max-width: 768px) { .hero { grid-template-columns: 1fr; gap: 2.4rem; padding: 5.5rem 2rem 2.5rem; padding-top: 5.5rem; padding-bottom: 2.5rem; padding-right: max(2rem, 8vw); padding-left: max(2rem, 8vw); } .hero-visual { order: 2; } .hero-image { max-width: min(15rem, 26vh); } /* 1:1 inherited; smaller when stacked */ .hero-headline { font-size: clamp(2.4rem, 8.5vw, 3.6rem); } .hero-sub { margin-top: 0.8rem } } @media (max-width: 480px) { .hero-image { display: none; } /* compact typographic hero on small phones */ .hero-headline br { display: none; } .hero-btn-ghost{display: none;} } @media (max-height: 660px) { .hero-sub { margin-top: 0.8rem;} .hero-cta { margin-top: 1.2rem;} .hero-trust { margin-top: 0.8rem;} .hero-image { max-width: min(30rem, 50vh); } .hero-trust { display: none; } } @media (max-width: 768px) and (max-height: 860px) { .hero-trust { display: none; } .hero-image { max-width: min(15rem, 24vh); } } @media (max-width: 768px) and (max-height: 660px) { .hero-image { display: none;} } /* ____________________________________________________________ */ /* ___________________[ S1 — THE CHALLENGE ]___________________ */ /* ____________________________________________________________ */ /* Problem statement. Header sits on the platform (eyebrow + headline left, explanation right, like the reference). On entering S1 the platform retracts UPWARD and a row of four frosted glass panes (the points) rises into the freed strip below it — same behaviour on every width. JS sets the exact insets so the row honours the platform max-width and clears the cut corner. */ #s1 { text-align: left; } .challenge { width: 100%; max-width: var(--platform-max); margin-inline: auto; padding: 5.5rem clamp(1.5rem, 5vw, 4.5rem) 3rem; display: flex; flex-direction: column; /* JS lifts the copy with translateY so it centres in the white area ABOVE the panes (fullpage centres it in the whole viewport). NO transition — the copy must be at its final spot instantly, never sliding into place. */ } .challenge-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 19, 32, 0.55); } .challenge-index { color: var(--accent); font-weight: 700; } .challenge-eyebrow-rule { width: 2.4rem; height: 1px; background: rgba(11, 19, 32, 0.22); } /* Header: headline left, explanation right (gets more room), top-aligned */ .challenge-grid { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: clamp(1.8rem, 4vw, 4rem); align-items: start; margin-top: 1.6rem; } .challenge-headline { font-family: var(--font-serif); font-weight: 500; font-size: calc(clamp(2.3rem, 4.2vw, 3.9rem) * var(--head-scale, 1)); /* a touch smaller — breaks more cleanly */ line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); } .challenge-headline em { font-style: italic; color: var(--secondary); } .challenge-body-text { font-family: var(--font-sans); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.7; color: rgba(11, 19, 32, 0.62); } .challenge-bridge { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.32; color: var(--navy); margin-top: 1.2rem; } /* ===== Glass panes (the four points) — tuck under the platform's bottom edge and slide DOWN out of it. left/right/top/height set by JS. ===== */ #challenge-cards { position: fixed; z-index: 1; /* behind platform (2): the tucked top stays hidden */ display: flex; gap: 1rem; visibility: hidden; pointer-events: none; } .cc-card { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(calc(-1 * var(--cc-hidden-y, 12rem))); /* tucked up under the platform */ transition: opacity 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1); background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); border-top: none; /* top edge stays under the platform */ border-radius: 0 0 24px 24px; /* rounded bottom only; emerges downward */ filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.225)); /* same shadow as the platform */ padding: 1.3rem 1.4rem; color: #fff; } #challenge-cards.is-open .cc-card { opacity: 1; transform: translateY(0); } #challenge-cards.is-open .cc-card:nth-child(1) { transition-delay: 0s; } #challenge-cards.is-open .cc-card:nth-child(2) { transition-delay: 0.07s; } #challenge-cards.is-open .cc-card:nth-child(3) { transition-delay: 0.14s; } #challenge-cards.is-open .cc-card:nth-child(4) { transition-delay: 0.21s; } /* One-off warm-up (JS adds .warming after load, off-screen): render the cards fully for a couple frames so the browser builds their GPU layer + backdrop-blur BEFORE the first Hero→Challenge scroll — otherwise that first scroll janks doing it live. */ #challenge-cards.warming { visibility: visible; } #challenge-cards.warming .cc-card { opacity: 1; transform: none; transition: none; } .cc-num { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); } .cc-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; color: #fff; margin-top: 0.4rem; } .cc-text { font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); margin-top: 0.45rem; } /* ===== Responsive ===== */ @media (max-width: 1100px) {.cc-text {display: none;}} @media (max-width: 900px) { .challenge { padding-left: max(2rem, 8vw); padding-right: max(2rem, 8vw); } .challenge-grid { grid-template-columns: 1fr; row-gap: 1.2rem; margin-top: 1.4rem; } .challenge-headline br { display: none; } /* one glass pane; points in a 2x2 grid; the whole pane slides down */ #challenge-cards { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 0.5rem 1.2rem; background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); border-top: none; border-radius: 0 0 24px 24px; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.225)); padding: 1.2rem 1.4rem; opacity: 0; transform: translateY(calc(-1 * var(--cc-hidden-y, 12rem))); transition: opacity 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1); } #challenge-cards.is-open { opacity: 1; transform: translateY(0); } .cc-card { opacity: 1; } /* the pane fades as a whole on narrow */ .cc-card { transform: none; transition: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; border-radius: 0; filter: none; padding: 0.3rem 0.2rem; } .cc-text { display: none; } .cc-name { font-size: 1.05rem; } } @media (max-width: 600px) { /* Phone: the single glass pane spans the full platform width (set in JS) and the four points stack as rows — number on the left, name + description on the right. */ #challenge-cards { display: flex; flex-direction: column; justify-content: center; gap: 0; /* top padding = JS overlap (3rem tucked under the platform, hides the glass top edge) + ~1rem air above the first row. Glass extends up; content stays. */ padding: 6rem clamp(1.3rem, 5vw, 1.9rem) 0; } .cc-card { flex: 0 0 auto; /* rows are content-height, not stretched */ display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 0.6rem 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .cc-card:first-child { border-top: none; } .cc-num { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 0.15rem; font-size: 0.78rem; } .cc-name { grid-column: 2; grid-row: 1; font-size: 1.2rem; margin-top: 0; } } @media (max-width: 480px) { .challenge-headline { font-size: clamp(2.1rem, 9vw, 3rem); } } /* Small / short phones: header text ~7% smaller to free a little vertical space. */ @media (max-width: 600px) and (max-height: 740px) { .challenge { padding-top: 3rem; } .challenge-headline { font-size: clamp(1.95rem, 8.4vw, 2.8rem); } .challenge-body-text { font-size: 0.9rem; } .challenge-bridge { font-size: 1.15rem; margin-top: 0.6rem;} .challenge-grid{row-gap: 1rem;} .bridge-extra { display: none; } /* → "Building that presence is our work." */ /* contact: the white band is short on small phones — the text has to come down a notch */ .contact-headline { font-size: calc(clamp(1.85rem, 7.5vw, 2.2rem) * var(--head-scale, 1)); margin-top: 0.9rem; } .contact-promise { font-size: 0.85rem; margin-top: 1rem; } /* (the eyebrow hiding for tiny screens lives at the END of the file — it has to come after every eyebrow's base rule to win the cascade) */ .contact-left { top: calc(100% - (100svh - var(--contact-split)) + 2.1rem); } /* title closer to the white's top edge (cbtn row reaches 1.25rem in) — bottom-anchored like .contact-btns */ .contact-headline { margin-top: 0; } /* eyebrow above it is hidden anyway */ } /* ____________________________________________________________ */ /* ___________________[ SECTION 2 — THE OFFER ]________________ */ /* ____________________________________________________________ */ /* No white platform here — it fades fully out (JS) and three frosted-glass stage cards (Prepare → Launch → Grow) stand on the dark stage. Outcome-first: each card leads with the RESULT; disciplines are only small tags. Oversized ghost numerals give editorial depth. */ #s2 { text-align: left; } .offer { width: 100%; max-width: var(--platform-max); margin-inline: auto; padding: clamp(3rem, 7vh, 5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 5vh, 3.5rem); visibility: hidden; /* shown by JS once the white has faded */ } .offer.is-on { visibility: visible; } .offer-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .offer-index { color: var(--accent); font-weight: 700; } .offer-rule { width: 2.4rem; height: 1px; background: rgba(255, 255, 255, 0.25); } .offer-headline { font-family: var(--font-serif); font-weight: 500; font-size: calc(clamp(2.3rem, 4.2vw, 3.9rem) * var(--head-scale, 1)); /* matched to .challenge-headline */ line-height: 1.12; letter-spacing: -0.015em; color: #fff; margin-top: 1.1rem; max-width: 20ch; } .offer-headline em { font-style: italic; color: var(--secondary); } .offer-sub { font-family: var(--font-sans); font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin-top: 1rem; max-width: 48ch; } /* ===== the three stages — a glass triptych ===== */ .offer-tiers { list-style: none; margin-top: clamp(1.8rem, 4vh, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.4vw, 1.4rem); } .tier { position: relative; display: flex; flex-direction: column; min-height: clamp(13rem, 30vh, 17rem); padding: clamp(1.5rem, 2vw, 2.1rem); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 24px; filter: drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.25)); color: #fff; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s ease; } .tier:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.42); } .tier-phase { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--secondary); } .tier-result { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.13; color: #fff; margin-top: 0.7rem; } .tier-body { font-family: var(--font-sans); font-size: clamp(0.86rem, 0.95vw, 0.95rem); line-height: 1.6; color: rgba(255, 255, 255, 0.66); margin-top: 0.8rem; } .tier-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: auto; padding-top: 1.1rem; } .tier-tags li { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.24rem 0.6rem; } /* ===== responsive ===== */ @media (max-width: 900px) { .offer-headline { font-size: clamp(1.6rem, 5.5vw, 2.4rem); } } /* Narrow OR short → drop the supplementary sub + body sentence so the three cards always fit on one screen (fullpage.js doesn't scroll within a section). The result line + tags carry the message. */ @media (max-width: 820px), (max-height: 660px) { .offer-sub { display: none; } .tier-body { display: none; } .tier { min-height: 0; } } /* 3-column but short height → compact the paddings so the row fits. */ @media (max-height: 740px) and (min-width: 601px) { .offer { padding-top: clamp(2.5rem, 6vh, 4rem); padding-bottom: 1.5rem; } .tier { padding: 1.2rem 1.4rem; } .offer-tiers { margin-top: 1.4rem; } } /* Phones: one column, compact. */ @media (max-width: 700px) { .offer { padding-top: 3.5rem; padding-bottom: 1.5rem; } .offer-headline { font-size: clamp(1.5rem, 6.5vw, 2.1rem); } .offer-tiers { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.3rem; } .tier { padding: 1rem 1.2rem; } .tier-result { font-size: 1.2rem; margin-top: 0.4rem; } .tier-tags { margin-top: 0.7rem; } } @media (max-width: 600px) and (max-height: 680px) { .offer { padding-top: 3rem; } .offer-headline { font-size: clamp(1.3rem, 5.5vw, 1.75rem); } .offer-tiers { gap: 0.5rem; margin-top: 0.9rem; } .tier { padding: 0.8rem 1.1rem; } .tier-result { font-size: 1.05rem; } .tier-tags { margin-top: 0.5rem; } } /* ============================================================ Text reveal on section enter — slide in from the side, staggered ============================================================ Text elements start offset to the left + faded. When their section becomes active JS adds .rv-in to the section (plus a per-element transition-delay = the stagger), so the text slides in AFTER the section has settled. Removing .rv-in snaps them back to hidden with NO transition, and JS only does that once the section is already off-screen — so nothing is ever seen sliding OUT. Nav bar and language menu are deliberately excluded. Gated by .rv-ready (added by JS) so text is never hidden when scripting is unavailable. */ .rv-ready :is(.hero-eyebrow, .hero-headline, .hero-sub, .hero-cta, .hero-trust, .challenge-eyebrow, .challenge-headline, .challenge-body-text, .challenge-bridge, .offer-eyebrow, .offer-headline, .offer-sub, .tier, .why-eyebrow, .why-headline, .why-sub, .contact-eyebrow, .contact-headline, .contact-sub, .contact-promise, .contact-foot) { opacity: 0; transform: translateX(-2.6rem); } .rv-ready .rv-in :is(.hero-eyebrow, .hero-headline, .hero-sub, .hero-cta, .hero-trust, .challenge-eyebrow, .challenge-headline, .challenge-body-text, .challenge-bridge, .offer-eyebrow, .offer-headline, .offer-sub, .tier, .why-eyebrow, .why-headline, .why-sub, .contact-eyebrow, .contact-headline, .contact-sub, .contact-promise, .contact-foot) { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); } /* Menu (language / burger) open: non-glass reveal text animates back OUT — twice as fast as it came in and all at once (delay 0, overriding the per-element arrival stagger via !important). .tier is GLASS → deliberately excluded here. On close, .rv-out is removed and the untouched inline stagger + the .rv-in speed above bring it back in completely unchanged. */ .rv-ready .rv-out :is(.hero-eyebrow, .hero-headline, .hero-sub, .hero-cta, .hero-trust, .challenge-eyebrow, .challenge-headline, .challenge-body-text, .challenge-bridge, .offer-eyebrow, .offer-headline, .offer-sub, .why-eyebrow, .why-headline, .why-sub, .contact-eyebrow, .contact-headline, .contact-sub, .contact-promise, .contact-foot) { opacity: 0; transform: translateX(-2.6rem); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.425s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0s !important; } /* Hero video — a visual reveal (fade + settle-in zoom), tied to the SAME section .rv-in as the text, but its own timing and NOT a slide (it's the big visual, not a text line). Both rules carry #home so the shown state out-specifies the hidden one. */ .rv-ready #home .hero-image { opacity: 0; transform: scale(1.06); } .rv-ready #home.rv-in .hero-image { opacity: 1; transform: scale(1); transition: opacity 1s ease, transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0.28s; /* arrives just after the headline starts sliding in */ } /* Opening the language / burger overlay fades the hero video (the fish) back OUT — twice as fast as it faded in (0.5s/0.625s vs 1s/1.25s) and starting immediately (delay 0). .hero-out flips the target back to hidden and overrides the transition to the faster one; higher specificity (extra .hero-out) so it wins. On close, .hero-out is removed → it fades in again unchanged (the .rv-in speed + arrival delay above). */ .rv-ready #home.rv-in.hero-out .hero-image { opacity: 0; transform: scale(1.06); transition: opacity 0.5s ease, transform 0.625s cubic-bezier(0.16, 1, 0.3, 1); /* out: 2× faster than the in */ transition-delay: 0s; } /* Tiny screens: every eyebrow except the hero's goes — they steal height the text needs. Kept at the END of the file on purpose: the eyebrows' base rules (display: flex) are spread through the file, and this must come after ALL of them to win the cascade. */ @media (max-width: 600px) and (max-height: 740px) { .challenge-eyebrow, .offer-eyebrow, .why-eyebrow, .contact-eyebrow { display: none; } }