/* GENERATED by tools/i18n/generate.py — DO NOT EDIT. Concatenation of the section stylesheets in cascade order. Edit the individual css/*.css files and re-run generate.py. */ /* ===== reset.css ===== */ /* Meyer reset 2.0 (public domain, http://meyerweb.com/eric/tools/css/reset/). FDID-1146: self-hosted (was @import/cdnjs) and folded into bundle.css so it costs zero extra render-blocking requests. Must stay FIRST in the bundle cascade. */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} /* ===== globals.css ===== */ /* FDID-1146: the meyer reset + Google Fonts were @import-ed here, which forces a serial render-blocking chain (globals.css must download before the browser even discovers them). They are now loaded as direct tags in index.html (parallel + discoverable), so keep them OUT of this file. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #131313; color: #ffffff; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* ── Complianz cookie banner: hide before external CSS loads ── The banner HTML has .cmplz-hidden from the start, but the CSS that enforces display:none lives on an external domain (cas.ai). On hard refresh the external file waits for network → brief FOUC shows the unstyled banner + white × at top of page. This local rule loads instantly from disk and prevents that flash. */ .cmplz-hidden { display: none !important; } .grecaptcha-badge { visibility: hidden !important; } /* ===== styleguide.css ===== */ /* FDID-1146: metric-matched fallback faces so the local system font occupies the same box as Montserrat/Raleway. Combined with `display=optional` on the Google Fonts , the web font never repaints mid-page (no layout shift → CLS 0), and the first-paint fallback closely matches the real font's size. Montserrat metrics per the caards CWV round; Raleway from Capsize/Arial. */ @font-face { font-family: "Montserrat Fallback"; src: local("Arial"); ascent-override: 96.88%; descent-override: 25.12%; line-gap-override: 0%; size-adjust: 112.32%; } @font-face { font-family: "Raleway Fallback"; src: local("Arial"); ascent-override: 96.34%; descent-override: 24.4%; line-gap-override: 0%; size-adjust: 99.55%; } :root { /* Brand colors */ --blue-ribbon: #0172fd; /* Brand-orange for the main CTA button (.hero__bttn) only — form submit and text accents stay on --blue-ribbon. */ --accent-btn: #ff4900; --accent-btn-d: #ef4500; --eerie-black: #181818; --licorice: #141414; --licorice-2: #13131399; --cod-gray: #131313; --silver-chalice: #afafaf; --cultured-pearl: #f4f5f5; --white: #ffffffcc; --white-solid: #ffffff; --persian-red: #c93227; --sonic-silver: #767676; --santas-gray: #9ca3af; --pale-sky: #6b7280; --scarpa-flow: #4b5563; --bright-gray: #374151; --science-blue: #004fe3; --quill-gray: #d4d4d4; --red-orange: #ff4736; --tropical-blue: #bfdbff; /* Fonts */ --font-montserrat: "Montserrat", "Montserrat Fallback", Helvetica, sans-serif; --font-raleway: "Raleway", "Raleway Fallback", Helvetica, sans-serif; /* Font sizes (design scale) */ --fs-10: 10px; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-36: 36px; --fs-40: 40px; --fs-44: 44px; --fs-48: 48px; --fs-64: 64px; --fs-72: 72px; --fs-84: 84px; /* Spacing */ --page-max: 1600px; --page-pad: 160px; --page-pad-sm: 80px; --page-pad-xs: 24px; } /* ===== layout.css ===== */ /* ─── Page wrapper ───────────────────────────────────────────── */ .page { background-color: var(--cod-gray); overflow-x: clip; position: relative; width: 100%; } @media (min-width: 1025px) { html { zoom: 0.78; } .cta-section { zoom: 1.282051; width: calc(100% / 1.282051); margin-left: auto; margin-right: auto; } } /* ─── Content container ──────────────────────────────────────── */ .container { max-width: calc(var(--page-max) + var(--page-pad) * 2); margin: 0 auto; padding: 0 var(--page-pad); position: relative; width: 100%; } /* ─── CTA button (shared across sections) ───────────────────── */ .bttn { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 21px; padding: 18px 32px; position: relative; cursor: pointer; white-space: nowrap; transition: border-color 0.2s, box-shadow 0.2s; } .bttn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: rgba(244,245,245,0.01); box-shadow: 0 5.28px 7.92px -5.28px rgba(1,114,253,.25), 0 13.2px 19.8px -3.96px rgba(1,114,253,.25); } .bttn:hover { border-color: rgba(1,114,253,0.5); box-shadow: 0 0 24px rgba(1,114,253,0.15); } .bttn__text { font-family: var(--font-raleway), sans-serif; font-size: var(--fs-32); font-weight: 600; color: var(--cultured-pearl); letter-spacing: 0; line-height: 1; position: relative; } .bttn__icon { display: flex; align-items: center; position: relative; } .bttn__icon img { width: 32px; height: 32px; } /* ─── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1600px) { :root { --page-pad: 80px; } } @media (max-width: 1280px) { :root { --page-pad: 40px; } .bttn__text { font-size: var(--fs-24); } } @media (max-width: 900px) { :root { --page-pad: var(--page-pad-xs); } .bttn__text { font-size: var(--fs-18); } .bttn { padding: 14px 24px; } } /* ===== scroll-reveal.css ===== */ /* ─── Scroll-reveal system ──────────────────────────────────────── Usage: add data-reveal="up|left|right|fade" to any element. Optionally add data-reveal-delay="150" (ms) for stagger. JS adds .is-revealed when element enters viewport. Progressive enhancement: without JS elements stay visible. ──────────────────────────────────────────────────────────────── */ /* ── Base hidden state ───────────────────────────────────────── */ [data-reveal] { opacity: 0; transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), transform 0.85s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } [data-reveal="up"] { transform: translateY(30px); } [data-reveal="left"] { transform: translateX(-44px); } [data-reveal="right"] { transform: translateX(44px); } [data-reveal="fade"] { transform: none; } /* ── Revealed state ──────────────────────────────────────────── */ [data-reveal].is-revealed { opacity: 1; transform: none; } /* ════════════════════════════════════════════════════════════════ GROW ANIMATIONS — clip-path reveals (opacity stays 1, clip hides) grow-down : reveals top → bottom (stripes, vertical lines) grow-right: reveals left → right (horizontal lines) ════════════════════════════════════════════════════════════════ */ [data-reveal="grow-down"], [data-reveal="grow-right"] { opacity: 1; /* clip-path handles hiding, not opacity */ transform: none; will-change: clip-path; transition: clip-path 2.4s cubic-bezier(0.4, 0, 0.2, 1); } [data-reveal="grow-down"] { clip-path: inset(0 0 100% 0); } [data-reveal="grow-right"] { clip-path: inset(0 100% 0 0); } [data-reveal="grow-down"].is-revealed, [data-reveal="grow-right"].is-revealed { clip-path: inset(0 0 0% 0); } /* ===== hero.css ===== */ /* ─── Hero section ───────────────────────────────────────────── */ /* Pixel-accurate stage at 1920px, scaled via zoom breakpoints. */ /* Stage height 1150px covers h1 (196) + body (464) + */ /* button (660) + map (711–1277) + dots (734–1148). */ /* ─── Hero load animation (above-fold, no scroll trigger) ────── */ @keyframes heroRevealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes heroLogoReveal { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .hero__h1 { animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; } .hero__body { animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.42s both; } .hero__bttn-wrap { animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.64s both; } .hero { overflow-x: clip; position: relative; z-index: 1; } /* ─── Logo ───────────────────────────────────────────────────── */ .hero__logo { height: 70px; width: auto; position: absolute; top: 40px; left: 50%; z-index: 2; pointer-events: none; animation: heroLogoReveal 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0s both; } .hero__stage { position: relative; width: 2000px; height: 1557px; left: 50%; transform: translateX(-50%); } /* ─── Visual layer wrappers (desktop: transparent pass-through) ── On desktop, .hero__anim-wrap sits at absolute 0,0 with overflow:visible so children keep their original coordinates relative to .hero__stage. On mobile, .hero__anim-wrap becomes a clipping flex item and .hero__anim-stage gets scaled + offset to center the board. */ .hero__anim-wrap { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; pointer-events: none; } .hero__anim-stage { position: absolute; top: 0; left: 0; width: 2000px; height: 1557px; } /* ─── Spine animation canvas ─────────────────────────────────── */ #hero-spine-canvas { position: absolute; top: 0; left: 0; width: 2000px; height: 1557px; opacity: 0; pointer-events: none; z-index: 0; } /* ─── Map background ─────────────────────────────────────────── */ .hero__map { height: 566px; left: 0; position: absolute; top: 711px; width: 2000px; object-fit: cover; pointer-events: none; } /* ─── Dots overlay on map ────────────────────────────────────── */ .hero__dots { height: 414px; left: 431px; position: absolute; top: 734px; width: 1435px; pointer-events: none; z-index: 1; } /* ─── H1: "One SDK. / Harmonized Revenue. / Tier-1..." ──────── */ .hero__h1 { align-items: flex-start; display: flex; flex-direction: column; gap: 12px; left: 160px; position: absolute; top: 196px; width: 911px; z-index: 2; } .hero__title { align-items: center; align-self: stretch; color: var(--blue-ribbon); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 84px; font-weight: 800; letter-spacing: -1.5px; line-height: 84px; margin-top: -1px; } .hero__subtitle-wrap { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 4px; } .hero__subtitle-line--white { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -1.5px; line-height: 64px; margin-top: -1px; width: 742px; } .hero__subtitle-line--gradient { background: linear-gradient(90deg, var(--blue-ribbon) 0%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; align-items: center; display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -1.5px; line-height: 64px; width: 742px; } /* ─── Body text ──────────────────────────────────────────────── */ .hero__body { align-items: flex-start; display: inline-flex; flex-direction: column; gap: 12px; left: 160px; position: absolute; top: 464px; z-index: 2; } .hero__lead { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -0.5px; line-height: 38px; margin-top: -1px; white-space: nowrap; } .hero__desc { color: var(--silver-chalice); font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 39.2px; width: 803px; } /* ─── CTA Button ─────────────────────────────────────────────── */ .hero__bttn-wrap { display: inline-flex; left: 160px; position: absolute; top: 660px; z-index: 2; } .hero__bttn { align-items: center; background-color: var(--accent-btn); border-radius: 21.12px; cursor: pointer; display: flex; gap: 0; padding: 21.12px 36.96px; position: relative; } .hero__bttn-shadow { background-color: rgba(244, 245, 245, 0.01); border-radius: 21.12px; box-shadow: 0 5.28px 7.92px -5.28px rgba(255, 73, 0, 0.25), 0 13.2px 19.8px -3.96px rgba(255, 73, 0, 0.25); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .hero__bttn-text { align-items: center; color: var(--cultured-pearl); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 32px; font-weight: 600; letter-spacing: 0; line-height: 31.7px; margin-top: -1.32px; position: relative; white-space: nowrap; } .hero__bttn-icon-wrap { padding: 0 0 0 10.56px; width: 36.96px; position: relative; } .hero__bttn-icon { display: flex; justify-content: center; width: 26.4px; } .hero__bttn-icon img { flex: 1; width: 26.4px; } /* ─── sdk-1: ONE SDK board + decorative lines ────────────────── */ .hero__sdk1 { height: 1422px; left: 896px; position: absolute; top: 133px; width: 943px; } /* Long vertical "spine" line (right edge of board, extends to map). z-index: 5 — breaks through above integration in the overlap zone. */ .hero__sdk1-v31 { height: 1086px; left: 480px; position: absolute; top: 350px; width: 240px; z-index: 5; } /* Left curve (from left side of board, swoops down-left) */ .hero__sdk1-v33 { height: 403px; left: -1px; position: absolute; top: 216px; width: 274px; } /* Right outer thin line */ .hero__sdk1-v36 { height: 439px; left: 698px; position: absolute; top: 286px; width: 68px; } /* Far right line */ .hero__sdk1-v29 { height: 508px; left: 777px; position: absolute; top: 215px; width: 167px; } /* Center-left vertical wire */ .hero__sdk1-v34 { height: 363px; left: 422px; position: absolute; top: 315px; width: 33px; } /* Center thin wire */ .hero__sdk1-v35 { height: 343px; left: 583px; position: absolute; top: 330px; width: 2px; } /* Left thick wire to map */ .hero__sdk1-v30 { height: 561px; left: 193px; position: absolute; top: 295px; width: 174px; } /* Right mid wire to map */ .hero__sdk1-v32 { height: 502px; left: 640px; position: absolute; top: 321px; width: 24px; } /* ─── ONE SDK board (circuit-board visual) ───────────────────── */ .hero__onesdk { height: 348px; left: 271px; position: absolute; top: 0; width: 508px; } .hero__onesdk-bg { background-image: url(../img/img.png); /* fallback for browsers without image-set/webp */ background-image: image-set(url(../img/img.webp) type("image/webp"), url(../img/img.png) type("image/png")); background-position: 50% 50%; background-size: cover; height: 348px; left: 0; position: absolute; top: 0; width: 507px; } .hero__onesdk-v26 { height: 332px; left: -5px; position: absolute; top: -5px; width: 518px; } .hero__onesdk-v27 { height: 168px; left: -5px; position: absolute; top: 185px; width: 518px; } .hero__onesdk-v25 { height: 276px; left: 61px; position: absolute; top: 12px; width: 391px; } /* vector-24 and vector-28 share same CSS class .vector-2 */ .hero__onesdk-v24 { height: 243px; left: 85px; position: absolute; top: 23px; width: 343px; } .hero__onesdk-v28 { height: 243px; left: 85px; position: absolute; top: 23px; width: 343px; } /* "ONE SDK" text inside the board */ .hero__onesdk-label { display: flex; height: 68px; left: 119px; position: absolute; top: 109px; width: 275px; align-items: center; color: var(--tropical-blue); font-family: var(--font-raleway), sans-serif; font-size: 68.5px; font-style: italic; font-weight: 600; letter-spacing: -2.44px; line-height: 68.5px; text-shadow: 0 0 7.1px #0d1626; white-space: nowrap; } /* ─── Small CAS.AI icon (top-right decoration) ───────────────── */ .hero__icon61 { height: 83px; left: 1790px; position: absolute; top: 1078px; width: 83px; } /* ─── Zoom scaling (stage is 2000px wide) ────────────────────── */ /* Formula: breakpoint / 2000 */ @media (max-width: 1999px) { .hero { zoom: 0.96; } } @media (max-width: 1800px) { .hero { zoom: 0.90; } } @media (max-width: 1700px) { .hero { zoom: 0.85; } } @media (max-width: 1600px) { .hero { zoom: 0.80; } } @media (max-width: 1500px) { .hero { zoom: 0.75; } } @media (max-width: 1400px) { .hero { zoom: 0.70; } } @media (max-width: 1280px) { .hero { zoom: 0.64; } } @media (max-width: 1100px) { .hero { zoom: 0.55; } } /* ═══════════════════════════════════════════════════════════════ MOBILE / TABLET LAYOUT ≤ 1024px Order: h1 → body → animation → button (via CSS order). Wrapper height = (711 + 200) * scale → board + map visible. left = calc(50% − 1421 * scale) → board centered at any width. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* ── Reset zoom ── */ .hero { zoom: 1; } /* ── Stage: flex column ── */ .hero__stage { width: 100%; height: auto; left: auto; transform: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 210px 24px 96px; gap: 20px; } /* ── Flex order: text first, animation second, button last ── */ .hero__h1 { order: 1; } .hero__body { order: 2; } .hero__anim-wrap { order: 3; } .hero__bttn-wrap { order: 4; } /* ── H1: flow ── */ .hero__h1 { position: relative; left: auto; top: auto; width: 100%; gap: 6px; z-index: 2; } .hero__title { font-size: 56px; line-height: 58px; letter-spacing: -1px; } .hero__subtitle-line--white, .hero__subtitle-line--gradient { font-size: 44px; line-height: 46px; letter-spacing: -1px; width: auto; /* reset desktop 742px */ } /* ── Body: flow ── */ .hero__body { position: relative; left: auto; top: auto; gap: 8px; z-index: 2; width: 100%; max-width: 560px; } .hero__lead { font-size: 24px; line-height: 30px; white-space: normal; } .hero__desc { font-size: 20px; line-height: 28px; width: auto; max-width: 100%; letter-spacing: -0.3px; } /* ── Animation wrapper ────────────────────────────────────── scale 0.70: visible stage area = height / 0.70 890px → shows stage to y≈1271 (map 711–1277 full, dots 734–1148 full) */ .hero__anim-wrap { position: relative; width: 100%; height: 890px; overflow: hidden; flex-shrink: 0; pointer-events: none; left: auto; top: auto; } /* ── Gradient fade: hides curved wire endings at bottom ── */ .hero__anim-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, #131313); pointer-events: none; z-index: 2; } /* scale 0.70 → board center x=995, left: calc(50% − 995px) */ .hero__anim-stage { position: absolute; top: 0; left: calc(50% - 995px); width: 2000px; height: 1557px; transform-origin: 0 0; transform: scale(0.70); } /* ── CTA button: 70% width, centered ── */ .hero__bttn-wrap { position: relative; left: auto; top: auto; z-index: 2; align-self: center; width: 80%; display: flex; } .hero__bttn { width: 100%; justify-content: center; padding: 10px 20px; border-radius: 12px; gap: 10px; } .hero__bttn-shadow { border-radius: 12px; } .hero__bttn-text { font-size: clamp(15px, 2.6vw, 23px); line-height: 1.3; white-space: nowrap; } .hero__bttn-icon-wrap { padding: 0 0 0 6px; width: 26px; } /* ── Logo: scale down slightly ── */ .hero__logo { height: 48px; top: 24px; } /* ── Decorative icon: hide ── */ .hero__icon61 { display: none; } } /* ── Per-breakpoint adjustments ─────────────────────────────── Formula: left = calc(50% − 1421 * scale) Height = 911 * scale */ @media (max-width: 768px) { .hero__title { font-size: 50px; line-height: 52px; } .hero__subtitle-line--white, .hero__subtitle-line--gradient { font-size: 40px; line-height: 42px; } .hero__lead { font-size: 22px; line-height: 28px; } /* scale 0.60: visible to y≈1270 */ .hero__anim-wrap { height: 762px; } .hero__anim-stage { transform: scale(0.60); left: calc(50% - 853px); } } @media (max-width: 540px) { .hero__title { font-size: 44px; line-height: 46px; } .hero__subtitle-line--white, .hero__subtitle-line--gradient { font-size: 34px; line-height: 36px; } .hero__lead { font-size: 20px; line-height: 26px; } .hero__desc { font-size: 18px; line-height: 25px; } /* scale 0.52: visible to y≈1269 */ .hero__anim-wrap { height: 660px; } .hero__anim-stage { transform: scale(0.52); left: calc(50% - 739px); } } @media (max-width: 430px) { .hero__stage { padding: 120px 20px 80px; gap: 16px; } .hero__title { font-size: 40px; line-height: 42px; } .hero__subtitle-line--white, .hero__subtitle-line--gradient { font-size: 32px; line-height: 34px; } .hero__lead { font-size: 18px; line-height: 24px; } .hero__desc { font-size: 16px; line-height: 22px; } /* scale 0.46: visible to y≈1269 */ .hero__anim-wrap { height: 584px; } .hero__anim-stage { transform: scale(0.46); left: calc(50% - 654px); } .hero__bttn-wrap { width: 92%; } .hero__bttn-text { font-size: clamp(13px, 3.6vw, 15px); white-space: nowrap; } } /* 2K–4K upscale */ @media (min-width: 2200px) { .hero { zoom: 1.10; } } @media (min-width: 2800px) { .hero { zoom: 1.40; } } @media (min-width: 3840px) { .hero { zoom: 1.92; } } /* ── CTA Button: electric current animation ─────────────────── */ @property --ea { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes electricRun { to { --ea: 360deg; } } @keyframes btnGlowPulse { 0%, 100% { box-shadow: 0 5.28px 7.92px -5.28px rgba(1, 114, 253, 0.25), 0 13.2px 19.8px -3.96px rgba(1, 114, 253, 0.25); } 50% { box-shadow: 0 0 28px rgba(1, 114, 253, 0.65), 0 0 56px rgba(1, 114, 253, 0.30); } } /* Rotating electric arc around the button border */ .hero__bttn-wrap::before { content: ''; position: absolute; inset: -3px; border-radius: 24px; background: conic-gradient( from var(--ea), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.6) 11%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0.6) 19%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 100% ); animation: electricRun 4s linear infinite; filter: blur(1.5px); z-index: -1; will-change: transform; } /* Synchronized glow pulse on the button shadow */ .hero__bttn-shadow { animation: btnGlowPulse 4s ease-in-out infinite; } /* Hover: arc speeds up, glow intensifies */ .hero__bttn-wrap:hover::before { animation-duration: 2s; filter: blur(2.5px); } .hero__bttn-wrap:hover .hero__bttn-shadow { animation-duration: 2s; } /* Hover: subtle scale on the button + darker orange */ .hero__bttn { transition: transform 0.3s ease, filter 0.3s ease, background-color 0.2s ease; } .hero__bttn-wrap:hover .hero__bttn { transform: scale(1.02); background-color: var(--accent-btn-d); } /* ── CTA Arrow: electric teleport ───────────────────────────── */ /* Arrow stretches right → flash → disappears → */ /* reappears from left → snaps back. 4s synced with arc. */ @keyframes arrowTeleport { /* rest */ 0%, 40% { transform: translateX(0) scaleX(1); opacity: 1; filter: none; } /* shoot right + stretch + flash */ 62% { transform: translateX(20px) scaleX(1.6); opacity: 0; filter: blur(3px) brightness(3); } /* jump back left, invisible */ 63% { transform: translateX(-8px) scaleX(0.7); opacity: 0; filter: none; } /* smooth return */ 80%, 100% { transform: translateX(0) scaleX(1); opacity: 1; filter: none; } } .hero__bttn-icon img { animation: arrowTeleport 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; will-change: transform, opacity; } /* Hover: speeds up in sync with the arc */ .hero__bttn-wrap:hover .hero__bttn-icon img { animation-duration: 2s; } /* ===== integration.css ===== */ /* ─── Integration section ────────────────────────────────────── */ /* Stage 1920 × 1500px (y 1301–2800 of original sdk.css). */ /* Elements positioned relative to section top (y − 1301). */ .integration { overflow-x: clip; position: relative; z-index: 2; margin-top: -300px; } /* Smooth fade over the hero in the overlap zone. z-index: 0 — below stage (z-index:1), above hero (z-index:1 in parent context). */ .integration::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 300px; background: linear-gradient(to bottom, transparent 0%, var(--cod-gray) 100% ); pointer-events: none; z-index: 0; } .integration__stage { position: relative; width: 1920px; height: 1500px; left: 50%; transform: translateX(-50%); z-index: 1; } /* ════════════════════════════════════════════════════════════════ H2 HEADING — top:1301 → stage y:0 left:160, width:1600, height:214 Staggered layout (matches screenshot): Line 1 (y=0): "One Integration." — left-aligned, 595px wide Line 2 (y=88): "Infinite Monetization Paths." — offset left 595px Line 3 (y=176): subtitle — same 595px offset ════════════════════════════════════════════════════════════════ */ .integration__heading { left: 160px; position: absolute; top: 0; width: 1600px; } /* "One Integration." — row 1, left-aligned */ .integration__title-blue { -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; align-items: center; background: linear-gradient(90deg, rgba(1, 114, 253, 1) 0%, rgba(0, 79, 227, 1) 100%); background-clip: text; color: transparent; display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 72px; font-weight: 700; height: 72px; left: 0; letter-spacing: -1.5px; line-height: 72px; position: absolute; top: 0; white-space: nowrap; } /* "Infinite Monetization Paths." + subtitle — rows 2+3, offset 595px to the right (starts where "One Integration." ends) */ .integration__title-right { align-items: flex-start; display: flex; flex-direction: column; gap: 16px; left: 595px; position: absolute; top: 88px; /* 72px (line-1 height) + 16px (gap) */ width: 1040px; } .integration__title-main { align-items: center; align-self: stretch; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 72px; font-weight: 700; letter-spacing: -1.5px; line-height: 72px; margin-top: -1px; } .integration__subtitle { align-self: stretch; color: var(--blue-ribbon); display: block; font-family: var(--font-raleway), sans-serif; font-size: 32px; font-weight: 500; letter-spacing: -0.5px; line-height: 38.4px; } .integration__subtitle .highlight { color: var(--white-solid); letter-spacing: -0.16px; font-size: 42px; line-height: 42px; /* ≥ font-size to prevent line clipping */ padding: 0 5px; margin-bottom: 10px; position: relative; display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap; } .highlight__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } /* ════════════════════════════════════════════════════════════════ CARD "Immediate Global Scale" top:1584 → stage y:283 left:160 875×261 ════════════════════════════════════════════════════════════════ */ .integration__card { background-color: var(--eerie-black); background-image: linear-gradient( 169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100% ); border-radius: 44px; height: 261px; left: 160px; position: absolute; top: 283px; width: 875px; } /* Inner text block: left:36, top:40 */ .integration__card-inner { align-items: flex-start; display: inline-flex; flex-direction: column; gap: 20px; left: 36px; position: absolute; top: 40px; } .integration__card-title { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 44px; font-weight: 700; justify-content: center; letter-spacing: -1.5px; line-height: 44px; margin-top: -1px; white-space: nowrap; } .integration__card-text { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 39.2px; width: 790px; } /* ════════════════════════════════════════════════════════════════ SDK ANIMATION top:1584 → stage y:283 left:1092 667×1109 ════════════════════════════════════════════════════════════════ */ .integration__anim { height: 1210px; left: 1092px; overflow: hidden; position: absolute; top: 283px; width: 667px; } #integration-spine-canvas { height: 1207px; left: -87px; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 841px; z-index: 0; } /* ── group-23499: left column (names+arrows) + right column (hub+cards) ── */ .integration__anim-inner { height: 862px; left: 0; position: absolute; top: 0; width: 667px; } /* ── Left sub-column: 3 network name labels with arrows ── */ /* AdMob — top:215 */ .integration__net-admob { height: 108px; left: 0; position: absolute; top: 215px; width: 291px; } /* AppLovin — top:420 */ .integration__net-applovin { height: 108px; left: 0; position: absolute; top: 420px; width: 291px; } /* IronSource — top:625 */ .integration__net-ironsource { height: 108px; left: 0; position: absolute; top: 625px; width: 291px; } /* Network name text (shared .ad class) */ .integration__net-name { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 36px; font-weight: 500; height: 40px; left: 58px; letter-spacing: -1.5px; line-height: 39.6px; position: absolute; top: 0; white-space: nowrap; } /* Arrow SVG (vector-37) */ .integration__net-arrow { height: 111px; left: -5px; position: absolute; top: -3px; width: 295px; } /* ── Right sub-column: ONE SDK hub + 3 network cards ── */ .integration__hub-col { height: 862px; left: 286px; position: absolute; top: 0; width: 381px; } /* ONE SDK smaller logo (top:0, 377×259) */ .integration__hub-logo { height: 259px; left: 3px; position: absolute; top: 0; width: 377px; z-index: 20; } .integration__hub-logo-bg { background-image: url(../img/img.png); /* fallback for browsers without image-set/webp */ background-image: image-set(url(../img/img.webp) type("image/webp"), url(../img/img.png) type("image/png")); background-position: 50% 50%; background-size: cover; height: 259px; left: 1px; position: absolute; top: 1px; width: 377px; } .integration__hub-v26 { height: 246px; left: -4px; position: absolute; top: -4px; width: 385px; } .integration__hub-v27 { height: 125px; left: -4px; position: absolute; top: 137px; width: 385px; } .integration__hub-v25 { height: 205px; left: 46px; position: absolute; top: 9px; width: 291px; } .integration__hub-v24 { height: 180px; left: 63px; position: absolute; top: 17px; width: 255px; } .integration__hub-v28 { height: 180px; left: 63px; position: absolute; top: 17px; width: 255px; } .integration__hub-label { align-items: center; color: var(--tropical-blue); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 50.9px; font-style: italic; font-weight: 600; height: 51px; left: 88px; letter-spacing: -1.82px; line-height: 50.9px; position: absolute; text-shadow: 0 0 5.28px #0d1626; top: 82px; white-space: nowrap; width: 205px; } /* Network card — AdMob (top:197) */ .integration__net-card { background-image: url(../img/image-938@2x.png); /* fallback for browsers without image-set/webp */ background-image: image-set(url(../img/image-938@2x.webp) type("image/webp"), url(../img/image-938@2x.png) type("image/png")); background-position: 50% 50%; background-size: cover; height: 261px; left: 0; position: absolute; width: 379px; } .integration__net-card--admob { top: 197px; z-index: 19; } .integration__net-card--applovin { top: 397px; z-index: 18; } .integration__net-card--ironsrc { top: 601px; z-index: 17; } /* Glow behind logo */ .integration__net-glow { background: radial-gradient(50% 50% at 45% 50%, rgba(35, 118, 220, 1) 0%, rgba(1, 114, 253, 0) 85%); border-radius: 72.5px; filter: blur(20px); height: 145px; left: calc(50% - 73px); position: absolute; top: 40px; width: 145px; } /* Logo container (centered on card) */ .integration__net-logo { align-items: center; display: flex; height: 156px; justify-content: center; left: calc(50% - 106px); position: absolute; top: 37px; width: 212px; } .integration__net-logo img { object-fit: cover; } .integration__net-logo--admob { height: 156px; left: 111px; position: absolute; top: 37px; width: 156px; } .integration__net-logo--admob img { height: 115px; margin-left: 20.5px; margin-top: 20.5px; width: 115px; object-fit: cover; } /* Card stack (staggered images below hub col) — group-23500 */ .integration__card-stack { height: 401px; left: 286px; position: absolute; top: 708px; width: 379px; } .integration__stack-img { aspect-ratio: 1.46; height: 261px; left: 0; object-fit: cover; position: absolute; width: 379px; } .integration__stack-img:nth-child(1) { top: 140px; } .integration__stack-img:nth-child(2) { top: 120px; } .integration__stack-img:nth-child(3) { top: 100px; } .integration__stack-img:nth-child(4) { top: 80px; } .integration__stack-img:nth-child(5) { top: 60px; } .integration__stack-img:nth-child(6) { top: 40px; } .integration__stack-img:nth-child(7) { top: 20px; } .integration__stack-img:nth-child(8) { top: 0; } /* ════════════════════════════════════════════════════════════════ CARD-1 "CAS.AI BRINGS THE WORLD'S TOP AD NETWORKS…" top:2538 → stage y:1237 centered in 1920px page left: calc(50% - 800px) = 160px width:918 height:260 ════════════════════════════════════════════════════════════════ */ .integration__card2 { background-color: var(--eerie-black); background-image: linear-gradient( 169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100% ); border-radius: 44px; height: 260px; left: 160px; overflow: hidden; position: absolute; top: 1265px; width: 918px; } /* Blue ellipse glow inside card-2 */ .integration__card2-glow { background-color: var(--blue-ribbon); border-radius: 335.5px / 63.54px; filter: blur(93px); height: 127px; left: calc(50% - 344px); opacity: 0.3; position: absolute; top: 66px; width: 671px; } /* Title text */ .integration__card2-title { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 32px; font-weight: 500; height: 90px; left: calc(50% - 371px); letter-spacing: -0.5px; line-height: 44.8px; position: absolute; top: 40px; width: 738px; } /* Subtitle text */ .integration__card2-text { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; height: 78px; left: calc(50% - 371px); letter-spacing: -1px; line-height: 39.2px; position: absolute; top: 142px; width: 645px; } /* ── Integration→Comparison bridge connector ─────────────────── */ /* Separate zero-height block between sections — avoids */ /* overflow-x:clip clipping. img sits at top:-398px so its */ /* bottom aligns with comparison Y-connector (stage top:99). */ .integ-comp-bridge { height: 200px; overflow: visible; pointer-events: none; position: relative; z-index: 0; } .integ-comp-connector { height: 897px; width: 935px; pointer-events: none; position: absolute; /* top / left are set dynamically by connector-align.js */ clip-path: inset(0 0 100% 0); will-change: clip-path; } /* ── Mobile bridge: line grows → dot appears → discharge → dot gone ── */ .integ-comp-bridge-mobile { display: none; justify-content: center; padding: 8px 0; } @media (max-width: 1024px) { .integ-comp-bridge-mobile { display: flex; } } .bridge-mobile__connector { position: relative; display: flex; flex-direction: column; align-items: center; width: 32px; height: 72px; } /* ── Line: starts invisible, grows top→bottom on trigger ── */ .bridge-mobile__line { width: 2px; height: 64px; background: linear-gradient(to bottom, #1881E1, rgba(19, 19, 19, 0)); transform: scaleY(0); transform-origin: top center; flex-shrink: 0; } /* ── Dot: appears after line, disappears on discharge hit ── */ .bridge-mobile__dot { width: 8px; height: 8px; border-radius: 50%; background: #1881E1; flex-shrink: 0; opacity: 0; transform: scale(0); will-change: transform, opacity, box-shadow; } /* ── Charge: bright spark that travels down the line ── */ .bridge-mobile__charge { position: absolute; width: 2px; height: 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); box-shadow: 0 0 8px 3px rgba(24, 129, 225, 0.9), 0 0 16px 6px rgba(255, 255, 255, 0.3); left: 50%; transform: translateX(-50%); top: -16px; border-radius: 1px; opacity: 0; } /* ── Triggered by .is-animated (added by bridge-mobile-anim.js) ── */ .bridge-mobile__connector.is-animated .bridge-mobile__line { animation: bridgeLineGrow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards; } .bridge-mobile__connector.is-animated .bridge-mobile__dot { animation: bridgeDotLife 1.2s ease-out 0.5s both; } .bridge-mobile__connector.is-animated .bridge-mobile__charge { animation: bridgeChargeFall 0.8s ease-in 0.5s both; } /* ── Keyframes ── */ @keyframes bridgeLineGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes bridgeDotLife { /* invisible until discharge hits */ 0% { opacity: 0; transform: scale(0); box-shadow: none; } 64% { opacity: 0; transform: scale(0); box-shadow: none; } /* 65–73%: discharge hits → FLASH */ 73% { opacity: 1; transform: scale(1.9); box-shadow: 0 0 14px 6px rgba(24, 129, 225, 1), 0 0 26px 12px rgba(255, 255, 255, 0.35); } /* 73–100%: burst and disappear */ 85% { opacity: 0.5; transform: scale(2.6); box-shadow: 0 0 22px 12px rgba(24, 129, 225, 0.3); } 100% { opacity: 0; transform: scale(0.3); box-shadow: none; } } @keyframes bridgeChargeFall { 0% { top: -16px; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 0.9; } 100% { top: 64px; opacity: 0; } } /* ─── Zoom scaling ───────────────────────────────────────────── */ @media (max-width: 1919px) { .integration, .integ-comp-bridge { zoom: 0.97; } } @media (max-width: 1800px) { .integration, .integ-comp-bridge { zoom: 0.91; } } @media (max-width: 1700px) { .integration, .integ-comp-bridge { zoom: 0.86; } } @media (max-width: 1600px) { .integration, .integ-comp-bridge { zoom: 0.83; } } @media (max-width: 1500px) { .integration, .integ-comp-bridge { zoom: 0.78; } } @media (max-width: 1400px) { .integration, .integ-comp-bridge { zoom: 0.73; } } @media (max-width: 1280px) { .integration, .integ-comp-bridge { zoom: 0.67; } } @media (max-width: 1100px) { .integration, .integ-comp-bridge { zoom: 0.57; } } /* ═══════════════════════════════════════════════════════════════ MOBILE / TABLET LAYOUT ≤ 1024px Switches from absolute zoom-stage to flex-column left-aligned. Animation (.integration__anim) centered via align-self. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* ── Reset zoom, remove hero overlap ── */ .integration { zoom: 1; margin-top: 0; } .integ-comp-bridge { display: none; } .integration::before { display: none; } /* ── Stage: flex column, left-aligned ── */ .integration__stage { width: 100%; height: auto; left: auto; transform: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 24px 35px; gap: 32px; } /* ── Heading ── */ .integration__heading { position: relative; left: auto; top: auto; width: 100%; } .integration__title-blue { position: relative; left: auto; top: auto; height: auto; font-size: 46px; line-height: 50px; } .integration__title-right { position: relative; left: auto; top: auto; width: 100%; margin-top: 8px; } .integration__title-main { font-size: 40px; line-height: 44px; } .integration__subtitle { font-size: 22px; line-height: 30px; margin-top: 8px; } .integration__subtitle .highlight { font-size: 26px; line-height: 30px; } /* ── Card "Immediate Global Scale" ── */ .integration__card { position: relative; left: auto; top: auto; width: 100%; height: auto; border-radius: clamp(16px, 2.5vw, 24px); } .integration__card-inner { position: relative; left: auto; top: auto; padding: 28px 24px; width: auto; } .integration__card-title { font-size: clamp(22px, 4.2vw, 30px); line-height: 1.2; white-space: normal; text-align: left; justify-content: flex-start; } .integration__card-text { font-size: clamp(15px, 2.1vw, 18px); line-height: 1.6; width: auto; } /* ── Animation: scale to fit viewport ────────────────────── anim-inner: 667px wide × 862px tall (desktop). Base scale: 0.5 → content 333px × 431px. height: 550px — shows all 3 cards at 0.5 scale + breathing room. translateX = -(333 * 0.5) = -167px (centers 333px in 50% origin). Sub-breakpoints only needed for viewport < 381px (333+48). */ .integration__anim { position: relative; left: auto; top: auto; width: 100%; height: 650px; overflow: hidden; align-self: center; border-radius: 24px; /* Ambient hub glow */ background: radial-gradient(ellipse 70% 42% at 50% 36%, rgba(1, 114, 253, 0.11) 0%, transparent 70%); } #integration-spine-canvas { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(0.5); transform-origin: top center; z-index: 1; } .integration__anim-inner { position: absolute; top: 0; left: 50%; transform-origin: top left; transform: translateX(-167px) scale(0.5); z-index: 1; } /* card-stack is decorative and already clipped — hide on mobile */ .integration__card-stack { display: none; } /* ── Card2 ── */ .integration__card2 { position: relative; left: auto; top: auto; width: 100%; height: auto; overflow: hidden; border-radius: clamp(16px, 2.5vw, 24px); } .integration__card2-title { position: relative; left: auto; top: auto; height: auto; width: auto; font-size: clamp(18px, 3.4vw, 26px); line-height: 1.4; padding: 24px 24px 0; } .integration__card2-text { position: relative; left: auto; top: auto; height: auto; width: auto; font-size: clamp(14px, 2.1vw, 18px); line-height: 1.6; padding: 8px 24px 24px; } .integration__card2-glow { width: 80%; left: 50%; transform: translateX(-50%); } } /* ── Integration animation: scale sub-breakpoints ───────────── Active only in mobile layout (≤1024px sets zoom:1). anim-inner: 667px wide. Fits without scale at viewport ≥ 715px. Formula: scale = (viewport - 48) / 667 translateX = -(333 * scale)px height = 600 * scale */ /* ≤430px: match hero side padding (20px vs 24px) */ @media (max-width: 430px) { .integration__stage { padding-left: 20px; padding-right: 20px; } } /* ≤380px: 333px content no longer fits (333+48=381). scale = (viewport-48)/667. At 375px: (375-48)/667 ≈ 0.49. Use 0.46 for safe margin: content 307px, height=550*(0.46/0.5)=506px */ @media (max-width: 380px) { .integration__anim { height: 598px; } .integration__anim-inner { transform: translateX(-153px) scale(0.46); } } @media (min-width: 2200px) { .integration, .integ-comp-bridge { zoom: 1.15; } } @media (min-width: 2800px) { .integration, .integ-comp-bridge { zoom: 1.46; } } @media (min-width: 3840px) { .integration, .integ-comp-bridge { zoom: 2.0; } } /* ===== comparison.css ===== */ /* ─── Comparison section ─────────────────────────────────────── */ /* Stage 1920 × 2030px (page y 2967–4988). */ /* stage_y = page_y − 2967 */ /* Extra 270px at bottom for the arc connector (vector-42) */ .comparison { overflow-x: clip; position: relative; z-index: 1; margin-bottom: 25px; } .comparison__stage { position: relative; width: 1920px; height: 2030px; left: 50%; transform: translateX(-50%); } /* ════════════════════════════════════════════════════════════════ "The Comparison" heading page top:2967 → stage y:0 left: calc(50% − 298px) = 662px height:72 ════════════════════════════════════════════════════════════════ */ .comparison__heading { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 72px; font-weight: 700; height: 72px; left: 662px; letter-spacing: -1.5px; line-height: 72px; position: absolute; top: 0; white-space: nowrap; } /* ════════════════════════════════════════════════════════════════ group-23460: Y-shaped connector above the two cards page top:3066 → stage y:99 left: calc(50% − 382px) = 578px 763×186 ════════════════════════════════════════════════════════════════ */ .comparison__connector { height: 186px; left: 578px; position: absolute; top: 99px; width: 763px; } /* Inline SVG fills the connector container */ .comparison__connector svg { display: block; } /* ════════════════════════════════════════════════════════════════ "Playing Solo" card (group-23459) page top:3197 → stage y:230 left:260 641×660 ════════════════════════════════════════════════════════════════ */ .comparison__solo { height: 660px; left: 260px; position: absolute; top: 230px; width: 641px; } /* Card background (rectangle-5409): top:25, 637×635 */ .comparison__solo-bg { background-color: var(--eerie-black); border-radius: 44px; height: 635px; left: 0; position: absolute; top: 25px; width: 637px; } /* Image: top:0, centered: (641-334)/2=153px */ .comparison__solo-img { height: 301px; left: 132px; object-fit: contain; position: absolute; top: 0; width: 334px; } /* "Playing Solo" title: top:304, left:184, silver, 44px */ .comparison__solo-title { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 44px; font-weight: 700; height: 48px; justify-content: center; left: 184px; letter-spacing: -1.5px; line-height: 48.4px; position: absolute; text-align: center; top: 304px; white-space: nowrap; } /* Description text: top:378, left:48, 541×195, silver */ .comparison__solo-text { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; height: 195px; left: 48px; letter-spacing: -1px; line-height: 39.2px; position: absolute; top: 378px; width: 541px; } /* ════════════════════════════════════════════════════════════════ "Playing the Symphony" card (group-23482) page top:3190 → stage y:223 left:1023 641×667 ════════════════════════════════════════════════════════════════ */ .comparison__symphony { height: 667px; left: 1023px; position: absolute; top: 223px; width: 641px; } /* Card bg (group-23420): top:32, 637×635, dark + blue glow */ .comparison__symphony-bg { background-color: var(--eerie-black); border-radius: 44px; box-shadow: 0 0 12px rgba(1, 114, 253, 0.8), 0 0 20px rgba(1, 114, 253, 0.6); height: 635px; left: 0; overflow: hidden; position: absolute; top: 32px; width: 637px; } /* Blue gradient overlay */ .comparison__symphony-gradient { background: linear-gradient( 169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100% ); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } /* Image: top:0, centered: (641-182)/2=229px */ .comparison__symphony-img { height: 248px; left: 225px; object-fit: contain; position: absolute; top: 0; width: 182px; } /* "Playing the Symphony" title: top:308, left:48, blue gradient, 48px */ .comparison__symphony-title { -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; align-items: center; background: linear-gradient(90deg, rgba(1, 114, 253, 1) 0%, rgba(0, 79, 227, 1) 100%); background-clip: text; color: transparent; display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 48px; font-weight: 700; height: 53px; justify-content: center; left: 48px; letter-spacing: -1.5px; line-height: 52.8px; position: absolute; text-align: center; top: 308px; white-space: nowrap; } /* Description text: top:385, left:48, 541×234, white */ .comparison__symphony-text { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; height: 234px; left: 48px; letter-spacing: -1px; line-height: 39.2px; position: absolute; top: 385px; width: 541px; } /* ════════════════════════════════════════════════════════════════ Vertical lines from card bottoms to table page top:3857 → stage y:890 line-232 (left): left: calc(50%−383px) = 577px line-231 (right): left: calc(50%+380px) = 1340px Both: width:2, height:136 ════════════════════════════════════════════════════════════════ */ .comparison__line-left { height: 136px; left: 577px; object-fit: fill; position: absolute; top: 890px; width: 2px; /* Short line: override grow-down 2.4s global duration */ transition-duration: 0.65s; } .comparison__line-right { height: 136px; left: 1340px; object-fit: fill; position: absolute; top: 890px; width: 2px; /* Short line: override grow-down 2.4s global duration */ transition-duration: 0.65s; } /* ════════════════════════════════════════════════════════════════ Comparison table (.list) page top:3942 → stage y:975 left:160 width:1640 (bg 1600px) height:776 ════════════════════════════════════════════════════════════════ */ .comparison__table-wrap { height: 776px; left: 160px; position: absolute; top: 975px; width: 1640px; } /* Table background */ .comparison__table-bg { background-color: var(--eerie-black); background-image: linear-gradient( 169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100% ); border-radius: 16px; height: 776px; left: 0; position: absolute; top: 0; width: 1600px; } /* Header row dark bg: height:116, rounded top corners */ .comparison__table-header { background-color: rgba(19, 19, 19, 0.6); border-radius: 16px 16px 0 0; height: 116px; left: 0; position: absolute; top: 0; width: 1600px; } /* "Feature" label in header: left:24, top:42 */ .comparison__table-feature-label { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 32px; font-weight: 600; height: 32px; left: 24px; letter-spacing: -1.5px; line-height: 32px; position: absolute; top: 42px; white-space: nowrap; } /* "Solo (Standard Mediation)" header: left:367, top:41 */ .comparison__table-solo-header { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 32px; font-weight: 600; height: 35px; justify-content: center; left: 367px; letter-spacing: -1.5px; line-height: 35.2px; position: absolute; text-align: center; top: 41px; white-space: nowrap; } /* Symphony header (logo + text): left:937, top:40 */ .comparison__table-symphony-header { display: flex; gap: 19px; height: 36px; left: 937px; position: absolute; top: 40px; width: 346px; align-items: center; } .comparison__table-symphony-name { align-items: center; color: var(--blue-ribbon); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 32px; font-weight: 600; height: 35px; justify-content: center; letter-spacing: -1.5px; line-height: 35.2px; margin-top: 1px; text-align: center; white-space: nowrap; } .comparison__table-symphony-header img { aspect-ratio: 4.44; height: 36px; object-fit: cover; width: 160px; } /* ── Horizontal row separator lines ── */ /* top:224 — below header / first row separator */ .comparison__table-line-1 { top: 224px; } /* top:334 */ .comparison__table-line-2 { top: 334px; } /* top:444 */ .comparison__table-line-3 { top: 444px; } /* top:554 */ .comparison__table-line-4 { top: 554px; } /* top:664 */ .comparison__table-line-5 { top: 664px; } .comparison__table-line-1, .comparison__table-line-2, .comparison__table-line-3, .comparison__table-line-4, .comparison__table-line-5 { height: 2px; left: 0; position: absolute; width: 1600px; background: rgba(255,255,255,0.08); } /* ── Row feature labels (left column, left:44, montserrat 28px) ── */ .comparison__table-row-label { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 28px; font-weight: 500; height: 28px; left: 44px; letter-spacing: -1.5px; line-height: 28px; position: absolute; white-space: nowrap; } .comparison__label-network { top: 132px; } .comparison__label-partners { top: 242px; } .comparison__label-integ { top: 352px; } .comparison__label-optim { top: 462px; } .comparison__label-payouts { top: 572px; } .comparison__label-effort { top: 682px; } /* ── Solo column text (left:367, silver-chalice, raleway 28px) ── */ .comparison__table-solo-cell { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 39.2px; left: 367px; position: absolute; } .comparison__solo-network { height: 78px; top: 132px; width: 451px; } .comparison__solo-partners { height: 39px; top: 242px; white-space: nowrap; } .comparison__solo-integ { height: 78px; top: 352px; width: 402px; } .comparison__solo-optim { height: 78px; top: 462px; width: 393px; } .comparison__solo-payouts { height: 78px; top: 572px; width: 393px; } .comparison__solo-effort { height: 78px; top: 682px; } /* ── Symphony column text (left:937, white, raleway 28px) ── */ .comparison__table-symphony-cell { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 39.2px; left: 937px; position: absolute; } .comparison__sym-network { height: 78px; top: 132px; width: 449px; } .comparison__sym-partners { height: 78px; top: 242px; width: 633px; } .comparison__sym-integ { height: 78px; top: 352px; width: 513px; } .comparison__sym-optim { height: 78px; top: 462px; width: 366px; } .comparison__sym-payouts { height: 78px; top: 572px; width: 417px; } .comparison__sym-effort { height: 78px; top: 682px; } /* ════════════════════════════════════════════════════════════════ Arc connector to architecture section (vector-42) page top:4718 → stage y:1751 left:159px 802×270 Bridges comparison bottom → architecture top ════════════════════════════════════════════════════════════════ */ .comparison__arc { height: 270px; left: 159px; position: absolute; top: 1751px; width: 802px; } /* ─── Zoom scaling ───────────────────────────────────────────── */ @media (max-width: 1919px) { .comparison { zoom: 0.97; } } @media (max-width: 1800px) { .comparison { zoom: 0.91; } } @media (max-width: 1700px) { .comparison { zoom: 0.86; } } @media (max-width: 1600px) { .comparison { zoom: 0.83; } } @media (max-width: 1500px) { .comparison { zoom: 0.78; } } @media (max-width: 1400px) { .comparison { zoom: 0.73; } } @media (max-width: 1280px) { .comparison { zoom: 0.67; } } /* ── Vertical spacing: padding = 32px / zoom ────────────────── Padding is also scaled by zoom, so we compensate. Target: ~32px real spacing above and below the section. */ @media (max-width: 1100px) { .comparison { zoom: 0.64; padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 1000px) { .comparison { zoom: 0.56; padding-top: 55px; padding-bottom: 55px; } } @media (max-width: 900px) { .comparison { zoom: 0.53; padding-top: 60px; padding-bottom: 60px; } } @media (min-width: 2200px) { .comparison { zoom: 1.15; } } @media (min-width: 2800px) { .comparison { zoom: 1.46; } } @media (min-width: 3840px) { .comparison { zoom: 2.0; } } /* ═══════════════════════════════════════════════════════════════ COMPARISON MOBILE (≤750px) Native layout, 375px base — no zoom scaling ═══════════════════════════════════════════════════════════════ */ .comparison__mobile { display: none; } /* ── Switch: hide desktop stage, show mobile block ── zoom reset is critical — desktop breakpoints apply zoom:0.44 to the .comparison wrapper, which would also scale the mobile block. */ @media (max-width: 750px) { .comparison { zoom: 1; padding-top: 0; padding-bottom: 0; } .comparison__stage { display: none; } .comparison__mobile { display: block; padding: 20px 16px 0; } } /* ── Heading ── */ .comparison__m-heading { color: var(--white-solid); font-family: var(--font-montserrat), sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; text-align: center; margin: 0 auto; max-width: 420px; } /* ── Y-connector ── */ .comparison__m-connector { margin: 8px auto 0; height: 66px; max-width: 500px; } /* Override scroll-reveal opacity — stroke-dashoffset handles the hide/show */ .comparison__m-connector[data-reveal] { opacity: 1; transition: none; } /* Hidden by default via stroke draw trick */ .comparison__m-connector path { stroke-dasharray: 290; stroke-dashoffset: 290; } /* Draw in on entrance, then idle blue glow pulse */ .comparison__m-connector.is-revealed path { animation: connectorDraw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards, connectorGlow 3s ease-in-out 1.2s infinite; } @keyframes connectorDraw { from { stroke-dashoffset: 290; } to { stroke-dashoffset: 0; } } @keyframes connectorGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(24, 129, 225, 0)); } 50% { filter: drop-shadow(0 0 4px rgba(24, 129, 225, 0.7)); } } /* ── Cards row ── */ .comparison__m-cards { display: flex; gap: 16px; align-items: flex-start; max-width: 500px; margin: 0 auto; } .comparison__m-solo, .comparison__m-symphony { flex: 1; min-width: 0; /* prevent flex blowout */ position: relative; min-height: 300px; display: flex; flex-direction: column; align-items: center; padding: 0 0 16px; /* No overflow:hidden — allows box-shadow glow and wobble to show outside bg bounds */ } /* Card backgrounds */ .comparison__m-solo-bg { position: absolute; inset: 16px 0 0 0; background-color: var(--eerie-black); border-radius: 16px; z-index: 0; } .comparison__m-symphony-bg { position: absolute; inset: 16px 0 0 0; background-color: var(--eerie-black); border-radius: 16px; box-shadow: 0 0 12px rgba(1, 114, 253, 0.8), 0 0 20px rgba(1, 114, 253, 0.6); overflow: hidden; z-index: 0; } .comparison__m-symphony-gradient { position: absolute; inset: 0; background: linear-gradient(169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100%); border-radius: inherit; } /* Card images — sit above the bg (z-index:1, top:0 = above inset:16px bg) */ .comparison__m-solo-img, .comparison__m-symphony-img { position: relative; z-index: 1; width: clamp(52px, 16vw, 80px); height: auto; object-fit: contain; margin-top: 0; flex-shrink: 0; } /* Titles — scale with card width (cards are ~45vw each at mobile) */ .comparison__m-solo-title { position: relative; z-index: 1; color: var(--silver-chalice); font-family: var(--font-montserrat), sans-serif; font-size: clamp(11px, 3.4vw, 14px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; text-align: center; margin: 6px 8px 0; } .comparison__m-symphony-title { -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, rgba(1, 114, 253, 1) 0%, rgba(0, 79, 227, 1) 100%); background-clip: text; color: transparent; position: relative; z-index: 1; font-family: var(--font-montserrat), sans-serif; font-size: clamp(11px, 3.4vw, 14px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; text-align: center; margin: 6px 8px 0; } /* Card body text */ .comparison__m-solo-text, .comparison__m-symphony-text { position: relative; z-index: 1; font-family: var(--font-raleway), sans-serif; font-size: clamp(10px, 2.9vw, 12px); font-weight: 400; letter-spacing: -0.3px; line-height: 1.5; margin: 6px 10px 0; text-align: left; } .comparison__m-solo-text { color: var(--silver-chalice); } .comparison__m-symphony-text { color: var(--white-solid); } /* ── Vertical lines from cards to table ── */ .comparison__m-lines { display: flex; justify-content: space-between; padding: 0 calc(19% - 1px); /* centers each line under card center */ height: 30px; max-width: 500px; margin: 0 auto; } .comparison__m-line { width: 2px; height: 30px; background: linear-gradient(to bottom, #1881E1, #131313); } /* grow-down reveal: override scroll-reveal.css transition duration for short lines */ .comparison__m-line[data-reveal="grow-down"] { transition-duration: 0.5s; } /* ── Comparison table ── */ .comparison__m-table { background-color: var(--eerie-black); background-image: linear-gradient(169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100%); border-radius: 16px; overflow: hidden; } /* Header */ .comparison__m-table-hdr { display: flex; align-items: center; height: 47px; background-color: rgba(19, 19, 19, 0.6); border-radius: 16px 16px 0 0; border-bottom: 2px solid rgba(255, 255, 255, 0.08); } .comparison__m-hdr-solo { flex: 1; padding: 0 8px 0 12px; color: var(--silver-chalice); font-family: var(--font-montserrat), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; } .comparison__m-hdr-div { width: 2px; height: 100%; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; } .comparison__m-hdr-sym { flex: 1; padding: 0 8px 0 10px; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .comparison__m-hdr-sym img { width: 62px; height: 14px; object-fit: cover; } .comparison__m-hdr-sym span { color: var(--blue-ribbon); font-family: var(--font-montserrat), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: -0.5px; } /* Feature label bands (stripes) */ .comparison__m-row-label { display: flex; align-items: center; justify-content: center; height: 24px; background: rgba(19, 19, 19, 0.5); border-top: 2px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--white-solid); font-family: var(--font-montserrat), sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; white-space: nowrap; } /* Data rows */ .comparison__m-row-data { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .comparison__m-cell-solo, .comparison__m-cell-sym { flex: 1; padding: 10px 10px 10px 12px; font-family: var(--font-raleway), sans-serif; font-size: 13px; font-weight: 400; letter-spacing: -0.5px; line-height: 18.2px; margin: 0; display: flex; align-items: center; } .comparison__m-cell-solo { color: var(--silver-chalice); } .comparison__m-cell-sym { color: var(--white-solid); padding-left: 10px; } .comparison__m-v-div { width: 2px; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; } /* ── Arc connector ── */ .comparison__m-arc { display: block; width: 55%; height: auto; } /* Override scroll-reveal opacity — stroke-dashoffset handles the hide/show */ .comparison__m-arc[data-reveal] { opacity: 1; transition: none; } /* Hidden by default via stroke draw trick */ .comparison__m-arc path { stroke-dasharray: 950; stroke-dashoffset: 950; } /* Draw in on entrance, then idle blue glow pulse */ .comparison__m-arc.is-revealed path { animation: arcDraw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards, arcGlow 3s ease-in-out 1.8s infinite; } @keyframes arcDraw { from { stroke-dashoffset: 950; } to { stroke-dashoffset: 0; } } @keyframes arcGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(24, 129, 225, 0)); } 50% { filter: drop-shadow(0 0 6px rgba(24, 129, 225, 0.75)); } } /* ═══════════════════════════════════════════════════════════════ MOBILE CARD ANIMATIONS Mirror desktop behaviour: Solo = unreliable wobble/drift, Symphony = elegant glow burst + float + shimmer. Entrance slide-in comes from scroll-reveal.css [data-reveal]. ═══════════════════════════════════════════════════════════════ */ /* ── Solo: entrance wobble on bg ──────────────────────────── */ .comparison__m-solo.is-revealed .comparison__m-solo-bg { animation: soloWobble 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.1s both; } /* Solo: idle drift on image */ .comparison__m-solo.is-revealed .comparison__m-solo-img { animation: soloImageDrift 4s ease-in-out 1.95s infinite; } /* Solo hover: red warning glow + image dimming */ .comparison__m-solo-bg { transition: box-shadow 0.45s ease; } .comparison__m-solo:hover .comparison__m-solo-bg { box-shadow: 0 0 18px rgba(220, 55, 35, 0.55), 0 0 40px rgba(220, 55, 35, 0.25); } .comparison__m-solo-img { transition: filter 0.45s ease; width: clamp(54px, 19vw, 125px); right: 8px; top: 10px; } .comparison__m-solo:hover .comparison__m-solo-img { filter: brightness(0.72) saturate(0.6); } /* ── Symphony: glow burst on entrance ─────────────────────── */ .comparison__m-symphony.is-revealed .comparison__m-symphony-bg { animation: symphonyGlowBurst 1.5s ease-out 1.25s both; } /* Symphony: image float */ .comparison__m-symphony.is-revealed .comparison__m-symphony-img { animation: symphonyImageFloat 4s ease-in-out 2.1s infinite; } /* Symphony: shimmer sweep via ::before on the bg */ .comparison__m-symphony-bg::before { content: ''; position: absolute; inset: 0; width: 35%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100% ); pointer-events: none; z-index: 1; } .comparison__m-symphony.is-revealed .comparison__m-symphony-bg::before { animation: shimmerSweep 6s ease-in-out 2s infinite; } /* Symphony hover: intensified blue glow */ .comparison__m-symphony:hover .comparison__m-symphony-bg { box-shadow: 0 0 28px rgba(1, 114, 253, 1), 0 0 70px rgba(1, 114, 253, 0.7), 0 0 120px rgba(1, 114, 253, 0.35); } .comparison__m-symphony-img { transition: filter 0.45s ease; } .comparison__m-symphony:hover .comparison__m-symphony-img { filter: brightness(1.12) drop-shadow(0 0 16px rgba(1, 114, 253, 0.7)); } /* ═══════════════════════════════════════════════════════════════ CARD ANIMATIONS Solo → unstable, bad practice feel Symphony → quality, elegant, impactful feel ═══════════════════════════════════════════════════════════════ */ /* ── Keyframes ─────────────────────────────────────────────── */ /* Solo: shaky wobble on entrance — feels unreliable */ @keyframes soloWobble { 0%, 100% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-7px) rotate(-2deg); } 30% { transform: translateX(6px) rotate(1.5deg); } 48% { transform: translateX(-4px) rotate(-1deg); } 64% { transform: translateX(3px) rotate(0.6deg); } 80% { transform: translateX(-1px) rotate(-0.2deg); } } /* Solo: sluggish idle drift — unstable feel */ @keyframes soloImageDrift { 0%, 100% { transform: rotate(0deg) translateY(0); } 35% { transform: rotate(-1.4deg) translateY(-5px); } 70% { transform: rotate(0.9deg) translateY(4px); } } /* Symphony: blue glow burst on entrance */ @keyframes symphonyGlowBurst { 0% { box-shadow: 0 0 12px rgba(1, 114, 253, 0.8), 0 0 20px rgba(1, 114, 253, 0.6); } 40% { box-shadow: 0 0 55px rgba(1, 114, 253, 1), 0 0 110px rgba(1, 114, 253, 0.75), 0 0 180px rgba(1, 114, 253, 0.3); } 100% { box-shadow: 0 0 12px rgba(1, 114, 253, 0.8), 0 0 20px rgba(1, 114, 253, 0.6); } } /* Symphony: smooth elegant image float */ @keyframes symphonyImageFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Symphony: light shimmer sweep across card every ~6 s */ @keyframes shimmerSweep { 0% { transform: translateX(-100%) skewX(-18deg); opacity: 1; } 18% { transform: translateX(450%) skewX(-18deg); opacity: 1; } 19% { opacity: 0; } 100% { transform: translateX(-100%) skewX(-18deg); opacity: 0; } } /* ── Solo: entrance wobble ─────────────────────────────────── */ /* Slide-in 0.85s + delay 100ms → wobble starts at ~1.1s */ .comparison__solo.is-revealed .comparison__solo-bg { animation: soloWobble 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.1s both; } /* Solo: idle drift on image (after wobble) */ .comparison__solo.is-revealed .comparison__solo-img { animation: soloImageDrift 4s ease-in-out 1.95s infinite; } /* Solo hover: red warning glow + image dimming */ .comparison__solo-bg { transition: box-shadow 0.45s ease; } .comparison__solo:hover .comparison__solo-bg { box-shadow: 0 0 18px rgba(220, 55, 35, 0.55), 0 0 40px rgba(220, 55, 35, 0.25); } .comparison__solo-img { transition: filter 0.45s ease; } .comparison__solo:hover .comparison__solo-img { filter: brightness(0.72) saturate(0.6); } /* ── Symphony: glow burst on entrance ─────────────────────── */ /* Slide-in 0.85s + delay 250ms → burst starts at ~1.25s */ .comparison__symphony.is-revealed .comparison__symphony-bg { animation: symphonyGlowBurst 1.5s ease-out 1.25s both; } /* Symphony: image float */ .comparison__symphony.is-revealed .comparison__symphony-img { animation: symphonyImageFloat 4s ease-in-out 2.1s infinite; } /* Symphony: shimmer sweep via ::before pseudo-element over bg */ .comparison__symphony-bg::before { content: ''; position: absolute; inset: 0; width: 35%; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100% ); pointer-events: none; z-index: 1; } .comparison__symphony.is-revealed .comparison__symphony-bg::before { animation: shimmerSweep 6s ease-in-out 2s infinite; } /* Symphony hover: intensified blue glow + image brightness */ .comparison__symphony:hover .comparison__symphony-bg { box-shadow: 0 0 28px rgba(1, 114, 253, 1), 0 0 70px rgba(1, 114, 253, 0.7), 0 0 120px rgba(1, 114, 253, 0.35); } .comparison__symphony-img { transition: filter 0.45s ease; } .comparison__symphony:hover .comparison__symphony-img { filter: brightness(1.12) drop-shadow(0 0 16px rgba(1, 114, 253, 0.7)); } @media (max-width: 1150px) { .comparison__arc { left: 10%; } } @media (max-width: 1080px) { .comparison__arc { left: 12%; } } @media (max-width: 1000px) { .comparison__arc { left: 10%; } } @media (max-width: 850px) { .comparison__arc { left: 13%; } } /* ===== architecture.css ===== */ /* ─── Architecture section ───────────────────────────────────── */ /* "The Architecture of Growth" heading + description text */ .architecture { position: relative; /* 90px @ 1920px → scales proportionally up to 180px cap */ padding: 0 clamp(40px, 4.69vw, 180px); } /* Override default .container padding — architecture section is full-bleed */ .architecture .container { max-width: 100%; /* 40px @ 1920px → scales proportionally */ padding-left: clamp(24px, 2.08vw, 60px); padding-right: clamp(24px, 2.08vw, 60px); } .architecture__inner { display: flex; flex-direction: column; gap: 32px; /* content stays bounded at design width — padding/margins handle centering on wide screens */ max-width: 1920px; margin: 0 auto; } /* SVG heading image */ .architecture__heading-img { width: clamp(300px, 58vw, 990px); height: auto; } /* Subtitle text */ .architecture__subtitle { font-family: var(--font-raleway), sans-serif; font-size: clamp(18px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.5px; line-height: 1.2; color: var(--white-solid); max-width: 935px; } /* Description paragraph on the right */ .architecture__desc { font-family: var(--font-raleway), sans-serif; font-size: clamp(16px, 1.85vw, 28px); font-weight: 400; letter-spacing: -1px; line-height: 1.4; color: var(--silver-chalice); max-width: 845px; align-self: flex-end; } /* ─── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1100px) { .architecture__desc { align-self: flex-start; } .architecture { padding: 0 2%; } } @media (max-width: 900px) { .architecture .container { padding-left: 24px; padding-right: 24px; } .architecture { padding: 0 0 40px; } .architecture__subtitle { margin-left: 0; } } @media (max-width: 750px) { .architecture { padding: 0 0 24px; .container { padding: 0 20px; } } } @media (max-width: 640px) { .architecture { padding: 0 0 24px; } .architecture__inner { gap: 24px; } } @media (max-width: 480px) { .architecture { padding: 0 0 30px; } .architecture__inner { gap: 20px; } } /* ===== features.css ===== */ /* ─── Features section ────────────────────────────────────────── */ /* Stage 1920 × 1250px. */ /* y-offset: 5232 (vector-40 top in original page). */ /* stage_y = page_y − 5232 */ .features { overflow-x: clip; position: relative; margin-top: -95px; } .features__stage { position: relative; width: 1920px; height: 1230px; /* extra below last card shows stripe tail */ left: 50%; transform: translateX(-50%); } /* ════════════════════════════════════════════════════════════════ Decorative background stripe (vector-40) page top:5232 → stage y:0 left:159px 803×1693 ════════════════════════════════════════════════════════════════ */ .features__stripe { background-image: url(../img/vector-40.svg); background-size: 100% 100%; height: 1693px; left: 159px; position: absolute; top: 0; width: 803px; } /* ════════════════════════════════════════════════════════════════ Horizontal separators (115×2px each, left:160px) vector-52: page 5424 → stage 192 vector-54: page 5699 → stage 467 vector-55: page 5980 → stage 748 vector-53: page 6255 → stage 1023 ════════════════════════════════════════════════════════════════ */ .features__sep { background-image: url(../img/vector-52.svg); background-size: 100% 100%; height: 2px; left: 160px; position: absolute; width: 115px; } .features__sep-2 { background-image: url(../img/vector-54.svg); } .features__sep-3 { background-image: url(../img/vector-55.svg); } .features__sep-4 { background-image: url(../img/vector-53.svg); } .features__sep-1 { top: 192px; } .features__sep-2 { top: 402px; } .features__sep-3 { top: 612px; } .features__sep-4 { top: 822px; } /* ════════════════════════════════════════════════════════════════ Feature cards left:275px height:245px Card 1: width:1487px page 5372 → stage 140 Card 2: width:1486px page 5649 → stage 417 Card 3: width:1486px page 5926 → stage 694 Card 4: width:1486px page 6203 → stage 971 ════════════════════════════════════════════════════════════════ */ .features__card { height: 245px; left: 275px; position: absolute; width: 1487px; } .features__card-1 { top: 140px; } .features__card-2 { top: 350px; width: 1486px; } .features__card-3 { top: 560px; width: 1486px; } .features__card-4 { top: 770px; width: 1486px; } /* Card background: eerie-black, border-radius:32px */ .features__card-bg { background-color: var(--eerie-black); border-radius: 32px; height: 245px; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } /* Blue gradient overlay */ .features__card-gradient { background: linear-gradient( 169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100% ); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } /* Number label: left:28, top:20, 40px tall, 36px montserrat medium */ .features__card-num { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 36px; font-weight: 500; height: 40px; left: 28px; letter-spacing: -1.5px; line-height: 39.6px; opacity: 0.8; position: absolute; top: 20px; white-space: nowrap; } /* Icon: 160×160 at left:131, top:42 */ .features__card-icon { height: 160px; left: 131px; overflow: visible; position: absolute; top: 42px; width: 160px; } /* Card 1 icon sits 1px lower */ .features__card-1 .features__card-icon { top: 43px; } /* Text frame: left:374, top:39, inline-flex column, gap:16 */ .features__card-body { align-items: flex-start; display: inline-flex; flex-direction: column; gap: 16px; left: 374px; position: absolute; top: 39px; } /* Title: montserrat 32px 600, white */ .features__card-title { align-items: center; align-self: stretch; color: var(--white-solid); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -1.5px; line-height: 35.2px; margin-top: -1px; } /* Body text: raleway 28px 400, silver, 951px wide */ .features__card-text { align-items: center; color: var(--silver-chalice); display: flex; font-family: var(--font-raleway), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 39.2px; width: 951px; } /* ─── Zoom scaling ───────────────────────────────────────────── */ @media (max-width: 1919px) { .features { zoom: 0.97; } } @media (max-width: 1800px) { .features { zoom: 0.91; } } @media (max-width: 1700px) { .features { zoom: 0.86; } } @media (max-width: 1600px) { .features { zoom: 0.83; } } @media (max-width: 1500px) { .features { zoom: 0.78; } } @media (max-width: 1400px) { .features { zoom: 0.73; } } /* ── Reset desktop-overlap + vertical spacing ───────────────── margin-top: -95px in base styles — for desktop overlap. On mobile this gives -95×zoom = -36px overlap → reset it. padding = 32px / zoom (scale compensation). Horizontal card centering: cards center at 1018.5px, not 960px → shift stage 3.047% left so cards sit symmetrically in viewport. */ @media (max-width: 1280px) { .features { zoom: 0.63; margin-top: 0; } .features__stage { transform: translateX(calc(-50% - 3.047%)); } } @media (max-width: 1150px) { .features { zoom: 0.61; } } @media (max-width: 1080px) { .features { zoom: 0.56; } } @media (max-width: 1100px) { .features { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 1000px) { .features { zoom: 0.5; padding-top: 55px; padding-bottom: 55px; } } @media (max-width: 900px) { .features { zoom: 0.47; padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 850px) { .features { zoom: 0.44; } } @media (min-width: 2200px) { .features { zoom: 1.15; } } @media (min-width: 2800px) { .features { zoom: 1.46; } } @media (min-width: 3840px) { .features { zoom: 2.0; } } /* ═══════════════════════════════════════════════════════════════ FEATURES MOBILE (≤750px) Horizontal card layout: icon left (64px), content right Based on mobile mockup group-23486/87/88/89 ═══════════════════════════════════════════════════════════════ */ .features__mobile { display: none; } /* ── Switch ── zoom reset: desktop breakpoints set zoom:0.44 on .features, which would scale the mobile block too. */ @media (max-width: 750px) { .features { zoom: 1; margin-top: 0; padding-top: 0; padding-bottom: 0; } .features__stage { display: none; } .features__mobile { display: block; position: relative; /* left 52px = 14px (line) + 38px (connector). right 16px = standard mobile gutter. 220px bottom: more gap between last card and diagonal; right vertical in SVG is very short (~50px) so tail stays compact. */ padding: 40px 16px 220px 52px; } } /* ── Stripe — same vector-40.svg as desktop ────────────────────── SVG path (803×1693): vertical line at x=1–2 from y=0→1291, then diagonal to x=802 at y=1387 (the tail), then vertical. We render the SVG as so it scales proportionally to the section height. At ~750px section height: img ≈ 355px wide. The line at x=1 lands at x≈0.4px inside the stripe-col — so positioning stripe-col at left:14px puts the line at x≈14px, matching the connector (left:-38px, width:38px) that bridges to cards at padding-left:52px. overflow:visible — lets the diagonal tail extend rightward. */ .features__m-stripe-col { position: absolute; left: 14px; /* SVG line (x≈1) appears at x≈14px on screen */ right: 0; top: 0; bottom: 0; overflow: visible; pointer-events: none; z-index: 0; } .features__m-stripe { position: absolute; inset: 0; background-image: url(../img/vector-40-m.svg); background-size: auto 100%; /* height = section height; width proportional */ background-repeat: no-repeat; background-position: left top; opacity: 0.85; } @media (max-width: 550px) { .features__m-stripe { background-image: url(../img/vector-40-1m.svg); } .features__mobile { padding-bottom: 150px; } } /* ── Section heading ── */ .features__m-heading { color: var(--white-solid); font-family: var(--font-montserrat), sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; margin: 0 0 24px 0; /* padding-left on parent handles indent */ } /* Separators: bridge from SVG line (at x≈14 on screen) to card left edge at x=52 (= section padding-left). width 38px = 52 - 14. */ .features__m-card::before { content: ''; position: absolute; left: -38px; top: 18px; width: 38px; height: 2px; background: linear-gradient(to right, rgba(24,129,225,0.9), rgba(24,129,225,0.5)); z-index: 2; } /* ── Cards list ── */ .features__m-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; z-index: 1; margin-bottom: 10px; min-height: 170px; } .features__m-card:last-child { margin-bottom: 0; } /* Card background */ .features__m-card-bg { position: absolute; inset: 0; background-color: var(--eerie-black); border-radius: 16px; overflow: hidden; z-index: 0; } .features__m-card-gradient { position: absolute; inset: 0; background: linear-gradient(169deg, rgba(1, 114, 253, 0.22) 0%, rgba(1, 114, 253, 0) 40%, rgba(1, 114, 253, 0.06) 100%); } /* Icon */ .features__m-icon { position: relative; z-index: 1; width: 75px; height: 75px; flex-shrink: 0; object-fit: contain; overflow: visible; margin-top: 20px; } /* Content block */ .features__m-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 4px; } /* Number + title on same row */ .features__m-meta { display: flex; align-items: baseline; gap: 4px; } .features__m-num { color: rgba(1, 114, 253, 0.9); font-family: var(--font-montserrat), sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1; flex-shrink: 0; } .features__m-title { color: var(--white-solid); font-family: var(--font-montserrat), sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; margin: 0; } .features__m-text { color: var(--silver-chalice); font-family: var(--font-raleway), sans-serif; font-size: 14px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.5; margin: 2px 0 0; } /* ═══════════════════════════════════════════════════════════════ SCROLL-TRIGGERED ENTRANCE ANIMATIONS — Current Flow Electricity metaphor: stripe (PCB trace) powers up top→bottom, each sep (wire) charges left→right with a leading-edge spark, then the card below it "powers on" with an electric flash. JS adds .features--animated → enables hidden states. JS adds .is-visible to all at once → animation-delay sequences them. ═══════════════════════════════════════════════════════════════ */ /* ── Keyframes ──────────────────────────────────────────────── */ /* Background stripe: PCB trace powers up top→bottom at constant rate. linear easing = visible constant fill, not an instant flash. Brightness burst fires only when fill completes (88%→100%). */ @keyframes stripe-glow { 0% { clip-path: inset(0 0 100% 0); filter: brightness(1); } 88% { clip-path: inset(0 0 0% 0); filter: brightness(1.5) saturate(1.3); } 100% { clip-path: inset(0 0 0% 0); filter: brightness(1); } } /* Horizontal wire: grows left→right, spark glows on the leading edge */ @keyframes wire-charge { 0% { width: 0; box-shadow: none; } 45% { width: 70px; box-shadow: 6px 0 14px 5px rgba(74, 180, 255, 0.95), 6px 0 32px 10px rgba(24, 129, 225, 0.55); } 78% { width: 115px; box-shadow: 3px 0 7px 2px rgba(74, 180, 255, 0.35); } 100% { width: 115px; box-shadow: none; } } /* Card: slides in from left, hits bright like a neon tube switching on */ @keyframes power-on { 0% { opacity: 0; transform: translateX(-20px); filter: brightness(0); } 18% { opacity: 1; transform: translateX(3px); filter: brightness(2.8) saturate(1.6); } 38% { transform: translateX(0); filter: brightness(1.6); } 65% { filter: brightness(1.1); } 100% { opacity: 1; transform: translateX(0); filter: brightness(1); } } /* ── Initial hidden states (only when JS is active) ─────────── */ .features--animated .features__stripe { clip-path: inset(0 0 100% 0); } .features--animated .features__sep { width: 0; } .features--animated .features__card { opacity: 0; transform: translateX(-14px); } /* ── Visible states: trigger animations ─────────────────────── */ .features__stripe.is-visible { /* duration overridden by JS inline style (speed-aware) */ animation-name: stripe-glow; animation-duration: 1.6s; /* JS fallback default */ animation-timing-function: linear; animation-fill-mode: both; } .features__sep.is-visible { /* duration overridden by JS inline style (speed-aware) */ animation-name: wire-charge; animation-duration: 0.45s; /* JS fallback default */ animation-timing-function: ease-out; animation-fill-mode: both; } .features__card.is-visible { /* duration overridden by JS inline style (speed-aware) */ animation-name: power-on; animation-duration: 0.3s; /* JS fallback default */ animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); animation-fill-mode: both; } /* ── Animation timing: fully controlled by features-anim.js ───── JS calculates all delays based on scroll velocity at trigger moment and sets animation-duration via inline style. Sequential: block N+1 only starts after block N finishes. */ /* ── Reduced motion: instant reveal, no animation ───────────── */ @media (prefers-reduced-motion: reduce) { .features__stripe.is-visible, .features__sep.is-visible, .features__card.is-visible { animation: none; } .features__stripe.is-visible { clip-path: inset(0 0 0% 0); } .features__sep.is-visible { width: 115px; } .features__card.is-visible { opacity: 1; transform: none; filter: none; } } /* ═══════════════════════════════════════════════════════════════ HOVER POLISH ═══════════════════════════════════════════════════════════════ */ /* Subtle border glow on card background */ .features__card-bg { transition: box-shadow 0.35s ease; } .features__card:hover .features__card-bg { box-shadow: inset 0 0 0 1px rgba(1, 114, 253, 0.4); } /* Extra gradient overlay appears on hover */ .features__card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 169deg, rgba(1, 114, 253, 0.20) 0%, rgba(1, 114, 253, 0) 45% ); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .features__card:hover .features__card-bg::after { opacity: 1; } /* Icon scale on hover */ .features__card-icon { transition: transform 0.35s ease; } .features__card:hover .features__card-icon { transform: scale(1.08); } /* ═══════════════════════════════════════════════════════════════ MOBILE SCROLL-TRIGGERED ANIMATIONS Reuses stripe-glow / wire-charge / power-on keyframes above. JS adds .features--m-animated to .features__mobile to enable hidden states, then adds .is-visible to each element in sequence. ═══════════════════════════════════════════════════════════════ */ /* ── Initial hidden states ─────────────────────────────────── */ .features--m-animated .features__m-stripe { clip-path: inset(0 0 100% 0); } .features--m-animated .features__m-card::before { width: 0; } .features--m-animated .features__m-card { opacity: 0; transform: translateX(-16px); } /* ── Mobile vertical stripe reveal ────────────────────────── */ .features__m-stripe.is-visible { animation-name: stripe-glow; animation-duration: 1.2s; animation-timing-function: linear; animation-fill-mode: both; } /* ── Mobile separator wire-charge (::before on each card) ─── */ @keyframes wire-charge-m { 0% { width: 0; box-shadow: none; } 45% { width: 22px; box-shadow: 5px 0 12px 4px rgba(74,180,255,0.95), 5px 0 24px 8px rgba(24,129,225,0.55); } 78% { width: 38px; box-shadow: 3px 0 6px 2px rgba(74,180,255,0.35); } 100% { width: 38px; box-shadow: none; } } .features__m-card.is-visible::before { animation-name: wire-charge-m; animation-duration: 0.45s; animation-timing-function: ease-out; animation-fill-mode: both; } /* ── Mobile card power-on ──────────────────────────────────── */ .features__m-card.is-visible { animation-name: power-on; animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); animation-fill-mode: both; } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .features__m-stripe.is-visible { animation: none; clip-path: inset(0 0 0% 0); } .features__m-card.is-visible::before { animation: none; width: 38px; } .features__m-card.is-visible { animation: none; opacity: 1; transform: none; filter: none; } } /* ── Mobile card hover ──────────────────────────────────────── */ .features__m-card-bg { transition: box-shadow 0.35s ease; } .features__m-card:hover .features__m-card-bg { box-shadow: inset 0 0 0 1px rgba(1, 114, 253, 0.4); } .features__m-icon { transition: transform 0.35s ease; } .features__m-card:hover .features__m-icon { transform: scale(1.06); } /* ===== apps.css ===== */ /* ─── Apps section ("Apps already playing in the Symphony") ────── Shipped-apps grid, copied (by content) from the cas.ai homepage tiles. Matches the page design system: dark canvas, blue-ribbon accent, Montserrat heading + Raleway body, .container width, data-reveal entrance. Flat CSS (no nesting) for legacy Safari. */ .apps { position: relative; padding: clamp(48px, 5vw, 110px) 0; } .apps__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 18px); text-align: center; } .apps__heading { font-family: var(--font-montserrat), sans-serif; font-size: clamp(30px, 3.6vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--white-solid); max-width: 16ch; } .apps__heading em { font-style: normal; color: var(--blue-ribbon); } .apps__subtitle { font-family: var(--font-raleway), sans-serif; font-size: clamp(16px, 1.5vw, 26px); font-weight: 400; line-height: 1.4; letter-spacing: -0.5px; color: var(--silver-chalice); max-width: 50ch; } /* Grid: 3 tiles per row → 2 → 1. flex + margins (no CSS grid/gap on the critical path), deterministic via calc() so it builds identically. */ .apps__grid { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(24px, 2.5vw, 56px) -12px 0; width: 100%; } .apps__cell { display: block; flex: 0 0 calc(33.333% - 24px); max-width: calc(33.333% - 24px); margin: 0 12px 24px; border-radius: 18px; overflow: hidden; position: relative; background: var(--eerie-black); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.35s ease, border-color 0.35s ease; } .apps__cell:hover { transform: translateY(-4px); border-color: rgba(1, 114, 253, 0.5); } .apps__img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; } .apps__cell:hover .apps__img { transform: scale(1.05); } /* ─── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .apps__cell { flex-basis: calc(50% - 24px); max-width: calc(50% - 24px); } } @media (max-width: 600px) { .apps__cell { flex-basis: calc(100% - 24px); max-width: calc(100% - 24px); } .apps__grid { margin-top: 18px; } } /* ===== cases.css ===== */ /* ─── Cases section ("Real apps. Real numbers.") ───────────────── Testimonials slider, Swiper-free. Shows 3 cards at once (1 on mobile); the centered card is the active one (full scale + opacity), neighbours are scaled down and dimmed. Infinite loop via cloned card sets in js/cases-slider.js. Flat CSS (no nesting) for legacy Safari. */ .cases { position: relative; padding: clamp(48px, 5vw, 110px) 0; overflow: hidden; } .cases__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 18px); text-align: center; } .cases__heading { font-family: var(--font-montserrat), sans-serif; font-size: clamp(30px, 3.6vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--white-solid); } .cases__heading em { font-style: normal; color: var(--blue-ribbon); } .cases__subtitle { font-family: var(--font-raleway), sans-serif; font-size: clamp(16px, 1.5vw, 26px); font-weight: 400; line-height: 1.4; letter-spacing: -0.5px; color: var(--silver-chalice); max-width: 56ch; } .cases__viewport { position: relative; width: 100%; max-width: 1180px; margin: clamp(24px, 2.5vw, 56px) auto 0; padding: 0 56px; } .cases__window { overflow: hidden; width: 100%; padding: 24px 0; } .cases__track { display: flex; flex-wrap: nowrap; will-change: transform; transition: transform 0.55s ease; } /* 3 per view (desktop). The centered card is .is-active. The visual card is a ::before inset 12px on each side, so there's a consistent gap between cards without breaking the 33.333% / translate math (no flex gap or margins). */ .cases__card { flex: 0 0 33.333%; max-width: 33.333%; box-sizing: border-box; position: relative; padding: clamp(26px, 1.8vw, 38px) calc(clamp(26px, 1.8vw, 38px) + 14px); text-align: left; transform: scale(0.84); opacity: 0.45; transition: transform 0.45s ease, opacity 0.45s ease; transform-origin: center center; } .cases__card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; right: 14px; z-index: 0; background: #181818; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; transition: border-color 0.45s ease, box-shadow 0.45s ease; } .cases__card > * { position: relative; z-index: 1; } .cases__card.is-active { transform: scale(1); opacity: 1; } .cases__card.is-active::before { border-color: rgba(1, 114, 253, 0.5); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .cases__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .cases__name { font-family: var(--font-montserrat), sans-serif; font-size: clamp(16px, 1.1vw, 21px); font-weight: 700; color: var(--white-solid); } .cases__stars { display: inline-flex; align-items: center; flex: 0 0 auto; } .cases__star { width: 19px; height: 19px; fill: #ffb400; display: block; } .cases__star + .cases__star { margin-left: 2px; } .cases__quote { margin: 0; font-family: var(--font-raleway), sans-serif; font-size: clamp(15px, 1.1vw, 19px); font-weight: 400; line-height: 1.55; color: var(--silver-chalice); } /* Arrows. */ .cases__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(20, 22, 26, 0.7); color: #fff; font-size: 22px; line-height: 44px; text-align: center; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; -webkit-appearance: none; appearance: none; } .cases__arrow:hover { background: var(--blue-ribbon); border-color: var(--blue-ribbon); } .cases__arrow--prev { left: 0; } .cases__arrow--next { right: 0; } /* Dots. */ .cases__dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 26px; } .cases__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .cases__dot.is-active { background: var(--blue-ribbon); transform: scale(1.25); } /* Mobile: one card per view. */ @media (max-width: 767px) { .cases__card { flex-basis: 100%; max-width: 100%; transform: scale(1); opacity: 1; } .cases__viewport { padding: 0 44px; } .cases__arrow { width: 38px; height: 38px; line-height: 36px; font-size: 19px; } } /* ===== video.css ===== */ /* ─── Video reviews ("Hear it from the developers") ────────────── Two YouTube reviews, click-to-play (no autoplay on load — the iframe is created only after a user click, by js/video-reviews.js). 16:9 via padding-top (no aspect-ratio, for legacy Safari). Dark theme. Flat CSS (no nesting). */ .vreviews { position: relative; padding: clamp(48px, 5vw, 110px) 0; } .vreviews__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 18px); text-align: center; } .vreviews__heading { font-family: var(--font-montserrat), sans-serif; font-size: clamp(30px, 3.6vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--white-solid); } .vreviews__heading em { font-style: normal; color: var(--blue-ribbon); } .vreviews__subtitle { font-family: var(--font-raleway), sans-serif; font-size: clamp(16px, 1.5vw, 26px); font-weight: 400; line-height: 1.4; letter-spacing: -0.5px; color: var(--silver-chalice); max-width: 56ch; } .vreviews__grid { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(24px, 2.5vw, 56px) -16px 0; width: 100%; } .vreviews__item { flex: 1 1 460px; max-width: 620px; min-width: 0; margin: 0 16px 28px; text-align: left; } .vreviews__frame { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.10); } .vreviews__frame::before { content: ""; display: block; padding-top: 56.25%; } .vreviews__thumb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #000; cursor: pointer; -webkit-appearance: none; appearance: none; } .vreviews__img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, opacity 0.4s ease; } .vreviews__thumb:hover .vreviews__img { transform: scale(1.04); opacity: 0.9; } .vreviews__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); transition: transform 0.15s ease; } .vreviews__play svg { display: block; width: 100%; height: 100%; } .vreviews__thumb:hover .vreviews__play { transform: translate(-50%, -50%) scale(1.08); } .vreviews__iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; display: block; } .vreviews__cap { margin: 14px 2px 0; font-family: var(--font-raleway), sans-serif; font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: var(--silver-chalice); } @media (max-width: 600px) { .vreviews__item { flex-basis: 100%; } } /* ===== cta-form.css ===== */ /* ─── CTA + Form section ─────────────────────────────────────── */ .cta-section { align-items: flex-start; display: flex; flex-direction: column; gap: 40px; padding: 80px clamp(40px, 13.5vw, 200px) 112px; position: relative; width: 100%; box-sizing: border-box; } .cta-section__bg { background: linear-gradient(180deg, rgba(20, 20, 20, 1) 0%, #0172fd 78%, #0172fd 100%); box-shadow: 0 4px 4px #00000040; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .cta-section__glow { background-color: #015bca1a; border-radius: 9999px; bottom: 0; filter: blur(50px); height: 320px; position: absolute; right: 480px; width: 320px; pointer-events: none; } /* ── Heading block: SVG + tagline ───────────────────────────── */ .cta-section__heading { display: flex; flex-direction: column; position: relative; width: 100%; } .cta-section__elevate { display: block; height: auto; max-width: 100%; width: 100%; } /* ── Two-column grid ────────────────────────────────────────── */ .cta-section__inner { align-items: stretch; display: flex; gap: 64px; position: relative; width: 100%; } /* left and right columns start at the same vertical level */ .cta-section__left, .cta-section__right { align-self: flex-start; } /* ── Left: body text ────────────────────────────────────────── */ .cta-section__left { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 60px; position: relative; } .cta-section__copy { display: flex; flex-direction: column; gap: 12px; } .cta-section__copy-title { color: var(--white-solid); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-32); font-weight: 500; letter-spacing: -0.5px; line-height: 38.4px; max-width: 640px; } .cta-section__copy-sub { color: var(--silver-chalice); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-28); font-weight: 400; letter-spacing: -1px; line-height: 39.2px; max-width: 619px; } /* ── Trusted-by partner avatars ─────────────────────────────── */ .cta-section__trusted { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; } .cta-section__avatars { align-items: center; display: flex; flex: 0 0 auto; } .cta-section__avatar { background: #fff; border: 2px solid var(--white-solid); border-radius: 50%; height: 40px; object-fit: cover; width: 40px; } .cta-section__avatar + .cta-section__avatar { margin-left: -10px; } .cta-section__trusted-text { color: var(--white-solid); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-20); font-weight: 400; line-height: 1.4; } /* ── CTA button in left column ──────────────────────────────── */ .cta-section__bttn { align-items: center; align-self: flex-end; cursor: pointer; display: inline-flex; gap: 16px; overflow: visible; padding: 16px 0; position: relative; } /* Background atmospheric glow */ .cta-section__bttn-glow { height: 314px; left: 50%; opacity: 0.75; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease; width: 984px; z-index: 0; } .cta-section__bttn:hover .cta-section__bttn-glow { opacity: 1; } .cta-section__bttn-text { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-32); font-weight: 600; letter-spacing: 0; line-height: 31.68px; position: relative; white-space: nowrap; z-index: 1; } .cta-section__bttn-icon-wrap { display: flex; align-items: center; position: relative; z-index: 1; } .cta-section__bttn-icon-wrap img { display: block; width: 26.4px; } .cta-section__tagline { align-self: flex-end; color: var(--white-solid); font-family: var(--font-montserrat), sans-serif; font-size: clamp(20px, 7.38px + 3.37vw, 72px); font-weight: 700; letter-spacing: -1.5px; line-height: 1; text-align: right; } /* ── Right: form card ───────────────────────────────────────── */ .cta-section__right { display: flex; flex: 0 0 750px; position: relative; } /* White glow behind the card — separates it from the blue background */ .cta-section__right::before { content: ''; position: absolute; inset: -20px; border-radius: 44px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 65%); filter: blur(16px); pointer-events: none; z-index: 0; } /* ── Form card ──────────────────────────────────────────────── */ .cta-section .divbg-white { align-items: flex-start; align-self: stretch; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border-radius: 24px; display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 36px; position: relative; width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.04); z-index: 1; } .cta-section .divbg-whiteshadow { background: transparent; border-radius: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 40, 0.38), 0 40px 80px -12px rgba(0, 0, 20, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .cta-section .h3text-xl { align-items: flex-start; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: column; position: relative; width: 100%; } .cta-section .try-a-free-ab-test-with-casai { align-items: center; align-self: stretch; color: var(--cod-gray); display: flex; font-family: var(--font-montserrat), sans-serif; font-size: var(--fs-20); font-weight: 700; line-height: 28px; margin-top: -1px; position: relative; } .cta-section .ptext-sm { align-items: flex-start; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: column; position: relative; width: 100%; } .cta-section .start-seeing-results { align-items: center; align-self: stretch; color: var(--pale-sky); display: flex; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; letter-spacing: 0; line-height: 20px; margin-top: -1px; position: relative; } /* ── Form ───────────────────────────────────────────────────── */ .cta-section .formlead-form { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 16px; padding: 20px 0 0; position: relative; width: 100%; } .cta-section .form-group { align-items: flex-start; align-self: stretch; flex: 0 0 auto; gap: 8px; display: flex; flex-direction: column; width: 100%; } .cta-section input[type="checkbox"] { appearance: none; -webkit-appearance: none; background-color: var(--white-solid); border: 1px solid var(--pale-sky); border-radius: 2.5px; cursor: pointer; flex-shrink: 0; height: 16px; position: relative; width: 16px; transition: background-color 0.15s, border-color 0.15s; } .cta-section input[type="checkbox"]:checked { background-color: var(--blue-ribbon); border-color: var(--blue-ribbon); } .cta-section input[type="checkbox"]:checked::after { border: 2px solid #fff; border-left: none; border-top: none; content: ''; height: 9px; left: 4px; position: absolute; top: 1px; transform: rotate(45deg); width: 5px; } .cta-section .divgrid { align-items: flex-start; align-self: stretch; display: flex; gap: 16px; width: 100%; } .cta-section .div-1, .cta-section .div-2, .cta-section .div-3, .cta-section .div-4 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 6px; } .cta-section .labelblock-6 { align-items: flex-start; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: column; position: relative; width: 100%; } .cta-section .name { color: transparent; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 500; line-height: 20px; margin-top: -1px; } .cta-section .span0 { color: var(--bright-gray); } .cta-section .span1 { color: var(--persian-red); } .cta-section .inputname-5 { appearance: none; -webkit-appearance: none; align-self: stretch; background-color: #eeeeee80; border: 1px solid var(--quill-gray); border-radius: 12px; box-sizing: border-box; color: var(--cod-gray); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; height: 48px; outline: none; padding: 0 16px; position: relative; transition: border-color 0.15s; width: 100%; } .cta-section .inputname-5::placeholder { color: #9ca3af; } .cta-section .inputname-5:focus { border-color: #004fe3; } .cta-section .inputname-5.is-invalid { border-color: var(--persian-red); } .cta-section .inputname-5.is-valid { border-color: #004fe3; background-color: #e8f0fe; } /* password wrapper: border reacts to inner input focus */ .cta-section .input-pw-wrap:focus-within { border-color: #004fe3; } .cta-section .input-pw-wrap.is-valid { border-color: #004fe3; background-color: #e8f0fe; } /* prevent browser autofill from painting only the inner input area */ .cta-section .input-pw-wrap input:-webkit-autofill, .cta-section .input-pw-wrap input:-webkit-autofill:hover, .cta-section .input-pw-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #eeeeee80 inset; -webkit-text-fill-color: var(--cod-gray); } /* password wrapper styled as input */ .cta-section .input-pw-wrap { align-items: center; display: flex; gap: 8px; padding: 0 12px 0 16px; } .cta-section .input-pw-wrap input { appearance: none; -webkit-appearance: none; background: transparent; border: none; box-sizing: border-box; color: var(--cod-gray); flex: 1; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); height: 100%; outline: none; padding: 0; width: 100%; } .cta-section .input-pw-wrap input::placeholder { color: #9ca3af; } .cta-section .btn-toggle-pw { background: none; border: none; cursor: pointer; flex-shrink: 0; padding: 4px; } .cta-section .btn-toggle-pw img { display: block; opacity: 0.5; transition: opacity 0.15s; } /* exact SVG viewBox sizes → integer-pixel rendering, no blur */ .cta-section .btn-toggle-pw .icon-eye-closed { width: 20px; height: 10px; } .cta-section .btn-toggle-pw .icon-eye-open { width: 22px; height: 15px; } .cta-section .btn-toggle-pw:hover img { opacity: 1; } /* icon swap driven by aria-pressed */ .cta-section .btn-toggle-pw .icon-eye-open { display: none; } .cta-section .btn-toggle-pw[aria-pressed="true"] .icon-eye-closed { display: none; } .cta-section .btn-toggle-pw[aria-pressed="true"] .icon-eye-open { display: block; } .cta-section .frame-136 { align-items: flex-start; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; position: relative; width: 100%; } .cta-section .field-error { color: var(--persian-red); font-family: var(--font-raleway), sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 14px; padding: 0 10px; } .cta-section .field-error[hidden] { display: none; } .cta-section .form-submit-error { padding: 6px 0 0; font-size: 12px; text-align: center; } /* ── Messenger picker ───────────────────────────────────────── */ .cta-section .messenger-picker { align-items: center; align-self: stretch; display: flex; gap: 8px; position: relative; width: 100%; } .cta-section .messenger-select { flex-shrink: 0; position: relative; } .cta-section .messenger-select-trigger { align-items: center; background-color: #eeeeee80; border: 1px solid var(--quill-gray); border-radius: 12px; color: var(--cod-gray); cursor: pointer; display: flex; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; gap: 8px; height: 48px; padding: 0 12px; transition: border-color 0.15s; white-space: nowrap; width: 156px; } .cta-section .messenger-select-trigger:hover, .cta-section .messenger-select.is-open .messenger-select-trigger { border-color: #004fe3; } .cta-section .messenger-sel-icon { color: var(--pale-sky); display: flex; flex-shrink: 0; } .cta-section .messenger-sel-label { flex: 1; text-align: left; } .cta-section .messenger-sel-chevron { color: var(--pale-sky); flex-shrink: 0; transition: transform 0.2s; } .cta-section .messenger-select.is-open .messenger-sel-chevron { transform: rotate(180deg); } .cta-section .messenger-dropdown { background-color: var(--white-solid); border: 1px solid var(--quill-gray); border-radius: 12px; box-shadow: 0 8px 24px #00000018; display: none; left: 0; list-style: none; margin: 0; min-width: 156px; padding: 6px; position: absolute; top: calc(100% + 4px); z-index: 200; } .cta-section .messenger-select.is-open .messenger-dropdown { display: block; } .cta-section .messenger-option { align-items: center; border-radius: 8px; color: var(--cod-gray); cursor: pointer; display: flex; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; gap: 8px; padding: 8px 10px; transition: background-color 0.12s; } .cta-section .messenger-option:hover { background-color: #eeeeee80; } .cta-section .messenger-option.is-selected { color: var(--blue-ribbon); } .cta-section .messenger-opt-icon { color: inherit; display: flex; flex-shrink: 0; } .cta-section .messenger-input { flex: 1; } /* ── intl-tel-input inside messenger picker ──────────────── */ .cta-section .messenger-picker .iti-messenger { display: block; flex: 1; min-width: 0; } .cta-section .messenger-picker .iti-messenger > input { width: 100%; } .cta-section .iti-messenger .iti__selected-flag { background-color: transparent; border-radius: 12px 0 0 12px; padding: 0 8px 0 12px; } .cta-section .iti-messenger .iti__selected-flag:hover, .cta-section .iti-messenger .iti__selected-flag:focus { background-color: rgba(0, 0, 0, 0.04); } .cta-section .iti-messenger .iti__selected-dial-code { color: var(--cod-gray); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); margin-left: 4px; } .cta-section .iti-messenger .iti__country-list { background-color: var(--white-solid); border: 1px solid var(--quill-gray); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); max-height: 220px; padding: 6px; } .cta-section .iti-messenger .iti__country { border-radius: 8px; padding: 6px 10px; } .cta-section .iti-messenger .iti__country.iti__highlight, .cta-section .iti-messenger .iti__country:hover { background-color: #eeeeee80; } .cta-section .iti-messenger .iti__country-name { color: var(--cod-gray); } .cta-section .iti-messenger .iti__dial-code { color: var(--pale-sky); } .cta-section .iti-messenger .iti__divider { border-color: var(--quill-gray); margin: 4px 0; } /* ── Privacy & submit ───────────────────────────────────────── */ .cta-section .privacy-label { align-items: center; cursor: pointer; display: flex; gap: 8px; width: 100%; } .cta-section .i-have-read-and-accept-the { align-items: center; color: var(--pale-sky); display: inline; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; line-height: 19.5px; position: relative; white-space: nowrap; } .cta-section .text-3 { color: var(--blue-ribbon); display: inline; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 400; line-height: 19.5px; text-decoration: underline; white-space: nowrap; } .cta-section .btn { align-items: center; appearance: none; -webkit-appearance: none; align-self: stretch; background-color: var(--blue-ribbon); border: none; border-radius: 12px; cursor: pointer; display: flex; height: 48px; justify-content: center; overflow: hidden; position: relative; transition: opacity 0.15s, background-color 0.35s ease, filter 0.3s ease; width: 100%; } .cta-section .btn:hover { opacity: 1; } .cta-section .btn:active { opacity: 0.8; } .cta-section .buttonsubmit-btnshadow { background-color: #ffffff01; border-radius: 12px; box-shadow: 0 4px 6px -4px #0172fd40, 0 10px 15px -3px #0172fd40; height: 48px; left: 0; opacity: 1; pointer-events: none; position: absolute; top: 0; transition: opacity 0.35s ease; width: 100%; } .cta-section .text-4 { align-items: center; color: var(--white-solid); display: flex; font-family: var(--font-raleway), sans-serif; font-size: var(--fs-14); font-weight: 600; justify-content: center; line-height: 20px; position: relative; text-align: center; white-space: nowrap; width: fit-content; } .cta-section .btn:disabled { background-color: #969EA9; box-shadow: 0 10px 15px -3px rgba(80, 85, 89, 0.25), 0 4px 6px -4px rgba(75, 79, 83, 0.25); cursor: not-allowed; pointer-events: none; } .cta-section .btn:disabled .buttonsubmit-btnshadow { opacity: 0; } .cta-section .btn:disabled .text-4 { color: #ffffff; } /* ── Submit button: electric awakening ───────────────────────── */ /* Custom property for counter-clockwise arc */ @property --eb { syntax: ''; initial-value: 360deg; inherits: false; } /* Arc A: clockwise */ @keyframes btnElectricRun { to { --ea: 360deg; } } /* Arc B: counter-clockwise */ @keyframes btnElectricRunB { to { --eb: 0deg; } } /* No-op — ensures animationend fires on btn so JS can remove is-unlocking */ @keyframes btnUnlockDone { from { opacity: 1; } to { opacity: 1; } } .cta-section .btn.is-unlocking { animation: btnUnlockDone 0.8s forwards; } /* Inner surge flash on awakening — sweeps left to right */ @keyframes btnSurgeFlash { 0% { opacity: 0; transform: translateX(-100%); } 20% { opacity: 0.9; } 80% { opacity: 0.3; } 100% { opacity: 0; transform: translateX(100%); } } /* Neon border flicker on the wrap — fires at unlock moment */ @keyframes btnBorderFlicker { 0% { box-shadow: none; } 12% { box-shadow: 0 0 0 2px rgba(74,180,255,.9), 0 0 14px rgba(74,180,255,.6), 0 0 28px rgba(1,114,253,.4); } 24% { box-shadow: 0 0 0 1px rgba(74,180,255,.08); } 52% { box-shadow: 0 0 0 2px rgba(74,180,255,.75), 0 0 18px rgba(74,180,255,.5), 0 0 36px rgba(1,114,253,.3); } 74% { box-shadow: 0 0 0 1px rgba(74,180,255,.12); } 100% { box-shadow: none; } } /* Shadow: power-on burst → steady glow pulse */ @keyframes btnPowerOn { 0% { box-shadow: 0 4px 6px -4px rgba(80,85,89,.25), 0 10px 15px -3px rgba(75,79,83,.25); } 25% { box-shadow: 0 0 36px rgba(1,114,253,.95), 0 0 72px rgba(1,114,253,.5); } 100% { box-shadow: 0 4px 6px -4px rgba(1,114,253,.25), 0 10px 15px -3px rgba(1,114,253,.25); } } @keyframes btnGlowPulse { 0%, 100% { box-shadow: 0 4px 6px -4px rgba(1,114,253,.25), 0 10px 15px -3px rgba(1,114,253,.25); } 50% { box-shadow: 0 0 20px rgba(1,114,253,.55), 0 0 40px rgba(1,114,253,.25); } } /* ── Arc wrapper — separate from btn to avoid overflow:hidden conflict ── */ .cta-section .btn-electric-wrap { align-self: stretch; position: relative; width: 100%; border-radius: 12px; } /* Neon flicker fires on the wrap when inner btn is unlocking */ .cta-section .btn-electric-wrap:has(.btn.is-unlocking) { animation: btnBorderFlicker 0.8s ease-out forwards; } /* ── Arc B: counter-clockwise, cyan sparks ── */ .cta-section .btn-electric-wrap::after { content: ''; position: absolute; inset: -3px; border-radius: 15px; padding: 3px; background: conic-gradient( from var(--eb), rgba(0, 200, 255, 0) 0%, rgba(0, 200, 255, 0) 7%, rgba(0, 200, 255, .45) 12%, rgba(140, 220, 255, .75) 16%, rgba(0, 200, 255, .45) 20%, rgba(0, 200, 255, 0) 25%, rgba(0, 200, 255, 0) 57%, rgba(0, 200, 255, .35) 61%, rgba(140, 220, 255, .6) 65%, rgba(0, 200, 255, .35) 69%, rgba(0, 200, 255, 0) 74%, rgba(0, 200, 255, 0) 100% ); -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s ease; filter: blur(2px); pointer-events: none; } /* ── Arc A: clockwise, blue sparks ── */ .cta-section .btn-electric-wrap::before { content: ''; position: absolute; inset: -3px; border-radius: 15px; padding: 3px; background: conic-gradient( from var(--ea), rgba(1, 114, 253, 0) 0%, rgba(1, 114, 253, 0) 4%, rgba(74, 180, 255, .6) 8%, rgba(120, 200, 255, 1) 12%, rgba(74, 180, 255, .6) 16%, rgba(1, 114, 253, 0) 20%, rgba(1, 114, 253, 0) 36%, rgba(74, 180, 255, .45) 40%, rgba(120, 200, 255, .85) 43%, rgba(74, 180, 255, .45) 46%, rgba(1, 114, 253, 0) 50%, rgba(1, 114, 253, 0) 68%, rgba(74, 180, 255, .35) 71%, rgba(120, 200, 255, .65) 74%, rgba(74, 180, 255, .35) 77%, rgba(1, 114, 253, 0) 81%, rgba(1, 114, 253, 0) 100% ); -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s ease; filter: blur(2px); pointer-events: none; } /* Arcs appear when button is enabled */ .cta-section .btn-electric-wrap:has(.btn:not(:disabled))::before { opacity: 1; animation: btnElectricRun 2.5s linear infinite; } .cta-section .btn-electric-wrap:has(.btn:not(:disabled))::after { opacity: .7; animation: btnElectricRunB 3.8s linear infinite; } /* ── Inner surge flash on awakening ── */ .cta-section .btn::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: radial-gradient( ellipse at 30% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(1, 114, 253, 0.4) 45%, transparent 75% ); opacity: 0; pointer-events: none; } .cta-section .btn.is-unlocking::after { animation: btnSurgeFlash 0.65s ease-out forwards; } /* ── Shadow: flash on power-on, then pulse ── */ .cta-section .btn.is-unlocking .buttonsubmit-btnshadow { animation: btnPowerOn 0.8s ease-out forwards; } .cta-section .btn:not(:disabled):not(.is-unlocking) .buttonsubmit-btnshadow { animation: btnGlowPulse 2.5s ease-in-out infinite; } /* ── Hover: both arcs speed up + brightness ── */ .cta-section .btn-electric-wrap:has(.btn:not(:disabled)):hover::before { animation-duration: 1.2s; filter: blur(3px); } .cta-section .btn-electric-wrap:has(.btn:not(:disabled)):hover::after { animation-duration: 1.8s; filter: blur(3px); } .cta-section .btn:not(:disabled):hover { filter: brightness(1.1); } /* ── Submit button loading state ─────────────────────────────── */ .cta-section .btn .text-4 { transition: opacity 0.18s ease, transform 0.18s ease; } .cta-section .btn-spinner { border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; height: 20px; opacity: 0; pointer-events: none; position: absolute; transition: opacity 0.18s ease; width: 20px; } @keyframes btn-spin { to { transform: rotate(360deg); } } .cta-section .btn.is-loading { pointer-events: none; } /* Both arcs fade out during loading */ .cta-section .btn-electric-wrap:has(.btn.is-loading)::before, .cta-section .btn-electric-wrap:has(.btn.is-loading)::after { opacity: 0; transition: opacity 0.2s ease; } /* keep blue while loading even though disabled attr is set */ .cta-section .btn.is-loading:disabled { background-color: var(--blue-ribbon); box-shadow: none; cursor: default; } .cta-section .btn.is-loading:disabled .buttonsubmit-btnshadow { opacity: 0.6; } .cta-section .btn.is-loading .text-4 { opacity: 0; transform: scale(0.8); } .cta-section .btn.is-loading .btn-spinner { animation: btn-spin 0.72s linear infinite; opacity: 1; transition: opacity 0.18s ease 0.1s; } .cta-section .field-hint { color: #9ca3af; font-family: var(--font-raleway), sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 14px; padding: 0 2px; } .cta-section .field-hint.is-invalid { color: var(--persian-red); } .cta-section input[type="checkbox"].is-invalid { border-color: var(--persian-red); background-color: #fff0f0; } .cta-section .form-success { color: var(--blue-ribbon); font-family: var(--font-raleway), sans-serif; font-size: var(--fs-18); font-weight: 600; letter-spacing: 0; line-height: 24px; text-align: center; } .cta-section .form-success[hidden] { display: none; } /* ─── Responsive ─────────────────────────────────────────────── */ /* 2K–4K */ @media (min-width: 2200px) { .cta-section { zoom: 1.11; width: calc(100vw / 1.11); margin-left: auto; margin-right: auto; } } @media (min-width: 2800px) { .cta-section { zoom: 1.41; width: calc(100vw / 1.41); } } @media (min-width: 3840px) { .cta-section { zoom: 1.94; width: calc(100vw / 1.94); } } /* ≤ 1560px — reduce side padding */ @media (max-width: 1560px) { .cta-section { padding-left: clamp(40px, 7.7vw, 120px); padding-right: clamp(40px, 7.7vw, 120px); } } /* ≤ 1850px — stack columns, left-align everything */ @media (max-width: 1850px) { .cta-section__inner { flex-direction: column; align-items: stretch; gap: 32px; } .cta-section__left { align-self: stretch; gap: 32px; } /* Heading: tagline is left-aligned in the stacked layout */ .cta-section__tagline { align-self: flex-start; text-align: left; } /* "Hear the Difference" link: switch from right to left */ .cta-section__bttn { align-self: flex-start; } /* Form card: fixed width, centered */ .cta-section__right { flex: 0 0 auto; width: 750px; max-width: 100%; align-self: center; } .cta-section .divbg-white { flex: 0 0 auto; width: 100%; } } /* ≤ 1024px */ @media (max-width: 1024px) { .cta-section { padding: 60px 24px; } /* Shadow removed — bleeds onto footer on mobile */ .cta-section__bg { box-shadow: none; } /* Glow positioned for desktop only — hide on mobile to prevent overflow */ .cta-section__glow { display: none; } .cta-section__copy-title { font-size: var(--fs-24); } .cta-section__copy-sub { font-size: var(--fs-20); } .cta-section__bttn-text { font-size: var(--fs-24); line-height: 1.4; white-space: normal; } .cta-section__bttn-glow { width: 600px; height: 192px; } /* Scale tagline to match the actual text size in SVG (viewBox 1456×151, cap-height ≈ 63 SVG units, section padding 24px → formula: 3.8vw - 0.5px). Exact match verified across the 375–1024px range. */ .cta-section__tagline { font-size: clamp(15px, 4.5vw, 52px); } } /* ≤ 640px */ @media (max-width: 640px) { .cta-section { padding: 40px 24px; gap: 24px; } .cta-section__trusted { gap: 14px; } .cta-section__avatar { height: 34px; width: 34px; } .cta-section__avatar + .cta-section__avatar { margin-left: -8px; } .cta-section__trusted-text { font-size: var(--fs-16); } .cta-section__copy-title { font-size: 18px; line-height: 1.4; } .cta-section__copy-sub { font-size: 15px; line-height: 1.5; } .cta-section__bttn-text { font-size: 20px; } .cta-section .divgrid { flex-direction: column; align-items: stretch; } .cta-section .div-1, .cta-section .div-2, .cta-section .div-3, .cta-section .div-4 { flex: 0 0 auto; width: 100%; } .cta-section .i-have-read-and-accept-the { white-space: normal; } } /* ≤ 430px — compact small phones */ @media (max-width: 430px) { .cta-section { padding: 36px 20px; } .cta-section__copy-title { font-size: 16px; line-height: 1.4; } .cta-section__copy-sub { font-size: 14px; line-height: 1.5; } .cta-section__bttn-text { font-size: 18px; } .cta-section .divbg-white { padding: 24px 16px; } } /* ≤ 375px — small phones */ @media (max-width: 375px) { .cta-section__copy-title { font-size: 14px; line-height: 1.45; } .cta-section__copy-sub { font-size: 13px; line-height: 1.5; } .cta-section__bttn-text { font-size: 16px; } } /* ═══════════════════════════════════════════════════════════════ KNIFE-SWITCH ANIMATION — Electricity theme Sequence (delays from when .cta-section--active is added): 950ms — bttn icon "throws" like a knife switch lever 1050ms — atmospheric glow flares at the contact point 1200ms — arc spark crosses the 64px gap left → right 1450ms — right card powers on with neon-tube flicker Left block enters via existing scroll-reveal (data-reveal="left"). Timings coordinated: left block fully visible by ~1050ms. ═══════════════════════════════════════════════════════════════ */ /* ── Keyframes ──────────────────────────────────────────────── */ /* Switch lever thrown downward — pivot at top, spring bounce */ @keyframes knife-throw { 0% { transform: rotate(0deg); } 55% { transform: rotate(44deg); } 70% { transform: rotate(35deg); } 85% { transform: rotate(41deg); } 100% { transform: rotate(38deg); } } /* Atmospheric glow behind bttn flares at moment of contact. Must include base translate(-50%,-50%) since animation overrides CSS transform. */ @keyframes glow-flare { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; filter: brightness(1); } 45% { transform: translate(-50%, -50%) scale(1.38); opacity: 1; filter: brightness(1.7) saturate(1.3); } 75% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.92; filter: brightness(1.1); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; filter: brightness(1); } } /* Arc spark grows left→right across the 64px flex gap. No fill-mode → snaps back to width:0 (disappears) after traversal. */ @keyframes arc-cross { 0% { width: 0; box-shadow: none; } 40% { width: 25px; box-shadow: 6px 0 14px 5px rgba(74, 180, 255, 0.95), 6px 0 32px 9px rgba(24, 129, 225, 0.5); } 78% { width: 64px; box-shadow: 3px 0 8px 3px rgba(74, 180, 255, 0.35); } 100% { width: 64px; box-shadow: none; } } /* Arc spark grows top→bottom across the vertical gap (stacked layout). */ @keyframes arc-cross-v { 0% { height: 0; box-shadow: none; } 40% { height: 14px; box-shadow: 0 6px 14px 5px rgba(74, 180, 255, 0.95), 0 6px 32px 9px rgba(24, 129, 225, 0.50); } 78% { height: 32px; box-shadow: 0 3px 8px 3px rgba(74, 180, 255, 0.35); } 100% { height: 32px; box-shadow: none; } } /* Right card: neon-tube flicker → stable power-on. Opacity moves forward only (no harsh dip). "Flicker" is done via brightness pulse — card stays visible, only the electric glow stutters. */ @keyframes card-power-on { 0% { opacity: 0; filter: brightness(1) drop-shadow(0 0 0 rgba( 74, 180, 255, 0 )); } 18% { opacity: 0.8; filter: brightness(1.55) drop-shadow(0 0 22px rgba( 74, 180, 255, 0.90)) drop-shadow(0 0 44px rgba( 24, 129, 225, 0.45)); } 28% { opacity: 0.7; filter: brightness(0.80) drop-shadow(0 0 6px rgba( 74, 180, 255, 0.25)); } 55% { opacity: 1; filter: brightness(1.35) drop-shadow(0 0 26px rgba( 74, 180, 255, 0.75)) drop-shadow(0 0 52px rgba( 24, 129, 225, 0.35)); } 78% { opacity: 1; filter: brightness(1) drop-shadow(0 0 8px rgba( 74, 180, 255, 0.18)); } 100% { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 rgba( 74, 180, 255, 0 )); } } /* ── Primed: right block hidden until animation plays ─────────── */ .cta-section--primed .cta-section__right { opacity: 0; } /* ── Active: trigger all animations with sequenced delays ─────── */ /* 1 — Knife switch throw: icon pivots from top */ .cta-section--active .cta-section__bttn-icon-wrap { transform-origin: center top; animation: knife-throw 0.55s cubic-bezier(0.2, 0, 0.3, 1) 950ms both; } /* 2 — Glow flares at contact point (no fill → hover still works after) */ .cta-section--active .cta-section__bttn-glow { animation: glow-flare 0.65s ease-out 1050ms; } /* 3 — Arc spark traverses the gap (no fill → disappears after) */ .cta-section--active .cta-section__left::after { content: ''; position: absolute; left: 100%; bottom: 32px; /* approx bttn vertical center */ height: 2px; background: linear-gradient(to right, rgba(74, 180, 255, 0.85), rgba(24, 129, 225, 0.5)); animation: arc-cross 0.32s ease-out 1200ms; } /* 4 — Right card powers on with neon-tube flicker */ .cta-section--active .cta-section__right { animation: card-power-on 0.8s ease-out 1450ms both; } /* ── Vertical arc on stacked layout (gap is now vertical) */ @media (max-width: 1850px) { .cta-section--active .cta-section__left::after { left: 50%; bottom: 0; transform: translateX(-50%); width: 2px; height: 0; background: linear-gradient(to bottom, rgba(74, 180, 255, 0.85), rgba(24, 129, 225, 0.5)); animation: arc-cross-v 0.32s ease-out 1200ms; } } /* ── Reduced motion: instant reveal, no electricity effects ─────── */ @media (prefers-reduced-motion: reduce) { .cta-section--primed .cta-section__right { opacity: 1; } .cta-section--active .cta-section__right { animation: none; } .cta-section--active .cta-section__bttn-icon-wrap { animation: none; } .cta-section--active .cta-section__bttn-glow { animation: none; } .cta-section--active .cta-section__left::after { display: none; } } /* ===== modal.css ===== */ /* ── Success Modal ── */ #success-modal { position: fixed; inset: 0; background: rgba(10, 12, 18, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; } #success-modal[hidden] { display: none !important; } #success-modal.is-closing { animation: modalOverlayOut 0.35s cubic-bezier(0.4, 0, 1, 1) both; } #success-modal.is-closing .modal { animation: modalSlideDown 0.35s cubic-bezier(0.4, 0, 1, 1) both; } @keyframes modalOverlayOut { from { opacity: 1; } to { opacity: 0; } } @keyframes modalSlideDown { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(16px) scale(0.97); } } #success-modal .modal { --blue-ribbon: #0172fd; --surface-card: #1f2430; --surface-raised: #252b38; --border-subtle: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.1); --text-primary: #eceef6; --text-secondary: #a8b2c8; --text-muted: #7282a0; font-family: var(--font-raleway), sans-serif; position: relative; background: var(--surface-card); border: 1px solid var(--border-mid); border-radius: 20px; max-width: min(680px, 100%); width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; animation: modalSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; box-shadow: 0 0 0 1px rgba(1, 114, 253, 0.06), 0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25); } #success-modal .modal::-webkit-scrollbar { display: none; } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Top shimmer accent line ── */ #success-modal .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, #0172fd 25%, #4fa3ff 50%, #0172fd 75%, transparent 100% ); background-size: 250% 100%; border-radius: 20px 20px 0 0; animation: shimmerLine 3s 0.6s ease-in-out infinite; } @keyframes shimmerLine { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } #success-modal .modal::after { content: ''; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(1, 114, 253, 0.08) 0%, transparent 65%); pointer-events: none; } /* ── Header ── */ #success-modal .modal-header { padding: 44px 44px 0; position: relative; z-index: 1; } #success-modal .success-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(1, 114, 253, 0.1); border: 1px solid rgba(1, 114, 253, 0.22); border-radius: 100px; padding: 5px 13px 5px 10px; margin-bottom: 18px; animation: modalFadeUp 0.4s 0.25s both; } @keyframes modalFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } #success-modal .badge-icon { width: 20px; height: 20px; background: #0172fd; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #success-modal .badge-icon svg { display: block; } /* ── Animated checkmark ── */ #success-modal .check-path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: drawCheck 0.45s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } #success-modal .badge-text { font-family: var(--font-montserrat), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #4fa3ff; } #success-modal .modal-title { font-family: var(--font-montserrat), sans-serif; font-size: 25px; font-weight: 700; color: var(--text-primary); line-height: 1.3; animation: modalFadeUp 0.4s 0.35s both; } #success-modal .modal-subtitle { margin-top: 12px; font-size: 17px; color: var(--text-secondary); line-height: 1.7; animation: modalFadeUp 0.4s 0.45s both; } /* ── Divider ── */ #success-modal .divider { height: 1px; background: var(--border-subtle); margin: 28px 44px; animation: modalFadeUp 0.4s 0.5s both; } /* ── Body ── */ #success-modal .modal-body { padding: 0 44px; position: relative; z-index: 1; } #success-modal .next-label { font-family: var(--font-montserrat), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; animation: modalFadeUp 0.4s 0.55s both; } /* ── Timeline steps ── */ #success-modal .steps { position: relative; display: flex; flex-direction: column; gap: 0; } /* Connecting vertical line from center of first step-num to center of last */ #success-modal .steps::before { content: ''; position: absolute; left: 29px; /* 16px step padding-left + 14px (half of 28px num) - 1px */ top: 28px; /* 14px step padding-top + 14px half circle = center of first num */ bottom: 28px; width: 2px; background: linear-gradient( to bottom, rgba(1, 114, 253, 0.55), rgba(1, 114, 253, 0.12) ); border-radius: 2px; animation: modalFadeUp 0.4s 0.75s both; } #success-modal .step { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--surface-raised); border-radius: 12px; border: 1px solid var(--border-subtle); animation: modalFadeUp 0.4s both; transition: border-color 0.2s, background 0.2s; margin-bottom: 10px; } #success-modal .step:last-child { margin-bottom: 0; } #success-modal .step:hover { border-color: rgba(1, 114, 253, 0.25); background: rgba(37, 43, 56, 0.9); } #success-modal .step:nth-child(1) { animation-delay: 0.6s; } #success-modal .step:nth-child(2) { animation-delay: 0.7s; } #success-modal .step:nth-child(3) { animation-delay: 0.8s; } #success-modal .step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #0172fd; display: flex; align-items: center; justify-content: center; font-family: var(--font-montserrat), sans-serif; font-size: 12px; font-weight: 700; color: #ffffff; margin-top: 1px; /* Ring to sit cleanly over the connector line */ box-shadow: 0 0 0 3px var(--surface-raised); position: relative; } #success-modal .step-text { font-size: 15px; color: var(--text-secondary); line-height: 1.65; padding-top: 5px; } /* ── Footer ── */ #success-modal .modal-footer { padding: 26px 44px 38px; position: relative; z-index: 1; animation: modalFadeUp 0.4s 0.85s both; } #success-modal .btn-modal { display: block; width: 100%; padding: 15px 28px; background: #0172fd; border: none; border-radius: 12px; font-family: var(--font-montserrat), sans-serif; font-size: 15px; font-weight: 700; color: #ffffff; cursor: pointer; letter-spacing: 0.03em; transition: background 0.18s, transform 0.15s, box-shadow 0.18s; box-shadow: 0 2px 16px rgba(1, 114, 253, 0.35); } #success-modal .btn-modal:hover { background: #0161dc; transform: translateY(-1px); box-shadow: 0 4px 24px rgba(1, 114, 253, 0.5); } #success-modal .btn-modal:active { transform: translateY(0); } /* ── Close button ── */ #success-modal .close-btn { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.15s, border-color 0.15s; color: var(--text-muted); } #success-modal .close-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--border-mid); color: var(--text-secondary); } /* ── Low viewport height — align top so modal doesn't clip ── */ @media (max-height: 640px) { #success-modal { align-items: flex-start; padding-top: 12px; } } /* ── Mobile ≤ 600px — all phones (iPhone 16 Pro Max 440px, SE 375px etc.) ── */ @media (max-width: 600px) { #success-modal { padding: 16px; } #success-modal .modal { border-radius: 20px; } #success-modal .modal-header { padding: 28px 24px 0; } #success-modal .success-badge { margin-bottom: 14px; } #success-modal .modal-title { font-size: 20px; } #success-modal .modal-subtitle { font-size: 14px; line-height: 1.55; margin-top: 10px; } #success-modal .divider { margin: 20px 24px; } #success-modal .modal-body { padding: 0 24px; } #success-modal .next-label { margin-bottom: 12px; } #success-modal .step { padding: 10px 12px; margin-bottom: 8px; gap: 12px; } #success-modal .step-text { font-size: 13px; line-height: 1.5; padding-top: 4px; } #success-modal .modal-footer { padding: 20px 24px 26px; } #success-modal .btn-modal { padding: 13px 24px; font-size: 14px; } } /* ── Mobile ≤ 375px — small phones ── */ @media (max-width: 375px) { #success-modal { padding: 12px; } #success-modal .modal-header { padding: 22px 20px 0; } #success-modal .modal-title { font-size: 18px; } #success-modal .modal-subtitle { font-size: 13px; } #success-modal .divider { margin: 16px 20px; } #success-modal .modal-body { padding: 0 20px; } #success-modal .step { padding: 9px 10px; } #success-modal .step-text { font-size: 12px; } #success-modal .modal-footer { padding: 16px 20px 22px; } } /* ═══════════════════════════════════════════════════════════════ Error Modal — "Short Circuit" theme Same electrical language as success, but fault/interrupted state: orange/amber palette instead of blue, jitter entry, stutter shimmer. ═══════════════════════════════════════════════════════════════ */ /* ── Overlay ── */ #error-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; animation: faultOverlayIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } #error-modal[hidden] { display: none !important; } #error-modal.is-closing { animation: modalOverlayOut 0.35s cubic-bezier(0.4, 0, 1, 1) both; } #error-modal.is-closing .modal { animation: modalSlideDown 0.35s cubic-bezier(0.4, 0, 1, 1) both; } /* Overlay: deep red flash — critical alert */ @keyframes faultOverlayIn { 0% { background: rgba(8, 6, 6, 0.0); } 6% { background: rgba(100, 8, 4, 0.72); } 100% { background: rgba(8, 6, 6, 0.82); } } /* backdrop-filter is static — animating it causes a separate GPU pass per frame on mobile */ #error-modal:not([hidden]) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Card ── */ #error-modal .modal { --err: #e0321a; --err-light: #f04830; --err-amber: #ff7755; --err-tint: rgba(224, 50, 26, 0.07); --err-border: rgba(224, 50, 26, 0.25); --surface-card: #1c1a1a; --surface-raised: #231f1f; --border-subtle: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.11); --text-primary: #f0ecea; --text-secondary: #a8a0a0; --text-muted: #6e5f5f; font-family: var(--font-raleway), sans-serif; position: relative; background: var(--surface-card); border: 1px solid var(--err-border); border-top: 3px solid var(--err); border-radius: 20px; max-width: min(560px, 100%); width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; animation: faultCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both, topGlowPulse 1s 0.1s ease-out both; box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.05), 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.35); } #error-modal .modal::-webkit-scrollbar { display: none; } /* Hard impact entry — alert, not gentle slide */ @keyframes faultCardIn { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 50% { opacity: 1; transform: translateY(-3px) scale(1.005) translateX(3px); } 68% { opacity: 1; transform: translateY(1px) scale(0.999) translateX(-2px); } 82% { opacity: 1; transform: translateY(-1px) scale(1) translateX(1px); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Top border blazes in then holds a low glow */ @keyframes topGlowPulse { 0% { box-shadow: 0 0 0 rgba(224, 50, 26, 0); } 25% { box-shadow: 0 -4px 28px rgba(224, 50, 26, 0.85), 0 -1px 60px rgba(224, 50, 26, 0.35); } 100% { box-shadow: 0 -1px 12px rgba(224, 50, 26, 0.2); } } /* ── Top shimmer accent — single-pass, fades to steady glow ── */ #error-modal .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(224, 50, 26, 0.5) 20%, var(--err) 50%, rgba(224, 50, 26, 0.5) 80%, transparent 100% ); background-size: 200% 100%; border-radius: 20px 20px 0 0; animation: shimmerPass 0.8s 0.15s cubic-bezier(0.4, 0, 0.2, 1) both; pointer-events: none; z-index: 0; } @keyframes shimmerPass { 0% { background-position: -100% 0; opacity: 0; } 20% { opacity: 1; } 100% { background-position: 200% 0; opacity: 0.7; } } /* ── Top-right ambient glow ── */ #error-modal .modal::after { content: ''; position: absolute; top: -50px; right: -50px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(224, 50, 26, 0.12) 0%, transparent 65%); pointer-events: none; } /* ── Header ── */ #error-modal .modal-header { padding: 36px 40px 0; position: relative; z-index: 1; } @keyframes errFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Pill badge with bolt SVG — one_sdk identity */ #error-modal .error-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(224, 50, 26, 0.1); border: 1px solid rgba(224, 50, 26, 0.32); border-radius: 100px; padding: 5px 13px 5px 8px; margin-bottom: 18px; animation: errFadeIn 0.4s 0.2s both; } #error-modal .badge-icon { width: 22px; height: 22px; background: rgba(224, 50, 26, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #error-modal .badge-icon svg { display: block; } #error-modal .bolt-top { stroke-dasharray: 22; stroke-dashoffset: 22; animation: drawBoltTop 0.5s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } #error-modal .bolt-bottom { stroke-dasharray: 20; stroke-dashoffset: 20; animation: drawBoltBottom 0.6s 0.45s ease-out forwards; } @keyframes drawBoltTop { 0% { stroke-dashoffset: 22; } 55% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 0; } } @keyframes drawBoltBottom { 0% { stroke-dashoffset: 20; } 45% { stroke-dashoffset: 20; } 100%{ stroke-dashoffset: 0; } } #error-modal .badge-text { font-family: var(--font-montserrat), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--err-amber); } #error-modal .modal-title { font-family: var(--font-montserrat), sans-serif; font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.3; animation: errFadeIn 0.35s 0.28s both; } #error-modal .modal-subtitle { margin-top: 12px; font-size: 16px; color: var(--text-secondary); line-height: 1.65; animation: errFadeIn 0.35s 0.36s both; } /* ── Compact info block ── */ #error-modal .error-info { margin: 28px 40px 0; padding: 18px 22px; background: var(--err-tint); border: 1px solid rgba(255, 107, 53, 0.12); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; animation: errFadeIn 0.35s 0.44s both; } #error-modal .error-info-row { display: flex; align-items: center; gap: 14px; } /* Circles — contrasts with scale_your_game's rounded squares */ #error-modal .error-icon-box { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(224, 50, 26, 0.1); border: 1px solid rgba(224, 50, 26, 0.28); display: flex; align-items: center; justify-content: center; color: var(--err-light); box-shadow: 0 0 10px rgba(224, 50, 26, 0.15); } #error-modal .error-info-sep { height: 1px; background: rgba(224, 50, 26, 0.12); margin: 0 -2px; } #error-modal .error-info-text { font-size: 15px; color: var(--text-secondary); line-height: 1.6; } #error-modal .error-info-text a { color: var(--err-amber); text-decoration: underline; text-decoration-color: rgba(255, 119, 85, 0.4); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; } #error-modal .error-info-text a:hover { color: #ff9977; text-decoration-color: rgba(255, 119, 85, 0.8); } /* ── Footer ── */ #error-modal .modal-footer { padding: 24px 40px 36px; position: relative; z-index: 1; animation: errFadeIn 0.35s 0.54s both; } #error-modal .btn-modal-retry { display: block; width: 100%; padding: 15px 28px; background: var(--err); border: none; border-radius: 12px; font-family: var(--font-montserrat), sans-serif; font-size: 16px; font-weight: 700; color: #ffffff; cursor: pointer; letter-spacing: 0.02em; transition: background 0.18s, box-shadow 0.18s, transform 0.15s; box-shadow: 0 2px 16px rgba(224, 50, 26, 0.4); } #error-modal .btn-modal-retry:hover { background: #c82818; box-shadow: 0 4px 24px rgba(224, 50, 26, 0.55); transform: translateY(-1px); } #error-modal .btn-modal-retry:active { transform: translateY(0); } /* ── Close button ── */ #error-modal .close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.15s, border-color 0.15s; color: var(--text-muted); } #error-modal .close-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--border-mid); color: var(--text-secondary); } /* ── Low viewport height ── */ @media (max-height: 640px) { #error-modal { align-items: flex-start; padding-top: 12px; } } /* ── Mobile ≤ 600px ── */ @media (max-width: 600px) { #error-modal { padding: 16px; } #error-modal .modal-header { padding: 28px 24px 0; } #error-modal .modal-title { font-size: 22px; } #error-modal .modal-subtitle { font-size: 14px; line-height: 1.55; margin-top: 10px; } #error-modal .error-info { margin: 22px 24px 0; padding: 14px 16px; } #error-modal .modal-footer { padding: 20px 24px 28px; } #error-modal .btn-modal-retry { padding: 13px 24px; font-size: 15px; } } /* ── Mobile ≤ 375px ── */ @media (max-width: 375px) { #error-modal { padding: 12px; } #error-modal .modal-header { padding: 22px 20px 0; } #error-modal .modal-title { font-size: 19px; } #error-modal .modal-subtitle { font-size: 13px; } #error-modal .error-info { margin: 18px 20px 0; } #error-modal .modal-footer { padding: 16px 20px 24px; } } /* ===== footer.css ===== */ /* ─── Footer ─────────────────────────────────────────────────── */ .site-footer { background-color: var(--blue-ribbon); display: flex; align-items: center; justify-content: center; padding: 18px 58px; position: relative; } .site-footer__copy { color: rgba(255,255,255,0.65); font-family: var(--font-raleway), sans-serif; font-size: 20px; font-weight: bold; letter-spacing: 0.3px; line-height: 1.4; } /* ─── Scroll-to-top button ────────────────────────────────────── */ .scroll-top-btn { background: none; border: none; bottom: 22px; cursor: pointer; opacity: 0; padding: 0; pointer-events: none; position: fixed; right: 22px; transition: opacity 0.3s; z-index: 1000; } .scroll-top-btn:not([hidden]) { opacity: 1; pointer-events: auto; } .scroll-top-btn svg { display: block; } @media (max-width: 900px) { .site-footer { padding: 18px 24px; } } @media (max-width: 430px) { .site-footer { padding: 14px 20px; } .site-footer__copy { font-size: 14px; } } /* ===== chat-widget.css ===== */ /* ─── Floating chat / contact widget ───────────────────────────── Bottom-right, stacked ABOVE the site's bottom-right back-to-top button so the two never overlap. Closed: a round bubble (brand blue) + a callout that appears a few seconds in. Open: a light card (UI overlay) with two ways to reach us. Self-contained, namespaced under .cas-chat. Flat CSS (no nesting). */ .cas-chat { --cc-accent: #0172fd; position: fixed; right: 22px; bottom: 116px; /* clears the back-to-top button (bottom:22 + ~83px) */ z-index: 1000; /* floating-UI tier — same as .scroll-top-btn / .modal */ font-family: "Raleway", "Raleway Fallback", Helvetica, sans-serif; } .cas-chat *, .cas-chat *::before, .cas-chat *::after { box-sizing: border-box; } /* ── Bubble ── */ .cas-chat__bubble { position: relative; width: 84px; height: 84px; border: 0; border-radius: 50%; background: var(--cc-accent); color: #fff; cursor: pointer; box-shadow: 0 12px 32px rgba(1, 114, 253, 0.45); display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, box-shadow 0.18s ease; -webkit-appearance: none; appearance: none; } .cas-chat__bubble:hover { transform: translateY(-2px) scale(1.04); } .cas-chat__bubble svg { width: 34px; height: 34px; } .cas-chat__bubble-ic { display: flex; } .cas-chat__bubble-ic--close { display: none; } .cas-chat.is-open .cas-chat__bubble-ic--open { display: none; } .cas-chat.is-open .cas-chat__bubble-ic--close { display: flex; } /* ── Callout (to the LEFT of the bubble) ── */ .cas-chat__callout { position: absolute; right: 98px; bottom: 20px; width: max-content; max-width: 270px; padding: 14px 38px 14px 18px; border-radius: 14px; background: #fff; color: #1a1f2b; font-size: 15px; line-height: 1.35; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30); opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; cursor: pointer; } .cas-chat__callout.is-shown { opacity: 1; visibility: visible; transform: translateX(0); } .cas-chat__callout-x { position: absolute; top: 7px; right: 9px; width: 20px; height: 20px; border: 0; background: transparent; color: #9098a8; font-size: 17px; line-height: 1; cursor: pointer; } /* ── Panel (opens above the bubble, aligned right) ── */ .cas-chat__panel { position: absolute; right: 0; bottom: 98px; width: 350px; max-width: calc(100vw - 44px); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.40); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .cas-chat.is-open .cas-chat__panel { opacity: 1; visibility: visible; transform: translateY(0); } .cas-chat__head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; background: var(--cc-accent); color: #fff; } .cas-chat__head-title { font-family: "Montserrat", "Montserrat Fallback", Helvetica, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; } .cas-chat__head-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; } .cas-chat__body { padding: 20px; } .cas-chat__greet { margin: 0 0 16px; color: #2b3140; font-size: 15px; line-height: 1.5; } .cas-chat__opt { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 12px; background: #f4f6fb; color: #1a1f2b; margin-bottom: 11px; transition: background 0.15s ease, transform 0.15s ease; } .cas-chat__opt:last-child { margin-bottom: 0; } .cas-chat__opt:hover { background: #e9eefb; transform: translateY(-1px); } .cas-chat__opt-ic { flex: 0 0 auto; color: var(--cc-accent); display: flex; } .cas-chat__opt-txt { flex: 1 1 auto; display: flex; flex-direction: column; } .cas-chat__opt-txt strong { font-size: 15px; font-weight: 600; color: #1a1f2b; } .cas-chat__opt-txt small { font-size: 13px; color: #6b7280; margin-top: 2px; } .cas-chat__opt-arrow { flex: 0 0 auto; color: var(--cc-accent); font-size: 19px; } @media (max-width: 600px) { .cas-chat { right: 16px; bottom: 104px; } .cas-chat__bubble { width: 64px; height: 64px; } .cas-chat__bubble svg { width: 28px; height: 28px; } .cas-chat__callout { right: 78px; max-width: 210px; } } /* ===== popup-ab.css ===== */ /* ─── Timed A/B-test pop-up ─────────────────────────────────────── Self-contained modal with its OWN form (unique ids + js/popup-ab.js) — the live form.js / messenger-channel.js are never touched. Dark dialog to match the page; posts to the same admin-ajax endpoint. Flat CSS, no nesting. */ .abpop { --ap-accent: #0172fd; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1010; /* one step above the 1000 floating-UI tier — overlays chat + page */ display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; font-family: "Raleway", "Raleway Fallback", Helvetica, sans-serif; } .abpop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .abpop *, .abpop *::before, .abpop *::after { box-sizing: border-box; } .abpop__backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(6, 9, 14, 0.72); cursor: pointer; } .abpop__dialog { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: auto; background: #181a1f; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); padding: clamp(26px, 3vw, 40px); transform: translateY(12px); transition: transform 0.25s ease; } .abpop.is-open .abpop__dialog { transform: translateY(0); } .abpop__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: #fff; font-size: 22px; line-height: 36px; text-align: center; cursor: pointer; transition: background 0.15s ease; } .abpop__close:hover { background: rgba(255, 255, 255, 0.20); } .abpop__title { margin: 0 0 8px; font-family: "Montserrat", "Montserrat Fallback", Helvetica, sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.15; color: #fff; text-align: center; } .abpop__sub { margin: 0 0 22px; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.4; color: var(--silver-chalice, #afafaf); text-align: center; } /* Guarantee phrase ("No conditions, no fine print.") on its own line. */ .abpop__sub strong { display: block; } /* ── Fields ── */ .abpop__field { margin-bottom: 14px; } .abpop__row { display: flex; gap: 12px; } .abpop__row > .abpop__field { flex: 1; } .abpop__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #cfd3da; } .abpop__input, .abpop__select { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: #20242b; color: #fff; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.15s ease; -webkit-appearance: none; appearance: none; } .abpop__input::placeholder { color: #7b818c; } .abpop__input:focus, .abpop__select:focus { border-color: var(--ap-accent); } .abpop__input.is-invalid, .abpop__select.is-invalid { border-color: #ff4736; } .abpop__select { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23afafaf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px; padding-right: 36px; } .abpop__err { margin: 6px 0 0; font-size: 12px; color: #ff7063; } /* ── Privacy ── */ .abpop__privacy { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 18px; font-size: 12.5px; line-height: 1.45; color: var(--silver-chalice, #afafaf); } .abpop__privacy input { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--ap-accent); } .abpop__privacy a { color: #cfd3da; text-decoration: underline; } /* ── Submit + microtext ── */ .abpop__submit { width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--ap-accent); color: #fff; font-family: "Montserrat", "Montserrat Fallback", Helvetica, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .abpop__submit:hover { transform: translateY(-1px); } .abpop__submit:disabled { opacity: 0.5; cursor: default; transform: none; } .abpop__micro { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b919c; text-align: center; } .abpop__status { margin: 12px 0 0; font-size: 13px; text-align: center; } .abpop__status.is-error { color: #ff7063; } .abpop__status.is-ok { color: #46d39a; } @media (max-width: 480px) { .abpop__row { flex-direction: column; gap: 0; } } /* The page is zoomed to 0.78 on desktop (html { zoom }); counter it on the dialog so the pop-up renders at its intended (larger) size. The overlay/ backdrop stay full-viewport (un-zoomed). */ @media (min-width: 1025px) { .abpop__dialog { zoom: 1.282051; } } /* ===== lang-switcher.css ===== */ /* * Site header (logo + language switcher) and the switcher control itself. * * The header is shared chrome on every page (EN root + localized copies): the * brand logo (a link, left), primary nav (centre, desktop-only) and the language * switcher (right) live in one sticky bar pinned to the top of the viewport. * The switcher markup is the .cas-lang component * ported from the main site's cas-landings plugin; the language list is * hard-coded per page (no Polylang). * * Light pill, legible on the dark landing background. iPhone 11 / iOS Safari 13+ * safe: flex, transform, transition only — no :has(), container queries. */ /* ── Header bar (sticky) ─────────────────────────────────────────────────── */ /* Offset anchor targets so section tops aren't hidden under the fixed header. */ html { scroll-behavior: smooth; scroll-padding-top: 110px; } .site-header { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 40px; direction: ltr; /* logo left / switcher right on every language, incl. RTL */ background: rgba(19, 19, 19, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); z-index: 1000; } .site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .site-header__logo img { display: block; height: 70px; width: auto; } /* ── Primary nav (centre of the bar) — desktop only ──────────────────────── */ .site-nav { display: flex; align-items: center; gap: 28px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .site-nav__link { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .site-nav__link:hover { color: #6ba8ff; } .site-nav__cta { padding: 9px 20px; border-radius: 999px; background: #0172fd; color: #fff; } .site-nav__cta:hover { color: #fff; background: #0161df; } @media (max-width: 1024px) { .site-header { padding: 12px 24px; } .site-header__logo img { height: 48px; } /* Hidden below desktop (no hamburger — logo + switcher remain). */ .site-nav { display: none; } } @media (max-width: 768px) { html { scroll-padding-top: 80px; } .site-header { padding: 10px 16px; } .site-header__logo img { height: 40px; } } /* ── Language switcher control ───────────────────────────────────────────── */ .cas-lang { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; direction: ltr; /* keep the control LTR (code → chevron) even on RTL pages */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.2; } .cas-lang * { box-sizing: border-box; } /* Trigger pill */ .cas-lang__btn { display: flex; align-items: center; margin: 0; padding: 10px 16px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; background: #fff; color: #1a2233; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .14); transition: box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .cas-lang__btn:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); } .cas-lang__code { text-transform: uppercase; letter-spacing: .03em; } .cas-lang__chev { display: block; width: 14px; height: 9px; margin-left: 8px; color: #6b7280; transition: transform .2s ease; } .cas-lang.is-open .cas-lang__chev { transform: rotate(180deg); } /* Dropdown */ .cas-lang__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .cas-lang.is-open .cas-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); } .cas-lang__item { margin: 0; padding: 0; } .cas-lang__item a { display: flex; align-items: center; padding: 10px 12px; border-radius: 9px; color: #1a2233; text-decoration: none; font-size: 15px; transition: background .15s ease; } .cas-lang__item a:hover { background: #f1f4f9; } .cas-lang__item.is-current a { color: #0172fd; font-weight: 700; cursor: default; } .cas-lang__item-code { flex: 0 0 34px; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .03em; color: #6b7280; } .cas-lang__item.is-current .cas-lang__item-code { color: #0172fd; } .cas-lang__item-name { flex: 1 1 auto; } /* Mobile: smaller pill (the header bar handles its placement). */ @media (max-width: 768px) { .cas-lang__btn { padding: 8px 13px; font-size: 14px; } } /* * Localized text heading that replaces a baked-in English SVG headline image * (the SVG art is outlined paths, not editable text). Used only on translated * copies; harmless on the EN root where it isn't referenced. */ .l10n-heading { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: #fff; background: linear-gradient(180deg, #ffffff 0%, #8fbfff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Per-slot sizing for the headings that replace SVG art (localized copies). */ .architecture__heading-img.l10n-heading { font-size: clamp(30px, 5.2vw, 70px); } .cta-section__elevate.l10n-heading { font-size: clamp(26px, 4.4vw, 60px); }