/* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* vietnamese */ /* latin-ext */ /* latin */ /* latin-ext */ /* latin */ /* latin-ext */ /* latin */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* ─────────── */ /* ============================================================ Eklips[ia] — Landing redesign Themeable via [data-dir] on : nocturn | editorial | vibrant Accent + fonts driven by CSS variables set from the Tweaks panel. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; } :root { /* tunables (overridden by tweaks) */ --accent: #46c6cf; --accent-2: #2a8fb8; --accent-3: #3a5ad0; --font-display: 'Space Grotesk'; --font-body: 'Hanken Grotesk'; --radius: 18px; --radius-sm: 12px; --maxw: 1280px; --pad: clamp(20px, 5vw, 64px); /* defaults (nocturn) — re-declared per theme below */ --bg: #0a1130; --bg-2: #0e1740; --bg-3: #13224f; --ink: #eef3ff; --ink-2:#c4d0f0; --muted:#8d9cce; --line: rgba(255,255,255,.11); --line-2: rgba(255,255,255,.07); --card: rgba(255,255,255,.035); --card-hover: rgba(255,255,255,.06); --on-accent: #04122a; --shadow: 0 30px 80px -30px rgba(0,0,0,.6); } /* ---------- Themes ---------- */ html[data-dir="nocturn"] { --bg:#0a1130; --bg-2:#0e1740; --bg-3:#13224f; --ink:#eef3ff; --ink-2:#c4d0f0; --muted:#8d9cce; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.07); --card:rgba(255,255,255,.035); --card-hover:rgba(255,255,255,.065); --on-accent:#04122a; --shadow:0 30px 80px -30px rgba(0,0,0,.6); color-scheme: dark; } html[data-dir="editorial"] { --bg:#f4f5fb; --bg-2:#ffffff; --bg-3:#eef0fa; --ink:#101736; --ink-2:#36406b; --muted:#5d6896; --line:rgba(16,23,54,.12); --line-2:rgba(16,23,54,.07); --card:#ffffff; --card-hover:#ffffff; --on-accent:#06182c; --shadow:0 26px 60px -32px rgba(20,30,80,.30); color-scheme: light; } html[data-dir="vibrant"] { --bg:#ffffff; --bg-2:#f5f7ff; --bg-3:#eef2ff; --ink:#101736; --ink-2:#3a4470; --muted:#5b6694; --line:rgba(16,23,54,.10); --line-2:rgba(16,23,54,.06); --card:#ffffff; --card-hover:#ffffff; --on-accent:#06182c; --shadow:0 28px 64px -30px rgba(40,60,160,.28); color-scheme: light; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body), system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Themed surface lives on .page so it survives host-injected `html, body { background: transparent }` and keeps light themes visible. */ .page { background: var(--bg); color: var(--ink); min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-display), var(--font-body), sans-serif; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .section { padding-block: clamp(72px, 10vw, 140px); position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 8px 15px; border-radius: 100px; border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent); background: color-mix(in oklab, var(--accent) 9%, transparent); } .eyebrow .dot { width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); } .kicker { font-family: var(--font-display); font-size: 13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); } .lead { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 20px); } .muted { color: var(--muted); } .accent-text { color: var(--accent); } /* gradient ink helper */ .grad { background: linear-gradient(100deg, var(--accent-3), var(--accent-2) 45%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Buttons ---------- */ .btn { --btn-pad: 15px 26px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; padding: var(--btn-pad); border-radius: 100px; cursor: pointer; border: 1px solid transparent; transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { color: var(--on-accent); background: linear-gradient(100deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--accent) 60%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in oklab, var(--accent) 70%, transparent); } .btn-ghost { color: var(--ink); background: transparent; border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(1.4); background: color-mix(in oklab, var(--bg) 72%, transparent); border-bottom: 1px solid var(--line-2); } .nav-inner { display: flex; align-items: center; gap: 20px; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; flex: none; } .brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 4px 14px color-mix(in oklab, var(--accent) 40%, transparent)); } .brand b { font-weight: 700; } .brand .br { color: var(--accent); } .nav-links { display: flex; gap: 22px; margin-left: 6px; } .nav-links a { font-size: 15px; color: var(--ink-2); font-weight: 500; position: relative; white-space: nowrap; } .nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--accent); transition: width .22s ease; border-radius: 2px; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-links a.active { color: var(--ink); font-weight: 600; } .nav-links a.active::after { width: 100%; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .lang { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); } .lang button { display: flex; align-items: center; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 100px; transition: all .2s ease; } .lang button svg { display: block; width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; opacity: .5; transition: opacity .2s ease, transform .2s ease; } .lang button:hover svg { opacity: .85; } .lang button.active svg { opacity: 1; transform: scale(1.06); } .lang button.active { box-shadow: 0 0 0 2px var(--accent); } .nav-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; cursor:pointer; color:var(--ink); } .nav-toggle svg { width:20px; height:20px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(60px, 8vw, 120px); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { font-size: clamp(40px, 6.6vw, 82px); font-weight: 600; margin: 22px 0 0; } .hero h1 .em { font-style: normal; } .hero p.sub { margin-top: 24px; max-width: 30em; font-size: clamp(17px, 1.45vw, 21px); color: var(--ink-2); } .hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .stats { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 42px; flex-wrap: wrap; } .stat { position: relative; } .stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; } .stat .n .grad-i { background: linear-gradient(120deg, var(--accent-3), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .l { color: var(--muted); font-size: 14px; margin-top: 7px; font-weight: 500; } .stat + .stat::before { content:""; position:absolute; left: calc(-1 * clamp(10px, 1.5vw, 22px)); top: 4px; bottom: 4px; width: 1px; background: var(--line); } /* hero visual */ .hero-visual { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; } .hero-brain { width: 78%; max-width: 460px; position: relative; z-index: 3; filter: drop-shadow(0 30px 60px color-mix(in oklab, var(--accent) 28%, transparent)); } .hero-glow { position: absolute; inset: 6% ; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 62%); filter: blur(20px); } .hero-net { position: absolute; inset: -6%; z-index: 2; width: 112%; height: 112%; overflow: visible; pointer-events:none; } .hero-net line, .hero-net path { stroke: color-mix(in oklab, var(--accent) 55%, transparent); stroke-width: 1.1; fill:none; } .hero-net .node { fill: var(--accent); } .hero-net .bar { fill: color-mix(in oklab, var(--accent) 70%, transparent); } .hero-ring { position:absolute; border-radius:50%; border:1px dashed color-mix(in oklab, var(--accent) 30%, transparent); inset: -2%; z-index:1; } /* faint dotted/grid backdrop for hero */ .hero::before { content:""; position:absolute; inset:0; z-index:0; opacity:.5; background: radial-gradient(circle at 18% 14%, color-mix(in oklab, var(--accent-3) 22%, transparent), transparent 38%), radial-gradient(circle at 92% 80%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 42%); pointer-events:none; } html[data-dir="editorial"] .hero::before, html[data-dir="vibrant"] .hero::before { opacity:.85; } .hero .wrap { position: relative; z-index: 2; } /* dotted texture toggle */ html[data-net="on"] .page { background-image: radial-gradient(color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px); background-size: 34px 34px; } /* ---------- Trust strip ---------- */ .trust { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--bg-2); } .trust-inner { display: flex; align-items: center; gap: 28px; padding-block: 26px; flex-wrap: wrap; justify-content: space-between; } .trust p { color: var(--muted); font-size: 15px; max-width: 30em; } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chip { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 15px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); } /* ---------- Section header ---------- */ .sec-head { max-width: 760px; } .sec-head h2 { font-size: clamp(30px, 4.4vw, 56px); margin-top: 16px; } .sec-head p { margin-top: 18px; color: var(--ink-2); font-size: clamp(16px,1.3vw,19px); } .sec-head.center { margin-inline: auto; text-align: center; } /* ---------- Applications grid ---------- */ .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; } .app { position: relative; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); transition: transform .25s ease, border-color .25s ease, background .25s ease; overflow: hidden; } .app:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: var(--card-hover); } .app .ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, var(--accent-3) 18%, transparent)); border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); } .app .ic svg { width: 25px; height: 25px; stroke: var(--accent); fill: none; stroke-width: 1.7; } .app h3 { font-size: 20px; letter-spacing: -.01em; } .app p { margin-top: 9px; color: var(--muted); font-size: 14.5px; } .app .idx { position:absolute; top:22px; right:24px; font-family:var(--font-display); font-weight:700; font-size:13px; color: var(--muted); opacity:.55; } .app.wide { grid-column: span 1; } /* ---------- Programs ---------- */ .programs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; } .program { position: relative; padding: 40px; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .program.feature { background: linear-gradient(160deg, color-mix(in oklab, var(--accent-3) 18%, var(--bg-2)), var(--bg-2)); border-color: color-mix(in oklab, var(--accent) 36%, transparent); } .program .ribbon { position:absolute; top:26px; right:-44px; transform: rotate(45deg); background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-family: var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em; padding: 7px 56px; text-transform: uppercase; } .program .p-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .program .p-name { font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.02em; } .program .p-hours { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent); border:1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding:6px 13px; border-radius:100px; white-space:nowrap; } .program .p-desc { color: var(--ink-2); margin-top: 14px; font-size: 15.5px; } .program ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; } .program li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); } .program li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; stroke: var(--accent); fill:none; stroke-width:2.2; } .program .p-foot { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap; } /* ---------- Methodology ---------- */ .method { background: var(--bg-2); border-block: 1px solid var(--line-2); } .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; } .method-points { display: grid; gap: 14px; margin-top: 38px; } .mp { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); transition: border-color .2s, transform .2s; } .mp:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); transform: translateX(4px); } .mp .mp-n { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--accent) 36%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); } .mp h4 { font-size: 17px; font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; } .mp p { color: var(--muted); font-size: 14px; margin-top: 4px; } .method-visual { position: relative; aspect-ratio: 4/4.4; border-radius: calc(var(--radius)+8px); border: 1px solid var(--line); overflow: hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--accent-3) 20%, var(--bg-3)), var(--bg-3)); } .method-visual .big { position:absolute; inset:0; display:grid; place-items:center; } .method-visual .big .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(80px,12vw,150px); letter-spacing:-.05em; line-height:.9; text-align:center; } .method-visual .big .lbl { text-align:center; color: var(--ink-2); margin-top: 6px; font-size: 15px; letter-spacing:.02em; } /* ---------- Audience ---------- */ .audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; } .aud { padding: 32px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); transition: transform .25s, border-color .25s; } .aud:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .aud .ic { width:54px; height:54px; border-radius: 14px; display:grid; place-items:center; margin-bottom: 22px; background: color-mix(in oklab, var(--accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); } .aud .ic svg { width: 27px; height: 27px; stroke: var(--accent); fill:none; stroke-width:1.7; } .aud h3 { font-size: 21px; } .aud p { margin-top: 11px; color: var(--muted); font-size: 15px; } .aud .tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; } .aud .tags span { font-size:12.5px; color:var(--ink-2); padding:5px 11px; border-radius:100px; border:1px solid var(--line); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; } .cta-card { position: relative; border-radius: calc(var(--radius)+12px); overflow: hidden; padding: clamp(44px, 6vw, 84px); background: linear-gradient(135deg, var(--accent-3), var(--accent-2) 55%, var(--accent)); color: #fff; } html[data-dir="nocturn"] .cta-card { color:#031021; } .cta-card h2 { color: inherit; font-size: clamp(32px, 4.6vw, 60px); max-width: 16ch; } .cta-card p { margin-top: 18px; max-width: 44ch; font-size: clamp(16px,1.4vw,20px); opacity: .92; } .cta-card .cta-actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; } .cta-card .btn-primary { background:#fff; color:#0a1130; box-shadow:none; } .cta-card .btn-primary:hover { background:#fff; } .cta-card .btn-ghost { color:inherit; border-color: rgba(255,255,255,.55); } .cta-card .btn-ghost:hover { border-color:#fff; color:inherit; background: rgba(255,255,255,.12); } .cta-card::after { content:""; position:absolute; right:-8%; top:-30%; width:55%; height:160%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); pointer-events:none; } .cta-net { position:absolute; right:4%; bottom:6%; width:240px; opacity:.5; pointer-events:none; } .cta-net line { stroke: rgba(255,255,255,.6); stroke-width:1; } .cta-net circle { fill:#fff; } /* contact info row (contacte page) */ .contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; } .contact-info .ci { display: flex; flex-direction: column; gap: 5px; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); transition: border-color .2s, transform .2s; } a.ci:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); transform: translateY(-3px); } .contact-info .ci-k { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .contact-info .ci-v { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } @media (max-width: 760px) { .contact-info { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line-2); padding-block: 64px 40px; background: var(--bg-2); } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } .foot-brand p { color: var(--muted); font-size: 14.5px; margin-top: 16px; max-width: 30ch; } .foot-col h5 { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 600; } .foot-col a { display: block; color: var(--ink-2); font-size: 14.5px; padding: 5px 0; transition: color .2s; } .foot-col a:hover { color: var(--accent); } .foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13.5px; } /* ---------- reveal ---------- */ /* Visible end-state is the BASE so content is never stuck hidden if the animation engine is disabled/frozen (capture tools, old engines, exports). We only animate FROM hidden, and only once JS confirms it's safe (anim-ready). */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html.anim-ready .reveal.in { animation: revealIn .7s cubic-bezier(.2,.7,.2,1) both; } } @keyframes revealIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } html[data-motion="off"] .reveal.in { animation: none !important; } /* staggered card entrances */ @media (prefers-reduced-motion: no-preference) { html[data-motion="on"] .apps .reveal:nth-child(2) { animation-delay: .07s; } html[data-motion="on"] .apps .reveal:nth-child(3) { animation-delay: .14s; } html[data-motion="on"] .apps .reveal:nth-child(4) { animation-delay: .21s; } html[data-motion="on"] .apps .reveal:nth-child(5) { animation-delay: .28s; } html[data-motion="on"] .apps .reveal:nth-child(6) { animation-delay: .35s; } html[data-motion="on"] .audience .reveal:nth-child(2) { animation-delay: .1s; } html[data-motion="on"] .audience .reveal:nth-child(3) { animation-delay: .2s; } html[data-motion="on"] .programs .reveal:nth-child(2) { animation-delay: .12s; } } /* ============================================================ Hero imagery — living, "pro" motion. Visible-by-default base so nothing is hidden if the engine is paused; loops gated on data-motion + reduced-motion. ============================================================ */ .hero-brain-wrap { position: relative; z-index: 3; width: 100%; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2,.7,.2,1); will-change: transform; } .hero-net { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; } @media (prefers-reduced-motion: no-preference) { /* brain bobs gently; glow breathes; ring rotates slowly */ html[data-motion="on"] .hero-brain { animation: floatBrain 7.5s ease-in-out infinite; } html[data-motion="on"] .hero-glow { animation: breatheGlow 6s ease-in-out infinite; } html[data-motion="on"] .hero-ring { animation: spinRing 48s linear infinite; } /* network lines draw themselves in, then stay */ html[data-motion="on"] .hero-net .links line { animation: drawLine 1.5s cubic-bezier(.4,0,.1,1) both; } html[data-motion="on"] .hero-net .links line:nth-child(2) { animation-delay: .12s; } html[data-motion="on"] .hero-net .links line:nth-child(3) { animation-delay: .24s; } html[data-motion="on"] .hero-net .links line:nth-child(4) { animation-delay: .36s; } html[data-motion="on"] .hero-net .links line:nth-child(5) { animation-delay: .48s; } html[data-motion="on"] .hero-net .links line:nth-child(6) { animation-delay: .60s; } html[data-motion="on"] .hero-net .links line:nth-child(7) { animation-delay: .72s; } html[data-motion="on"] .hero-net .links line:nth-child(8) { animation-delay: .84s; } html[data-motion="on"] .hero-net .links line:nth-child(9) { animation-delay: .96s; } /* nodes pulse on a stagger */ html[data-motion="on"] .hero-net .node { transform-box: fill-box; transform-origin: center; animation: nodePulse 3.2s ease-in-out infinite; } html[data-motion="on"] .hero-net .node:nth-child(2) { animation-delay: .3s; } html[data-motion="on"] .hero-net .node:nth-child(3) { animation-delay: .6s; } html[data-motion="on"] .hero-net .node:nth-child(4) { animation-delay: .9s; } html[data-motion="on"] .hero-net .node:nth-child(5) { animation-delay: 1.2s; } html[data-motion="on"] .hero-net .node:nth-child(6) { animation-delay: 1.5s; } html[data-motion="on"] .hero-net .node:nth-child(7) { animation-delay: 1.8s; } html[data-motion="on"] .hero-net .node:nth-child(8) { animation-delay: 2.1s; } /* data bars grow up, then keep a tiny life */ html[data-motion="on"] .hero-net .bar { transform-box: fill-box; transform-origin: bottom; animation: growBar 1s cubic-bezier(.3,1.3,.5,1) both, barBreathe 4s ease-in-out infinite 1.2s; } html[data-motion="on"] .hero-net .bars rect:nth-child(2) { animation-delay: .15s, 1.35s; } html[data-motion="on"] .hero-net .bars rect:nth-child(3) { animation-delay: .3s, 1.5s; } /* CTA corner network twinkles */ html[data-motion="on"] .cta-net circle { transform-box: fill-box; transform-origin: center; animation: nodePulse 3s ease-in-out infinite; } } @keyframes floatBrain { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-14px) rotate(.6deg); } } @keyframes breatheGlow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes spinRing { to { transform: rotate(360deg); } } @keyframes drawLine { from { stroke-dashoffset: 1; opacity: 0; } 40% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes nodePulse { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.25); opacity: 1; } } @keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes barBreathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } } /* dasharray set so drawLine has something to reveal (pathLength="1" on the lines) */ .hero-net .links line { stroke-dasharray: 1; } /* ============================================================ NEW positioning components ============================================================ */ .section.alt { background: var(--bg-2); border-block: 1px solid var(--line-2); } /* compact interior page header */ .page-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(30px,4vw,52px); } .page-hero::before { content:""; position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none; background: radial-gradient(circle at 16% 8%, color-mix(in oklab, var(--accent-3) 20%, transparent), transparent 42%), radial-gradient(circle at 96% 90%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 46%); } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(34px, 5.4vw, 64px); margin-top: 16px; max-width: 20ch; } .page-hero p.lead { margin-top: 18px; max-width: 56ch; } .page-hero .hero-cta { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; } /* Don't stack the hero's bottom padding on top of the next section's top padding */ .page-hero + .section { padding-top: clamp(16px, 2.5vw, 36px); } /* diagnostic hook line */ .diag-hook { display:inline-flex; align-items:center; gap:10px; margin-top:22px; color:var(--ink-2); font-size:14.5px; } .diag-hook svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:2; flex:none; } /* experience strip */ .exp-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px,5vw,64px); align-items:center; } .exp-bul { display:grid; gap:14px; } .exp-bul .b { display:flex; gap:15px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); } .exp-bul .b svg { width:24px; height:24px; flex:none; stroke:var(--accent); fill:none; stroke-width:1.8; margin-top:2px; } .exp-bul .b h4 { font-family:var(--font-body); font-weight:700; font-size:16.5px; letter-spacing:-.01em; } .exp-bul .b p { color:var(--muted); font-size:14px; margin-top:3px; } .exp-badge { position:relative; border-radius:calc(var(--radius)+8px); border:1px solid var(--line); overflow:hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--accent-3) 20%, var(--bg-3)), var(--bg-3)); aspect-ratio: 5/4.4; display:grid; place-items:center; text-align:center; padding:30px; } .exp-badge .big { font-family:var(--font-display); font-weight:700; font-size:clamp(64px,9vw,120px); line-height:.9; letter-spacing:-.04em; } .exp-badge .cap { color:var(--ink-2); margin-top:10px; font-size:15px; max-width:24ch; } .exp-badge .est { position:absolute; top:20px; left:22px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklab, var(--accent) 36%, transparent); padding:6px 12px; border-radius:100px; } /* services */ .svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:56px; } .svc { position:relative; padding:30px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); transition: transform .25s, border-color .25s, background .25s; display:flex; flex-direction:column; overflow:hidden; } .svc:hover { transform:translateY(-5px); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background:var(--card-hover); } .svc .ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, var(--accent-3) 18%, transparent)); border:1px solid color-mix(in oklab, var(--accent) 32%, transparent); } .svc .ic svg { width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.7; } .svc h3 { font-size:20px; letter-spacing:-.01em; } .svc > p { margin-top:9px; color:var(--muted); font-size:14.5px; } .svc ul { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; } .svc li { display:flex; gap:9px; align-items:flex-start; font-size:13.8px; color:var(--ink-2); } .svc li svg { flex:none; width:17px; height:17px; margin-top:1px; stroke:var(--accent); fill:none; stroke-width:2.4; } .svc .svc-cta { margin-top:auto; padding-top:20px; } .svc .svc-cta a { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--accent); } .svc .svc-cta a .arrow { transition:transform .2s; } .svc:hover .svc-cta a .arrow { transform:translateX(4px); } /* ROI calculator */ .roi-card { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center; padding:clamp(30px,4vw,52px); border-radius:calc(var(--radius)+10px); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: linear-gradient(160deg, color-mix(in oklab, var(--accent-3) 15%, var(--bg-2)), var(--bg-2)); margin-top:48px; } .roi-field { margin-bottom: 26px; } .roi-field:last-child { margin-bottom: 0; } .roi-field .rl { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; } .roi-field .rl label { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); } .roi-field .rl .rv { font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); border:1px solid color-mix(in oklab, var(--accent) 35%, transparent); padding:4px 14px; border-radius:100px; white-space:nowrap; } .roi-field input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:100px; background: var(--line); outline:none; cursor:pointer; } .roi-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); cursor:grab; box-shadow:0 4px 14px -2px color-mix(in oklab, var(--accent) 75%, transparent), 0 0 0 5px color-mix(in oklab, var(--accent) 18%, transparent); border:3px solid #fff; transition: transform .15s ease; } .roi-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); } .roi-field input[type="range"]:active::-webkit-slider-thumb { cursor:grabbing; transform: scale(1.18); } .roi-field input[type="range"]::-moz-range-thumb { width:26px; height:26px; border-radius:50%; border:3px solid #fff; background: var(--accent); cursor:grab; box-shadow:0 4px 14px -2px color-mix(in oklab, var(--accent) 75%, transparent); } .roi-hint { display:inline-flex; align-items:center; gap:9px; margin-bottom:24px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent); border:1px dashed color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 7%, transparent); padding:9px 15px; border-radius:100px; } .roi-hint svg { width:17px; height:17px; flex:none; } @media (prefers-reduced-motion: no-preference) { html[data-motion="on"] .roi-hint svg { animation: hintNudge 1.6s ease-in-out infinite; } } @keyframes hintNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .roi-result { border-radius:var(--radius); border:1px solid var(--line); background:var(--card); padding:30px 32px; } .roi-out { margin-bottom:24px; } .roi-out:last-of-type { margin-bottom:0; } .roi-out .rk { font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .roi-out .rn { font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5vw,58px); line-height:1; letter-spacing:-.03em; margin-top:8px; background: linear-gradient(120deg, var(--accent-3), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .roi-note { color:var(--muted); font-size:12.5px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); } .roi-result .btn { margin-top:20px; width:100%; justify-content:center; } /* before / after comparator */ .ba-wrap { position:relative; margin-top:48px; border-radius:calc(var(--radius)+8px); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/8.2; user-select:none; touch-action:none; background:var(--bg-3); } .ba-layer { position:absolute; inset:0; } .ba-after { z-index:1; } .ba-before { z-index:2; overflow:hidden; width:50%; border-right:2px solid var(--accent); } .ba-before .ba-inner { position:absolute; inset:0; width:var(--ba-w, 100vw); } .ba-tag { position:absolute; top:16px; z-index:4; font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:100px; color:#fff; backdrop-filter:blur(6px); } .ba-tag.b { left:16px; background: color-mix(in oklab, #0a1130 55%, transparent); } .ba-tag.a { right:16px; background: linear-gradient(100deg, var(--accent), var(--accent-2)); color:var(--on-accent); } .ba-cap { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px; font-size:13.5px; color:#eaf1ff; background:linear-gradient(to top, rgba(4,10,26,.82), transparent); pointer-events:none; } .ba-before .ba-cap { text-align:left; } .ba-after .ba-cap { text-align:right; } .ba-handle { position:absolute; top:0; bottom:0; left:50%; z-index:5; width:44px; transform:translateX(-50%); cursor:ew-resize; display:grid; place-items:center; } .ba-handle .line { position:absolute; top:0; bottom:0; width:2px; background: color-mix(in oklab, var(--accent) 80%, #fff 20%); } .ba-handle .knob { position:relative; width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 20px -4px rgba(0,0,0,.5); color:#0a1130; } .ba-handle .knob svg { width:22px; height:22px; } .ba-ph { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); font-size:14px; gap:8px; } /* grants */ .grants-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:clamp(28px,4vw,52px); align-items:start; } .grants-table { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); } .grants-table .row { display:grid; grid-template-columns: 1fr auto; gap:12px; padding:16px 22px; border-top:1px solid var(--line-2); align-items:center; } .grants-table .row:first-child { border-top:none; } .grants-table .row.head { background: color-mix(in oklab, var(--accent) 8%, transparent); } .grants-table .row.head span { font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .grants-table .row .lbl { color:var(--ink-2); font-size:15px; } .grants-table .row .amt { font-family:var(--font-display); font-weight:700; font-size:18px; background: linear-gradient(120deg, var(--accent-3), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .grants-table .row.big .amt { font-size:20px; } .grants-note { color:var(--muted); font-size:12.5px; margin-top:14px; } .grants-src { display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; } .grants-src:hover { color:var(--accent-3); } .grants-src svg { width:15px; height:15px; flex:none; } .grants-src.on-grad { color:inherit; opacity:.92; position:relative; z-index:1; } .grants-src.on-grad:hover { opacity:1; color:inherit; } .grants-badges { display:grid; gap:14px; margin-top:34px; } .grants-badges .gb { display:flex; gap:15px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); } .grants-badges .gb svg { width:24px; height:24px; flex:none; stroke:var(--accent); fill:none; stroke-width:1.8; margin-top:2px; } .grants-badges .gb h4 { font-family:var(--font-body); font-weight:700; font-size:16px; } .grants-badges .gb p { color:var(--muted); font-size:13.8px; margin-top:3px; } .grants-hi { position:relative; overflow:hidden; border-radius:calc(var(--radius)+8px); padding:clamp(30px,4vw,48px); background: linear-gradient(135deg, var(--accent-3), var(--accent-2) 55%, var(--accent)); color:#fff; } html[data-dir="nocturn"] .grants-hi { color:#041021; } .grants-hi::after { content:""; position:absolute; right:-6%; top:-30%; width:50%; height:160%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); pointer-events:none; } .grants-hi .amt-big { font-family:var(--font-display); font-weight:700; font-size:clamp(44px,6vw,76px); line-height:.95; letter-spacing:-.03em; } .grants-hi p { opacity:.94; margin-top:12px; max-width:40ch; } .grants-hi .btn { margin-top:26px; } .grants-hi .btn-primary { background:#fff; color:#0a1130; box-shadow:none; } /* cases */ .cases-grid { display:grid; gap:22px; margin-top:56px; } .case { display:grid; grid-template-columns: 1fr 1.1fr; gap:0; border:1px solid var(--line); border-radius:calc(var(--radius)+6px); overflow:hidden; background:var(--card); } .case:nth-child(even) .case-media { order:2; } .case-media { position:relative; min-height:300px; background:var(--bg-3); } .case-body { padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; } .case-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .case-tags span { font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--accent); border:1px solid color-mix(in oklab, var(--accent) 36%, transparent); padding:5px 11px; border-radius:100px; } .case-body h3 { font-size:clamp(22px,2.4vw,30px); } .case-rows { display:grid; gap:14px; margin-top:22px; } .case-row { display:grid; grid-template-columns: auto 1fr; gap:14px; align-items:start; } .case-row .ck { font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); width:74px; padding-top:2px; } .case-row .cd { color:var(--ink-2); font-size:14.5px; } /* image placeholder wrapper (holds ) */ .img-slot-fill { position:absolute; inset:0; } .img-ph-badge { position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--font-display); font-size:11.5px; font-weight:600; letter-spacing:.05em; color:var(--muted); background: color-mix(in oklab, var(--bg) 70%, transparent); padding:5px 10px; border-radius:100px; border:1px solid var(--line-2); pointer-events:none; } /* process steps */ .proc-steps { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:56px; } .proc-step { position:relative; padding:30px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); } .proc-step .pn { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--on-accent); width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:20px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); } .proc-step h3 { font-size:18.5px; } .proc-step p { color:var(--muted); font-size:14px; margin-top:9px; } .proc-step:not(:last-child)::after { content:"→"; position:absolute; right:-13px; top:44px; z-index:2; color:var(--accent); font-size:20px; font-weight:700; } .proc-price { margin-top:26px; display:flex; gap:18px; align-items:center; padding:26px 30px; border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--accent) 32%, transparent); background: color-mix(in oklab, var(--accent) 8%, var(--bg-2)); } .proc-price .pic { width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); } .proc-price .pic svg { width:26px; height:26px; stroke:var(--on-accent); fill:none; stroke-width:2; } .proc-price h3 { font-size:19px; } .proc-price p { color:var(--ink-2); font-size:14.5px; margin-top:3px; } /* about */ .about-grid { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; } .about-copy p { color:var(--ink-2); font-size:16.5px; margin-top:16px; } .values { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; } .value { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); transition:border-color .2s, transform .2s; } .value:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); transform:translateY(-4px); } .value .vic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; background: color-mix(in oklab, var(--accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); } .value .vic svg { width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.8; } .value h3 { font-size:19px; } .value p { color:var(--muted); font-size:14.5px; margin-top:8px; } /* lead form */ .lead-form { border:1px solid var(--line); border-radius:calc(var(--radius)+6px); background:var(--card); padding:clamp(26px,3vw,40px); } .lead-form h3 { font-size:clamp(21px,2.4vw,28px); } .lead-form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; } .field { display:flex; flex-direction:column; gap:7px; } .field.full { grid-column:1 / -1; } .field label { font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); } .field input, .field textarea { font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:13px 15px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%; } .field textarea { min-height:96px; resize:vertical; } .field input:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } .field input::placeholder, .field textarea::placeholder { color:var(--muted); opacity:.7; } .form-pref { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } .form-pref label { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer; border:1px solid var(--line); border-radius:100px; padding:8px 14px; transition:border-color .2s, background .2s; } .form-pref input { accent-color:var(--accent); } .form-pref label:has(input:checked) { border-color:var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); } .lead-form .btn { margin-top:20px; width:100%; justify-content:center; } .form-privacy { color:var(--muted); font-size:12px; margin-top:12px; text-align:center; } .form-ok { color:var(--accent); font-size:14.5px; margin-top:14px; text-align:center; font-weight:600; display:none; } .form-ok.show { display:block; } /* contact split */ .contact-split { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start; } .contact-cards { display:grid; gap:14px; } .cc { display:flex; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); transition:border-color .2s, transform .2s; } a.cc:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); transform:translateX(4px); } .cc .cic { width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; background: color-mix(in oklab, var(--accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); } .cc .cic svg { width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.8; } .cc .ck { font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .cc .cv { font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ink); margin-top:2px; } .calendly-embed { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:26px; text-align:center; margin-top:14px; } .calendly-embed .ce-ic { width:56px; height:56px; margin:0 auto 16px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); } .calendly-embed .ce-ic svg { width:28px; height:28px; stroke:var(--on-accent); fill:none; stroke-width:2; } .calendly-embed p { color:var(--muted); font-size:14px; margin-top:8px; } .calendly-embed .btn { margin-top:18px; } /* nav phone + WhatsApp FAB */ .nav-phone { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-2); } .nav-phone svg { width:17px; height:17px; stroke:var(--accent); fill:none; stroke-width:2; } .nav-phone:hover { color:var(--accent); } .wa-fab { position:fixed; right:20px; bottom:20px; z-index:80; display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 15px; border-radius:100px; background:#25D366; color:#053f1e; font-family:var(--font-display); font-weight:700; font-size:14.5px; box-shadow:0 12px 34px -8px rgba(37,211,102,.55); transition:transform .2s, box-shadow .25s; } .wa-fab:hover { transform:translateY(-3px); box-shadow:0 18px 44px -10px rgba(37,211,102,.65); } .wa-fab svg { width:23px; height:23px; } .wa-fab .wa-txt { white-space:nowrap; } @media (max-width:600px){ .wa-fab { padding:14px; } .wa-fab .wa-txt { display:none; } } /* ---------- Responsive ---------- */ /* Give the tab bar room before it collapses: drop the phone number first, then switch to the hamburger menu — so tab labels never look cramped/cut. */ @media (max-width: 1200px) { .nav-phone { display: none; } } @media (max-width: 1060px) { .nav-links { display: none; } .nav-toggle { display: grid; place-items: center; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; max-width: 380px; margin: 0 auto; } .method-grid { grid-template-columns: 1fr; } .apps { grid-template-columns: repeat(2, 1fr); } .programs { grid-template-columns: 1fr; } .audience { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .nav-links { display: none; } .nav-toggle { display: grid; place-items:center; } .svc-grid { grid-template-columns: repeat(2,1fr); } .roi-card { grid-template-columns: 1fr; } .exp-grid, .grants-grid, .about-grid, .contact-split { grid-template-columns: 1fr; } .proc-steps { grid-template-columns: repeat(2,1fr); } .proc-step:not(:last-child)::after { display:none; } .case, .case:nth-child(even) .case-media { grid-template-columns: 1fr; } .case-media, .case:nth-child(even) .case-media { order:-1; } .case-media { min-height:220px; } .nav-phone { display:none; } } @media (max-width: 600px) { .apps { grid-template-columns: 1fr; } .svc-grid { grid-template-columns: 1fr; } .values { grid-template-columns: 1fr; } .proc-steps { grid-template-columns: 1fr; } .lead-form .grid2 { grid-template-columns: 1fr; } .lang { display:none; } .trust-inner { flex-direction: column; align-items: flex-start; gap: 18px; } .foot-grid { grid-template-columns: 1fr; } .ba-wrap { aspect-ratio: 3/3.4; } } /* ---------- Nav dropdown (Productes) ---------- */ .nav-dd { position: relative; display: flex; align-items: center; } .nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .dd-caret { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .22s ease; } .nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); } .nav-dd::after { content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 18px; } .nav-dd-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: 360px; padding: 10px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 28px 64px -24px rgba(16,23,54,.34), 0 6px 18px -10px rgba(16,23,54,.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60; } .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-dd-menu a { display: flex; align-items: flex-start; gap: 13px; padding: 11px 12px; border-radius: 12px; color: var(--ink-2); white-space: normal; transition: background .16s ease; } .nav-dd-menu a::after { display: none; } .nav-dd-menu a:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); width: auto; } .dd-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in oklab, var(--accent) 13%, var(--bg-3)); color: var(--accent); } .dd-ic svg { width: 20px; height: 20px; } .dd-tx { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; } .dd-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25; } .dd-d { font-size: 12.5px; color: var(--muted); line-height: 1.32; } /* ---------- Product pages ---------- */ .prod-hero { padding: clamp(46px,6.5vw,92px) 0 clamp(40px,5vw,60px); } .prod-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 24px; } .prod-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; } .prod-back:hover { color: var(--accent); } .prod-back:hover svg { transform: translateX(-3px); } .prod-hero h1 { font-size: clamp(34px,5.2vw,60px); margin: 16px 0 0; max-width: 22ch; } .prod-hero .lead { margin-top: 18px; max-width: 56ch; } .prod-points { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; } .prod-points .pp { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 100px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); } .prod-points .pp svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 2; flex: none; } .prod-soon { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 13.5px; color: var(--muted); } .prod-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); } /* ---------- Nav dropdown on mobile ---------- */ @media (max-width: 1060px) { .nav-links.open { position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 18px 20px; background: var(--bg-2); border-bottom: 1px solid var(--line-2); box-shadow: 0 26px 50px -26px rgba(16,23,54,.4); } .nav-links.open > a { padding: 11px 4px; font-size: 16px; } .nav-dd { flex-direction: column; align-items: stretch; } .nav-dd .dd-caret { display: none; } .nav-dd-trigger { padding: 11px 4px; font-size: 16px; } .nav-dd-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; width: auto; padding: 2px 0 6px 4px; border: none; background: transparent; box-shadow: none; } .nav-dd-menu a { padding: 9px 8px; } .dd-d { display: none; } } /* ---------- Ad-landing pages (lp-*) ---------- */ .lp-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(1.4); background: color-mix(in oklab, var(--bg) 72%, transparent); border-bottom: 1px solid var(--line-2); } .lp-nav-inner { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; } .lp-nav-right { display: flex; align-items: center; gap: 12px; } .lp-hero { padding: clamp(40px,7vw,88px) 0 clamp(48px,7vw,96px); overflow: hidden; } .lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; } .lp-hero h1 { font-size: clamp(32px,5.2vw,56px); max-width: 17ch; } .lp-hero .lead { margin-top: 18px; max-width: 50ch; } .lp-hero-cta { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .lp-secondary { font-size: 14.5px; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .lp-secondary .arrow { transition: transform .2s ease; } .lp-secondary:hover { color: var(--accent); } .lp-secondary:hover .arrow { transform: translateX(3px); } .lp-mock { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; } .lp-mock-bar { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .lp-mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .lp-mock-body { padding: 22px; display: flex; flex-direction: column; gap: 11px; } .lp-mock-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: var(--bg-3); } .lp-mock-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .lp-mock-row .bar { height: 8px; border-radius: 4px; background: color-mix(in oklab, var(--ink) 12%, transparent); flex: 1; } .lp-mock-row.on { background: color-mix(in oklab, var(--accent) 12%, var(--bg-2)); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); } .lp-mock-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: var(--accent); color: var(--on-accent); flex: none; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-modules { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .lp-module { display: inline-flex; align-items: center; gap: 11px; padding: 12px 18px 12px 14px; border-radius: 100px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14.5px; font-weight: 500; } .lp-module.off { opacity: .6; } .lp-module .sw { width: 34px; height: 20px; border-radius: 100px; background: color-mix(in oklab, var(--accent) 70%, var(--bg-3)); position: relative; flex: none; transition: background .2s; } .lp-module .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; } .lp-module:not(.off) .sw::after { transform: translateX(14px); } .lp-module.off .sw { background: var(--line); } .lp-module-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 2px 9px; border-radius: 100px; } .lp-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 36px; } .lp-step { padding: 24px 20px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); } .lp-step .num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent); letter-spacing: .06em; } .lp-step h4 { margin-top: 10px; font-size: 17px; } .lp-step p { margin-top: 8px; color: var(--muted); font-size: 14.5px; } .lp-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; } .lp-benefit { padding: 32px 26px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; } .lp-benefit svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.8; margin-bottom: 14px; } .lp-benefit .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.2vw,40px); } .lp-benefit .l { margin-top: 8px; color: var(--muted); font-size: 14.5px; max-width: 28ch; margin-inline: auto; } .lp-shots { display: flex; flex-direction: column; gap: 44px; margin-top: 36px; } .lp-shot .frame { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); aspect-ratio: 16/9; } .lp-shot .cap { margin-top: 14px; font-size: 14.5px; color: var(--muted); text-align: center; } .lp-trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 32px; } .lp-trust .b { padding: 22px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); } .lp-trust .b svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; margin-bottom: 12px; } .lp-trust .b h4 { font-size: 15.5px; } .lp-trust .b p { margin-top: 6px; font-size: 14px; color: var(--muted); } .lp-trust-note { margin-top: 24px; padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; text-align: center; } .lp-faq { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; max-width: 860px; } .lp-faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); overflow: hidden; } .lp-faq-q { width: 100%; text-align: left; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); } .lp-faq-q svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; transition: transform .25s ease; color: var(--accent); } .lp-faq-item.open .lp-faq-q svg { transform: rotate(45deg); } .lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .lp-faq-a p { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; max-width: 70ch; } .lp-faq-item.open .lp-faq-a { max-height: 320px; } @media (max-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr; } .lp-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .lp-benefits, .lp-trust { grid-template-columns: 1fr; } } @media (max-width: 560px) { .lp-steps { grid-template-columns: 1fr; } } .lp-benefit .txt { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); line-height: 1.35; } .lp-benefit.featured { grid-column: 1/-1; background: color-mix(in oklab, var(--accent) 9%, var(--bg-2)); border-color: color-mix(in oklab, var(--accent) 32%, transparent); } .lp-mod-callout { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 8%, var(--bg-2)); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); } .lp-mod-callout svg { flex: none; width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; margin-top: 2px; } .lp-mod-callout p { font-size: 14.5px; color: var(--ink-2); } .lp-timeline { position: relative; margin-top: 40px; display: flex; flex-direction: column; max-width: 760px; } .lp-tl-item { position: relative; display: flex; gap: 22px; padding-bottom: 34px; } .lp-tl-item:last-child { padding-bottom: 0; } .lp-tl-item:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -34px; width: 2px; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 25%, transparent)); } .lp-tl-node { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); position: relative; z-index: 1; } .lp-tl-item:last-child .lp-tl-node { background: var(--accent); color: var(--on-accent); } .lp-tl-body { padding-top: 6px; } .lp-tl-body h4 { font-size: 18px; } .lp-tl-body p { margin-top: 6px; color: var(--muted); font-size: 14.5px; max-width: 56ch; } /* ── Les captures de pantalla dins dels marcs ───────────────────────────────────── El CSS del disseny donava al marc una proporció 16/9 fixa perquè hi esperava el seu propi component d'imatge. Amb una etiqueta normal, la imatge sortia a la seva mida real (3.200 px) i desbordava la pàgina. La proporció del marc passa a ser la de la imatge: una captura retallada perd justament el que la fa útil, que és poder llegir la pantalla. */ .lp-shot .frame { aspect-ratio: auto; } .lp-shot .frame img { display: block; width: 100%; height: auto; } /* ── La marca: «Fita» al davant i «de Eklips[ia]» a sota, petit ─────────────────── Qui arriba buscant un programa de gestió ha de veure el nom del producte primer; l'empresa hi surt com qui el fa i el manté, que en venda a empreses dona confiança. La classe `brand` del disseny esperava un sol text i posava tot en una línia. */ .marca-fita { align-items: center; gap: 10px; } .marca-fita .marca-tx { display: flex; flex-direction: column; line-height: 1.05; } .marca-fita .marca-n { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; } .marca-fita .marca-de { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .footer .marca-fita .marca-n { font-size: 18px; } /* ── El vel de color del hero ────────────────────────────────────────────────────── El disseny original tenia aquest fons a `.hero`, i la portada d'aquest web fa servir `.lp-hero` (el hero de les pàgines de producte, que va quedar com a portada quan el web va passar a parlar només de Fita). El resultat era un fons pla i sense vida. Són els MATEIXOS dos degradats de `.hero::before`, amb les mateixes variables: si algun dia es canvia el color d'accent, el vel el segueix. */ .lp-hero { position: relative; overflow: hidden; } .lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55; background: radial-gradient(circle at 16% 8%, color-mix(in oklab, var(--accent-3) 20%, transparent), transparent 42%), radial-gradient(circle at 96% 90%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 46%); pointer-events: none; } /* El contingut per damunt del vel, o el titular quedaria per sota. */ .lp-hero > .wrap { position: relative; z-index: 1; } /* ── Les banderes de l'idioma ────────────────────────────────────────────────────── El CSS del disseny dona la mida a `.lang button svg`, i aquí són ENLLAÇOS: al disseny eren botons que no anaven enlloc i ara porten a la pàgina equivalent en cada idioma. Sense aquestes regles els SVG es dibuixaven a 0×0 i no es veien. */ .lang a { display: flex; align-items: center; padding: 4px; border-radius: 100px; transition: all .2s; } .lang a svg { display: block; width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; opacity: .5; transition: opacity .2s; } .lang a:hover svg { opacity: .85; } .lang a.active svg { opacity: 1; transform: scale(1.06); } .lang a.active { box-shadow: 0 0 0 2px var(--accent); } /* ── L'alternança de seccions ───────────────────────────────────────────────────── El disseny alterna `.section` (fons de la pàgina) i `.section.alt`. Amb el tema clar, `.alt` sortia BLANC PUR sobre una pàgina lavanda: la franja se veia salta a mitja pàgina, i a més al revés del que és natural (la secció alterna més clara que el fons). Amb un lavanda una mica més profund, l'alternança se nota just per separar seccions i les targetes blanques continuen destacant sobre les dues. */ .section.alt { background: var(--bg-3); } /* ── El vídeo del hero ──────────────────────────────────────────────────────────── Substitueix la maqueta de finestra i porta el seu mateix marc, perquè el hero no canviï de llenguatge visual. `poster` a posta: sense ell es veu un rectangle negre mentre carrega. Es reprodueix sol, mut i en bucle; si el visitant té «reduir el moviment» activat, el JavaScript el pausa (site.js). */ .lp-video { position: relative; } .lp-video video { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); } .lp-video-cap { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }