/* ============================================================
РУСИННОВАЦИИ — site styles
============================================================ */
/* Шрифты грузятся через в каждой страницы (preconnect + css2) —
@import здесь блокировал рендер и дублировал загрузку. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
/* Brand tokens */
:root {
--red: #ED1C24;
--red-soft: rgba(221,5,33,0.9);
--blue: #0089CF;
--blue-soft: rgba(0,137,207,0.9);
--accent: #0089CF;
--accent-soft: #0089CFcc;
--accent-italic: var(--red); /* colour of the serif italic accents (h1/h2 em) */
--ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* motion token: exponential deceleration for UI transitions */
/* Типографическая шкала (skills: flat-type-hierarchy). 4 ступени вместо 10 размеров:
meta — моно-подписи и метки; small — вторичный текст; body — основной; lead — лиды и акценты. */
--fs-meta: 12px;
--fs-small: 15px;
--fs-body: 17px;
--fs-lead: 21px;
/* THEME TOKENS — dark is the default. Light overrides live in [data-theme="light"]. */
--fg-rgb: 255,255,255; /* foreground as raw RGB triplet (for rgba()) */
--bg: #000; /* page background */
--fg: #fff; /* primary text / inverted-button fills */
--surf-1: #0b0b0f; /* card / panel surface */
--surf-2: #16161d; /* raised / nested panel surface */
--muted: rgba(var(--fg-rgb),.55);
--fg-faint: rgba(var(--fg-rgb),.5);
--line: rgba(var(--fg-rgb),.08);
--glass: rgba(var(--fg-rgb),.025);
--glass-strong: rgba(var(--fg-rgb),.05);
--font-display: 'Manrope', sans-serif;
--font-body: 'Manrope', sans-serif;
--font-italic: 'Bricolage Grotesque', serif;
--font-mono: 'JetBrains Mono', monospace;
--font-cta: 'Manrope', sans-serif;
--maxw: 1760px;
--pad: 80px;
/* Full-bleed gutter: section spans full width, content auto-centers at --maxw.
Below --maxw the gutter collapses to --pad. Matches the footer pattern. */
--bleed: max(var(--pad), calc((100% - var(--maxw)) / 2));
}
@media (max-width: 1100px){
:root { --pad: 32px; }
}
@media (max-width: 640px){
:root { --pad: 20px; }
}
/* ============================================================
THEME — LIGHT overrides. Dark is the default (:root above).
The toggle sets html[data-theme="light"]; we just re-point tokens
and patch the handful of hard-coded dark-glass surfaces.
============================================================ */
html { transition: background-color .45s ease, color .45s ease; }
body { transition: background-color .45s ease, color .45s ease; }
html[data-theme="light"] {
--fg-rgb: 22,24,30; /* dark slate text */
--bg: #f1f0ea; /* warm off-white page */
--fg: #16181d; /* primary text + inverted-button fills */
--surf-1: #ffffff; /* card / panel */
--surf-2: #e9e7df; /* raised / nested panel */
--muted: rgba(22,24,30,.6);
}
/* Dark ambient canvases would muddy a light page — drop matrix/noise,
but KEEP #shader-bg: it renders the light gradient-mesh background. */
html[data-theme="light"] #matrix-bg,
html[data-theme="light"] #noise-overlay { display: none !important; }
html[data-theme="light"] body {
/* Off-white fallback shown until the WebGL mesh paints over it. */
background-color: var(--bg);
}
/* Hard-coded dark glass → light glass */
html[data-theme="light"] .nav-pill,
html[data-theme="light"] .nav-menu-items,
html[data-theme="light"] .mobile-nav-btn,
html[data-theme="light"] .display-card { background: rgba(255,255,255,.7); }
html[data-theme="light"] .nav-drawer { background: rgba(248,247,243,.6); }
html[data-theme="light"] .cookie { background: rgba(255,255,255,.92); }
html[data-theme="light"] .hero-eyebrow-pill,
html[data-theme="light"] .panel-badge,
html[data-theme="light"] .hero-badge { background: rgba(255,255,255,.7); }
/* Light theme is flat & clean — soft neutral elevation, never black shadows */
html[data-theme="light"] .panel-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .display-card,
html[data-theme="light"] .case-card,
html[data-theme="light"] .page-card,
html[data-theme="light"] .phone-mockup,
html[data-theme="light"] .panel-browser {
box-shadow: 0 12px 30px -24px rgba(120,128,150,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Hero vignette is for legibility over a dark page — invert to a light wash */
html[data-theme="light"] .hero-bg::after {
background:
radial-gradient(ellipse 60% 80% at 25% 50%, rgba(241,240,234,.7), transparent 62%),
linear-gradient(180deg, rgba(241,240,234,.55) 0%, transparent 28%, transparent 72%, rgba(241,240,234,.7) 100%);
}
/* Image-backed sub-page heroes keep their dark scrim + light text in BOTH
themes (text sits on a photo, not the page). */
html[data-theme="light"] .case-card-title,
html[data-theme="light"] .case-card *,
html[data-theme="light"] .display-card-cap { color: inherit; }
/* The About robot hero sits on the PAGE (3D robot, not a photo) → it should
follow the light theme: dark text + a light scrim instead of the black one. */
html[data-theme="light"] .page-hero--robot .page-hero-copy { color: var(--fg); }
html[data-theme="light"] .page-hero--robot .page-hero-lead { color: var(--muted); }
html[data-theme="light"] .page-hero--robot .about-robot-wrap::after {
background: linear-gradient(90deg, #f1f0ea 0%, rgba(241,240,234,.82) 30%, rgba(241,240,234,.25) 58%, rgba(241,240,234,0) 80%);
}
@media (max-width: 1000px){
html[data-theme="light"] .page-hero--robot .about-robot-wrap::after {
background: linear-gradient(180deg, rgba(241,240,234,.92) 0%, rgba(241,240,234,.5) 42%, rgba(241,240,234,0) 100%);
}
}
/* Shader background canvas — fixed */
#shader-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
#root, .page-content {
position: relative;
z-index: 1;
}
/* ============================================================
LOADER (vanilla, animates the logo from ASCII chaos)
============================================================ */
#boot-loader {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--bg);
overflow: hidden;
}
.loader-mark {
display: none;
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed;
top: 24px; left: 0; right: 0;
z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--pad);
pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-logo {
display: flex; align-items: center; gap: 0;
height: 44px;
position: relative;
}
/* Frosted halo under the fixed logo. The actual blur layers are injected
by logo-blur (theme-toggle.js) as stacked children — CSS mask +
backdrop-filter doesn't render in Chromium, so no plate here. */
.nav-logo img { height: 44px; width: auto; position: relative; z-index: 1; }
.nav-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px;
border-radius: 999px;
background: rgba(20,20,22,.5);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(var(--fg-rgb),.08);
font-family: var(--font-cta);
font-size: var(--fs-body);
color: var(--fg);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.nav-pill:hover { background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--fg-rgb),.18); }
.nav-menu { display: flex; gap: 8px; align-items: center; }
.nav-menu-items {
display: flex; gap: 4px;
padding: 6px;
border-radius: 999px;
background: rgba(20,20,22,.5);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(var(--fg-rgb),.08);
}
.nav-menu-item {
padding: 10px 18px;
border-radius: 999px;
font-family: var(--font-cta);
font-size: var(--fs-small);
color: rgba(var(--fg-rgb),.7);
transition: all .2s ease;
}
.nav-menu-item:hover { color: var(--fg); background: rgba(var(--fg-rgb),.06); }
.nav-menu-item.active { color: var(--fg); background: rgba(var(--fg-rgb),.1); }
@media (max-width: 900px){
/* On mobile, the inline menu + CTA collapse into a hamburger drawer */
.nav-menu > *:not(.nav-burger) { display: none; }
}
/* ---- Mobile hamburger + slide-in drawer ---- */
.nav-burger { display: none; }
@media (max-width: 900px){
.nav-burger {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; width: 48px; height: 48px; border-radius: 50%;
background: rgba(20,20,22,.5);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(var(--fg-rgb),.08);
}
}
.nav-burger span {
display: block; width: 20px; height: 3px; border-radius: 3px; background: var(--fg);
transition: transform .3s ease, opacity .2s ease;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Light theme: white translucent chip with black bars (dark grey looked muddy) */
html[data-theme="light"] .nav-burger {
background: rgba(255,255,255,.68);
border-color: rgba(0,0,0,.1);
}
.nav-overlay {
position: fixed; inset: 0; z-index: 299;
background: rgba(0,0,0,.34);
opacity: 0; pointer-events: none;
transition: opacity .35s ease;
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-drawer {
position: fixed; top: 12px; right: 12px; bottom: auto; z-index: 300;
width: max(240px, 66vw);
height: 68vh; max-height: 700px;
background: rgba(11,12,16,.46);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(var(--fg-rgb),.12);
border-radius: 22px;
transform: translateX(calc(100% + 18px));
transition: transform .42s cubic-bezier(.4,0,.1,1);
display: flex; flex-direction: column;
padding: 72px 24px 22px;
overflow-y: auto;
}
body.nav-open .nav-drawer { transform: translateX(0); }
body.nav-open { overflow: hidden; }
.nav-drawer-close {
position: absolute; top: 26px; right: 24px;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(var(--fg-rgb),.05); border: 1px solid rgba(var(--fg-rgb),.1);
color: var(--fg); font-size: var(--fs-body); line-height: 1;
}
.nav-drawer-close:hover { background: rgba(var(--fg-rgb),.1); }
.nav-drawer a {
display: block; padding: 16px 4px;
font-family: var(--font-cta); font-size: var(--fs-lead); font-weight: 600;
color: rgba(var(--fg-rgb),.78);
border-bottom: 1px solid rgba(var(--fg-rgb),.07);
transition: color .2s ease, transform .2s var(--ease-out-expo);
}
.nav-drawer a:hover, .nav-drawer a:active { color: var(--red); transform: translateX(10px); background: rgba(237,28,36,.08); border-radius: 10px; }
.nav-drawer a .sub { font-size: var(--fs-meta); font-weight: 400; color: rgba(var(--fg-rgb),.4); margin-left: 6px; }
.nav-drawer .nav-drawer-cta {
margin-top: auto; margin-bottom: 0;
flex-shrink: 0; /* при раскрытом подменю кнопку сжимало и текст вылезал из пилюли */
text-align: center; border-radius: 999px; padding: 18px;
font-size: var(--fs-body); font-weight: 700; font-family: var(--font-cta);
border: 1px solid transparent; color: var(--fg);
/* pin the desktop CTA to its red hover state */
--sb-percent: 20%;
--sb-angle-offset: 95deg;
--sb-highlight: var(--red, #ED1C24);
--sb-highlight-subtle: color-mix(in srgb, var(--red, #ED1C24) 45%, var(--fg));
--sb-shine: var(--sb-highlight-subtle);
box-shadow: inset 0 0 0 1px var(--sb-bg-subtle),
0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent),
0 14px 40px -14px color-mix(in srgb, var(--red) 60%, var(--bg));
animation-play-state: running;
}
.nav-drawer .nav-drawer-cta::before,
.nav-drawer .nav-drawer-cta::after { animation-play-state: running; }
.nav-drawer .nav-drawer-cta:hover { opacity: .94; }
/* ---- Collapsible submenu groups inside the mobile drawer ---- */
.nd-group { border-bottom: 1px solid rgba(var(--fg-rgb),.07); }
.nd-parent {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: none; border: none; cursor: pointer;
padding: 16px 4px; text-align: left;
font-family: var(--font-cta); font-size: var(--fs-lead); font-weight: 600;
color: rgba(var(--fg-rgb),.78);
transition: color .2s ease;
}
.nd-parent:hover, .nd-parent:active { color: var(--red); }
.nd-caret {
flex: none; width: 9px; height: 9px; margin-right: 6px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); opacity: .55;
transition: transform .32s cubic-bezier(.4,0,.1,1);
}
.nd-group.open .nd-parent { color: var(--accent); }
.nd-group.open .nd-caret { transform: rotate(-135deg); opacity: .9; }
.nd-sub {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .38s cubic-bezier(.4,0,.1,1);
}
.nd-group.open .nd-sub { grid-template-rows: 1fr; }
.nd-sub-inner { overflow: hidden; min-height: 0; }
.nd-sub-inner a {
display: block; padding: 12px 4px 12px 18px;
font-family: var(--font-cta); font-size: var(--fs-body); font-weight: 500;
color: rgba(var(--fg-rgb),.58);
border-bottom: 1px solid rgba(var(--fg-rgb),.05);
transition: color .2s ease, transform .2s var(--ease-out-expo);
}
.nd-sub-inner a:last-child { border-bottom: none; }
.nd-sub-inner a:hover, .nd-sub-inner a:active { color: var(--red); transform: translateX(6px); background: rgba(237,28,36,.08); border-radius: 10px; }
.nd-sub-inner a .sub { font-size: var(--fs-meta); font-weight: 400; color: rgba(var(--fg-rgb),.34); margin-left: 6px; }
.nd-sub-inner a.nd-suboverview { color: var(--accent); }
/* ============================================================
SECTION CONTAINER
============================================================ */
.section {
position: relative;
padding: 48px var(--bleed);
}
.section-tight { padding: 48px var(--bleed); }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
margin-bottom: 64px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(var(--fg-rgb),.5);
margin-bottom: 24px;
}
.section-eyebrow::before {
content: ''; display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 12px var(--red);
}
.section-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(40px, 6vw, 96px);
line-height: .95;
letter-spacing: -.03em;
text-wrap: balance;
}
.section-title .accent-red { color: var(--red); }
.section-title .accent-blue { color: var(--blue); }
.section-title em, em.italic {
font-style: italic;
font-family: var(--font-italic);
font-weight: 400;
font-feature-settings: "ss01" on;
color: var(--accent-italic);
letter-spacing: -.02em;
}
.section-title em { color: var(--accent-italic); }
/* ============================================================
HERO — fullscreen letter background, text overlay
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hero-bg canvas {
width: 100%;
height: 100%;
display: block;
}
.hero-bg-glass {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg-glass img {
width: 92%;
max-width: 1600px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 60px 120px rgba(0,137,207,.45)) drop-shadow(0 0 80px rgba(237,28,36,.25));
opacity: 0.95;
transition: transform .4s ease;
will-change: transform;
transform-origin: center;
}
.hero-bg::after {
/* darken center for text legibility */
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 25% 50%, rgba(0,0,0,.75), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.6) 100%);
z-index: 1;
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: var(--maxw);
width: 100%;
margin: 0 auto;
padding: 140px var(--pad) 60px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
align-items: center;
}
.hero-copy {
position: relative;
z-index: 3;
max-width: 820px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border: 1px solid rgba(var(--fg-rgb),.1);
border-radius: 999px;
background: rgba(var(--fg-rgb),.02);
backdrop-filter: blur(10px);
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(var(--fg-rgb),.7);
margin-bottom: 32px;
}
.hero-eyebrow::before {
content: ''; display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.hero-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(48px, 6.5vw, 112px);
line-height: .95;
letter-spacing: -.04em;
margin-bottom: 32px;
text-wrap: balance;
}
.hero-title .em-dash { color: var(--red); font-weight: 800; }
.hero-title .accent {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
color: var(--accent-italic);
letter-spacing: -.02em;
}
.hero-sub {
font-family: var(--font-body);
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.5;
color: rgba(var(--fg-rgb),.78);
max-width: 600px;
margin-bottom: 40px;
text-wrap: pretty;
}
.hero-sub b { color: var(--fg); font-weight: 600; }
.hero-ctas {
display: flex; gap: 16px; flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 22px 38px;
border-radius: 999px;
font-family: var(--font-cta);
font-size: var(--fs-lead);
font-weight: 400;
transition: all .3s cubic-bezier(.2,.7,.3,1);
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--fg);
color: var(--bg);
border: 1px solid var(--fg);
}
.btn-primary:hover { background: var(--fg); transform: translateY(-1px); }
/* Mobile: compact buttons, label always on one line */
@media (max-width: 700px){
.btn {
padding: 14px 24px;
font-size: var(--fs-small);
gap: 10px;
white-space: nowrap;
}
/* CTA rows in content frames: button spans the text block's width */
.page-cta-row .btn {
flex: 1 1 auto;
width: 100%;
justify-content: center;
}
}
.btn-ghost {
background: rgba(var(--fg-rgb),.02);
color: var(--fg);
border: 1px solid rgba(var(--fg-rgb),.18);
backdrop-filter: blur(20px);
}
.btn-ghost:hover { background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--fg-rgb),.4); }
.btn .arrow {
display: inline-flex;
width: 24px; height: 24px;
align-items: center; justify-content: center;
transition: transform .3s ease;
}
.btn:hover .arrow { transform: translate(2px, -2px); }
/* Hero visual side widget — compact meta card pinned to the top-right,
level with the RU·IT·TELECOM eyebrow. */
.hero-meta {
position: absolute;
top: 140px;
right: var(--pad);
width: 250px;
z-index: 3;
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .12em;
color: rgba(var(--fg-rgb),.45);
display: flex; flex-direction: column;
gap: 4px;
text-transform: uppercase;
}
.hero-meta canvas {
width: 96px !important;
height: 96px !important;
align-self: flex-end;
margin-bottom: 6px;
}
.hero-meta .row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: baseline;
padding: 5px 0;
border-bottom: 1px solid rgba(var(--fg-rgb),.06);
}
.hero-meta .row b {
color: var(--fg);
font-weight: 500;
font-size: var(--fs-meta);
font-family: var(--font-display);
text-transform: none;
letter-spacing: -.01em;
}
/* Btn arrow consistent */
.btn .arrow {
display: inline-flex;
width: 22px; height: 22px;
align-items: center; justify-content: center;
transition: transform .3s ease;
}
.btn:hover .arrow { transform: translate(3px, -3px); }
@media (max-width: 1100px){
.hero-inner { grid-template-columns: 1fr; }
.hero-meta { display: none; }
}
@media (max-width: 700px){
/* raise the hero copy — kill the tall centred gap under the nav, and
don't stretch the hero to a full 100vh (that left a big empty band
before the stats) — size it to its content instead. */
.hero { align-items: flex-start; min-height: auto; }
.hero-inner { padding: 104px var(--pad) 40px; }
.hero-eyebrow { margin-bottom: 22px; }
.hero-title { margin-bottom: 22px; }
.hero-sub { margin-bottom: 30px; }
}
/* Hero bottom band */
.hero-band {
position: relative;
padding: 40px var(--bleed) 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
border-top: 1px solid rgba(var(--fg-rgb),.08);
}
.stat {
position: relative;
}
.stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(48px, 5vw, 88px);
line-height: .9;
letter-spacing: -.04em;
color: var(--fg);
margin-bottom: 12px;
}
.stat-label {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.4;
color: rgba(var(--fg-rgb),.55);
max-width: 200px;
}
@media (max-width: 900px){
.hero-band { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
/* ============================================================
ABOUT / O компании
============================================================ */
.about {
position: relative;
padding: 48px var(--bleed);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-text--inline { margin-top: 36px; }
.about-text--inline p { font-size: clamp(16px, 1.1vw, 19px); }
/* ── Language bucket ─────────────────────────────────────── */
.about-bucket-col {
display: flex;
align-items: center;
justify-content: center;
}
.lang-bucket {
position: relative;
width: 100%;
max-width: 460px;
aspect-ratio: 320 / 248;
isolation: isolate;
}
.lang-bucket-svg,
.lang-bucket-front {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.lang-bucket-svg { z-index: 1; }
.lang-bucket-front { z-index: 3; pointer-events: none; }
.lang-bucket-glow {
position: absolute;
left: 50%;
top: 30%;
width: 62%;
height: 55%;
transform: translateX(-50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(0,137,207,.5), transparent 70%);
filter: blur(22px);
z-index: 0;
pointer-events: none;
}
/* the chip drops through here, between the bin body (z1) and front lip (z3) */
.lang-bucket-chiparea {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
pointer-events: none;
}
.lang-chip {
margin-top: 24%;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
border-radius: 999px;
background: rgba(10,16,26,.82);
border: 1px solid rgba(91,200,255,.4);
box-shadow: 0 6px 18px -12px rgba(0,137,207,.35), inset 0 1px 0 rgba(var(--fg-rgb),.08); /* приглушено (skills: dark-glow) */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
white-space: nowrap;
animation: lang-drop 1.8s cubic-bezier(.45,.03,.5,.95) forwards;
transform-origin: center top;
}
.lang-chip-dot {
width: 11px; height: 11px; border-radius: 50%;
box-shadow: 0 0 10px currentColor;
}
.lang-chip-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(15px, 1.2vw, 19px);
color: var(--fg);
letter-spacing: -.01em;
}
@keyframes lang-drop {
0% { transform: translateY(-58px) scale(.9); opacity: 0; }
16% { transform: translateY(0) scale(1); opacity: 1; }
62% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(62px) scale(.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.lang-chip { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
.lang-bucket { max-width: 380px; margin: 8px auto 0; }
}
.about-text p:first-child { color: var(--fg); font-weight: 500; }
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(var(--fg-rgb),.08);
border: 1px solid rgba(var(--fg-rgb),.08);
}
.about-feature {
background: var(--bg);
padding: 36px 32px;
position: relative;
transition: background .3s ease;
}
.about-feature:hover { background: var(--bg); }
.about-feature-num {
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--red);
letter-spacing: .2em;
margin-bottom: 16px;
}
.about-feature h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: -.02em;
margin-bottom: 12px;
}
.about-feature p {
font-size: var(--fs-small);
line-height: 1.5;
color: rgba(var(--fg-rgb),.55);
}
.about-robot-wrap {
width: 100%;
margin-top: 40px;
border: 1px solid rgba(var(--fg-rgb),.08);
border-radius: 16px;
background:
radial-gradient(120% 120% at 70% 10%, rgba(60,120,255,.10), transparent 60%),
var(--bg);
overflow: hidden;
position: relative;
}
.about-robot {
width: 100%;
height: clamp(360px, 36vw, 480px);
}
.about-robot spline-viewer { width: 100%; height: 100%; }
@media (max-width: 1100px){
.about-grid { grid-template-columns: 1fr; }
.about-robot { height: clamp(320px, 70vw, 420px); }
}
@media (max-width: 700px){
/* trim the huge 160px top/bottom padding that left a dead gap on phones */
.about { padding: 20px var(--bleed) 52px; }
/* pull section dividers tight to the content that follows them */
.section-divider { padding: 16px var(--bleed); gap: 16px; }
/* stats band: kill the 80px tail that left a big gap before the ·02 divider */
.hero-band { padding: 24px var(--bleed) 24px; }
}
/* ============================================================
PRODUCTS (BENTO)
============================================================ */
.products { position: relative; padding: 80px var(--bleed) 24px; }
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(260px, auto);
gap: 20px;
}
/* ── Horizontal pinned rail ─────────────────────────────────
Scroll down to Products → the section pins to the viewport and
the cards travel left→right with the wheel; once the last card
clears, the page resumes its normal vertical scroll. JS in the
Products component drives --rail-progress + the rail transform. */
.products-wrap { position: relative; }
.products-sticky {
position: sticky;
top: 0;
height: 100vh;
max-width: none;
margin: 0;
/* top padding clears the fixed logo (top 24px + ~44px) with air below it,
so the sticky topbar pins noticeably lower than the logo */
padding: clamp(108px, 13vh, 148px) 0 clamp(20px, 3vh, 40px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* slim top bar — section label + live project counter.
Same gutter as every other section (--bleed), so the eyebrow lines up
with the section dividers above/below on any viewport width. */
.products-topbar {
flex: 0 0 auto;
width: 100%;
max-width: none;
margin: 0;
padding: 0 var(--bleed);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
}
.products-counter {
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: .14em;
color: rgba(var(--fg-rgb),.4);
display: inline-flex;
align-items: baseline;
gap: 7px;
}
.products-counter span { color: var(--fg); font-size: var(--fs-lead); }
.products-counter i { font-style: normal; opacity: .5; }
/* 3D ring stage — projects sit around a circle; scrolling spins the ring
so each project turns to the front. JS sets per-panel ring positions
and the ring rotation. */
.products-stage {
flex: 1 1 auto;
min-height: 0;
position: relative;
margin-top: clamp(10px, 2vh, 26px);
perspective: 2400px;
perspective-origin: 50% 46%;
}
.products-ring {
position: absolute;
inset: 0;
transform-style: preserve-3d;
will-change: transform;
}
/* one project = one identical rectangle (image + text + button) */
.product-panel {
position: absolute;
left: 50%;
top: 50%;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.panel-card {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1.06fr .94fr;
gap: clamp(20px, 2.2vw, 40px);
align-items: stretch;
padding: clamp(14px, 1.3vw, 22px);
border-radius: 26px;
border: 1px solid rgba(var(--fg-rgb),.1);
background: linear-gradient(180deg, rgba(var(--fg-rgb),.06), rgba(var(--fg-rgb),.02)), var(--surf-1);
box-shadow: 0 60px 130px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(var(--fg-rgb),.06);
transition: box-shadow .5s ease, border-color .4s ease;
}
/* depth dimming — sides darken as they rotate away */
.panel-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--bg);
opacity: var(--card-dim, 0);
pointer-events: none;
z-index: 5;
transition: opacity .15s linear;
}
.panel-card:hover {
border-color: color-mix(in srgb, var(--accent) 35%, rgba(var(--fg-rgb),.18));
box-shadow: 0 80px 150px -50px color-mix(in srgb, var(--accent) 28%, var(--bg)), inset 0 1px 0 rgba(var(--fg-rgb),.08);
}
.panel-media {
position: relative;
height: 100%;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(var(--fg-rgb),.08);
background:
repeating-linear-gradient(135deg, rgba(var(--fg-rgb),.025) 0 11px, transparent 11px 22px),
var(--surf-1);
display: flex;
align-items: center;
justify-content: center;
}
.panel-media-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 3vw, 48px);
}
/* drop-in for the real photos you'll send later */
.panel-media-img { width: 100%; height: 100%; object-fit: cover; }
.panel-media-badge {
display: none;
position: absolute;
top: 18px; left: 18px;
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .16em;
padding: 7px 12px;
border-radius: 999px;
color: rgba(var(--fg-rgb),.75);
background: rgba(0,0,0,.45);
border: 1px solid rgba(var(--fg-rgb),.12);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.panel-phones {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 1.8vw, 26px);
height: 100%;
perspective: 1400px;
}
.panel-phones .phone-mockup {
width: auto;
height: min(74%, 430px);
margin: 0;
}
.panel-phones .phone-mockup:first-child { transform: rotate(-5deg) translateY(8px); }
.panel-phones .phone-mockup:last-child { transform: rotate(5deg) translateY(-8px); }
.panel-phones--one .phone-mockup { height: min(86%, 540px); transform: none; }
/* Desktop browser mockup — for product cards showing a web-app screenshot (CRM) */
.panel-browser {
width: min(94%, 600px);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(var(--fg-rgb),.14);
background: var(--surf-1);
box-shadow: 0 34px 70px -24px rgba(0,0,0,.7);
transform: rotate(-3deg);
}
.panel-browser-bar {
display: flex; align-items: center; gap: 7px;
padding: 10px 13px;
background: rgba(var(--fg-rgb),.05);
border-bottom: 1px solid rgba(var(--fg-rgb),.08);
}
.panel-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--fg-rgb),.2); display: block; }
.panel-browser img { display: block; width: 100%; height: auto; }
.panel-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(16px, 2vh, 36px) clamp(12px, 1.4vw, 28px) clamp(16px, 2vh, 36px) clamp(6px, 0.6vw, 14px);
max-width: 620px;
}
.panel-num {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
.panel-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(34px, 3.6vw, 62px);
line-height: 1;
letter-spacing: -.025em;
margin-bottom: 22px;
text-wrap: balance;
}
.panel-desc {
font-size: clamp(17px, 1.25vw, 22px);
line-height: 1.5;
color: rgba(var(--fg-rgb),.62);
margin-bottom: 30px;
}
.panel-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 38px;
}
.panel-chips > span {
padding: 9px 16px;
border: 1px solid rgba(var(--fg-rgb),.14);
border-radius: 999px;
font-size: var(--fs-small);
color: rgba(var(--fg-rgb),.72);
}
.panel-cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-cta);
font-size: var(--fs-lead);
color: var(--fg);
padding-bottom: 5px;
border-bottom: 1px solid rgba(var(--fg-rgb),.25);
transition: gap .25s ease, border-color .25s ease;
}
.panel-cta:hover { gap: 18px; border-color: var(--accent); }
.panel-cta svg { width: 20px; height: 20px; }
/* ---- Product panel: phone (vertical) layout — media-dominant, text right ---- */
.panel-card--phones { grid-template-columns: 1.2fr .8fr; }
.panel-card--phones .panel-media { background: transparent; border: none; }
.panel-card--phones .panel-title { font-size: clamp(28px, 2.7vw, 46px); }
.panel-card--phones .panel-phones .phone-mockup { height: min(90%, 560px); }
.panel-card--phones .panel-phones .phone-mockup:first-child { transform: rotate(-3.5deg) translateY(10px); }
.panel-card--phones .panel-phones .phone-mockup:last-child { transform: rotate(3.5deg) translateY(-10px); }
/* ---- Product panel: stacked layout — full uncropped screenshot, text overlaid on a darkened gradient at the bottom ---- */
.panel-card.is-stack {
display: block;
position: relative;
}
.panel-media-inner--bleed { padding: 0; height: 100%; }
/* Desktop: only the first shot shows, filling the media (unchanged look).
The second shot is used only by the mobile two-up tilted stack below.
Scoped to desktop so these don't fight the mobile overlay rules. */
.panel-duo { position: relative; width: 100%; height: 100%; }
@media (min-width: 901px) {
.is-stack .panel-duo .panel-browser:first-child { position: absolute; inset: 0; }
.is-stack .panel-duo .panel-browser:nth-child(2) { display: none; }
}
.is-stack .panel-media { height: 100%; }
.is-stack .panel-browser {
width: 100%;
height: 100%;
transform: none;
border: none;
background: transparent;
box-shadow: none;
border-radius: 18px;
}
.is-stack .panel-browser-bar { display: none; }
.is-stack .panel-browser img {
width: 100%;
height: 100%;
object-fit: contain; /* whole screenshot, no crop, proportions kept */
object-position: top center;
}
.is-stack .panel-info {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(10px, 1.3vh, 18px);
padding: clamp(56px, 12vh, 150px) clamp(26px, 2.6vw, 48px) clamp(24px, 3vh, 40px);
max-width: none;
border-radius: 0 0 18px 18px;
background: linear-gradient(to top,
rgba(6,7,12,.97) 24%,
rgba(6,7,12,.86) 46%,
rgba(6,7,12,.55) 68%,
rgba(6,7,12,0) 100%);
pointer-events: none;
}
.is-stack .panel-info > * { pointer-events: auto; }
.is-stack .panel-num { margin: 0 0 4px; }
.is-stack .panel-title { margin: 0; font-size: clamp(30px, 3.4vw, 54px); }
.is-stack .panel-desc { margin: 0; font-size: clamp(15px, 1.1vw, 20px); max-width: 52ch; }
.is-stack .panel-chips { margin: 4px 0 2px; }
.is-stack .panel-cta { margin-top: 4px; }
@media (max-height: 820px) {
.panel-title { font-size: clamp(34px, 4vw, 58px); }
.panel-num { margin-bottom: 16px; }
.panel-desc { margin-bottom: 22px; }
.panel-chips { margin-bottom: 26px; }
}
.products-progress {
flex: 0 0 auto;
height: 2px;
width: calc(100% - 2 * var(--pad));
max-width: var(--maxw);
margin: clamp(14px, 2.4vh, 26px) auto 0;
background: rgba(var(--fg-rgb),.09);
border-radius: 2px;
overflow: hidden;
}
.products-progress span {
display: block;
height: 100%;
width: 100%;
background: var(--accent);
transform-origin: left center;
transform: scaleX(var(--rail-progress, 0));
}
@media (max-width: 900px) {
/* Keep the 3D rotating ring on phones too — swiping/scrolling spins it,
same as desktop. JS (Products) sizes + positions the panels; here we make
each card a compact, single-column phone layout with content centred. */
.products-sticky {
height: 100svh;
padding: 104px 0 20px; /* clear the fixed logo pill (top ~21px + ~62px) with air below when the topbar sticks */
overflow: hidden;
}
.products-stage {
perspective: 1500px;
margin-top: 14px;
}
/* every card is a flex column with a FIXED media zone up top, so the
eyebrow / title / desc / chips / cta all land at the SAME level on
every card (phone shots and desktop shots alike). */
.panel-card,
.panel-card.is-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 16px;
padding: 16px;
border-radius: 20px;
overflow: hidden;
}
.panel-media {
flex: 0 0 auto;
height: clamp(210px, 33vh, 280px); /* the fixed image zone — same on every card */
min-height: 0;
display: flex; align-items: center; justify-content: center;
}
.panel-media-inner { padding: 12px; }
.panel-info {
position: static;
background: transparent;
padding: 0;
gap: 10px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.panel-title { font-size: clamp(26px, 7vw, 40px); }
.panel-card--phones .panel-title { font-size: clamp(24px, 6.4vw, 36px); }
.panel-desc { font-size: var(--fs-small); }
.panel-chips span { font-size: var(--fs-meta); padding: 5px 10px; }
.panel-cta { font-size: var(--fs-small); }
.products-progress { display: block; }
/* phones keep their real proportions — scale down by width, never distort/clip */
.panel-card--phones .panel-media { overflow: visible; }
.panel-phones { height: auto; gap: 12px; }
.panel-phones .phone-mockup { height: auto; width: clamp(108px, 30vw, 138px); }
.panel-card--phones .panel-phones .phone-mockup:first-child { transform: rotate(-4deg) translateY(6px); }
.panel-card--phones .panel-phones .phone-mockup:last-child { transform: rotate(4deg) translateY(-6px); }
/* desktop-screenshot cards: two window mockups overlaid like a loose deck
(green top-left / red bottom-right in the ref), floating on the card's
dark surface — NO striped background, NO framing box.
High-specificity (.product-panel prefix) so nothing else can win. */
.product-panel .panel-card.is-stack .panel-media {
height: clamp(210px, 33vh, 280px) !important; aspect-ratio: auto !important; flex: 0 0 auto !important; min-height: 0 !important;
background: transparent !important; border: none !important; overflow: visible !important;
}
.product-panel .panel-card.is-stack .panel-media-inner--bleed { padding: 0 !important; overflow: visible !important; height: 100% !important; }
.product-panel .panel-card.is-stack .panel-duo { position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important; }
.product-panel .panel-card.is-stack .panel-duo .panel-browser {
position: absolute !important;
width: 66% !important; height: auto !important; inset: auto !important;
border-radius: 12px !important; overflow: hidden !important;
border: 1px solid rgba(var(--fg-rgb),.16) !important;
box-shadow: 0 26px 52px -20px rgba(0,0,0,.7) !important;
background: var(--surf-1) !important;
}
.product-panel .panel-card.is-stack .panel-duo .panel-browser-bar { display: flex !important; }
.product-panel .panel-card.is-stack .panel-duo .panel-browser:first-child { top: 36% !important; left: 35% !important; transform: translate(-50%, -50%) rotate(-6deg) !important; z-index: 1 !important; }
.product-panel .panel-card.is-stack .panel-duo .panel-browser:nth-child(2) { top: 64% !important; left: 65% !important; display: block !important; transform: translate(-50%, -50%) rotate(6deg) !important; z-index: 2 !important; }
.product-panel .panel-card.is-stack .panel-duo .panel-browser img { position: static !important; width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; }
/* keep the number badge in front of the overlaid windows */
.product-panel .panel-card.is-stack .panel-media-badge { z-index: 5 !important; }
.is-stack .panel-info { position: static; background: transparent; padding: 0; gap: 10px; }
.is-stack .panel-title { font-size: clamp(26px, 7vw, 40px); }
}
.product-card {
position: relative;
background: linear-gradient(180deg, rgba(var(--fg-rgb),.04), rgba(var(--fg-rgb),.01));
border: 1px solid rgba(var(--fg-rgb),.08);
border-radius: 28px;
padding: 36px;
display: flex;
flex-direction: column;
overflow: hidden;
cursor: pointer;
transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease, filter .6s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
/* Deck treatment: grayscale at rest → colour + lift on hover.
.product-card is also a .rv node, and `.rv.in { filter/transform:none }`
sits later in the cascade — so these must out-specify it. */
.product-card.rv.in { filter: none; }
.product-card.rv:hover, .product-card:hover {
transform: translateY(-12px);
filter: none;
border-color: color-mix(in srgb, var(--accent) 45%, rgba(var(--fg-rgb),.2));
background: linear-gradient(180deg, rgba(var(--fg-rgb),.06), rgba(var(--fg-rgb),.02));
box-shadow: 0 44px 90px -30px color-mix(in srgb, var(--accent) 32%, var(--bg));
}
.product-card-tag {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(var(--fg-rgb),.45);
margin-bottom: 18px;
}
.product-card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 2.5vw, 44px);
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 16px;
}
.product-card-desc {
font-size: var(--fs-body);
line-height: 1.5;
color: rgba(var(--fg-rgb),.6);
max-width: 480px;
margin-bottom: 28px;
}
.product-card-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: auto;
margin-bottom: 20px;
}
.product-card-tags span {
padding: 6px 12px;
border: 1px solid rgba(var(--fg-rgb),.12);
border-radius: 999px;
font-size: var(--fs-meta);
color: rgba(var(--fg-rgb),.7);
}
.product-card-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-cta);
font-size: var(--fs-body);
color: var(--fg);
transition: gap .25s ease;
}
.product-card:hover .product-card-cta { gap: 16px; }
.product-card-visual {
position: relative;
border-radius: 18px;
overflow: hidden;
background: var(--surf-1);
min-height: 220px;
margin-top: 20px;
filter: none;
transition: filter .6s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover .product-card-visual { filter: none; }
/* Bento spans */
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }
@media (max-width: 1100px){
.span-6, .span-7, .span-5, .span-4, .span-8 { grid-column: span 12; }
.row-2 { grid-row: auto; }
}
/* Billing card */
.billing-mockup {
position: relative;
height: 100%;
background: linear-gradient(135deg, var(--surf-1) 0%, var(--surf-2) 100%);
padding: 24px;
display: flex; flex-direction: column;
gap: 12px;
}
.billing-row {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.billing-cell {
height: 56px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: var(--fs-meta);
color: rgba(var(--fg-rgb),.7);
}
.billing-cell.red { background: linear-gradient(135deg, #c43040, #8a1f2a); }
.billing-cell.blue { background: linear-gradient(135deg, #2a73c4, #154a85); }
.billing-cell.green { background: linear-gradient(135deg, #2a9a5f, #15573a); }
.billing-cell.purple { background: linear-gradient(135deg, #7a3ec4, #4a1f85); }
.billing-cell.orange { background: linear-gradient(135deg, #c4853e, #855421); }
.billing-cell.dark { background: var(--surf-2); color: rgba(var(--fg-rgb),.4); }
/* feature list with red bullets */
.feature-list {
list-style: none;
display: flex; flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.feature-list li {
position: relative;
padding-left: 26px;
font-size: var(--fs-body);
color: rgba(var(--fg-rgb),.8);
}
.feature-list li::before {
content: '+';
position: absolute;
left: 0; top: 0;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
background: var(--red);
color: var(--fg);
border-radius: 4px;
font-size: var(--fs-small);
font-weight: 700;
line-height: 1;
}
/* Phone mockup */
.phone-mockup {
position: relative;
width: 280px;
aspect-ratio: 9/19.5;
margin: 0 auto;
border-radius: 36px;
background: var(--surf-1);
border: 2px solid var(--surf-2);
overflow: hidden;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.phone-mockup-screen { position: absolute; inset: 6px; border-radius: 30px; overflow: hidden; }
.phone-mockup-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone-mockup::before {
content: '';
position: absolute;
top: 2.4%; left: 50%; transform: translateX(-50%);
width: 26%;
aspect-ratio: 5 / 1;
background: var(--bg);
border-radius: 999px;
z-index: 2;
}
/* Chat platform mockup */
.chat-mockup {
background: linear-gradient(180deg, #faf7ff, #ece4ff);
border-radius: 12px;
height: 100%;
min-height: 280px;
display: grid;
grid-template-columns: 110px 1fr 140px;
font-size: 9px;
color: #2a1850;
overflow: hidden;
}
.chat-side { background: #3d0750; color: rgba(var(--fg-rgb),.8); padding: 12px 10px; }
.chat-side-title { font-weight: 700; margin-bottom: 8px; font-size: 8px; letter-spacing: .1em; }
.chat-side-item { padding: 6px 0; border-radius: 6px; padding-left: 8px; }
.chat-side-item.active { background: rgba(var(--fg-rgb),.1); }
.chat-list { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.chat-list-item { padding: 6px; border-radius: 6px; background: rgba(61,7,80,.04); display: flex; gap: 6px; }
.chat-list-item.active { background: #3d0750; color: var(--fg); }
.chat-list-item .dot { width: 16px; height: 16px; border-radius: 50%; background: #d4a; flex-shrink: 0; }
.chat-bubble { padding: 6px 8px; border-radius: 6px; background: var(--fg); max-width: 80%; }
/* Marquee */
/* ============================================================
BRANDS — "Крупные бренды доверяют нам": an infinite white-wordmark
slider with faded edges, over a glowing brand-blue horizon arc with
twinkling sparkles (sparkles.js). Replaces the old outlined marquee.
============================================================ */
.brands {
position: relative;
padding: 48px 0 0;
margin-top: 24px;
overflow: hidden;
}
.brands-head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
padding: 0 var(--pad);
}
.brands-title {
font-size: clamp(34px, 4vw, 60px);
line-height: 1.02;
}
.brands-slider-wrap {
position: relative;
width: 100%;
max-width: clamp(880px, 92vw, 1480px);
margin: 0 auto;
}
.brands-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.brands-track {
display: flex;
align-items: center;
/* интервал задан margin-right у .brand-logo (НЕ gap): при gap сдвиг цикла
на -50% попадал в середину зазора между копиями — стык дёргался */
width: max-content;
animation: brands-scroll 36s linear infinite;
}
.brand-logo {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin-right: clamp(72px, 8vw, 150px);
}
.brand-logo img {
width: auto;
display: block;
/* force every logo to a clean white silhouette regardless of source colour */
filter: brightness(0) invert(1);
opacity: .9;
transition: opacity .3s ease;
}
.brand-logo:hover img { opacity: 1; }
@keyframes brands-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* progressive blur on both edges — logos smear as they reach the sides */
.brands-blur {
position: absolute;
top: 0;
bottom: 0;
width: clamp(150px, 22vw, 320px);
pointer-events: none;
z-index: 4;
}
.brands-blur--left { left: 0; }
.brands-blur--right { right: 0; }
/* glowing horizon arc + sparkles */
.brands-stage {
position: relative;
height: clamp(220px, 26vw, 380px);
margin-top: clamp(-20px, -2vw, -8px);
width: 100%;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: radial-gradient(62% 100% at 50% 100%, var(--bg) 55%, transparent 100%);
mask-image: radial-gradient(62% 100% at 50% 100%, var(--bg) 55%, transparent 100%);
}
.brands-stage::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(60% 80% at 50% 100%, var(--blue), transparent 66%);
opacity: .5;
}
.brands-arc {
position: absolute;
left: -50%;
top: 56%;
width: 200%;
aspect-ratio: 1 / 0.62;
border-radius: 100%;
border-top: 1px solid rgba(91, 200, 255, .55);
background: var(--bg);
box-shadow: 0 -1px 60px rgba(0, 137, 207, .35);
z-index: 2;
}
.brands-sparkles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.brands-track { animation: none; }
}
@media (max-width: 640px) {
.brands { padding-top: 32px; }
.brands-stage { height: 200px; }
}
/* (legacy outlined marquee — kept for any other usages) */
.marquee {
position: relative;
padding: 48px 0;
overflow: hidden;
border-top: 1px solid rgba(var(--fg-rgb),.06);
border-bottom: 1px solid rgba(var(--fg-rgb),.06);
max-width: 100%;
margin: 80px 0;
}
.marquee-row {
display: flex;
gap: 80px;
white-space: nowrap;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(60px, 8vw, 140px);
letter-spacing: -.03em;
line-height: 1;
-webkit-text-stroke: 1px rgba(var(--fg-rgb),.4);
color: transparent;
animation: marquee-scroll 40s linear infinite;
}
.marquee-row.reverse {
animation: marquee-scroll-reverse 50s linear infinite;
margin-top: 20px;
-webkit-text-stroke: 1px rgba(var(--fg-rgb),.25);
font-size: clamp(50px, 6vw, 110px);
}
.marquee-row span {
display: inline-flex; align-items: center; gap: 80px;
}
.marquee-row span::after {
content: '✦';
-webkit-text-stroke: 0;
color: rgba(var(--fg-rgb),.4);
font-size: .5em;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes marquee-scroll-reverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* Marquee title */
.marquee-title {
text-align: center;
margin-bottom: 24px;
padding: 0 var(--pad);
}
/* ============================================================
CASES
============================================================ */
.cases { position: relative; padding: 40px var(--bleed); }
.cases-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.case-card {
position: relative;
border-radius: 32px;
overflow: hidden;
background: var(--surf-1);
min-height: 600px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 48px;
cursor: pointer;
transition: box-shadow .5s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.case-card:hover { box-shadow: 0 30px 72px -30px rgba(0,0,0,.85); }
.case-card-bg {
position: absolute; inset: 0;
z-index: 0;
filter: none;
transition: filter .7s cubic-bezier(.2,.7,.3,1);
}
.case-card:hover .case-card-bg { filter: none; }
.case-card-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.case-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,.55) 64%, rgba(0,0,0,.85) 84%, rgba(0,0,0,.95) 100%);
z-index: 1;
}
.case-card-content { position: relative; z-index: 2; }
.case-card-tag {
display: inline-flex;
padding: 8px 14px;
border: 1px solid rgba(var(--fg-rgb),.2);
border-radius: 999px;
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.case-card-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(36px, 3.5vw, 56px);
letter-spacing: -.03em;
line-height: 1;
margin-bottom: 16px;
}
.case-card-desc {
font-size: var(--fs-body);
line-height: 1.5;
color: rgba(var(--fg-rgb),.75);
margin-bottom: 24px;
max-width: 480px;
}
.case-card-meta {
display: flex; gap: 32px; flex-wrap: wrap;
}
.case-card-meta-item .label {
display: block;
font-family: var(--font-mono);
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: .15em;
color: rgba(var(--fg-rgb),.5);
margin-bottom: 4px;
}
.case-card-meta-item .val {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-body);
}
/* Case cards always sit on dark imagery — keep text light in any theme */
.case-card-content,
.case-card-title,
.case-card-tag,
html[data-theme="light"] .case-card,
html[data-theme="light"] .case-card * { color: #fff; }
.case-card-tag { border-color: rgba(255,255,255,.28); }
.case-card-desc,
html[data-theme="light"] .case-card .case-card-desc { color: rgba(255,255,255,.82); }
.case-card-meta-item .label,
html[data-theme="light"] .case-card .case-card-meta-item .label { color: rgba(255,255,255,.6); }
@media (max-width: 1100px){
.cases-grid { grid-template-columns: 1fr; }
.case-card { min-height: 480px; padding: 36px; }
}
@media (max-width: 700px){
/* kill the huge 120px top gap and stack the header so the button
is a clean single-line pill under the title (not a squeezed oval) */
.cases { padding: 40px var(--bleed) 64px; }
.section-head {
flex-direction: column;
align-items: flex-start;
gap: 26px;
margin-bottom: 36px;
}
.section-head .btn {
white-space: nowrap;
padding: 15px 28px;
font-size: var(--fs-body);
}
}
/* ============================================================
WHY US — Network graph
============================================================ */
.why {
position: relative;
padding: 48px var(--bleed);
}
.why-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.why-graph {
position: relative;
aspect-ratio: 1;
width: 100%;
max-width: 640px;
margin-left: auto;
}
.why-graph canvas { width: 100%; height: 100%; display: block; }
.why-points {
display: flex; flex-direction: column;
gap: 4px;
}
.why-point {
padding: 24px 0;
border-bottom: 1px solid rgba(var(--fg-rgb),.08);
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
cursor: pointer;
transition: transform .3s var(--ease-out-expo);
}
.why-point:hover { transform: translateX(12px); }
.why-point-num {
display: none; /* декоративная нумерация убрана (skills: numbered-section-markers) */
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: rgba(var(--fg-rgb),.4);
letter-spacing: .1em;
}
.why-point-title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-lead);
letter-spacing: -.01em;
}
.why-point.active .why-point-title { color: var(--red); }
.why-point-desc {
font-size: var(--fs-small);
color: rgba(var(--fg-rgb),.55);
margin-top: 6px;
display: none;
}
.why-point.active .why-point-desc { display: block; }
@media (max-width: 1100px){
.why-grid { grid-template-columns: 1fr; }
.why-graph { margin: 0 auto; }
}
/* ============================================================
DISPLAY STACK — fanned deck (grayscale → colour, lift on hover)
============================================================ */
.why-stack {
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
padding: 40px 0;
}
.why-lead {
max-width: 360px;
align-self: flex-end;
font-size: var(--fs-body);
line-height: 1.5;
color: rgba(var(--fg-rgb),.55);
}
.why-decks {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 64px;
padding: 30px 0 150px;
}
.why-deck {
display: flex;
justify-content: center;
padding: 0 22rem 13rem 0;
}
@media (max-width: 1100px){
.why-deck { padding: 0 15rem 11rem 0; }
}
@media (max-width: 560px){
.why-decks { padding-bottom: 80px; }
.why-deck { padding: 0 9rem 8rem 0; }
}
.display-stack {
display: grid;
grid-template-areas: 'stack';
place-items: center;
isolation: isolate;
}
.display-card {
grid-area: stack;
position: relative;
width: clamp(23rem, 30vw, 34rem);
max-width: 88vw;
min-height: 11.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px 28px;
border: 1.5px solid rgba(var(--fg-rgb),.12);
border-radius: 16px;
background: rgba(18,20,26,.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
cursor: pointer;
outline: none;
transition: transform .7s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .5s ease;
}
/* right-edge fade so cards melt into the deck behind them */
.display-card::after {
content: '';
position: absolute; top: -5%; right: -2px;
width: 18rem; height: 110%;
background: linear-gradient(to left, var(--bg) 4%, rgba(7,8,11,0) 70%);
pointer-events: none;
border-radius: 16px;
}
.display-card-head { display: flex; align-items: flex-start; gap: 10px; }
.display-card-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 26%, var(--surf-1));
color: var(--accent);
flex: none;
}
.display-card-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 30px; padding: 0 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 22%, var(--surf-1));
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-meta); letter-spacing: .12em;
flex: none;
}
.display-card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 23px;
line-height: 1.12;
letter-spacing: -.01em;
color: var(--accent);
}
.display-card-desc {
font-size: 16.5px;
line-height: 1.4;
color: rgba(var(--fg-rgb),.92);
margin: 0;
}
.display-card-meta {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(var(--fg-rgb),.5);
margin: 0;
}
/* fan positions — single deck of 6, one diagonal line */
.display-card--1 { transform: skewY(-8deg) translate(0, 0); z-index: 1; }
.display-card--2 { transform: skewY(-8deg) translate(4.6rem, 3.2rem); z-index: 2; }
.display-card--3 { transform: skewY(-8deg) translate(9.2rem, 6.4rem); z-index: 3; }
.display-card--4 { transform: skewY(-8deg) translate(13.8rem, 9.6rem); z-index: 4; }
.display-card--5 { transform: skewY(-8deg) translate(18.4rem, 12.8rem); z-index: 5; }
.display-card--6 { transform: skewY(-8deg) translate(23rem, 16rem); z-index: 6; }
/* hover / focus: slide forward + raise */
.display-card:hover, .display-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 55%, rgba(var(--fg-rgb),.2));
box-shadow: 0 44px 90px -22px color-mix(in srgb, var(--accent) 40%, var(--bg));
z-index: 20;
}
.display-card--1:hover, .display-card--1:focus-visible { transform: skewY(-8deg) translate(0, -3.2rem); }
.display-card--2:hover, .display-card--2:focus-visible { transform: skewY(-8deg) translate(4.6rem, 0rem); }
.display-card--3:hover, .display-card--3:focus-visible { transform: skewY(-8deg) translate(9.2rem, 3.2rem); }
.display-card--4:hover, .display-card--4:focus-visible { transform: skewY(-8deg) translate(13.8rem, 6.4rem); }
.display-card--5:hover, .display-card--5:focus-visible { transform: skewY(-8deg) translate(18.4rem, 9.6rem); }
.display-card--6:hover, .display-card--6:focus-visible { transform: skewY(-8deg) translate(23rem, 12.8rem); }
@media (max-width: 1100px){
.why-stack { min-height: 340px; }
.display-stack { transform: scale(.82); }
}
@media (max-width: 760px){
/* Mobile: unfan the deck into a clean full-width vertical list */
.why-decks { margin-top: 28px; padding: 0 0 24px; }
.why-deck { padding: 0; display: block; width: 100%; }
.display-stack {
display: flex; flex-direction: column; gap: 14px;
transform: none; width: 100%; place-items: stretch;
}
.display-card {
grid-area: auto; position: relative;
transform: none !important; z-index: auto !important;
width: 100%; max-width: none; min-height: 152px;
}
.display-card::after { display: none; }
.display-card:hover, .display-card:focus-visible {
transform: none !important;
box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
}
}
/* Narrow phones: tighten the half-width glass drawer's type */
@media (max-width: 600px){
.nav-drawer { padding: 64px 18px 20px; }
.nav-drawer a { font-size: var(--fs-body); padding: 13px 2px; }
.nd-parent { font-size: var(--fs-body); padding: 13px 2px; }
.nd-sub-inner a { font-size: var(--fs-small); }
.nav-drawer > a .sub { display: none; }
}
@media (prefers-reduced-motion: reduce){
.display-card { transition: border-color .3s ease, box-shadow .3s ease; }
}
/* ============================================================
MINTSIFRA / IT-info section
============================================================ */
.mintsifra {
position: relative;
padding: 48px var(--bleed);
}
.mintsifra-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
border: 1px solid rgba(var(--fg-rgb),.08);
border-radius: 24px;
overflow: hidden;
}
.mintsifra-block {
padding: 36px;
border-right: 1px solid rgba(var(--fg-rgb),.08);
border-bottom: 1px solid rgba(var(--fg-rgb),.08);
font-family: var(--font-mono);
font-size: var(--fs-meta);
line-height: 1.6;
color: rgba(var(--fg-rgb),.75);
}
.mintsifra-block:nth-child(3n) { border-right: none; }
.mintsifra-block-label {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .02em; /* обычный регистр вместо длинного капса (skills: all-caps-body) */
color: var(--red);
margin-bottom: 16px;
display: block;
}
.mintsifra-block strong { color: var(--fg); font-weight: 500; }
.mintsifra-block code {
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--blue);
}
@media (max-width: 1100px){
.mintsifra-grid { grid-template-columns: 1fr; }
.mintsifra-block { border-right: none; }
}
/* ============================================================
FOOTER
============================================================ */
.footer {
position: relative;
padding: 80px 0 60px;
max-width: none;
margin: 0;
border-top: 1px solid rgba(var(--fg-rgb),.08);
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin: 0 auto 80px;
max-width: var(--maxw);
padding: 0 var(--pad);
}
.footer-brand img { height: 40px; margin-bottom: 24px; }
.footer-brand p { font-size: var(--fs-small); color: rgba(var(--fg-rgb),.55); max-width: 320px; line-height: 1.5; }
.footer-col h3 {
font-family: var(--font-mono);
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: .25em;
color: rgba(var(--fg-rgb),.4);
margin-bottom: 20px;
}
.footer-col a {
display: block;
padding: 6px 0;
font-size: var(--fs-body);
color: rgba(var(--fg-rgb),.7);
transition: color .2s;
}
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid rgba(var(--fg-rgb),.08);
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: rgba(var(--fg-rgb),.4);
letter-spacing: .1em;
}
.footer-bottom a:hover { color: var(--fg); }
.footer-bottom .links { display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 900px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){
/* Документы column: many links — lay them in 2 sub-columns full-width
so the mobile footer is shorter */
.footer-col--docs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; }
.footer-col--docs h3 { grid-column: 1 / -1; }
}
/* Giga title */
.giga {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(80px, 12vw, 240px);
letter-spacing: -.05em;
line-height: .85;
}
/* Cookie bar */
.cookie {
position: fixed;
bottom: 24px; right: 24px;
z-index: 200;
max-width: 480px;
background: rgba(15,15,16,.85);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(var(--fg-rgb),.1);
border-radius: 24px;
padding: 24px;
font-size: var(--fs-small);
color: rgba(var(--fg-rgb),.8);
line-height: 1.5;
transition: opacity .3s, transform .3s;
}
.cookie.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.cookie-actions { display: flex; gap: 10px; margin-top: 16px; }
.cookie-btn {
padding: 10px 20px;
border-radius: 999px;
font-family: var(--font-cta);
font-size: var(--fs-small);
border: 1px solid rgba(var(--fg-rgb),.15);
background: rgba(var(--fg-rgb),.02);
color: var(--fg);
}
.cookie-btn.primary {
border-color: var(--blue);
background: linear-gradient(180deg, rgba(0,137,207,.4), rgba(0,69,105,0));
}
.cookie-btn:hover { background: rgba(var(--fg-rgb),.08); }
@media (max-width: 640px){
.cookie { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}
/* ============================================================
SEAMLESS INTRO COVER (loader-intro.js) — the hero logo builds on
black, then the same canvas is handed into the hero stage.
============================================================ */
html.booting, html.booting body { overflow: hidden !important; }
#boot-loader.boot {
position: fixed; inset: 0; z-index: 100000;
pointer-events: none; /* never trap clicks */
}
.boot-bg {
position: absolute; inset: 0;
background: var(--bg);
transition: opacity .72s ease;
}
/* logo layer sits ABOVE the black bg and matches the hero stage position */
#boot-loader .boot-logo {
position: absolute; inset: 0;
transform: translateX(7%); /* same offset as .hero-3d-stage */
}
.boot-foot {
position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px);
display: flex; flex-direction: column; align-items: center;
transition: opacity .5s ease;
}
.boot-reveal .boot-bg, .boot-reveal .boot-foot { opacity: 0; }
.boot-label {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--fs-meta); letter-spacing: .42em; text-transform: uppercase;
color: rgba(var(--fg-rgb),.66);
padding-left: .42em;
display: inline-flex; align-items: baseline;
}
.boot-dots { display: inline-flex; margin-left: .1em; }
.boot-dots i { font-style: normal; animation: boot-dot 1.2s infinite ease-in-out; opacity: .25; }
.boot-dots i:nth-child(2) { animation-delay: .2s; }
.boot-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes boot-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.boot-bar {
margin-top: 22px;
width: min(62vw, 230px); height: 2px;
background: rgba(var(--fg-rgb),.12);
border-radius: 2px; overflow: hidden;
}
.boot-bar span {
display: block; height: 100%; width: 100%;
transform: scaleX(0); transform-origin: left center;
background: linear-gradient(90deg, #ED1C24, #0089CF);
}
.boot-pct {
margin-top: 12px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--fs-meta); letter-spacing: .2em;
color: rgba(var(--fg-rgb),.4);
}
/* the rest of the site fades in once the cover lets go */
html.booting .nav,
html.booting .hero-inner { opacity: 0; }
html.booted .nav { animation: boot-fade-in .7s ease .05s both; }
html.booted .hero-inner { animation: boot-site-in .85s ease .18s both; }
@keyframes boot-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-site-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.boot-dots i { animation: none; opacity: .7; }
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
/* Text word reveal */
.section-title.split .rv-word {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.section-title.split .rv-inner {
display: inline-block;
transform: translateY(110%);
opacity: 0;
transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease;
transition-delay: calc(var(--rvi, 0) * 0.045s);
}
.section-title.split.in .rv-inner {
transform: translateY(0);
opacity: 1;
}
/* Case card assemble animation */
.case-card-anim {
opacity: 0;
transform: translateY(80px) rotateZ(calc(var(--case-side, 1) * 2deg)) scale(.96);
transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1.1s cubic-bezier(.2,.7,.3,1);
transition-delay: .1s;
}
.case-card-anim.in {
opacity: 1;
transform: translateY(0) rotateZ(0) scale(1);
}
/* Bento card cursor glow (set via --mx, --my from JS) */
.product-card {
--mx: 50%;
--my: 50%;
}
.product-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 28px;
background: radial-gradient(circle 280px at var(--mx) var(--my), rgba(var(--fg-rgb),.10), transparent 60%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
z-index: 0;
}
.product-card:hover::before { opacity: 1; }
.product-card > * { position: relative; z-index: 1; }
/* Magnetic CTA — smoother */
.btn-primary, .nav-pill {
transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s ease, border-color .25s ease;
}
/* Stat orbital */
.stat { position: relative; }
.stat-orbital {
position: absolute;
top: 0;
right: 0;
width: 118px;
height: 78px;
pointer-events: none;
opacity: .6;
transition: opacity .3s ease;
}
.stat:hover .stat-orbital { opacity: 1; }
@media (max-width: 1100px){
.stat-orbital { width: 92px; height: 64px; }
}
@media (max-width: 900px){
.stat-orbital { display: none; }
}
/* Marquee hover */
.marquee.hover .marquee-row { animation-play-state: paused; }
/* Cursor follower (cinema mode) */
.cursor-glow {
position: fixed;
top: 0; left: 0;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,137,207,.16) 0%, transparent 65%);
pointer-events: none;
/* выше слоёв logo-blur (98): их backdrop-filter размазывал это пятно
в яркую «пилюлю» вокруг логотипа; ниже .nav (100) */
z-index: 99;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
transition: opacity .3s;
}
/* Section number divider */
.section-divider {
display: flex;
align-items: center;
gap: 24px;
padding: 28px var(--bleed);
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(var(--fg-rgb),.4);
}
.section-divider .line { flex: 1; height: 1px; background: rgba(var(--fg-rgb),.08); }
.section-divider .num { display: none; /* декоративная нумерация секций убрана (skills: numbered-section-markers) */ }
.divider-loop {
flex: none;
width: 76px;
height: 42px;
opacity: .5;
--loop-fg: var(--fg);
--loop-accent: var(--accent);
transition: opacity .3s ease;
}
.section-divider:hover .divider-loop { opacity: .9; }
@media (max-width: 720px){ .divider-loop { display: none; } }
/* ============================================================
AUTO SCROLL-REVEAL (inner pages) — gated behind html.areveal-on
so content stays visible if JS never runs. auto-reveal.js adds
.areveal (+ a direction variant) and toggles .in on scroll.
============================================================ */
html.areveal-on .areveal {
opacity: 0;
transform: translateY(30px);
will-change: opacity, transform;
}
html.areveal-on .areveal.av-l { transform: translateX(-42px); }
html.areveal-on .areveal.av-r { transform: translateX(42px); }
html.areveal-on .areveal.av-scale { transform: scale(.93); }
html.areveal-on .areveal.av-fade { transform: none; }
html.areveal-on .areveal.in {
opacity: 1;
transform: none;
transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
html.areveal-on .areveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Subtle animated motif behind card-grid sections */
.section-bg-loop {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .06;
--loop-fg: var(--fg);
--loop-accent: var(--accent);
}
.page-section.has-bg-loop { position: relative; }
.page-section.has-bg-loop > :not(.section-bg-loop) { position: relative; z-index: 1; }
/* Selection */
::selection { background: var(--blue); color: var(--fg); }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb),.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--fg-rgb),.2); }
/* ============================================================
HERO 3D LOGO STAGE
============================================================ */
.hero-bg-glass.hero-3d {
/* override flat-image rules */
align-items: stretch;
justify-content: stretch;
}
.hero-3d-stage {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* nudge the 3D logo composition a touch to the right */
transform: translateX(7%);
}
.hero-3d-stage canvas {
display: block;
}
/* Mobile: drop the desktop rightward nudge so the rotating logo stays centred
and fills the width (no side clipping / bars). */
@media (max-width: 900px){
.hero-3d-stage { transform: none; }
}
/* ============================================================
ENHANCED SCROLL REVEALS — infracorp-style
============================================================ */
/* Base: smoother + blur on entry */
.rv {
opacity: 0;
transform: translateY(60px);
filter: blur(8px);
transition:
opacity 1.1s cubic-bezier(.2,.7,.2,1),
transform 1.1s cubic-bezier(.2,.7,.2,1),
filter 1.1s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform, filter;
}
.rv.in {
opacity: 1;
transform: none;
filter: blur(0);
}
/* Variants */
.rv-up { transform: translateY(80px); }
.rv-down { transform: translateY(-50px); }
.rv-left { transform: translateX(-80px); }
.rv-right { transform: translateX(80px); }
.rv-scale { transform: scale(0.94); }
.rv-fade { transform: none; }
.rv-up.in, .rv-down.in, .rv-left.in, .rv-right.in, .rv-scale.in { transform: none; }
/* Stagger — children of .rv-stagger reveal sequentially */
.rv-stagger > .rv,
.rv-stagger > * > .rv {
transition-delay: calc(var(--rvi, 0) * 90ms);
}
/* Marker that lets children stagger via index without manual --rvi */
.rv-stagger > *:nth-child(1) { --rvi: 0; }
.rv-stagger > *:nth-child(2) { --rvi: 1; }
.rv-stagger > *:nth-child(3) { --rvi: 2; }
.rv-stagger > *:nth-child(4) { --rvi: 3; }
.rv-stagger > *:nth-child(5) { --rvi: 4; }
.rv-stagger > *:nth-child(6) { --rvi: 5; }
.rv-stagger > *:nth-child(7) { --rvi: 6; }
.rv-stagger > *:nth-child(8) { --rvi: 7; }
.rv-stagger > *:nth-child(9) { --rvi: 8; }
.rv-stagger > *:nth-child(10) { --rvi: 9; }
.rv-stagger > *:nth-child(11) { --rvi: 10; }
.rv-stagger > *:nth-child(12) { --rvi: 11; }
/* Char-by-char title reveal */
.rv-chars {
display: inline-block;
}
.rv-chars .rv-char {
display: inline-block;
opacity: 0;
transform: translateY(0.6em);
filter: blur(6px);
transition:
opacity .9s cubic-bezier(.2,.7,.2,1),
transform .9s cubic-bezier(.2,.7,.2,1),
filter .9s cubic-bezier(.2,.7,.2,1);
transition-delay: calc(var(--ci, 0) * 22ms);
}
.rv-chars.in .rv-char {
opacity: 1;
transform: none;
filter: blur(0);
}
/* Line-by-line reveal — for paragraphs */
.rv-lines .rv-line {
display: block;
overflow: hidden;
}
.rv-lines .rv-line > span {
display: inline-block;
transform: translateY(100%);
opacity: 0;
transition:
transform 1s cubic-bezier(.2,.7,.2,1),
opacity 1s ease;
transition-delay: calc(var(--li, 0) * 90ms);
}
.rv-lines.in .rv-line > span {
transform: none;
opacity: 1;
}
/* Page hero header band — first visible header on every product page */
.page-hero {
position: relative;
padding: 200px var(--bleed) 120px;
}
/* ============================================================
MESH HERO — wireframe polyhedron (WebGL) beside the heading.
Canvas uses mix-blend-mode:screen so the black clear colour drops
out and only the glowing wireframe shows over the page background.
============================================================ */
.page-hero--mesh {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
gap: 40px;
}
.page-hero--mesh .page-hero-copy { position: relative; z-index: 2; }
.hero-mesh-wrap {
position: relative;
align-self: center;
justify-self: center;
width: min(40vw, 520px);
aspect-ratio: 1 / 1;
pointer-events: none;
}
.hero-mesh {
width: 100%;
height: 100%;
display: block;
mix-blend-mode: screen;
pointer-events: auto;
cursor: pointer;
}
@media (max-width: 1000px) {
.page-hero--mesh {
grid-template-columns: 1fr;
gap: 8px;
}
.page-hero--mesh .page-hero-copy { order: 2; }
.hero-mesh-wrap {
order: 1;
width: min(70vw, 360px);
margin-bottom: 8px;
}
}
/* ============================================================
DOTTED-SURFACE HERO — undulating three.js point field behind the
contacts heading. Mounted into .hero-dots (transparent renderer),
masked at the edges so it dissolves into the page background.
============================================================ */
.page-hero--dots > *:not(.hero-dots) { position: relative; z-index: 1; }
.hero-dots {
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
opacity: .9;
-webkit-mask-image:
radial-gradient(120% 130% at 50% 30%, var(--bg) 35%, transparent 78%),
linear-gradient(180deg, transparent 0, var(--bg) 14%, var(--bg) 72%, transparent 100%);
mask-image:
radial-gradient(120% 130% at 50% 30%, var(--bg) 35%, transparent 78%),
linear-gradient(180deg, transparent 0, var(--bg) 14%, var(--bg) 72%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ============================================================
AURORA HERO — rising brand-coloured light beams
============================================================ */
.page-hero.has-aurora > *:not(.aurora-beams) { position: relative; z-index: 1; }
.aurora-beams {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
z-index: 0;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to top, var(--bg) 58%, transparent 100%);
mask-image: linear-gradient(to top, var(--bg) 58%, transparent 100%);
}
.aurora-floor {
position: absolute;
left: 50%; bottom: -34%;
width: 88%; height: 70%;
transform: translateX(-50%) scale(1);
background: radial-gradient(ellipse at center, rgba(0,137,207,.32), rgba(0,137,207,0) 70%);
filter: blur(54px);
opacity: .55;
animation: auroraFloor 9s ease-in-out infinite;
}
.aurora-stream { position: absolute; inset: 0; }
.aurora-beam {
position: absolute;
bottom: 0;
border-radius: 3px;
background: linear-gradient(to top, rgba(0,137,207,0), var(--blue) 45%, #8fd6ff);
box-shadow: 0 0 14px 1px rgba(0,137,207,.5);
opacity: 0;
animation-name: auroraRise, auroraFade, auroraSway;
animation-timing-function: ease-out, ease-in-out, ease-in-out;
animation-iteration-count: infinite, infinite, infinite;
will-change: transform, opacity;
}
.aurora-beam--red {
background: linear-gradient(to top, rgba(237,28,36,0), var(--red) 45%, #ff8b8f);
box-shadow: 0 0 14px 1px rgba(237,28,36,.45);
}
@keyframes auroraRise {
0% { transform: translateY(40%); }
100% { transform: translateY(-460%); }
}
@keyframes auroraFade {
0%, 100% { opacity: 0; }
12%, 70% { opacity: .85; }
}
@keyframes auroraSway {
0%, 100% { margin-left: 0; }
50% { margin-left: 9px; }
}
@keyframes auroraFloor {
0%, 100% { transform: translateX(-50%) scale(.9); opacity: .4; }
50% { transform: translateX(-50%) scale(1.08); opacity: .65; }
}
@media (prefers-reduced-motion: reduce){
.aurora-beam { animation: auroraFade 6s ease-in-out infinite; }
.aurora-floor { animation: none; }
}
.page-hero-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: .04em; /* обычный регистр: длинные крошки капсом плохо читаются (skills: all-caps-body) */
color: var(--muted);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 16px;
}
.page-hero-eyebrow::before {
content: '';
width: 40px; height: 1px;
background: rgba(var(--fg-rgb),.3);
}
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(56px, 9vw, 144px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -.04em;
margin: 0 0 32px;
}
.page-hero h1 em {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
color: var(--red);
}
.page-hero-lead {
max-width: 720px;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.5;
color: rgba(var(--fg-rgb),.75);
}
/* About hero with interactive 3D robot — full-bleed, text overlaid */
.page-hero--robot {
position: relative;
display: block;
padding: 0;
max-width: none;
min-height: 100vh;
overflow: hidden;
}
.page-hero--robot .about-robot-wrap {
position: absolute;
inset: 0;
margin: 0;
border: none;
border-radius: 0;
background: var(--bg);
}
.page-hero--robot .about-robot { width: 100%; height: 100%; }
/* left-to-right scrim so the overlaid text stays readable over the robot */
.page-hero--robot .about-robot-wrap::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 32%, rgba(0,0,0,.15) 58%, rgba(0,0,0,0) 78%);
}
.page-hero--robot .page-hero-copy {
position: relative;
z-index: 2;
pointer-events: none;
max-width: var(--maxw);
margin: 0 auto;
padding: 220px var(--pad) 120px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}
.page-hero--robot .page-hero-copy > * { pointer-events: auto; }
.page-hero--robot h1 { font-size: clamp(48px, 7vw, 110px); max-width: 14ch; }
.page-hero--robot .page-hero-lead { font-size: clamp(17px, 1.35vw, 21px); max-width: 540px; }
@media (max-width: 1000px){
.page-hero--robot .about-robot-wrap::after {
background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 100%);
}
.page-hero--robot .page-hero-copy { padding-top: 104px; min-height: 90vh; justify-content: flex-start; }
}
/* Inline page section — generic */
.page-section {
padding: 48px var(--bleed);
}
.page-section .section-title {
margin-bottom: 48px;
}
.page-section-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
.page-card {
padding: 32px;
border-radius: 24px;
background: rgba(var(--fg-rgb),.025);
border: 1px solid rgba(var(--fg-rgb),.08);
backdrop-filter: blur(12px);
transition: border-color .3s, box-shadow .3s, background .3s;
}
.page-card:hover {
border-color: rgba(var(--fg-rgb),.18);
box-shadow: 0 22px 56px -26px rgba(0,0,0,.8);
background: rgba(var(--fg-rgb),.045);
}
.page-card h3 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -.02em;
}
.page-card p {
font-size: var(--fs-body);
line-height: 1.5;
color: rgba(var(--fg-rgb),.65);
}
.page-card .num {
display: none; /* декоративная нумерация карточек убрана (skills: numbered-section-markers) */
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--red);
margin-bottom: 12px;
letter-spacing: .15em;
}
/* ---- Neon glass icons (sliced from icon pack) ---- */
.neon-ic {
display: inline-block;
height: 1.5em;
width: auto;
vertical-align: -0.42em;
margin-right: .32em;
filter: drop-shadow(0 0 6px rgba(46,124,255,.55));
}
.reestr-badge .neon-ic {
height: 32px;
vertical-align: middle;
margin-right: 4px;
filter: drop-shadow(0 0 11px rgba(46,124,255,.6));
}
.news-pill .neon-ic { height: 1.3em; vertical-align: -0.32em; }
.info-cell .neon-ic { height: 1.35em; vertical-align: -0.34em; margin-right: .28em; }
/* large decorative icon tucked into a card corner */
.card-deco {
position: absolute;
right: -20px;
bottom: -24px;
width: clamp(220px, 26vw, 360px);
height: clamp(220px, 26vw, 360px);
object-fit: contain;
opacity: .17;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 0 30px rgba(46,124,255,.5));
transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.page-card, .solution-card { position: relative; overflow: hidden; }
.page-card:hover .card-deco,
.solution-card:hover .card-deco { opacity: .32; transform: scale(1.07) translateY(-6px); }
.page-card > .num, .page-card > h3, .page-card > p,
.solution-card > .tag, .solution-card > h3, .solution-card > p, .solution-card > .more { position: relative; z-index: 1; }
@media (max-width: 720px){ .card-deco { width: clamp(150px, 42vw, 220px); height: clamp(150px, 42vw, 220px); } }
/* CTA block — used at end of pages */
.page-cta {
padding: 64px var(--bleed);
text-align: center;
}
.page-cta h2 {
font-family: var(--font-display);
font-size: clamp(48px, 7vw, 112px);
font-weight: 800;
letter-spacing: -.04em;
line-height: 0.95;
margin-bottom: 40px;
}
.page-cta h2 em {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
color: var(--red);
}
.page-cta p {
max-width: 600px;
margin: 0 auto 48px;
font-size: var(--fs-lead);
line-height: 1.5;
color: rgba(var(--fg-rgb),.7);
}
.page-cta-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
SHINY ACCENT CTA — animated conic-gradient border for the
"Заказать проект" / "Обсудить проект" buttons. Highlight
colour follows --accent (brand blue by default). Adapted
from the shiny-cta pattern onto our existing .btn-primary
and .nav-cta — no markup changes needed.
============================================================ */
@property --sb-angle { syntax: ""; initial-value: 0deg; inherits: false; }
@property --sb-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; }
@property --sb-percent { syntax: ""; initial-value: 5%; inherits: false; }
@property --sb-shine { syntax: ""; initial-value: var(--fg); inherits: false; }
@property --sb-highlight { syntax: ""; initial-value: #0089CF; inherits: true; }
@keyframes sb-angle { to { --sb-angle: 360deg; } }
@keyframes sb-shimmer { to { rotate: 360deg; } }
.btn-primary,
.nav-pill.nav-cta {
--sb-bg: var(--bg);
--sb-bg-subtle: var(--surf-2);
--sb-highlight: var(--accent, #0089CF);
--sb-shine-color: var(--fg);
--sb-highlight-subtle: color-mix(in srgb, var(--accent, #0089CF) 45%, var(--fg));
--sb-duration: 3s;
--sb-shadow-size: 2px;
--sb-transition: 800ms cubic-bezier(.25, 1, .5, 1);
isolation: isolate;
position: relative;
overflow: hidden;
color: var(--fg);
border: 1px solid transparent;
background:
linear-gradient(var(--sb-bg), var(--sb-bg)) padding-box,
conic-gradient(
from calc(var(--sb-angle) - var(--sb-angle-offset)),
transparent,
var(--sb-highlight) var(--sb-percent),
var(--sb-shine) calc(var(--sb-percent) * 2),
var(--sb-highlight) calc(var(--sb-percent) * 3),
transparent calc(var(--sb-percent) * 4)
) border-box;
box-shadow: inset 0 0 0 1px var(--sb-bg-subtle);
transition: var(--sb-transition), transform .35s cubic-bezier(.2,.7,.3,1);
transition-property: --sb-angle-offset, --sb-percent, --sb-shine, --sb-highlight, transform, box-shadow;
animation: sb-angle var(--sb-duration) linear infinite,
sb-angle calc(var(--sb-duration) / .4) linear infinite reverse paused;
animation-composition: add;
}
/* keep label + arrow above the decorative layers */
.btn-primary > *,
.nav-pill.nav-cta > * { position: relative; z-index: 2; }
/* decorative pseudo layers */
.btn-primary::before,
.btn-primary::after,
.nav-pill.nav-cta::before,
.nav-pill.nav-cta::after {
content: "";
pointer-events: none;
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
translate: -50% -50%;
z-index: -1;
}
/* dotted micro-pattern, masked by the rotating sweep */
.btn-primary::before,
.nav-pill.nav-cta::before {
--size: calc(100% - var(--sb-shadow-size) * 3);
--position: 2px;
--space: calc(var(--position) * 2);
width: var(--size);
height: var(--size);
background: radial-gradient(
circle at var(--position) var(--position),
var(--fg) calc(var(--position) / 4),
transparent 0
) padding-box;
background-size: var(--space) var(--space);
background-repeat: space;
-webkit-mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), var(--bg), transparent 10% 90%, var(--bg));
mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), var(--bg), transparent 10% 90%, var(--bg));
border-radius: inherit;
opacity: .4;
animation: sb-angle var(--sb-duration) linear infinite,
sb-angle calc(var(--sb-duration) / .4) linear infinite reverse paused;
animation-composition: add;
}
/* inner accent shimmer */
.btn-primary::after,
.nav-pill.nav-cta::after {
width: 100%;
aspect-ratio: 1;
background: linear-gradient(-50deg, transparent, var(--sb-highlight), transparent);
-webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, var(--bg));
mask-image: radial-gradient(circle at bottom, transparent 40%, var(--bg));
opacity: .45;
animation: sb-shimmer var(--sb-duration) linear infinite;
}
/* hover / focus — widen the highlight, swap the running blik from blue
to brand red, brighten the shine, lift + glow */
.btn-primary:is(:hover, :focus-visible),
.nav-pill.nav-cta:is(:hover, :focus-visible) {
--sb-percent: 20%;
--sb-angle-offset: 95deg;
--sb-highlight: var(--red, #ED1C24);
--sb-highlight-subtle: color-mix(in srgb, var(--red, #ED1C24) 45%, var(--fg));
--sb-shine: var(--sb-highlight-subtle);
background:
linear-gradient(var(--sb-bg), var(--sb-bg)) padding-box,
conic-gradient(
from calc(var(--sb-angle) - var(--sb-angle-offset)),
transparent,
var(--sb-highlight) var(--sb-percent),
var(--sb-shine) calc(var(--sb-percent) * 2),
var(--sb-highlight) calc(var(--sb-percent) * 3),
transparent calc(var(--sb-percent) * 4)
) border-box;
box-shadow: inset 0 0 0 1px var(--sb-bg-subtle),
0 0 0 1px color-mix(in srgb, var(--sb-highlight) 30%, transparent),
0 18px 50px -16px color-mix(in srgb, var(--sb-highlight) 60%, var(--bg));
transform: translateY(-1px);
}
.btn-primary:active,
.nav-pill.nav-cta:active { translate: 0 1px; }
/* run the rotation only while hovered/focused for a calmer idle state,
but keep a slow base rotation so the border always shimmers softly */
.btn-primary:is(:hover, :focus-visible),
.btn-primary:is(:hover, :focus-visible)::before,
.btn-primary:is(:hover, :focus-visible)::after,
.nav-pill.nav-cta:is(:hover, :focus-visible),
.nav-pill.nav-cta:is(:hover, :focus-visible)::before,
.nav-pill.nav-cta:is(:hover, :focus-visible)::after {
animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
.btn-primary,
.btn-primary::before,
.btn-primary::after,
.nav-pill.nav-cta,
.nav-pill.nav-cta::before,
.nav-pill.nav-cta::after { animation: none !important; }
}
/* On mobile there is no hover — pin EVERY shiny CTA to its red
highlighted state (dotted grid + red border blik + glow + running shimmer). */
@media (max-width: 900px){
.btn-primary,
.nav-pill.nav-cta {
--sb-percent: 20%;
--sb-angle-offset: 95deg;
--sb-highlight: var(--red, #ED1C24);
--sb-highlight-subtle: color-mix(in srgb, var(--red, #ED1C24) 45%, var(--fg));
--sb-shine: var(--sb-highlight-subtle);
box-shadow: inset 0 0 0 1px var(--sb-bg-subtle),
0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent),
0 14px 40px -14px color-mix(in srgb, var(--red) 55%, var(--bg));
}
.btn-primary,
.btn-primary::before,
.btn-primary::after,
.nav-pill.nav-cta,
.nav-pill.nav-cta::before,
.nav-pill.nav-cta::after { animation-play-state: running !important; }
}
/* ============================================================
CURSOR GLOW — spotlight that lights up a block's border in the
brand blue as the cursor passes (driven by --x/--y on :root from
cursor-glow.js). The glow is a dedicated masked .cglow child so it
never clobbers a card's own ::before/::after. Hover-only, subtle.
============================================================ */
[data-cglow] {
--cg-border: 1.6px;
--cg-size: 340;
--cg-spot: calc(var(--cg-size) * 1px);
}
/* the contacts form is a bare layout wrapper — give it a radius so its
glow ring is rounded like every other card */
.form-wrap { border-radius: 24px; }
.cglow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 3;
}
.cglow::before,
.cglow::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: var(--cg-border) solid transparent;
background-repeat: no-repeat;
-webkit-mask: linear-gradient(var(--fg) 0 0) padding-box, linear-gradient(var(--fg) 0 0) border-box;
mask: linear-gradient(var(--fg) 0 0) padding-box, linear-gradient(var(--fg) 0 0) border-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .4s ease;
}
/* coloured outer ring — brand blue. --lx/--ly are ELEMENT-LOCAL cursor
coords set by cursor-glow.js on the card's own pointermove — exact on
transformed/animated cards, unlike background-attachment:fixed. */
.cglow::before {
/* два слоя: мягкое свечение ВСЕГО контура (видно углы и дальние грани
даже на больших слайдах) + яркое пятно у курсора */
background-image: radial-gradient(
var(--cg-spot) var(--cg-spot) at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
hsl(201 100% 58% / .95), transparent 72%
),
linear-gradient(hsl(201 100% 58% / .28) 0 0);
filter: brightness(1.25);
}
/* white-hot core right under the cursor */
.cglow::after {
background-image: radial-gradient(
calc(var(--cg-spot) * 0.5) calc(var(--cg-spot) * 0.5) at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
hsl(0 0% 100% / .9), transparent 70%
);
}
[data-cglow]:hover > .cglow::before,
[data-cglow]:hover > .cglow::after { opacity: 1; }
/* LIGHT theme: frames keep a static hairline contour, and the hover
spotlight uses a deeper blue (a white-hot core is invisible on light). */
html[data-theme="light"] .cglow {
border: 1px solid rgba(var(--fg-rgb), .14);
}
html[data-theme="light"] .cglow::before {
background-image: radial-gradient(
var(--cg-spot) var(--cg-spot) at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
hsl(201 95% 44% / .9), transparent 72%
),
linear-gradient(hsl(201 95% 44% / .26) 0 0);
filter: none;
}
html[data-theme="light"] .cglow::after {
background-image: radial-gradient(
calc(var(--cg-spot) * 0.5) calc(var(--cg-spot) * 0.5) at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
hsl(201 100% 32% / .9), transparent 70%
);
}
@media (hover: none) { .cglow { display: none; } }
/* ============================================================
LOGO BLUR HALO tint — the outermost fixed blur layer also carries a
soft radial wash: darkens the blurred backdrop in the dark theme,
lightens it in the light theme, and fades to transparent at the
edges so the halo has no visible boundary.
============================================================ */
.logo-blur-layer--tint {
background: radial-gradient(ellipse closest-side at 50% 50%,
rgba(0,0,0,.3), rgba(0,0,0,.14) 55%, rgba(0,0,0,0) 82%);
}
html[data-theme="light"] .logo-blur-layer--tint { background: none; }
/* Mobile (≤900px): no blur — a single solid pill plate behind the whole
top bar, from the logo to the burger (positioned by theme-toggle.js). */
.logo-plate {
background: rgba(15,16,20,.82);
border: 1px solid rgba(255,255,255,.07);
}
html[data-theme="light"] .logo-plate {
background: rgba(248,247,243,.88);
border: 1px solid rgba(22,24,30,.08);
}
/* ============================================================
MAP (contacts) — dark theme inverts the Yandex widget to match
the dark page; light theme shows it natively light.
============================================================ */
.map-card {
aspect-ratio: 16/10;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(var(--fg-rgb),.12);
background: linear-gradient(135deg,#0a0c14,#0f1320);
position: relative;
}
.map-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
filter: grayscale(1) invert(.9) hue-rotate(180deg) contrast(.9);
}
html[data-theme="light"] .map-card { background: #e9ecef; }
html[data-theme="light"] .map-frame { filter: grayscale(.3) contrast(.97); }
@media (prefers-reduced-motion: reduce) {
.cglow::before, .cglow::after { transition: none; }
}
/* ============================================================
TYPEWRITER — hero reveal. Characters are hidden until typed;
a caret (sized in em, so it scales with the heading) blinks at the
current position. Font/size/markup are unchanged.
============================================================ */
.tw-typing .tw-char { visibility: hidden; }
.tw-typing .tw-char.tw-on { visibility: visible; }
.tw-cursor {
/* обычный inline (НЕ inline-block): вокруг атомарных инлайнов браузер
разрешает перенос строки, и пустая каретка «уезжала» на новую строку.
Пустой инлайн переносов не создаёт — палочка рисуется через ::after. */
display: inline;
position: relative;
}
.tw-cursor::after {
content: '';
position: absolute;
left: .02em;
bottom: -0.04em;
width: .07em;
height: .82em;
background: currentColor;
border-radius: 1px;
animation: tw-blink 1.05s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.tw-cursor { display: none; }
}
@media print {
.tw-typing .tw-char { visibility: visible !important; }
.tw-cursor { display: none !important; }
}
/* ============================================================
GRADIENT DOTS HERO — a hex dot-grid masking moving brand-colour
blobs (pure CSS, ported from a framer-motion component). The dot
"donuts" are painted in the page colour so the colour only shows
through the tiny holes; the blob layers drift to animate it.
============================================================ */
.page-hero--dotsgrad > *:not(.hero-dots-grad) { position: relative; z-index: 1; }
.hero-dots-grad {
--dg-bg: var(--bg);
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .85;
background-color: transparent;
background-image:
radial-gradient(circle at 50% 50%, transparent 1.5px, var(--dg-bg) 0 8px, transparent 8px),
radial-gradient(circle at 50% 50%, transparent 1.5px, var(--dg-bg) 0 8px, transparent 8px),
radial-gradient(circle at 50% 50%, #ED1C24, transparent 60%),
radial-gradient(circle at 50% 50%, #0089CF, transparent 60%),
radial-gradient(circle at 50% 50%, #5BC8FF, transparent 60%),
radial-gradient(ellipse at 50% 50%, #0089CF, transparent 60%);
background-size:
10px 17.32px,
10px 17.32px,
200% 200%,
200% 200%,
200% 200%,
200% 17.32px;
animation: heroDotsDrift 28s linear infinite;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 26%, var(--bg) 100%);
mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 26%, var(--bg) 100%);
}
@keyframes heroDotsDrift {
0% {
background-position:
0px 0px, 5px 8.66px,
800% 400%, 1000% -400%, -1200% -600%, 400% 17.32px;
}
100% {
background-position:
0px 0px, 5px 8.66px,
0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-dots-grad { animation: none; }
}
/* ============================================================
CUBE LOADER — 3D stacking-boxes animation (Aaron Iker's "boxes"),
scoped under .cube-loader and recoloured to brand blue. Used as the
MVNO product visual. Isometric (no perspective) so it survives the
3D ring transforms.
============================================================ */
.cube-loader-stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(120% 90% at 50% 38%, rgba(0,137,207,.18), transparent 60%),
var(--surf-1);
overflow: hidden;
border-radius: inherit;
}
.cube-loader {
--duration: 3s;
--primary: #0089CF;
--primary-light: #5BC8FF;
--primary-rgba: rgba(0,137,207,0);
--cl-bg: var(--surf-1);
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: scale(.7);
}
.cube-loader:before,
.cube-loader:after {
--r: 20.5deg;
content: "";
width: 320px;
height: 140px;
position: absolute;
right: 32%;
bottom: -11px;
background: var(--cl-bg);
transform: translateZ(200px) rotate(var(--r));
animation: mask var(--duration) linear forwards infinite;
}
.cube-loader:after { --r: -20.5deg; right: auto; left: 32%; }
.cube-loader .ground {
position: absolute;
left: -50px;
bottom: -120px;
transform-style: preserve-3d;
transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}
.cube-loader .ground div {
transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
width: 200px;
height: 200px;
background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
transform-style: preserve-3d;
animation: ground var(--duration) linear forwards infinite;
}
.cube-loader .ground div:before,
.cube-loader .ground div:after {
--rx: 90deg; --ry: 0deg; --x: 44px; --y: 162px; --z: -50px;
content: "";
width: 156px;
height: 300px;
opacity: 0;
background: linear-gradient(var(--primary), var(--primary-rgba));
position: absolute;
transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
animation: ground-shine var(--duration) linear forwards infinite;
}
.cube-loader .ground div:after { --rx: 90deg; --ry: 90deg; --x: 0; --y: 177px; --z: 150px; }
.cube-loader .box {
--x: 0; --y: 0;
position: absolute;
animation: var(--duration) linear forwards infinite;
transform: translate(var(--x), var(--y));
}
.cube-loader .box div {
background-color: var(--primary);
width: 48px;
height: 48px;
position: relative;
transform-style: preserve-3d;
animation: var(--duration) ease forwards infinite;
transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}
.cube-loader .box div:before,
.cube-loader .box div:after {
--rx: 90deg; --ry: 0deg; --z: 24px; --y: -24px; --x: 0;
content: "";
position: absolute;
background-color: inherit;
width: inherit;
height: inherit;
transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
filter: brightness(var(--b, 1.2));
}
.cube-loader .box div:after { --rx: 0deg; --ry: 90deg; --x: 24px; --y: 0; --b: 1.4; }
.cube-loader .box.box0 { --x: -220px; --y: -120px; left: 58px; top: 108px; }
.cube-loader .box.box1 { --x: -260px; --y: 120px; left: 25px; top: 120px; }
.cube-loader .box.box2 { --x: 120px; --y: -190px; left: 58px; top: 64px; }
.cube-loader .box.box3 { --x: 280px; --y: -40px; left: 91px; top: 120px; }
.cube-loader .box.box4 { --x: 60px; --y: 200px; left: 58px; top: 132px; }
.cube-loader .box.box5 { --x: -220px; --y: -120px; left: 25px; top: 76px; }
.cube-loader .box.box6 { --x: -260px; --y: 120px; left: 91px; top: 76px; }
.cube-loader .box.box7 { --x: -240px; --y: 200px; left: 58px; top: 87px; }
.cube-loader .box0 { animation-name: box-move0; }
.cube-loader .box0 div { animation-name: box-scale0; }
.cube-loader .box1 { animation-name: box-move1; }
.cube-loader .box1 div { animation-name: box-scale1; }
.cube-loader .box2 { animation-name: box-move2; }
.cube-loader .box2 div { animation-name: box-scale2; }
.cube-loader .box3 { animation-name: box-move3; }
.cube-loader .box3 div { animation-name: box-scale3; }
.cube-loader .box4 { animation-name: box-move4; }
.cube-loader .box4 div { animation-name: box-scale4; }
.cube-loader .box5 { animation-name: box-move5; }
.cube-loader .box5 div { animation-name: box-scale5; }
.cube-loader .box6 { animation-name: box-move6; }
.cube-loader .box6 div { animation-name: box-scale6; }
.cube-loader .box7 { animation-name: box-move7; }
.cube-loader .box7 div { animation-name: box-scale7; }
@keyframes box-move0 { 12%{transform:translate(var(--x),var(--y));} 25%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale0 { 6%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 14%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move1 { 16%{transform:translate(var(--x),var(--y));} 29%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale1 { 10%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 18%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move2 { 20%{transform:translate(var(--x),var(--y));} 33%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale2 { 14%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 22%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move3 { 24%{transform:translate(var(--x),var(--y));} 37%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale3 { 18%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 26%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move4 { 28%{transform:translate(var(--x),var(--y));} 41%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale4 { 22%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 30%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move5 { 32%{transform:translate(var(--x),var(--y));} 45%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale5 { 26%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 34%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move6 { 36%{transform:translate(var(--x),var(--y));} 49%,52%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale6 { 30%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 38%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes box-move7 { 40%{transform:translate(var(--x),var(--y));} 52%,53%{transform:translate(0,0);} 80%{transform:translate(0,-32px);} 90%,100%{transform:translate(0,188px);} }
@keyframes box-scale7 { 34%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);} 42%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);} }
@keyframes ground {
0%,65% { transform: rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(0); }
75%,90% { transform: rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(1); }
100% { transform: rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(0); }
}
@keyframes ground-shine { 0%,70%{opacity:0;} 75%,87%{opacity:.2;} 100%{opacity:0;} }
@keyframes mask { 0%,65%{opacity:0;} 66%,100%{opacity:1;} }
@media (prefers-reduced-motion: reduce) {
.cube-loader .box, .cube-loader .box div, .cube-loader .ground div,
.cube-loader:before, .cube-loader:after { animation: none; }
.cube-loader .box div { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
/* ============================================================
THEME TOGGLE — floating light/dark switch (theme-toggle.js)
============================================================ */
#theme-toggle {
position: fixed;
left: 22px;
bottom: 22px;
z-index: 9000;
padding: 0;
border: none;
background: none;
-webkit-tap-highlight-color: transparent;
opacity: 1;
transition: opacity .4s ease, transform .25s ease;
}
#theme-toggle:hover { transform: translateY(-2px); }
html.booting #theme-toggle { opacity: 0; pointer-events: none; }
#theme-toggle .tt-track {
position: relative;
display: inline-flex;
align-items: center;
width: 64px;
height: 32px;
border-radius: 999px;
background: rgba(var(--fg-rgb), .07);
border: 1px solid rgba(var(--fg-rgb), .14);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 10px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
transition: background .35s ease, border-color .35s ease;
}
#theme-toggle .tt-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
transition: color .35s ease, opacity .35s ease;
}
/* Иконки поверх кноба (z-index 2 > 1): активная тема видна НА белом кружке
контрастным цветом и отцентрована под ним; неактивная приглушена на треке. */
#theme-toggle .tt-icon { z-index: 2; }
#theme-toggle .tt-moon { left: 8.5px; color: rgba(var(--fg-rgb), .35); }
#theme-toggle .tt-sun { right: 8.5px; color: rgba(var(--fg-rgb), .4); }
#theme-toggle .tt-track:not(.tt-on) .tt-moon { color: #16181d; } /* тёмная тема: тёмная луна на белом кнобе */
#theme-toggle .tt-track.tt-on .tt-sun { color: #f5a623; } /* светлая: оранжевое солнце на кнобе */
#theme-toggle .tt-knob {
position: absolute;
z-index: 1;
top: 50%;
left: 3px;
width: 26px;
height: 26px;
border-radius: 50%;
transform: translateY(-50%);
background: linear-gradient(180deg, #fff, #d7d7da);
box-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
transition: transform .32s var(--ease-out-expo), background .35s ease;
}
#theme-toggle .tt-track.tt-on .tt-knob {
transform: translate(32px, -50%);
background: linear-gradient(180deg, #fff, #eceaf2);
}
@media (max-width: 640px) {
#theme-toggle { left: 16px; bottom: 16px; }
}
/* ============================================================
LIGHT-THEME PATCH — elements that sit on intentionally dark
surfaces (dark gradients, dark glass, white-silhouette logos)
and so must keep light treatment regardless of page theme.
============================================================ */
/* Product ring panels: in LIGHT theme the info bar uses a WHITE wash
gradient with dark text (matches the case-card galleries). */
html[data-theme="light"] .is-stack .panel-info {
background: linear-gradient(to top,
#ffffff 24%,
rgba(255,255,255,.92) 46%,
rgba(255,255,255,.62) 68%,
rgba(255,255,255,0) 100%);
}
html[data-theme="light"] .is-stack .panel-info,
html[data-theme="light"] .is-stack .panel-info .panel-title,
html[data-theme="light"] .is-stack .panel-info .panel-num,
html[data-theme="light"] .is-stack .panel-info .panel-cta { color: #16181d !important; }
html[data-theme="light"] .is-stack .panel-info .panel-desc { color: rgba(22,24,30,.74) !important; }
html[data-theme="light"] .is-stack .panel-info .panel-cta { border-color: rgba(22,24,30,.28) !important; }
html[data-theme="light"] .is-stack .panel-info .panel-chips span {
color: rgba(22,24,30,.78) !important;
border-color: rgba(22,24,30,.2) !important;
}
/* LangBucket: the falling chip + bin mouth read as a dark void on a
light page — give the chip a light glass and lift the interior. */
html[data-theme="light"] .lang-chip {
background: rgba(255,255,255,.92);
border-color: rgba(0,137,207,.4);
box-shadow: 0 10px 24px -18px rgba(120,128,150,.4), inset 0 1px 0 rgba(255,255,255,.85);
}
/* The dot's glow uses currentColor — which is dark text on the light chip,
so it reads as a black halo. Drop the glow in light theme. */
html[data-theme="light"] .lang-chip-dot { box-shadow: none; }
/* Gallery number badge is a dark glass pill (good on dark) — flip to a
light glass with dark text so it doesn't look out of place on the light page. */
html[data-theme="light"] .panel-media-badge {
background: rgba(255,255,255,.82);
color: rgba(22,24,30,.72);
border-color: rgba(22,24,30,.12);
}
html[data-theme="light"] #lbMouth stop:first-child { stop-color: #cfe2f0; }
html[data-theme="light"] #lbMouth stop:last-child { stop-color: #a9cbe5; }
/* Brand marquee logos are forced to a white silhouette for the dark
page — flip them to a dark silhouette on the light page. */
html[data-theme="light"] .brand-logo img { filter: brightness(0); opacity: .62; }
html[data-theme="light"] .brand-logo:hover img { opacity: .9; }
/* ============================================================
TWEAKABLE TEXT HIERARCHY (light theme) — maps the three
Tweaks colour controls to real roles:
primary → --fg / --fg-rgb (headings + fg-tinted copy)
secondary → --muted (body copy)
tertiary → --fg-faint (eyebrows, mono labels, captions)
============================================================ */
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .about-text p,
html[data-theme="light"] .panel-card--phones .panel-desc,
html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .mintsifra-block { color: var(--muted); }
html[data-theme="light"] .section-eyebrow,
html[data-theme="light"] .footer-col h3,
html[data-theme="light"] .panel-num,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .mintsifra-block-label { color: var(--fg-faint); }
/* ============================================================
LIGHT THEME — FLATTEN: no glow rings, no neon drop-shadow
filters, no heavy black shadows, black cursor dot, no cursor
spotlight. (Requested.)
============================================================ */
/* 1 — kill decorative glow layers (but NOT .cglow — the card contour +
hover spotlight stays in both themes; light tuning lives next to .cglow) */
html[data-theme="light"] .cursor-glow,
html[data-theme="light"] .lang-bucket-glow { display: none !important; }
/* 2 — black ring cursor instead of the blend-inverted white one */
html[data-theme="light"] .cursor-dot {
mix-blend-mode: normal;
border-color: #000;
background: rgba(0,0,0,.06);
}
html[data-theme="light"] .cursor-dot--active {
background: rgba(0,0,0,.12);
border-color: #000;
}
html[data-theme="light"] .cursor-dot--down { background: rgba(0,0,0,.22); }
/* 3 — remove neon drop-shadow filters */
html[data-theme="light"] .hero-bg-glass img,
html[data-theme="light"] .reestr-badge .neon-ic,
html[data-theme="light"] .news-pill .neon-ic,
html[data-theme="light"] .neon-ic,
html[data-theme="light"] .card-deco { filter: none !important; }
/* 4 — no black shadows and no glow shadows on any surface/hover */
html[data-theme="light"] .case-card:hover,
html[data-theme="light"] .page-card:hover,
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .solution-card:hover {
box-shadow: 0 14px 34px -26px rgba(120,128,150,.4);
}
html[data-theme="light"] .brands-horizon,
html[data-theme="light"] .aurora-bar { box-shadow: none !important; }
/* 4b — remove ALL remaining glow effects in light theme */
html[data-theme="light"] .section-eyebrow::before,
html[data-theme="light"] .hero-eyebrow::before { box-shadow: none !important; }
html[data-theme="light"] .reestr-badge { box-shadow: none !important; }
/* 4c — the "crescent": brands horizon arc + its glow are a dark-theme
decoration that reads as a strange dome on a light page. Drop it. */
html[data-theme="light"] .brands-stage::before { opacity: 0 !important; }
html[data-theme="light"] .brands-arc,
html[data-theme="light"] .brands-horizon { display: none !important; }
/* 4e — aurora rising beams: keep the lines but drop the neon glow on a light page */
html[data-theme="light"] .aurora-beam,
html[data-theme="light"] .aurora-beam--red { box-shadow: none !important; }
html[data-theme="light"] .aurora-floor { opacity: .26 !important; filter: blur(62px); }
/* 4f — wireframe mesh (IT page): the black box + white edges become a
transparent canvas with dark edges (driven by geometric-mesh.js). Turn off
the screen blend so the dark lines aren't keyed out on the light page. */
html[data-theme="light"] .hero-mesh { mix-blend-mode: normal; }
/* 4g — robot / network-graph stage: drop the strong blue blob; the animated
graph (now theme-aware) is the visual instead. */
html[data-theme="light"] .robot-stage::before {
background: radial-gradient(46% 46% at 50% 50%, rgba(0,137,207,.08), transparent 72%) !important;
}
/* 4h — eco-orbit pills: dark glass → light glass on a light page (dark text
on a dark pill was unreadable). */
html[data-theme="light"] .eco-chip {
background: rgba(255,255,255,.82);
border-color: rgba(22,24,30,.12);
}
html[data-theme="light"] .eco-chip:hover { background: rgba(0,137,207,.10); border-color: var(--blue); }
html[data-theme="light"] .eco-orbit-on .eco-chip {
box-shadow: 0 12px 30px -16px rgba(120,128,150,.5);
}
/* light-theme hub: clean white glass orb with a faint brand sheen instead
of the dark gradient ball. */
html[data-theme="light"] .eco-hub {
background:
radial-gradient(130% 130% at 30% 22%, rgba(255,255,255,.97), rgba(255,255,255,.55) 40%, transparent 62%),
radial-gradient(circle at 50% 62%, rgba(237,28,36,.16), rgba(0,137,207,.18) 54%, rgba(255,255,255,.92) 100%);
border-color: rgba(22,24,30,.10);
box-shadow:
0 34px 70px -34px rgba(0,137,207,.42),
inset 0 2px 22px rgba(255,255,255,.95),
inset 0 -22px 48px rgba(0,137,207,.07);
}
html[data-theme="light"] .eco-hub b { color: var(--fg); }
/* 4i — screenshot gallery (screens-rail): the browser/phone frame chrome is
dark by default; give it a light shell in light theme so side cards aren't
dark blurred boxes. */
html[data-theme="light"] .srail-desk {
background: #ffffff;
border-color: rgba(22,24,30,.12);
box-shadow: none;
}
html[data-theme="light"] .srail-desk-bar {
background: #ecebe4;
border-bottom-color: rgba(22,24,30,.08);
}
html[data-theme="light"] .srail-desk-bar span { background: rgba(22,24,30,.20); }
html[data-theme="light"] .srail-phone {
background: linear-gradient(160deg, #e9e7df, #d9d7cf 60%, #e9e7df);
border-color: rgba(22,24,30,.14);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
/* Gallery caption / counter / arrows are white by default — flip to the
page's dark text in light theme. */
html[data-theme="light"] .srail-cap { color: var(--fg); }
html[data-theme="light"] .srail-count { color: rgba(22,24,30,.5); }
html[data-theme="light"] .srail-btn {
border-color: rgba(22,24,30,.22);
background: rgba(22,24,30,.03);
color: rgba(22,24,30,.7);
}
html[data-theme="light"] .srail-btn:hover { background: rgba(22,24,30,.08); color: var(--fg); }
/* 4d — nav dropdown menu: light glass + dark text in light theme */
html[data-theme="light"] .nav-drop {
background: rgba(255,255,255,.92);
border-color: rgba(22,24,30,.1);
box-shadow: 0 24px 60px -30px rgba(120,128,150,.5);
}
html[data-theme="light"] .nav-drop a { color: var(--fg); }
html[data-theme="light"] .nav-drop a:hover { background: rgba(22,24,30,.06); color: var(--fg); }
html[data-theme="light"] .nav-drop a .sub { color: var(--muted); }
/* 5 — GALLERY / CASE CARDS: white wash gradient + black text in light theme */
html[data-theme="light"] .case-card-overlay {
background: linear-gradient(180deg,
rgba(255,255,255,.30) 0%,
rgba(255,255,255,.50) 30%,
rgba(255,255,255,.82) 56%,
rgba(255,255,255,.96) 80%,
#ffffff 100%);
}
html[data-theme="light"] .case-card-bg img { filter: brightness(1.14) saturate(.92); }
html[data-theme="light"] .case-card,
html[data-theme="light"] .case-card *,
html[data-theme="light"] .case-card-content,
html[data-theme="light"] .case-card-title,
html[data-theme="light"] .case-card-tag { color: #16181d !important; }
html[data-theme="light"] .case-card .case-card-desc { color: rgba(22,24,30,.74) !important; }
html[data-theme="light"] .case-card .case-card-meta-item .label { color: rgba(22,24,30,.55) !important; }
html[data-theme="light"] .case-card-tag { border-color: rgba(22,24,30,.28) !important; }
/* 6 — FOOTER: dark, readable legal text over the calmed light dither */
html[data-theme="light"] .footer-dither { opacity: .3 !important; }
html[data-theme="light"] .footer-legal,
html[data-theme="light"] .footer-legal span { color: rgba(22,24,30,.72) !important; }
/* 7 — WORDMARK: white letters are invisible on light bg, so swap to the
black-letter variant (coloured swoosh kept) in the nav and footer. */
html[data-theme="light"] .nav-logo img,
html[data-theme="light"] .footer-brand img {
content: url(assets/fig/logo-wordmark-dark.svg);
}