/* ==========================================================================
گپیم — Design System
==========================================================================
Tokens, base styles, components. Pure CSS so it works without Tailwind.
Color tokens are also surfaced to Tailwind via inline config in each page.
========================================================================== */
:root {
/* Surface */
--bg: #090A0D;
--bg-elevated: #0C0E14;
--surface: #111318;
--surface-2: #161820;
--surface-3: #1B1F2A;
--border: #1E222D;
--border-strong: #2A3040;
--divider: rgba(255, 255, 255, 0.06);
/* Sticky nav shell — separate from --bg so the glass effect looks right */
--nav-bg: rgba(9, 10, 13, 0.72);
--nav-bg-scrolled: rgba(9, 10, 13, 0.92);
--nav-border: rgba(255, 255, 255, 0.06);
/* Theme transition — applied to surface-flippable elements so the
light ↔ dark swap doesn't snap. */
--theme-transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
fill var(--dur) var(--ease),
stroke var(--dur) var(--ease);
/* Brand */
--amber: #E5A93B;
--amber-hover: #C78E29;
--amber-soft: rgba(229, 169, 59, 0.10);
--amber-glow: rgba(229, 169, 59, 0.30);
--cyan: #38BDF8;
--cyan-hover: #0EA5E9;
--cyan-soft: rgba(56, 189, 248, 0.10);
--cyan-glow: rgba(56, 189, 248, 0.35);
/* Text */
--text: #F1F3F9;
--text-muted: #94A0B2;
--text-dim: #525E70;
/* Status (for messages) */
--success: #34D399;
--error: #F87171;
/* Typography */
--font-sans: 'Vazirmatn', 'IRANSans', 'Tahoma', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Vazirmatn', ui-monospace, 'SF Mono', Menlo, monospace;
/* Spacing scale (8pt) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Radius */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-amber: 0 0 0 1px rgba(229, 169, 59, 0.20), 0 8px 24px rgba(229, 169, 59, 0.15);
--shadow-cyan: 0 0 0 1px rgba(56, 189, 248, 0.20), 0 8px 24px rgba(56, 189, 248, 0.15);
/* Motion */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out: cubic-bezier(0, 0.7, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-instant: 80ms;
--dur-fast: 150ms;
--dur: 250ms;
--dur-slow: 450ms;
--dur-slower: 700ms;
/* Layout */
--container: 1200px;
--container-narrow: 880px;
}
/* ==========================================================================
LIGHT THEME — applied when [data-theme="light"] is on .
Surface + text invert; brand accents are dampened slightly so they
keep their identity without overpowering a light background.
========================================================================== */
:root[data-theme="light"] {
--bg: #FAFAF7;
--bg-elevated: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #F2F1EC;
--surface-3: #E8E6DF;
--border: #E2DFD5;
--border-strong: #C8C4B7;
--divider: rgba(20, 24, 40, 0.07);
--nav-bg: rgba(250, 250, 247, 0.74);
--nav-bg-scrolled: rgba(250, 250, 247, 0.94);
--nav-border: rgba(20, 24, 40, 0.07);
--amber: #B47A14;
--amber-hover: #8E5E0F;
--amber-soft: rgba(180, 122, 20, 0.08);
--amber-glow: rgba(180, 122, 20, 0.25);
--cyan: #0284C7;
--cyan-hover: #0369A1;
--cyan-soft: rgba(2, 132, 199, 0.08);
--cyan-glow: rgba(2, 132, 199, 0.28);
--text: #14171F;
--text-muted: #5A6478;
--text-dim: #8A93A4;
--shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.05);
--shadow: 0 4px 14px rgba(20, 30, 50, 0.07), 0 1px 3px rgba(20, 30, 50, 0.04);
--shadow-lg: 0 10px 32px rgba(20, 30, 50, 0.10), 0 2px 8px rgba(20, 30, 50, 0.05);
--shadow-amber: 0 0 0 1px rgba(180, 122, 20, 0.20), 0 8px 24px rgba(180, 122, 20, 0.10);
--shadow-cyan: 0 0 0 1px rgba(2, 132, 199, 0.20), 0 8px 24px rgba(2, 132, 199, 0.10);
}
/* ==========================================================================
Reset + Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-feature-settings: "ss01", "cv01", "cv02";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.65;
min-height: 100vh;
text-rendering: optimizeLegibility;
transition: var(--theme-transition);
}
/* Apply the theme transition to the surfaces that actually flip on toggle.
Body alone isn't enough — chrome elements (nav, cards, footers) need it too,
but applying a universal transition causes visible lag on hover, so we
scope it to the shell containers. */
.nav,
.nav-inner,
.footer,
.card,
.card-elevated,
.feature-card,
.pricing-card,
.arch-strip,
.arch-node,
.timeline-step,
.field > input,
.field > select,
.field > textarea,
.section,
.hero::before,
.btn,
.btn-ghost,
.btn-primary,
.btn-link {
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
}
p { margin: 0; }
a {
color: inherit;
text-decoration: none;
transition: color var(--dur) var(--ease);
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
::selection {
background: var(--amber);
color: #000;
}
/* Focus ring (high accessibility) */
:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
border-radius: 4px;
}
/* Skip link */
.skip-link {
position: absolute;
top: -100px;
inset-inline-start: 8px;
z-index: 100;
padding: 10px 16px;
background: var(--amber);
color: #000;
font-weight: 700;
border-radius: var(--radius);
transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 8px; }
/* ==========================================================================
Layout primitives
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
.container-narrow {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: 24px;
}
.section {
padding-block: clamp(64px, 10vw, 128px);
}
.section-tight {
padding-block: clamp(40px, 6vw, 72px);
}
.divider {
height: 1px;
background: var(--divider);
border: 0;
margin: 0;
}
/* ==========================================================================
Typography utilities
========================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan);
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
}
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-amber { color: var(--amber); }
.text-cyan { color: var(--cyan); }
.gradient-text {
background: linear-gradient(135deg, #FFFFFF 30%, var(--amber) 70%, var(--cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* The gradient above starts with white, which is invisible against the
light-theme background. Swap the white stop for the dark text color.
Must use `background-image:` rather than `background:` shorthand —
the latter resets `background-clip` to `border-box` and the gradient
would render as a solid rectangle behind the text. */
:root[data-theme="light"] .gradient-text {
background-image: linear-gradient(135deg, var(--text) 30%, var(--amber) 70%, var(--cyan) 100%);
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--radius);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.01em;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform var(--dur-fast) var(--ease),
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
color var(--dur) var(--ease);
white-space: nowrap;
user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--amber);
color: #000;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 8px 24px color-mix(in srgb, var(--amber) 35%, transparent);
}
.btn-primary:hover {
background: var(--amber-hover);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 10px 28px color-mix(in srgb, var(--amber) 45%, transparent);
}
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--border-strong);
}
.btn-ghost:hover {
border-color: var(--text-muted);
background: var(--surface-2);
}
.btn-link {
background: transparent;
color: var(--cyan);
padding: 8px 0;
border: 0;
}
.btn-link:hover { color: var(--amber); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
/* ==========================================================================
Cards
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
transition: border-color var(--dur) var(--ease),
background var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.card:hover {
border-color: var(--border-strong);
background: var(--surface-2);
}
.card-elevated {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
/* ==========================================================================
Navigation
========================================================================== */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--nav-bg);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid transparent;
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
backdrop-filter var(--dur) var(--ease),
-webkit-backdrop-filter var(--dur) var(--ease);
}
/* Scrolled state — set by JS (toggle .is-scrolled after a few px of scroll).
Solidifies the glass, shows the bottom hairline, slightly tightens the row. */
.nav.is-scrolled {
background: var(--nav-bg-scrolled);
border-bottom-color: var(--nav-border);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 14px 0;
transition: padding-block var(--dur) var(--ease);
}
.nav.is-scrolled .nav-inner { padding-block: 10px; }
.nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 18px;
color: var(--text);
}
.nav-logo img { width: 28px; height: 28px; }
.nav-links {
display: flex;
gap: 28px;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
position: relative;
padding: 6px 0;
transition: color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]::after {
content: "";
position: absolute;
bottom: -16px;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
background: var(--amber);
}
.nav-actions { display: flex; gap: 12px; align-items: center; }
/* ==========================================================================
Theme toggle (sun / moon pill in the nav)
Two SVGs sit on top of each other; CSS swaps which is visible + rotates
the outgoing one, so the swap has a small motion rather than a snap.
========================================================================== */
.theme-toggle {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
padding: 0;
position: relative;
overflow: hidden;
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
}
.theme-toggle:hover {
background: var(--surface-2);
border-color: var(--text-muted);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 2px;
}
.theme-toggle svg {
position: absolute;
width: 18px;
height: 18px;
transition:
opacity var(--dur) var(--ease),
transform var(--dur-slow) var(--ease-spring);
}
/* Default (dark theme): show moon, hide sun */
.theme-toggle .ico-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .ico-moon { opacity: 1; transform: rotate(0deg) scale(1); }
/* Light theme: show sun, hide moon */
:root[data-theme="light"] .theme-toggle .ico-sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
.nav-mobile-toggle {
display: none;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 8px;
color: var(--text);
cursor: pointer;
}
@media (max-width: 880px) {
.nav-links { display: none; }
.nav-mobile-toggle { display: inline-flex; }
.nav-links[data-open="true"] {
display: flex;
position: absolute;
top: 100%;
inset-inline-start: 0;
inset-inline-end: 0;
flex-direction: column;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 24px;
gap: 16px;
}
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
padding-block: clamp(72px, 12vw, 140px);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
/* Four overlapping radial blobs (amber + cyan on dark base), blurred
so the edges feather. Same Feral UI palette as before, just
restructured into the original blob layout. */
background:
radial-gradient(60% 50% at 12% 18%, rgba(229, 169, 59, 0.42), transparent 60%),
radial-gradient(55% 55% at 88% 22%, rgba(56, 189, 248, 0.32), transparent 60%),
radial-gradient(70% 60% at 78% 92%, rgba(229, 169, 59, 0.22), transparent 65%),
radial-gradient(50% 50% at 18% 88%, rgba(56, 189, 248, 0.20), transparent 60%),
linear-gradient(135deg, #0F1117 0%, #14171F 50%, #0C0E14 100%);
filter: blur(40px) saturate(115%);
pointer-events: none;
z-index: 0;
animation: hero-drift 24s ease-in-out infinite alternate;
will-change: transform, opacity;
}
/* Subtle grain over the mesh — gives it the printed/painted texture that
stops the gradient looking like a generic CSS gradient. ~4% opacity so
it's felt, not seen. */
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
opacity: 0.10;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
@keyframes hero-drift {
/* Slow morph — each blob shifts up to ~8% so the whole field breathes.
No new colours introduced; we're just translating the same gradients. */
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2%, -2%, 0) scale(1.04); }
100% { transform: translate3d(-3%, 3%, 0) scale(0.98); }
}
/* Light theme: same four-blob idea but with off-white base + muted brand tones. */
:root[data-theme="light"] .hero::before {
background:
radial-gradient(60% 50% at 12% 18%, rgba(180, 122, 20, 0.22), transparent 60%),
radial-gradient(55% 55% at 88% 22%, rgba(2, 132, 199, 0.18), transparent 60%),
radial-gradient(70% 60% at 78% 92%, rgba(180, 122, 20, 0.14), transparent 65%),
radial-gradient(50% 50% at 18% 88%, rgba(2, 132, 199, 0.12), transparent 60%),
linear-gradient(135deg, #FAFAF7 0%, #F4F2EC 50%, #FAFAF7 100%);
}
/* Honour reduced motion: no drift, no grain animation. */
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; filter: blur(40px); }
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 1;
/* Perspective lives on the grid (parent), not the .mock-ui itself, so
the rotateX/rotateY applied to the mock card actually has visible depth. */
perspective: 1500px;
perspective-origin: 50% 40%;
}
@media (max-width: 880px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; perspective: none; }
/* On narrow viewports the hero is single-column; force text above the mockup
regardless of the desktop DOM order (where mockup comes first for RTL layout). */
.hero-text { order: -1; }
}
.hero h1 {
font-size: clamp(36px, 5.5vw, 64px);
letter-spacing: -0.02em;
line-height: 1.05;
margin-bottom: 24px;
}
.hero p.lead {
font-size: clamp(16px, 1.6vw, 18px);
color: var(--text-muted);
line-height: 1.7;
max-width: 56ch;
margin-bottom: 36px;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
font-size: 13px;
color: var(--text-dim);
font-family: var(--font-mono);
}
.hero-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ==========================================================================
Mock messenger UI — interactive hero demo
Themable via [data-theme] on .mock-ui. Switches between 5 panels via [data-view].
========================================================================== */
.mock-ui {
/* Theme tokens — defaults to the "dark" theme. Each theme below overrides. */
--mk-bg: #0B0C10;
--mk-bg-deep: #07080B;
--mk-surface: #15171D;
--mk-surface-2: #1B1E26;
--mk-surface-3: #232730;
--mk-border: #2A2E3A;
--mk-text: #ECEFF4;
--mk-text-muted: #9CA3AF;
--mk-text-dim: #6B7280;
--mk-accent: #E5A93B;
--mk-accent-2: #38BDF8;
--mk-accent-soft: rgba(229, 169, 59, 0.14);
--mk-accent-2-soft:rgba(56, 189, 248, 0.14);
--mk-msg-in: #232730;
--mk-msg-in-text: #ECEFF4;
--mk-msg-out: #E5A93B;
--mk-msg-out-text: #1A1300;
--mk-stage: #07080B;
--mk-stage-2: #131418;
--mk-shadow: 0 12px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.25);
--mk-bar: #131418;
--mk-tab-bg: #0F1014;
--mk-typing: #9CA3AF;
--mk-link-bg: #1B1E26;
position: relative;
background: var(--mk-surface);
border: 1px solid var(--mk-border);
border-radius: var(--radius-lg);
overflow: hidden;
/* Sharper, smaller shadow + 1px crisp inset highlight so the tilted card
reads as a 3D surface, not a soft cloud. */
box-shadow: var(--mk-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
/* Cursor-tilt deltas — main.js writes --tilt-x / --tilt-y in degrees
based on cursor position; the calc() composes them on top of the
resting tilt so the surface "tips toward" the cursor.
The perspective is set on .hero-grid (parent) — applying it here on
the same element as the rotate has no visible effect, which is why
the tilt wasn't reading. */
--tilt-x: 0deg;
--tilt-y: 0deg;
transform: rotateY(calc(-2deg + var(--tilt-y)))
rotateX(calc(1deg + var(--tilt-x)));
transition: transform 180ms var(--ease);
font-family: var(--font-sans);
color: var(--mk-text);
}
/* ---------- Theme: light ---------- */
.mock-ui[data-theme="light"] {
--mk-bg: #FFFFFF;
--mk-bg-deep: #F4F4F5;
--mk-surface: #FFFFFF;
--mk-surface-2: #F4F4F5;
--mk-surface-3: #E4E4E7;
--mk-border: #E4E4E7;
--mk-text: #18181B;
--mk-text-muted: #52525B;
--mk-text-dim: #A1A1AA;
--mk-accent: #C78E29;
--mk-accent-2: #0284C7;
--mk-accent-soft: rgba(199, 142, 41, 0.10);
--mk-accent-2-soft:rgba(2, 132, 199, 0.10);
--mk-msg-in: #F4F4F5;
--mk-msg-in-text: #18181B;
--mk-msg-out: #E5A93B;
--mk-msg-out-text: #1A1300;
--mk-stage: #F4F4F5;
--mk-stage-2: #FFFFFF;
--mk-shadow: 0 8px 18px rgba(15, 25, 50, 0.10), 0 1px 4px rgba(15, 25, 50, 0.06);
--mk-bar: #FAFAFA;
--mk-tab-bg: #FAFAFA;
--mk-typing: #71717A;
--mk-link-bg: #F4F4F5;
}
/* ---------- Theme: yellow (custom client demo) ---------- */
.mock-ui[data-theme="yellow"] {
--mk-bg: #FFFBEB;
--mk-bg-deep: #FEF3C7;
--mk-surface: #FFFCF0;
--mk-surface-2: #FEF3C7;
--mk-surface-3: #FDE68A;
--mk-border: #FDE68A;
--mk-text: #422006;
--mk-text-muted: #78350F;
--mk-text-dim: #A16207;
--mk-accent: #B45309;
--mk-accent-2: #D97706;
--mk-accent-soft: rgba(180, 83, 9, 0.10);
--mk-accent-2-soft:rgba(217, 119, 6, 0.12);
--mk-msg-in: #FEF3C7;
--mk-msg-in-text: #422006;
--mk-msg-out: #B45309;
--mk-msg-out-text: #FFFBEB;
--mk-stage: #FEF3C7;
--mk-stage-2: #FFFBEB;
--mk-shadow: 0 8px 18px rgba(180, 83, 9, 0.14), 0 1px 4px rgba(180, 83, 9, 0.08);
--mk-bar: #FEF3C7;
--mk-tab-bg: #FEF3C7;
--mk-typing: #92400E;
--mk-link-bg: #FEF3C7;
}
/* ---------- Theme: purple (custom client demo) ---------- */
.mock-ui[data-theme="purple"] {
--mk-bg: #FAF7FC;
--mk-bg-deep: #F3EFFA;
--mk-surface: #FFFFFF;
--mk-surface-2: #F3EFFA;
--mk-surface-3: #E9DFF5;
--mk-border: #E9DFF5;
--mk-text: #1E1B2E;
--mk-text-muted: #4C4366;
--mk-text-dim: #847BA1;
--mk-accent: #7C3AED;
--mk-accent-2: #5B21B6;
--mk-accent-soft: rgba(124, 58, 237, 0.10);
--mk-accent-2-soft:rgba(91, 33, 182, 0.10);
--mk-msg-in: #F3EFFA;
--mk-msg-in-text: #1E1B2E;
--mk-msg-out: #7C3AED;
--mk-msg-out-text: #FFFFFF;
--mk-stage: #F3EFFA;
--mk-stage-2: #FAF7FC;
--mk-shadow: 0 8px 18px rgba(91, 33, 182, 0.14), 0 1px 4px rgba(91, 33, 182, 0.08);
--mk-bar: #F3EFFA;
--mk-tab-bg: #F3EFFA;
--mk-typing: #6D28D9;
--mk-link-bg: #F3EFFA;
}
/* ---------- Top chrome bar ---------- */
.mock-ui-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--mk-bar);
border-bottom: 1px solid var(--mk-border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--mk-text-muted);
}
.mock-ui-bar .dots { display: flex; gap: 6px; }
.mock-ui-bar .dots span {
width: 10px; height: 10px; border-radius: 50%;
background: var(--mk-border);
}
.mock-ui-bar .dots span:nth-child(1) { background: #FF5F57; }
.mock-ui-bar .dots span:nth-child(2) { background: #FEBC2E; }
.mock-ui-bar .dots span:nth-child(3) { background: #28C840; }
.mock-ui-bar .url { margin-inline-start: 12px; opacity: 0.85; }
/* ---------- Theme dots ---------- */
.mock-themes {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: var(--mk-surface-2);
border: 1px solid var(--mk-border);
border-radius: var(--radius-full);
}
.mock-theme-dot {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--c, var(--mk-text-dim));
border: 1.5px solid transparent;
cursor: pointer;
padding: 0;
outline: none;
transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mock-theme-dot:hover { transform: scale(1.12); }
.mock-theme-dot.is-active {
border-color: var(--mk-accent-2);
box-shadow: 0 0 0 2px var(--mk-accent-2-soft);
}
.mock-theme-dot:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: 2px; }
/* ---------- Body grid ---------- */
.mock-ui-body {
display: flex;
flex-direction: row;
min-height: 420px;
position: relative;
background: var(--mk-surface);
}
.mock-views-wrap {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0; /* let the active view grow to fill the body instead of sitting at the top */
background: var(--mk-surface);
}
/* ---------- View panel base ---------- */
.mock-view {
display: flex;
flex-direction: row;
min-height: 420px;
flex: 1 1 0; /* explicit basis 0 so all panels are exactly the same height */
overflow: hidden; /* clip any content that would otherwise push the panel a few px taller */
background: var(--mk-surface);
color: var(--mk-text);
}
/* Voice / Conference / Screen / Files stack their stage and toolbar vertically,
while the chat view keeps the sidebar + chat column horizontal. */
.mock-view[data-view-panel="voice"],
.mock-view[data-view-panel="conference"],
.mock-view[data-view-panel="screen"],
.mock-view[data-view-panel="files"] {
flex-direction: column;
}
.mock-view[hidden] { display: none; }
/* ============================================================
Sidebar — lives at the top level of .mock-ui-body so it
stays visible in every view (chat / voice / conference /
screen-share / files). On desktop it's a 200px column.
On narrow viewports it collapses into a dropdown button
(see the @media block at the bottom of this file).
============================================================ */
.mk-sidebar-wrap {
position: relative;
display: flex;
flex-shrink: 0;
}
/* Mobile toggle button — hidden on desktop */
.mk-sidebar-toggle {
display: none;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
background: var(--mk-bar);
border: none;
border-bottom: 1px solid var(--mk-border);
color: var(--mk-text);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: start;
}
.mk-sidebar-toggle:hover { background: var(--mk-surface-2); }
.mk-sidebar-toggle:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: -2px; }
.mk-sidebar-toggle-ico {
width: 16px; height: 16px;
background: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
flex-shrink: 0;
}
.mk-sidebar-toggle-ico.ico-chat { -webkit-mask-image: var(--mk-ico-chat); mask-image: var(--mk-ico-chat); }
.mk-sidebar-toggle-ico.ico-voice { -webkit-mask-image: var(--mk-ico-mic); mask-image: var(--mk-ico-mic); }
.mk-sidebar-toggle-ico.ico-conference { -webkit-mask-image: var(--mk-ico-video); mask-image: var(--mk-ico-video); }
.mk-sidebar-toggle-ico.ico-screen { -webkit-mask-image: var(--mk-ico-share); mask-image: var(--mk-ico-share); }
.mk-sidebar-toggle-ico.ico-files { -webkit-mask-image: var(--mk-ico-files); mask-image: var(--mk-ico-files); }
.mk-sidebar-toggle-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mk-sidebar-toggle-caret {
font-size: 11px;
color: var(--mk-text-muted);
transition: transform var(--dur-fast) var(--ease);
}
.mk-sidebar-toggle[aria-expanded="true"] .mk-sidebar-toggle-caret { transform: rotate(180deg); }
.mk-sidebar {
width: 200px;
background: var(--mk-bg-deep);
border-inline-end: 1px solid var(--mk-border);
padding: 14px 10px;
font-size: 13px;
overflow-y: auto;
max-height: 100%;
}
.mk-search {
display: flex;
align-items: center;
gap: 8px;
background: var(--mk-surface-2);
border: 1px solid var(--mk-border);
border-radius: var(--radius);
padding: 8px 12px;
font-size: 12px;
color: var(--mk-text-muted);
margin-bottom: 14px;
}
.mk-search-ico {
width: 12px; height: 12px;
border: 1.5px solid currentColor;
border-radius: 50%;
position: relative;
flex-shrink: 0;
opacity: 0.7;
}
.mk-search-ico::after {
content: "";
position: absolute;
width: 5px; height: 1.5px;
background: currentColor;
bottom: -3px;
inset-inline-end: -3px;
transform: rotate(45deg);
}
.mk-section {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--mk-text-dim);
padding: 0 8px;
margin: 10px 0 6px;
text-transform: uppercase;
}
.mk-room {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border-radius: var(--radius);
color: var(--mk-text-muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
text-align: start;
font: inherit;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mk-room:hover {
background: var(--mk-surface-2);
color: var(--mk-text);
}
.mk-room.is-active {
background: var(--mk-accent-2-soft);
color: var(--mk-text);
border-color: color-mix(in srgb, var(--mk-accent-2) 30%, transparent);
}
.mk-room:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: 1px; }
.mk-room-hash { color: var(--mk-text-dim); font-family: var(--font-mono); font-size: 11px; }
.mk-room-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mk-accent-2);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk-accent-2) 25%, transparent);
flex-shrink: 0;
}
.mk-badge {
margin-inline-start: auto;
background: var(--mk-accent);
color: var(--mk-msg-out-text);
font-size: 10px;
padding: 1px 6px;
border-radius: var(--radius-full);
font-weight: 700;
font-family: var(--font-mono);
}
.mk-chat {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0; /* let the stream's flex: 1 actually fill the remaining space */
}
.mk-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--mk-border);
background: var(--mk-surface-2);
}
.mk-header-hash {
width: 28px; height: 28px;
display: grid; place-items: center;
background: var(--mk-accent-soft);
color: var(--mk-accent);
border-radius: var(--radius);
font-weight: 800;
font-size: 14px;
font-family: var(--font-mono);
}
.mk-header-text { display: flex; flex-direction: column; line-height: 1.2; }
.mk-header-name { font-weight: 700; font-size: 13px; color: var(--mk-text); }
.mk-header-meta { font-size: 11px; color: var(--mk-text-muted); font-family: var(--font-mono); }
.mk-header-actions {
margin-inline-start: auto;
display: flex;
gap: 14px;
color: var(--mk-text-muted);
}
.mk-header-ico {
width: 16px; height: 16px;
background: currentColor;
opacity: 0.7;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.mk-header-ico:nth-child(1) { -webkit-mask-image: var(--mk-ico-search); mask-image: var(--mk-ico-search); }
.mk-header-ico:nth-child(2) { -webkit-mask-image: var(--mk-ico-phone); mask-image: var(--mk-ico-phone); }
.mk-header-ico:nth-child(3) { -webkit-mask-image: var(--mk-ico-video); mask-image: var(--mk-ico-video); }
.mk-header-ico:nth-child(4) { -webkit-mask-image: var(--mk-ico-thread); mask-image: var(--mk-ico-thread); }
.mk-header-ico:nth-child(5) { -webkit-mask-image: var(--mk-ico-menu); mask-image: var(--mk-ico-menu); }
/* Chat stream */
.mk-stream {
flex: 1;
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--mk-bg);
overflow-y: auto; /* scrollable like a normal chat — messages don't get clipped by the panel frame */
overflow-x: hidden;
min-height: 240px;
scrollbar-width: thin;
scrollbar-color: var(--mk-border) transparent;
}
.mk-stream::-webkit-scrollbar { width: 6px; }
.mk-stream::-webkit-scrollbar-track { background: transparent; }
.mk-stream::-webkit-scrollbar-thumb {
background: var(--mk-border);
border-radius: 3px;
}
.mk-stream::-webkit-scrollbar-thumb:hover { background: var(--mk-text-dim); }
.mk-msg {
max-width: 78%;
padding: 9px 13px;
border-radius: 12px;
font-size: 13px;
line-height: 1.55;
color: var(--mk-msg-in-text);
background: var(--mk-msg-in);
align-self: flex-start;
border-top-left-radius: 4px;
}
.mk-msg-out {
background: var(--mk-msg-out);
color: var(--mk-msg-out-text);
align-self: flex-end;
border-top-left-radius: 12px;
border-top-right-radius: 4px;
}
.mk-msg-text { white-space: pre-wrap; }
.mk-msg-meta {
display: block;
font-size: 10px;
opacity: 0.65;
margin-top: 4px;
font-family: var(--font-mono);
}
.mk-msg-out .mk-msg-meta { color: var(--mk-msg-out-text); }
.mk-msg-read { color: var(--mk-accent-2); margin-inline-start: 4px; }
.mk-msg-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: flex-end; max-width: 78%; }
.mk-reactions {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--mk-surface-2);
border: 1px solid var(--mk-border);
color: var(--mk-text-muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
padding: 3px 8px;
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mk-reactions:hover {
background: var(--mk-surface-3);
color: var(--mk-text);
}
.mk-reactions:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: 1px; }
.mk-reactions.is-active {
background: var(--mk-accent-2-soft);
border-color: color-mix(in srgb, var(--mk-accent-2) 40%, transparent);
color: var(--mk-accent-2);
}
.mk-reactions-ico { font-size: 12px; line-height: 1; }
.mk-reactions-count { font-weight: 700; }
/* Link preview */
.mk-link {
display: flex;
align-items: stretch;
gap: 10px;
max-width: 78%;
align-self: flex-start;
background: var(--mk-link-bg);
border: 1px solid var(--mk-border);
border-radius: var(--radius);
padding: 10px;
text-decoration: none;
color: inherit;
font-size: 12px;
width: 280px;
max-width: 100%;
}
.mk-link-thumb {
width: 48px;
flex-shrink: 0;
border-radius: 6px;
background:
linear-gradient(135deg, var(--mk-accent), var(--mk-accent-2));
position: relative;
}
.mk-link-thumb::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%);
border-radius: inherit;
}
.mk-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-link-title { font-weight: 700; color: var(--mk-text); font-size: 12px; }
.mk-link-domain { color: var(--mk-text-muted); font-size: 11px; font-family: var(--font-mono); }
.mk-link-time { color: var(--mk-text-dim); font-size: 10px; font-family: var(--font-mono); align-self: flex-end; }
/* File preview (chat) */
.mk-file {
display: flex;
align-items: center;
gap: 10px;
max-width: 78%;
align-self: flex-start;
background: var(--mk-link-bg);
border: 1px solid var(--mk-border);
border-radius: var(--radius);
padding: 10px 12px;
width: 260px;
max-width: 100%;
}
.mk-file-ico {
width: 36px; height: 36px;
border-radius: 8px;
display: grid; place-items: center;
font-size: 10px;
font-weight: 800;
font-family: var(--font-mono);
color: #fff;
background: linear-gradient(135deg, var(--mk-accent), var(--mk-accent-2));
flex-shrink: 0;
}
.mk-file-ico-pdf { background: linear-gradient(135deg, #F87171, #B91C1C); }
.mk-file-ico-img { background: linear-gradient(135deg, #38BDF8, #0369A1); }
.mk-file-ico-doc { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.mk-file-ico-code { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.mk-file-ico-video{ background: linear-gradient(135deg, #F472B6, #BE185D); }
.mk-file-ico-audio{ background: linear-gradient(135deg, #34D399, #047857); }
.mk-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-file-name { font-size: 12px; font-weight: 700; color: var(--mk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-file-sub { font-size: 11px; color: var(--mk-text-muted); font-family: var(--font-mono); }
.mk-file-dl { color: var(--mk-text-muted); display: flex; flex-shrink: 0; }
/* Typing indicator */
.mk-typing {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 13px;
background: var(--mk-msg-in);
color: var(--mk-text-muted);
border-radius: 12px;
border-top-left-radius: 4px;
align-self: flex-start;
font-size: 11px;
font-family: var(--font-mono);
}
.mk-typing span:not(.mk-typing-label) {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--mk-typing);
animation: mk-typing 1.4s infinite;
}
.mk-typing span:nth-child(2) { animation-delay: 0.2s; }
.mk-typing span:nth-child(3) { animation-delay: 0.4s; }
.mk-typing[hidden] { display: none; }
@keyframes mk-typing {
0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; }
30% { transform: scale(1); opacity: 1; }
}
/* Chat input row + status */
.mk-input {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-top: 1px solid var(--mk-border);
background: var(--mk-surface-2);
font-size: 13px;
color: var(--mk-text-dim);
}
.mk-input-plus {
width: 24px; height: 24px;
display: grid; place-items: center;
border: 1px solid var(--mk-border);
border-radius: 50%;
color: var(--mk-text-muted);
font-size: 16px;
line-height: 1;
}
.mk-input-field {
flex: 1;
background: var(--mk-surface);
border: 1px solid var(--mk-border);
border-radius: var(--radius);
padding: 8px 12px;
color: var(--mk-text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mk-input-ico {
width: 18px; height: 18px;
background: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
opacity: 0.7;
flex-shrink: 0;
display: inline-block;
}
.mk-input-ico.ico-mic { -webkit-mask-image: var(--mk-ico-mic); mask-image: var(--mk-ico-mic); }
.mk-input-ico.ico-smile { -webkit-mask-image: var(--mk-ico-smile); mask-image: var(--mk-ico-smile); }
.mk-status {
padding: 6px 14px 10px;
font-size: 10px;
color: var(--mk-text-dim);
font-family: var(--font-mono);
background: var(--mk-surface-2);
border-top: 1px solid var(--mk-border);
}
/* ============================================================
View: Voice + Conference + Screen-share
============================================================ */
.mk-call-stage {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px;
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--mk-accent-2) 8%, transparent), transparent 60%),
var(--mk-bg);
min-height: 320px;
position: relative;
overflow: hidden;
}
.mk-call-stage::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle, var(--mk-border) 1px, transparent 1.5px);
background-size: 18px 18px;
opacity: 0.35;
pointer-events: none;
}
.mk-call-tiles,
.mk-conf-grid {
display: grid;
gap: 12px;
position: relative;
z-index: 1;
}
.mk-call-tiles { grid-template-columns: repeat(2, 88px); }
.mk-conf-grid { grid-template-columns: 1fr 1fr; max-width: 460px; width: 100%; }
.mk-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px 8px;
background: var(--mk-stage-2);
border: 1px solid var(--mk-border);
border-radius: 10px;
color: var(--mk-text);
}
.mk-tile.lg { padding: 18px 8px 12px; }
.mk-tile.sm { padding: 6px 4px 6px; }
/* Video-call tile — looks like a live camera feed */
.mk-tile.video {
padding: 0;
aspect-ratio: 4 / 3;
justify-content: flex-end;
overflow: hidden;
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--g1, var(--mk-accent)) 40%, #0a0e1a), transparent 55%),
radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--g2, var(--mk-accent-2)) 35%, #0a0e1a), transparent 60%),
linear-gradient(160deg, #0a0e1a 0%, #131a2a 100%);
border: 1px solid color-mix(in srgb, var(--g1, var(--mk-accent)) 25%, transparent);
}
.mk-tile.video .mk-tile-avatar {
position: absolute;
inset: 0;
margin: auto;
width: 72px; height: 72px;
font-size: 28px;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%),
linear-gradient(135deg, var(--g1, var(--mk-accent)), var(--g2, var(--mk-accent-2)));
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mk-tile.video .mk-tile-name {
position: relative;
z-index: 1;
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
color: #fff;
font-size: 11px;
padding: 18px 10px 8px;
margin: 0;
text-align: start;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mk-tile.video .mk-tile-talking {
position: absolute;
top: 8px;
inset-inline-start: 8px;
width: 8px; height: 8px;
border-radius: 50%;
background: #34D399;
box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
z-index: 2;
opacity: 0.35;
}
.mk-tile.video.is-talking { border-color: #34D399; }
.mk-tile.video.is-talking .mk-tile-talking {
opacity: 1;
animation: mk-talking-pulse 1.2s ease-in-out infinite;
}
@keyframes mk-talking-pulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25); }
50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.10); }
}
.mk-tile-live {
position: absolute;
top: 8px;
inset-inline-end: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(239, 68, 68, 0.92);
color: #fff;
font-size: 9px;
font-weight: 800;
padding: 2px 6px 2px 5px;
border-radius: 4px;
font-family: var(--font-mono);
letter-spacing: 0.05em;
}
.mk-tile-avatar {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--g1, var(--mk-accent)), var(--g2, var(--mk-accent-2)));
display: grid; place-items: center;
color: #fff;
font-weight: 800;
font-size: 16px;
font-family: var(--font-sans);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.mk-tile.lg .mk-tile-avatar { width: 64px; height: 64px; font-size: 22px; }
.mk-tile.sm .mk-tile-avatar { width: 36px; height: 36px; font-size: 12px; }
.mk-tile-nocam .mk-tile-avatar { color: rgba(255, 255, 255, 0.8); opacity: 0.85; }
.mk-tile-name {
font-size: 10px;
color: var(--mk-text-muted);
font-family: var(--font-mono);
text-align: center;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.mk-tile.lg .mk-tile-name { font-size: 11px; }
.mk-tile-mic {
position: absolute;
top: 6px;
inset-inline-end: 6px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--mk-accent);
display: grid; place-items: center;
color: var(--mk-msg-out-text);
font-size: 9px;
}
.mk-tile-mic::before {
content: "";
width: 9px; height: 9px;
background: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: var(--mk-ico-mic); mask-image: var(--mk-ico-mic);
}
.mk-tile-mic.is-off { background: var(--mk-text-dim); }
.mk-tile-mic.is-off::before {
-webkit-mask-image: var(--mk-ico-mic-off); mask-image: var(--mk-ico-mic-off);
}
.mk-call-info {
position: relative;
z-index: 1;
font-size: 12px;
color: var(--mk-text-muted);
font-family: var(--font-mono);
background: var(--mk-stage-2);
border: 1px solid var(--mk-border);
padding: 6px 14px;
border-radius: var(--radius-full);
}
.mk-call-time { color: var(--mk-text); font-weight: 700; }
/* Call control bar */
.mk-call-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
background: var(--mk-bar);
border-top: 1px solid var(--mk-border);
}
.mk-call-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--mk-surface-2);
border: 1px solid var(--mk-border);
color: var(--mk-text);
display: grid; place-items: center;
cursor: pointer;
padding: 0;
transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mk-call-btn:hover { background: var(--mk-surface-3); }
.mk-call-btn:active { transform: scale(0.95); }
.mk-call-btn.is-active {
background: var(--mk-accent-2);
color: #fff;
border-color: var(--mk-accent-2);
}
.mk-call-btn.is-active .mk-call-ico { background: #fff; }
.mk-call-btn.mk-call-end {
background: #F87171;
border-color: #F87171;
color: #fff;
width: 44px;
border-radius: 9999px;
}
.mk-call-btn.mk-call-end .mk-call-ico { background: #fff; }
.mk-call-btn:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: 2px; }
.mk-call-ico {
width: 16px; height: 16px;
background: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.mk-call-btn.mk-call-end .mk-call-ico {
transform: rotate(135deg);
}
.ico-mic { -webkit-mask-image: var(--mk-ico-mic); mask-image: var(--mk-ico-mic); }
.ico-headphones { -webkit-mask-image: var(--mk-ico-headphones);mask-image: var(--mk-ico-headphones); }
.ico-video { -webkit-mask-image: var(--mk-ico-video); mask-image: var(--mk-ico-video); }
.ico-plus { -webkit-mask-image: var(--mk-ico-plus); mask-image: var(--mk-ico-plus); }
.ico-smile { -webkit-mask-image: var(--mk-ico-smile); mask-image: var(--mk-ico-smile); }
.ico-end { -webkit-mask-image: var(--mk-ico-phone); mask-image: var(--mk-ico-phone); }
/* Screen-share stage */
.mk-screen-wrap {
flex: 1;
display: flex;
gap: 12px;
padding: 16px;
background: var(--mk-bg);
min-height: 320px;
}
.mk-screen-stage {
flex: 1;
background: #000;
border: 1px solid var(--mk-border);
border-radius: var(--radius);
position: relative;
display: grid;
place-items: center;
background-image:
linear-gradient(45deg, #0a0a0a 25%, transparent 25%, transparent 75%, #0a0a0a 75%),
linear-gradient(45deg, #0a0a0a 25%, transparent 25%, transparent 75%, #0a0a0a 75%);
background-size: 24px 24px;
background-position: 0 0, 12px 12px;
background-color: #050505;
}
.mock-ui[data-theme="light"] .mk-screen-stage,
.mock-ui[data-theme="yellow"] .mk-screen-stage,
.mock-ui[data-theme="purple"] .mk-screen-stage {
/* Light themes keep the shared-screen tile dark for contrast */
background-color: #050505;
}
.mk-screen-label {
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 11px;
padding: 5px 10px;
border-radius: var(--radius);
font-family: var(--font-mono);
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Screen-share participant strip — compact vertical column on the right.
align-self: flex-start so the column sizes to its content instead of
stretching to fill the available height (which was squashing the tiles). */
.mk-screen-participants {
display: flex;
flex-direction: column;
gap: 8px;
width: 84px;
flex-shrink: 0;
align-self: flex-start;
}
.mk-screen-participants .mk-tile.sm { padding: 4px 4px 5px; }
.mk-screen-participants .mk-tile.sm .mk-tile-avatar { width: 40px; height: 40px; font-size: 13px; }
.mk-screen-participants .mk-tile.sm .mk-tile-name { font-size: 9px; }
/* ============================================================
View: Files
============================================================ */
.mk-files {
flex: 1;
display: flex;
flex-direction: column;
min-height: 320px;
background: var(--mk-surface);
}
.mk-files-head {
padding: 14px 16px 10px;
font-size: 13px;
font-weight: 700;
color: var(--mk-text);
border-bottom: 1px solid var(--mk-border);
background: var(--mk-surface-2);
}
.mk-files-head .muted {
color: var(--mk-text-muted);
font-weight: 400;
font-family: var(--font-mono);
font-size: 11px;
}
.mk-files-list {
display: flex;
flex-direction: column;
padding: 8px;
gap: 2px;
flex: 1;
min-height: 0; /* allow it to shrink so the list scrolls within the panel */
overflow-y: auto; /* scrollable like a normal file list — rows don't get clipped by the panel frame */
scrollbar-width: thin;
scrollbar-color: var(--mk-border) transparent;
}
.mk-files-list::-webkit-scrollbar { width: 6px; }
.mk-files-list::-webkit-scrollbar-track { background: transparent; }
.mk-files-list::-webkit-scrollbar-thumb {
background: var(--mk-border);
border-radius: 3px;
}
.mk-files-list::-webkit-scrollbar-thumb:hover { background: var(--mk-text-dim); }
.mk-file-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius);
transition: background var(--dur-fast) var(--ease);
}
.mk-file-row:hover { background: var(--mk-surface-2); }
.mk-file-row .mk-file-ico { width: 32px; height: 32px; font-size: 9px; }
.mk-file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-file-row .mk-file-name { font-size: 12px; }
.mk-file-row .mk-file-sub { font-size: 10px; }
/* ============================================================
Sidebar spaces (view switcher inside the sidebar — like
Element/Sable's "Spaces" section that lives above the rooms)
============================================================ */
.mk-space {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border-radius: var(--radius);
color: var(--mk-text-muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
text-align: start;
font: inherit;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mk-space:hover { background: var(--mk-surface-2); color: var(--mk-text); }
.mk-space.is-active {
background: var(--mk-accent-2-soft);
color: var(--mk-text);
border-color: color-mix(in srgb, var(--mk-accent-2) 30%, transparent);
}
.mk-space:focus-visible { outline: 2px solid var(--mk-accent-2); outline-offset: 1px; }
.mk-space-ico {
width: 16px; height: 16px;
background: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
flex-shrink: 0;
opacity: 0.85;
}
.mk-space.is-active .mk-space-ico { opacity: 1; }
.mk-space .ico-chat { -webkit-mask-image: var(--mk-ico-chat); mask-image: var(--mk-ico-chat); }
.mk-space .ico-voice { -webkit-mask-image: var(--mk-ico-mic); mask-image: var(--mk-ico-mic); }
.mk-space .ico-conference { -webkit-mask-image: var(--mk-ico-video); mask-image: var(--mk-ico-video); }
.mk-space .ico-screen { -webkit-mask-image: var(--mk-ico-share); mask-image: var(--mk-ico-share); }
.mk-space .ico-files { -webkit-mask-image: var(--mk-ico-files); mask-image: var(--mk-ico-files); }
/* ============================================================
Shared icon masks (used via background + mask)
============================================================ */
.mock-ui {
--mk-ico-search: url("data:image/svg+xml;utf8,");
--mk-ico-phone: url("data:image/svg+xml;utf8,");
--mk-ico-video: url("data:image/svg+xml;utf8,");
--mk-ico-thread: url("data:image/svg+xml;utf8,");
--mk-ico-menu: url("data:image/svg+xml;utf8,");
--mk-ico-chat: url("data:image/svg+xml;utf8,");
--mk-ico-mic: url("data:image/svg+xml;utf8,");
--mk-ico-mic-off: url("data:image/svg+xml;utf8,");
--mk-ico-headphones:url("data:image/svg+xml;utf8,");
--mk-ico-plus: url("data:image/svg+xml;utf8,");
--mk-ico-smile: url("data:image/svg+xml;utf8,");
--mk-ico-share: url("data:image/svg+xml;utf8,");
--mk-ico-files: url("data:image/svg+xml;utf8,");
}
/* ============================================================
Responsive: collapse sidebar on narrow viewports; bigger touch
targets; lift the entrance tilt so the mockup reads well in
the single-column hero stack.
============================================================ */
@media (max-width: 880px) {
.mock-ui { transform: none; }
/* Mobile: stack body column-wise; sidebar becomes a dropdown. */
.mock-ui-body { flex-direction: column; }
.mock-views-wrap { flex: 1; }
/* Show the toggle button, hide the sidebar by default. */
.mk-sidebar-toggle { display: flex; }
.mk-sidebar {
display: none;
position: absolute;
top: 100%;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 20;
width: 100%;
max-height: 360px;
background: var(--mk-bg-deep);
border: 1px solid var(--mk-border);
border-top: none;
box-shadow: var(--mk-shadow);
padding: 12px 10px;
}
.mk-sidebar.is-open { display: block; }
.mock-view { min-height: 380px; }
.mock-theme-dot { width: 18px; height: 18px; }
.mk-call-btn { width: 44px; height: 44px; }
/* Mobile conference: one main feed + a small self-view PiP in the bottom-right
corner (like Zoom/Meet/WhatsApp video calls). */
.mk-conf-grid {
display: block;
position: relative;
max-width: none;
width: 100%;
height: 100%;
}
.mk-conf-grid .mk-tile:first-child {
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.mk-conf-grid .mk-tile:last-child {
position: absolute;
bottom: 12px;
inset-inline-end: 12px;
width: 84px;
aspect-ratio: 3 / 4;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
border: 1.5px solid var(--mk-border);
z-index: 2;
}
.mk-conf-grid .mk-tile:last-child .mk-tile-avatar { width: 40px; height: 40px; font-size: 16px; }
.mk-conf-grid .mk-tile:last-child .mk-tile-name { font-size: 10px; }
.mk-screen-participants { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
.mock-ui,
.mock-ui:hover { transform: none; }
.mk-typing span:not(.mk-typing-label) { animation: none; }
}
/* ==========================================================================
Section: Problem / Solution
========================================================================== */
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
@media (max-width: 760px) {
.split-grid { grid-template-columns: 1fr; }
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
position: relative;
}
.feature-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.feature-card .num {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--amber);
letter-spacing: 0.05em;
margin-bottom: 16px;
display: block;
}
.feature-card h3 {
font-size: 18px;
margin-bottom: 10px;
}
.feature-card p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.7;
}
.feature-card .icon {
width: 36px; height: 36px;
background: var(--cyan-soft);
border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
border-radius: var(--radius);
display: grid; place-items: center;
color: var(--cyan);
margin-bottom: 20px;
}
.feature-card .icon.amber {
background: var(--amber-soft);
border-color: color-mix(in srgb, var(--amber) 30%, transparent);
color: var(--amber);
}
/* ==========================================================================
Architecture diagram
========================================================================== */
.arch-strip {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 48px 32px;
position: relative;
overflow: hidden;
}
.arch-diagram {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 16px;
align-items: center;
margin-top: 32px;
}
.arch-node {
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 16px;
text-align: center;
font-size: 13px;
position: relative;
}
.arch-node .label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.arch-node .value { font-weight: 700; }
.arch-arrow {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
position: relative;
}
.arch-arrow::after {
content: "";
position: absolute;
inset-inline-end: -1px;
top: -3px;
border: 3px solid transparent;
border-inline-start-color: var(--cyan);
}
@media (max-width: 880px) {
.arch-diagram {
grid-template-columns: 1fr;
gap: 12px;
}
.arch-arrow { display: none; }
}
/* ==========================================================================
Timeline (3-5 day onboarding)
========================================================================== */
.timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
position: relative;
}
.timeline-step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
position: relative;
}
.timeline-step .day {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--cyan);
margin-bottom: 8px;
}
.timeline-step h4 {
font-size: 16px;
margin-bottom: 8px;
}
.timeline-step p {
color: var(--text-muted);
font-size: 13px;
line-height: 1.7;
}
/* ==========================================================================
Pricing — two plans (Gapim enterprise + team)
========================================================================== */
.pricing-card {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
padding: 48px 32px;
text-align: center;
max-width: 640px;
margin-inline: auto;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--amber), var(--cyan));
opacity: 0.15;
z-index: -1;
filter: blur(40px);
}
.pricing-card .price,
.plan-card .price {
font-size: clamp(32px, 4.5vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
margin: 16px 0 8px;
}
.pricing-card .price small,
.plan-card .price small {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
margin-inline-start: 6px;
}
.pricing-card .negotiable {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 24px;
}
.plans-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 960px;
margin-inline: auto;
align-items: stretch;
}
@media (max-width: 820px) {
.plans-grid { grid-template-columns: 1fr; }
}
.plan-card {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
padding: clamp(28px, 4vw, 40px);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.plan-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--amber), var(--cyan));
opacity: 0.10;
z-index: 0;
filter: blur(40px);
pointer-events: none;
}
.plan-card > * { position: relative; z-index: 1; }
.plan-featured {
border-color: rgba(229, 169, 59, 0.45);
box-shadow: 0 0 0 1px rgba(229, 169, 59, 0.15), 0 24px 60px -30px rgba(229, 169, 59, 0.35);
}
.plan-badge {
display: inline-block;
align-self: flex-start;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: #0B0C10;
background: linear-gradient(135deg, var(--amber), #F5D67B);
border-radius: 999px;
padding: 6px 14px;
margin-bottom: 8px;
}
.plan-badge-muted {
background: var(--surface-3);
color: var(--text);
border: 1px solid var(--border-strong);
}
.plan-card h3 {
font-size: clamp(22px, 3vw, 28px);
margin: 4px 0 0;
}
.plan-sub {
color: var(--text-muted);
font-size: 14px;
line-height: 1.8;
margin: 0;
}
.plan-price { margin: 12px 0 4px; }
.plan-old {
display: block;
color: var(--text-dim);
text-decoration: line-through;
font-size: 18px;
font-weight: 700;
}
.plan-old small {
font-size: 12px;
font-weight: 500;
}
.plan-off {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--amber);
background: var(--amber-soft);
border: 1px solid rgba(229, 169, 59, 0.30);
border-radius: 999px;
padding: 4px 12px;
margin-top: 8px;
}
.plan-list {
list-style: none;
padding: 0;
margin: 16px 0 8px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
line-height: 1.8;
color: var(--text);
}
.plan-list li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.plan-list li::before {
content: "✓";
color: var(--cyan);
font-weight: 800;
flex-shrink: 0;
margin-top: 2px;
}
.plan-note {
color: var(--text-muted);
font-size: 13px;
line-height: 1.8;
margin: 4px 0 16px;
padding-top: 12px;
border-top: 1px dashed var(--border-strong);
}
.plan-card .btn { margin-top: auto; }
/* ==========================================================================
Forms
========================================================================== */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
.form-grid { grid-template-columns: 1fr; }
}
/* Simplified single-column form — used for demo-request forms.
Generous spacing, subtle labels, large touch targets, prominent CTA. */
.form-stack {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 440px;
margin: 0 auto;
}
.form-stack .field input,
.form-stack .field select,
.form-stack .field textarea {
padding: 14px 16px;
font-size: 15px;
}
.form-stack .field label {
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.01em;
}
.form-stack .form-cta {
width: 100%;
margin-top: 8px;
padding: 16px 24px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.field label .req { color: var(--amber); }
.field label .opt { color: var(--text-dim); font-size: 11px; font-weight: 400; margin-inline-start: 4px; }
.field input,
.field select,
.field textarea {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
font-size: 14px;
color: var(--text);
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
font-family: inherit;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--amber);
background: var(--surface);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-full { grid-column: 1 / -1; }
.form-notice {
padding: 14px 16px;
border-radius: var(--radius);
font-size: 13px;
margin-top: 16px;
}
.form-notice.success {
background: rgba(52, 211, 153, 0.08);
border: 1px solid rgba(52, 211, 153, 0.30);
color: var(--success);
}
.form-notice.error {
background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.30);
color: var(--error);
}
/* ==========================================================================
FAQ — accordion with: pill-icon that fills on open, left accent bar
that slides in, content that fades + lifts as the panel opens, and
reverse animation when closing (no snap). The grid-template-rows
trick is paired with a padding nudge and an entry transition on the
inner wrapper so both directions animate cleanly across browsers.
========================================================================== */
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 24px 16px 24px 16px;
background: transparent;
border: 0;
color: var(--text);
font-size: 17px;
font-weight: 700;
text-align: start;
cursor: pointer;
position: relative;
list-style: none; /* hide marker if present */
transition:
color var(--dur) var(--ease),
padding-inline-start var(--dur-slow) var(--ease);
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger:hover { color: var(--amber); }
.faq-trigger[aria-expanded="true"] { padding-inline-start: 28px; }
/* Left accent bar — height grows from 0 when the row opens. */
.faq-trigger::before {
content: "";
position: absolute;
inset-inline-start: 8px;
top: 50%;
width: 3px;
height: 0;
background: var(--amber);
border-radius: 2px;
transform: translateY(-50%);
transition: height var(--dur-slow) var(--ease);
}
.faq-trigger[aria-expanded="true"]::before { height: 36px; }
/* Pill icon — circle outline that fills with amber when open. */
.faq-trigger .icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: var(--text-muted);
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 50%;
transition:
transform var(--dur-slow) var(--ease-spring),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.faq-trigger:hover .icon {
color: var(--amber);
border-color: var(--amber);
}
.faq-trigger[aria-expanded="true"] .icon {
transform: rotate(45deg);
color: #000;
border-color: var(--amber);
background: var(--amber);
}
/* Panel — grid-template-rows is animated in modern browsers (Chrome 117+,
Firefox 121+, Safari 17.4+). For older browsers the content still
shows/hides correctly, just without smooth height. */
.faq-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq-panel > div {
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
transition:
opacity var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.faq-panel[data-open="true"] {
grid-template-rows: 1fr;
}
.faq-panel[data-open="true"] > div {
opacity: 1;
transform: translateY(0);
transition-delay: 90ms; /* waits for the height to crack open a bit */
}
.faq-panel p {
color: var(--text-muted);
line-height: 1.8;
padding: 0 16px 28px;
max-width: 70ch;
}
/* ==========================================================================
Floating Telegram bubble
========================================================================== */
.tg-bubble {
position: fixed;
bottom: 24px;
inset-inline-start: 24px;
z-index: 60;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #2AABEE, #229ED9);
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 8px 24px rgba(42, 171, 238, 0.35);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tg-bubble:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 32px rgba(42, 171, 238, 0.50);
}
.tg-bubble svg { width: 28px; height: 28px; }
/* ==========================================================================
Footer
========================================================================== */
.footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding-block: 64px 32px;
margin-top: 80px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
@media (max-width: 760px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-col h5 {
font-size: 13px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 16px;
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.footer-col a {
color: var(--text-muted);
font-size: 14px;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 12px;
color: var(--text-dim);
flex-wrap: wrap;
}
/* ==========================================================================
Animations
========================================================================== */
/* Scroll reveal — applied via main.js IntersectionObserver. The
--reveal-delay custom property is set by JS per-element to create
staggered animations inside grids (.feature-grid, .timeline, etc.).
Filter (blur) and opacity/transform animate at different speeds so the
blur clears below the perception threshold (~150ms) while the eye
reads the slower fade + lift as the actual entrance. */
.reveal {
opacity: 0;
transform: translateY(20px);
filter: blur(4px);
transition:
opacity 600ms var(--ease-out),
transform 600ms var(--ease-out),
filter 160ms var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform, filter;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Initial-load hero entrance — fires once per page-load via [data-loaded]
on . The inline init script in each HTML file sets that attribute
synchronously, so the animation never flashes an unstyled state.
Each child gets two stacked animations: rise (opacity + translate, 700ms)
plus rise-blur (filter, 160ms). The blur keyframes resolve so fast the
eye reads only the fade + lift. The blur keyframe runs at delay 0 so the
element is already crisp by the time opacity starts ticking up. */
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes rise-blur {
from { filter: blur(6px); }
to { filter: blur(0); }
}
@keyframes rise-mock {
/* Compose the entrance translateY with the resting tilt so the
transform property is consistent end-to-end and the animation's
`both` fill mode doesn't overwrite the tilt after it finishes. */
from { opacity: 0; transform: translateY(26px) rotateY(calc(-2deg + var(--tilt-y))) rotateX(calc(1deg + var(--tilt-x))); }
to { opacity: 1; transform: translateY(0) rotateY(calc(-2deg + var(--tilt-y))) rotateX(calc(1deg + var(--tilt-x))); }
}
@keyframes rise-mock-blur {
from { filter: blur(8px); }
to { filter: blur(0); }
}
html[data-loaded] .hero-text > * {
animation:
rise 700ms var(--ease-out) both,
rise-blur 160ms var(--ease-out) both;
}
html[data-loaded] .hero-text > *:nth-child(1) { animation-delay: 60ms, 0ms; }
html[data-loaded] .hero-text > *:nth-child(2) { animation-delay: 180ms, 0ms; }
html[data-loaded] .hero-text > *:nth-child(3) { animation-delay: 340ms, 0ms; }
html[data-loaded] .hero-text > *:nth-child(4) { animation-delay: 500ms, 0ms; }
html[data-loaded] .hero-text > *:nth-child(5) { animation-delay: 640ms, 0ms; }
html[data-loaded] .mock-ui {
animation:
rise-mock 900ms 240ms var(--ease-out) both,
rise-mock-blur 160ms 0ms var(--ease-out) both;
will-change: transform;
}
/* ---- Alternating side slide-in for 9-card feature stacks ----
Add `.alt-slides` to a wrapper (e.g. `.feature-grid` or any container)
whose direct children are `.feature-card.reveal` — cards fly in from
the left on odd children and from the right on even children, instead
of straight up. The opacity ramp + fast blur from the base .reveal
are preserved. */
.alt-slides > .feature-card.reveal:nth-child(odd) { transform: translateX(-36px); }
.alt-slides > .feature-card.reveal:nth-child(even) { transform: translateX( 36px); }
.alt-slides > .feature-card.reveal.is-visible { transform: translateX(0); }
/* Hover lift must still apply — re-declare with higher specificity so the
alt-slides is-visible rule doesn't cancel the .feature-card:hover lift. */
.alt-slides > .feature-card.reveal.is-visible:hover { transform: translateY(-2px); }
/* Card hover depth — used everywhere a card lifts on hover. The existing
rules already had translateY(-2px); we add a layered shadow + tighter
border so the lift reads. */
.feature-card:hover,
.timeline-step:hover,
.arch-strip:hover,
.card:hover {
box-shadow: var(--shadow-lg);
border-color: var(--border-strong);
}
/* Subtle CTA button sheen — a soft glow that strengthens on hover. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.35), transparent 60%);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }
:root[data-theme="light"] .btn-primary { color: #FFFFFF; }
:root[data-theme="light"] .btn-primary::after {
background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.22), transparent 60%);
}
/* Floating Telegram bubble — gentle breathing while at rest + speed it up on hover. */
@keyframes tg-breathe {
0%, 100% { box-shadow: 0 8px 24px rgba(42, 171, 238, 0.35), 0 0 0 0 rgba(42, 171, 238, 0.20); }
50% { box-shadow: 0 8px 24px rgba(42, 171, 238, 0.35), 0 0 0 10px rgba(42, 171, 238, 0); }
}
.tg-bubble { animation: tg-breathe 3.2s ease-in-out infinite; }
.tg-bubble:hover { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .tg-bubble { animation: none; } }
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--cyan-glow); }
50% { box-shadow: 0 0 0 8px transparent; }
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Reset everything reveal/alt-slides sets — covers both the simple .reveal
path AND the alt-slides 9-card path so cards never sit off-screen. */
.reveal,
.alt-slides > .feature-card.reveal,
.alt-slides > .feature-card.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.mock-ui, .mock-ui:hover { transform: none; }
html[data-loaded] .hero-text > *,
html[data-loaded] .mock-ui { animation: none; opacity: 1; transform: none; filter: none; }
}
/* ==========================================================================
Closing Machine Enhancements: Comparison Table, Emotional Pillars, Guarantees
========================================================================== */
.comp-table-wrap {
width: 100%;
overflow-x: auto;
border-radius: var(--radius-xl);
border: 1px solid var(--border-strong);
background: var(--surface);
box-shadow: var(--shadow-md);
margin-top: 32px;
-webkit-overflow-scrolling: touch;
}
.comp-table {
width: 100%;
border-collapse: collapse;
text-align: right;
font-size: 14px;
min-width: 720px;
}
.comp-table th,
.comp-table td {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.comp-table th {
background: var(--surface-2);
color: var(--text);
font-weight: 700;
font-size: 14px;
}
.comp-table th.col-gapim,
.comp-table td.col-gapim {
background: rgba(229, 169, 59, 0.08);
border-inline: 1.5px solid rgba(229, 169, 59, 0.35);
font-weight: 600;
}
.comp-table th.col-gapim {
background: rgba(229, 169, 59, 0.16);
color: var(--amber);
font-size: 15px;
}
.comp-table tr:last-child td {
border-bottom: none;
}
.comp-check {
display: inline-flex;
align-items: center;
gap: 6px;
color: #10B981;
font-weight: 700;
}
.comp-cross {
display: inline-flex;
align-items: center;
gap: 6px;
color: #EF4444;
font-weight: 500;
}
.comp-warn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #F59E0B;
font-weight: 500;
}
.pillar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
@media (max-width: 820px) {
.pillar-grid { grid-template-columns: 1fr; }
}
.pillar-card {
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
padding: 32px 28px;
position: relative;
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-3px);
border-color: var(--amber);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.pillar-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
width: fit-content;
margin-bottom: 16px;
font-family: var(--font-mono);
}
.pillar-badge-amber {
background: var(--amber-soft);
color: var(--amber);
border: 1px solid rgba(229, 169, 59, 0.25);
}
.pillar-badge-cyan {
background: var(--cyan-soft);
color: var(--cyan);
border: 1px solid rgba(56, 189, 248, 0.25);
}
.pillar-badge-emerald {
background: rgba(16, 185, 129, 0.12);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.25);
}
.pillar-badge-purple {
background: rgba(168, 85, 247, 0.12);
color: #C084FC;
border: 1px solid rgba(168, 85, 247, 0.25);
}
.mock-hint {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(229, 169, 59, 0.14);
border: 1px solid rgba(229, 169, 59, 0.35);
border-radius: var(--radius-full);
color: var(--amber);
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.guarantee-box {
background: linear-gradient(135deg, rgba(229, 169, 59, 0.08), rgba(56, 189, 248, 0.05));
border: 1px solid rgba(229, 169, 59, 0.3);
border-radius: var(--radius-xl);
padding: 28px 32px;
display: flex;
align-items: center;
gap: 24px;
margin-top: 32px;
}
@media (max-width: 680px) {
.guarantee-box { flex-direction: column; text-align: center; }
}
.comp-cta-card {
margin-top: 36px;
background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
padding: 32px 36px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.comp-cta-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.08), transparent 50%),
radial-gradient(circle at 90% 80%, rgba(229, 169, 59, 0.08), transparent 50%);
pointer-events: none;
}
.comp-cta-content {
flex: 1;
min-width: 0;
}
.comp-cta-content h3 {
font-size: clamp(19px, 2.2vw, 23px);
color: var(--text);
margin-top: 6px;
margin-bottom: 8px;
font-weight: 800;
}
.comp-cta-content p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.7;
margin: 0;
max-width: 58ch;
}
.comp-cta-actions {
display: flex;
gap: 12px;
align-items: center;
flex-shrink: 0;
}
@media (max-width: 860px) {
.comp-cta-card {
flex-direction: column;
text-align: center;
padding: 28px 20px;
gap: 20px;
}
.comp-cta-content p {
margin-inline: auto;
}
.comp-cta-actions {
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
}
/* ==========================================================================
Print
========================================================================== */
@media print {
body { background: white; color: black; }
.nav, .tg-bubble, .no-print, .hero::before, .hero::after { display: none !important; }
}