/* ═══════════════════════════════════════════════════════════════════════
MAGIC MODE TOGGLE — visual reskin system for index.html
Phase 1: button only. Themes (Matrix/Island/Studio) added in next phases.
═══════════════════════════════════════════════════════════════════════ */
/* ─────── Magic button: live, breathing, magnetic ─────── */
.magic-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 36px;
padding: 0;
border: 0;
border-radius: 10px;
flex-shrink: 0;
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
/* Bright magical blue with subtle dimensional gradient */
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%);
color: #fff;
/* Layered glow + inner highlight */
box-shadow:
0 0 0 0 rgba(0, 191, 255, 0.55),
0 4px 14px -2px rgba(0, 191, 255, 0.45),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset;
animation: magic-pulse 2.4s ease-in-out infinite;
transition:
box-shadow 240ms ease-out,
filter 200ms ease;
will-change: transform, box-shadow, filter;
}
/* Idle pulse: gentle scale + glow ring */
@keyframes magic-pulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 0 0 rgba(0, 191, 255, 0.55),
0 4px 14px -2px rgba(0, 191, 255, 0.45),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset;
filter: brightness(1);
}
50% {
transform: scale(1.045);
box-shadow:
0 0 0 7px rgba(0, 191, 255, 0),
0 7px 22px -2px rgba(0, 191, 255, 0.6),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset;
filter: brightness(1.08);
}
}
.magic-toggle:hover {
animation-duration: 1.4s;
filter: brightness(1.12) saturate(1.15);
}
.magic-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.magic-toggle:active {
transform: scale(0.96);
}
.magic-toggle svg {
width: 20px;
height: 20px;
display: block;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85));
pointer-events: none;
}
/* ─────── Idle sparks drifting around the button ─────── */
.magic-toggle::before,
.magic-toggle::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 4px #fff, 0 0 8px rgba(120, 220, 255, 0.9);
opacity: 0;
pointer-events: none;
}
.magic-toggle::before {
top: 2px;
left: 28%;
animation: magic-spark-a 3.8s ease-in-out infinite;
}
.magic-toggle::after {
bottom: 2px;
right: 22%;
animation: magic-spark-b 4.6s ease-in-out infinite 0.7s;
}
@keyframes magic-spark-a {
0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
20% { opacity: 0.95; transform: translate(-7px, -10px) scale(1); }
55% { opacity: 0.4; transform: translate(-13px, -18px) scale(0.55); }
70% { opacity: 0; }
}
@keyframes magic-spark-b {
0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
25% { opacity: 0.9; transform: translate(8px, 9px) scale(1); }
60% { opacity: 0.35; transform: translate(15px, 16px) scale(0.5); }
75% { opacity: 0; }
}
/* ─────── Charge-up burst (200ms before transition) ─────── */
.magic-toggle.is-charging {
animation: magic-charge 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes magic-charge {
0% {
transform: scale(1.045);
filter: brightness(1.08);
}
55% {
transform: scale(1.20);
filter: brightness(1.6) saturate(1.4);
box-shadow:
0 0 0 14px rgba(0, 191, 255, 0),
0 0 32px 10px rgba(0, 191, 255, 0.95),
0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
100% {
transform: scale(0.55);
opacity: 0;
filter: brightness(2) blur(1px);
}
}
/* ─────── Hidden during the heavy theatre ─────── */
.magic-toggle.is-hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.4);
animation: none;
}
/* ─────── Reappear with welcome bounce ─────── */
.magic-toggle.is-arriving {
animation: magic-arrive 720ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes magic-arrive {
0% {
transform: scale(0.35);
opacity: 0;
filter: brightness(2.2) blur(3px);
}
55% {
transform: scale(1.08);
opacity: 1;
filter: brightness(1.35) blur(0);
}
100% {
transform: scale(1);
opacity: 1;
filter: brightness(1);
}
}
/* ─────── Aura tint adapts to theme (button itself stays blue) ─────── */
.mode-matrix .magic-toggle {
box-shadow:
0 0 0 0 rgba(0, 255, 95, 0.45),
0 4px 14px -2px rgba(0, 255, 95, 0.40),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset;
}
.mode-island .magic-toggle {
box-shadow:
0 0 0 0 rgba(255, 200, 120, 0.45),
0 4px 14px -2px rgba(255, 200, 120, 0.45),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset;
}
.mode-studio .magic-toggle {
box-shadow:
0 0 0 0 rgba(220, 235, 255, 0.55),
0 4px 14px -2px rgba(220, 235, 255, 0.5),
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 -1px 0 rgba(0, 60, 110, 0.4) inset;
}
/* ─────── Block all clicks during theatrical transition ─────── */
html.is-transitioning,
html.is-transitioning body {
pointer-events: none;
}
/* (v3.6 2026-05-13) Magic-toggle stays clickable during transitions.
The is-transitioning JS lock already debounces real clicks correctly,
so the CSS pointer-events:none lockout is removed — user can tap
through and queue the next skin even mid-theatre.
ORIGINAL: html.is-transitioning .magic-toggle { pointer-events: none; } */
html.is-transitioning .magic-toggle {
pointer-events: auto;
}
/* Mobile: nudge the magic button so it stays comfortably tappable */
@media (max-width: 640px) {
.magic-toggle {
width: 42px;
height: 34px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
THEME OVERLAY CANVAS — full-screen scrim used by all theatrical transitions
═══════════════════════════════════════════════════════════════════════ */
.mode-overlay {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
opacity: 0;
transition: opacity 400ms linear;
background: #000;
will-change: opacity;
}
.mode-overlay.is-visible { opacity: 1; }
.mode-overlay canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Magic button stays above any overlay */
.magic-toggle { z-index: 9999; }
/* ─── MODE INDICATOR CHIP — sequential position + name. Always visible
directly under the magic-toggle. Updates inside transitionTo() when
the target class is applied so user can predict each click. ─── */
.mode-indicator {
position: fixed;
top: calc(1.4rem + 36px + 0.5rem); /* below the 36px magic-button */
right: 1.4rem;
z-index: 9998;
display: inline-flex;
gap: 0.45em;
align-items: center;
padding: 5px 9px;
background: rgba(10, 10, 12, 0.7);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 2px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
white-space: nowrap;
transition: color 320ms ease, border-color 320ms ease, background 320ms ease;
}
.mode-indicator .num { color: rgba(255, 255, 255, 0.42); font-weight: 400; }
.mode-indicator .sep { color: rgba(255, 255, 255, 0.22); }
.mode-indicator .name { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
/* Per-mode tints — chip adopts the active palette */
html.mode-noir .mode-indicator {
background: rgba(10, 9, 8, 0.78);
border-color: rgba(184, 152, 92, 0.35);
}
html.mode-noir .mode-indicator .num { color: rgba(184, 152, 92, 0.55); }
html.mode-noir .mode-indicator .sep { color: rgba(184, 152, 92, 0.4); }
html.mode-noir .mode-indicator .name { color: #C9AB6E; }
html.mode-vault .mode-indicator {
background: rgba(0, 0, 0, 0.78);
border-color: rgba(0, 200, 180, 0.35);
}
html.mode-vault .mode-indicator .num { color: rgba(0, 200, 180, 0.55); }
html.mode-vault .mode-indicator .sep { color: rgba(0, 200, 180, 0.4); }
html.mode-vault .mode-indicator .name { color: #4FD9C9; }
html.mode-kinetic .mode-indicator {
background: rgba(0, 0, 0, 0.78);
border-color: rgba(73, 197, 182, 0.35);
}
html.mode-kinetic .mode-indicator .num { color: rgba(73, 197, 182, 0.55); }
html.mode-kinetic .mode-indicator .sep { color: rgba(73, 197, 182, 0.4); }
html.mode-kinetic .mode-indicator .name { color: #FF9398; }
html.mode-matrix .mode-indicator {
background: rgba(0, 5, 0, 0.8);
border-color: rgba(0, 255, 65, 0.32);
}
html.mode-matrix .mode-indicator .num { color: rgba(0, 255, 65, 0.55); }
html.mode-matrix .mode-indicator .sep { color: rgba(0, 255, 65, 0.35); }
html.mode-matrix .mode-indicator .name { color: #5BFF7E; }
html.mode-island .mode-indicator {
background: rgba(251, 239, 216, 0.82);
border-color: rgba(201, 137, 45, 0.4);
color: #2D1F12;
}
html.mode-island .mode-indicator .num { color: rgba(45, 31, 18, 0.55); }
html.mode-island .mode-indicator .sep { color: rgba(201, 137, 45, 0.55); }
html.mode-island .mode-indicator .name { color: #C9892D; }
html.mode-studio .mode-indicator {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(45, 31, 18, 0.3);
}
html.mode-studio .mode-indicator .num { color: rgba(45, 31, 18, 0.5); }
html.mode-studio .mode-indicator .sep { color: rgba(45, 31, 18, 0.3); }
html.mode-studio .mode-indicator .name { color: #2D1F12; }
/* Subtle pulse while a transition is locked (during charging burst) */
html.is-transitioning .mode-indicator {
transform: scale(1.04);
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 320ms ease, border-color 320ms ease, background 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
html.is-transitioning .mode-indicator { transform: none; }
}
@keyframes matrix-decode {
0% { text-shadow: 0 0 8px #00FF41, -2px 0 0 rgba(255,255,255,0.4); transform: translateX(-1px); }
20% { text-shadow: 0 0 14px #00FF41, 2px 0 0 rgba(255,255,255,0.4); transform: translateX(1px); }
40% { text-shadow: 0 0 10px #00FF41, -1px 0 0 rgba(0,255,65,0.6); transform: translateX(-0.5px); }
60% { text-shadow: 0 0 16px #00FF41, 1px 0 0 rgba(255,255,255,0.5); transform: translateX(0.5px); }
100% { text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); transform: none; }
}
@keyframes matrix-glitch {
0% { transform: translateX(0); filter: hue-rotate(0deg); }
20% { transform: translateX(-3px); filter: hue-rotate(-12deg) saturate(1.4); }
40% { transform: translateX(2px); filter: hue-rotate(8deg); }
60% { transform: translateX(-2px); filter: hue-rotate(-6deg); }
80% { transform: translateX(1px); }
100% { transform: none; filter: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
ISLAND MODE — warm tropical reskin via design tokens
Photo backdrop with blur+fog, dark-cocoa text, gold/azure accents.
═══════════════════════════════════════════════════════════════════════ */
html.mode-island {
--bg: #FBEFD8; /* warm sand fallback */
--surface: #FFFFFF; /* card surface — white */
--surface-2: #FFF7E6;
--border-dark: #E8D5A8;
--cream: #2D1F12; /* primary text — dark cocoa */
--mute: #8B6F47;
--copper: #C9892D; /* gold accent (kept warm) */
--sand: #E5B868;
--rust: #C66A3A; /* terracotta */
}
html.mode-island body {
font-family: 'Manrope', system-ui, sans-serif !important;
font-weight: 400;
line-height: 1.65;
letter-spacing: -0.005em;
color: var(--cream);
/* Tropical photo backdrop with blur+haze.
Image is from Unsplash CDN (free license, fast cached) and blurred so
it never competes with content — pure atmosphere. */
background:
/* Top haze: warm white-out fading into the scene */
linear-gradient(180deg,
rgba(255, 244, 220, 0.55) 0%,
rgba(255, 240, 210, 0.30) 30%,
rgba(255, 235, 200, 0.55) 100%),
url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=85') center/cover fixed,
#FBEFD8 !important;
background-blend-mode: lighten, normal;
}
/* The photo itself is sharp from Unsplash; we soften it via a fixed pseudo
element with backdrop-filter so cards on top stay legible. */
html.mode-island body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
backdrop-filter: blur(14px) saturate(0.92) brightness(1.08);
-webkit-backdrop-filter: blur(14px) saturate(0.92) brightness(1.08);
background: rgba(255, 240, 215, 0.35);
pointer-events: none;
}
/* Headlines — soft, generous */
html.mode-island h1, html.mode-island h2, html.mode-island h3 {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
text-shadow: 0 2px 24px rgba(255, 240, 200, 0.65);
}
/* Existing nav surfaces become translucent over the photo */
html.mode-island .nav-bar,
html.mode-island .hero,
html.mode-island section {
background: transparent !important;
}
/* All section eyebrows etc. lose the [bracket] hard look — softer */
html.mode-island .section-eyebrow::before,
html.mode-island .section-eyebrow::after {
color: var(--copper);
}
/* Cards — white, rounded, soft shadow with warm glow */
html.mode-island .btn-chip,
html.mode-island .btn-chip-copper {
background: rgba(255, 255, 255, 0.85) !important;
color: #3D2817 !important;
border-color: rgba(201, 137, 45, 0.35) !important;
border-radius: 999px !important;
text-shadow: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 4px 18px -4px rgba(80, 50, 20, 0.12),
0 1px 0 rgba(255, 255, 255, 0.8) inset;
transition: transform 220ms ease, box-shadow 280ms ease, background 220ms ease;
}
html.mode-island .btn-chip:hover,
html.mode-island .btn-chip-copper:hover {
transform: translateY(-2px);
background: #fff !important;
box-shadow:
0 12px 28px -8px rgba(201, 137, 45, 0.4),
0 0 0 1px rgba(201, 137, 45, 0.45) inset;
}
html.mode-island .btn-primary {
background: linear-gradient(135deg, #E8B85C 0%, #C9892D 50%, #B6701C 100%) !important;
color: #2D1F12 !important;
border: 0 !important;
border-radius: 999px !important;
text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
box-shadow:
0 8px 22px -6px rgba(201, 137, 45, 0.55),
0 1px 0 rgba(255, 255, 255, 0.5) inset;
transition: transform 200ms ease, box-shadow 280ms ease, filter 200ms ease;
}
html.mode-island .btn-primary:hover {
transform: translateY(-2px) scale(1.02);
filter: brightness(1.08);
box-shadow:
0 0 0 6px rgba(229, 184, 104, 0.18),
0 14px 32px -6px rgba(201, 137, 45, 0.65),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
/* Lang toggle: warm sand */
html.mode-island .lang-toggle button { color: rgba(60, 40, 20, 0.5); }
html.mode-island .lang-toggle button:hover,
html.mode-island .lang-toggle button.active {
color: #B6701C;
border-bottom-color: #B6701C;
}
/* ::selection */
html.mode-island ::selection {
background: rgba(201, 137, 45, 0.35);
color: #2D1F12;
text-shadow: none;
}
/* Cursor — warm sun pointer (small golden glow circle) */
html.mode-island,
html.mode-island body {
cursor: url("data:image/svg+xml;utf8,") 14 14, default;
}
/* Scrollbar — warm sandstone */
html.mode-island {
scrollbar-color: #C9892D rgba(255, 240, 215, 0.3);
scrollbar-width: thin;
}
html.mode-island::-webkit-scrollbar { width: 10px; }
html.mode-island::-webkit-scrollbar-track { background: rgba(255, 240, 215, 0.3); }
html.mode-island::-webkit-scrollbar-thumb {
background: linear-gradient(#E5B868, #C9892D);
border-radius: 8px;
}
/* Idle birds — two CSS-only silhouettes drift across the sky behind everything */
html.mode-island::before {
content: '🦅'; /* placeholder — replaced by SVG via body::after stacking */
display: none; /* hidden — we use JS-injected birds instead */
}
/* Ambient bird silhouette — created via JS, positioned in the upper region */
.island-bird {
position: fixed;
top: 18%;
left: -60px;
width: 28px;
height: 16px;
z-index: 0;
pointer-events: none;
opacity: 0;
color: rgba(45, 31, 18, 0.32);
animation: island-bird-flight 60s linear infinite;
}
.island-bird.b2 { top: 28%; animation-duration: 75s; animation-delay: 18s; transform: scale(0.7); }
.island-bird svg { width: 100%; height: 100%; display: block; }
@keyframes island-bird-flight {
0% { transform: translateX(0) translateY(0) scale(1); opacity: 0; }
6% { opacity: 0.45; }
20% { transform: translateX(20vw) translateY(-10px) scale(1.02); }
50% { transform: translateX(50vw) translateY(8px) scale(0.95); opacity: 0.5; }
85% { transform: translateX(85vw) translateY(-4px) scale(0.9); opacity: 0.35; }
100% { transform: translateX(105vw) translateY(0) scale(0.85); opacity: 0; }
}
.island-bird.b2 { animation-name: island-bird-flight-2; }
@keyframes island-bird-flight-2 {
0% { transform: translateX(0) translateY(0); opacity: 0; }
10% { opacity: 0.32; }
60% { transform: translateX(60vw) translateY(-18px); opacity: 0.32; }
100% { transform: translateX(108vw) translateY(-8px); opacity: 0; }
}
/* Heat haze on top edge */
html.mode-island body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 120px;
z-index: 0;
pointer-events: none;
background: radial-gradient(80% 100% at 50% 0%,
rgba(255, 240, 200, 0.32) 0%,
rgba(255, 240, 200, 0) 70%);
mix-blend-mode: lighten;
animation: island-haze 7s ease-in-out infinite alternate;
}
@keyframes island-haze {
0% { transform: translateY(0) scaleY(1); opacity: 0.85; }
100% { transform: translateY(-2px) scaleY(1.04); opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════
ISLAND THEATRE — sunrise scene injected by JS into .mode-overlay
═══════════════════════════════════════════════════════════════════════ */
.island-scene {
position: absolute;
inset: 0;
overflow: hidden;
}
/* Sky gradient layer — animates through dawn colors */
.island-scene .sky {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #050a1c 0%, #0a1430 35%, #11183a 60%, #1c1538 100%);
transition: background 1100ms cubic-bezier(0.32, 0, 0.5, 1);
}
.island-scene.is-dawning .sky {
background: linear-gradient(180deg,
#1a2a4a 0%,
#4a3870 18%,
#c25a3c 45%,
#f0a04a 70%,
#ffd58c 100%);
}
.island-scene.is-noon .sky {
background: linear-gradient(180deg,
#87b8d9 0%,
#ffd9a0 50%,
#ffe8b8 100%);
}
/* Horizon water — reflective sliver at the bottom-third */
.island-scene .sea {
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 38%;
background:
linear-gradient(180deg,
rgba(8, 18, 38, 0.45) 0%,
rgba(20, 30, 60, 0.7) 40%,
rgba(0, 0, 0, 0.85) 100%);
transition: background 1100ms ease, transform 1100ms ease;
}
.island-scene.is-dawning .sea {
background:
linear-gradient(180deg,
rgba(180, 80, 40, 0.55) 0%,
rgba(120, 60, 80, 0.7) 50%,
rgba(20, 30, 50, 0.9) 100%);
}
/* Sun disc — rises and floods */
.island-scene .sun {
position: absolute;
left: 50%;
bottom: 30%;
width: 220px;
height: 220px;
margin-left: -110px;
border-radius: 50%;
background: radial-gradient(circle, #fff7d8 0%, #ffe5a0 35%, #ffb347 70%, transparent 100%);
filter: blur(1px);
opacity: 0;
transform: translateY(140px) scale(0.5);
transition: transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 1300ms ease,
filter 1300ms ease;
}
.island-scene.is-dawning .sun {
opacity: 1;
transform: translateY(0) scale(1);
}
.island-scene.is-noon .sun {
opacity: 1;
transform: translateY(-80px) scale(1.4);
filter: blur(0px) brightness(1.4);
}
/* Palm + horizon silhouettes — rendered as SVG injected by JS */
.island-scene .silhouette {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 700ms ease;
}
.island-scene.is-silhouette-on .silhouette { opacity: 1; }
.island-scene .silhouette svg {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
/* The white flash that caps the sunrise */
.island-scene .flash {
position: absolute;
inset: 0;
background: radial-gradient(60% 70% at 50% 65%,
rgba(255, 255, 235, 1) 0%,
rgba(255, 240, 200, 0.6) 45%,
rgba(255, 220, 160, 0) 100%);
opacity: 0;
transition: opacity 350ms ease-out;
mix-blend-mode: screen;
}
.island-scene.is-flashing .flash { opacity: 1; }
/* Fast sun-set for exit */
.island-scene.is-falling .sun {
transform: translateY(180px) scale(0.6);
opacity: 0.85;
filter: blur(3px) brightness(0.8);
transition: transform 600ms cubic-bezier(0.55, 0, 0.7, 0.2),
opacity 600ms ease,
filter 600ms ease;
}
.island-scene.is-falling .sky {
background: linear-gradient(180deg, #02050f 0%, #060a18 60%, #000 100%);
transition: background 700ms ease-in;
}
/* ═══════════════════════════════════════════════════════════════════════
STUDIO MODE — Apple-precise reskin via design tokens
Off-white surface, near-black text, Inter Light, generous whitespace,
minimal shadows, no decorative borders.
═══════════════════════════════════════════════════════════════════════ */
html.mode-studio {
--bg: #F5F5F7; /* Apple system background */
--surface: #FFFFFF;
--surface-2: #FAFAFA;
--border-dark: #E8E8EA;
--cream: #1D1D1F; /* near-black text */
--mute: #86868B; /* Apple secondary grey */
--copper: #007AFF; /* iOS system blue (acts as accent) */
--sand: #5AC8FA;
--rust: #1D1D1F; /* mute the warm red */
}
html.mode-studio body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
font-weight: 300;
letter-spacing: -0.011em;
line-height: 1.55;
color: #1D1D1F;
background:
radial-gradient(120% 80% at 30% 0%, #FFFFFF 0%, #F5F5F7 60%, #EFEFF1 100%) !important;
background-attachment: fixed;
/* Subtle parallax driven by JS — see modes.js Studio section */
background-position: calc(50% + var(--studio-px, 0px)) calc(50% + var(--studio-py, 0px));
-webkit-font-smoothing: antialiased;
}
html.mode-studio h1, html.mode-studio h2, html.mode-studio h3 {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 200;
letter-spacing: -0.035em;
text-shadow: none;
color: #1D1D1F;
}
/* Sections lose their dark forge surfaces */
html.mode-studio .nav-bar,
html.mode-studio .hero,
html.mode-studio section {
background: transparent !important;
}
/* Frosted-glass nav on scroll — applied via JS (.studio-scrolled on body) */
html.mode-studio .nav-bar {
position: sticky;
top: 0;
z-index: 50;
transition: background 280ms ease, backdrop-filter 280ms ease, box-shadow 280ms ease;
}
html.mode-studio body.studio-scrolled .nav-bar {
background: rgba(245, 245, 247, 0.72) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* Chips — clean, subtle, with enough opacity to read on the off-white surface */
html.mode-studio .btn-chip,
html.mode-studio .btn-chip-copper {
background: rgba(255, 255, 255, 0.94) !important;
color: #1D1D1F !important;
border-color: transparent !important;
border-radius: 980px !important;
text-shadow: none;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.05);
transition: transform 180ms ease-out, box-shadow 220ms ease-out, background 220ms ease;
}
html.mode-studio .btn-chip:hover,
html.mode-studio .btn-chip-copper:hover {
transform: translateY(-2px);
background: #FFFFFF !important;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 8px 24px -8px rgba(0, 0, 0, 0.18);
font-weight: 600;
}
/* Primary CTA — Apple Buy-button style */
html.mode-studio .btn-primary {
background: #1D1D1F !important;
color: #FFFFFF !important;
border: 0 !important;
border-radius: 980px !important;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
text-shadow: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: transform 180ms ease-out, background 200ms ease, box-shadow 220ms ease;
}
html.mode-studio .btn-primary:hover {
background: #2D2D2F !important;
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
}
/* Lang toggle in studio */
html.mode-studio .lang-toggle button { color: #86868B; font-weight: 400; }
html.mode-studio .lang-toggle button:hover,
html.mode-studio .lang-toggle button.active {
color: #007AFF;
border-bottom-color: #007AFF;
}
/* Selection — iOS blue */
html.mode-studio ::selection {
background: rgba(0, 122, 255, 0.22);
color: #1D1D1F;
text-shadow: none;
}
/* Cursor — system default + a JS-driven follow-spot halo (.studio-spot) */
html.mode-studio,
html.mode-studio body {
cursor: default;
}
/* Soft following spotlight — a fixed div repositioned via JS in modes.js */
.studio-spot {
position: fixed;
width: 360px;
height: 360px;
margin-left: -180px;
margin-top: -180px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 122, 255, 0.12) 0%,
rgba(0, 122, 255, 0.05) 40%,
transparent 70%);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 380ms ease;
mix-blend-mode: multiply;
will-change: transform;
}
html.mode-studio .studio-spot { opacity: 1; }
/* Scrollbar — Apple-grey */
html.mode-studio {
scrollbar-color: #C7C7CC #F5F5F7;
scrollbar-width: thin;
}
html.mode-studio::-webkit-scrollbar { width: 8px; }
html.mode-studio::-webkit-scrollbar-track { background: transparent; }
html.mode-studio::-webkit-scrollbar-thumb {
background: #C7C7CC;
border-radius: 8px;
}
html.mode-studio::-webkit-scrollbar-thumb:hover { background: #8E8E93; }
/* Reveal-on-scroll: any element marked .studio-reveal fades up as the
user scrolls. JS attaches the marker class via IntersectionObserver. */
html.mode-studio .studio-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.mode-studio .studio-reveal.is-in {
opacity: 1;
transform: none;
}
/* ═══════════════════════════════════════════════════════════════════════
STUDIO THEATRE — keynote-curtain entry, collapse-to-line exit
═══════════════════════════════════════════════════════════════════════ */
.studio-scene {
position: absolute;
inset: 0;
background: #000;
overflow: hidden;
}
/* The white curtain — starts invisible, becomes a thin horizontal line,
then expands vertically into a full-screen white panel, then fades. */
.studio-scene .curtain {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
margin-top: -0.5px;
background: #FFFFFF;
box-shadow:
0 0 18px rgba(255, 255, 255, 0.7),
0 0 36px rgba(255, 255, 255, 0.35);
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.studio-scene.is-line .curtain { transform: scaleX(1); }
.studio-scene.is-opening .curtain {
height: 100vh;
margin-top: -50vh;
transition: height 820ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Exit reverse: from full white → 1px line → fade */
.studio-scene.is-collapsing .curtain {
height: 100vh;
margin-top: -50vh;
transform: scaleX(1);
}
.studio-scene.is-collapsing.is-line-collapse .curtain {
height: 1px;
margin-top: -0.5px;
transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.studio-scene.is-collapsing.is-line-gone .curtain {
transform: scaleX(0);
transition: transform 360ms ease-in;
}
/* When entering studio, body's direct children stagger in from above */
html.mode-studio.is-revealing > body > * {
animation: studio-reveal-up 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: calc(80ms * var(--idx, 0));
}
@keyframes studio-reveal-up {
0% { opacity: 0; transform: translateY(-14px); filter: blur(2px); }
100% { opacity: 1; transform: none; filter: blur(0); }
}
html.mode-studio.is-collapsing-content > body > * {
animation: studio-collapse-up 540ms cubic-bezier(0.55, 0, 0.7, 0.2) forwards;
animation-delay: calc(50ms * var(--idx-rev, 0));
}
@keyframes studio-collapse-up {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(-22px); }
}
/* ─────── ISLAND — tropical resort, generous, ornamental ─────── */
html.mode-island body,
html.mode-island p,
html.mode-island a,
html.mode-island button,
html.mode-island .btn-primary,
html.mode-island .btn-chip,
html.mode-island .btn-chip-copper,
html.mode-island .lang-toggle button {
font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Island headlines: Fraunces serif — instant tropical luxury */
html.mode-island h1,
html.mode-island h2,
html.mode-island h3 {
font-family: 'Fraunces', 'Manrope', Georgia, serif !important;
font-weight: 400;
font-style: normal;
letter-spacing: -0.015em;
line-height: 1.06;
text-transform: none !important;
}
/* Section eyebrows: ditch brackets, use a tropical flourish */
html.mode-island .section-eyebrow::before {
content: '✦ ' !important;
color: #C9892D;
margin-right: 6px;
}
html.mode-island .section-eyebrow::after {
content: ' ✦' !important;
color: #C9892D;
margin-left: 6px;
}
html.mode-island .section-eyebrow {
font-family: 'Manrope', sans-serif !important;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
color: #8B6F47;
}
/* Service bullets: warm sun glyph */
html.mode-island .svc-bullets li::before {
content: '◌' !important;
color: #C9892D !important;
}
/* Island gives every section more air — but not so much it hurts pacing */
html.mode-island section {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
html.mode-island .hero {
padding-top: 6rem !important;
padding-bottom: 4rem !important;
}
/* Generous rounding everywhere */
html.mode-island .btn-primary,
html.mode-island .btn-chip,
html.mode-island .btn-chip-copper {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500;
}
/* Marquee in Island — softer */
html.mode-island .marquee,
html.mode-island .ticker {
background: rgba(255, 240, 215, 0.6) !important;
border-top: 1px solid rgba(201, 137, 45, 0.2);
border-bottom: 1px solid rgba(201, 137, 45, 0.2);
color: #8B6F47 !important;
}
/* Stats numbers in Island — display serif, huge */
html.mode-island .stat-num,
html.mode-island [class*="stat-num"] {
font-family: 'Fraunces', Georgia, serif !important;
font-weight: 300;
letter-spacing: -0.04em;
color: #2D1F12 !important;
}
/* Logo pulse — warm gold */
html.mode-island .logo .pulse,
html.mode-island .logo::before {
background: #C9892D !important;
box-shadow: 0 0 10px #E5B868, 0 0 20px rgba(229, 184, 104, 0.55);
}
/* ─────── STUDIO — Apple minimalism, huge thin air ─────── */
html.mode-studio body,
html.mode-studio p,
html.mode-studio a,
html.mode-studio button,
html.mode-studio .btn-primary,
html.mode-studio .btn-chip,
html.mode-studio .btn-chip-copper,
html.mode-studio .lang-toggle button {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
}
/* Studio headlines: huge, paper-thin, tight */
html.mode-studio h1 {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 200;
letter-spacing: -0.045em !important;
line-height: 1.02;
text-transform: none !important;
}
html.mode-studio h2,
html.mode-studio h3 {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 300;
letter-spacing: -0.035em;
text-transform: none !important;
}
/* Studio strips ALL decorative eyebrow chrome */
html.mode-studio .section-eyebrow::before,
html.mode-studio .section-eyebrow::after {
content: '' !important;
display: none;
}
html.mode-studio .section-eyebrow {
font-family: 'Inter', system-ui, sans-serif !important;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
font-size: 12px;
color: #86868B;
}
/* Service bullets: minimalist em-dash */
html.mode-studio .svc-bullets li::before {
content: '— ' !important;
color: #86868B !important;
font-weight: 300;
}
/* Studio: more air than Island, but balanced — not gaping */
html.mode-studio section {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
html.mode-studio .hero {
padding-top: 5rem !important;
padding-bottom: 4rem !important;
}
/* Chips/buttons in Studio: no uppercase, hairline rendering */
html.mode-studio .btn-primary,
html.mode-studio .btn-chip,
html.mode-studio .btn-chip-copper,
html.mode-studio .btn-secondary {
text-transform: none !important;
letter-spacing: -0.005em !important;
font-weight: 500;
}
/* Marquee in Studio — tone down to soft grey */
html.mode-studio .marquee,
html.mode-studio .ticker {
background: rgba(0, 0, 0, 0.025) !important;
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
color: #86868B !important;
}
/* Stats in Studio: oversized Inter ExtraLight — paper-thin display */
html.mode-studio .stat-num,
html.mode-studio [class*="stat-num"] {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 200 !important;
letter-spacing: -0.04em !important;
color: #1D1D1F !important;
}
/* Hero text alignment shift — Studio centres the main pitch */
html.mode-studio .hero h1,
html.mode-studio .hero h2 {
text-align: center;
}
html.mode-studio .hero .hero-meta {
text-align: center;
}
/* Logo pulse — iOS blue */
html.mode-studio .logo .pulse,
html.mode-studio .logo::before {
background: #007AFF !important;
box-shadow: 0 0 8px rgba(0, 122, 255, 0.65), 0 0 16px rgba(0, 122, 255, 0.35);
}
/* ─────── Mobile: scale back the extreme paddings ─────── */
@media (max-width: 640px) {
html.mode-island section,
html.mode-studio section {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
html.mode-island .hero,
html.mode-studio .hero {
padding-top: 3rem !important;
padding-bottom: 2rem !important;
}
}
@keyframes matrix-cursor-blink {
0%, 49% { opacity: 1; }
50%, 99% { opacity: 0; }
}
/* ──────────────────────────────────────────────────────────────────────
ISLAND — handwritten poetry, borderless buttons, free verse layout
────────────────────────────────────────────────────────────────────── */
/* HERO headline becomes script — large, flowing, generous */
html.mode-island .hero h1,
html.mode-island .hero .hero-text,
html.mode-island .section-headline {
font-family: 'Caveat', 'Playfair Display', 'Fraunces', cursive !important;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.005em;
text-transform: none !important;
font-style: normal;
}
/* Make hero headlines extra-large to give the script the spotlight */
html.mode-island .hero h1,
html.mode-island .hero-text {
font-size: clamp(3rem, 7vw, 6.5rem) !important;
}
html.mode-island .section-headline {
font-size: clamp(2.5rem, 5.5vw, 5rem) !important;
}
/* Smaller headings stay in italic display serif — keep the layered feel */
html.mode-island h3,
html.mode-island .svc-name,
html.mode-island .ps-name,
html.mode-island .testimonial-card .quote {
font-family: 'Playfair Display', 'Fraunces', Georgia, serif !important;
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
/* ───── ISLAND BUTTONS: borderless, italic, just emphasized words ───── */
html.mode-island .btn-chip,
html.mode-island .btn-chip-copper {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 6px 4px !important;
color: #3D2817 !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-weight: 500;
font-size: 16px;
text-transform: none !important;
letter-spacing: 0 !important;
position: relative;
transition: color 220ms ease;
}
html.mode-island .btn-chip::after,
html.mode-island .btn-chip-copper::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: 0;
height: 1px;
background: rgba(201, 137, 45, 0.5);
transition: height 220ms ease, background 220ms ease, bottom 220ms ease;
}
html.mode-island .btn-chip:hover,
html.mode-island .btn-chip-copper:hover {
background: transparent !important;
color: #B6701C !important;
transform: none !important;
box-shadow: none !important;
}
html.mode-island .btn-chip:hover::after,
html.mode-island .btn-chip-copper:hover::after {
height: 2px;
background: #C9892D;
bottom: -2px;
}
/* Primary CTA in Island: italic emphasized text with a hand-drawn arrow */
html.mode-island .btn-primary {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #B6701C !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-weight: 600;
font-size: 18px;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 4px 0 !important;
position: relative;
}
html.mode-island .btn-primary::after {
content: ' →';
margin-left: 4px;
font-style: normal;
transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-block;
}
html.mode-island .btn-primary:hover {
background: transparent !important;
color: #8B4F11 !important;
transform: none !important;
box-shadow: none !important;
}
html.mode-island .btn-primary:hover::after {
transform: translateX(6px);
}
/* Section eyebrows in Island: handwritten ornament */
html.mode-island .section-eyebrow {
font-family: 'Caveat', cursive !important;
font-weight: 500;
font-size: 22px !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #8B6F47 !important;
}
html.mode-island .section-eyebrow::before {
content: '~ ' !important;
color: #C9892D;
margin-right: 0 !important;
}
html.mode-island .section-eyebrow::after {
content: ' ~' !important;
color: #C9892D;
margin-left: 0 !important;
}
/* Service numbers and stats — Playfair display italic huge */
html.mode-island .svc-num,
html.mode-island .ps-num {
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-weight: 400;
color: #C9892D !important;
}
html.mode-island .num {
font-family: 'Caveat', cursive !important;
font-weight: 700 !important;
font-size: clamp(3rem, 7vw, 6rem) !important;
color: #C9892D !important;
letter-spacing: 0 !important;
}
html.mode-island .label {
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-size: 14px;
text-transform: none !important;
letter-spacing: 0 !important;
color: #8B6F47 !important;
}
/* Cards in Island: borderless, organic shadow, more padding */
html.mode-island .svc-card,
html.mode-island .testimonial-card,
html.mode-island .work-grid > *,
html.mode-island .process-step {
background: rgba(255, 255, 255, 0.7) !important;
border: 0 !important;
border-radius: 24px !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 12px 36px -12px rgba(80, 50, 20, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
padding: 2rem !important;
}
/* Bullets: hand-drawn dot */
html.mode-island .svc-bullets li::before {
content: '·' !important;
color: #C9892D !important;
font-size: 1.8em;
line-height: 0.7;
margin-right: 6px;
}
/* Manifesto in Island — handwritten poetry */
html.mode-island .manifesto-block,
html.mode-island .manifesto-text {
font-family: 'Caveat', cursive !important;
font-weight: 500;
font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
line-height: 1.35;
letter-spacing: 0 !important;
}
/* Ticker band in Island — almost invisible, just a whisper */
html.mode-island .ticker-band {
background: rgba(255, 240, 215, 0.5) !important;
border-top: 1px solid rgba(201, 137, 45, 0.15) !important;
border-bottom: 1px solid rgba(201, 137, 45, 0.15) !important;
color: #8B6F47 !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
}
/* Footer band in Island — handwritten farewell */
html.mode-island .footer-band {
font-family: 'Caveat', cursive !important;
font-size: 18px;
color: #8B6F47 !important;
}
/* Lighter haze on top of photo so the tropical scene shows through */
html.mode-island body {
background:
linear-gradient(180deg,
rgba(255, 244, 220, 0.35) 0%,
rgba(255, 240, 210, 0.15) 30%,
rgba(255, 235, 200, 0.40) 100%),
url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=85') center/cover fixed,
#FBEFD8 !important;
}
html.mode-island body::before {
backdrop-filter: blur(8px) saturate(1.05) brightness(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.05) brightness(1.05);
background: rgba(255, 240, 215, 0.18);
}
/* ──────────────────────────────────────────────────────────────────────
STUDIO — Apple keynote, oversized typography, no chrome
────────────────────────────────────────────────────────────────────── */
/* Hero headline — MASSIVE, paper-thin, perfectly centered */
html.mode-studio .hero h1,
html.mode-studio .hero-text,
html.mode-studio .section-headline {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 200 !important;
letter-spacing: -0.045em !important;
line-height: 1.0;
font-size: clamp(3rem, 7vw, 7rem) !important;
text-align: center !important;
}
html.mode-studio .section-headline {
font-weight: 200 !important;
font-size: clamp(2.5rem, 6vw, 6rem) !important;
}
/* Studio: kill the bracketed eyebrow chip — replace with tiny grey label */
html.mode-studio .btn-chip-copper {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
color: #86868B !important;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
border-radius: 0 !important;
}
/* Nav chips in Studio — text-only, no background, hairline underline on hover */
html.mode-studio .nav-chips .btn-chip {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 6px 8px !important;
color: #1D1D1F !important;
font-weight: 500;
font-size: 14px;
text-transform: none !important;
letter-spacing: -0.005em !important;
border-radius: 0 !important;
position: relative;
}
html.mode-studio .nav-chips .btn-chip::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
height: 1px;
background: #1D1D1F;
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform 240ms ease;
}
html.mode-studio .nav-chips .btn-chip:hover {
background: transparent !important;
transform: none !important;
box-shadow: none !important;
font-weight: 600;
}
html.mode-studio .nav-chips .btn-chip:hover::after {
transform: scaleX(1);
}
/* Primary CTA in Studio — minimal pill, only thing with chrome */
html.mode-studio .btn-primary {
background: #1D1D1F !important;
color: #FFFFFF !important;
border-radius: 980px !important;
padding: 12px 22px !important;
font-weight: 500;
font-size: 14px;
text-transform: none !important;
letter-spacing: -0.005em !important;
border: 0 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Stats in Studio — enormous Inter Thin, tiny grey captions */
html.mode-studio .num {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 100 !important;
font-size: clamp(4rem, 9vw, 8rem) !important;
letter-spacing: -0.05em !important;
color: #1D1D1F !important;
line-height: 0.95;
}
html.mode-studio .label {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 400;
color: #86868B !important;
text-transform: uppercase;
letter-spacing: 0.08em !important;
}
/* Service / process numbers in Studio — tiny grey captions, not display */
html.mode-studio .svc-num,
html.mode-studio .ps-num {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 500 !important;
font-size: 13px !important;
color: #86868B !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
}
/* Cards in Studio — almost invisible, only depth on hover */
html.mode-studio .svc-card,
html.mode-studio .testimonial-card,
html.mode-studio .work-grid > *,
html.mode-studio .process-step {
background: #FFFFFF !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04),
0 1px 2px rgba(0, 0, 0, 0.02) !important;
padding: 2.2rem !important;
transition: transform 280ms ease, box-shadow 320ms ease !important;
}
html.mode-studio .svc-card:hover,
html.mode-studio .testimonial-card:hover,
html.mode-studio .work-grid > *:hover,
html.mode-studio .process-step:hover {
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 18px 40px -12px rgba(0, 0, 0, 0.15) !important;
}
/* Studio bullets — em-dash already set; tighten line height */
html.mode-studio .svc-bullets li {
padding-left: 1.4em;
margin-bottom: 0.6em;
}
/* Hide the marquee ticker in Studio — Apple wouldn't ship a scrolling band */
html.mode-studio .ticker-band,
html.mode-studio .testimonials-marquee {
display: none !important;
}
/* Footer in Studio — tiny grey caption */
html.mode-studio .footer-band {
background: transparent !important;
border: 0 !important;
color: #86868B !important;
font-size: 12px;
letter-spacing: 0;
text-transform: none !important;
padding: 3rem 0 !important;
text-align: center;
}
/* Manifesto in Studio — huge thin Inter centered */
html.mode-studio .manifesto-block,
html.mode-studio .manifesto-text {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 200 !important;
font-size: clamp(2rem, 4vw, 3.5rem) !important;
letter-spacing: -0.03em;
line-height: 1.15;
text-align: center;
}
/* Mobile: scale these radical sizes down */
@media (max-width: 640px) {
html.mode-island .hero h1,
html.mode-island .hero-text { font-size: clamp(3rem, 14vw, 5rem) !important; }
html.mode-island .num { font-size: clamp(3rem, 14vw, 5rem) !important; }
html.mode-studio .hero h1,
html.mode-studio .hero-text { font-size: clamp(3rem, 12vw, 5rem) !important; }
html.mode-studio .num { font-size: clamp(3.5rem, 14vw, 6rem) !important; }
html.mode-studio section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}
html.mode-matrix .magic-toggle { z-index: 9999; }
/* ───── ISLAND: dramatic golden-hour sunset ───── */
html.mode-island body {
background:
/* Soft warm overlay so text stays readable */
linear-gradient(180deg,
rgba(255, 220, 165, 0.18) 0%,
rgba(255, 215, 155, 0.08) 30%,
rgba(255, 195, 130, 0.32) 100%),
/* Cinematic golden-hour sunset over water */
url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=85') center/cover fixed,
#FBEFD8 !important;
}
/* Reduce the body::before blur so the sunset reads as a real photograph */
html.mode-island body::before {
backdrop-filter: blur(4px) saturate(1.18) brightness(1.02) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.18) brightness(1.02) !important;
background: rgba(255, 220, 170, 0.10) !important;
}
/* In Island, make sure cards have enough backdrop to read text against the
vibrant sunset image */
html.mode-island .svc-card,
html.mode-island .testimonial-card,
html.mode-island .work-grid > *,
html.mode-island .process-step {
background: rgba(255, 248, 235, 0.85) !important;
backdrop-filter: blur(18px) saturate(1.05);
-webkit-backdrop-filter: blur(18px) saturate(1.05);
}
/* ───── STUDIO: pastel gradient mesh + film grain ───── */
html.mode-studio body {
background:
/* Top-left soft blue blob */
radial-gradient(at 8% 5%, rgba(0, 122, 255, 0.10) 0%, transparent 45%),
/* Top-right warm pink blob */
radial-gradient(at 92% 8%, rgba(255, 138, 188, 0.10) 0%, transparent 45%),
/* Bottom-left soft cyan blob */
radial-gradient(at 12% 92%, rgba(90, 200, 250, 0.10) 0%, transparent 50%),
/* Bottom-right warm peach blob */
radial-gradient(at 88% 95%, rgba(255, 175, 140, 0.08) 0%, transparent 50%),
/* Mid-page soft glow */
radial-gradient(at 50% 50%, rgba(245, 245, 247, 0.4) 0%, transparent 70%),
/* Base gradient */
linear-gradient(180deg, #FCFCFD 0%, #F5F5F7 50%, #EEEEF2 100%) !important;
background-attachment: fixed !important;
}
/* Film grain — fixed full-page SVG noise at ~3% opacity */
html.mode-studio body::after {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.045;
mix-blend-mode: multiply;
}
/* Glassy frosted cards in Studio (modern premium feel) */
html.mode-studio .svc-card,
html.mode-studio .testimonial-card,
html.mode-studio .work-grid > *,
html.mode-studio .process-step {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 0 0 0.5px rgba(0, 0, 0, 0.05),
0 18px 40px -16px rgba(0, 0, 0, 0.08) !important;
}
/* Lift content above grain layer in Studio */
html.mode-studio .nav-bar,
html.mode-studio .hero,
html.mode-studio section,
html.mode-studio .footer-band {
position: relative;
z-index: 1;
}
html.mode-studio .magic-toggle { z-index: 9999; }
@keyframes matrix-statusbar-blink {
0%, 49% { opacity: 1; }
50%, 99% { opacity: 0; }
}
@media (max-width: 640px) {
.matrix-statusbar { font-size: 9px; gap: 10px; padding: 3px 10px; }
.matrix-statusbar .seg:nth-child(n+5) { display: none; }
html.mode-matrix body { padding-top: 18px; }
}
/* ─── ISLAND: ornate corner flourishes + handwritten signature ─── */
.island-chrome {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.island-chrome .corner {
position: absolute;
font-family: 'Caveat', cursive;
font-size: 38px;
color: #C9892D;
opacity: 0.55;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}
.island-chrome .corner.tl { top: 12px; left: 14px; }
.island-chrome .corner.tr { top: 12px; right: 14px; }
.island-chrome .corner.bl { bottom: 12px; left: 14px; }
.island-chrome .corner.br { bottom: 12px; right: 14px; }
.island-chrome .signature {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
font-family: 'Caveat', cursive;
font-size: 22px;
color: #8B6F47;
opacity: 0.6;
white-space: nowrap;
}
@media (max-width: 640px) {
.island-chrome .corner { font-size: 26px; }
.island-chrome .signature { font-size: 18px; bottom: 8px; }
}
/* ─── STUDIO: 2px hairline scroll-progress bar at the top ─── */
.studio-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 9998;
background: rgba(0, 0, 0, 0.04);
pointer-events: none;
}
.studio-progress-fill {
height: 100%;
background: linear-gradient(90deg, #007AFF 0%, #5AC8FA 100%);
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 80ms linear;
box-shadow: 0 0 8px rgba(0, 122, 255, 0.45);
}
@media (min-width: 1100px) {
html.mode-matrix .services-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* ─── ISLAND: asymmetric magazine layout, generous gaps ─── */
html.mode-island .services-grid {
display: grid !important;
grid-template-columns: 1fr 1.35fr !important;
gap: 3.5rem !important;
}
@media (max-width: 900px) {
html.mode-island .services-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
html.mode-island .stats-grid,
html.mode-island .stats-band {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 3rem !important;
text-align: center;
}
html.mode-island .stats-grid > * {
padding: 2rem 1rem !important;
}
html.mode-island .work-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
gap: 2.5rem !important;
}
@media (max-width: 900px) {
html.mode-island .work-grid { grid-template-columns: 1fr !important; }
}
html.mode-island .process-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
html.mode-island .process-arrow > * { display: none; }
html.mode-island .process-arrow::before {
content: '~ ✦ ~';
display: block;
text-align: center;
font-family: 'Caveat', cursive;
color: #C9892D;
font-size: 24px;
padding: 1rem 0;
}
/* ─── STUDIO: ultra-airy single-column stack with massive gaps ─── */
html.mode-studio .services-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 5rem !important;
max-width: 880px;
margin: 0 auto !important;
}
html.mode-studio .stats-grid,
html.mode-studio .stats-band {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
max-width: 1100px;
margin: 0 auto !important;
text-align: center;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
html.mode-studio .stats-grid > * {
padding: 3.5rem 1rem !important;
border-right: 1px solid rgba(0, 0, 0, 0.05);
}
html.mode-studio .stats-grid > *:last-child { border-right: 0; }
@media (max-width: 640px) {
html.mode-studio .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
html.mode-studio .stats-grid > * { padding: 2rem 1rem !important; }
}
html.mode-studio .work-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 4rem !important;
max-width: 980px;
margin: 0 auto !important;
}
html.mode-studio .process-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 3rem !important;
max-width: 720px;
margin: 0 auto;
}
html.mode-studio .process-step {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 2rem !important;
}
html.mode-studio .process-step:first-child { border-top: 0; }
html.mode-studio .process-arrow { display: none !important; }
/* Stacking discipline:
z-index 0 → tunnel canvas (this)
z-index 1 → persistent matrix-rain-ambient canvas
z-index 2 → CRT scanlines (body::after)
z-index 3 → page content (nav/hero/sections)
z-index 9000 → mode-overlay during transitions
z-index 9997 → theme-cursor-canvas (trail)
z-index 9998 → page chrome (matrix-statusbar / studio-progress)
z-index 9999 → magic-toggle button (always on top, always blue)
───────────────────────────────────────────────────────────────────── */
/* ─── Universal themed-cursor trail canvas ─── */
.theme-cursor-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9997;
}
/* The trail layer should not block clicks even on subpixel touch */
html .theme-cursor-canvas { touch-action: none; }
/* In Island, the cursor sparkles are warm light — screen blend so they
pop on the photo */
html.mode-island .theme-cursor-canvas { mix-blend-mode: screen; }
/* In Studio, the halos read as soft shadows on white — multiply darkens */
html.mode-studio .theme-cursor-canvas { mix-blend-mode: multiply; }
/* The existing studio-spot is now redundant (cursor trail covers it).
Hide it in Studio to avoid double-spot drawing. */
html.mode-studio .studio-spot { display: none !important; }
/* When a Studio card is being tilted, ensure its children inherit the
3D context so backdrops don't break */
html.mode-studio .svc-card,
html.mode-studio .testimonial-card,
html.mode-studio .work-grid > *,
html.mode-studio .process-step {
transform-style: preserve-3d;
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════════════
MODE 4 — NOIR (PREMIUM EDITORIAL — warm off-black, warm cream,
metallic-gold accent. Layered composition: film grain + vignette +
asymmetric 12-col grid + running header + page numbers + scroll-
progress hairline + chapter-entrance letter-split reveals + abstract
SVG case marks. Fraunces variable serif for display, Playfair italic
for editorial accents, Inter for body, JetBrains Mono for micro-UI.
═══════════════════════════════════════════════════════════════════════ */
html.mode-noir {
--bg: #0A0908; /* warm near-black */
--bg-soft: #13110E; /* slightly lifted surface */
--bg-deep: #060503; /* deeper void for panels */
--cream: #F0E9D6; /* warm off-white */
--cream-2: #E8E0CB; /* warmer cream tier */
--cream-3: #C5BDA6; /* dimmer secondary */
--mute: #8B7E63; /* warm taupe for tertiary */
--rule: rgba(240, 233, 214, 0.075);
--rule-strong: rgba(240, 233, 214, 0.18);
--gold: #B8985C; /* metallic warm gold accent */
--gold-2: #C9AB6E; /* gold highlight */
--gold-dark: #8A704A; /* deep gold */
}
/* Hide original DOM, keep persistent overlay/cursor/chrome */
html.mode-noir body > *:not(.noir-book):not(.noir-bg):not(.magic-toggle):not(.mode-indicator):not(.mode-overlay):not(.noir-cursor-dot):not(.noir-cursor-ring):not(.theme-cursor-canvas):not(.noir-grain):not(.noir-running):not(.noir-pages):not(.noir-progress) {
display: none !important;
}
html.mode-noir,
html.mode-noir body {
background: var(--bg);
color: var(--cream);
overflow: hidden;
height: 100vh;
}
html.mode-noir ::selection {
background: var(--gold);
color: var(--bg);
}
/* Magic toggle — gold-tinted aura */
html.mode-noir .magic-toggle {
position: fixed !important;
top: 1.4rem;
right: 1.4rem;
z-index: 9999;
}
.mode-noir .magic-toggle {
box-shadow:
0 0 0 0 rgba(184, 152, 92, 0.4),
0 4px 18px -2px rgba(184, 152, 92, 0.32),
0 1px 0 rgba(240, 233, 214, 0.22) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
/* ─── FILM GRAIN — animated SVG noise overlay ─── */
.noir-grain {
position: fixed;
inset: -20px;
z-index: 9994;
pointer-events: none;
opacity: 0.06;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
mix-blend-mode: overlay;
animation: noir-grain-shift 1.8s steps(6) infinite;
}
@keyframes noir-grain-shift {
0% { transform: translate(0, 0); }
17% { transform: translate(-3%, -7%); }
34% { transform: translate(-12%, 4%); }
51% { transform: translate(6%, -22%); }
68% { transform: translate(-10%, 13%); }
85% { transform: translate(8%, 7%); }
100% { transform: translate(0, 0); }
}
/* ─── PHOTOBOOK container ─── */
.noir-book {
position: fixed;
inset: 0;
z-index: 100;
background: transparent; /* body-level canvas shows through */
color: var(--cream);
font-family: 'Inter', system-ui, sans-serif;
font-weight: 300;
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--gold-dark) transparent;
}
.noir-book::-webkit-scrollbar { width: 3px; }
.noir-book::-webkit-scrollbar-track { background: transparent; }
.noir-book::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, transparent, var(--gold-dark) 30%, var(--gold) 70%, transparent);
}
/* Running-header band removed per user — was occluding top of 3D
scenes (icosahedron etc) with a dark gradient strip. Element is
still mounted by enterNoir() and updated by navIO for the chapter-
tracker logic, but never visible. */
.noir-running {
display: none !important;
}
.noir-running .lhs { justify-self: start; }
.noir-running .mid {
justify-self: center;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.noir-running .mid::before,
.noir-running .mid::after {
content: '';
width: 14px;
height: 1px;
background: var(--gold-dark);
}
.noir-running .rhs { justify-self: end; }
.noir-running .sep { color: rgba(184, 152, 92, 0.7); margin: 0 0.7em; }
/* Scroll-progress hairline at very top edge */
.noir-progress {
position: fixed;
top: 0; left: 0;
height: 1px;
width: 100%;
z-index: 9998;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, var(--gold-dark), var(--gold-2), var(--gold-dark));
transition: transform 80ms linear;
}
/* Persistent page-number meta at bottom corners */
.noir-pages {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 9997;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1rem 1.5rem;
pointer-events: none;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(240, 233, 214, 0.32);
background: linear-gradient(0deg, rgba(10, 9, 8, 0.92) 0%, rgba(10, 9, 8, 0) 100%);
}
.noir-pages .lhs { justify-self: start; }
.noir-pages .rhs { justify-self: end; }
.noir-pages strong {
color: var(--gold);
font-weight: 400;
margin: 0 0.5em;
}
/* ─── CHAPTER (full viewport, layered, seamless — no divider line so
chapters bleed into each other) ─── */
.noir-chapter {
position: relative;
width: 100%;
height: 100vh;
display: grid;
padding: 4.8rem clamp(1.8rem, 4.8vw, 5rem) 3.6rem;
isolation: isolate;
overflow: hidden;
}
/* No per-chapter vignette — was creating a visible seam at chapter
boundaries (each chapter's top was slightly lit, bottom slightly
darker, so adjacent edges didn't match). Body background --bg is
uniform across the whole book now. */
.noir-chapter > * { position: relative; z-index: 2; }
/* ─── COVER (00) ─── */
.noir-cover {
grid-template-rows: auto 1fr auto;
gap: 2rem;
}
.noir-cover-top {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
align-items: start;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mute);
}
.noir-cover-top .gold { color: var(--gold); margin-right: 0.5em; }
.noir-cover-top .rhs { text-align: right; }
.noir-cover-center {
display: grid;
grid-template-columns: 5fr 5fr;
align-items: end;
gap: clamp(2rem, 4vw, 4rem);
}
.noir-display {
font-family: 'Fraunces', 'Playfair Display', serif;
font-weight: 600;
font-variation-settings: 'opsz' 144, 'wght' 600, 'SOFT' 30;
font-size: clamp(5.5rem, 16vw, 16rem);
letter-spacing: -0.045em;
line-height: 0.86;
color: var(--cream);
margin: 0;
text-wrap: balance;
}
.noir-display-rhs { padding-bottom: clamp(0.5rem, 1vw, 1.5rem); }
.noir-display-rule {
width: 72px;
height: 1px;
background: var(--gold);
margin-bottom: 1.4rem;
}
.noir-display-lead {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.45;
color: var(--cream-2);
max-width: 28ch;
margin: 0 0 1rem;
text-wrap: balance;
}
.noir-cover-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.4vw, 2.5rem);
padding-top: 1.6rem;
border-top: 1px solid var(--rule);
}
.noir-meta-cell {
display: grid;
gap: 0.35rem;
align-content: start;
}
.noir-meta-cell .num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-variation-settings: 'opsz' 72, 'wght' 500;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
color: var(--gold);
line-height: 1;
}
.noir-meta-cell .lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mute);
line-height: 1.3;
}
/* ─── MANIFESTO (01) — italic centered statement w/ ornate quote ─── */
.noir-manifesto {
grid-template-rows: auto 1fr auto;
gap: 2rem;
}
.noir-mh-top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
}
.noir-mh-top .rule { display: none; } /* hairline removed — creates seam between chapters */
.noir-mh-stage {
display: grid;
place-items: center;
text-align: center;
position: relative;
}
.noir-mh-stage .quote-glyph {
position: absolute;
top: -3rem;
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: clamp(8rem, 18vw, 18rem);
color: var(--gold);
opacity: 0.32;
line-height: 0.5;
user-select: none;
pointer-events: none;
}
.noir-statement {
font-family: 'Playfair Display', 'Fraunces', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(2.6rem, 6.5vw, 6rem);
line-height: 1.05;
letter-spacing: -0.018em;
text-align: center;
max-width: 22ch;
color: var(--cream);
margin: 0;
text-wrap: balance;
}
.noir-mh-bottom {
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--mute);
display: inline-flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.noir-mh-bottom::before,
.noir-mh-bottom::after {
content: '';
width: 28px;
height: 1px;
background: var(--gold-dark);
}
/* ─── SERVICE chapter (5+7 asymmetric grid) ─── */
.noir-service {
grid-template-columns: 5fr 7fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: end;
padding-bottom: 6rem;
}
.noir-service .lhs {
display: grid;
align-content: end;
gap: 0.9rem;
}
.noir-service .ch-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.noir-service .ch-tag::before {
content: '';
width: 14px;
height: 1px;
background: var(--gold);
}
.noir-service .ch-title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-variation-settings: 'opsz' 144, 'wght' 500;
font-size: clamp(3.4rem, 9vw, 9rem);
letter-spacing: -0.04em;
line-height: 0.9;
color: var(--cream);
margin: 0;
}
.noir-service .ch-italic {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.3rem, 1.9vw, 1.7rem);
color: var(--cream-3);
margin-top: 0.4rem;
}
.noir-service .ch-closing {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
color: var(--cream-2);
max-width: 28ch;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid var(--gold-dark);
position: relative;
}
.noir-service .ch-closing::before {
content: '—';
color: var(--gold);
margin-right: 0.6em;
font-style: normal;
}
.noir-service .rhs {
display: grid;
gap: 0;
align-content: end;
}
.noir-numbered {
list-style: none;
padding: 0;
margin: 0;
counter-reset: noir-item;
}
.noir-numbered li {
counter-increment: noir-item;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.4rem;
align-items: baseline;
padding: 0.7rem 0;
border-top: 1px solid var(--rule);
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: clamp(0.88rem, 0.95vw, 0.96rem);
line-height: 1.5;
color: var(--cream-2);
}
.noir-numbered li:last-child { border-bottom: 1px solid var(--rule); }
.noir-numbered li::before {
content: counter(noir-item, decimal-leading-zero);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 400;
}
/* ─── CASE chapter — single column, text only. The body-level 3D
backdrop is the visual; we don't want a card blocking it. Text
centered on the right half so it doesn't fight the rotating scene. ─── */
.noir-case,
.noir-case-solo {
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
justify-items: end; /* push content to the right so left half stays "open" for scene */
}
.noir-case .rhs,
.noir-case-solo .rhs {
display: grid;
gap: 1.4rem;
max-width: 56ch;
justify-self: end;
padding-right: clamp(1rem, 4vw, 4rem);
}
.noir-case .meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.noir-case .meta::before {
content: '';
width: 14px;
height: 1px;
background: var(--gold);
}
.noir-case .title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-variation-settings: 'opsz' 96, 'wght' 500;
font-size: clamp(2.4rem, 5vw, 4.4rem);
letter-spacing: -0.028em;
line-height: 0.96;
color: var(--cream);
margin: 0;
text-wrap: balance;
}
.noir-case .desc {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: clamp(0.98rem, 1.1vw, 1.1rem);
line-height: 1.6;
color: var(--cream-2);
text-wrap: pretty;
max-width: 50ch;
}
.noir-case .metric {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.4rem;
align-items: center;
padding: 1rem 0;
margin-top: 0.4rem;
border-top: 1px solid var(--rule-strong);
border-bottom: 1px solid var(--rule-strong);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.noir-case .metric .lbl { color: var(--cream-3); }
.noir-case .metric .arrow {
justify-self: end;
color: var(--gold);
font-size: 14px;
}
/* ─── VOICES — horizontal marquee. All testimonials flow LEFT in a
continuous loop while the body-level dotSpiral spins RIGHT in the
background. Track is duplicated and translateX 0 → -50% = seamless
loop. Hover pauses for reading. Mask fades edges. ─── */
.noir-voices {
grid-template-rows: auto 1fr auto;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 1rem;
}
.noir-voices > * { padding-left: clamp(1.8rem, 4.8vw, 5rem); padding-right: clamp(1.8rem, 4.8vw, 5rem); }
.noir-voices > .noir-voices-stage { padding-left: 0; padding-right: 0; }
.noir-voices-stage {
width: 100%;
overflow: hidden;
position: relative;
align-self: center;
mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.noir-voices-track {
display: flex;
width: max-content;
gap: 2.5rem;
padding: 2rem 0;
animation: noir-voices-scroll 90s linear infinite;
will-change: transform;
}
@keyframes noir-voices-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.noir-voices-stage:hover .noir-voices-track {
animation-play-state: paused;
}
/* Voice cards are pure floating text — no frame, no background, no
quote-glyph. The marquee carries just italic quote + mono byline. */
.noir-voice-card {
flex: 0 0 auto;
width: clamp(320px, 28vw, 460px);
padding: 1.8rem 1.8rem 1.4rem;
display: grid;
gap: 1rem;
position: relative;
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-voice-card:hover { transform: translateY(-2px); }
.noir-voice-card .quote {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(0.95rem, 1.05vw, 1.05rem);
line-height: 1.5;
color: var(--cream);
margin: 0;
text-wrap: pretty;
}
.noir-voice-card .byline {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mute);
padding-top: 1rem;
border-top: 1px solid var(--gold-dark);
}
.noir-voice-card .byline .author { color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
.noir-voices-track { animation: none !important; }
}
/* ─── CONTACT (final) ─── */
.noir-contact {
grid-template-rows: 1fr;
align-items: center;
}
.noir-contact .stage {
display: grid;
place-items: center;
text-align: center;
gap: 0.5rem;
}
.noir-contact .label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.noir-contact .label::before,
.noir-contact .label::after {
content: '';
width: 20px;
height: 1px;
background: var(--gold-dark);
}
.noir-contact .head {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 500;
font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 40;
font-size: clamp(3.5rem, 10vw, 10rem);
letter-spacing: -0.038em;
line-height: 0.92;
color: var(--cream);
margin: 0 0 2.5rem;
text-wrap: balance;
}
.noir-contact .links {
display: grid;
gap: 0.6rem;
margin: 1rem 0 2.5rem;
}
.noir-contact .link {
font-family: 'Fraunces', serif;
font-weight: 400;
font-variation-settings: 'opsz' 96, 'wght' 400;
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
letter-spacing: -0.022em;
color: var(--cream);
text-decoration: none;
padding: 0.18em 0.4em;
position: relative;
display: inline-block;
transition: color 320ms ease;
}
.noir-contact .link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0%;
height: 1px;
background: var(--gold);
transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1),
left 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-contact .link:hover { color: var(--gold-2); }
.noir-contact .link:hover::after { width: 100%; left: 0; }
.noir-contact .signoff {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--mute);
margin-top: 2.5rem;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.noir-contact .signoff::before,
.noir-contact .signoff::after {
content: '';
width: 24px;
height: 1px;
background: var(--gold-dark);
}
/* ─── TABLE OF CONTENTS (right rail, gold underline indicator) ─── */
.noir-toc {
position: fixed;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
z-index: 200;
display: grid;
gap: 0.5rem;
pointer-events: auto;
}
.noir-toc-item {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
color: rgba(240, 233, 214, 0.28);
text-decoration: none;
padding: 3px 0.4em 3px 1.2rem;
text-transform: uppercase;
position: relative;
white-space: nowrap;
transition: color 320ms ease, padding-left 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-toc-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 1px;
background: rgba(240, 233, 214, 0.2);
transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms ease;
}
.noir-toc-item:hover { color: var(--cream); }
.noir-toc-item.is-active {
color: var(--gold);
padding-left: 1.6rem;
}
.noir-toc-item.is-active::before {
width: 18px;
background: var(--gold);
}
/* ─── LETTER SPLIT (chapter-entrance) ─── */
.noir-split {
display: inline-block;
line-height: inherit;
}
.noir-split .char {
display: inline-block;
opacity: 0;
transform: translateY(0.7em);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-chapter.is-revealed .noir-split .char {
opacity: 1;
transform: translateY(0);
}
/* Per-char stagger (data-i set by JS) */
.noir-split .char[data-i="0"] { transition-delay: 0ms; }
.noir-split .char[data-i="1"] { transition-delay: 28ms; }
.noir-split .char[data-i="2"] { transition-delay: 56ms; }
.noir-split .char[data-i="3"] { transition-delay: 84ms; }
.noir-split .char[data-i="4"] { transition-delay: 112ms; }
.noir-split .char[data-i="5"] { transition-delay: 140ms; }
.noir-split .char[data-i="6"] { transition-delay: 168ms; }
.noir-split .char[data-i="7"] { transition-delay: 196ms; }
.noir-split .char[data-i="8"] { transition-delay: 224ms; }
.noir-split .char[data-i="9"] { transition-delay: 252ms; }
.noir-split .char[data-i="10"] { transition-delay: 280ms; }
.noir-split .char[data-i="11"] { transition-delay: 308ms; }
/* Block-level fade-in with depth stagger */
.noir-fade {
opacity: 0;
transform: translateY(22px);
transition: opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-chapter.is-revealed .noir-fade { opacity: 1; transform: translateY(0); }
.noir-chapter.is-revealed .noir-fade.d1 { transition-delay: 240ms; }
.noir-chapter.is-revealed .noir-fade.d2 { transition-delay: 420ms; }
.noir-chapter.is-revealed .noir-fade.d3 { transition-delay: 600ms; }
.noir-chapter.is-revealed .noir-fade.d4 { transition-delay: 780ms; }
/* ─── DIFFERENCE-MODE CURSOR (kept, now cream-tinted) ─── */
.noir-cursor-dot,
.noir-cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9996;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
will-change: transform;
transition: opacity 280ms ease, width 360ms cubic-bezier(0.16, 1, 0.3, 1),
height 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.noir-cursor-dot {
width: 6px; height: 6px;
background: var(--cream);
margin-left: -3px; margin-top: -3px;
}
.noir-cursor-ring { display: none !important; } /* outer ring removed — only the dot remains */
.noir-cursor-dot.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
html.mode-noir,
html.mode-noir * { cursor: none !important; }
html.mode-noir input,
html.mode-noir textarea,
html.mode-noir [contenteditable="true"] { cursor: text !important; }
}
/* ─── 3D backdrop — TWO canvases for HTML/WebGL z-occlusion mix.
Back canvas (z-index 50) sits BEHIND .noir-book content (100).
Front canvas (z-index 200) sits ABOVE it. Each renderer uses
opposing clipping planes at world z=0 so geometry from the
far half of the scene appears behind HTML, near half in front.
Cards in the voices marquee are sandwiched between the two,
giving a true 3D wrap-around when the helix rotates. ─── */
.noir-bg {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: 0;
animation: noir-bg-fade 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
transition: filter 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.noir-bg-back { z-index: 50; } /* far side — behind .noir-book */
.noir-bg-front { z-index: 200; } /* near side — above .noir-book */
@keyframes noir-bg-fade {
to { opacity: 1; }
}
/* Per-chapter opacity tint — services/voices dim slightly so reading
stays primary; cover/manifesto/contact get full visual presence. */
body[data-noir-ch="0"] .noir-bg { filter: opacity(1.00); } /* COVER */
body[data-noir-ch="1"] .noir-bg { filter: opacity(0.85); } /* MANIFESTO */
body[data-noir-ch="2"] .noir-bg { filter: opacity(0.85); } /* WEB — wormhole needs presence */
body[data-noir-ch="3"] .noir-bg { filter: opacity(0.6); } /* AUTOMATION (lattice) */
body[data-noir-ch="4"] .noir-bg { filter: opacity(0.6); } /* AI */
body[data-noir-ch="5"] .noir-bg { filter: opacity(0.75); } /* VRP — now scene visible (no card blocking) */
body[data-noir-ch="6"] .noir-bg { filter: opacity(0.75); } /* KD */
body[data-noir-ch="7"] .noir-bg { filter: opacity(0.75); } /* RA */
body[data-noir-ch="8"] .noir-bg { filter: opacity(0.7); } /* VOICES (spiral) */
body[data-noir-ch="9"] .noir-bg { filter: opacity(0.85); } /* WRITE */
/* Chapters have transparent backgrounds so the body-level canvas
shows through. Per-chapter vignette removed for seamless scroll. */
/* ─── GSAP control — when GSAP is driving reveals, disable CSS
transitions on .noir-fade and .noir-split .char so GSAP and CSS
don't fight over the same properties. GSAP also nulls out the
initial opacity:0 state directly via its tweens. ─── */
.noir-book.gsap-on .noir-fade,
.noir-book.gsap-on .noir-split .char {
transition: none !important;
}
/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
html.mode-noir .noir-split .char,
html.mode-noir .noir-fade {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.noir-grain,
.noir-bg { animation: none !important; }
.noir-bg { opacity: 0.45 !important; }
}
/* ─── Mobile — comprehensive responsive for noir (≤768px phones) ─── */
@media (max-width: 768px) {
/* Hide right-rail TOC on phones — taking too much space */
.noir-toc { display: none; }
/* Chapter padding tighter on mobile */
.noir-chapter {
padding: 4rem 1.2rem 3rem;
}
/* COVER — stack vertically, smaller DEADLINE display */
.noir-cover-top {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
font-size: 9.5px;
letter-spacing: 0.18em;
}
.noir-cover-top .rhs { justify-self: start; text-align: left; }
.noir-cover-center {
grid-template-columns: 1fr;
gap: 1.4rem;
align-items: start;
}
.noir-display {
font-size: clamp(4rem, 18vw, 7rem) !important;
letter-spacing: -0.045em;
line-height: 0.9;
text-align: left;
}
.noir-display-rule { width: 56px; margin-bottom: 1rem; }
.noir-display-lead {
font-size: clamp(0.95rem, 3.4vw, 1.15rem);
line-height: 1.45;
max-width: 100%;
}
.noir-cover-meta {
grid-template-columns: 1fr 1fr;
gap: 0.9rem 1.2rem;
padding-top: 1rem;
}
.noir-meta-cell .num { font-size: clamp(1.4rem, 6vw, 2rem); }
.noir-meta-cell .lbl { font-size: 9px; line-height: 1.25; }
/* MANIFESTO — smaller centred statement */
.noir-statement {
font-size: clamp(1.8rem, 8vw, 3rem) !important;
line-height: 1.1;
max-width: 100%;
padding: 0 0.5rem;
}
.noir-mh-top {
grid-template-columns: 1fr;
gap: 0.5rem;
font-size: 9.5px;
}
.noir-mh-bottom { font-size: 9px; }
.noir-mh-bottom::before,
.noir-mh-bottom::after { width: 18px; }
/* SERVICES + CASES — single column */
.noir-service,
.noir-case,
.noir-case-solo {
grid-template-columns: 1fr;
gap: 1.6rem;
align-items: start;
padding-top: 5.5rem;
}
.noir-service .ch-title {
font-size: clamp(2.8rem, 12vw, 4.5rem);
line-height: 0.92;
}
.noir-service .ch-italic { font-size: clamp(1rem, 4vw, 1.4rem); }
.noir-service .rhs { padding-top: 0.5rem; }
.noir-service .ch-closing {
font-size: clamp(0.95rem, 3.6vw, 1.15rem);
max-width: 100%;
}
.noir-numbered li {
grid-template-columns: auto 1fr;
gap: 0.9rem;
padding: 0.55rem 0;
font-size: clamp(0.82rem, 3.2vw, 0.95rem);
line-height: 1.45;
}
.noir-numbered li::before { font-size: 9px; }
.noir-case .rhs,
.noir-case-solo .rhs {
justify-self: stretch;
padding-right: 0;
max-width: 100%;
}
.noir-case .title {
font-size: clamp(2rem, 8.5vw, 3.2rem);
line-height: 0.96;
}
.noir-case .desc {
font-size: clamp(0.95rem, 3.6vw, 1.1rem);
line-height: 1.55;
}
.noir-case .metric {
grid-template-columns: auto 1fr auto;
gap: 0.6rem;
font-size: 9.5px;
padding: 0.7rem 0;
}
.noir-case .metric .lbl { font-size: 9px; }
/* VOICES marquee — narrower cards, slower scroll */
.noir-voices > * { padding-left: 1.2rem; padding-right: 1.2rem; }
.noir-voices-track {
gap: 1.6rem;
animation-duration: 60s; /* slower on small screens */
}
.noir-voice-card {
width: clamp(260px, 78vw, 320px);
padding: 1.2rem 1.2rem 1rem;
gap: 0.8rem;
}
.noir-voice-card .quote { font-size: clamp(0.9rem, 3.5vw, 1rem); }
.noir-voice-card .byline { font-size: 9px; padding-top: 0.7rem; }
/* CONTACT — smaller head, tap-friendly links */
.noir-contact .head {
font-size: clamp(3rem, 13vw, 5rem) !important;
line-height: 0.95;
}
.noir-contact .link {
font-size: clamp(1.2rem, 5.5vw, 2rem);
word-break: break-all;
padding: 0.4em 0.4em;
}
.noir-contact .label { font-size: 9px; }
/* PERSISTENT CHROME — tighter for phones */
.noir-running {
padding: 0.7rem 0.9rem;
grid-template-columns: 1fr auto; /* drop the rhs column — too cramped */
font-size: 8.5px;
letter-spacing: 0.18em;
}
.noir-running .rhs { display: none; }
.noir-running .lhs { font-size: 8px; }
.noir-running .mid { font-size: 8.5px; }
.noir-running .mid::before,
.noir-running .mid::after { width: 10px; }
.noir-pages {
padding: 0.7rem 0.9rem;
font-size: 8.5px;
letter-spacing: 0.18em;
grid-template-columns: 1fr;
}
.noir-pages .rhs { display: none; } /* "EDITION I · PRINT-FOR-WEB" → too much */
/* Magic-toggle + indicator more compact */
html.mode-noir .magic-toggle {
transform: scale(0.85);
top: 0.6rem !important;
right: 0.6rem !important;
}
html.mode-noir .mode-indicator,
body[data-noir-ch] .mode-indicator {
top: calc(0.6rem + 30px + 0.3rem) !important;
right: 0.7rem !important;
font-size: 8.5px !important;
padding: 4px 7px !important;
letter-spacing: 0.18em !important;
}
/* Hover-specific effects disabled on touch */
.noir-cursor-dot { display: none !important; }
/* Native scroll feel — no smooth on touch (let device handle) */
.noir-book { scroll-behavior: auto; }
}
/* ≤420px — tighter for smaller phones */
@media (max-width: 420px) {
.noir-chapter { padding: 3.5rem 1rem 2.5rem; }
.noir-display { font-size: clamp(3.4rem, 16vw, 5rem) !important; }
.noir-statement { font-size: clamp(1.5rem, 7vw, 2.4rem) !important; }
.noir-service .ch-title { font-size: clamp(2.4rem, 11vw, 3.8rem); }
.noir-case .title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
.noir-contact .head { font-size: clamp(2.4rem, 12vw, 4rem) !important; }
.noir-voice-card { width: 86vw; }
}
/* ═══════════════════════════════════════════════════════════════════════
MODE 5 — VAULT (Resn-vibe: provocateur, aquamarine accent, mono debug,
corner ghost nav, stationary-cursor load-up ring)
═══════════════════════════════════════════════════════════════════════ */
html.mode-vault {
--bg: #000000;
--surface: #0A0A0A;
--cream: #FFFFFF;
--mute: #9C9C9C;
--copper: #00C8B4; /* aquamarine — primary brand */
--sand: #4FD9C9;
--rust: #008B7C;
}
html.mode-vault body {
background: #000;
color: #fff;
}
html.mode-vault ::selection {
background: #00C8B4;
color: #000;
}
html.mode-vault h1,
html.mode-vault h2,
html.mode-vault h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.022em;
}
/* Mono microtype on labels — Resn's "engineers who care" signal */
html.mode-vault .hero-meta,
html.mode-vault .section-eyebrow,
html.mode-vault .nav-bar small,
html.mode-vault .lang-toggle button {
font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 11px;
}
html.mode-vault .nav-bar {
background: rgba(0, 0, 0, 0.82);
border-bottom: 1px solid rgba(0, 200, 180, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
html.mode-vault section { background: transparent; }
html.mode-vault .svc-card,
html.mode-vault .work-grid > *,
html.mode-vault .testimonial-card {
background: rgba(0, 200, 180, 0.04);
border: 1px solid rgba(0, 200, 180, 0.18);
transition: background 280ms ease, border-color 280ms ease, box-shadow 360ms ease;
}
html.mode-vault .svc-card:hover,
html.mode-vault .testimonial-card:hover {
background: rgba(0, 200, 180, 0.07);
border-color: rgba(0, 200, 180, 0.5);
box-shadow: 0 0 36px rgba(0, 200, 180, 0.18);
}
html.mode-vault .btn-chip,
html.mode-vault .btn-chip-copper {
background: transparent;
border: 1px solid rgba(0, 200, 180, 0.42);
color: #00C8B4;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: background 200ms ease, border-color 200ms ease, box-shadow 240ms ease;
}
html.mode-vault .btn-chip:hover,
html.mode-vault .btn-chip-copper:hover {
background: rgba(0, 200, 180, 0.1);
border-color: #00C8B4;
box-shadow: 0 0 26px rgba(0, 200, 180, 0.22);
}
html.mode-vault .btn-primary {
background: #00C8B4;
color: #000;
border: none;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
transition: background 220ms ease, box-shadow 280ms ease, transform 220ms ease;
}
html.mode-vault .btn-primary:hover {
background: #4FD9C9;
box-shadow: 0 0 40px rgba(0, 200, 180, 0.4);
}
html.mode-vault .lang-toggle button { color: rgba(0, 200, 180, 0.45); }
html.mode-vault .lang-toggle button:hover,
html.mode-vault .lang-toggle button.active { color: #00C8B4; }
html.mode-vault .lang-toggle .sep { color: rgba(0, 200, 180, 0.18); }
html.mode-vault { scrollbar-color: #00C8B4 #000; scrollbar-width: thin; }
html.mode-vault::-webkit-scrollbar { width: 6px; }
html.mode-vault::-webkit-scrollbar-track { background: #000; }
html.mode-vault::-webkit-scrollbar-thumb { background: #008B7C; }
html.mode-vault::-webkit-scrollbar-thumb:hover { background: #00C8B4; }
/* Magic-button aura — aquamarine */
.mode-vault .magic-toggle {
box-shadow:
0 0 0 0 rgba(0, 200, 180, 0.55),
0 4px 14px -2px rgba(0, 200, 180, 0.45),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 60, 70, 0.45) inset;
}
/* Corner ghost navigation — four ultra-minimal labels in screen corners.
Resn's structural move: peripheral, non-hierarchical, always-visible. */
.vault-corner {
position: fixed;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
z-index: 9000;
text-decoration: none;
transition: color 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.vault-corner:hover { color: #00C8B4; }
.vault-corner.tl { top: 1.4rem; left: 1.4rem; }
.vault-corner.tr { top: 1.4rem; right: 1.4rem; }
.vault-corner.bl { bottom: 2.8rem; left: 1.4rem; }
.vault-corner.br { bottom: 2.8rem; right: 1.4rem; }
/* Mono debug strip pinned to bottom */
.vault-debug {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.92);
border-top: 1px solid rgba(0, 200, 180, 0.2);
color: #9C9C9C;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
padding: 7px 18px;
z-index: 9000;
display: flex;
gap: 22px;
align-items: center;
pointer-events: none;
}
.vault-debug strong {
color: #00C8B4;
font-weight: 500;
}
.vault-debug .vault-debug-tail {
margin-left: auto;
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
/* Stationary-cursor aquamarine load-up ring (SVG).
Holds still 200ms → ring starts filling. Fills to 100% over 800ms.
Movement instantly cancels and resets the fill. */
.vault-ring {
position: fixed;
top: 0;
left: 0;
width: 56px;
height: 56px;
pointer-events: none;
z-index: 9996;
margin-left: -28px;
margin-top: -28px;
opacity: 0;
transition: opacity 220ms ease;
will-change: transform, opacity;
}
.vault-ring.is-on { opacity: 1; }
.vault-ring circle {
fill: none;
stroke-width: 1.4;
transform: rotate(-90deg);
transform-origin: center;
}
.vault-ring .vault-ring-bg {
stroke: rgba(0, 200, 180, 0.18);
}
.vault-ring .vault-ring-fg {
stroke: #00C8B4;
stroke-dasharray: 169.6; /* 2 * π * 27 ≈ 169.6 */
stroke-dashoffset: 169.6;
filter: drop-shadow(0 0 4px rgba(0, 200, 180, 0.55));
}
.vault-ring.is-filling .vault-ring-fg {
transition: stroke-dashoffset 800ms linear;
stroke-dashoffset: 0;
}
@media (hover: none) {
html.mode-vault .vault-ring { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
MODE 6 — KINETIC (Active Theory-vibe: cinematic motion, teal+coral,
scroll-velocity-reactive UI, bottom-left reveals)
═══════════════════════════════════════════════════════════════════════ */
html.mode-kinetic {
--bg: #000000;
--surface: #0A0A0A;
--cream: #FFFFFF;
--mute: #888888;
--copper: #49C5B6; /* teal — primary brand */
--sand: #FF9398; /* coral — secondary accent */
--rust: #2A8B82;
--scroll-v: 0; /* JS injects scroll velocity each rAF */
}
html.mode-kinetic body {
background: #000;
color: #fff;
}
html.mode-kinetic ::selection {
background: #FF9398;
color: #000;
}
html.mode-kinetic h1,
html.mode-kinetic h2,
html.mode-kinetic h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.92;
}
/* Hero title — oversized type-as-texture */
html.mode-kinetic .hero h1 {
letter-spacing: -0.052em;
line-height: 0.85;
}
/* Velocity-reactive nav — scaleY responds to --scroll-v */
html.mode-kinetic .nav-bar {
background: rgba(0, 0, 0, 0.85);
border-bottom: 1px solid rgba(73, 197, 182, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: scaleY(calc(1 + var(--scroll-v) * 0.06));
transform-origin: top center;
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
html.mode-kinetic section { background: transparent; }
html.mode-kinetic .svc-card,
html.mode-kinetic .work-grid > *,
html.mode-kinetic .testimonial-card {
background: rgba(73, 197, 182, 0.04);
border: 1px solid rgba(73, 197, 182, 0.16);
transition: background 320ms ease, border-color 320ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.mode-kinetic .svc-card:hover,
html.mode-kinetic .testimonial-card:hover {
background: rgba(255, 147, 152, 0.06);
border-color: rgba(255, 147, 152, 0.45);
transform: translateY(-3px);
}
html.mode-kinetic .btn-chip,
html.mode-kinetic .btn-chip-copper {
background: transparent;
border: 1px solid rgba(73, 197, 182, 0.5);
color: #49C5B6;
transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
html.mode-kinetic .btn-chip:hover,
html.mode-kinetic .btn-chip-copper:hover {
background: rgba(255, 147, 152, 0.08);
color: #FF9398;
border-color: #FF9398;
}
html.mode-kinetic .btn-primary {
background: #49C5B6;
color: #000;
border: none;
font-weight: 700;
transition: background 260ms cubic-bezier(0.16, 1, 0.3, 1),
color 260ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.mode-kinetic .btn-primary:hover {
background: #FF9398;
color: #000;
transform: translateY(-2px);
}
html.mode-kinetic .lang-toggle button { color: rgba(73, 197, 182, 0.4); }
html.mode-kinetic .lang-toggle button:hover,
html.mode-kinetic .lang-toggle button.active { color: #49C5B6; }
html.mode-kinetic .lang-toggle .sep { color: rgba(73, 197, 182, 0.18); }
html.mode-kinetic { scrollbar-color: #49C5B6 #000; scrollbar-width: thin; }
html.mode-kinetic::-webkit-scrollbar { width: 8px; }
html.mode-kinetic::-webkit-scrollbar-track { background: #000; }
html.mode-kinetic::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2A8B82, #49C5B6);
}
html.mode-kinetic::-webkit-scrollbar-thumb:hover { background: #FF9398; }
/* Magic-button aura — teal */
.mode-kinetic .magic-toggle {
box-shadow:
0 0 0 0 rgba(73, 197, 182, 0.55),
0 4px 14px -2px rgba(73, 197, 182, 0.4),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 50, 45, 0.4) inset;
}
/* Section reveal — bottom-left fade-translate via IntersectionObserver */
html.mode-kinetic .kinetic-reveal {
opacity: 0;
transform: translate3d(-26px, 22px, 0);
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.6s ease;
}
html.mode-kinetic .kinetic-reveal.is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Hero clip-path wipe-in — triggered briefly on enter via .kinetic-entering */
html.mode-kinetic.kinetic-entering .hero h1 {
clip-path: inset(0 0 100% 0);
animation: kinetic-wipe-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
@keyframes kinetic-wipe-in {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0% 0); }
}
/* ═══════════════════════════════════════════════════════════════════════
REDUCED-MOTION accessibility fallback for the 3 new modes
System-level "Reduce motion" → skip kinetic animations, keep state.
Signature visuals (difference cursor, mono debug, corner nav) stay,
only the motion-heavy bits flatten to instant transitions.
═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
/* Noir: cursor still works but ring tracks the dot 1:1 (no lerp lag).
Reveals appear instantly. Magnetic translate fully reset. */
html.mode-noir .noir-cursor-ring,
html.mode-noir .noir-cursor-dot {
transition: opacity 200ms ease !important;
}
html.mode-noir .noir-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Vault: ring fill instant, debug strip + corners static. */
html.mode-vault .vault-ring.is-filling .vault-ring-fg {
transition: none !important;
stroke-dashoffset: 0 !important;
}
/* Kinetic: nav doesn't squash, hero wipe-in is instant, reveals instant. */
html.mode-kinetic .nav-bar {
transform: none !important;
}
html.mode-kinetic.kinetic-entering .hero h1 {
animation: none !important;
clip-path: inset(0 0 0% 0) !important;
}
html.mode-kinetic .kinetic-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.matrix-video-element {
position: fixed;
top: 0;
left: 0;
width: 100vw !important;
height: 100vh !important;
z-index: 0;
pointer-events: none;
}
/* Real HTML5 video — hero of the Matrix mode. Crank opacity high so the
imagery actually reads. Subtle filter only to lock into green palette. */
.matrix-video-element {
object-fit: cover;
object-position: center center;
opacity: 0.92;
filter: contrast(1.06) saturate(0.95) brightness(0.95);
}
/* Cinematic vignette — kept LIGHT so the video stays the centerpiece.
Only soft edges + faint top/bottom darkening, no green wash that would
dull the original imagery. */
.matrix-video-vignette {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 130% 100% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.55) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.42) 0%,
rgba(0, 0, 0, 0) 18%,
rgba(0, 0, 0, 0) 78%,
rgba(0, 0, 0, 0.55) 100%);
}
/* Stacking discipline:
z-index 0 → tunnel canvas (this)
z-index 1 → persistent matrix-rain-ambient canvas
z-index 2 → CRT scanlines (body::after)
z-index 3 → page content (nav/hero/sections)
z-index 9000 → mode-overlay during transitions
z-index 9997 → theme-cursor-canvas (trail)
z-index 9998 → page chrome (matrix-statusbar / studio-progress)
z-index 9999 → magic-toggle button (always on top, always blue)
───────────────────────────────────────────────────────────────────── */
/* ─── Universal themed-cursor trail canvas ─── */
.theme-cursor-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9997;
}
/* The trail layer should not block clicks even on subpixel touch */
html .theme-cursor-canvas { touch-action: none; }
/* In Island, the cursor sparkles are warm light — screen blend so they
pop on the photo */
html.mode-island .theme-cursor-canvas { mix-blend-mode: screen; }
/* In Studio, the halos read as soft shadows on white — multiply darkens */
html.mode-studio .theme-cursor-canvas { mix-blend-mode: multiply; }
/* The existing studio-spot is now redundant (cursor trail covers it).
Hide it in Studio to avoid double-spot drawing. */
html.mode-studio .studio-spot { display: none !important; }
/* When a Studio card is being tilted, ensure its children inherit the
3D context so backdrops don't break */
html.mode-studio .svc-card,
html.mode-studio .testimonial-card,
html.mode-studio .work-grid > *,
html.mode-studio .process-step {
transform-style: preserve-3d;
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — FINAL OVERRIDES (user-feedback pass)
• mono font EVERYWHERE
• no brackets, no [01], no ─── labels
• no card / grid / process / stats borders
• clean status-bar hidden
• credo-block (moved hero headline)
• stats grid properly aligned
═══════════════════════════════════════════════════════════════════════ */
/* 1. Mono font on absolutely everything in Matrix mode */
html.mode-matrix,
html.mode-matrix body,
html.mode-matrix h1,
html.mode-matrix h2,
html.mode-matrix h3,
html.mode-matrix h4,
html.mode-matrix h5,
html.mode-matrix p,
html.mode-matrix a,
html.mode-matrix span,
html.mode-matrix em,
html.mode-matrix strong,
html.mode-matrix button,
html.mode-matrix input,
html.mode-matrix textarea,
html.mode-matrix li,
html.mode-matrix .btn-chip,
html.mode-matrix .btn-chip-copper,
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary,
html.mode-matrix .logo,
html.mode-matrix .section-headline,
html.mode-matrix .section-eyebrow,
html.mode-matrix .hero-text .line,
html.mode-matrix .hero-text .sub,
html.mode-matrix .credo-text .line,
html.mode-matrix .credo-text .sub,
html.mode-matrix .manifesto-text {
font-family: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
font-style: normal !important;
}
/* The em emphasis inside Manifesto / Credo should also stay mono (no italic) */
html.mode-matrix em { font-style: normal !important; }
/* 2. Hide the terminal status-bar entirely (we disabled the JS call,
but this is a belt-and-braces in case anything injects it). */
html.mode-matrix .matrix-statusbar { display: none !important; }
/* 3. Strip all dashed/dotted/solid Matrix grid & card borders so the
video stays visible and the layout reads as a clean grid. */
html.mode-matrix .services-grid > *,
html.mode-matrix .stats-grid > *,
html.mode-matrix .stats-band > *,
html.mode-matrix .process-step,
html.mode-matrix .work-grid > *,
html.mode-matrix .testimonial-card,
html.mode-matrix .svc-card {
border: 0 !important;
}
html.mode-matrix .stats-grid,
html.mode-matrix .stats-band,
html.mode-matrix .services-grid,
html.mode-matrix .ticker-band,
html.mode-matrix .footer-band {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* 4. Work-grid: the 1px green page-bg between tiles was a fake border —
replace with proper gap. */
html.mode-matrix .work-grid {
background: transparent !important;
gap: 14px !important;
}
/* 5. Stats grid: clean 4-column on desktop, 2 on tablet, 1 on mobile.
Centre the numbers + labels, mono font, no separators. */
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 32px !important;
border: 0 !important;
padding: 48px 0 !important;
}
html.mode-matrix .stats-grid > * {
text-align: left !important;
padding: 0 !important;
border: 0 !important;
}
@media (max-width: 900px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
}
@media (max-width: 560px) {
html.mode-matrix .stats-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
}
html.mode-matrix .stats-grid .num {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5vw, 64px) !important;
line-height: 1 !important;
color: #5BFF8B !important;
text-shadow: 0 0 14px rgba(0, 255, 100, 0.5);
letter-spacing: 0.02em;
}
html.mode-matrix .stats-grid .label {
margin-top: 10px !important;
color: rgba(170, 255, 195, 0.65) !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
}
/* 6. Services grid: clean equal columns, no faux dashed borders */
html.mode-matrix .services-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
padding: 0 !important;
}
@media (max-width: 1100px) {
html.mode-matrix .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
html.mode-matrix .services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
html.mode-matrix .svc-card,
html.mode-matrix .work-grid > *,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
padding: 28px 26px !important;
}
/* 7. Process row: align without dashed separators */
html.mode-matrix .process-row {
gap: 18px !important;
}
html.mode-matrix .process-step {
border: 0 !important;
}
html.mode-matrix .process-arrow {
color: rgba(0, 255, 100, 0.5) !important;
font-size: 24px;
align-self: center;
}
/* 8. Nav chips — strip the bordered "[01]" look entirely.
Just a soft glassy pill with mono text. */
html.mode-matrix .nav-chips .btn-chip {
background: transparent !important;
border: 0 !important;
padding: 8px 12px !important;
color: rgba(170, 255, 195, 0.78) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 13px;
}
html.mode-matrix .nav-chips .btn-chip:hover {
color: #FFFFFF !important;
text-shadow: 0 0 10px rgba(0, 255, 120, 0.5);
}
/* 9. Hero CTA group — keep buttons borderless. Remove the small
`// scroll for the rest →` italic prefix's italics. */
html.mode-matrix .hero-cta .label,
html.mode-matrix .hero-cta .small {
font-family: 'Share Tech Mono', monospace !important;
font-style: normal !important;
}
/* 10. The "// внедрение ии-инструментов" hero-meta lines stay mono */
html.mode-matrix .hero-meta,
html.mode-matrix .hero-meta .small,
html.mode-matrix .hero-meta .btn-chip-copper {
font-family: 'Share Tech Mono', monospace !important;
font-style: normal !important;
}
/* 11. The moved hero-headline gets its own section styling.
In Matrix it picks up the mono font automatically (see rule #1). */
.credo-block {
padding: 80px 32px 40px;
text-align: center;
}
html.mode-matrix .credo-block .credo-text .line {
color: #C6FFD5 !important;
font-size: clamp(40px, 6vw, 80px) !important;
line-height: 1.05 !important;
font-weight: 400 !important;
letter-spacing: 0.01em;
text-shadow: 0 0 18px rgba(0, 255, 100, 0.4);
margin: 0 0 8px;
}
html.mode-matrix .credo-block .credo-text .sub {
margin: 28px auto 0;
max-width: 720px;
color: rgba(170, 255, 195, 0.75) !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
html.mode-matrix .credo-block .credo-text .sub strong {
color: #5BFF8B !important;
font-weight: 400 !important;
}
/* 12. Section eyebrows — drop the `/* ... */` decoration that made
them look like inline comments. The mono font alone reads as code. */
html.mode-matrix .section-eyebrow::before,
html.mode-matrix .section-eyebrow::after { content: '' !important; }
/* 13. Section headlines — drop the blinking underscore that was glued
to every h2. Mono font + colour is enough. */
html.mode-matrix .section-headline::after,
html.mode-matrix h2::after { content: none !important; animation: none !important; }
/* 14. Logo dot prefix — keep, but make it a clean square pulse */
html.mode-matrix .logo::before {
/* preserved upstream */
}
/* 15. Ticker band — borderless */
html.mode-matrix .ticker-band {
border: 0 !important;
background: rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PREMIUM PASS (user-feedback round 2)
• NO borders, NO box-shadows on ANY button / chip / CTA
• Pure text + subtle text-shadow glow, slightly stronger on hover
• Hero on first screen — just centered CTA cluster, no top-left panel
• Hero-meta moved into .credo-block (handled in index.html)
• Premium feel: more breathing room, mono everywhere
═══════════════════════════════════════════════════════════════════════ */
/* ─── HARD KILL all borders/shadows on every interactive element ─── */
/* Exclude any `.devins-*` (dev-inspector UI) so its buttons stay visible */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary,
html.mode-matrix .btn-chip,
html.mode-matrix .btn-chip-copper,
html.mode-matrix .nav-chips .btn-chip,
html.mode-matrix .lang-toggle button,
html.mode-matrix a.btn-primary,
html.mode-matrix a.btn-secondary,
html.mode-matrix button:not([class*="devins-"]):not(.devins-queue button):not(#magic-toggle) {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
padding: 10px 18px !important;
}
/* Pure mono text — colour + subtle glow */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary,
html.mode-matrix .btn-chip,
html.mode-matrix .btn-chip-copper,
html.mode-matrix .nav-chips .btn-chip {
color: rgba(198, 255, 213, 0.9) !important;
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(0, 255, 100, 0.25) !important;
text-decoration: none !important;
transition: color 200ms ease,
text-shadow 200ms ease,
transform 200ms cubic-bezier(.2,.7,.2,1) !important;
}
/* Stronger CTA — slightly brighter mint + tracking */
html.mode-matrix .btn-primary {
color: #DAFFE3 !important;
letter-spacing: 0.22em !important;
text-shadow: 0 0 10px rgba(0, 255, 120, 0.35) !important;
}
/* Hover — text gets brighter + soft glow */
html.mode-matrix .btn-primary:hover,
html.mode-matrix .btn-secondary:hover,
html.mode-matrix .btn-chip:hover,
html.mode-matrix .btn-chip-copper:hover,
html.mode-matrix .nav-chips .btn-chip:hover {
color: #FFFFFF !important;
text-shadow: 0 0 14px rgba(0, 255, 130, 0.75),
0 0 28px rgba(0, 255, 130, 0.32) !important;
transform: translateY(-1px);
background: transparent !important;
box-shadow: none !important;
}
html.mode-matrix .btn-primary:active,
html.mode-matrix .btn-secondary:active {
transform: translateY(0);
}
/* Lang toggle: same flat treatment */
html.mode-matrix .lang-toggle button {
color: rgba(170, 255, 195, 0.4) !important;
text-shadow: none !important;
padding: 4px 6px !important;
}
html.mode-matrix .lang-toggle button.active,
html.mode-matrix .lang-toggle button:hover {
color: #DAFFE3 !important;
text-shadow: 0 0 10px rgba(0, 255, 120, 0.55) !important;
border-bottom: 0 !important;
}
html.mode-matrix .lang-toggle .sep {
color: rgba(0, 255, 120, 0.25) !important;
}
/* Nav bar itself — no border/bg, just transparent over video */
html.mode-matrix .nav-bar {
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html.mode-matrix .nav-bar::after { display: none !important; }
/* ─── HERO — clean cinematic frame, centered CTA cluster ─── */
html.mode-matrix .hero {
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 32px !important;
}
html.mode-matrix .hero-cta {
position: static !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 18px !important;
text-align: center !important;
}
html.mode-matrix .hero-cta .label {
color: rgba(170, 255, 195, 0.55) !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
margin-bottom: 6px;
}
html.mode-matrix .hero-cta > div.label {
/* the `// листай дальше →` cue */
opacity: 0.65;
}
html.mode-matrix .hero-cta > a {
/* both Начать проект + Кейсы sit side-by-side */
}
html.mode-matrix .hero-cta {
flex-direction: row !important;
flex-wrap: wrap;
justify-content: center !important;
gap: 36px !important;
}
html.mode-matrix .hero-cta .label {
flex-basis: 100%;
text-align: center;
margin-bottom: 8px;
}
/* ─── CREDO BLOCK — now hosts hero-meta + headline + sub ─── */
html.mode-matrix .credo-block {
padding: 120px 32px 80px !important;
}
html.mode-matrix .credo-block .container {
text-align: center;
}
html.mode-matrix .credo-meta {
position: static !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0 auto 56px;
max-width: 720px;
}
html.mode-matrix .credo-meta .credo-eyebrow {
display: inline-block;
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase;
color: rgba(0, 255, 120, 0.55) !important;
text-shadow: 0 0 8px rgba(0, 255, 120, 0.2);
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.mode-matrix .credo-meta .small {
font-family: 'Share Tech Mono', monospace !important;
font-size: 13px !important;
line-height: 1.85 !important;
color: rgba(170, 255, 195, 0.65) !important;
letter-spacing: 0.04em;
}
/* Sub copy in credo — narrower max-width, tighter line-height for premium read */
html.mode-matrix .credo-block .credo-text .sub {
margin-top: 36px !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: rgba(170, 255, 195, 0.6) !important;
letter-spacing: 0.02em;
}
/* ─── Logo — clean, no glow excess ─── */
html.mode-matrix .logo {
color: #C6FFD5 !important;
text-shadow: 0 0 10px rgba(0, 255, 120, 0.4) !important;
letter-spacing: 0.24em !important;
}
/* ─── Premium breathing room on sections ─── */
html.mode-matrix section {
padding-top: 96px !important;
padding-bottom: 96px !important;
}
html.mode-matrix .stats-band,
html.mode-matrix .stats-grid {
padding: 64px 0 !important;
}
/* ─── Section eyebrows — tighter, no brackets, more breathing ─── */
html.mode-matrix .section-eyebrow {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase;
color: rgba(0, 255, 120, 0.5) !important;
margin-bottom: 24px !important;
}
/* ─── Section headlines — clean, no decoration ─── */
html.mode-matrix .section-headline,
html.mode-matrix h2 {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: #DAFFE3 !important;
text-shadow: 0 0 14px rgba(0, 255, 100, 0.3);
}
/* ─── Service card text — readable mono ─── */
html.mode-matrix .svc-card h3,
html.mode-matrix .work-grid h3,
html.mode-matrix .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-weight: 400 !important;
color: #DAFFE3 !important;
letter-spacing: 0.04em !important;
font-size: 22px !important;
text-transform: uppercase;
}
html.mode-matrix .svc-card p,
html.mode-matrix .svc-bullets li,
html.mode-matrix .svc-card .svc-body,
html.mode-matrix .work-grid p,
html.mode-matrix .process-step .ps-body,
html.mode-matrix .testimonial-card p {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-weight: 400 !important;
color: rgba(198, 255, 213, 0.72) !important;
font-size: 13px !important;
line-height: 1.75 !important;
letter-spacing: 0.02em;
}
/* Numeric tags (01, 02, 03) — mono, dim, no decoration */
html.mode-matrix .svc-num,
html.mode-matrix .ps-num {
font-family: 'Share Tech Mono', monospace !important;
color: rgba(0, 255, 120, 0.55) !important;
font-size: 11px !important;
letter-spacing: 0.28em !important;
margin-bottom: 14px;
}
html.mode-matrix .svc-num::before,
html.mode-matrix .ps-num::before { content: none !important; }
/* ─── Strip the inset glow we had on .btn-primary cards (already 0, double-safety) ─── */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — GLOBAL BORDER & SHADOW KILL (round 3, user feedback)
Hard rule: ZERO borders, ZERO box-shadows on EVERY element in matrix
mode. The dev-inspector UI is excluded so its outlines still work.
Text-shadow (the green glow) is KEPT — it's the matrix identity, not a
"shadow" in the spatial sense.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix *:not([class*="devins-"]) {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* Keep card glass tint + blur for legibility (not borders/shadows) */
html.mode-matrix .svc-card,
html.mode-matrix .work-grid > *,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
background: rgba(0, 10, 5, 0.55) !important;
backdrop-filter: blur(10px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
border-radius: 2px !important;
}
/* Section dividers (the inline `border-top: 4px solid` style on #process
and #contact) — nuke via specificity */
html.mode-matrix section[style*="border-top"],
html.mode-matrix section[style*="border-bottom"] {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PROCESS ROW REDESIGN
Code-execution-log feel: hex-prefixed steps connected by dotted ASCII
pipeline, active step gets a blinking █ cursor. Clean grid, no borders.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix .process-row {
display: grid !important;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
gap: 0 !important;
align-items: stretch !important;
margin-top: 56px !important;
}
@media (max-width: 1100px) {
html.mode-matrix .process-row {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* Step cards */
html.mode-matrix .process-step {
padding: 28px 26px !important;
position: relative;
border-left: 2px solid rgba(0, 255, 120, 0.4) !important; /* one accent stripe */
background: rgba(0, 10, 5, 0.45) !important;
}
html.mode-matrix .process-step::before {
content: '> RUNNING ━━━━━━' !important;
display: block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 0.22em !important;
color: rgba(0, 255, 120, 0.35) !important;
text-transform: uppercase;
margin-bottom: 14px;
text-shadow: 0 0 6px rgba(0, 255, 120, 0.18);
}
html.mode-matrix .process-step.active::before {
content: '> ACTIVE ━━━━━━' !important;
color: rgba(0, 255, 120, 0.85) !important;
text-shadow: 0 0 10px rgba(0, 255, 130, 0.5);
}
/* The number — hex style */
html.mode-matrix .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.3em !important;
color: rgba(0, 255, 120, 0.55) !important;
text-transform: uppercase;
margin-bottom: 10px;
}
html.mode-matrix .process-step .ps-num::before {
content: '0x' !important;
opacity: 0.5;
}
/* The step name — bold mono uppercase with blinking cursor on .active */
html.mode-matrix .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
color: #DAFFE3 !important;
text-transform: uppercase;
text-shadow: 0 0 14px rgba(0, 255, 120, 0.35);
margin-bottom: 14px;
position: relative;
}
html.mode-matrix .process-step.active .ps-name::after {
content: '█' !important;
display: inline-block;
margin-left: 8px;
color: #5BFF8B;
text-shadow: 0 0 12px rgba(0, 255, 130, 0.7);
animation: mx-step-blink 1s steps(2, end) infinite;
}
@keyframes mx-step-blink {
0%, 49% { opacity: 1; }
50%, 99% { opacity: 0; }
}
/* The body copy — softer mono */
html.mode-matrix .process-step .ps-body {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: 12.5px !important;
line-height: 1.85 !important;
color: rgba(198, 255, 213, 0.62) !important;
letter-spacing: 0.02em;
}
/* Connector arrow between steps — ASCII pipeline, animated dot crawl */
html.mode-matrix .process-arrow {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
min-width: 56px !important;
position: relative;
overflow: hidden;
}
html.mode-matrix .process-arrow > * { display: none !important; }
html.mode-matrix .process-arrow::before {
content: '· · · · · · ·' !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
color: rgba(0, 255, 120, 0.4) !important;
letter-spacing: 0.2em;
text-shadow: 0 0 8px rgba(0, 255, 120, 0.25);
}
html.mode-matrix .process-arrow::after {
content: '►' !important;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #5BFF8B;
font-size: 12px;
text-shadow: 0 0 12px rgba(0, 255, 130, 0.7);
animation: mx-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes mx-arrow-pulse {
0%, 100% { opacity: 0.4; transform: translate(-2px, -50%); }
50% { opacity: 1; transform: translate(2px, -50%); }
}
/* Mobile: vertical pipeline */
@media (max-width: 1100px) {
html.mode-matrix .process-arrow {
padding: 8px 0 !important;
min-width: auto !important;
height: 32px !important;
}
html.mode-matrix .process-arrow::before {
content: '│' !important;
font-size: 22px !important;
letter-spacing: 0;
}
html.mode-matrix .process-arrow::after {
content: '▼' !important;
right: auto;
left: 50%;
transform: translateX(-50%) translateY(-30%);
font-size: 10px;
animation: mx-arrow-pulse-v 1.6s ease-in-out infinite;
}
@keyframes mx-arrow-pulse-v {
0%, 100% { opacity: 0.4; transform: translate(-50%, -55%); }
50% { opacity: 1; transform: translate(-50%, -25%); }
}
}
/* The "active" step glows a touch brighter via subtle inner highlight
(not a box-shadow — a CSS gradient on the left edge, so it doesn't
violate the no-shadow rule). */
html.mode-matrix .process-step.active {
border-left-color: #5BFF8B !important;
background:
linear-gradient(90deg, rgba(0, 255, 120, 0.06) 0%, rgba(0, 0, 0, 0) 40%),
rgba(0, 10, 5, 0.55) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PREMIUM POLISH PASS (round 4)
Refined palette (jade/mint instead of neon), editorial typography,
tabular numerics, generous breathing room, hairline accents, ambient
corner light-leaks for that "expensive cinema" feel.
═══════════════════════════════════════════════════════════════════════ */
/* ─── 0. Refined palette: cooler, more cinematic jade ─── */
html.mode-matrix {
--mx-jade: #B8FFD4; /* primary text — mint-jade, less aggressive than #00FF66 */
--mx-jade-dim: rgba(184, 255, 212, 0.65);
--mx-jade-faint: rgba(184, 255, 212, 0.32);
--mx-jade-accent: #5BFF8B; /* punch */
--mx-shadow-soft: 0 0 16px rgba(0, 255, 120, 0.28);
}
/* ─── 1. Tabular numerics across the board (premium detail) ─── */
html.mode-matrix .num,
html.mode-matrix .stats-grid .num,
html.mode-matrix .ps-num,
html.mode-matrix .svc-num,
html.mode-matrix .matrix-statusbar,
html.mode-matrix code,
html.mode-matrix pre {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* ─── 2. Body text: tighter, calmer ─── */
html.mode-matrix body {
font-family: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
color: var(--mx-jade) !important;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── 3. NAV — премиальная высота + тонкий разделитель снизу ─── */
html.mode-matrix .nav-bar {
height: 84px !important;
display: flex;
align-items: center;
}
html.mode-matrix .nav-bar .container { height: 84px !important; }
html.mode-matrix .nav-bar::after {
content: '';
position: absolute;
left: 6%; right: 6%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(184,255,212,0.18) 50%, transparent 100%);
display: block !important;
pointer-events: none;
}
html.mode-matrix .logo {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
letter-spacing: 0.32em !important;
color: var(--mx-jade) !important;
font-weight: 400 !important;
}
html.mode-matrix .logo .pulse {
width: 6px !important; height: 6px !important;
background: var(--mx-jade-accent) !important;
border-radius: 0 !important;
margin-right: 14px !important;
}
html.mode-matrix .nav-chips {
gap: 4px !important;
}
html.mode-matrix .nav-chips .btn-chip {
font-size: 11px !important;
letter-spacing: 0.24em !important;
color: var(--mx-jade-dim) !important;
padding: 8px 14px !important;
}
html.mode-matrix .nav-chips .btn-chip:hover {
color: #FFFFFF !important;
}
/* ─── 4. HERO — гигантский кинокадр, ультра-тонкая CTA-группа ─── */
html.mode-matrix .hero {
min-height: calc(100vh - 84px) !important;
padding: 0 32px 80px !important;
position: relative;
}
html.mode-matrix .hero::before {
/* Хроматическая полоска-watermark снизу в углу — еле заметная,
создаёт ощущение "это не шаблон, это кадр" */
content: 'DEADLINE / 01';
position: absolute;
left: 32px; bottom: 28px;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.4em;
color: rgba(184, 255, 212, 0.28);
text-shadow: 0 0 6px rgba(0, 255, 120, 0.18);
pointer-events: none;
}
html.mode-matrix .hero::after {
content: 'PHUKET × BANGKOK';
position: absolute;
right: 32px; bottom: 28px;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.4em;
color: rgba(184, 255, 212, 0.28);
pointer-events: none;
}
html.mode-matrix .hero-cta {
gap: 48px !important; /* generous space between two CTAs */
}
html.mode-matrix .hero-cta .btn-primary,
html.mode-matrix .hero-cta .btn-secondary {
font-size: 12px !important;
letter-spacing: 0.32em !important;
padding: 14px 4px !important;
position: relative;
}
/* Hairline underline under each hero CTA — премиум-touch */
html.mode-matrix .hero-cta .btn-primary::after,
html.mode-matrix .hero-cta .btn-secondary::after {
content: '' !important;
position: absolute !important;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--mx-jade-faint) 50%, transparent 100%);
transition: background 220ms ease, transform 220ms ease;
}
html.mode-matrix .hero-cta .btn-primary:hover::after,
html.mode-matrix .hero-cta .btn-secondary:hover::after {
background: linear-gradient(90deg, transparent 0%, var(--mx-jade-accent) 50%, transparent 100%);
transform: scaleX(1.05);
}
/* ─── 5. Стат-блок — гигантские номера, крошечные подписи ─── */
html.mode-matrix .stats-grid .num {
font-size: clamp(48px, 6vw, 84px) !important;
font-weight: 400 !important;
color: var(--mx-jade-accent) !important;
text-shadow: 0 0 24px rgba(0, 255, 130, 0.4);
letter-spacing: -0.01em !important;
line-height: 0.92 !important;
}
html.mode-matrix .stats-grid .label {
margin-top: 18px !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(184, 255, 212, 0.45) !important;
}
/* ─── 6. SECTION HEADLINES — editorial scale + premium tracking ─── */
html.mode-matrix .section-eyebrow {
font-size: 10px !important;
letter-spacing: 0.38em !important;
color: rgba(184, 255, 212, 0.42) !important;
margin-bottom: 32px !important;
padding-left: 28px;
position: relative;
}
html.mode-matrix .section-eyebrow::before {
content: '' !important;
position: absolute;
left: 0; top: 50%;
width: 20px; height: 1px;
background: var(--mx-jade-accent);
opacity: 0.6;
}
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
font-size: clamp(40px, 5.6vw, 88px) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
line-height: 1.02 !important;
color: var(--mx-jade) !important;
text-shadow: 0 0 20px rgba(0, 255, 120, 0.22);
margin-bottom: 48px !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: var(--mx-jade-accent) !important;
font-style: normal !important;
}
/* ─── 7. CARDS — clean, deeper tint, generous padding ─── */
html.mode-matrix .svc-card,
html.mode-matrix .work-grid > *,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
padding: 36px 32px !important;
background: rgba(0, 8, 4, 0.5) !important;
backdrop-filter: blur(14px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
border-radius: 2px !important;
}
/* Hairline top-edge on each card for premium accent */
html.mode-matrix .svc-card,
html.mode-matrix .work-grid > *,
html.mode-matrix .testimonial-card {
position: relative;
}
html.mode-matrix .svc-card::before,
html.mode-matrix .work-grid > *::before,
html.mode-matrix .testimonial-card::before {
content: '' !important;
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(184,255,212,0.22) 50%, transparent 100%);
}
/* Card titles — refined */
html.mode-matrix .svc-card h3,
html.mode-matrix .work-grid h3,
html.mode-matrix .process-step .ps-name {
font-size: 18px !important;
letter-spacing: 0.06em !important;
margin-bottom: 18px !important;
}
html.mode-matrix .svc-bullets {
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
html.mode-matrix .svc-bullets li {
position: relative;
padding-left: 18px !important;
margin-bottom: 12px !important;
font-size: 13px !important;
line-height: 1.7 !important;
color: rgba(184, 255, 212, 0.78) !important;
}
html.mode-matrix .svc-bullets li::before {
content: '·' !important;
position: absolute;
left: 4px; top: 0;
color: var(--mx-jade-accent);
font-weight: 700;
font-size: 18px;
line-height: 1.3;
}
/* ─── 8. TICKER — quiet hairline, less aggressive ─── */
html.mode-matrix .ticker-band {
height: 36px !important;
padding: 0 !important;
background: rgba(0, 0, 0, 0.55) !important;
position: relative;
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(184, 255, 212, 0.55) !important;
}
html.mode-matrix .ticker-band::before,
html.mode-matrix .ticker-band::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(184,255,212,0.18) 50%, transparent 100%);
display: block !important;
}
html.mode-matrix .ticker-band::before { top: 0; }
html.mode-matrix .ticker-band::after { bottom: 0; }
html.mode-matrix .ticker-track span {
margin-right: 56px !important;
}
html.mode-matrix .ticker-track .dot {
color: var(--mx-jade-accent) !important;
margin-right: 12px !important;
}
/* ─── 9. MANIFESTO — editorial pull-quote ─── */
html.mode-matrix .manifesto-block {
padding: 160px 32px !important;
text-align: center;
}
html.mode-matrix .manifesto-text {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: clamp(36px, 4.6vw, 68px) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
line-height: 1.18 !important;
color: var(--mx-jade) !important;
text-shadow: 0 0 24px rgba(0, 255, 120, 0.3);
}
html.mode-matrix .manifesto-text em {
color: var(--mx-jade-accent) !important;
font-style: normal !important;
}
/* ─── 10. CONTACT — generous, centered ─── */
html.mode-matrix #contact {
padding: 160px 32px !important;
background: transparent !important;
}
html.mode-matrix .contact-block .btn-primary,
html.mode-matrix .contact-block .btn-secondary {
font-size: 14px !important;
letter-spacing: 0.22em !important;
padding: 16px 8px !important;
position: relative;
}
html.mode-matrix .contact-block .btn-primary::after,
html.mode-matrix .contact-block .btn-secondary::after {
content: '' !important;
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mx-jade-faint), transparent);
transition: background 220ms ease;
}
html.mode-matrix .contact-block .btn-primary:hover::after,
html.mode-matrix .contact-block .btn-secondary:hover::after {
background: linear-gradient(90deg, transparent, var(--mx-jade-accent), transparent);
}
/* ─── 11. AMBIENT CORNER LIGHT-LEAKS (cinematic accent) ─── */
html.mode-matrix body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
background:
radial-gradient(circle at 0% 0%, rgba(0, 255, 120, 0.05) 0%, rgba(0,0,0,0) 25%),
radial-gradient(circle at 100% 100%,rgba(0, 255, 120, 0.04) 0%, rgba(0,0,0,0) 25%);
mix-blend-mode: screen;
}
/* ─── 12. CREDO block — calmer, more editorial ─── */
html.mode-matrix .credo-block {
padding: 140px 32px 100px !important;
}
html.mode-matrix .credo-block .credo-text .line {
font-size: clamp(36px, 5.4vw, 80px) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
line-height: 1.04 !important;
color: var(--mx-jade) !important;
text-shadow: 0 0 20px rgba(0, 255, 120, 0.28);
margin: 0 0 6px !important;
}
html.mode-matrix .credo-block .credo-text .line-1 {
color: var(--mx-jade-dim) !important;
}
html.mode-matrix .credo-meta .credo-eyebrow {
font-size: 10px !important;
letter-spacing: 0.4em !important;
color: var(--mx-jade-faint) !important;
}
html.mode-matrix .credo-meta .small {
font-size: 12px !important;
letter-spacing: 0.04em !important;
color: rgba(184, 255, 212, 0.55) !important;
line-height: 2 !important;
}
/* ─── 13. LANG-TOGGLE — slimmer, more refined ─── */
html.mode-matrix .lang-toggle button {
font-size: 11px !important;
letter-spacing: 0.24em !important;
}
html.mode-matrix .lang-toggle .sep {
margin: 0 8px !important;
opacity: 0.4;
}
/* ─── 14. FOOTER (if present) — hairline only ─── */
html.mode-matrix .footer-band {
padding: 32px !important;
background: transparent !important;
border-top: 0 !important;
position: relative;
font-size: 10px !important;
letter-spacing: 0.3em !important;
color: rgba(184, 255, 212, 0.4) !important;
}
html.mode-matrix .footer-band::before {
content: '';
position: absolute;
left: 6%; right: 6%; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,255,212,0.18), transparent);
}
/* ─── 15. SCROLLBAR — minimal premium ─── */
html.mode-matrix::-webkit-scrollbar { width: 6px; }
html.mode-matrix::-webkit-scrollbar-track { background: transparent; }
html.mode-matrix::-webkit-scrollbar-thumb {
background: rgba(184, 255, 212, 0.25);
border-radius: 0;
}
html.mode-matrix::-webkit-scrollbar-thumb:hover {
background: var(--mx-jade-accent);
}
/* ─── 16. SELECTION ─── */
html.mode-matrix ::selection {
background: var(--mx-jade-accent) !important;
color: #001a08 !important;
text-shadow: none !important;
}
/* ─── 17. Smooth out the rain — even calmer for premium look ─── */
html.mode-matrix .matrix-rain-ambient {
opacity: 0.22 !important;
}
/* ─── 18. Reduce video filter for a richer image ─── */
.matrix-video-element {
opacity: 0.78 !important;
filter: contrast(1.05) saturate(1.02) brightness(0.96) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PURIST PASS (round 5, user feedback)
Goal: text-only premium. No cards, no backdrops, no decorative
chrome. The Morpheus video reads as the hero. Every section is
typography floating on it.
═══════════════════════════════════════════════════════════════════════ */
/* 0. KILL all card backgrounds + blur (cards become invisible containers) */
html.mode-matrix .svc-card,
html.mode-matrix .work-grid > *,
html.mode-matrix .work-grid .sticker-card,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
padding: 24px 20px !important;
}
/* Also strip any inner element backgrounds inside those containers */
html.mode-matrix .svc-card *,
html.mode-matrix .work-grid > * *,
html.mode-matrix .testimonial-card *,
html.mode-matrix .process-step * {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
}
/* 1. KILL all the hairline gradient strips I added in round 4 */
html.mode-matrix .nav-bar::after,
html.mode-matrix .ticker-band::before,
html.mode-matrix .ticker-band::after,
html.mode-matrix .footer-band::before,
html.mode-matrix .svc-card::before,
html.mode-matrix .work-grid > *::before,
html.mode-matrix .testimonial-card::before {
content: none !important;
display: none !important;
background: none !important;
}
/* 2. KILL hero corner watermarks (DEADLINE / 01 + PHUKET × BANGKOK) */
html.mode-matrix .hero::before,
html.mode-matrix .hero::after {
content: none !important;
display: none !important;
}
/* 3. KILL ambient corner light-leaks — they were a nice touch but the
user wants the cleanest possible canvas */
html.mode-matrix body::before {
content: none !important;
display: none !important;
background: none !important;
}
/* 4. KILL CRT scanlines (or near-zero) — premium = no overlay noise */
html.mode-matrix body::after {
opacity: 0.18 !important;
}
/* 5. STATS — drop the `> ` chevron prefix, premium centred type */
html.mode-matrix .num::before,
html.mode-matrix .stats-grid .num::before { content: none !important; }
html.mode-matrix .stats-grid {
text-align: center !important;
padding: 80px 0 !important;
}
html.mode-matrix .stats-grid > * {
text-align: center !important;
}
html.mode-matrix .stats-grid .num {
display: block;
margin-bottom: 14px !important;
}
html.mode-matrix .stats-grid .label {
display: block;
max-width: 220px;
margin: 0 auto !important;
}
/* 6. WORK-GRID logo blocks (VRP / KD / RA) — make them text-only labels */
html.mode-matrix .case-art,
html.mode-matrix .case-art.b,
html.mode-matrix .case-art.c {
background: none !important;
background-image: none !important;
color: var(--mx-jade-accent) !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 22px !important;
font-weight: 400 !important;
letter-spacing: 0.28em !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin-bottom: 18px !important;
display: block !important;
text-align: left !important;
text-shadow: 0 0 14px rgba(0, 255, 120, 0.35);
border-radius: 0 !important;
}
/* Kill any rotation that made cards look like stickers */
html.mode-matrix .work-grid .sticker-card {
transform: none !important;
}
html.mode-matrix .case-meta {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: rgba(184, 255, 212, 0.45) !important;
margin-bottom: 16px !important;
}
/* 7. SVC-NUM (`// 01 · WEB`) — keep but premium type */
html.mode-matrix .svc-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: rgba(184, 255, 212, 0.42) !important;
margin-bottom: 22px !important;
padding: 0 !important;
}
/* 8. SVC / WORK / PROCESS — titles and body */
html.mode-matrix .svc-name,
html.mode-matrix .work-grid h3,
html.mode-matrix .work-grid .svc-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: 24px !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: var(--mx-jade) !important;
text-shadow: 0 0 18px rgba(0, 255, 120, 0.32);
margin-bottom: 18px !important;
}
/* 9. Bullets — slim dot, jade-faint text */
html.mode-matrix .svc-bullets {
margin-top: 8px !important;
padding: 0 !important;
}
html.mode-matrix .svc-bullets li::before {
content: '·' !important;
color: var(--mx-jade-accent);
}
/* 10. TICKER — text-only, no hairlines, slim height */
html.mode-matrix .ticker-band {
height: 32px !important;
background: transparent !important;
}
/* 11. RAIN — almost imperceptible, just ambient texture */
html.mode-matrix .matrix-rain-ambient {
opacity: 0.10 !important;
}
/* 12. CURSOR — back to default system cursor, no custom green underscore */
html.mode-matrix,
html.mode-matrix body,
html.mode-matrix *:not(.devins-active):not(.devins-active *) {
cursor: default !important;
}
html.mode-matrix a,
html.mode-matrix button,
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary,
html.mode-matrix .btn-chip,
html.mode-matrix .lang-toggle button,
html.mode-matrix .magic-toggle {
cursor: pointer !important;
}
html.mode-matrix input,
html.mode-matrix textarea {
cursor: text !important;
}
/* 13. NAV — no hairline divider */
html.mode-matrix .nav-bar {
border-bottom: 0 !important;
}
/* 14. FOOTER — borderless */
html.mode-matrix .footer-band {
border-top: 0 !important;
}
/* 15. Sticker-card chips that show `+32% conversion` etc. — flat text */
html.mode-matrix .work-grid .btn-chip-copper {
background: transparent !important;
color: var(--mx-jade-accent) !important;
border: 0 !important;
padding: 0 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
margin-top: 18px !important;
display: inline-block !important;
}
/* 16. Process-step left accent stripe — drop it, text only */
html.mode-matrix .process-step {
border-left: 0 !important;
}
html.mode-matrix .process-step::before { content: none !important; display: none !important; }
html.mode-matrix .process-step.active::before { content: none !important; display: none !important; }
html.mode-matrix .process-step.active {
background: transparent !important;
}
/* 17. Connector dots between process steps — keep but more subtle */
html.mode-matrix .process-arrow::before {
opacity: 0.5;
}
/* 18. Make the `// 01 · WEB`-style svc-num lighter green so it doesn't
compete with the headline */
html.mode-matrix .svc-num {
text-shadow: none !important;
}
/* 19. Reveal default position for cards (no transform tricks) */
html.mode-matrix .work-grid > *,
html.mode-matrix .svc-card,
html.mode-matrix .testimonial-card {
transform: none !important;
}
/* 20. Testimonials marquee — text only, calmer */
html.mode-matrix .testimonials-marquee {
border-top: 0 !important;
border-bottom: 0 !important;
}
html.mode-matrix .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: rgba(184, 255, 212, 0.78) !important;
}
html.mode-matrix .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: rgba(184, 255, 212, 0.5) !important;
}
/* 21. Re-introduce hairline UNDER hero CTAs ONLY (premium accent that
the user liked — and these are local to interactive elements, not
section dividers) */
html.mode-matrix .hero-cta .btn-primary::after,
html.mode-matrix .hero-cta .btn-secondary::after,
html.mode-matrix .contact-block .btn-primary::after,
html.mode-matrix .contact-block .btn-secondary::after {
content: '' !important;
display: block !important;
}
/* ─── Logo alignment: stick to left edge, full-width nav in matrix ───
(from dev-inspector request: «это сделай в лево») */
html.mode-matrix .nav-bar > .container {
max-width: none !important;
width: 100% !important;
padding-left: 28px !important;
padding-right: 28px !important;
}
html.mode-matrix .nav-bar .logo {
margin-left: 0 !important;
}
@media (max-width: 700px) {
html.mode-matrix .nav-bar > .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PATCH (dev-inspector feedback round 6):
• Kill the 4px border + drop-shadow + rotation on .sticker-card
(services + work cards) which I missed earlier
• Left-align ALL main headlines (no more centred manifestos / stats / credo)
═══════════════════════════════════════════════════════════════════════ */
/* Sticker cards everywhere in matrix — no border, no drop-shadow, no rotation */
html.mode-matrix .sticker-card,
html.mode-matrix .services-grid .sticker-card,
html.mode-matrix .work-grid .sticker-card {
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
transform: none !important;
padding: 24px 20px !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.mode-matrix .sticker-card:hover {
transform: none !important;
box-shadow: none !important;
}
/* All main headlines + sections left-aligned in matrix */
html.mode-matrix .credo-block,
html.mode-matrix .credo-block .container,
html.mode-matrix .manifesto-block,
html.mode-matrix .manifesto-block .container,
html.mode-matrix #contact,
html.mode-matrix #contact .container,
html.mode-matrix .contact-block,
html.mode-matrix .stats-grid,
html.mode-matrix .stats-band {
text-align: left !important;
}
html.mode-matrix .stats-grid > *,
html.mode-matrix .stats-grid .num,
html.mode-matrix .stats-grid .label,
html.mode-matrix .credo-block .credo-text,
html.mode-matrix .credo-block .credo-meta,
html.mode-matrix .manifesto-text {
text-align: left !important;
margin-left: 0 !important;
}
/* Section headlines themselves — left aligned by default but enforce */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix h2,
html.mode-matrix h3 {
text-align: left !important;
}
/* Credo block container — give it the same left-padding as nav for alignment */
html.mode-matrix .credo-block .container,
html.mode-matrix .manifesto-block .container,
html.mode-matrix #contact .container {
padding-left: 28px !important;
padding-right: 28px !important;
max-width: none !important;
}
/* Contact CTAs cluster should also left-align */
html.mode-matrix .contact-block > div {
justify-content: flex-start !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MAGIC TOGGLE — KEEP BLUE in all modes (user request).
Restores the original blue gradient + glow that matrix-mode resets
accidentally wiped out.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle,
html .magic-toggle {
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
padding: 0 !important;
width: 46px !important;
height: 36px !important;
box-shadow:
0 0 0 0 rgba(0, 191, 255, 0.55),
0 4px 14px -2px rgba(0, 191, 255, 0.45),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
animation: magic-pulse 2.4s ease-in-out infinite !important;
}
/* Per-mode aura tint preserved on the box-shadow */
html.mode-matrix .magic-toggle {
box-shadow:
0 0 0 0 rgba(0, 255, 95, 0.45),
0 4px 14px -2px rgba(0, 255, 95, 0.40),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
}
html.mode-island .magic-toggle {
box-shadow:
0 0 0 0 rgba(255, 200, 120, 0.45),
0 4px 14px -2px rgba(255, 200, 120, 0.45),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
}
html.mode-studio .magic-toggle {
box-shadow:
0 0 0 0 rgba(220, 235, 255, 0.55),
0 4px 14px -2px rgba(220, 235, 255, 0.5),
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — HARD OVERRIDE (restored — keeps the premium clean look:
pure black bg, no math-formula bg, brackets killed, hero-text/hero-meta
/work hidden, hero is a clean cinematic frame.)
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix body {
background: #000 !important;
background-image: none !important;
background-color: #000 !important;
}
html.mode-matrix .nav-chips .btn-chip::before,
html.mode-matrix .nav-chips .btn-chip::after,
html.mode-matrix .btn-primary::before,
html.mode-matrix .btn-primary::after,
html.mode-matrix .btn-secondary::before,
html.mode-matrix .btn-chip::before,
html.mode-matrix .btn-chip::after,
html.mode-matrix .btn-chip-copper::before,
html.mode-matrix .btn-chip-copper::after,
html.mode-matrix .section-eyebrow::before,
html.mode-matrix .section-eyebrow::after,
html.mode-matrix .section-headline::after,
html.mode-matrix h2::after,
html.mode-matrix h3::after,
html.mode-matrix .svc-card::before,
html.mode-matrix .work-grid > *::before,
html.mode-matrix .process-step::before,
html.mode-matrix .testimonial-card::before,
html.mode-matrix .num::before {
content: none !important;
display: none !important;
}
html.mode-matrix .nav-chips { counter-reset: none !important; }
html.mode-matrix .hero .hero-text {
display: none !important;
}
html.mode-matrix #work {
display: none !important;
}
html.mode-matrix .hero .hero-meta {
display: none !important;
}
html.mode-matrix .hero {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 100vh !important;
padding: 0 32px !important;
}
html.mode-matrix .hero-cta {
position: static !important;
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 36px !important;
text-align: center !important;
width: 100%;
max-width: 720px;
}
html.mode-matrix .hero-cta .label,
html.mode-matrix .hero-cta > .label {
display: none !important;
}
html.mode-matrix body::after { opacity: 0.18 !important; }
html.mode-matrix .matrix-statusbar { display: none !important; }
html.mode-matrix .matrix-rain-ambient { opacity: 0.18 !important; }
/* ═══════════════════════════════════════════════════════════════════════
MAGIC TOGGLE — fixed position in top-right viewport corner
═══════════════════════════════════════════════════════════════════════ */
.magic-toggle,
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle,
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle {
position: fixed !important;
top: 18px !important;
right: 18px !important;
margin: 0 !important;
z-index: 99999 !important;
}
.mode-indicator,
html .mode-indicator,
html.mode-matrix .mode-indicator,
html.mode-island .mode-indicator,
html.mode-studio .mode-indicator,
html.mode-noir .mode-indicator,
html.mode-vault .mode-indicator,
html.mode-kinetic .mode-indicator {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 700px) {
.magic-toggle,
html .magic-toggle {
top: 12px !important;
right: 12px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
FINAL — magic-toggle & mode-indicator (user request)
• Mode-indicator (01/ORIGINAL, 05/MATRIX...) — hidden everywhere
• Magic-toggle — fixed in TOP-LEFT corner, visible in ALL modes
═══════════════════════════════════════════════════════════════════════ */
/* 1. Hide mode-indicator labels everywhere */
.mode-indicator,
html .mode-indicator,
html.mode-matrix .mode-indicator,
html.mode-island .mode-indicator,
html.mode-studio .mode-indicator,
html.mode-noir .mode-indicator,
html.mode-vault .mode-indicator,
html.mode-kinetic .mode-indicator {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. Magic-toggle — LOCKED to top-right of viewport in EVERY mode.
position: fixed → не зависит от nav layout каждого режима.
Кнопка теперь стоит в одном и том же физическом месте экрана везде. */
.magic-toggle,
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle,
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle {
position: fixed !important;
top: 18px !important;
right: 18px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
z-index: 999999 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
flex-shrink: 0 !important;
}
@media (max-width: 700px) {
.magic-toggle,
html .magic-toggle {
top: 12px !important;
right: 12px !important;
}
}
/* The nav-bar container must remain visible (some modes might
transform/hide it — defensive override) */
.nav-bar,
html.mode-matrix .nav-bar,
html.mode-noir .nav-bar,
html.mode-vault .nav-bar,
html.mode-kinetic .nav-bar,
html.mode-island .nav-bar,
html.mode-studio .nav-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — hide partner's ticker-band + stats restored to left editorial column
═══════════════════════════════════════════════════════════════════════ */
/* 1. Hide the scrolling ticker (partner's `.ticker-band` with «0 пропущенных дедлайнов...») */
html.mode-matrix .ticker-band,
html.mode-matrix .ticker-track,
html.mode-matrix .footer-band {
display: none !important;
}
/* 2. Stats — single left column, editorial layout (not 4-column horizontal) */
html.mode-matrix .stats-grid {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
max-width: 760px !important;
margin: 0 !important;
padding: 80px 28px !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > * {
display: grid !important;
grid-template-columns: 140px 1fr !important;
align-items: baseline !important;
gap: 32px !important;
padding: 18px 0 !important;
border-top: 1px solid rgba(91, 255, 139, 0.14) !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > *:last-child {
border-bottom: 1px solid rgba(91, 255, 139, 0.14) !important;
}
html.mode-matrix .stats-grid .num {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: clamp(42px, 5vw, 72px) !important;
font-weight: 400 !important;
color: #5BFF8B !important;
letter-spacing: -0.01em !important;
line-height: 0.95 !important;
text-shadow: 0 0 22px rgba(0, 255, 130, 0.4);
margin: 0 !important;
display: block !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: 13px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: rgba(218, 255, 227, 0.7) !important;
line-height: 1.5 !important;
margin: 0 !important;
display: block !important;
text-align: left !important;
}
/* 3. Section background — defensive override for any partner section bg */
html.mode-matrix section[style*="background"],
html.mode-matrix .stats-band[style*="background"] {
background: transparent !important;
background-image: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — CONTACT editorial split (recreate the praised version)
Left column: huge "05 / 05" + — Contact label + live-indicator
Right column: smaller headline + sub + channel list (EMAIL → ... )
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix #contact {
padding: 140px 0 100px !important;
background: transparent !important;
border-top: 0 !important;
}
html.mode-matrix #contact .container {
display: grid !important;
grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
gap: clamp(40px, 6vw, 96px) !important;
align-items: start !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 28px !important;
}
@media (max-width: 900px) {
html.mode-matrix #contact .container {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
}
/* LEFT: section-eyebrow becomes the gigantic 05/05 + label */
html.mode-matrix #contact .section-eyebrow {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(48px, 4.4vw, 72px) !important;
font-weight: 400 !important;
line-height: 0.9 !important;
letter-spacing: -0.02em !important;
color: rgba(184, 255, 212, 0.95) !important;
text-shadow: 0 0 18px rgba(0, 255, 120, 0.28);
text-transform: uppercase;
padding-top: 14px !important;
margin: 0 !important;
}
html.mode-matrix #contact .section-eyebrow::before { content: '' !important; display: none !important; }
html.mode-matrix #contact .section-eyebrow::after { content: '' !important; display: none !important; }
/* RIGHT: headline shrinks, sits left-aligned, big but not crazy */
html.mode-matrix #contact .section-headline {
grid-column: 2 !important;
grid-row: 1 !important;
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: clamp(32px, 4vw, 56px) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
line-height: 1.08 !important;
color: #DAFFE3 !important;
text-shadow: 0 0 20px rgba(0, 255, 120, 0.26);
text-align: left !important;
margin: 0 0 28px 0 !important;
max-width: 760px;
}
html.mode-matrix #contact .section-headline em {
font-style: normal !important;
color: var(--mx-jade-accent, #5BFF8B) !important;
}
/* RIGHT: sub-paragraph */
html.mode-matrix #contact .contact-block {
grid-column: 2 !important;
grid-row: 2 !important;
text-align: left !important;
padding: 0 !important;
background: transparent !important;
}
html.mode-matrix #contact .contact-block p {
margin: 0 0 36px 0 !important;
max-width: 720px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 13.5px !important;
line-height: 1.75 !important;
letter-spacing: 0.02em !important;
color: rgba(218, 255, 227, 0.7) !important;
text-align: left !important;
}
/* RIGHT: CTAs become channel list (EMAIL → ... / TELEGRAM → ...) */
html.mode-matrix #contact .contact-block > div {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
justify-content: flex-start !important;
max-width: 760px !important;
}
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
display: flex !important;
align-items: center !important;
gap: 18px !important;
padding: 22px 0 !important;
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(91, 255, 139, 0.16) !important;
text-decoration: none !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(18px, 2.2vw, 26px) !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
color: #DAFFE3 !important;
text-shadow: 0 0 14px rgba(0, 255, 120, 0.22);
transition: padding 220ms ease, background 220ms ease, color 220ms ease !important;
text-align: left !important;
position: relative;
}
html.mode-matrix #contact .contact-block .btn-secondary {
/* last channel gets bottom hairline too */
border-bottom: 1px solid rgba(91, 255, 139, 0.16) !important;
}
html.mode-matrix #contact .contact-block .btn-primary::before {
content: 'EMAIL →' !important;
display: inline-block !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: rgba(91, 255, 139, 0.7) !important;
text-shadow: none !important;
min-width: 110px !important;
margin-right: 8px;
}
html.mode-matrix #contact .contact-block .btn-secondary::before {
content: 'TELEGRAM →' !important;
display: inline-block !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: rgba(91, 255, 139, 0.7) !important;
text-shadow: none !important;
min-width: 110px !important;
margin-right: 8px;
}
html.mode-matrix #contact .contact-block .btn-primary:hover,
html.mode-matrix #contact .contact-block .btn-secondary:hover {
padding-left: 14px !important;
background: rgba(91, 255, 139, 0.04) !important;
color: #FFFFFF !important;
text-shadow: 0 0 18px rgba(0, 255, 130, 0.55);
}
/* LIVE indicator under channels */
html.mode-matrix #contact .contact-block > div + div {
flex-direction: row !important;
margin-top: 22px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: rgba(184, 255, 212, 0.55) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
.credo-block.matrix-only — hidden in non-matrix modes, premium editorial
in matrix. This is the BLOCK with «Меньше слов / Больше результата» +
numbered manifesto items + asymmetric 01/04 aside.
═══════════════════════════════════════════════════════════════════════ */
/* Hide in all non-matrix modes */
.credo-block.matrix-only { display: none !important; }
html.mode-matrix .credo-block.matrix-only { display: block !important; }
/* Layout (only renders when in matrix) */
html.mode-matrix .credo-block.matrix-only {
padding: 140px 0 100px !important;
background: transparent !important;
}
html.mode-matrix .credo-block.matrix-only .credo-grid {
display: grid !important;
grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
gap: clamp(40px, 6vw, 96px) !important;
align-items: start !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 28px !important;
}
@media (max-width: 900px) {
html.mode-matrix .credo-block.matrix-only .credo-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
/* LEFT aside */
html.mode-matrix .credo-block.matrix-only .credo-aside {
padding-top: 14px;
}
html.mode-matrix .credo-block.matrix-only .credo-index {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(48px, 4.4vw, 72px) !important;
font-weight: 400 !important;
line-height: 0.9 !important;
letter-spacing: -0.02em !important;
color: rgba(184, 255, 212, 0.95) !important;
margin-bottom: 18px !important;
text-shadow: 0 0 18px rgba(0, 255, 120, 0.28);
}
html.mode-matrix .credo-block.matrix-only .credo-index-total {
font-size: 0.32em !important;
color: rgba(184, 255, 212, 0.4) !important;
letter-spacing: 0.1em;
vertical-align: super;
}
html.mode-matrix .credo-block.matrix-only .credo-label {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.38em !important;
text-transform: uppercase !important;
color: rgba(91, 255, 139, 0.7) !important;
margin-bottom: 28px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-stamp {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
line-height: 2 !important;
color: rgba(184, 255, 212, 0.5) !important;
text-transform: uppercase !important;
border-top: 1px solid rgba(91, 255, 139, 0.15) !important;
padding-top: 22px !important;
}
/* RIGHT main */
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 6.8vw, 96px) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
line-height: 0.96 !important;
color: #DAFFE3 !important;
text-shadow: 0 0 22px rgba(0, 255, 120, 0.34);
margin: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: rgba(184, 255, 212, 0.55) !important;
text-shadow: 0 0 14px rgba(0, 255, 120, 0.18);
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
margin-top: 4px !important;
}
/* 4 numbered items in 2x2 grid with hairlines */
html.mode-matrix .credo-block.matrix-only .credo-items {
margin-top: 56px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px 32px !important;
max-width: 760px !important;
}
@media (max-width: 720px) {
html.mode-matrix .credo-block.matrix-only .credo-items {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
align-items: baseline !important;
gap: 14px !important;
padding: 12px 0 !important;
border-top: 1px solid rgba(91, 255, 139, 0.12) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
flex-shrink: 0 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
color: rgba(91, 255, 139, 0.65) !important;
letter-spacing: 0.18em !important;
font-weight: 400 !important;
min-width: 24px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: 13px !important;
line-height: 1.55 !important;
letter-spacing: 0.02em !important;
color: rgba(218, 255, 227, 0.85) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — text contrast bump + remove dark section bands & borders
═══════════════════════════════════════════════════════════════════════ */
/* 1. KILL all inline section backgrounds + borders (partner uses inline
styles on #process, #contact, #testimonials, etc.) */
html.mode-matrix section,
html.mode-matrix section[style] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-top: 0 !important;
border-bottom: 0 !important;
border: 0 !important;
}
/* 2. Headlines — fully bright, not transparent */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix h2 {
color: #DAFFE3 !important;
opacity: 1 !important;
text-shadow: 0 0 20px rgba(0, 255, 120, 0.45);
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: #5BFF8B !important;
font-style: normal !important;
}
/* 3. Stats numbers — fully bright */
html.mode-matrix .stats-grid .num {
color: #5BFF8B !important;
opacity: 1 !important;
text-shadow: 0 0 24px rgba(0, 255, 130, 0.55);
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
color: rgba(218, 255, 227, 0.85) !important;
opacity: 1 !important;
}
/* 4. Section eyebrows readable */
html.mode-matrix .section-eyebrow {
color: rgba(184, 255, 212, 0.65) !important;
opacity: 1 !important;
}
/* 5. Service / process / testimonial card text — readable */
html.mode-matrix .svc-name,
html.mode-matrix .ps-name,
html.mode-matrix .work-grid h3 {
color: #DAFFE3 !important;
opacity: 1 !important;
}
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote,
html.mode-matrix .case-meta,
html.mode-matrix .svc-card p,
html.mode-matrix .work-grid p {
color: rgba(218, 255, 227, 0.82) !important;
opacity: 1 !important;
}
/* 6. Vignette stronger so text reads against video */
.matrix-video-vignette {
background:
radial-gradient(ellipse 120% 100% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.35) 50%,
rgba(0, 0, 0, 0.85) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.15) 20%,
rgba(0, 0, 0, 0.15) 80%,
rgba(0, 0, 0, 0.65) 100%) !important;
}
/* 7. Video itself — slightly dimmer so text wins */
.matrix-video-element {
opacity: 0.5 !important;
filter: contrast(1.05) saturate(0.95) brightness(0.85) !important;
}
/* 8. Body solid black under everything — kills any partner section bands */
html.mode-matrix {
background: #000 !important;
}
html.mode-matrix body {
background: #000 !important;
background-image: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
FINAL FINAL — magic-toggle in nav (next to RU|EN), text brightness,
subtle hover flicker on text blocks.
═══════════════════════════════════════════════════════════════════════ */
/* 1. Magic-toggle → natural DOM position inside nav (between nav-chips and RU|EN) */
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle,
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
z-index: 999999 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
flex-shrink: 0 !important;
/* Blue gradient — preserve from base rule */
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%) !important;
border: 0 !important;
border-radius: 10px !important;
width: 46px !important;
height: 36px !important;
color: #fff !important;
}
/* 2. ALL text brighter — final pass, full opacity, vivid jade */
html.mode-matrix {
color: #DAFFE3 !important;
}
html.mode-matrix body,
html.mode-matrix p,
html.mode-matrix span,
html.mode-matrix a,
html.mode-matrix li,
html.mode-matrix h1,
html.mode-matrix h2,
html.mode-matrix h3,
html.mode-matrix h4 {
color: #DAFFE3 !important;
opacity: 1 !important;
}
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
color: #E8FFEF !important;
text-shadow: 0 0 24px rgba(0, 255, 130, 0.55), 0 0 48px rgba(0, 255, 130, 0.22) !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: #5BFF8B !important;
}
html.mode-matrix .section-eyebrow {
color: rgba(184, 255, 212, 0.8) !important;
}
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote,
html.mode-matrix .case-meta,
html.mode-matrix .svc-card p,
html.mode-matrix .credo-item-text {
color: rgba(232, 255, 239, 0.92) !important;
}
html.mode-matrix .stats-grid .num {
color: #5BFF8B !important;
text-shadow: 0 0 28px rgba(0, 255, 130, 0.7), 0 0 56px rgba(0, 255, 130, 0.32) !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
color: rgba(232, 255, 239, 0.92) !important;
}
/* 3. Subtle hover flicker on text blocks (translate + tiny text-shadow pulse, NO opacity) */
@keyframes mx-hover-flicker {
0%, 100% {
transform: translate3d(0, 0, 0);
text-shadow: 0 0 14px rgba(0, 255, 130, 0.35);
}
25% {
transform: translate3d(-0.4px, 0, 0);
text-shadow: 0 0 18px rgba(0, 255, 130, 0.55);
}
50% {
transform: translate3d( 0.4px, 0, 0);
text-shadow: 0 0 12px rgba(0, 255, 130, 0.3);
}
75% {
transform: translate3d(-0.25px, 0, 0);
text-shadow: 0 0 16px rgba(0, 255, 130, 0.5);
}
}
html.mode-matrix .sticker-card:hover :where(.svc-name, .svc-num, .svc-body, .case-art, .case-meta, h3, p, li),
html.mode-matrix .svc-card:hover :where(.svc-name, .svc-num, .svc-body, h3, p, li),
html.mode-matrix .work-grid > *:hover :where(.svc-name, .svc-body, .case-art, .case-meta, h3, p, li),
html.mode-matrix .testimonial-card:hover :where(.quote, .author, p),
html.mode-matrix .process-step:hover :where(.ps-name, .ps-num, .ps-body, p),
html.mode-matrix .stats-grid > *:hover :where(.num, .lbl, .label),
html.mode-matrix .credo-item:hover :where(.credo-item-num, .credo-item-text) {
animation: mx-hover-flicker 2s steps(6, end) infinite;
will-change: transform, text-shadow;
}
@media (prefers-reduced-motion: reduce) {
html.mode-matrix *:hover :where(.svc-name, .ps-name, h3, p, .num, .label, .credo-item-text) {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — nav scroll collapse + matrix-style cascade re-entry
• Scroll down → DEADLINE / chips / magic / lang fade out, only
«Связаться» CTA stays visible
• Scroll up → элементы выезжают каскадом с matrix-flicker glitch
═══════════════════════════════════════════════════════════════════════ */
/* Base transition for collapse-able elements (instant fade-out on scroll down) */
html.mode-matrix .nav-bar .logo,
html.mode-matrix .nav-bar .nav-chips,
html.mode-matrix .nav-bar .magic-toggle,
html.mode-matrix .nav-bar .lang-toggle {
transition: opacity 320ms cubic-bezier(0.5, 0, 0.7, 1),
transform 320ms cubic-bezier(0.5, 0, 0.7, 1) !important;
}
/* Collapsed state (scrolled down) — everything except btn-primary hidden */
html.mode-matrix .nav-bar.is-collapsed .logo,
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
opacity: 0 !important;
transform: translateY(-6px) !important;
pointer-events: none !important;
}
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
/* CTA shifts right to fill the gap, slight scale-up */
transform: translateX(0) scale(1.02) !important;
}
html.mode-matrix .nav-bar.is-collapsed {
background: rgba(0, 0, 0, 0.85) !important;
backdrop-filter: blur(14px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
height: 64px !important;
}
/* Matrix-style cascade re-entry on uncollapse */
@keyframes mx-nav-reveal {
0% { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
35% { opacity: 0.6; filter: blur(0); }
45% { opacity: 0.15; } /* flicker */
55% { opacity: 0.85; }
65% { opacity: 0.35; } /* another flicker */
75% { opacity: 0.95; }
85% { opacity: 0.5; }
100% { opacity: 1; transform: translateY(0); }
}
/* Apply staggered cascade on uncollapse — when class removed, elements
are visible. We trigger the animation via `.was-collapsed` flag. */
html.mode-matrix .nav-bar.is-reveal .logo {
animation: mx-nav-reveal 720ms steps(8, end) both;
animation-delay: 0ms;
}
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(1) { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 80ms; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(2) { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 130ms; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(3) { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 180ms; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(4) { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 230ms; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(5) { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 280ms; }
html.mode-matrix .nav-bar.is-reveal .magic-toggle { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 340ms; }
html.mode-matrix .nav-bar.is-reveal .lang-toggle { animation: mx-nav-reveal 720ms steps(8, end) both; animation-delay: 400ms; }
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — FULL BRIGHTNESS pass
• Video at 100% opacity (full Morpheus, no dimming)
• Vignette minimised — just cinematic edge wash
• Text contrast cranked up: bright jade headlines, vivid body
• Premium typography refinements (tracking, hierarchy, spacing)
═══════════════════════════════════════════════════════════════════════ */
/* Video — full brightness */
.matrix-video-element {
opacity: 1 !important;
filter: contrast(1.05) saturate(1) brightness(1) !important;
}
/* Vignette — only soft cinema edges, no heavy dark wash */
.matrix-video-vignette {
background:
radial-gradient(ellipse 130% 110% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 65%,
rgba(0, 0, 0, 0.55) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0) 14%,
rgba(0, 0, 0, 0) 86%,
rgba(0, 0, 0, 0.30) 100%) !important;
}
/* ─── TEXT — fully bright premium ─── */
html.mode-matrix {
color: #E8FFEF !important;
}
/* Headlines — pure mint-white + strong dual glow */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix h2 {
color: #F0FFF6 !important;
text-shadow:
0 0 18px rgba(0, 255, 130, 0.65),
0 0 42px rgba(0, 255, 130, 0.32),
0 0 84px rgba(0, 255, 130, 0.18) !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
line-height: 0.98 !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: #7FFFA5 !important;
font-style: normal !important;
text-shadow:
0 0 22px rgba(0, 255, 130, 0.85),
0 0 56px rgba(0, 255, 130, 0.4) !important;
}
/* Eyebrows — readable + crisp */
html.mode-matrix .section-eyebrow {
color: rgba(127, 255, 165, 0.95) !important;
font-size: 11px !important;
letter-spacing: 0.42em !important;
text-transform: uppercase !important;
margin-bottom: 32px !important;
font-weight: 400 !important;
}
/* Stats numbers — vivid neon-mint with strong glow */
html.mode-matrix .stats-grid .num {
color: #7FFFA5 !important;
text-shadow:
0 0 20px rgba(0, 255, 130, 0.85),
0 0 50px rgba(0, 255, 130, 0.45),
0 0 100px rgba(0, 255, 130, 0.22) !important;
font-weight: 400 !important;
font-size: clamp(48px, 5.6vw, 80px) !important;
letter-spacing: -0.015em !important;
line-height: 0.92 !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
color: rgba(232, 255, 239, 0.95) !important;
font-size: 13px !important;
letter-spacing: 0.22em !important;
line-height: 1.55 !important;
}
/* Card body text — vivid */
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote,
html.mode-matrix .case-meta,
html.mode-matrix .svc-card p,
html.mode-matrix .work-grid p,
html.mode-matrix .credo-item-text {
color: #E8FFEF !important;
opacity: 1 !important;
text-shadow: 0 0 8px rgba(0, 255, 130, 0.18);
}
/* Card titles — full vivid */
html.mode-matrix .svc-name,
html.mode-matrix .ps-name,
html.mode-matrix .work-grid h3 {
color: #F0FFF6 !important;
text-shadow:
0 0 14px rgba(0, 255, 130, 0.55),
0 0 32px rgba(0, 255, 130, 0.25) !important;
letter-spacing: 0.04em !important;
}
/* Credo headline — strong */
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
color: #F0FFF6 !important;
text-shadow:
0 0 22px rgba(0, 255, 130, 0.65),
0 0 52px rgba(0, 255, 130, 0.3) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-index {
color: #F0FFF6 !important;
text-shadow:
0 0 18px rgba(0, 255, 130, 0.55),
0 0 42px rgba(0, 255, 130, 0.22) !important;
}
/* Contact channels — vivid */
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
color: #F0FFF6 !important;
text-shadow:
0 0 16px rgba(0, 255, 130, 0.55),
0 0 36px rgba(0, 255, 130, 0.25) !important;
}
/* CTAs (Связаться, Начать проект, Кейсы) — bright */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
color: #F0FFF6 !important;
text-shadow:
0 0 12px rgba(0, 255, 130, 0.55),
0 0 28px rgba(0, 255, 130, 0.25) !important;
}
/* Nav chips bright + premium tracking */
html.mode-matrix .nav-chips .btn-chip {
color: rgba(232, 255, 239, 0.92) !important;
text-shadow: 0 0 10px rgba(0, 255, 130, 0.35) !important;
letter-spacing: 0.28em !important;
}
html.mode-matrix .nav-chips .btn-chip:hover {
color: #FFFFFF !important;
text-shadow:
0 0 14px rgba(0, 255, 130, 0.75),
0 0 32px rgba(0, 255, 130, 0.35) !important;
}
/* Logo — premium glow */
html.mode-matrix .logo {
color: #F0FFF6 !important;
text-shadow:
0 0 12px rgba(0, 255, 130, 0.55),
0 0 28px rgba(0, 255, 130, 0.22) !important;
letter-spacing: 0.32em !important;
}
/* Premium section spacing — more breathing room */
html.mode-matrix section {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
html.mode-matrix #process,
html.mode-matrix #services,
html.mode-matrix #testimonials,
html.mode-matrix #contact,
html.mode-matrix .credo-block.matrix-only,
html.mode-matrix .manifesto-block {
padding-top: 140px !important;
padding-bottom: 140px !important;
}
/* Rain stays minimal — atmosphere only */
html.mode-matrix .matrix-rain-ambient {
opacity: 0.14 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — fix: bring video down so text reads, add a dark global wash
between video and content. Video is still bright/visible but text wins.
═══════════════════════════════════════════════════════════════════════ */
.matrix-video-element {
opacity: 0.75 !important;
filter: contrast(1.05) saturate(1) brightness(0.95) !important;
}
.matrix-video-vignette {
background:
/* Subtle radial fade — darker edges */
radial-gradient(ellipse 130% 110% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.25) 55%,
rgba(0, 0, 0, 0.75) 100%),
/* Soft top/bottom bars */
linear-gradient(180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.18) 18%,
rgba(0, 0, 0, 0.18) 82%,
rgba(0, 0, 0, 0.55) 100%) !important;
}
/* Stacking: content sits ABOVE video+vignette, z>=3 by partner's setup */
html.mode-matrix .nav-bar,
html.mode-matrix section,
html.mode-matrix .stats-band,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix footer {
position: relative !important;
z-index: 5 !important;
}
/* Make text shadows even stronger — bullet-proof readability */
html.mode-matrix .section-headline,
html.mode-matrix h2,
html.mode-matrix .stats-grid .num,
html.mode-matrix .credo-block .credo-headline .line,
html.mode-matrix .credo-block .credo-index {
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 18px rgba(0, 255, 130, 0.55),
0 0 42px rgba(0, 255, 130, 0.3) !important;
}
/* Body text gets a soft black halo so it always reads */
html.mode-matrix p,
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .credo-item-text,
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label,
html.mode-matrix .section-eyebrow {
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 12px rgba(0, 0, 0, 0.5) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — UNIFIED DESIGN SYSTEM (one consistent style everywhere)
• Same section framing (max-width 1280, padding 28px)
• Same eyebrow → headline → content rhythm
• Same typography scale (mono, premium tracking)
• Same hairlines, glows, colors
• Same hover behavior
═══════════════════════════════════════════════════════════════════════ */
/* ─── Design tokens (matrix) ─── */
html.mode-matrix {
--mx-bg: #000;
--mx-text: #E8FFEF; /* body text */
--mx-text-bright: #F0FFF6; /* headlines */
--mx-accent: #7FFFA5; /* numbers, em, accents */
--mx-dim: rgba(232, 255, 239, 0.7);
--mx-faint: rgba(127, 255, 165, 0.5);
--mx-hairline: rgba(127, 255, 165, 0.18);
--mx-glow-soft: 0 0 4px rgba(0,0,0,0.85), 0 0 14px rgba(0, 255, 130, 0.4);
--mx-glow-strong: 0 0 4px rgba(0,0,0,0.85), 0 0 22px rgba(0, 255, 130, 0.6), 0 0 50px rgba(0, 255, 130, 0.28);
}
/* ─── Section framing — unified container ─── */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 120px 0 !important;
background: transparent !important;
}
html.mode-matrix section > .container,
html.mode-matrix .credo-block > .credo-grid,
html.mode-matrix .manifesto-block > .container,
html.mode-matrix .stats-band > .stats-grid,
html.mode-matrix #contact > .container {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 28px !important;
}
/* ─── Eyebrow (every section) — unified small mono label ─── */
html.mode-matrix .section-eyebrow {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.36em !important;
text-transform: uppercase !important;
color: var(--mx-accent) !important;
margin-bottom: 28px !important;
padding-left: 28px !important;
position: relative;
text-shadow: var(--mx-glow-soft) !important;
}
html.mode-matrix .section-eyebrow::before {
content: '' !important;
display: block !important;
position: absolute;
left: 0; top: 50%;
width: 18px; height: 1px;
background: var(--mx-accent);
transform: translateY(-50%);
}
/* ─── Headline — same scale everywhere ─── */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: clamp(36px, 4.6vw, 68px) !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
line-height: 1.02 !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-strong) !important;
margin: 0 0 56px 0 !important;
text-align: left !important;
max-width: 1100px;
}
html.mode-matrix .section-headline em {
color: var(--mx-accent) !important;
font-style: normal !important;
}
/* ─── Body / paragraphs / lists — unified ─── */
html.mode-matrix p,
html.mode-matrix li,
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote,
html.mode-matrix .case-meta,
html.mode-matrix .credo-item-text {
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: 13.5px !important;
line-height: 1.7 !important;
letter-spacing: 0.02em !important;
color: var(--mx-text) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
/* ─── Card titles — same scale across sections ─── */
html.mode-matrix .svc-name,
html.mode-matrix .ps-name,
html.mode-matrix .work-grid h3,
html.mode-matrix .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-soft) !important;
margin-bottom: 16px !important;
}
/* ─── Card numbering (01, 02, 03) — unified mini-label ─── */
html.mode-matrix .svc-num,
html.mode-matrix .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--mx-accent) !important;
margin-bottom: 14px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
html.mode-matrix .svc-num::before,
html.mode-matrix .ps-num::before { content: none !important; }
/* ─── Cards / blocks — transparent with hairline accent top ─── */
html.mode-matrix .sticker-card,
html.mode-matrix .svc-card,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step,
html.mode-matrix .work-grid > * {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 32px 28px !important;
position: relative;
}
html.mode-matrix .sticker-card::before,
html.mode-matrix .svc-card::before,
html.mode-matrix .testimonial-card::before,
html.mode-matrix .work-grid > *::before {
content: '' !important;
display: block !important;
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--mx-hairline);
pointer-events: none;
}
html.mode-matrix .sticker-card::after,
html.mode-matrix .svc-card::after,
html.mode-matrix .testimonial-card::after,
html.mode-matrix .work-grid > *::after { content: none !important; }
/* ─── Services / Work grid — same gap & alignment ─── */
html.mode-matrix .services-grid,
html.mode-matrix .work-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0 !important;
}
@media (max-width: 900px) {
html.mode-matrix .services-grid,
html.mode-matrix .work-grid { grid-template-columns: 1fr !important; }
}
/* ─── Bullets — unified mint dot ─── */
html.mode-matrix .svc-bullets {
list-style: none !important;
padding: 0 !important;
margin: 12px 0 0 !important;
}
html.mode-matrix .svc-bullets li {
position: relative;
padding-left: 18px !important;
margin-bottom: 10px !important;
}
html.mode-matrix .svc-bullets li::before {
content: '·' !important;
position: absolute;
left: 4px; top: -1px;
color: var(--mx-accent);
font-size: 18px;
font-weight: 700;
}
/* ─── CTAs — unified text-button look ─── */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 14px 6px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.28em !important;
font-weight: 400 !important;
text-transform: uppercase !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-soft) !important;
position: relative;
text-decoration: none !important;
transition: color 220ms ease, text-shadow 220ms ease !important;
}
html.mode-matrix .btn-primary:hover,
html.mode-matrix .btn-secondary:hover {
color: #FFFFFF !important;
text-shadow:
0 0 4px rgba(0,0,0,0.85),
0 0 16px rgba(0, 255, 130, 0.85),
0 0 36px rgba(0, 255, 130, 0.4) !important;
}
/* ─── Manifesto — center editorial pull-quote ─── */
html.mode-matrix .manifesto-block {
text-align: left !important;
}
html.mode-matrix .manifesto-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(36px, 4.6vw, 64px) !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
line-height: 1.18 !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-strong) !important;
margin: 0 auto !important;
max-width: 1100px;
}
html.mode-matrix .manifesto-text em {
color: var(--mx-accent) !important;
font-style: normal !important;
}
/* ─── Stats — uniform list layout ─── */
html.mode-matrix .stats-grid > * {
border-top: 1px solid var(--mx-hairline) !important;
}
html.mode-matrix .stats-grid > *:last-child {
border-bottom: 1px solid var(--mx-hairline) !important;
}
/* ─── Logo, nav, lang same as already styled, just ensure colors unified ─── */
html.mode-matrix .logo {
font-family: 'Share Tech Mono', monospace !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-soft) !important;
}
html.mode-matrix .nav-chips .btn-chip {
color: var(--mx-text) !important;
font-size: 11px !important;
letter-spacing: 0.26em !important;
}
html.mode-matrix .lang-toggle button {
font-size: 11px !important;
letter-spacing: 0.22em !important;
color: var(--mx-dim) !important;
}
html.mode-matrix .lang-toggle button.active {
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PREMIUM FINAL: video forced visible + editorial decorations
═══════════════════════════════════════════════════════════════════════ */
/* 1. VIDEO — forced visible, full-screen, behind everything */
.matrix-video-element,
html.mode-matrix .matrix-video-element {
display: block !important;
visibility: visible !important;
opacity: 0.72 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 0 !important;
pointer-events: none !important;
object-fit: cover !important;
filter: contrast(1.06) saturate(1) brightness(0.95) !important;
}
.matrix-video-vignette,
html.mode-matrix .matrix-video-vignette {
display: block !important;
visibility: visible !important;
position: fixed !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse 135% 115% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.30) 55%,
rgba(0, 0, 0, 0.78) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.15) 18%,
rgba(0, 0, 0, 0.15) 82%,
rgba(0, 0, 0, 0.55) 100%) !important;
}
/* 2. Body solid black behind video */
html.mode-matrix { background: #000 !important; }
html.mode-matrix body {
background: #000 !important;
background-image: none !important;
}
/* 3. Content sits above video */
html.mode-matrix .nav-bar,
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band,
html.mode-matrix footer {
position: relative !important;
z-index: 5 !important;
}
/* 4. PER-SECTION CHAPTER MARKS (top-right corner) */
html.mode-matrix #services,
html.mode-matrix .stats-band,
html.mode-matrix #process,
html.mode-matrix .credo-block.matrix-only,
html.mode-matrix #testimonials,
html.mode-matrix .manifesto-block,
html.mode-matrix #contact {
position: relative !important;
}
html.mode-matrix #services::before { content: 'CH · 01 / SERVICES' !important; }
html.mode-matrix .stats-band::before { content: 'CH · 02 / NUMBERS' !important; }
html.mode-matrix #process::before { content: 'CH · 03 / PROCESS' !important; }
html.mode-matrix .credo-block.matrix-only::before { content: 'CH · 04 / MANIFESTO' !important; }
html.mode-matrix #testimonials::before { content: 'CH · 05 / VOICES' !important; }
html.mode-matrix .manifesto-block::before { content: 'CH · 06 / CREDO' !important; }
html.mode-matrix #contact::before { content: 'CH · 07 / CONTACT' !important; }
html.mode-matrix #services::before,
html.mode-matrix .stats-band::before,
html.mode-matrix #process::before,
html.mode-matrix .credo-block.matrix-only::before,
html.mode-matrix #testimonials::before,
html.mode-matrix .manifesto-block::before,
html.mode-matrix #contact::before {
display: block !important;
position: absolute !important;
top: 32px !important;
right: 32px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(127, 255, 165, 0.55) !important;
text-transform: uppercase !important;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8) !important;
z-index: 6 !important;
pointer-events: none !important;
background: none !important;
width: auto !important;
height: auto !important;
}
/* 5. LEFT vertical rail on every section */
html.mode-matrix #services::after,
html.mode-matrix .stats-band::after,
html.mode-matrix #process::after,
html.mode-matrix .credo-block.matrix-only::after,
html.mode-matrix #testimonials::after,
html.mode-matrix .manifesto-block::after,
html.mode-matrix #contact::after {
content: '' !important;
display: block !important;
position: absolute !important;
left: 18px !important;
top: 40px !important;
bottom: 40px !important;
width: 1px !important;
background: linear-gradient(180deg,
rgba(127, 255, 165, 0) 0%,
rgba(127, 255, 165, 0.32) 12%,
rgba(127, 255, 165, 0.32) 88%,
rgba(127, 255, 165, 0) 100%) !important;
pointer-events: none !important;
z-index: 4 !important;
}
/* 6. HEADLINES get a premium accent tick (top-left, 64px green hairline) */
html.mode-matrix .section-headline,
html.mode-matrix .manifesto-text,
html.mode-matrix .credo-block.matrix-only .credo-headline {
padding-top: 22px !important;
position: relative;
}
html.mode-matrix .section-headline::before,
html.mode-matrix .manifesto-text::before,
html.mode-matrix .credo-block.matrix-only .credo-headline::before {
content: '' !important;
display: block !important;
position: absolute;
top: 0; left: 0;
width: 64px; height: 2px;
background: var(--mx-accent);
box-shadow: 0 0 12px rgba(127, 255, 165, 0.7);
}
/* 7. Generous section spacing */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 140px 0 !important;
}
html.mode-matrix section > .container {
padding: 0 56px !important;
max-width: 1280px !important;
margin: 0 auto !important;
}
html.mode-matrix .stats-grid {
padding: 0 56px !important;
max-width: 1280px !important;
margin: 0 auto !important;
}
/* 8. Hero — no chapter mark, full screen */
html.mode-matrix .hero::before,
html.mode-matrix .hero::after { display: none !important; }
html.mode-matrix .hero {
padding: 0 !important;
min-height: 100vh !important;
}
/* 9. Nav — no decorative pseudos */
html.mode-matrix .nav-bar::before,
html.mode-matrix .nav-bar::after { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — CLEAN PREMIUM PASS (final)
• Remove all chapter marks, vertical rails, accent ticks — pure typography
• Tone down text glow — cinematic restraint, not neon billboard
• Subtle "breathe" hover effect — opacity flicker only
• Nav stays always visible — no scroll collapse
═══════════════════════════════════════════════════════════════════════ */
/* 1. KILL ALL DECORATIVE PSEUDOS on sections (chapter marks, rails, ticks) */
html.mode-matrix section::before,
html.mode-matrix section::after,
html.mode-matrix .stats-band::before,
html.mode-matrix .stats-band::after,
html.mode-matrix .manifesto-block::before,
html.mode-matrix .manifesto-block::after,
html.mode-matrix .credo-block::before,
html.mode-matrix .credo-block::after,
html.mode-matrix .credo-block.matrix-only::before,
html.mode-matrix .credo-block.matrix-only::after,
html.mode-matrix #services::before,
html.mode-matrix #services::after,
html.mode-matrix #process::before,
html.mode-matrix #process::after,
html.mode-matrix #testimonials::before,
html.mode-matrix #testimonials::after,
html.mode-matrix #contact::before,
html.mode-matrix #contact::after {
content: none !important;
display: none !important;
background: none !important;
}
/* No accent tick before headlines */
html.mode-matrix .section-headline::before,
html.mode-matrix .section-headline::after,
html.mode-matrix .manifesto-text::before,
html.mode-matrix .manifesto-text::after,
html.mode-matrix .credo-block .credo-headline::before,
html.mode-matrix .credo-block .credo-headline::after,
html.mode-matrix h2::before,
html.mode-matrix h2::after {
content: none !important;
display: none !important;
}
html.mode-matrix .section-headline {
padding-top: 0 !important;
}
/* No section-eyebrow decoration */
html.mode-matrix .section-eyebrow::before,
html.mode-matrix .section-eyebrow::after {
content: none !important;
display: none !important;
}
html.mode-matrix .section-eyebrow {
padding-left: 0 !important;
}
/* No `>` `·` `─` on bullets / labels — just clean text */
html.mode-matrix .svc-bullets li::before {
content: '·' !important;
display: inline-block !important;
position: absolute;
left: 4px;
color: rgba(127, 255, 165, 0.6);
font-size: 16px;
}
/* 2. TONE DOWN TEXT — cinematic restraint */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix h2 {
color: #C8FFD8 !important; /* less neon-white, more soft mint */
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 12px rgba(0, 255, 130, 0.25) !important; /* subtle glow */
font-weight: 400 !important;
letter-spacing: -0.005em !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: #7FFFA5 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 14px rgba(0, 255, 130, 0.42) !important;
}
html.mode-matrix .stats-grid .num {
color: #9EFFBE !important; /* less bright */
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 14px rgba(0, 255, 130, 0.35) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-index {
color: #C8FFD8 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 12px rgba(0, 255, 130, 0.25) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
color: #C8FFD8 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 12px rgba(0, 255, 130, 0.25) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: rgba(184, 255, 212, 0.5) !important;
}
html.mode-matrix .svc-name,
html.mode-matrix .ps-name,
html.mode-matrix .work-grid h3 {
color: #DAFFE3 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 10px rgba(0, 255, 130, 0.22) !important;
}
html.mode-matrix p,
html.mode-matrix li,
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote,
html.mode-matrix .case-meta,
html.mode-matrix .credo-item-text {
color: rgba(218, 255, 227, 0.82) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.75) !important; /* just black halo, no green */
}
html.mode-matrix .section-eyebrow {
color: rgba(127, 255, 165, 0.7) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.7) !important;
}
html.mode-matrix .manifesto-text {
color: #C8FFD8 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 14px rgba(0, 255, 130, 0.28) !important;
}
/* CTAs subtler */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
color: #DAFFE3 !important;
text-shadow:
0 0 4px rgba(0,0,0,0.75),
0 0 8px rgba(0, 255, 130, 0.22) !important;
}
/* 3. SUBTLE BREATHE hover — opacity flicker only (no translate, no glow change) */
@keyframes mx-text-breathe {
0%, 100% { opacity: 1; }
35% { opacity: 0.78; }
60% { opacity: 0.95; }
80% { opacity: 0.85; }
}
html.mode-matrix .sticker-card:hover :where(.svc-name, .svc-num, .svc-body, .case-art, .case-meta, h3, p, li),
html.mode-matrix .svc-card:hover :where(.svc-name, .svc-num, .svc-body, h3, p, li),
html.mode-matrix .work-grid > *:hover :where(.svc-name, .svc-body, .case-art, .case-meta, h3, p, li),
html.mode-matrix .testimonial-card:hover :where(.quote, .author, p),
html.mode-matrix .process-step:hover :where(.ps-name, .ps-num, .ps-body, p),
html.mode-matrix .stats-grid > *:hover :where(.num, .lbl, .label),
html.mode-matrix .credo-item:hover :where(.credo-item-num, .credo-item-text) {
animation: mx-text-breathe 2.6s ease-in-out infinite;
will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
html.mode-matrix *:hover :where(.svc-name, .ps-name, h3, p, .num, .label, .credo-item-text) {
animation: none !important;
}
}
/* 4. NAV — always visible, sticky at top, no scroll-collapse */
html.mode-matrix .nav-bar {
position: sticky !important;
top: 0 !important;
height: auto !important;
padding: 18px 0 !important;
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(14px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
z-index: 100 !important;
}
/* Disable scroll-collapse effects in matrix */
html.mode-matrix .nav-bar.is-collapsed .logo,
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
html.mode-matrix .nav-bar.is-collapsed {
height: auto !important;
background: rgba(0, 0, 0, 0.55) !important;
}
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
transform: none !important;
}
/* Disable cascade reveal animation too */
html.mode-matrix .nav-bar.is-reveal .logo,
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip,
html.mode-matrix .nav-bar.is-reveal .magic-toggle,
html.mode-matrix .nav-bar.is-reveal .lang-toggle {
animation: none !important;
}
/* 5. Section padding consistent */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 120px 0 !important;
}
html.mode-matrix section > .container,
html.mode-matrix .credo-block > .credo-grid,
html.mode-matrix .stats-grid {
max-width: 1280px !important;
margin: 0 auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Rain even more subtle */
html.mode-matrix .matrix-rain-ambient {
opacity: 0.10 !important;
}
/* Vignette — softer */
.matrix-video-vignette {
background:
radial-gradient(ellipse 135% 110% at 50% 50%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.20) 55%,
rgba(0, 0, 0, 0.62) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.40) 0%,
rgba(0, 0, 0, 0.10) 18%,
rgba(0, 0, 0, 0.10) 82%,
rgba(0, 0, 0, 0.40) 100%) !important;
}
/* Video slightly less, so text reads */
.matrix-video-element {
opacity: 0.68 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — PURE MINIMAL FINAL
• Hide cryptic `01 / 04 — MANIFESTO / DEADLINE EST. 2025` aside
• Remove ALL hairlines / dividers everywhere
• Pure typography on video — nothing else
• Subtle ambient effects: gentle text breathe always-on
═══════════════════════════════════════════════════════════════════════ */
/* 1. HIDE the confusing credo-aside (01/04 + DEADLINE stamp) */
html.mode-matrix .credo-block.matrix-only .credo-aside {
display: none !important;
}
html.mode-matrix .credo-block.matrix-only .credo-grid {
grid-template-columns: 1fr !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
/* 2. KILL ALL HAIRLINES — borders on cards, items, sections, rows */
html.mode-matrix *,
html.mode-matrix *::before,
html.mode-matrix *::after {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
/* Override the few places that genuinely need an outline (focus states) */
html.mode-matrix *:focus-visible {
outline: 2px solid rgba(127, 255, 165, 0.5) !important;
outline-offset: 4px !important;
}
/* Specifically nuke any gradient-line hacks on cards & items */
html.mode-matrix .sticker-card::before,
html.mode-matrix .svc-card::before,
html.mode-matrix .testimonial-card::before,
html.mode-matrix .work-grid > *::before,
html.mode-matrix .credo-item,
html.mode-matrix .stats-grid > *,
html.mode-matrix .contact-channel,
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
background-image: none !important;
}
/* Reset credo-item — no border */
html.mode-matrix .credo-block.matrix-only .credo-item {
border-top: 0 !important;
padding: 10px 0 !important;
}
/* Reset stats-grid rows — no border */
html.mode-matrix .stats-grid > * {
border-top: 0 !important;
border-bottom: 0 !important;
padding: 20px 0 !important;
}
/* Reset contact channels — no border */
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
border-top: 0 !important;
border-bottom: 0 !important;
padding: 18px 0 !important;
}
/* 3. PREMIUM AMBIENT TEXT BREATHE (always-on, very subtle) */
@keyframes mx-ambient-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.92; }
}
html.mode-matrix .section-headline,
html.mode-matrix .stats-grid .num,
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2,
html.mode-matrix .manifesto-text {
animation: mx-ambient-breathe 6s ease-in-out infinite;
}
/* Stagger different elements so they don't sync */
html.mode-matrix .stats-grid .num { animation-delay: 0.8s; }
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 { animation-delay: 1.6s; }
html.mode-matrix .manifesto-text { animation-delay: 2.4s; }
/* 4. SUBTLE HOVER — text gains a faint glow boost (not opacity fade) */
@keyframes mx-text-glow-up {
0%, 100% { text-shadow: 0 0 4px rgba(0,0,0,0.75), 0 0 10px rgba(0, 255, 130, 0.22); }
50% { text-shadow: 0 0 4px rgba(0,0,0,0.75), 0 0 18px rgba(0, 255, 130, 0.42); }
}
html.mode-matrix .sticker-card:hover .svc-name,
html.mode-matrix .sticker-card:hover h3,
html.mode-matrix .process-step:hover .ps-name,
html.mode-matrix .testimonial-card:hover .quote,
html.mode-matrix .stats-grid > *:hover .num,
html.mode-matrix .credo-item:hover .credo-item-text {
animation: mx-text-glow-up 1.8s ease-in-out infinite;
}
/* 5. Manifesto centered, more breathing room */
html.mode-matrix .manifesto-block {
text-align: center !important;
padding: 180px 40px !important;
}
html.mode-matrix .manifesto-block .container {
text-align: center !important;
}
html.mode-matrix .manifesto-text {
text-align: center !important;
margin: 0 auto !important;
max-width: 1000px !important;
}
/* 6. Eyebrows — make them subtle, like film slate */
html.mode-matrix .section-eyebrow {
font-size: 10px !important;
letter-spacing: 0.4em !important;
color: rgba(127, 255, 165, 0.55) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.75) !important;
margin-bottom: 40px !important;
}
/* 7. Cards — pure transparent with generous interior space */
html.mode-matrix .sticker-card,
html.mode-matrix .svc-card,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
background: transparent !important;
padding: 36px 28px !important;
}
/* 8. NAV — even more minimal */
html.mode-matrix .nav-bar {
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}
/* 9. Stats — bigger numbers, fewer chrome */
html.mode-matrix .stats-grid .num {
font-size: clamp(56px, 6.5vw, 88px) !important;
line-height: 0.95 !important;
letter-spacing: -0.018em !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 11px !important;
letter-spacing: 0.3em !important;
color: rgba(218, 255, 227, 0.55) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — scroll-collapse decay + centered Связаться pill
+ scroll-reveal matrix-flicker for content sections
═══════════════════════════════════════════════════════════════════════ */
/* ─── DECAY (scroll down) — matrix-style flicker disintegration ─── */
@keyframes mx-decay {
0% { opacity: 1; filter: blur(0); transform: translateY(0); }
12% { opacity: 0.2; }
22% { opacity: 0.85; filter: blur(0.5px); }
35% { opacity: 0.1; }
48% { opacity: 0.6; filter: blur(1px); }
62% { opacity: 0.08; }
78% { opacity: 0.3; filter: blur(1.5px); }
100% { opacity: 0; filter: blur(2.5px); transform: translateY(-4px); }
}
/* ─── DECODE (scroll up) — matrix character reveal ─── */
@keyframes mx-decode {
0% { opacity: 0; filter: blur(2.5px); transform: translateY(-4px); }
15% { opacity: 0.3; }
28% { opacity: 0.08; filter: blur(1.5px); }
42% { opacity: 0.7; filter: blur(0.5px); }
58% { opacity: 0.2; }
72% { opacity: 0.95; filter: blur(0); }
85% { opacity: 0.5; }
100% { opacity: 1; transform: translateY(0); }
}
/* ─── Nav decay positions: logo / chips / magic / lang fade with stagger ─── */
html.mode-matrix .nav-bar.is-collapsed {
position: sticky !important;
top: 0 !important;
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(18px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
z-index: 100 !important;
height: 72px !important;
padding: 14px 0 !important;
transition: background 320ms ease, height 320ms ease;
}
html.mode-matrix .nav-bar.is-collapsed .logo,
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
animation: mx-decay 720ms steps(9, end) both !important;
pointer-events: none !important;
will-change: opacity, filter, transform;
}
/* Stagger left-to-right ripple */
html.mode-matrix .nav-bar.is-collapsed .logo { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(1) { animation-delay: 50ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(2) { animation-delay: 100ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(3) { animation-delay: 150ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(4) { animation-delay: 200ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(5) { animation-delay: 250ms !important; }
html.mode-matrix .nav-bar.is-collapsed .magic-toggle { animation-delay: 300ms !important; }
html.mode-matrix .nav-bar.is-collapsed .lang-toggle { animation-delay: 360ms !important; }
/* ─── Связаться → floats to CENTER of nav-bar as a glassy pill ─── */
html.mode-matrix .nav-bar {
position: sticky !important;
}
html.mode-matrix .nav-bar .container {
position: relative !important;
}
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(1) !important;
animation: mx-pulse-in 600ms steps(7, end) both !important;
/* Subtle premium pill backdrop */
background: rgba(127, 255, 165, 0.08) !important;
border: 1px solid rgba(127, 255, 165, 0.32) !important;
border-radius: 999px !important;
padding: 12px 28px !important;
backdrop-filter: blur(10px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
z-index: 10 !important;
pointer-events: auto !important;
}
@keyframes mx-pulse-in {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
20% { opacity: 0.4; }
35% { opacity: 0.1; }
55% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.04); }
75% { opacity: 0.4; }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* ─── Reveal (scroll up) — cascade decode ─── */
html.mode-matrix .nav-bar.is-reveal .logo,
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip,
html.mode-matrix .nav-bar.is-reveal .magic-toggle,
html.mode-matrix .nav-bar.is-reveal .lang-toggle {
animation: mx-decode 760ms steps(9, end) both !important;
pointer-events: auto !important;
will-change: opacity, filter, transform;
}
html.mode-matrix .nav-bar.is-reveal .logo { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(1) { animation-delay: 60ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(2) { animation-delay: 110ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(3) { animation-delay: 160ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(4) { animation-delay: 210ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(5) { animation-delay: 260ms !important; }
html.mode-matrix .nav-bar.is-reveal .magic-toggle { animation-delay: 320ms !important; }
html.mode-matrix .nav-bar.is-reveal .lang-toggle { animation-delay: 380ms !important; }
html.mode-matrix .nav-bar.is-reveal .btn-primary {
animation: mx-pulse-in 600ms steps(7, end) both reverse !important;
/* Return to right position smoothly */
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 10px 18px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
SCROLL-REVEAL — sections + cards fade in with matrix-flicker when
they enter viewport (triggered by JS IntersectionObserver).
═══════════════════════════════════════════════════════════════════════ */
/* Default (pre-reveal) state — invisible, slightly down */
html.mode-matrix section:not(.mx-revealed):not(.hero),
html.mode-matrix .credo-block:not(.mx-revealed),
html.mode-matrix .manifesto-block:not(.mx-revealed),
html.mode-matrix .stats-band:not(.mx-revealed),
html.mode-matrix .sticker-card:not(.mx-revealed),
html.mode-matrix .svc-card:not(.mx-revealed),
html.mode-matrix .testimonial-card:not(.mx-revealed),
html.mode-matrix .process-step:not(.mx-revealed),
html.mode-matrix .credo-item:not(.mx-revealed),
html.mode-matrix .stats-grid > *:not(.mx-revealed),
html.mode-matrix .section-headline:not(.mx-revealed) {
opacity: 0;
}
/* On reveal — matrix flicker fade-in */
@keyframes mx-reveal {
0% { opacity: 0; filter: blur(2px); transform: translateY(8px); }
18% { opacity: 0.35; }
32% { opacity: 0.08; filter: blur(1px); }
48% { opacity: 0.65; filter: blur(0); }
62% { opacity: 0.22; }
78% { opacity: 0.92; }
88% { opacity: 0.55; }
100% { opacity: 1; transform: translateY(0); }
}
html.mode-matrix .mx-revealed {
animation: mx-reveal 950ms steps(11, end) both;
will-change: opacity, filter, transform;
}
/* Stagger cards inside a grid for cascade effect */
html.mode-matrix .services-grid > .mx-revealed:nth-child(2) { animation-delay: 120ms; }
html.mode-matrix .services-grid > .mx-revealed:nth-child(3) { animation-delay: 240ms; }
html.mode-matrix .work-grid > .mx-revealed:nth-child(2) { animation-delay: 120ms; }
html.mode-matrix .work-grid > .mx-revealed:nth-child(3) { animation-delay: 240ms; }
html.mode-matrix .process-row > .mx-revealed:nth-child(2) { animation-delay: 80ms; }
html.mode-matrix .process-row > .mx-revealed:nth-child(3) { animation-delay: 160ms; }
html.mode-matrix .process-row > .mx-revealed:nth-child(4) { animation-delay: 240ms; }
html.mode-matrix .process-row > .mx-revealed:nth-child(5) { animation-delay: 320ms; }
html.mode-matrix .credo-items > .mx-revealed:nth-child(2) { animation-delay: 80ms; }
html.mode-matrix .credo-items > .mx-revealed:nth-child(3) { animation-delay: 160ms; }
html.mode-matrix .credo-items > .mx-revealed:nth-child(4) { animation-delay: 240ms; }
/* In other modes, ensure no fade-in applied (no .mx-revealed class set) */
html:not(.mode-matrix) section,
html:not(.mode-matrix) .credo-block,
html:not(.mode-matrix) .sticker-card,
html:not(.mode-matrix) .svc-card,
html:not(.mode-matrix) .testimonial-card,
html:not(.mode-matrix) .process-step,
html:not(.mode-matrix) .credo-item,
html:not(.mode-matrix) .stats-grid > *,
html:not(.mode-matrix) .section-headline {
opacity: 1 !important;
animation: none !important;
}
/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .mx-revealed,
html.mode-matrix .nav-bar.is-collapsed *,
html.mode-matrix .nav-bar.is-reveal * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
FINAL POLISH — premium minimal matrix
• Return text visibility (kill scroll-reveal opacity:0 defaults)
• Remove nav bar background tint completely
• Strip pill border from Связаться (just glowing text)
• Subtle continuous matrix-flicker on DEADLINE logo + Связаться
═══════════════════════════════════════════════════════════════════════ */
/* 1. RETURN TEXT — kill the opacity:0 default that hid sections */
html.mode-matrix section,
html.mode-matrix section:not(.mx-revealed):not(.hero),
html.mode-matrix .credo-block,
html.mode-matrix .credo-block:not(.mx-revealed),
html.mode-matrix .manifesto-block,
html.mode-matrix .manifesto-block:not(.mx-revealed),
html.mode-matrix .stats-band,
html.mode-matrix .stats-band:not(.mx-revealed),
html.mode-matrix .sticker-card,
html.mode-matrix .sticker-card:not(.mx-revealed),
html.mode-matrix .svc-card,
html.mode-matrix .svc-card:not(.mx-revealed),
html.mode-matrix .testimonial-card,
html.mode-matrix .testimonial-card:not(.mx-revealed),
html.mode-matrix .process-step,
html.mode-matrix .process-step:not(.mx-revealed),
html.mode-matrix .credo-item,
html.mode-matrix .credo-item:not(.mx-revealed),
html.mode-matrix .stats-grid > *,
html.mode-matrix .stats-grid > *:not(.mx-revealed),
html.mode-matrix .section-headline,
html.mode-matrix .section-headline:not(.mx-revealed) {
opacity: 1 !important;
}
/* Keep the reveal animation only when it actually triggers — but it
adds class .mx-revealed which inherits opacity:1 from above */
html.mode-matrix .mx-revealed {
animation: mx-reveal 950ms steps(11, end) both;
}
/* 2. NAV — fully transparent, no glassy bar, no border */
html.mode-matrix .nav-bar,
html.mode-matrix .nav-bar.is-collapsed,
html.mode-matrix .nav-bar.is-reveal {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
}
html.mode-matrix .nav-bar::before,
html.mode-matrix .nav-bar::after {
content: none !important;
display: none !important;
}
/* 3. Связаться (in collapsed center mode) — TEXT ONLY, no border, no pill */
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 8px 12px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
z-index: 10 !important;
pointer-events: auto !important;
color: #C8FFD8 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 14px rgba(0, 255, 130, 0.35) !important;
/* Apply subtle continuous matrix-flicker */
animation: mx-text-flicker 4.5s steps(12, end) infinite !important;
}
/* 4. Связаться + DEADLINE — subtle continuous matrix-flicker (always on) */
@keyframes mx-text-flicker {
0%, 100% { opacity: 1; }
3% { opacity: 0.72; }
6% { opacity: 1; }
18% { opacity: 1; }
21% { opacity: 0.55; }
24% { opacity: 1; }
48% { opacity: 1; }
51% { opacity: 0.62; }
54% { opacity: 1; }
72% { opacity: 1; }
74% { opacity: 0.75; }
76% { opacity: 1; }
}
html.mode-matrix .logo,
html.mode-matrix .nav-bar .btn-primary {
animation: mx-text-flicker 5s steps(14, end) infinite;
will-change: opacity;
}
html.mode-matrix .nav-bar .btn-primary { animation-delay: 1.2s; }
/* 5. Связаться in normal nav (not collapsed) — just text, no border */
html.mode-matrix .nav-bar .btn-primary {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 8px 6px !important;
box-shadow: none !important;
color: #C8FFD8 !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
font-weight: 400 !important;
text-transform: uppercase !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 12px rgba(0, 255, 130, 0.3) !important;
}
html.mode-matrix .nav-bar .btn-primary:hover {
color: #FFFFFF !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 18px rgba(0, 255, 130, 0.65) !important;
}
/* 6. DEADLINE logo — premium with same subtle flicker */
html.mode-matrix .logo {
color: #DAFFE3 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
letter-spacing: 0.34em !important;
font-weight: 400 !important;
text-transform: uppercase !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.85),
0 0 14px rgba(0, 255, 130, 0.32) !important;
}
html.mode-matrix .logo .pulse {
background: #7FFFA5 !important;
width: 6px !important;
height: 6px !important;
border-radius: 0 !important;
box-shadow: 0 0 10px rgba(0, 255, 130, 0.7);
}
/* 7. Disable text-shadow animation on hover for these (flicker is enough) */
html.mode-matrix .logo:hover,
html.mode-matrix .nav-bar .btn-primary:hover {
animation-play-state: paused;
}
/* 8. Reduce motion — turn off flicker */
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .logo,
html.mode-matrix .nav-bar .btn-primary,
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX premium FX: custom cursor + scan-beam
═══════════════════════════════════════════════════════════════════════ */
/* ─── 1) Custom cross-hair cursor ─── */
.mx-cursor,
.mx-cursor-halo,
.mx-scan-beam {
display: none;
pointer-events: none;
position: fixed;
top: 0; left: 0;
z-index: 100001;
}
body.mx-fx-on .mx-cursor,
body.mx-fx-on .mx-cursor-halo,
body.mx-fx-on .mx-scan-beam {
display: block;
}
/* Outer halo — soft glowing mint disc following with delay */
.mx-cursor-halo {
width: 64px; height: 64px;
border-radius: 50%;
background: radial-gradient(circle at center,
rgba(127, 255, 165, 0.16) 0%,
rgba(127, 255, 165, 0.06) 40%,
transparent 70%);
mix-blend-mode: screen;
z-index: 100000;
transition: width 220ms ease, height 220ms ease, opacity 220ms ease;
}
/* Inner cursor — crisp mint crosshair */
.mx-cursor {
width: 14px; height: 14px;
z-index: 100001;
transition: width 200ms ease, height 200ms ease;
}
.mx-cursor::before,
.mx-cursor::after {
content: '';
position: absolute;
background: rgba(127, 255, 165, 0.9);
box-shadow: 0 0 8px rgba(127, 255, 165, 0.7);
}
.mx-cursor::before {
/* horizontal line */
left: 0; right: 0;
top: 50%; height: 1px;
transform: translateY(-50%);
}
.mx-cursor::after {
/* vertical line */
top: 0; bottom: 0;
left: 50%; width: 1px;
transform: translateX(-50%);
}
/* When hovering interactive elements — grow + brighten */
.mx-cursor.is-active {
width: 26px; height: 26px;
}
body.mx-fx-on .mx-cursor.is-active ~ .mx-cursor-halo,
body.mx-fx-on:has(.mx-cursor.is-active) .mx-cursor-halo {
width: 96px; height: 96px;
background: radial-gradient(circle at center,
rgba(127, 255, 165, 0.28) 0%,
rgba(127, 255, 165, 0.10) 40%,
transparent 75%);
}
/* Hide native cursor in matrix mode */
html.mode-matrix,
html.mode-matrix * {
cursor: none !important;
}
html.mode-matrix input,
html.mode-matrix textarea {
cursor: text !important;
}
/* ─── 2) Scan-beam: thin horizontal mint line ползёт сверху вниз ─── */
.mx-scan-beam {
left: 0; right: 0;
width: 100vw;
height: 2px;
top: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(127, 255, 165, 0.05) 8%,
rgba(127, 255, 165, 0.45) 50%,
rgba(127, 255, 165, 0.05) 92%,
transparent 100%);
box-shadow: 0 0 12px rgba(127, 255, 165, 0.4),
0 0 22px rgba(127, 255, 165, 0.18);
z-index: 2;
opacity: 0;
mix-blend-mode: screen;
animation: mx-scan-travel 12s linear infinite;
}
@keyframes mx-scan-travel {
0% { transform: translateY(0); opacity: 0; }
6% { opacity: 0.45; }
50% { opacity: 0.55; }
94% { opacity: 0.45; }
100% { transform: translateY(100vh); opacity: 0; }
}
/* Reduce motion compliance */
@media (prefers-reduced-motion: reduce) {
.mx-scan-beam,
.mx-cursor,
.mx-cursor-halo {
animation: none !important;
display: none !important;
}
html.mode-matrix,
html.mode-matrix * { cursor: auto !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX FX v2 — calmer, more elegant
• Cursor → ring + dot (no crosshair lines)
• Scan-beam → diagonal slow sweep instead of horizontal
• Add cinematic viewport corner brackets [ ┌ ┐ └ ┘ ]
• Brackets pulse slowly (signal-light feel)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Cursor v2: outer ring + tiny inner dot ─── */
.mx-cursor {
width: 22px !important; height: 22px !important;
border-radius: 50% !important;
border: 1px solid rgba(127, 255, 165, 0.75) !important;
background: transparent !important;
box-shadow: 0 0 12px rgba(127, 255, 165, 0.32),
inset 0 0 6px rgba(127, 255, 165, 0.18) !important;
transition: width 220ms ease, height 220ms ease,
border-color 200ms ease, transform 0ms !important;
}
/* Kill the crosshair lines from v1 */
.mx-cursor::before { display: none !important; }
.mx-cursor::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 50% !important; left: 50% !important;
width: 3px !important; height: 3px !important;
border-radius: 50% !important;
background: rgba(127, 255, 165, 0.95) !important;
box-shadow: 0 0 6px rgba(127, 255, 165, 0.8) !important;
transform: translate(-50%, -50%) !important;
}
.mx-cursor.is-active {
width: 40px !important; height: 40px !important;
border-color: #7FFFA5 !important;
}
/* Halo softer, larger */
.mx-cursor-halo {
width: 80px !important; height: 80px !important;
background: radial-gradient(circle at center,
rgba(127, 255, 165, 0.12) 0%,
rgba(127, 255, 165, 0.04) 45%,
transparent 75%) !important;
}
/* ─── Scan-beam v2: diagonal drift instead of horizontal top-to-bottom ─── */
.mx-scan-beam {
width: 200vw !important;
height: 1px !important;
top: 50% !important;
left: -50vw !important;
transform-origin: center center !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(127, 255, 165, 0) 25%,
rgba(127, 255, 165, 0.55) 50%,
rgba(127, 255, 165, 0) 75%,
transparent 100%) !important;
box-shadow: 0 0 8px rgba(127, 255, 165, 0.35) !important;
animation: mx-scan-diagonal 16s linear infinite !important;
mix-blend-mode: screen !important;
}
@keyframes mx-scan-diagonal {
0% { transform: translateY(-80vh) rotate(-12deg); opacity: 0; }
8% { opacity: 0.4; }
50% { opacity: 0.5; }
92% { opacity: 0.4; }
100% { transform: translateY( 80vh) rotate(-12deg); opacity: 0; }
}
/* ─── Viewport corner brackets: [ ┌ ┐ └ ┘ ] cinema framing ─── */
.mx-frame-corner {
position: fixed !important;
width: 28px !important;
height: 28px !important;
z-index: 99998 !important;
pointer-events: none !important;
border: 1px solid rgba(127, 255, 165, 0.42) !important;
display: none;
}
body.mx-fx-on .mx-frame-corner { display: block !important; }
.mx-frame-corner.tl {
top: 18px; left: 18px;
border-right: 0 !important;
border-bottom: 0 !important;
}
.mx-frame-corner.tr {
top: 18px; right: 18px;
border-left: 0 !important;
border-bottom: 0 !important;
}
.mx-frame-corner.bl {
bottom: 18px; left: 18px;
border-right: 0 !important;
border-top: 0 !important;
}
.mx-frame-corner.br {
bottom: 18px; right: 18px;
border-left: 0 !important;
border-top: 0 !important;
}
/* Subtle pulsing on corner brackets */
@keyframes mx-corner-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(127, 255, 165, 0); }
50% { opacity: 0.55; box-shadow: 0 0 10px rgba(127, 255, 165, 0.25); }
}
body.mx-fx-on .mx-frame-corner {
animation: mx-corner-pulse 5s ease-in-out infinite;
}
body.mx-fx-on .mx-frame-corner.tr { animation-delay: 1.2s; }
body.mx-fx-on .mx-frame-corner.bl { animation-delay: 2.4s; }
body.mx-fx-on .mx-frame-corner.br { animation-delay: 3.6s; }
@media (prefers-reduced-motion: reduce) {
.mx-frame-corner { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX FX v3 — CINEMATIC AMBIENT
• Drop custom cursor (use native)
• Live timestamp + scroll % in viewport corner
• Right-edge scroll progress rail (vertical thin mint line)
• Slow-drifting kanji/digit dust (5 chars across viewport)
• Side-edge vertical hairline rails (very faint pulse)
═══════════════════════════════════════════════════════════════════════ */
/* 0. Remove custom cursor — back to native */
.mx-cursor, .mx-cursor-halo {
display: none !important;
}
html.mode-matrix,
html.mode-matrix * {
cursor: auto !important;
}
html.mode-matrix a,
html.mode-matrix button,
html.mode-matrix [role="button"] {
cursor: pointer !important;
}
html.mode-matrix input,
html.mode-matrix textarea {
cursor: text !important;
}
/* 1. HUD bar at bottom-left: timestamp + section index */
.mx-hud {
position: fixed !important;
bottom: 22px !important;
left: 22px !important;
z-index: 99997 !important;
pointer-events: none !important;
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(127, 255, 165, 0.55) !important;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8) !important;
display: none;
text-transform: uppercase;
user-select: none;
}
body.mx-fx-on .mx-hud { display: flex !important; gap: 24px; }
.mx-hud .mx-hud-time::before { content: '◆ '; opacity: 0.7; }
.mx-hud .mx-hud-sec::before { content: '⌗ '; opacity: 0.7; }
/* 2. Scroll progress rail on right edge */
.mx-rail {
position: fixed !important;
top: 22px !important;
right: 22px !important;
bottom: 22px !important;
width: 1px !important;
z-index: 99996 !important;
pointer-events: none !important;
background: linear-gradient(180deg,
rgba(127, 255, 165, 0) 0%,
rgba(127, 255, 165, 0.18) 50%,
rgba(127, 255, 165, 0) 100%) !important;
display: none;
}
body.mx-fx-on .mx-rail { display: block !important; }
.mx-rail-thumb {
position: absolute;
left: -2px;
width: 5px;
height: 32px;
border-radius: 2px;
background: linear-gradient(180deg,
rgba(127, 255, 165, 0) 0%,
#7FFFA5 50%,
rgba(127, 255, 165, 0) 100%);
box-shadow: 0 0 12px rgba(127, 255, 165, 0.7);
top: 0;
transition: top 80ms ease-out;
}
/* 3. Drifting kanji/digit dust — 5 chars across viewport */
.mx-dust {
position: fixed !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 13px !important;
color: rgba(127, 255, 165, 0.18) !important;
text-shadow: 0 0 4px rgba(127, 255, 165, 0.32) !important;
pointer-events: none !important;
z-index: 3 !important;
user-select: none !important;
mix-blend-mode: screen;
display: none;
}
body.mx-fx-on .mx-dust { display: block !important; }
@keyframes mx-dust-float {
0% { transform: translate(var(--mx-x, 50vw), -10vh); opacity: 0; }
10% { opacity: 0.65; }
90% { opacity: 0.5; }
100% { transform: translate(var(--mx-x, 50vw), 110vh); opacity: 0; }
}
.mx-dust.d1 { --mx-x: 8vw; font-size: 11px; animation: mx-dust-float 26s linear infinite; }
.mx-dust.d2 { --mx-x: 32vw; font-size: 14px; animation: mx-dust-float 34s linear infinite; animation-delay: -10s; }
.mx-dust.d3 { --mx-x: 56vw; font-size: 12px; animation: mx-dust-float 42s linear infinite; animation-delay: -22s; }
.mx-dust.d4 { --mx-x: 78vw; font-size: 11px; animation: mx-dust-float 30s linear infinite; animation-delay: -6s; }
.mx-dust.d5 { --mx-x: 92vw; font-size: 13px; animation: mx-dust-float 38s linear infinite; animation-delay: -18s; }
/* 4. Side-edge vertical hairline pulse rails (left + right of viewport) */
.mx-edge {
position: fixed !important;
top: 80px !important;
bottom: 80px !important;
width: 1px !important;
z-index: 2 !important;
pointer-events: none !important;
background: linear-gradient(180deg,
rgba(127, 255, 165, 0) 0%,
rgba(127, 255, 165, 0.12) 50%,
rgba(127, 255, 165, 0) 100%) !important;
display: none;
}
body.mx-fx-on .mx-edge { display: block !important; }
.mx-edge.left { left: 8px !important; }
.mx-edge.right { right: 8px !important; }
.mx-edge.left { animation: mx-edge-pulse 8s ease-in-out infinite; }
.mx-edge.right { animation: mx-edge-pulse 8s ease-in-out infinite; animation-delay: 4s; }
@keyframes mx-edge-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
@media (max-width: 700px) {
.mx-hud { font-size: 9px !important; bottom: 14px !important; left: 14px !important; gap: 14px !important; }
.mx-rail { right: 12px !important; top: 14px !important; bottom: 14px !important; }
.mx-edge.left { left: 4px !important; }
.mx-edge.right { right: 4px !important; }
}
@media (prefers-reduced-motion: reduce) {
.mx-dust, .mx-edge { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX SECTIONS POLISH v4 — distinctive per-block typography & marks
• Section eyebrows: pulsing status-dot prefix `● 01 / SERVICES`
• Card top-left/top-right corner ticks (premium framing)
• Process steps: matrix status indicators (○ ◐ ●)
• Stats numbers: hex-ID prefix + larger scale
• Manifesto: ROOT$ prefix
• Testimonials: matrix-style quote marks
═══════════════════════════════════════════════════════════════════════ */
/* 1. Section eyebrows — add pulsing live-dot prefix */
html.mode-matrix .section-eyebrow {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 6px 0 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.78) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.75) !important;
margin-bottom: 40px !important;
}
html.mode-matrix .section-eyebrow::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #7FFFA5 !important;
box-shadow: 0 0 8px rgba(127, 255, 165, 0.85) !important;
flex-shrink: 0 !important;
animation: mx-eyebrow-pulse 2.4s ease-in-out infinite !important;
position: static !important;
}
@keyframes mx-eyebrow-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(127, 255, 165, 0.85); }
50% { opacity: 0.5; box-shadow: 0 0 4px rgba(127, 255, 165, 0.4); }
}
/* 2. CARDS — top corner ticks `┌─` and `─┐` */
html.mode-matrix .sticker-card,
html.mode-matrix .svc-card,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step {
position: relative;
padding: 38px 30px 32px !important;
}
html.mode-matrix .sticker-card::before,
html.mode-matrix .svc-card::before,
html.mode-matrix .testimonial-card::before,
html.mode-matrix .process-step::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 14px !important;
left: 14px !important;
width: 12px !important;
height: 12px !important;
border-top: 1px solid rgba(127, 255, 165, 0.5) !important;
border-left: 1px solid rgba(127, 255, 165, 0.5) !important;
background: none !important;
pointer-events: none;
}
html.mode-matrix .sticker-card::after,
html.mode-matrix .svc-card::after,
html.mode-matrix .testimonial-card::after,
html.mode-matrix .process-step::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 12px !important;
height: 12px !important;
border-top: 1px solid rgba(127, 255, 165, 0.5) !important;
border-right: 1px solid rgba(127, 255, 165, 0.5) !important;
pointer-events: none;
}
/* Hover — corners brighten */
html.mode-matrix .sticker-card:hover::before,
html.mode-matrix .svc-card:hover::before,
html.mode-matrix .testimonial-card:hover::before,
html.mode-matrix .process-step:hover::before,
html.mode-matrix .sticker-card:hover::after,
html.mode-matrix .svc-card:hover::after,
html.mode-matrix .testimonial-card:hover::after,
html.mode-matrix .process-step:hover::after {
border-top-color: #7FFFA5 !important;
border-left-color: #7FFFA5 !important;
border-right-color: #7FFFA5 !important;
box-shadow: 0 0 12px rgba(127, 255, 165, 0.4);
}
/* 3. SERVICES — numbered chip `// 01 · WEB` styled mono with hex */
html.mode-matrix .svc-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.7) !important;
margin-bottom: 16px !important;
padding: 4px 0 !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
/* 4. PROCESS — status indicators on each step */
html.mode-matrix .process-step .ps-num {
position: relative;
padding-left: 22px !important;
}
html.mode-matrix .process-step .ps-num::before {
content: '○' !important;
position: absolute;
left: 0;
color: rgba(127, 255, 165, 0.6);
font-size: 14px;
line-height: 1;
}
html.mode-matrix .process-step.active .ps-num::before {
content: '●' !important;
color: #7FFFA5;
text-shadow: 0 0 10px rgba(127, 255, 165, 0.9);
animation: mx-step-active 1.6s ease-in-out infinite;
}
@keyframes mx-step-active {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* 5. STATS — hex-style numbering, premium scale */
html.mode-matrix .stats-grid > * {
position: relative;
}
html.mode-matrix .stats-grid > *::before {
content: '0x0' counter(stat-counter) !important;
counter-increment: stat-counter !important;
display: block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
color: rgba(127, 255, 165, 0.5) !important;
margin-bottom: 8px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
html.mode-matrix .stats-grid {
counter-reset: stat-counter !important;
}
/* 6. MANIFESTO — ROOT$ prefix for terminal feel */
html.mode-matrix .manifesto-text {
position: relative;
}
html.mode-matrix .manifesto-text::before {
content: 'ROOT$ ' !important;
display: block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.36em !important;
text-transform: uppercase;
color: rgba(127, 255, 165, 0.6) !important;
margin-bottom: 28px !important;
text-align: center !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
/* 7. TESTIMONIALS — matrix-style quote marks `「 ... 」` */
html.mode-matrix .testimonial-card {
padding-top: 48px !important;
}
html.mode-matrix .testimonial-card .quote {
position: relative;
padding: 0 14px !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
html.mode-matrix .testimonial-card .quote::before {
content: '「' !important;
display: inline-block !important;
position: absolute;
top: -22px;
left: 0;
color: rgba(127, 255, 165, 0.85);
font-size: 22px;
font-family: 'Share Tech Mono', monospace;
text-shadow: 0 0 8px rgba(127, 255, 165, 0.5);
}
html.mode-matrix .testimonial-card .quote::after {
content: '」' !important;
display: inline-block !important;
margin-left: 4px;
color: rgba(127, 255, 165, 0.85);
font-size: 22px;
font-family: 'Share Tech Mono', monospace;
text-shadow: 0 0 8px rgba(127, 255, 165, 0.5);
vertical-align: -4px;
}
html.mode-matrix .testimonial-card .author {
margin-top: 14px !important;
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(127, 255, 165, 0.6) !important;
}
html.mode-matrix .testimonial-card .author::before {
content: '─ ' !important;
opacity: 0.7;
}
/* 8. CREDO items — add a thin pulsing dot before each item-num */
html.mode-matrix .credo-block.matrix-only .credo-item-num {
position: relative;
padding-left: 16px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num::before {
content: '◇' !important;
position: absolute;
left: 0;
color: rgba(127, 255, 165, 0.55);
font-size: 11px;
}
html.mode-matrix .credo-block.matrix-only .credo-item:hover .credo-item-num::before {
content: '◆' !important;
color: #7FFFA5;
text-shadow: 0 0 6px rgba(127, 255, 165, 0.6);
}
/* 9. CONTACT channels — add `>` arrow ALWAYS visible at end of each */
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
position: relative;
padding-right: 40px !important;
}
html.mode-matrix #contact .contact-block .btn-primary::after,
html.mode-matrix #contact .contact-block .btn-secondary::after {
content: '→' !important;
display: block !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'Share Tech Mono', monospace !important;
color: rgba(127, 255, 165, 0.55) !important;
font-size: 18px !important;
transition: transform 220ms ease, color 220ms ease !important;
background: none !important;
width: auto !important;
height: auto !important;
}
html.mode-matrix #contact .contact-block .btn-primary:hover::after,
html.mode-matrix #contact .contact-block .btn-secondary:hover::after {
color: #7FFFA5 !important;
transform: translate(8px, -50%) !important;
}
/* 10. SECTION HEADLINES — subtle accent prefix line `─` */
html.mode-matrix .section-headline {
position: relative;
padding-left: 0 !important;
}
html.mode-matrix .section-headline::after {
content: '' !important;
display: block !important;
width: 40px;
height: 1px;
background: #7FFFA5;
box-shadow: 0 0 8px rgba(127, 255, 165, 0.55);
margin-top: 32px;
}
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .section-eyebrow::before,
html.mode-matrix .process-step.active .ps-num::before {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX SECTIONS v5 — RADICAL LAYOUT CHANGE
═══════════════════════════════════════════════════════════════════════ */
/* ───── SERVICES — magazine-style vertical rows ───── */
html.mode-matrix #services .services-grid {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0 !important;
}
html.mode-matrix #services .sticker-card {
display: grid !important;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr) !important;
grid-template-rows: auto auto auto !important;
gap: 18px 64px !important;
padding: 56px 28px !important;
border-top: 1px solid rgba(127, 255, 165, 0.18) !important;
align-items: start !important;
transform: none !important;
}
html.mode-matrix #services .sticker-card:first-child {
border-top: 0 !important;
}
html.mode-matrix #services .sticker-card::before,
html.mode-matrix #services .sticker-card::after {
display: none !important;
}
html.mode-matrix #services .sticker-card .svc-num {
grid-column: 1; grid-row: 1;
font-size: 11px !important;
letter-spacing: 0.4em !important;
color: rgba(127, 255, 165, 0.6) !important;
margin: 0 !important;
}
html.mode-matrix #services .sticker-card .svc-name {
grid-column: 1; grid-row: 2;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(36px, 4.4vw, 64px) !important;
font-weight: 400 !important;
line-height: 0.98 !important;
letter-spacing: -0.01em !important;
color: #DAFFE3 !important;
text-shadow: 0 0 4px rgba(0,0,0,0.85), 0 0 18px rgba(127,255,165,0.32) !important;
margin: 0 !important;
text-transform: uppercase !important;
}
html.mode-matrix #services .sticker-card .svc-body {
grid-column: 2; grid-row: 1 / span 2;
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.75 !important;
color: rgba(218, 255, 227, 0.78) !important;
margin: 0 !important;
max-width: 620px;
}
html.mode-matrix #services .sticker-card .svc-bullets {
grid-column: 2; grid-row: 3;
margin: 14px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
html.mode-matrix #services .sticker-card .svc-bullets li {
position: relative;
padding: 10px 0 10px 22px !important;
margin: 0 !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(218, 255, 227, 0.85) !important;
border-bottom: 1px solid rgba(127, 255, 165, 0.08);
}
html.mode-matrix #services .sticker-card .svc-bullets li:last-child {
border-bottom: 0;
}
html.mode-matrix #services .sticker-card .svc-bullets li::before {
content: '─' !important;
position: absolute !important;
left: 0; top: 10px;
color: rgba(127, 255, 165, 0.55) !important;
font-size: 12px;
}
@media (max-width: 900px) {
html.mode-matrix #services .sticker-card {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.mode-matrix #services .sticker-card .svc-body,
html.mode-matrix #services .sticker-card .svc-bullets {
grid-column: 1 !important; grid-row: auto !important;
}
}
/* ───── STATS — 4-cell terminal display ───── */
html.mode-matrix .stats-band { padding: 100px 0 !important; }
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 1px !important;
background: rgba(127, 255, 165, 0.10) !important;
max-width: 1280px !important;
padding: 1px !important;
margin: 0 auto !important;
counter-reset: stat-counter !important;
}
html.mode-matrix .stats-grid > * {
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
padding: 44px 28px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: space-between !important;
min-height: 220px !important;
border: 0 !important;
position: relative;
}
html.mode-matrix .stats-grid > *::before {
content: '0x0' counter(stat-counter) !important;
counter-increment: stat-counter !important;
display: block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.34em !important;
color: rgba(127, 255, 165, 0.7) !important;
margin-bottom: 12px !important;
}
html.mode-matrix .stats-grid .num {
font-size: clamp(48px, 5.5vw, 76px) !important;
font-family: 'Share Tech Mono', monospace !important;
color: #DAFFE3 !important;
letter-spacing: -0.02em !important;
line-height: 0.92 !important;
margin: 8px 0 !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 18px rgba(127,255,165,0.4) !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 10.5px !important;
letter-spacing: 0.24em !important;
line-height: 1.55 !important;
color: rgba(218, 255, 227, 0.6) !important;
text-transform: uppercase !important;
margin-top: auto !important;
}
@media (max-width: 700px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ───── PROCESS — vertical timeline with dot+line ───── */
html.mode-matrix #process .process-row {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
max-width: 920px !important;
margin: 0 auto !important;
position: relative;
padding-left: 56px !important;
counter-reset: ps-counter !important;
}
html.mode-matrix #process .process-row::before {
content: '' !important;
position: absolute !important;
left: 28px !important;
top: 24px !important;
bottom: 24px !important;
width: 1px !important;
background: linear-gradient(180deg,
rgba(127, 255, 165, 0) 0%,
rgba(127, 255, 165, 0.42) 8%,
rgba(127, 255, 165, 0.42) 92%,
rgba(127, 255, 165, 0) 100%);
}
html.mode-matrix #process .process-arrow { display: none !important; }
html.mode-matrix #process .process-step {
display: block !important;
padding: 28px 0 28px 36px !important;
position: relative;
border-top: 1px solid rgba(127, 255, 165, 0.08) !important;
background: transparent !important;
}
html.mode-matrix #process .process-step:first-child { border-top: 0 !important; }
html.mode-matrix #process .process-step::before {
content: '' !important;
position: absolute !important;
left: -33px !important;
top: 38px !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.85) !important;
border: 1px solid rgba(127, 255, 165, 0.55) !important;
z-index: 2;
}
html.mode-matrix #process .process-step.active::before {
background: #7FFFA5 !important;
border-color: #7FFFA5 !important;
box-shadow: 0 0 14px rgba(127, 255, 165, 0.85) !important;
animation: mx-step-active 1.6s ease-in-out infinite !important;
}
html.mode-matrix #process .process-step::after { display: none !important; }
html.mode-matrix #process .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.28em !important;
color: rgba(127, 255, 165, 0.7) !important;
margin-bottom: 12px !important;
padding-left: 0 !important;
text-transform: uppercase !important;
}
html.mode-matrix #process .process-step .ps-num::before {
content: '[ 0x0' counter(ps-counter) ' ] ' !important;
counter-increment: ps-counter !important;
opacity: 0.7;
}
html.mode-matrix #process .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(22px, 2.4vw, 32px) !important;
font-weight: 400 !important;
color: #DAFFE3 !important;
letter-spacing: -0.005em !important;
line-height: 1.1 !important;
margin-bottom: 14px !important;
text-transform: uppercase !important;
}
html.mode-matrix #process .process-step .ps-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: rgba(218, 255, 227, 0.78) !important;
max-width: 620px;
}
/* ───── TESTIMONIALS — single magazine pull-quote column ───── */
html.mode-matrix #testimonials .testimonials-marquee {
display: block !important;
overflow: visible !important;
max-width: 920px !important;
margin: 0 auto !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 48px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
padding: 40px 0 32px 0 !important;
border-top: 1px solid rgba(127, 255, 165, 0.12) !important;
position: relative;
flex: 0 0 auto !important;
width: 100% !important;
}
html.mode-matrix #testimonials .testimonial-card:first-child { border-top: 0 !important; }
html.mode-matrix #testimonials .testimonial-card::before {
content: '“' !important;
position: absolute !important;
top: 6px !important;
left: 0 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 60px !important;
color: rgba(127, 255, 165, 0.45) !important;
line-height: 1;
background: none !important;
border: 0 !important;
width: auto !important;
height: auto !important;
}
html.mode-matrix #testimonials .testimonial-card::after { display: none !important; }
html.mode-matrix #testimonials .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(18px, 2.2vw, 26px) !important;
line-height: 1.5 !important;
letter-spacing: -0.005em !important;
color: #DAFFE3 !important;
margin: 24px 0 18px 0 !important;
padding: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card .quote::before,
html.mode-matrix #testimonials .testimonial-card .quote::after { display: none !important; }
html.mode-matrix #testimonials .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.65) !important;
}
html.mode-matrix #testimonials .testimonial-card .author::before {
content: '— ' !important;
opacity: 0.7;
}
/* Only show first 5 testimonials (marquee has duplicates) */
html.mode-matrix #testimonials .testimonial-card:nth-child(n+6) {
display: none !important;
}
/* ───── CREDO — JSON-manifest file readout ───── */
html.mode-matrix .credo-block.matrix-only .credo-items {
display: block !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid rgba(127, 255, 165, 0.22) !important;
border-radius: 6px !important;
padding: 28px 32px !important;
max-width: 720px !important;
margin: 48px 0 0 0 !important;
position: relative;
font-family: 'Share Tech Mono', monospace !important;
}
html.mode-matrix .credo-block.matrix-only .credo-items::before {
content: 'manifest.json' !important;
position: absolute !important;
top: -10px !important;
left: 18px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
padding: 0 10px !important;
background: #000 !important;
color: rgba(127, 255, 165, 0.75) !important;
text-transform: uppercase;
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
align-items: baseline !important;
gap: 0 !important;
padding: 7px 0 !important;
border-top: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
flex-shrink: 0 !important;
font-size: 12.5px !important;
letter-spacing: 0.06em !important;
color: rgba(127, 255, 165, 0.55) !important;
margin-right: 12px !important;
padding: 0 !important;
min-width: 36px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num::before {
content: '"' !important;
position: static !important;
opacity: 0.6;
font-size: 13px;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num::after {
content: '": ' !important;
opacity: 0.6;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
display: inline !important;
font-size: 13px !important;
color: #DAFFE3 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text::before {
content: '"' !important;
opacity: 0.6;
color: rgba(127, 255, 165, 0.5);
}
html.mode-matrix .credo-block.matrix-only .credo-item-text::after {
content: '",' !important;
opacity: 0.6;
color: rgba(127, 255, 165, 0.5);
}
html.mode-matrix .credo-block.matrix-only .credo-item:last-child .credo-item-text::after {
content: '"' !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX SECTIONS v6 — RADICAL CLEAN
• Strip ALL borders, hairlines, brackets, dots, quote-marks, frames
• Strip HUD, scan-beam, dust, edge-rails, corner-brackets
• Asymmetric text-only typography
• Premium ambient breathing only
═══════════════════════════════════════════════════════════════════════ */
/* 1. KILL ALL DECORATIONS in matrix — purge every pseudo-element + border */
html.mode-matrix *::before,
html.mode-matrix *::after {
background-image: none !important;
}
/* Kill section/card decorations entirely */
html.mode-matrix .sticker-card::before,
html.mode-matrix .sticker-card::after,
html.mode-matrix .svc-card::before,
html.mode-matrix .svc-card::after,
html.mode-matrix .testimonial-card::before,
html.mode-matrix .testimonial-card::after,
html.mode-matrix .process-step::before,
html.mode-matrix .process-step::after,
html.mode-matrix .process-row::before,
html.mode-matrix .process-row::after,
html.mode-matrix #services::before,
html.mode-matrix #services::after,
html.mode-matrix #process::before,
html.mode-matrix #process::after,
html.mode-matrix #testimonials::before,
html.mode-matrix #testimonials::after,
html.mode-matrix #contact::before,
html.mode-matrix #contact::after,
html.mode-matrix .stats-band::before,
html.mode-matrix .stats-band::after,
html.mode-matrix .stats-grid > *::before,
html.mode-matrix .stats-grid > *::after,
html.mode-matrix .manifesto-block::before,
html.mode-matrix .manifesto-block::after,
html.mode-matrix .manifesto-text::before,
html.mode-matrix .manifesto-text::after,
html.mode-matrix .credo-block::before,
html.mode-matrix .credo-block::after,
html.mode-matrix .credo-block.matrix-only .credo-item-num::before,
html.mode-matrix .credo-block.matrix-only .credo-item-num::after,
html.mode-matrix .credo-block.matrix-only .credo-item-text::before,
html.mode-matrix .credo-block.matrix-only .credo-item-text::after,
html.mode-matrix .credo-block.matrix-only .credo-items::before,
html.mode-matrix .credo-block.matrix-only .credo-items::after,
html.mode-matrix .testimonial-card .quote::before,
html.mode-matrix .testimonial-card .quote::after,
html.mode-matrix .section-headline::before,
html.mode-matrix .section-headline::after,
html.mode-matrix .section-eyebrow::before,
html.mode-matrix .section-eyebrow::after,
html.mode-matrix .svc-num::before,
html.mode-matrix .svc-num::after,
html.mode-matrix .ps-num::before,
html.mode-matrix .ps-num::after,
html.mode-matrix .svc-bullets li::before,
html.mode-matrix .svc-bullets li::after,
html.mode-matrix .author::before,
html.mode-matrix .author::after,
html.mode-matrix .num::before,
html.mode-matrix .num::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
/* Kill all borders everywhere except nav-related */
html.mode-matrix .sticker-card,
html.mode-matrix .svc-card,
html.mode-matrix .testimonial-card,
html.mode-matrix .process-step,
html.mode-matrix .stats-grid,
html.mode-matrix .stats-grid > *,
html.mode-matrix .credo-block.matrix-only .credo-items,
html.mode-matrix .credo-block.matrix-only .credo-item,
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary,
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0 !important;
}
/* 2. KILL HUD / scan-beam / dust / edges / corner brackets */
.mx-hud, .mx-rail, .mx-dust, .mx-edge,
.mx-frame-corner, .mx-scan-beam,
.mx-cursor, .mx-cursor-halo {
display: none !important;
}
/* 3. SERVICES — asymmetric: huge title pushed RIGHT, body LEFT */
html.mode-matrix #services .services-grid {
display: flex !important;
flex-direction: column !important;
gap: 100px !important;
}
html.mode-matrix #services .sticker-card {
display: grid !important;
grid-template-columns: 1fr 1.6fr !important;
gap: 80px !important;
padding: 0 !important;
align-items: start !important;
}
/* Alternate alignment — odd LEFT, even right-flipped */
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: 1.6fr 1fr !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-num,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-name {
grid-column: 2 !important;
text-align: right !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-body,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-bullets {
grid-column: 1 !important;
}
html.mode-matrix #services .sticker-card .svc-num {
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: rgba(127, 255, 165, 0.5) !important;
margin-bottom: 18px !important;
}
html.mode-matrix #services .sticker-card .svc-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5.4vw, 80px) !important;
font-weight: 400 !important;
line-height: 0.96 !important;
letter-spacing: -0.015em !important;
color: #E8FFEF !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.32) !important;
text-transform: uppercase !important;
margin: 0 !important;
}
html.mode-matrix #services .sticker-card .svc-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 13.5px !important;
line-height: 1.8 !important;
color: rgba(218, 255, 227, 0.7) !important;
margin: 0 !important;
max-width: 540px;
}
html.mode-matrix #services .sticker-card .svc-bullets {
list-style: none !important;
padding: 0 !important;
margin: 18px 0 0 !important;
}
html.mode-matrix #services .sticker-card .svc-bullets li {
padding: 6px 0 !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.65 !important;
color: rgba(218, 255, 227, 0.78) !important;
border: 0 !important;
}
@media (max-width: 900px) {
html.mode-matrix #services .sticker-card,
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-num,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-name {
text-align: left !important;
grid-column: 1 !important;
}
}
/* 4. STATS — scattered massive numbers, no grid lines */
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 60px !important;
background: transparent !important;
padding: 0 !important;
}
html.mode-matrix .stats-grid > * {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
border: 0 !important;
min-height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Make alternate stat cells visually shift */
html.mode-matrix .stats-grid > *:nth-child(2) { margin-top: 60px !important; }
html.mode-matrix .stats-grid > *:nth-child(3) { margin-top: 30px !important; }
html.mode-matrix .stats-grid > *:nth-child(4) { margin-top: 90px !important; }
html.mode-matrix .stats-grid .num {
font-size: clamp(56px, 7vw, 110px) !important;
font-family: 'Share Tech Mono', monospace !important;
color: #E8FFEF !important;
letter-spacing: -0.025em !important;
line-height: 0.9 !important;
margin-bottom: 14px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.4) !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(218, 255, 227, 0.45) !important;
line-height: 1.55 !important;
max-width: 200px;
}
@media (max-width: 700px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
html.mode-matrix .stats-grid > *:nth-child(n) { margin-top: 0 !important; }
}
/* 5. PROCESS — large indented numbers, no line, no dots */
html.mode-matrix #process .process-row {
display: flex !important;
flex-direction: column !important;
gap: 70px !important;
max-width: 1080px !important;
margin: 0 auto !important;
padding: 0 !important;
}
html.mode-matrix #process .process-arrow { display: none !important; }
html.mode-matrix #process .process-step {
display: grid !important;
grid-template-columns: 140px 1fr !important;
gap: 40px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
align-items: baseline !important;
}
html.mode-matrix #process .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(28px, 3vw, 48px) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: rgba(127, 255, 165, 0.55) !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-transform: uppercase !important;
}
html.mode-matrix #process .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(26px, 3vw, 42px) !important;
font-weight: 400 !important;
color: #E8FFEF !important;
letter-spacing: -0.01em !important;
line-height: 1.05 !important;
margin: 0 0 14px 0 !important;
text-transform: uppercase !important;
}
html.mode-matrix #process .process-step .ps-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 13.5px !important;
line-height: 1.75 !important;
color: rgba(218, 255, 227, 0.72) !important;
max-width: 580px;
}
/* Active step glows brighter */
html.mode-matrix #process .process-step.active .ps-name {
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.5) !important;
}
/* 6. TESTIMONIALS — single column, asymmetric (alternate left/right indent) */
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
max-width: 1080px !important;
margin: 0 auto !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 80px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
max-width: 680px !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(odd) {
margin-left: 0 !important;
margin-right: auto !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(even) {
margin-left: auto !important;
margin-right: 0 !important;
text-align: right !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(18px, 2.4vw, 28px) !important;
line-height: 1.5 !important;
letter-spacing: -0.005em !important;
color: #E8FFEF !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.55) !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(n+5) {
display: none !important;
}
/* 7. CREDO — pure typography, no JSON box, asymmetric */
html.mode-matrix .credo-block.matrix-only .credo-grid {
display: block !important;
max-width: 1080px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-aside {
display: none !important;
}
html.mode-matrix .credo-block.matrix-only .credo-main {
text-align: left !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(48px, 7vw, 100px) !important;
font-weight: 400 !important;
line-height: 0.95 !important;
letter-spacing: -0.018em !important;
margin: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: rgba(127, 255, 165, 0.42) !important;
text-shadow: 0 0 14px rgba(127,255,165,0.18) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
color: #E8FFEF !important;
margin-top: 4px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 24px rgba(127,255,165,0.42) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-items {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px 60px !important;
margin: 80px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
max-width: 880px;
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
align-items: baseline !important;
gap: 18px !important;
padding: 0 !important;
border: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
color: rgba(127, 255, 165, 0.5) !important;
flex-shrink: 0 !important;
min-width: 28px !important;
padding: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(218, 255, 227, 0.85) !important;
}
@media (max-width: 700px) {
html.mode-matrix .credo-block.matrix-only .credo-items {
grid-template-columns: 1fr !important;
}
}
/* 8. CONTACT — clean editorial, no arrows, no lines */
html.mode-matrix #contact .contact-block > div {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
align-items: flex-start !important;
}
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(20px, 2.6vw, 36px) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
color: #E8FFEF !important;
text-decoration: none !important;
text-transform: none !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 18px rgba(127,255,165,0.3) !important;
transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease !important;
}
html.mode-matrix #contact .contact-block .btn-primary::before,
html.mode-matrix #contact .contact-block .btn-secondary::before,
html.mode-matrix #contact .contact-block .btn-primary::after,
html.mode-matrix #contact .contact-block .btn-secondary::after {
display: none !important;
content: none !important;
}
html.mode-matrix #contact .contact-block .btn-primary:hover,
html.mode-matrix #contact .contact-block .btn-secondary:hover {
color: #FFFFFF !important;
transform: translateX(8px) !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.7) !important;
}
/* 9. MANIFESTO — pure huge typography centered, nothing else */
html.mode-matrix .manifesto-block {
text-align: center !important;
padding: 200px 40px !important;
}
html.mode-matrix .manifesto-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 6vw, 96px) !important;
font-weight: 400 !important;
letter-spacing: -0.018em !important;
line-height: 1.06 !important;
color: #E8FFEF !important;
margin: 0 auto !important;
max-width: 1200px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 28px rgba(127,255,165,0.42) !important;
}
html.mode-matrix .manifesto-text em {
color: rgba(127, 255, 165, 0.85) !important;
font-style: normal !important;
}
/* 10. SECTION HEADLINES — no decorations, left-aligned, big mono */
html.mode-matrix .section-headline {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5.4vw, 84px) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
line-height: 1 !important;
color: #E8FFEF !important;
margin: 0 0 80px 0 !important;
padding: 0 !important;
text-align: left !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.32) !important;
}
html.mode-matrix .section-headline em {
color: rgba(127, 255, 165, 0.85) !important;
font-style: normal !important;
}
html.mode-matrix .section-eyebrow {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.5) !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
display: block !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
/* 11. Subtle hover effect on cards/items — text gently brightens (no movement) */
@keyframes mx-text-glow-shift {
0%, 100% { text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 12px rgba(127,255,165,0.25); }
50% { text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 22px rgba(127,255,165,0.55); }
}
html.mode-matrix .sticker-card:hover .svc-name,
html.mode-matrix .process-step:hover .ps-name,
html.mode-matrix .testimonial-card:hover .quote,
html.mode-matrix .stats-grid > *:hover .num,
html.mode-matrix .credo-item:hover .credo-item-text {
animation: mx-text-glow-shift 1.8s ease-in-out infinite !important;
}
/* 12. Section padding — generous */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 140px 40px !important;
max-width: 100% !important;
}
html.mode-matrix section > .container,
html.mode-matrix .stats-band > .stats-grid {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v7 — strip remaining lines + tech FX on headlines
═══════════════════════════════════════════════════════════════════════ */
/* 1. NUKE every remaining border/line in matrix */
html.mode-matrix section,
html.mode-matrix section *,
html.mode-matrix .credo-block,
html.mode-matrix .credo-block *,
html.mode-matrix .manifesto-block,
html.mode-matrix .manifesto-block *,
html.mode-matrix .stats-band,
html.mode-matrix .stats-band *,
html.mode-matrix #contact,
html.mode-matrix #contact * {
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
outline: 0 !important;
}
/* keep focus outline for a11y */
html.mode-matrix *:focus-visible {
outline: 1px solid rgba(127, 255, 165, 0.5) !important;
outline-offset: 4px !important;
}
/* 2. Eyebrows tech-feel — wider tracking, very faint */
html.mode-matrix .section-eyebrow {
position: relative;
display: inline-block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.52em !important;
text-transform: uppercase !important;
color: rgba(127, 255, 165, 0.55) !important;
margin-bottom: 28px !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
transition: letter-spacing 280ms ease, color 280ms ease;
}
/* 3. Section headlines — slow tech-glow shift */
@keyframes mx-headline-glow {
0%, 100% {
text-shadow: 0 0 4px rgba(0,0,0,0.8),
0 0 14px rgba(127, 255, 165, 0.25),
0 0 32px rgba(127, 255, 165, 0.08);
}
50% {
text-shadow: 0 0 4px rgba(0,0,0,0.8),
0 0 22px rgba(127, 255, 165, 0.5),
0 0 52px rgba(127, 255, 165, 0.18);
}
}
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2,
html.mode-matrix .manifesto-text {
animation: mx-headline-glow 5.5s ease-in-out infinite !important;
will-change: text-shadow;
}
html.mode-matrix .stats-grid .num {
animation: mx-headline-glow 6.5s ease-in-out infinite !important;
}
html.mode-matrix .stats-grid > *:nth-child(2) .num { animation-delay: 1.2s !important; }
html.mode-matrix .stats-grid > *:nth-child(3) .num { animation-delay: 2.4s !important; }
html.mode-matrix .stats-grid > *:nth-child(4) .num { animation-delay: 3.6s !important; }
/* 4. Decode reveal — (v3.2 2026-05-12)
Layout isolation: `contain: layout` means width/height changes inside
the scrambling span DO NOT propagate up the tree. Parent block layout
stays stable even on multi-line hero/manifesto headlines. */
html.mode-matrix .mx-decoding {
contain: layout style;
}
/* 5. Hover on headlines — brighter glow */
html.mode-matrix .section-headline:hover,
html.mode-matrix .stats-grid .num:hover {
text-shadow: 0 0 4px rgba(0,0,0,0.8),
0 0 28px rgba(127, 255, 165, 0.65),
0 0 68px rgba(127, 255, 165, 0.24) !important;
}
/* 6. Eyebrow hover — letter-spacing widens */
html.mode-matrix section:hover .section-eyebrow,
html.mode-matrix .stats-band:hover .section-eyebrow,
html.mode-matrix .credo-block:hover .section-eyebrow {
letter-spacing: 0.65em !important;
color: rgba(127, 255, 165, 0.85) !important;
}
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline,
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2,
html.mode-matrix .manifesto-text,
html.mode-matrix .stats-grid .num {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v8 — CENTERED EDITORIAL LAYOUT
All sections: narrow centered column, vertical rhythm
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 160px 40px !important;
text-align: center !important;
}
html.mode-matrix section > .container,
html.mode-matrix .credo-block > .credo-grid,
html.mode-matrix .stats-band > .stats-grid {
max-width: 1080px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
html.mode-matrix .section-eyebrow {
display: block !important;
text-align: center !important;
font-size: 10px !important;
letter-spacing: 0.55em !important;
color: rgba(127, 255, 165, 0.55) !important;
margin: 0 auto 40px !important;
padding: 0 !important;
}
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
text-align: center !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5.4vw, 80px) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
line-height: 1 !important;
color: #E8FFEF !important;
max-width: 1000px !important;
margin: 0 auto 80px !important;
padding: 0 !important;
}
/* SERVICES — 3 vertical centered blocks */
html.mode-matrix #services .services-grid {
display: flex !important;
flex-direction: column !important;
gap: 120px !important;
align-items: center !important;
}
html.mode-matrix #services .sticker-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
max-width: 760px !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
gap: 0 !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: none !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-num,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-name,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-body,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-bullets {
text-align: center !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-num {
display: block !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: rgba(127, 255, 165, 0.6) !important;
margin: 0 auto 22px !important;
text-align: center !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(36px, 4.6vw, 64px) !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
line-height: 1 !important;
color: #E8FFEF !important;
text-transform: uppercase !important;
margin: 0 0 28px 0 !important;
text-align: center !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: rgba(218, 255, 227, 0.78) !important;
max-width: 600px !important;
margin: 0 auto !important;
text-align: center !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-bullets {
list-style: none !important;
padding: 0 !important;
margin: 28px auto 0 !important;
max-width: 540px !important;
text-align: center !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-bullets li {
padding: 8px 0 !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.7 !important;
color: rgba(218, 255, 227, 0.78) !important;
text-align: center !important;
}
/* STATS — 4 numbers centered horizontal */
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 40px !important;
background: transparent !important;
padding: 0 !important;
align-items: start !important;
}
html.mode-matrix .stats-grid > * {
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
min-height: 0 !important;
margin-top: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
html.mode-matrix .stats-grid > *:nth-child(n) { margin-top: 0 !important; }
html.mode-matrix .stats-grid .num {
font-size: clamp(56px, 6.5vw, 96px) !important;
color: #E8FFEF !important;
letter-spacing: -0.022em !important;
line-height: 0.95 !important;
margin: 0 0 14px 0 !important;
text-align: center !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 10px !important;
letter-spacing: 0.34em !important;
color: rgba(218, 255, 227, 0.55) !important;
line-height: 1.55 !important;
max-width: none !important;
text-align: center !important;
}
@media (max-width: 700px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* PROCESS — stacked centered steps */
html.mode-matrix #process .process-row {
display: flex !important;
flex-direction: column !important;
gap: 90px !important;
align-items: center !important;
max-width: 760px !important;
margin: 0 auto !important;
padding: 0 !important;
}
html.mode-matrix #process .process-arrow { display: none !important; }
html.mode-matrix #process .process-step {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
gap: 0 !important;
max-width: 720px !important;
}
html.mode-matrix #process .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: rgba(127, 255, 165, 0.6) !important;
margin: 0 auto 18px !important;
padding: 0 !important;
text-align: center !important;
text-transform: uppercase !important;
}
html.mode-matrix #process .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(28px, 3.4vw, 48px) !important;
font-weight: 400 !important;
color: #E8FFEF !important;
letter-spacing: -0.008em !important;
line-height: 1.05 !important;
margin: 0 0 22px 0 !important;
text-transform: uppercase !important;
text-align: center !important;
}
html.mode-matrix #process .process-step .ps-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: rgba(218, 255, 227, 0.72) !important;
max-width: 580px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* TESTIMONIALS — single centered column */
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
max-width: 760px !important;
margin: 0 auto !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 100px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
align-items: center !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
padding: 0 !important;
max-width: 680px !important;
margin: 0 auto !important;
text-align: center !important;
flex: 0 0 auto !important;
width: 100% !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(odd),
html.mode-matrix #testimonials .testimonial-card:nth-child(even) {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(18px, 2.2vw, 26px) !important;
line-height: 1.55 !important;
letter-spacing: -0.005em !important;
color: #E8FFEF !important;
margin: 0 auto 24px !important;
padding: 0 !important;
text-align: center !important;
max-width: 640px !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.45em !important;
color: rgba(127, 255, 165, 0.55) !important;
text-align: center !important;
display: block !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(n+5) {
display: none !important;
}
/* CREDO — centered headline + 4 items 2x2 centered */
html.mode-matrix .credo-block.matrix-only .credo-grid {
display: block !important;
text-align: center !important;
max-width: 1080px !important;
padding: 0 40px !important;
margin: 0 auto !important;
}
html.mode-matrix .credo-block.matrix-only .credo-aside { display: none !important; }
html.mode-matrix .credo-block.matrix-only .credo-main { text-align: center !important; }
html.mode-matrix .credo-block.matrix-only .credo-headline {
text-align: center !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(48px, 6.6vw, 96px) !important;
font-weight: 400 !important;
line-height: 0.96 !important;
letter-spacing: -0.018em !important;
text-align: center !important;
margin: 0 auto !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: rgba(127, 255, 165, 0.42) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
color: #E8FFEF !important;
margin-top: 4px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-items {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px 60px !important;
margin: 80px auto 0 !important;
padding: 0 !important;
background: transparent !important;
max-width: 800px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 0 !important;
gap: 8px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.4em !important;
color: rgba(127, 255, 165, 0.55) !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: rgba(218, 255, 227, 0.85) !important;
text-align: center !important;
max-width: 320px;
}
@media (max-width: 700px) {
html.mode-matrix .credo-block.matrix-only .credo-items {
grid-template-columns: 1fr !important;
}
}
/* CONTACT — centered */
html.mode-matrix #contact .container { text-align: center !important; }
html.mode-matrix #contact .contact-block {
text-align: center !important;
max-width: 720px !important;
margin: 0 auto !important;
}
html.mode-matrix #contact .contact-block p {
text-align: center !important;
max-width: 600px !important;
margin: 0 auto 48px !important;
}
html.mode-matrix #contact .contact-block > div {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
align-items: center !important;
}
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
text-align: center !important;
width: auto !important;
display: inline-block !important;
font-size: clamp(20px, 2.4vw, 32px) !important;
}
html.mode-matrix #contact .contact-block .btn-primary:hover,
html.mode-matrix #contact .contact-block .btn-secondary:hover {
transform: translateY(-2px) !important;
}
/* MANIFESTO — centered */
html.mode-matrix .manifesto-block { text-align: center !important; }
html.mode-matrix .manifesto-text {
text-align: center !important;
max-width: 1100px !important;
margin: 0 auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v9 — LEFT-ALIGNED EDITORIAL · COOL WHITE × MINT ACCENT
• Text: cool warm-white (#F0F5F2) — премиум, не зелёный «лес»
• Mint только как accent (em, numbers, eyebrows)
• Layout: всё прижато влево (~8vw padding) с широким правым воздухом
• Бigger типографика, больше воздуха, premium restraint
═══════════════════════════════════════════════════════════════════════ */
/* Universal: left-aligned, generous left padding, large negative right space */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 180px clamp(40px, 8vw, 140px) !important;
text-align: left !important;
}
html.mode-matrix section > .container,
html.mode-matrix .credo-block > .credo-grid,
html.mode-matrix .stats-band > .stats-grid {
max-width: 1240px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* ─── Color tokens override: cool white + mint accent ─── */
html.mode-matrix {
--mx-text-bright: #F5FBF7 !important;
--mx-text: rgba(245, 251, 247, 0.82) !important;
--mx-accent: #5BFF8B !important;
--mx-accent-dim: rgba(91, 255, 139, 0.6) !important;
--mx-faint: rgba(245, 251, 247, 0.42) !important;
}
/* ─── Eyebrow: tiny mint label, top-left ─── */
html.mode-matrix .section-eyebrow {
display: block !important;
text-align: left !important;
font-size: 10px !important;
letter-spacing: 0.58em !important;
text-transform: uppercase !important;
color: rgba(91, 255, 139, 0.7) !important;
margin: 0 0 44px 0 !important;
padding: 0 !important;
text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}
/* ─── Section headline: cool white, large, left ─── */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
text-align: left !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(44px, 6vw, 92px) !important;
font-weight: 400 !important;
letter-spacing: -0.022em !important;
line-height: 0.98 !important;
color: #F5FBF7 !important;
max-width: 1000px !important;
margin: 0 0 96px 0 !important;
padding: 0 !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 24px rgba(91, 255, 139, 0.18) !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2.section-headline em {
color: #5BFF8B !important;
font-style: normal !important;
}
/* ─── SERVICES: 3 left-aligned blocks, each with title + content row ─── */
html.mode-matrix #services .services-grid {
display: flex !important;
flex-direction: column !important;
gap: 140px !important;
align-items: stretch !important;
}
html.mode-matrix #services .sticker-card {
display: grid !important;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr) !important;
gap: 80px !important;
padding: 0 !important;
background: transparent !important;
text-align: left !important;
max-width: 1240px !important;
align-items: start !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr) !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-num,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-name {
text-align: left !important;
grid-column: 1 !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-body,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-bullets {
text-align: left !important;
grid-column: 2 !important;
}
html.mode-matrix #services .sticker-card .svc-num {
grid-column: 1; grid-row: 1;
display: block !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: rgba(91, 255, 139, 0.65) !important;
margin: 0 0 22px 0 !important;
text-align: left !important;
}
html.mode-matrix #services .sticker-card .svc-name {
grid-column: 1; grid-row: 2;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5vw, 76px) !important;
font-weight: 400 !important;
letter-spacing: -0.018em !important;
line-height: 0.96 !important;
color: #F5FBF7 !important;
text-transform: uppercase !important;
margin: 0 !important;
text-align: left !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 22px rgba(91, 255, 139, 0.18) !important;
}
html.mode-matrix #services .sticker-card .svc-body {
grid-column: 2; grid-row: 1 / span 2;
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: rgba(245, 251, 247, 0.78) !important;
max-width: 620px !important;
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #services .sticker-card .svc-bullets {
grid-column: 2; grid-row: 3;
list-style: none !important;
padding: 0 !important;
margin: 22px 0 0 0 !important;
max-width: 620px !important;
}
html.mode-matrix #services .sticker-card .svc-bullets li {
padding: 7px 0 !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.7 !important;
color: rgba(245, 251, 247, 0.78) !important;
text-align: left !important;
}
@media (max-width: 900px) {
html.mode-matrix #services .sticker-card,
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
html.mode-matrix #services .sticker-card .svc-body,
html.mode-matrix #services .sticker-card .svc-bullets,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-body,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-bullets {
grid-column: 1 !important;
grid-row: auto !important;
}
}
/* ─── STATS: 4 numbers left-aligned in single row ─── */
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 60px !important;
background: transparent !important;
padding: 0 !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > * {
background: transparent !important;
padding: 0 !important;
min-height: 0 !important;
margin-top: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > *:nth-child(n) { margin-top: 0 !important; }
html.mode-matrix .stats-grid .num {
font-size: clamp(60px, 7vw, 108px) !important;
color: #F5FBF7 !important;
letter-spacing: -0.028em !important;
line-height: 0.9 !important;
margin: 0 0 16px 0 !important;
text-align: left !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 26px rgba(91, 255, 139, 0.28) !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: rgba(245, 251, 247, 0.5) !important;
line-height: 1.55 !important;
max-width: 220px !important;
text-align: left !important;
}
@media (max-width: 700px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ─── PROCESS: 4 left-aligned steps stacked ─── */
html.mode-matrix #process .process-row {
display: flex !important;
flex-direction: column !important;
gap: 100px !important;
align-items: stretch !important;
max-width: 1100px !important;
margin: 0 !important;
padding: 0 !important;
}
html.mode-matrix #process .process-arrow { display: none !important; }
html.mode-matrix #process .process-step {
display: grid !important;
grid-template-columns: 160px 1fr !important;
gap: 60px !important;
padding: 0 !important;
background: transparent !important;
text-align: left !important;
align-items: baseline !important;
}
html.mode-matrix #process .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(32px, 3.4vw, 52px) !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
color: rgba(91, 255, 139, 0.7) !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
text-transform: uppercase !important;
line-height: 1 !important;
}
html.mode-matrix #process .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(28px, 3.4vw, 52px) !important;
font-weight: 400 !important;
color: #F5FBF7 !important;
letter-spacing: -0.012em !important;
line-height: 1.02 !important;
margin: 0 0 18px 0 !important;
text-transform: uppercase !important;
text-align: left !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 22px rgba(91, 255, 139, 0.2) !important;
}
html.mode-matrix #process .process-step .ps-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: rgba(245, 251, 247, 0.78) !important;
max-width: 640px !important;
margin: 0 !important;
text-align: left !important;
}
/* ─── TESTIMONIALS: single left-aligned column ─── */
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
max-width: 1080px !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 100px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
align-items: flex-start !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
padding: 0 !important;
max-width: 760px !important;
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(odd),
html.mode-matrix #testimonials .testimonial-card:nth-child(even) {
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(20px, 2.4vw, 30px) !important;
line-height: 1.52 !important;
letter-spacing: -0.012em !important;
color: #F5FBF7 !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
text-align: left !important;
max-width: 720px !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.46em !important;
color: rgba(91, 255, 139, 0.6) !important;
text-align: left !important;
display: block !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(n+5) {
display: none !important;
}
/* ─── CREDO: huge left-aligned headline + items 2x2 left ─── */
html.mode-matrix .credo-block.matrix-only .credo-grid {
display: block !important;
text-align: left !important;
max-width: 1240px !important;
margin: 0 !important;
padding: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-aside { display: none !important; }
html.mode-matrix .credo-block.matrix-only .credo-main { text-align: left !important; }
html.mode-matrix .credo-block.matrix-only .credo-headline { text-align: left !important; }
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(56px, 8vw, 124px) !important;
font-weight: 400 !important;
line-height: 0.94 !important;
letter-spacing: -0.026em !important;
text-align: left !important;
margin: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: rgba(91, 255, 139, 0.42) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
color: #F5FBF7 !important;
margin-top: 4px !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 28px rgba(91, 255, 139, 0.28) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-items {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 36px 80px !important;
margin: 100px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
max-width: 960px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
text-align: left !important;
padding: 0 !important;
gap: 18px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.32em !important;
color: rgba(91, 255, 139, 0.6) !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
flex-shrink: 0 !important;
min-width: 32px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
color: rgba(245, 251, 247, 0.88) !important;
text-align: left !important;
}
@media (max-width: 700px) {
html.mode-matrix .credo-block.matrix-only .credo-items {
grid-template-columns: 1fr !important;
}
}
/* ─── CONTACT: left-aligned channels list ─── */
html.mode-matrix #contact .container {
text-align: left !important;
max-width: 1240px !important;
margin: 0 !important;
}
html.mode-matrix #contact .contact-block {
text-align: left !important;
max-width: 880px !important;
margin: 0 !important;
}
html.mode-matrix #contact .contact-block p {
text-align: left !important;
max-width: 680px !important;
margin: 0 0 60px 0 !important;
font-size: 15px !important;
line-height: 1.85 !important;
color: rgba(245, 251, 247, 0.78) !important;
}
html.mode-matrix #contact .contact-block > div {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
align-items: flex-start !important;
}
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
text-align: left !important;
width: auto !important;
display: inline-block !important;
font-size: clamp(24px, 3vw, 44px) !important;
font-family: 'Share Tech Mono', monospace !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
color: #F5FBF7 !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 24px rgba(91, 255, 139, 0.22) !important;
}
html.mode-matrix #contact .contact-block .btn-primary:hover,
html.mode-matrix #contact .contact-block .btn-secondary:hover {
color: #FFFFFF !important;
transform: translateX(12px) !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 28px rgba(91, 255, 139, 0.6),
0 0 60px rgba(91, 255, 139, 0.22) !important;
}
/* ─── MANIFESTO: huge left-aligned pull-quote ─── */
html.mode-matrix .manifesto-block { text-align: left !important; }
html.mode-matrix .manifesto-block .container {
text-align: left !important;
max-width: 1240px !important;
margin: 0 !important;
padding: 0 !important;
}
html.mode-matrix .manifesto-text {
text-align: left !important;
max-width: 1100px !important;
margin: 0 !important;
font-size: clamp(48px, 7vw, 108px) !important;
letter-spacing: -0.022em !important;
line-height: 1.04 !important;
color: #F5FBF7 !important;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.7),
0 0 28px rgba(91, 255, 139, 0.28) !important;
}
html.mode-matrix .manifesto-text em {
color: #5BFF8B !important;
font-style: normal !important;
}
/* ─── Card body, bullets, list items: cool warm white ─── */
html.mode-matrix p,
html.mode-matrix li,
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li {
color: rgba(245, 251, 247, 0.78) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v10 — VINTAGE CRT
• All dividers/rails/strips — GONE
• Color palette: soft aged phosphor (warm-mint, not crisp white)
• Smaller refined typography, more breathing
• Centered narrow editorial column — like reading a manuscript
• No right-side scroll rail
═══════════════════════════════════════════════════════════════════════ */
/* 1. KILL the right-side scroll rail + corner brackets + edges + dust */
.mx-rail, .mx-rail *,
.mx-edge, .mx-edge *,
.mx-frame-corner,
.mx-hud,
.mx-scan-beam,
.mx-cursor, .mx-cursor-halo,
.mx-dust {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 2. NUKE every border / hairline in matrix sections */
html.mode-matrix section,
html.mode-matrix section *,
html.mode-matrix .credo-block,
html.mode-matrix .credo-block *,
html.mode-matrix .manifesto-block,
html.mode-matrix .manifesto-block *,
html.mode-matrix .stats-band,
html.mode-matrix .stats-band *,
html.mode-matrix #contact,
html.mode-matrix #contact *,
html.mode-matrix .nav-bar,
html.mode-matrix .nav-bar * {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* a11y focus */
html.mode-matrix *:focus-visible {
outline: 1px solid rgba(125, 200, 155, 0.4) !important;
outline-offset: 4px !important;
}
/* 3. NEW VINTAGE CRT PALETTE — aged phosphor, warm-mint, low saturation */
html.mode-matrix {
--mx-bg: #000;
--mx-text-bright: #CFE4D6 !important; /* soft warm-mint (aged CRT) */
--mx-text: rgba(207, 228, 214, 0.78) !important;
--mx-text-dim: rgba(207, 228, 214, 0.5) !important;
--mx-accent: #7AC79A !important; /* muted sage (not neon) */
--mx-accent-dim: rgba(122, 199, 154, 0.6) !important;
--mx-faint: rgba(207, 228, 214, 0.35) !important;
--mx-glow: 0 0 4px rgba(0,0,0,0.85), 0 0 16px rgba(122, 199, 154, 0.22);
--mx-glow-strong: 0 0 4px rgba(0,0,0,0.85), 0 0 22px rgba(122, 199, 154, 0.42), 0 0 48px rgba(122, 199, 154, 0.16);
}
/* Apply tokens globally */
html.mode-matrix {
color: var(--mx-text) !important;
}
html.mode-matrix body {
color: var(--mx-text) !important;
}
/* 4. SECTION FRAME — centered narrow manuscript */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding: 180px 40px !important;
text-align: left !important;
background: transparent !important;
}
html.mode-matrix section > .container,
html.mode-matrix .credo-block > .credo-grid,
html.mode-matrix .stats-band > .stats-grid {
max-width: 880px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: left !important;
}
/* 5. EYEBROWS — tiny, faint, aged */
html.mode-matrix .section-eyebrow {
display: block !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
text-transform: uppercase !important;
color: var(--mx-accent-dim) !important;
margin: 0 0 36px 0 !important;
padding: 0 !important;
text-align: left !important;
text-shadow: 0 0 3px rgba(0,0,0,0.85) !important;
}
/* 6. SECTION HEADLINES — softer, more restrained */
html.mode-matrix .section-headline,
html.mode-matrix h2.section-headline {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(36px, 4.4vw, 64px) !important;
font-weight: 400 !important;
letter-spacing: -0.008em !important;
line-height: 1.06 !important;
color: var(--mx-text-bright) !important;
max-width: 800px !important;
margin: 0 0 80px 0 !important;
padding: 0 !important;
text-align: left !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix .section-headline em,
html.mode-matrix h2 em {
color: var(--mx-accent) !important;
font-style: normal !important;
}
/* 7. SERVICES — vertical 3 blocks, all aligned to same left edge, no columns */
html.mode-matrix #services .services-grid {
display: flex !important;
flex-direction: column !important;
gap: 110px !important;
align-items: stretch !important;
}
html.mode-matrix #services .sticker-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
max-width: 720px !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
gap: 0 !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) {
grid-template-columns: none !important;
flex-direction: column !important;
align-items: flex-start !important;
}
html.mode-matrix #services .sticker-card:nth-child(even) .svc-num,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-name,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-body,
html.mode-matrix #services .sticker-card:nth-child(even) .svc-bullets {
text-align: left !important;
grid-column: auto !important;
}
html.mode-matrix #services .sticker-card .svc-num {
display: block !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: var(--mx-accent-dim) !important;
margin: 0 0 20px 0 !important;
text-align: left !important;
text-shadow: 0 0 3px rgba(0,0,0,0.85) !important;
}
html.mode-matrix #services .sticker-card .svc-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(32px, 3.8vw, 54px) !important;
font-weight: 400 !important;
letter-spacing: -0.008em !important;
line-height: 1.04 !important;
color: var(--mx-text-bright) !important;
text-transform: uppercase !important;
margin: 0 0 26px 0 !important;
text-align: left !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix #services .sticker-card .svc-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: var(--mx-text) !important;
max-width: 620px !important;
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #services .sticker-card .svc-bullets {
list-style: none !important;
padding: 0 !important;
margin: 22px 0 0 0 !important;
max-width: 620px !important;
}
html.mode-matrix #services .sticker-card .svc-bullets li {
padding: 6px 0 !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.75 !important;
color: var(--mx-text) !important;
text-align: left !important;
}
/* 8. STATS — small refined row, not huge digits */
html.mode-matrix .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 48px !important;
background: transparent !important;
padding: 0 !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > * {
background: transparent !important;
padding: 0 !important;
min-height: 0 !important;
margin-top: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
html.mode-matrix .stats-grid > *:nth-child(n) { margin-top: 0 !important; }
html.mode-matrix .stats-grid .num {
font-size: clamp(44px, 5vw, 72px) !important;
color: var(--mx-text-bright) !important;
letter-spacing: -0.018em !important;
line-height: 0.95 !important;
margin: 0 0 14px 0 !important;
text-align: left !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix .stats-grid .lbl,
html.mode-matrix .stats-grid .label {
font-size: 10px !important;
letter-spacing: 0.32em !important;
color: var(--mx-text-dim) !important;
line-height: 1.55 !important;
max-width: 200px !important;
text-align: left !important;
}
@media (max-width: 700px) {
html.mode-matrix .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* 9. PROCESS — left-aligned manuscript steps */
html.mode-matrix #process .process-row {
display: flex !important;
flex-direction: column !important;
gap: 80px !important;
align-items: stretch !important;
max-width: 880px !important;
margin: 0 !important;
padding: 0 !important;
}
html.mode-matrix #process .process-arrow { display: none !important; }
html.mode-matrix #process .process-step {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
gap: 0 !important;
max-width: 720px !important;
}
html.mode-matrix #process .process-step .ps-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.5em !important;
color: var(--mx-accent-dim) !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
text-align: left !important;
text-transform: uppercase !important;
text-shadow: 0 0 3px rgba(0,0,0,0.85) !important;
}
html.mode-matrix #process .process-step .ps-name {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(24px, 2.8vw, 40px) !important;
font-weight: 400 !important;
color: var(--mx-text-bright) !important;
letter-spacing: -0.005em !important;
line-height: 1.08 !important;
margin: 0 0 18px 0 !important;
text-transform: uppercase !important;
text-align: left !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix #process .process-step .ps-body {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: var(--mx-text) !important;
max-width: 600px !important;
margin: 0 !important;
text-align: left !important;
}
/* 10. TESTIMONIALS — manuscript column left */
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
max-width: 880px !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 80px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
align-items: flex-start !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
padding: 0 !important;
max-width: 720px !important;
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(odd),
html.mode-matrix #testimonials .testimonial-card:nth-child(even) {
margin: 0 !important;
text-align: left !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(18px, 2vw, 24px) !important;
line-height: 1.6 !important;
letter-spacing: -0.005em !important;
color: var(--mx-text-bright) !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
text-align: left !important;
max-width: 680px !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.42em !important;
color: var(--mx-accent-dim) !important;
text-align: left !important;
display: block !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card:nth-child(n+5) {
display: none !important;
}
/* 11. CREDO — left, refined */
html.mode-matrix .credo-block.matrix-only .credo-grid {
display: block !important;
text-align: left !important;
max-width: 880px !important;
padding: 0 !important;
margin: 0 auto !important;
}
html.mode-matrix .credo-block.matrix-only .credo-aside { display: none !important; }
html.mode-matrix .credo-block.matrix-only .credo-main { text-align: left !important; }
html.mode-matrix .credo-block.matrix-only .credo-headline { text-align: left !important; }
html.mode-matrix .credo-block.matrix-only .credo-headline .line {
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(40px, 5.4vw, 84px) !important;
font-weight: 400 !important;
line-height: 1.02 !important;
letter-spacing: -0.015em !important;
text-align: left !important;
margin: 0 !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-1 {
color: var(--mx-faint) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-headline .line-2 {
color: var(--mx-text-bright) !important;
margin-top: 4px !important;
text-shadow: var(--mx-glow-strong) !important;
}
html.mode-matrix .credo-block.matrix-only .credo-items {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
margin: 80px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
max-width: 680px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
text-align: left !important;
padding: 0 !important;
gap: 24px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-num {
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.36em !important;
color: var(--mx-accent-dim) !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
flex-shrink: 0 !important;
min-width: 32px !important;
}
html.mode-matrix .credo-block.matrix-only .credo-item-text {
font-family: 'Share Tech Mono', monospace !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
color: var(--mx-text-bright) !important;
text-align: left !important;
}
/* 12. CONTACT — left, channels stacked */
html.mode-matrix #contact .container {
text-align: left !important;
max-width: 880px !important;
margin: 0 auto !important;
}
html.mode-matrix #contact .contact-block {
text-align: left !important;
max-width: 720px !important;
margin: 0 !important;
}
html.mode-matrix #contact .contact-block p {
text-align: left !important;
max-width: 620px !important;
margin: 0 0 48px 0 !important;
font-size: 14.5px !important;
line-height: 1.85 !important;
color: var(--mx-text) !important;
}
html.mode-matrix #contact .contact-block > div {
display: flex !important;
flex-direction: column !important;
gap: 26px !important;
align-items: flex-start !important;
}
html.mode-matrix #contact .contact-block .btn-primary,
html.mode-matrix #contact .contact-block .btn-secondary {
text-align: left !important;
width: auto !important;
display: inline-block !important;
font-size: clamp(20px, 2.4vw, 30px) !important;
font-family: 'Share Tech Mono', monospace !important;
font-weight: 400 !important;
letter-spacing: -0.008em !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow) !important;
}
html.mode-matrix #contact .contact-block .btn-primary:hover,
html.mode-matrix #contact .contact-block .btn-secondary:hover {
color: #E8FFEF !important;
transform: translateX(10px) !important;
text-shadow: var(--mx-glow-strong) !important;
}
/* 13. MANIFESTO — left pull-quote, soft */
html.mode-matrix .manifesto-block {
text-align: left !important;
}
html.mode-matrix .manifesto-block .container {
text-align: left !important;
max-width: 880px !important;
margin: 0 auto !important;
padding: 0 !important;
}
html.mode-matrix .manifesto-text {
text-align: left !important;
max-width: 880px !important;
margin: 0 !important;
font-size: clamp(42px, 6vw, 88px) !important;
letter-spacing: -0.018em !important;
line-height: 1.06 !important;
color: var(--mx-text-bright) !important;
text-shadow: var(--mx-glow-strong) !important;
}
html.mode-matrix .manifesto-text em {
color: var(--mx-accent) !important;
font-style: normal !important;
}
/* 14. Override all body text to use new soft palette */
html.mode-matrix p,
html.mode-matrix li,
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li,
html.mode-matrix .testimonial-card .quote {
color: var(--mx-text-bright) !important;
}
html.mode-matrix .svc-body,
html.mode-matrix .ps-body,
html.mode-matrix .svc-bullets li {
color: var(--mx-text) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v11 — fix testimonials overflow + remove nav blur + Связаться rain
═══════════════════════════════════════════════════════════════════════ */
/* 1. TESTIMONIALS — fit text within viewport, no overflow */
html.mode-matrix #testimonials {
padding: 180px 40px !important;
overflow: hidden !important;
}
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html.mode-matrix #testimonials .testimonials-track {
display: flex !important;
flex-direction: column !important;
gap: 80px !important;
animation: none !important;
transform: none !important;
width: 100% !important;
max-width: 880px !important;
margin: 0 !important;
padding: 0 !important;
align-items: flex-start !important;
}
html.mode-matrix #testimonials .testimonial-card {
background: transparent !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
text-align: left !important;
flex: 0 0 auto !important;
word-wrap: break-word !important;
overflow-wrap: anywhere !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-size: clamp(16px, 1.9vw, 22px) !important;
line-height: 1.6 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
max-width: 100% !important;
word-break: break-word !important;
font-size: 9.5px !important;
letter-spacing: 0.34em !important;
}
/* 2. NAV — remove blur on scroll-collapse */
html.mode-matrix .nav-bar,
html.mode-matrix .nav-bar.is-collapsed,
html.mode-matrix .nav-bar.is-reveal {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Kill the decay animation blur too */
html.mode-matrix .nav-bar.is-collapsed .logo,
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
filter: none !important;
}
/* Override decay keyframe to not include blur */
@keyframes mx-decay {
0% { opacity: 1; transform: translateY(0); }
20% { opacity: 0.15; }
35% { opacity: 0.8; }
55% { opacity: 0.08; }
75% { opacity: 0.3; }
100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes mx-decode {
0% { opacity: 0; transform: translateY(-4px); }
15% { opacity: 0.3; }
28% { opacity: 0.08; }
42% { opacity: 0.7; }
58% { opacity: 0.2; }
72% { opacity: 0.95; }
85% { opacity: 0.5; }
100% { opacity: 1; transform: translateY(0); }
}
/* 3. СВЯЗАТЬСЯ — matrix rain drip from below */
.mx-drip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-family: 'Share Tech Mono', monospace;
font-size: 11px;
color: rgba(127, 255, 165, 0.7);
text-shadow: 0 0 6px rgba(127, 255, 165, 0.6);
pointer-events: none;
z-index: 5;
animation: mx-drip-fall 1.8s linear forwards;
will-change: transform, opacity;
}
@keyframes mx-drip-fall {
0% { transform: translate(var(--mx-drip-x, -50%), 0); opacity: 0; }
15% { opacity: 0.9; }
85% { opacity: 0.5; }
100% { transform: translate(var(--mx-drip-x, -50%), 60px); opacity: 0; }
}
/* Make the Связаться button a positioning context */
html.mode-matrix .nav-bar .btn-primary {
position: relative !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v12 — kill the huge "05 / CONTACT" eyebrow + normalise contact
═══════════════════════════════════════════════════════════════════════ */
/* Reset contact container — no grid, just vertical stack like other sections */
html.mode-matrix #contact .container {
display: block !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
align-items: stretch !important;
text-align: left !important;
max-width: 880px !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* Reset section-eyebrow back to tiny mono label (override the huge 72px) */
html.mode-matrix #contact .section-eyebrow {
grid-column: auto !important;
grid-row: auto !important;
display: block !important;
position: static !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.5em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
color: var(--mx-accent-dim) !important;
margin: 0 0 36px 0 !important;
padding: 0 !important;
text-align: left !important;
text-shadow: 0 0 3px rgba(0,0,0,0.85) !important;
max-width: none !important;
width: auto !important;
height: auto !important;
}
html.mode-matrix #contact .section-eyebrow::before,
html.mode-matrix #contact .section-eyebrow::after {
content: none !important;
display: none !important;
}
/* Normalise contact headline */
html.mode-matrix #contact .section-headline {
grid-column: auto !important;
grid-row: auto !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: clamp(36px, 4.4vw, 64px) !important;
font-weight: 400 !important;
letter-spacing: -0.008em !important;
line-height: 1.06 !important;
color: var(--mx-text-bright) !important;
max-width: 800px !important;
margin: 0 0 60px 0 !important;
text-align: left !important;
text-shadow: var(--mx-glow) !important;
}
/* Contact block — single stacked column */
html.mode-matrix #contact .contact-block {
grid-column: auto !important;
grid-row: auto !important;
text-align: left !important;
max-width: 720px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v13 — testimonials wrap fix + manifesto DEADLINE accent
+ scroll-collapse keeps logo+CTA, both with stronger matrix rain
═══════════════════════════════════════════════════════════════════════ */
/* 1. TESTIMONIALS — hard wrap text, no overflow ever */
html.mode-matrix #testimonials {
overflow-x: hidden !important;
padding-left: clamp(20px, 5vw, 60px) !important;
padding-right: clamp(20px, 5vw, 60px) !important;
}
html.mode-matrix #testimonials .testimonials-marquee,
html.mode-matrix #testimonials .testimonials-track {
max-width: 100% !important;
width: 100% !important;
overflow: visible !important;
}
html.mode-matrix #testimonials .testimonial-card,
html.mode-matrix #testimonials .testimonial-card * {
max-width: 100% !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
hyphens: auto !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
font-size: clamp(14px, 1.7vw, 20px) !important;
line-height: 1.65 !important;
letter-spacing: 0 !important;
max-width: 720px !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
font-size: 9px !important;
letter-spacing: 0.3em !important;
word-break: break-word !important;
white-space: normal !important;
}
/* 2. MANIFESTO — DEADLINE + "ничего не горит" highlighted in mint accent */
html.mode-matrix .manifesto-text em {
color: #7AC79A !important;
font-style: normal !important;
text-shadow:
0 0 4px rgba(0,0,0,0.85),
0 0 22px rgba(122, 199, 154, 0.6),
0 0 50px rgba(122, 199, 154, 0.28) !important;
}
/* 3. NAV scroll-collapse — KEEP logo + Связаться, decay only other items */
html.mode-matrix .nav-bar.is-collapsed .logo {
animation: none !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
filter: none !important;
}
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 10px 12px !important;
backdrop-filter: none !important;
opacity: 1 !important;
animation: none !important;
filter: none !important;
}
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
pointer-events: none !important;
}
html.mode-matrix .nav-bar.is-reveal .logo,
html.mode-matrix .nav-bar.is-reveal .btn-primary {
animation: none !important;
}
/* 4. Position context for rain spawning on BOTH logo + Связаться */
html.mode-matrix .nav-bar .logo,
html.mode-matrix .nav-bar .btn-primary {
position: relative !important;
overflow: visible !important;
}
/* Stronger drip chars: bigger, brighter, longer fall */
.mx-drip {
font-size: 13px !important;
color: rgba(127, 255, 165, 0.9) !important;
text-shadow:
0 0 6px rgba(127, 255, 165, 0.8),
0 0 14px rgba(127, 255, 165, 0.45) !important;
}
@keyframes mx-drip-fall {
0% { transform: translate(var(--mx-drip-x, -50%), 0); opacity: 0; }
10% { opacity: 1; }
85% { opacity: 0.55; }
100% { transform: translate(var(--mx-drip-x, -50%), 90px); opacity: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v14 — testimonials no fade-mask, varied drip distances,
dramatic nav-chip dissolve
═══════════════════════════════════════════════════════════════════════ */
/* 1. TESTIMONIALS — kill any fade-mask / gradient overlay from partner */
html.mode-matrix #testimonials .testimonials-marquee,
html.mode-matrix #testimonials .testimonials-track,
html.mode-matrix #testimonials .testimonial-card,
html.mode-matrix #testimonials {
-webkit-mask-image: none !important;
mask-image: none !important;
-webkit-mask: none !important;
mask: none !important;
background-image: none !important;
}
html.mode-matrix #testimonials {
overflow-x: visible !important;
overflow-y: visible !important;
}
html.mode-matrix #testimonials .testimonials-marquee {
overflow: visible !important;
}
/* If track has any inline transform from partner JS, override */
html.mode-matrix #testimonials .testimonials-track {
transform: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* 2. DRIP — randomized fall distance via CSS var (set per drip in JS) */
@keyframes mx-drip-fall {
0% { transform: translate(var(--mx-drip-x, -50%), 0); opacity: 0; }
8% { opacity: 1; }
20% { opacity: 0.9; }
45% { opacity: 1; }
70% { opacity: 0.7; }
100% { transform: translate(var(--mx-drip-x, -50%), var(--mx-drip-dist, 90px)); opacity: 0; }
}
.mx-drip {
font-size: 13px !important;
color: rgba(127, 255, 165, 0.95) !important;
text-shadow:
0 0 6px rgba(127, 255, 165, 0.85),
0 0 14px rgba(127, 255, 165, 0.45),
0 0 30px rgba(127, 255, 165, 0.18) !important;
}
/* 3. NAV SCROLL — dramatic dissolve for nav-chips */
/* When collapsed: chips get a stronger, longer decay with character flicker */
@keyframes mx-chip-dissolve {
0% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.26em; }
10% { opacity: 0.4; }
18% { opacity: 0.95; letter-spacing: 0.32em; }
28% { opacity: 0.15; transform: translateY(-2px); }
40% { opacity: 0.7; letter-spacing: 0.4em; }
55% { opacity: 0.08; transform: translateY(-4px) scale(1.02); }
70% { opacity: 0.35; letter-spacing: 0.5em; }
85% { opacity: 0.05; }
100% { opacity: 0; transform: translateY(-6px) scale(1.04); letter-spacing: 0.6em; }
}
html.mode-matrix .nav-bar.is-collapsed .nav-chips,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
animation: none !important; /* old decay off */
}
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip {
animation: mx-chip-dissolve 1.2s steps(12, end) forwards !important;
pointer-events: none !important;
will-change: opacity, transform, letter-spacing;
}
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle {
animation: mx-chip-dissolve 1.2s steps(12, end) forwards !important;
pointer-events: none !important;
}
/* Stagger left to right for ripple effect */
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(1) { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(2) { animation-delay: 80ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(3) { animation-delay: 160ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(4) { animation-delay: 240ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(5) { animation-delay: 320ms !important; }
html.mode-matrix .nav-bar.is-collapsed .magic-toggle { animation-delay: 400ms !important; }
html.mode-matrix .nav-bar.is-collapsed .lang-toggle { animation-delay: 480ms !important; }
/* Reveal back — reverse cascade for nav-chips */
@keyframes mx-chip-materialize {
0% { opacity: 0; transform: translateY(-6px) scale(1.04); letter-spacing: 0.6em; }
15% { opacity: 0.3; }
30% { opacity: 0.08; letter-spacing: 0.45em; }
50% { opacity: 0.75; }
65% { opacity: 0.15; letter-spacing: 0.32em; }
80% { opacity: 0.95; }
100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.26em; }
}
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip,
html.mode-matrix .nav-bar.is-reveal .magic-toggle,
html.mode-matrix .nav-bar.is-reveal .lang-toggle {
animation: mx-chip-materialize 1s steps(11, end) both !important;
pointer-events: auto !important;
}
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(1) { animation-delay: 80ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(2) { animation-delay: 160ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(3) { animation-delay: 240ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(4) { animation-delay: 320ms !important; }
html.mode-matrix .nav-bar.is-reveal .nav-chips .btn-chip:nth-child(5) { animation-delay: 400ms !important; }
html.mode-matrix .nav-bar.is-reveal .magic-toggle { animation-delay: 480ms !important; }
html.mode-matrix .nav-bar.is-reveal .lang-toggle { animation-delay: 560ms !important; }
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v15 — WHOLE NAV dissolves on scroll-down
═══════════════════════════════════════════════════════════════════════ */
/* DEADLINE logo + Связаться button join the dissolve cascade */
html.mode-matrix .nav-bar.is-collapsed .logo,
html.mode-matrix .nav-bar.is-collapsed .btn-primary {
animation: mx-chip-dissolve 1.2s steps(12, end) forwards !important;
pointer-events: none !important;
will-change: opacity, transform, letter-spacing;
}
html.mode-matrix .nav-bar.is-collapsed .logo { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-collapsed .btn-primary { animation-delay: 560ms !important; }
/* After dissolve, nav-bar itself becomes inert */
html.mode-matrix .nav-bar.is-collapsed {
pointer-events: none !important;
}
/* Reveal: logo + CTA come back with materialize cascade */
html.mode-matrix .nav-bar.is-reveal .logo,
html.mode-matrix .nav-bar.is-reveal .btn-primary {
animation: mx-chip-materialize 1s steps(11, end) both !important;
pointer-events: auto !important;
}
html.mode-matrix .nav-bar.is-reveal .logo { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-reveal .btn-primary { animation-delay: 640ms !important; }
html.mode-matrix .nav-bar.is-reveal {
pointer-events: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════
FORCE nav-bar to fully disappear when collapsed
(overrides any `opacity: 1 !important` elsewhere)
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix .nav-bar.is-collapsed {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-12px) !important;
pointer-events: none !important;
transition: opacity 1.2s ease-out,
visibility 0s linear 1.2s,
transform 1.2s ease-out !important;
}
/* When uncollapsing (back to top) — restore */
html.mode-matrix .nav-bar:not(.is-collapsed) {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
transition: opacity 600ms ease-out,
visibility 0s linear 0s,
transform 600ms ease-out !important;
}
/* During is-reveal class (cascade decode), make sure nav itself is visible */
html.mode-matrix .nav-bar.is-reveal {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v16 — remove rain dust + tighter section spacing
═══════════════════════════════════════════════════════════════════════ */
/* 1. Remove the falling matrix-rain canvas (was visible on testimonials etc) */
html.mode-matrix .matrix-rain-ambient,
.matrix-rain-ambient {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Also any leftover dust particles */
.mx-dust { display: none !important; }
/* 2. TIGHTER spacing — sections, gaps */
html.mode-matrix section,
html.mode-matrix .credo-block,
html.mode-matrix .manifesto-block,
html.mode-matrix .stats-band {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
html.mode-matrix .manifesto-block {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
/* Services rows — closer together */
html.mode-matrix #services .services-grid {
gap: 70px !important;
}
/* Process steps — closer */
html.mode-matrix #process .process-row {
gap: 56px !important;
}
/* Testimonials — closer */
html.mode-matrix #testimonials .testimonials-track {
gap: 56px !important;
}
/* Credo headline → items — closer */
html.mode-matrix .credo-block.matrix-only .credo-items {
margin-top: 56px !important;
gap: 18px !important;
}
/* Section headline → content — closer */
html.mode-matrix .section-headline {
margin-bottom: 56px !important;
}
/* Contact paragraph → channels — closer */
html.mode-matrix #contact .contact-block p {
margin-bottom: 36px !important;
}
html.mode-matrix #contact .contact-block > div {
gap: 20px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
Magic-toggle ⬤ — restore BLUE GRADIENT + place between nav-chips & RU|EN
═══════════════════════════════════════════════════════════════════════ */
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle,
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle {
/* natural DOM flow inside nav (between nav-chips and lang-toggle) */
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
/* size & shape */
width: 46px !important;
height: 36px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* BLUE gradient bg restored */
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%) !important;
color: #fff !important;
/* glow */
box-shadow:
0 0 0 0 rgba(0, 191, 255, 0.55),
0 4px 14px -2px rgba(0, 191, 255, 0.45),
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
cursor: pointer !important;
z-index: 50 !important;
visibility: visible !important;
opacity: 1 !important;
animation: magic-pulse 2.4s ease-in-out infinite !important;
}
@media (max-width: 700px) {
html .magic-toggle { width: 40px !important; height: 32px !important; }
}
/* Aura tint per mode (box-shadow accent colour matches theme) */
html.mode-matrix .magic-toggle {
box-shadow:
0 0 0 0 rgba(0, 255, 95, 0.45),
0 4px 14px -2px rgba(0, 255, 95, 0.40),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
}
/* When nav collapses, magic-toggle dissolves WITH the rest (existing rules) */
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v17 — kill leftover rain canvas + tighten testimonial card binding
═══════════════════════════════════════════════════════════════════════ */
/* 1. Absolutely no matrix rain canvas anywhere */
.matrix-rain-ambient,
html .matrix-rain-ambient,
html.mode-matrix .matrix-rain-ambient,
html canvas.matrix-rain-ambient,
canvas[class*="matrix-rain"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. Testimonials — bind quote to author, more space BETWEEN cards */
html.mode-matrix #testimonials .testimonials-track {
gap: 96px !important; /* big gap BETWEEN cards — clear separation */
}
html.mode-matrix #testimonials .testimonial-card {
display: flex !important;
flex-direction: column !important;
gap: 14px !important; /* tight WITHIN card: quote → author */
}
html.mode-matrix #testimonials .testimonial-card .quote {
margin: 0 !important; /* let parent gap control spacing */
}
html.mode-matrix #testimonials .testimonial-card .author {
margin: 0 !important;
padding-left: 0 !important;
opacity: 0.75;
}
/* ═══════════════════════════════════════════════════════════════════════
Magic-toggle per-mode positioning — fix noir/vault/kinetic visibility
• matrix: natural DOM flow inside nav (next to RU|EN)
• noir / vault / kinetic: position: fixed top-right (partner moved it
to body root in noir via JS — must stay reachable)
• island / studio: also fixed top-right for consistency
═══════════════════════════════════════════════════════════════════════ */
/* (v2.3 2026-05-12) Toxic legacy rule NEUTRALIZED.
Previously forced matrix button to position:relative inside nav.
Now the button lives in root and must stay fixed top-right
across all modes. Final override at end of file enforces this. */
/* html.mode-matrix .magic-toggle { position: relative ... } — REMOVED */
/* All other modes — fixed top-right, always visible */
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle {
position: fixed !important;
top: 22px !important;
right: 22px !important;
left: auto !important;
bottom: auto !important;
z-index: 99999 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
/* keep BLUE gradient + size */
width: 46px !important;
height: 36px !important;
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%) !important;
border: 0 !important;
border-radius: 10px !important;
padding: 0 !important;
color: #fff !important;
}
@media (max-width: 700px) {
html.mode-noir .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle,
html.mode-island .magic-toggle,
html.mode-studio .magic-toggle {
top: 14px !important;
right: 14px !important;
width: 40px !important;
height: 32px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v18 — tighter testimonials, faster nav dissolve,
floating СВЯЗАТЬСЯ pinned during scroll
═══════════════════════════════════════════════════════════════════════ */
/* 1. TESTIMONIALS — quote ↔ author MUCH tighter */
html.mode-matrix #testimonials .testimonial-card {
gap: 6px !important; /* was 14px */
}
html.mode-matrix #testimonials .testimonial-card .author {
margin-top: 2px !important;
opacity: 0.7;
}
/* 2. FASTER nav-collapse dissolve */
html.mode-matrix .nav-bar.is-collapsed {
transition: opacity 600ms ease-out,
visibility 0s linear 600ms,
transform 600ms ease-out !important;
}
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip,
html.mode-matrix .nav-bar.is-collapsed .magic-toggle,
html.mode-matrix .nav-bar.is-collapsed .lang-toggle,
html.mode-matrix .nav-bar.is-collapsed .logo {
animation-duration: 600ms !important;
}
/* Tighter stagger for snappier feel */
html.mode-matrix .nav-bar.is-collapsed .logo { animation-delay: 0ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(1) { animation-delay: 40ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(2) { animation-delay: 80ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(3) { animation-delay: 120ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(4) { animation-delay: 160ms !important; }
html.mode-matrix .nav-bar.is-collapsed .nav-chips .btn-chip:nth-child(5) { animation-delay: 200ms !important; }
html.mode-matrix .nav-bar.is-collapsed .magic-toggle { animation-delay: 240ms !important; }
html.mode-matrix .nav-bar.is-collapsed .lang-toggle { animation-delay: 280ms !important; }
html.mode-matrix .nav-bar.is-collapsed .btn-primary { animation: none !important; }
/* 3. FLOATING СВЯЗАТЬСЯ — independent of nav-bar, always visible.
(v2.4 2026-05-12) Shifted left so it doesn't sit on top of magic-toggle.
magic-toggle is now at top:22 right:22 (body root) — this CTA goes to
right:96 to leave the corner free for the toggle. */
.mx-floating-cta {
position: fixed !important;
top: 24px !important;
right: 96px !important;
z-index: 9998 !important; /* below magic-toggle (10000) */
display: inline-block !important;
padding: 10px 14px !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.3em !important;
font-weight: 400 !important;
text-transform: uppercase !important;
color: #DAFFE3 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
pointer-events: auto !important;
text-shadow:
0 0 4px rgba(0,0,0,0.85),
0 0 12px rgba(127, 255, 165, 0.42),
0 0 28px rgba(127, 255, 165, 0.2) !important;
transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease !important;
}
.mx-floating-cta:hover {
color: #FFFFFF !important;
transform: scale(1.04);
text-shadow:
0 0 4px rgba(0,0,0,0.85),
0 0 18px rgba(127, 255, 165, 0.75),
0 0 40px rgba(127, 255, 165, 0.35) !important;
}
/* Floating CTA only visible in matrix mode */
.mx-floating-cta {
display: none !important;
}
html.mode-matrix .mx-floating-cta {
display: none !important; /* hidden until nav collapses */
}
@media (max-width: 700px) {
.mx-floating-cta {
top: 14px !important;
right: 72px !important; /* leave room for magic-toggle (16+46=62 + 10) */
font-size: 10px !important;
padding: 8px 10px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX — bullet-proof BLUE magic-toggle in nav
When at top of page (nav visible) — kept in original DOM spot, blue,
pulsing.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix .nav-bar:not(.is-collapsed) .magic-toggle,
html.mode-matrix .nav-bar:not(.is-collapsed):not(.is-reveal) .magic-toggle,
html.mode-matrix .nav-bar.is-reveal .magic-toggle {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
width: 46px !important;
height: 36px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
background:
radial-gradient(120% 80% at 30% 25%, #6FDBFF 0%, transparent 55%),
linear-gradient(135deg, #1E9BFF 0%, #00BFFF 55%, #00A8E8 100%) !important;
color: #fff !important;
box-shadow:
0 0 0 0 rgba(0, 255, 95, 0.45),
0 4px 14px -2px rgba(0, 255, 95, 0.40),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -1px 0 rgba(0, 60, 110, 0.45) inset !important;
z-index: 50 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
@media (max-width: 700px) {
html.mode-matrix .nav-bar:not(.is-collapsed) .magic-toggle {
width: 40px !important;
height: 32px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v19 — testimonials even tighter + floating-CTA only when nav gone
═══════════════════════════════════════════════════════════════════════ */
/* 1. Testimonials — quote and author basically touching */
html.mode-matrix #testimonials .testimonial-card {
gap: 2px !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
margin-top: 0 !important;
}
/* 2. Floating-CTA — hidden by default, visible ONLY when body.mx-nav-collapsed */
.mx-floating-cta,
html .mx-floating-cta,
html.mode-matrix .mx-floating-cta {
display: none !important;
}
html.mode-matrix body.mx-nav-collapsed .mx-floating-cta,
body.mx-nav-collapsed .mx-floating-cta {
display: inline-block !important;
animation: mx-floating-fade-in 360ms ease-out both;
}
@keyframes mx-floating-fade-in {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Position exactly where the nav СВЯЗАТЬСЯ was — top-right */
.mx-floating-cta {
top: 22px !important;
right: 28px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
FIX: testimonial card — kill partner's `justify-content: space-between`
and `min-height: 240px` which pushes quote and author to card edges.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix #testimonials .testimonial-card {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
min-height: 0 !important;
height: auto !important;
width: 100% !important;
flex: 0 0 auto !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
}
html.mode-matrix #testimonials .testimonial-card .quote {
margin: 0 !important;
flex: 0 0 auto !important;
}
html.mode-matrix #testimonials .testimonial-card .author {
margin: 0 !important;
flex: 0 0 auto !important;
margin-top: 2px !important;
}
html.mode-matrix #testimonials .testimonial-card .role {
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v2 EFFECTS (added 2026-05-12)
Implements user-approved recommendations #1, #2, #3, #4, #6, #9, #10.
To roll back any single effect — comment out its labelled block.
To roll back everything — delete from this comment to end of file
AND revert the modes.js v2 IIFE (search "MATRIX v2 EFFECTS").
═══════════════════════════════════════════════════════════════════════ */
/* ─── v2-0: hide mode-indicator chip — it lived in top-right, but with
the magic-toggle now permanently in the nav, the floating chip looks
orphaned. To restore: remove this rule. ─── */
.mode-indicator { display: none !important; }
/* ─── v2-0b: hide studio/vault/kinetic-only artefacts that might leak.
Modes are still defined in CSS but unreachable via cycle. ─── */
/* (Their CSS remains intact — no rules added here. They simply never
get applied because the cycle never sets their html class anymore.) */
/* ─── v2-1: Lens vignette + chromatic aberration — only in matrix mode.
Subtle. Two stacked overlays. Easy disable: comment .mx-cinema-*. ─── */
.mx-cinema-vignette {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 80;
display: none;
background:
radial-gradient(ellipse 110% 90% at center,
transparent 50%,
rgba(0, 0, 0, 0.32) 78%,
rgba(0, 0, 0, 0.62) 100%);
mix-blend-mode: multiply;
}
html.mode-matrix .mx-cinema-vignette { display: block; }
.mx-cinema-aberration {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 81;
display: none;
background:
radial-gradient(circle 28vmin at 0% 0%, rgba(255, 60, 60, 0.045) 0%, transparent 70%),
radial-gradient(circle 28vmin at 100% 0%, rgba(60, 90, 255, 0.045) 0%, transparent 70%),
radial-gradient(circle 28vmin at 0% 100%, rgba(60, 90, 255, 0.04) 0%, transparent 70%),
radial-gradient(circle 28vmin at 100% 100%, rgba(255, 60, 60, 0.04) 0%, transparent 70%);
mix-blend-mode: screen;
}
html.mode-matrix .mx-cinema-aberration { display: block; }
/* ─── v2-2: Cinematic letterbox — manifesto-only.
Bars slide in from top/bottom (7vh each), turning the manifesto
into a film frame. Body gets .mx-letterbox-on when the manifesto
is centered in viewport. ─── */
.mx-letterbox {
position: fixed;
left: 0; right: 0;
height: 7vh;
background: #000;
pointer-events: none;
z-index: 82;
opacity: 0;
transition:
transform 820ms cubic-bezier(0.7, 0, 0.3, 1),
opacity 700ms ease-out;
display: none;
}
.mx-letterbox.top { top: 0; transform: translateY(-100%); }
.mx-letterbox.bottom { bottom: 0; transform: translateY(100%); }
html.mode-matrix .mx-letterbox { display: block; }
html.mode-matrix body.mx-letterbox-on .mx-letterbox.top,
html.mode-matrix body.mx-letterbox-on .mx-letterbox.bottom {
transform: translateY(0);
opacity: 1;
}
/* ─── v2-3: Blinking caret for type-on-load hero ─── */
.mx-caret {
display: inline-block;
width: 0.5ch;
height: 1.05em;
margin-left: 0.08em;
vertical-align: -0.12em;
background: var(--mx-text-bright, #CFE4D6);
box-shadow: 0 0 6px rgba(127, 255, 165, 0.55);
animation: mx-caret-blink 1.06s steps(1, end) infinite;
}
@keyframes mx-caret-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* ─── v2-4: Cursor-reactive ambient aura.
Soft mint radial gradient that lerps after the cursor. Hidden in
non-matrix modes. Subtle (mix-blend: screen, low alpha). ─── */
.mx-cursor-aura {
position: fixed;
top: 0; left: 0;
width: 600px;
height: 600px;
border-radius: 50%;
pointer-events: none;
z-index: 79;
background: radial-gradient(circle at center,
rgba(127, 255, 165, 0.10) 0%,
rgba(127, 255, 165, 0.05) 28%,
transparent 62%);
mix-blend-mode: screen;
opacity: 0;
transition: opacity 480ms ease-out;
will-change: transform;
display: none;
}
html.mode-matrix .mx-cursor-aura {
display: block;
opacity: 1;
}
@media (hover: none) {
/* No mouse → aura is pointless. Hide on touch devices. */
.mx-cursor-aura { display: none !important; }
}
/* ─── v2-6: Glyph-bleed on CTA hover.
Duplicates the CTA text as a mint-shifted ghost (::before reads
data-mx-bleed set by JS) that pops on hover, like a double-exposure
film leak. Matrix only. ─── */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
position: relative;
isolation: isolate;
}
html.mode-matrix .btn-primary::before,
html.mode-matrix .btn-secondary::before {
content: attr(data-mx-bleed);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: rgba(127, 255, 165, 0.85);
text-shadow:
0 0 6px rgba(127, 255, 165, 0.6),
0 0 12px rgba(127, 255, 165, 0.3);
opacity: 0;
transform: translate(0, 0);
pointer-events: none;
transition:
opacity 120ms linear,
transform 120ms linear;
z-index: -1;
padding: inherit;
}
html.mode-matrix .btn-primary:hover::before,
html.mode-matrix .btn-secondary:hover::before {
opacity: 0.45;
transform: translate(2px, -1px);
}
html.mode-matrix .btn-primary:hover,
html.mode-matrix .btn-secondary:hover {
text-shadow: 0 0 8px rgba(127, 255, 165, 0.35);
}
/* ─── v2-10 DISABLED v2.4 (2026-05-12) ───
Original idea: body filter pulses hue 0°→4° for cinematic warmth.
PROBLEM: `filter` on body creates a new containing block for
position:fixed descendants. This broke `.matrix-video-element`
(it stopped scrolling-fixed and stuck to body's top 100vh).
FIX: animation removed. If needed, reimplement via a dedicated
z-index overlay element so it doesn't affect descendant fixed
positioning. */
/* Respect reduced-motion (still applies to letterbox + caret) */
@media (prefers-reduced-motion: reduce) {
.mx-letterbox {
transition: none;
}
.mx-caret {
animation: none;
opacity: 1;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v2.1 EFFECTS (added 2026-05-12)
Implements user request: expand mint-presence to more elements +
ambient "shimmer". Plus pins magic-toggle on noir to the same
visual spot as matrix/island/default (it's body-root there, hidden
nav-bar; coords pinned via CSS).
To roll back: delete from this header to end of file.
═══════════════════════════════════════════════════════════════════════ */
/* ─── v2.1: Pin noir magic-toggle to exact same visual coords as nav-bar
would render it on default/matrix/island (top-right). ─── */
html.mode-noir .magic-toggle {
position: fixed !important;
top: 22px !important;
right: 22px !important;
z-index: 9999 !important;
}
@media (max-width: 640px) {
html.mode-noir .magic-toggle {
top: 16px !important;
right: 16px !important;
}
}
/* Push noir's running-header right side away from where the button sits,
so chapter indicator (CH XX / 10) doesn't collide with the toggle. */
html.mode-noir .noir-running {
padding-right: 88px !important;
}
@media (max-width: 640px) {
html.mode-noir .noir-running {
padding-right: 70px !important;
}
}
/* ─── v2.1-A: Firefly motes — small mint dots that breathe and drift.
7 instances live in body; positions/durations randomized in JS. ─── */
.mx-firefly {
position: fixed;
left: var(--mx-fly-x, 50%);
top: var(--mx-fly-y, 50%);
width: 3px;
height: 3px;
border-radius: 50%;
pointer-events: none;
z-index: 78;
background: rgba(127, 255, 165, 0.88);
box-shadow:
0 0 4px rgba(127, 255, 165, 0.75),
0 0 10px rgba(127, 255, 165, 0.35);
opacity: 0;
display: none;
animation: mx-firefly-breathe 9s ease-in-out infinite;
will-change: transform, opacity;
}
html.mode-matrix .mx-firefly { display: block; }
@keyframes mx-firefly-breathe {
0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.7); }
18% { opacity: 0.85; transform: translate(calc(var(--mx-fly-dx) * 0.3), calc(var(--mx-fly-dy) * 0.2)) scale(1.0); }
42% { opacity: 0.55; transform: translate(calc(var(--mx-fly-dx) * 0.65), calc(var(--mx-fly-dy) * 0.55)) scale(0.9); }
68% { opacity: 0.95; transform: translate(var(--mx-fly-dx), calc(var(--mx-fly-dy) * 0.85)) scale(1.1); }
88% { opacity: 0.3; transform: translate(calc(var(--mx-fly-dx) * 0.7), var(--mx-fly-dy)) scale(0.85); }
}
/* ─── v2.1-B: Card mint hover glow — subtle mint inner-shadow on hover
for the main interactive cards in matrix mode. ─── */
html.mode-matrix #services .sticker-card,
html.mode-matrix #services .svc-card,
html.mode-matrix #testimonials .testimonial-card,
html.mode-matrix #process .process-step,
html.mode-matrix .stats-grid > * {
transition:
box-shadow 380ms ease-out,
text-shadow 380ms ease-out,
transform 380ms ease-out;
}
html.mode-matrix #services .sticker-card:hover,
html.mode-matrix #services .svc-card:hover,
html.mode-matrix #testimonials .testimonial-card:hover,
html.mode-matrix #process .process-step:hover,
html.mode-matrix .stats-grid > *:hover {
box-shadow:
0 0 0 1px rgba(127, 255, 165, 0.18),
0 0 24px -4px rgba(127, 255, 165, 0.22),
inset 0 0 18px -8px rgba(127, 255, 165, 0.18);
text-shadow: 0 0 6px rgba(127, 255, 165, 0.18);
}
/* ─── v2.1-C: Stats numbers — ambient continuous mint pulse.
They were static glows before; now they breathe like the headlines. ─── */
html.mode-matrix .stats-grid .num {
animation: mx-stat-pulse 4.2s ease-in-out infinite;
}
@keyframes mx-stat-pulse {
0%, 100% {
text-shadow:
0 0 6px rgba(127, 255, 165, 0.18),
0 0 14px rgba(127, 255, 165, 0.06);
}
50% {
text-shadow:
0 0 10px rgba(127, 255, 165, 0.35),
0 0 22px rgba(127, 255, 165, 0.14);
}
}
/* ─── v2.1-D: Section eyebrow + small labels — subtle mint flicker
so the "presence" is felt even at secondary type levels. ─── */
html.mode-matrix .section-eyebrow,
html.mode-matrix .hero-cta .label,
html.mode-matrix .hero-meta .small {
animation: mx-secondary-breathe 6.5s ease-in-out infinite;
}
@keyframes mx-secondary-breathe {
0%, 100% { opacity: 0.78; }
50% { opacity: 1; }
}
/* ─── v2.1-E: extend prefers-reduced-motion guard to v2.1 ─── */
@media (prefers-reduced-motion: reduce) {
.mx-firefly,
html.mode-matrix .stats-grid .num,
html.mode-matrix .section-eyebrow,
html.mode-matrix .hero-cta .label,
html.mode-matrix .hero-meta .small {
animation: none !important;
}
.mx-firefly { opacity: 0.6; }
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v2.2 EFFECTS (added 2026-05-12)
• Mint "presence" breathing extended to LARGE headline-class text
(user complaint: previously only mild on small captions).
• Pulse amplitude stays gentle (max ~6% opacity swing + soft glow)
so it doesn't feel garish — just "alive".
Rollback: delete this block.
═══════════════════════════════════════════════════════════════════════ */
html.mode-matrix .section-headline,
html.mode-matrix .hero-text .line,
html.mode-matrix .hero-text .sub,
html.mode-matrix .manifesto-text,
html.mode-matrix .credo-block .credo-headline .line,
html.mode-matrix #services .sticker-card .svc-name,
html.mode-matrix #process .process-step .ps-name,
html.mode-matrix #testimonials .testimonial-card .quote {
animation: mx-headline-breathe 5.8s ease-in-out infinite;
}
@keyframes mx-headline-breathe {
0%, 100% {
opacity: 0.94;
text-shadow:
0 0 10px rgba(127, 255, 165, 0.10),
0 0 22px rgba(127, 255, 165, 0.04);
}
50% {
opacity: 1;
text-shadow:
0 0 14px rgba(127, 255, 165, 0.22),
0 0 32px rgba(127, 255, 165, 0.10);
}
}
/* Stagger so they don't all pulse in unison */
html.mode-matrix .hero-text .line { animation-delay: -0.6s; }
html.mode-matrix .hero-text .sub { animation-delay: -1.4s; }
html.mode-matrix .manifesto-text { animation-delay: -2.1s; }
html.mode-matrix .credo-block .credo-headline { animation-delay: -3.0s; }
html.mode-matrix .section-headline { animation-delay: -0.3s; }
html.mode-matrix #services .sticker-card:nth-child(1) .svc-name { animation-delay: -1.1s; }
html.mode-matrix #services .sticker-card:nth-child(2) .svc-name { animation-delay: -2.3s; }
html.mode-matrix #services .sticker-card:nth-child(3) .svc-name { animation-delay: -3.5s; }
html.mode-matrix #process .process-step:nth-child(1) .ps-name { animation-delay: -0.8s; }
html.mode-matrix #process .process-step:nth-child(2) .ps-name { animation-delay: -2.0s; }
html.mode-matrix #process .process-step:nth-child(3) .ps-name { animation-delay: -3.2s; }
html.mode-matrix #process .process-step:nth-child(4) .ps-name { animation-delay: -4.4s; }
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .section-headline,
html.mode-matrix .hero-text .line,
html.mode-matrix .hero-text .sub,
html.mode-matrix .manifesto-text,
html.mode-matrix .credo-block .credo-headline .line,
html.mode-matrix #services .sticker-card .svc-name,
html.mode-matrix #process .process-step .ps-name,
html.mode-matrix #testimonials .testimonial-card .quote {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v2.3 — FINAL MAGIC-TOGGLE POSITION OVERRIDE (2026-05-12)
Last-rule-wins terminator for all prior position rules in this file.
The button now lives in root (see index.html v2.3) and is pinned
here at fixed top:22/right:22 across EVERY mode. No mode-specific
collapse animation should affect it any more.
═══════════════════════════════════════════════════════════════════════ */
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-noir .magic-toggle,
html.mode-studio .magic-toggle,
html.mode-vault .magic-toggle,
html.mode-kinetic .magic-toggle {
position: fixed !important;
top: 22px !important;
right: 22px !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
z-index: 10000 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
animation: magic-pulse 2.4s ease-in-out infinite !important;
}
@media (max-width: 640px) {
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-noir .magic-toggle {
top: 16px !important;
right: 16px !important;
}
}
/* Reserve room on the right of the nav-bar so "Связаться" doesn't sit
under the fixed magic-toggle. */
.nav-bar > .container,
html.mode-matrix .nav-bar > .container,
html.mode-island .nav-bar > .container {
padding-right: 84px !important;
}
@media (max-width: 640px) {
.nav-bar > .container,
html.mode-matrix .nav-bar > .container,
html.mode-island .nav-bar > .container {
padding-right: 80px !important; /* v3.0: was 64, bumped so "Связаться" clears the 38×32 magic-toggle */
}
}
/* Defensive: kill any leftover scroll-collapse animation that previously
targeted the magic-toggle inside .nav-bar. Selectors won't match the
new body-root location, but this nullifies any stray inherited rule. */
html.mode-matrix .nav-bar.is-collapsed ~ .magic-toggle,
html.mode-matrix .nav-bar.is-reveal ~ .magic-toggle {
animation: magic-pulse 2.4s ease-in-out infinite !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v3.0 — MOBILE ADAPTATION (2026-05-12)
Tablet & phone: lighter effects, smaller letterbox, fewer motes, tighter
spacing. Goal: cinematic feel survives the small screen without crushing
readability or perf.
═══════════════════════════════════════════════════════════════════════ */
/* ─── Letterbox: thinner on mobile so it doesn't eat content ─── */
@media (max-width: 768px) {
.mx-letterbox {
height: 4.5vh;
}
}
@media (max-width: 480px) {
.mx-letterbox {
height: 3.5vh;
}
}
/* ─── Cinema vignette: lighter on mobile so darker phone screens stay
readable. Aberration kept subtle but visible. ─── */
@media (max-width: 768px) {
.mx-cinema-vignette {
background:
radial-gradient(ellipse 120% 95% at center,
transparent 55%,
rgba(0, 0, 0, 0.22) 80%,
rgba(0, 0, 0, 0.45) 100%);
}
.mx-cinema-aberration {
/* corner colour shifts halved on mobile to preserve battery */
background:
radial-gradient(circle 30vmin at 0% 0%, rgba(255, 60, 60, 0.025) 0%, transparent 60%),
radial-gradient(circle 30vmin at 100% 0%, rgba(60, 90, 255, 0.025) 0%, transparent 60%),
radial-gradient(circle 30vmin at 0% 100%, rgba(60, 90, 255, 0.02) 0%, transparent 60%),
radial-gradient(circle 30vmin at 100% 100%, rgba(255, 60, 60, 0.02) 0%, transparent 60%);
}
}
/* ─── Firefly motes: thin out to 3 on tablet, hide all on phone (perf) ─── */
@media (max-width: 768px) {
.mx-firefly-4,
.mx-firefly-5,
.mx-firefly-6,
.mx-firefly-7 {
display: none !important;
}
}
@media (max-width: 480px) {
.mx-firefly {
display: none !important;
}
}
/* ─── Cursor aura: already hidden on touch via @media (hover: none).
Add explicit guard for very small screens. ─── */
@media (max-width: 768px) {
.mx-cursor-aura {
display: none !important;
}
}
/* ─── Section padding tighter on mobile (less air between sections) ─── */
@media (max-width: 768px) {
html.mode-matrix section,
html.mode-matrix .stats-band,
html.mode-matrix .work-grid,
html.mode-matrix .hero {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
}
@media (max-width: 480px) {
html.mode-matrix section,
html.mode-matrix .stats-band,
html.mode-matrix .work-grid,
html.mode-matrix .hero {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
/* ─── Mobile: tighten hero so the title fits without horizontal scroll.
The clamp() in main CSS already shrinks .line, this just adds top
padding control. ─── */
@media (max-width: 480px) {
html.mode-matrix .hero {
min-height: 90vh;
}
html.mode-matrix .hero-text .line {
line-height: 1.05 !important;
letter-spacing: -0.015em !important;
}
}
/* ─── Mobile: keep magic-toggle clear of mobile navbar height ─── */
@media (max-width: 480px) {
html .magic-toggle,
html.mode-matrix .magic-toggle,
html.mode-island .magic-toggle,
html.mode-noir .magic-toggle {
width: 38px !important;
height: 32px !important;
top: 14px !important;
right: 14px !important;
}
}
/* ─── Mobile: lighten body breathing animations to save CPU ─── */
@media (max-width: 768px) {
html.mode-matrix .section-headline,
html.mode-matrix .hero-text .line,
html.mode-matrix .hero-text .sub,
html.mode-matrix .manifesto-text,
html.mode-matrix .credo-block .credo-headline .line,
html.mode-matrix #services .sticker-card .svc-name,
html.mode-matrix #process .process-step .ps-name,
html.mode-matrix #testimonials .testimonial-card .quote {
animation-duration: 8s; /* slower = less repaint */
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v3.3 EFFECTS (added 2026-05-12)
• Magnetic CTA hover — uses CSS variables set from JS on mousemove.
• Stat count-up is pure JS — no CSS needed.
• DevTools easter egg is pure JS console.log — no CSS needed.
═══════════════════════════════════════════════════════════════════════ */
/* Magnetic-CTA: translate by JS-set vars when .mx-magnetic class is on.
Smooth easing on enter/leave for premium feel. Disabled on touch. */
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
--mx-mag-x: 0px;
--mx-mag-y: 0px;
}
html.mode-matrix .btn-primary.mx-magnetic,
html.mode-matrix .btn-secondary.mx-magnetic {
transform: translate3d(var(--mx-mag-x, 0px), var(--mx-mag-y, 0px), 0);
transition: transform 80ms ease-out; /* responsive while hovered */
}
/* Touch: kill magnetic transform completely */
@media (hover: none) {
html.mode-matrix .btn-primary.mx-magnetic,
html.mode-matrix .btn-secondary.mx-magnetic {
transform: none !important;
}
}
/* Reduced motion: kill the snap-back too */
@media (prefers-reduced-motion: reduce) {
html.mode-matrix .btn-primary,
html.mode-matrix .btn-secondary {
transition: none;
}
html.mode-matrix .btn-primary.mx-magnetic,
html.mode-matrix .btn-secondary.mx-magnetic {
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MATRIX v3.4 — LAYOUT REORG (2026-05-12)
Approved (permanent): #2 section padding, #7 contact focus
Probationary (easy revert): #8 hero size, #9 column 720, #10 sticky eyebrows
To roll back probationary block — delete from `▸ probationary` to end.
═══════════════════════════════════════════════════════════════════════ */
/* ─── #2 — Reduce section padding (matrix only) ───
Base 72px, mobile 48px.
Manifesto: 120px entrance pause (cinematic act-break), but compact
exit (56px) so the gap to testimonials feels tight, not orphaned.
Contact: 120px symmetric — it's the final scene, can breathe.
(v3.4.3 2026-05-13: trimmed manifesto-block bottom 120→56 per user
feedback "большое чёрное расстояние до следующего блока"). */
html.mode-matrix section,
html.mode-matrix .stats-band,
html.mode-matrix .work-grid {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
html.mode-matrix .manifesto-block {
padding-top: 96px !important;
padding-bottom: 24px !important; /* v3.5.1: 56→24 — user still felt the gap too dark */
}
html.mode-matrix #contact {
padding-top: 56px !important; /* v3.5.1: 120→56 — collapses the manifesto→contact dead zone */
padding-bottom: 96px !important;
}
@media (max-width: 768px) {
html.mode-matrix section,
html.mode-matrix .stats-band,
html.mode-matrix .work-grid {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
html.mode-matrix .manifesto-block {
padding-top: 64px !important;
padding-bottom: 16px !important;
}
html.mode-matrix #contact {
padding-top: 40px !important;
padding-bottom: 64px !important;
}
}
/* ─── #7 — Contact: single focused action ───
Collapse the long body paragraph, prominent two-CTA row, less chrome. */
html.mode-matrix #contact .contact-block > p {
font-size: 14px !important;
max-width: 520px !important;
margin: 0 auto 36px !important;
opacity: 0.78;
}
/* Hide the secondary "Ответ за минуты" line — single focus is the goal */
html.mode-matrix #contact .contact-block > div:last-child {
display: none !important;
}
/* CTAs in a clean row, slightly larger, equal weight */
html.mode-matrix #contact .contact-block > div:nth-of-type(1) {
display: flex !important;
flex-wrap: wrap;
gap: 18px !important;
justify-content: center;
align-items: center;
}
html.mode-matrix #contact .btn-primary,
html.mode-matrix #contact .btn-secondary {
font-size: 14px !important;
padding: 16px 26px !important;
min-width: 220px;
text-align: center;
}
/* ═══════════════ ▸ probationary block REVERTED (v3.4.1, 2026-05-12) ▸ ═══
#8 (hero text size) / #9 (720px column) / #10 (sticky eyebrows) tried,
user rejected. Block removed. #2 (padding) and #7 (contact focus) above
remain in force. If you want to retry any of the three later, find the
original code in git tag `approved-2026-05-12-matrix-v3` (was reverted)
or in the v3.4 commit history.
═════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
RESORT SKIN — 4th mode (v3.5, 2026-05-13)
Hosts Prototypes/Resort_skins/00_master.html in a full-viewport