/* ============================================================ TELTAN — Variants: hero layouts, theme / card / accent tweaks Driven by ============================================================ */ /* ---------- HERO base & switching ---------- */ .hero{position:relative;overflow:hidden;isolation:isolate;display:none} :root[data-hero="a"] .hero--a, :root[data-hero="b"] .hero--b, :root[data-hero="c"] .hero--c{display:block} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .hero-cover{margin-top:34px;max-width:470px} .hero-cover__label{display:block;font-size:.86rem;color:#a9c2d5;margin-bottom:10px;font-weight:600;font-family:var(--font-display)} /* ===== HERO A — split premium ===== */ .hero--a{padding-block:clamp(54px,8vw,108px)} .hero-a__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center} .hero-a__copy .pill{margin-bottom:22px} .hero-a__visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center} .hero-orbit-stage{position:relative;width:min(420px,86vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center} .hero-orb{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center;z-index:1} .hero-orb__rings span{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);left:50%;top:50%;transform:translate(-50%,-50%)} .hero-orb__rings span:nth-child(1){width:280px;height:280px;animation:spinSlow 26s linear infinite} .hero-orb__rings span:nth-child(2){width:200px;height:200px;border-style:dashed;border-color:rgba(32,192,240,.4);animation:spinSlow 18s linear infinite reverse} .hero-orb__rings span:nth-child(3){width:130px;height:130px;border-color:rgba(240,96,31,.4)} .hero-orb__core{width:112px;height:112px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center; box-shadow:0 0 70px rgba(32,192,240,.55),inset 0 0 30px rgba(255,255,255,.25);position:relative;z-index:1} .hero-orb__core svg{width:52px;height:52px;color:#fff} /* ---- orbiting chips ---- */ .hero-orbit{position:absolute;top:50%;left:50%;width:0;height:0;z-index:2;animation:orbitSpin var(--dur,30s) linear infinite;animation-delay:var(--delay,0s)} .hero-orbit__arm{position:absolute;top:0;left:0;transform:translateX(var(--r,150px))} .hero-orbit__upright{position:absolute;top:0;left:0;width:0;height:0;animation:orbitSpin var(--dur,30s) linear infinite reverse;animation-delay:var(--delay,0s)} .hero-orbit__upright .hero-chip{position:absolute;top:0;left:0;transform:translate(-50%,-50%);animation:none} .hero-chip{display:flex;align-items:center;gap:11px;background:rgba(12,28,46,.66);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:11px 15px 11px 11px;box-shadow:var(--sh-lg);white-space:nowrap} .hero-chip strong{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;display:block;line-height:1.1} .hero-chip span{font-size:.78rem;color:#a9c2d5} .hero-chip__ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none} .hero-chip__ic svg{width:21px;height:21px;color:#fff} .hero-chip__ic--cyan{background:var(--grad-brand)} .hero-chip__ic--orange{background:var(--grad-action)} @keyframes orbitSpin{to{transform:rotate(360deg)}} @keyframes spinSlow{to{transform:translate(-50%,-50%) rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .hero-orb__rings span,.hero-orbit,.hero-orbit__upright{animation:none!important} /* static fallback positions so chips don't pile on the center */ .hero-orbit{transform:rotate(0deg)} .hero-orbit:nth-of-type(2){transform:rotate(-18deg)} .hero-orbit:nth-of-type(3){transform:rotate(20deg)} .hero-orbit:nth-of-type(4){transform:rotate(150deg)} .hero-orbit:nth-of-type(2) .hero-orbit__upright{transform:rotate(18deg)} .hero-orbit:nth-of-type(3) .hero-orbit__upright{transform:rotate(-20deg)} .hero-orbit:nth-of-type(4) .hero-orbit__upright{transform:rotate(-150deg)} } /* ===== HERO B — centered ===== */ .hero--b{padding-block:clamp(64px,10vw,128px)} .hero-b__inner{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:860px;margin-inline:auto;text-align:center} .hero-b__inner .lead{max-width:60ch} .hero-b__inner .hero-cover{margin-top:8px} .hero-cover--center{max-width:580px;width:100%} .hero-b__stats{display:flex;gap:clamp(28px,5vw,56px);margin-top:26px;flex-wrap:wrap;justify-content:center} .hero-b__stats div{display:flex;flex-direction:column;gap:4px} .hero-b__stats b{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.7rem);line-height:1} .hero-b__stats span{font-size:.9rem;color:#a9c2d5} /* ===== HERO C — light product ===== */ .hero--c{padding-block:clamp(48px,7vw,92px)} .hero-c__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center} .hero-c__copy .pill{margin-bottom:20px} .hero-c__ticks{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:28px} .hero-c__ticks li{display:flex;align-items:center;gap:.5em;font-weight:600;font-family:var(--font-display);color:var(--slate-700);font-size:.96rem} .hero-c__ticks svg{color:var(--cyan-500);width:20px;height:20px;flex:none} .conn-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-lg);position:relative;max-width:440px;margin-inline:auto} .conn-card__top{display:flex;align-items:center;gap:12px} .conn-card__house{width:48px;height:48px;border-radius:14px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .conn-card__house svg{width:25px;height:25px} .conn-card__top strong{font-family:var(--font-display);font-weight:700;display:block;line-height:1.2} .conn-card__top .muted{font-size:.82rem} .conn-card__live{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--cyan-700);background:var(--cyan-50);padding:.4em .7em;border-radius:99px;display:flex;align-items:center;gap:.45em;font-family:var(--font-display)} .conn-card__live::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fbd5e;box-shadow:0 0 0 0 rgba(31,189,94,.5);animation:pingDot 2s infinite} .conn-gauge{margin:24px 0 4px} .conn-gauge__bar{height:12px;border-radius:99px;background:var(--slate-100);overflow:hidden} .conn-gauge__bar span{display:block;height:100%;border-radius:99px;background:var(--grad-mix);width:0;animation:fillBar 1.6s var(--ease) forwards .3s} .conn-gauge__nums{display:flex;align-items:baseline;gap:.5em;margin-top:12px} .conn-gauge__nums b{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--ink);letter-spacing:-.02em} .conn-gauge__nums span{font-size:.86rem;color:var(--text-mute)} .conn-list{margin-top:14px} .conn-list li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--slate-100);font-weight:600;font-family:var(--font-display);font-size:.95rem;color:var(--slate-700)} .conn-list li span{margin-left:auto;font-size:.82rem;color:var(--text-mute);font-weight:500;font-family:var(--font-body)} .conn-list svg{width:21px;height:21px;color:var(--cyan-600);flex:none} @keyframes fillBar{from{width:0}to{width:88%}} @media (prefers-reduced-motion:reduce){.conn-gauge__bar span{animation:none;width:88%}.conn-card__live::before{animation:none}} /* tech grid */ .tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px} /* ---------- HERO responsive ---------- */ @media(max-width:1040px){ .hero-a__grid,.hero-c__grid{grid-template-columns:1fr;gap:40px} .hero-a__visual{min-height:380px;order:-1} .hero-c__card{order:-1} .tech-grid{grid-template-columns:1fr} } @media(max-width:560px){ .hero-orbit-stage{width:min(360px,90vw)} .hero-orbit{--r:148px} .hero-orb,.hero-orb__rings span:nth-child(1){width:230px} .hero-orb__rings span:nth-child(1){height:230px} .hero-chip{padding:9px 12px 9px 9px} .hero-chip strong{font-size:.95rem} } @media(max-width:380px){ .hero-orbit{--r:128px} } /* ============================================================ THEME: claro (dark bands become light) ============================================================ */ :root[data-theme="claro"] .surface-dark, :root[data-theme="claro"] .page-hero{ background:linear-gradient(165deg,var(--cyan-50),#ffffff 55%,var(--orange-50)); color:var(--slate-700); } :root[data-theme="claro"] .surface-dark h1, :root[data-theme="claro"] .surface-dark h2, :root[data-theme="claro"] .surface-dark h3, :root[data-theme="claro"] .page-hero h1{color:var(--ink)} :root[data-theme="claro"] .surface-dark .lead, :root[data-theme="claro"] .page-hero .lead{color:var(--text-soft)} :root[data-theme="claro"] .surface-dark .muted{color:var(--text-mute)} :root[data-theme="claro"] .grid-lines{opacity:.5;background-image:linear-gradient(rgba(11,28,46,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,28,46,.05) 1px,transparent 1px)} :root[data-theme="claro"] .glow{opacity:.4!important} :root[data-theme="claro"] .pill--glass{background:var(--cyan-50);color:var(--cyan-700);border-color:var(--cyan-100)} :root[data-theme="claro"] .btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-xs)} :root[data-theme="claro"] .btn--ghost:hover{border-color:var(--cyan-400)} :root[data-theme="claro"] .hero-cover__label{color:var(--text-soft)} :root[data-theme="claro"] .hero-b__stats span{color:var(--text-mute)} :root[data-theme="claro"] .why-item{background:var(--paper);border-color:var(--line);box-shadow:var(--sh-sm)} :root[data-theme="claro"] .why-item__ic{background:var(--cyan-50);color:var(--cyan-600)} :root[data-theme="claro"] .hero-orb__rings span{border-color:rgba(20,176,227,.25)} :root[data-theme="claro"] .hero-orb__rings span:nth-child(1){border-color:rgba(11,28,46,.1)} :root[data-theme="claro"] .hero-chip{background:rgba(255,255,255,.85);border-color:var(--line)} :root[data-theme="claro"] .hero-chip strong{color:var(--ink)} :root[data-theme="claro"] .hero-chip span{color:var(--text-mute)} :root[data-theme="claro"] .breadcrumb{color:var(--text-mute)!important} /* ============================================================ THEME: oscuro (full dark mode via token flip) ============================================================ */ :root[data-theme="oscuro"]{ --bg:var(--navy-950); --bg-alt:var(--navy-900); --paper:var(--navy-850); --ink:#eef6fb; --text:#dce9f2; --text-soft:#a9c2d5; --text-mute:#7e96aa; --line:rgba(255,255,255,.1); --slate-50:#0a2138; --slate-100:rgba(255,255,255,.07); --slate-200:rgba(255,255,255,.12); --slate-300:rgba(255,255,255,.22); --slate-500:#90a8bb; --slate-600:#aec3d4; --slate-700:#c8dae7; --cyan-50:rgba(32,192,240,.15); --cyan-100:rgba(32,192,240,.24); --cyan-600:#56cdf4; --cyan-700:#86dcff; --orange-50:rgba(240,96,31,.16); --orange-100:rgba(240,96,31,.26); --orange-600:#ff9152; --orange-700:#ffaa78; } :root[data-theme="oscuro"] .site-header{background:rgba(7,26,46,.82);border-bottom-color:rgba(255,255,255,.08)} :root[data-theme="oscuro"] .site-header.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.45)} :root[data-theme="oscuro"] .nav__burger{background:var(--navy-850)} :root[data-theme="oscuro"] .btn--outline{background:transparent} :root[data-theme="oscuro"] .cta-band .btn--outline{background:#fff;color:var(--ink)} :root[data-theme="oscuro"] .plan__tech{color:var(--cyan-700)} :root[data-theme="oscuro"] .trust-bar{border-color:var(--line)} /* ============================================================ ACCENT swap (cyan <-> orange primary) ============================================================ */ :root[data-accent="cyan"]{ --grad-action:linear-gradient(120deg,var(--cyan-400),var(--cyan-600)); --grad-brand:linear-gradient(120deg,var(--orange-400),var(--orange-600)); --action:var(--cyan-500); --brand:var(--orange-500); --sh-orange:0 18px 40px -14px rgba(20,176,227,.5); --sh-cyan:0 18px 40px -14px rgba(240,96,31,.5); } :root[data-accent="cyan"] .badge-pop{box-shadow:0 14px 30px -10px rgba(20,176,227,.55)} :root[data-accent="cyan"] .plan--popular{border-color:var(--cyan-300)} /* ============================================================ PLAN CARD variants ============================================================ */ /* --- B: dark neon cards --- */ :root[data-cards="b"] .plan{background:var(--navy-850);border-color:rgba(255,255,255,.12);box-shadow:var(--sh-md)} :root[data-cards="b"] .plan__name{color:#a9c2d5} :root[data-cards="b"] .plan__speed b, :root[data-cards="b"] .plan__price .amt{color:#fff} :root[data-cards="b"] .plan__speed span, :root[data-cards="b"] .plan__price .cur, :root[data-cards="b"] .plan__price .per{color:#8fb0c7} :root[data-cards="b"] .plan__tech{color:#86dcff} :root[data-cards="b"] .plan__feats li{color:#bcd0df} :root[data-cards="b"] .plan__feats .ideal{color:#fff} :root[data-cards="b"] .plan__divider{background:rgba(255,255,255,.12)} :root[data-cards="b"] .plan:hover{border-color:var(--cyan-500);box-shadow:0 22px 50px -16px rgba(20,176,227,.4)} :root[data-cards="b"] .plan--popular{border-color:var(--orange-400);box-shadow:0 0 0 1px var(--orange-400),0 24px 54px -16px rgba(240,96,31,.45)} :root[data-cards="b"] .plan .btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} :root[data-cards="b"] .plan .btn--outline:hover{border-color:var(--cyan-400);color:var(--cyan-300)} /* --- C: minimal with accent top bar --- */ :root[data-cards="c"] .plan{border:none;box-shadow:var(--sh-md);border-radius:var(--r-xl);padding-top:40px} :root[data-cards="c"] .plan::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-brand)} :root[data-cards="c"] .plan--popular::before{background:var(--grad-action)} :root[data-cards="c"] .plan--popular{transform:none;box-shadow:var(--sh-lg)} :root[data-cards="c"] .plan--popular:hover{transform:translateY(-6px)} :root[data-cards="c"] .plan__speed b{font-size:4rem} :root[data-cards="c"] .plan__divider{display:none} :root[data-cards="c"] .plan__feats{margin-top:20px;border-top:1px solid var(--line);padding-top:20px}