/* ============================================================
PmaControl — Design System
Ultra-professional dark-first interface
============================================================ */
/* ── Fonts ──────────────────────────────────────────────── */
/* Google Fonts loaded via in layout for non-blocking render */
/* ── Design Tokens ──────────────────────────────────────── */
:root {
/* Core palette */
--c-bg: #05080f;
--c-bg-2: #080c16;
--c-surface: #0d1424;
--c-surface-2: #111929;
--c-surface-3: #16202e;
--c-border: rgba(255, 255, 255, 0.07);
--c-border-hi: rgba(255, 255, 255, 0.14);
/* Brand */
--c-blue: #3b82f6;
--c-blue-deep: #2563eb;
--c-blue-soft: rgba(59, 130, 246, 0.14);
--c-blue-glow: rgba(59, 130, 246, 0.35);
--c-teal: #06d6a0;
--c-teal-soft: rgba(6, 214, 160, 0.12);
/* Text */
--c-text: #e8edf8;
--c-text-2: rgba(232, 237, 248, 0.7);
--c-text-3: rgba(232, 237, 248, 0.45);
/* Gradients */
--g-hero: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(59,130,246,0.22) 0%, transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 5%, rgba(6,214,160,0.12) 0%, transparent 45%),
radial-gradient(ellipse 50% 50% at 50% 100%, rgba(37,99,235,0.08) 0%, transparent 60%),
linear-gradient(170deg, #060a14 0%, #05080f 100%);
/* Shadows */
--s-card: 0 4px 24px rgba(0,0,0,0.4);
--s-lifted: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
--s-blue: 0 8px 32px rgba(59,130,246,0.25);
/* Spacing */
--shell-max: 1200px;
--shell-pad: clamp(1.25rem, 4vw, 5rem);
--section-v: clamp(1.75rem, 3vw, 3rem);
/* Typography */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* Stack VS Code / Darcula : JetBrains Mono d'abord, puis fallback type VS Code (Cascadia/Consolas/Menlo). Ligatures désactivées plus bas. */
--font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
/* Radius */
--r-sm: 0.5rem;
--r-md: 0.875rem;
--r-lg: 1.25rem;
--r-xl: 1.75rem;
/* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
}
/* ── Code/Mono : désactive les ligatures programming (sinon !==, ===, =>, etc. sont rendus comme un seul glyphe par JetBrains Mono / Fira Code) ── */
code, pre, kbd, samp, tt {
font-variant-ligatures: none;
font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}
/* ── Light Theme Override ───────────────────────────────── */
[data-theme="light"] {
--c-bg: #f0f4fc;
--c-bg-2: #eaf0fb;
--c-surface: #ffffff;
--c-surface-2: #f5f8ff;
--c-surface-3: #edf2fd;
--c-border: rgba(15, 30, 60, 0.1);
--c-border-hi: rgba(15, 30, 60, 0.18);
--c-text: #0f1626;
--c-text-2: rgba(15, 22, 38, 0.65);
--c-text-3: rgba(15, 22, 38, 0.42);
--g-hero: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(59,130,246,0.12) 0%, transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 5%, rgba(6,214,160,0.08) 0%, transparent 45%),
linear-gradient(170deg, #eef3ff 0%, #f4f7ff 100%);
--s-card: 0 2px 16px rgba(15,30,60,0.1);
--s-lifted: 0 6px 30px rgba(15,30,60,0.15), 0 0 0 1px rgba(15,30,60,0.07);
--s-blue: 0 6px 24px rgba(59,130,246,0.2);
}
/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Scrollbar — dark theme ────────────────────────────────── */
* {
scrollbar-width: thin;
scrollbar-color: var(--c-border-hi) transparent;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--c-border-hi);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--c-text-3);
}
:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* ── Base ───────────────────────────────────────────────── */
body.site-body {
font-family: var(--font-body);
background: var(--c-bg);
color: var(--c-text);
line-height: 1.65;
min-height: 100vh;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* ── Language display (legacy, kept for safety) ────────── */
/* ── Layout containers ──────────────────────────────────── */
.site-frame {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.landing-shell {
max-width: calc(var(--shell-max) + 2 * var(--shell-pad));
margin: 0 auto;
padding: 0 var(--shell-pad);
width: 100%;
}
/* ── Header / Navigation ────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 100;
padding: 0 var(--shell-pad);
border-bottom: 3px solid var(--c-blue-deep);
box-shadow: 0 3px 12px rgba(37, 99, 235, 0.55),
0 6px 20px rgba(0, 0, 0, 0.45);
transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
box-shadow: 0 3px 14px rgba(37, 99, 235, 0.65),
0 10px 28px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .site-header {
box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4),
0 6px 20px rgba(15, 30, 60, 0.18);
}
[data-theme="light"] .site-header.is-scrolled {
box-shadow: 0 3px 14px rgba(37, 99, 235, 0.5),
0 10px 28px rgba(15, 30, 60, 0.25);
}
/* Painted via ::before so the header itself does not create a
containing block for position:fixed descendants. The mobile drawer
(.primary-nav) lives inside .site-header in markup but must size
against the viewport, not against the 68px header strip — moving
the blur off the header's own box is what allows that. */
.site-header::before {
content: '';
position: absolute;
inset: 0;
background: rgba(5, 8, 15, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
transition: background 0.3s var(--ease);
pointer-events: none;
z-index: -1;
}
[data-theme="light"] .site-header::before {
background: rgba(240, 244, 252, 0.75);
}
.site-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 68px;
max-width: var(--shell-max);
margin: 0 auto;
position: relative;
}
/* Brand */
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--c-text);
flex-shrink: 0;
}
.brand img {
width: 40px;
height: 40px;
filter: drop-shadow(0 0 8px rgba(59,130,246,0.5));
}
.brand-name {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
color: var(--c-text);
}
/* Nav links */
.primary-nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.primary-nav ul {
display: flex;
align-items: center;
gap: 0.1rem;
list-style: none;
}
.primary-nav > ul > li > button {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
outline: none;
cursor: pointer;
font-family: inherit;
color: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.primary-nav > ul > li > a,
.primary-nav > ul > li > button {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.75rem;
border-radius: var(--r-sm);
text-decoration: none;
color: var(--c-text-2);
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
transition: color 0.2s, background 0.2s;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > button:hover,
.primary-nav > ul > li.is-active > a,
.primary-nav > ul > li.is-active > button {
color: var(--c-text);
background: rgba(255,255,255,0.06);
}
[data-theme="light"] .primary-nav > ul > li > a:hover,
[data-theme="light"] .primary-nav > ul > li > button:hover,
[data-theme="light"] .primary-nav > ul > li.is-active > a,
[data-theme="light"] .primary-nav > ul > li.is-active > button {
background: rgba(15,30,60,0.06);
}
/* CTA button in nav (Book a demo) */
.primary-nav > ul > li > a.btn-primary {
color: #fff;
background: var(--c-blue);
box-shadow: var(--s-blue);
padding: .45rem 1.1rem;
border-radius: 4px;
font-weight: 600;
transition: color .2s, background .2s, box-shadow .2s;
}
.primary-nav > ul > li > a.btn-primary:hover {
color: #fff;
background: var(--c-blue-deep);
box-shadow: 0 12px 40px rgba(59,130,246,.4);
transform: none;
}
/* Dropdown toggle arrow */
.primary-nav li.has-children > a,
.primary-nav li.has-children > button {
cursor: pointer;
user-select: none;
}
.primary-nav li.has-children > a::after,
.primary-nav li.has-children > button::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: 0.55;
transition: transform 0.25s var(--ease), opacity 0.25s;
margin-left: 0.35rem;
flex-shrink: 0;
}
.primary-nav li.has-children.is-open > a::after,
.primary-nav li.has-children.is-open > button::after {
transform: rotate(-135deg) translateY(-2px);
opacity: 0.9;
}
/* Dropdown panel */
.primary-nav li { position: relative; }
.primary-nav > ul > li.has-mega { position: static; }
.submenu {
position: absolute;
top: calc(100% + 10px);
left: 0;
transform: translateY(-8px);
min-width: 220px;
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-lg);
box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
padding: 0.6rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
pointer-events: none;
list-style: none;
z-index: 200;
}
/* triangle pointer */
.submenu::before {
content: '';
position: absolute;
top: -5px;
left: 1.25rem;
transform: rotate(45deg);
width: 10px;
height: 10px;
background: var(--c-surface);
border-left: 1px solid var(--c-border-hi);
border-top: 1px solid var(--c-border-hi);
}
.primary-nav li.has-children.is-open .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
pointer-events: auto;
}
.submenu li a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1rem;
border-radius: var(--r-md);
color: var(--c-text-2);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.submenu li a::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-blue);
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.15s, box-shadow 0.15s;
}
.submenu li a:hover,
.submenu li.is-active a {
background: var(--c-blue-soft);
color: var(--c-text);
}
.submenu li a:hover::before,
.submenu li.is-active a::before {
opacity: 1;
box-shadow: 0 0 8px var(--c-blue);
}
/* Nav actions */
.nav-actions {
display: flex;
align-items: center;
gap: 0.6rem;
margin-left: 0.5rem;
}
/* Language switch */
/* ── Language dropdown ─────────────────────────────────────── */
.lang-dropdown {
position: relative;
}
.lang-dropdown__trigger {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .7rem;
border-radius: 4px;
border: 1px solid var(--c-border-hi);
background: var(--c-surface-2);
color: var(--c-text-2);
font-size: .78rem;
font-weight: 600;
font-family: inherit;
letter-spacing: .06em;
cursor: pointer;
transition: border-color .15s, color .15s;
-webkit-appearance: none;
appearance: none;
}
.lang-dropdown__trigger:hover {
border-color: var(--c-blue);
color: var(--c-text);
}
.lang-dropdown__trigger svg {
transition: transform .2s;
}
.lang-dropdown.is-open .lang-dropdown__trigger svg {
transform: rotate(180deg);
}
.lang-dropdown__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 140px;
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s, transform .15s, visibility 0s .15s;
z-index: 300;
overflow: hidden;
}
.lang-dropdown.is-open .lang-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .15s, transform .15s;
}
.lang-dropdown__item {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .75rem;
text-decoration: none;
color: var(--c-text-2);
font-size: .82rem;
transition: background .1s;
}
.lang-dropdown__item:hover {
background: rgba(255,255,255,.06);
}
.lang-dropdown__item--active {
color: var(--c-blue);
background: rgba(59,130,246,.08);
}
.lang-dropdown__code {
font-weight: 700;
font-size: .75rem;
letter-spacing: .04em;
min-width: 22px;
}
.lang-dropdown__flag {
font-size: 1rem;
line-height: 1;
}
.lang-dropdown__name {
color: var(--c-text-3);
font-size: .78rem;
}
/* Mobile toggle */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
z-index: 200;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--c-text);
border-radius: 2px;
transition: transform 0.3s var(--ease), opacity 0.3s;
transform-origin: center;
}
/* Mobile-only nav helpers (rendered always, hidden on desktop). */
.nav-item-icon,
.nav-item-chevron,
.nav-sep,
.nav-mobile-cta { display: none; }
/* ── Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.5rem;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
white-space: nowrap;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: var(--c-blue);
color: #fff;
box-shadow: var(--s-blue);
}
.btn-primary:hover {
background: var(--c-blue-deep);
box-shadow: 0 12px 40px rgba(59,130,246,0.4);
}
.btn-secondary {
background: #000;
border: 1px solid var(--c-blue-deep);
color: #fff;
}
.btn-secondary:hover {
background: #111;
border-color: var(--c-blue);
}
[data-theme="light"] .btn-secondary:hover {
background: rgba(15,30,60,0.05);
}
.btn-ghost {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.35);
color: var(--c-blue);
padding: 0.45rem 1.1rem;
font-weight: 600;
font-size: 0.82rem;
}
.btn-ghost:hover {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.55);
color: var(--c-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.text-link {
color: var(--c-blue);
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: gap 0.2s;
}
.text-link::after { content: '→'; }
.text-link:hover { gap: 0.6rem; }
/* ── Main frame ──────────────────────────────────────────── */
.site-main-frame {
flex: 1;
margin-top: 68px;
}
.nav-aligned-container {
width: 100%;
padding-bottom: clamp(3rem, 6vw, 6rem);
}
/* ── Hero ────────────────────────────────────────────────── */
.site-hero {
position: relative;
background: var(--g-hero);
overflow: hidden;
padding-top: clamp(4rem, 8vw, 7rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Animated grid overlay */
.site-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
animation: grid-scroll 30s linear infinite;
}
/* Blue glow blob */
.site-hero::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
top: -150px;
left: -100px;
pointer-events: none;
animation: blob-pulse 8s ease-in-out infinite;
}
@keyframes grid-scroll {
to { transform: translate(60px, 60px); }
}
@keyframes blob-pulse {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.15) translate(30px, 20px); }
}
.hero-grid--corporate {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 420px;
gap: 3rem;
align-items: center;
max-width: var(--shell-max);
margin: 0 auto;
}
/* Hero copy */
.hero-copy { max-width: 640px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 0.5rem;
color: var(--c-teal);
padding: 0.35rem 0.85rem;
border: 1px solid rgba(6,214,160,0.25);
border-radius: 999px;
background: rgba(6,214,160,0.07);
margin-bottom: 1.5rem;
}
.eyebrow-badge {
display: inline-flex;
align-items: center;
justify-content:center;
min-width: 1.4em;
padding: .1rem .4rem;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: 0;
background: var(--c-blue);
color: #fff;
line-height: 1.3;
}
.hero-copy h1 {
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--c-text);
margin-bottom: 1.25rem;
}
.hero-copy h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-copy .lead {
font-size: 1.05rem;
color: var(--c-text-2);
line-height: 1.7;
margin-bottom: 2rem;
max-width: 540px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
align-items: center;
margin-bottom: 2rem;
}
.hero-points {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.hero-points li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
font-size: 0.9rem;
color: var(--c-text-2);
line-height: 1.5;
}
.hero-points li::before {
content: '';
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-teal);
margin-top: 0.45rem;
box-shadow: 0 0 10px rgba(6,214,160,0.6);
}
/* Hero aside (right column) */
.hero-aside {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-panel {
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-xl);
padding: 1.5rem;
box-shadow: var(--s-card);
transition: box-shadow 0.3s;
}
.hero-panel:hover { box-shadow: var(--s-lifted); }
.hero-panel--dark {
background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(6,214,160,0.06) 100%);
border-color: rgba(59,130,246,0.2);
}
.section-kicker {
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--c-blue);
margin-bottom: 0.85rem;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 0.25rem;
}
.metric-grid article {
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 1rem 0.75rem;
text-align: center;
}
.metric-grid strong {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: var(--c-blue);
line-height: 1;
margin-bottom: 0.35rem;
}
.metric-grid span,
.metric-grid .lang {
font-size: 0.72rem;
color: var(--c-text-3);
line-height: 1.3;
}
.signal-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-top: 0.25rem;
margin-bottom: 1.25rem;
}
.signal-list li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.85rem;
color: var(--c-text-2);
line-height: 1.5;
}
.signal-list li::before {
content: '✓';
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 700;
color: var(--c-teal);
margin-top: 0.15rem;
background: var(--c-teal-soft);
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
}
.contact-strip {
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--c-border);
margin-top: 0.5rem;
}
.contact-strip span {
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 600;
color: var(--c-text);
}
.contact-strip small {
font-size: 0.72rem;
color: var(--c-text-3);
}
/* ── Sections ────────────────────────────────────────────── */
.landing-section {
padding-top: var(--section-v);
padding-bottom: var(--section-v);
}
.landing-section--alt {
background: var(--c-bg-2);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.landing-section--cta {
background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(59,130,246,0.1) 0%, transparent 70%),
var(--c-bg-2);
border-top: 1px solid var(--c-border);
}
.section-heading {
text-align: center;
max-width: 680px;
margin: 0 auto var(--section-v);
}
.section-heading .section-kicker { margin-bottom: 0.85rem; }
.section-heading h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
}
.section-heading--split {
text-align: left;
margin: 0 0 var(--section-v);
}
/* ── Value cards ─────────────────────────────────────────── */
.value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
max-width: var(--shell-max);
margin: 0 auto;
}
.value-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--c-blue), var(--c-teal));
opacity: 0;
transition: opacity 0.3s;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: var(--s-lifted);
border-color: var(--c-border-hi);
}
.value-card:hover::before { opacity: 1; }
.value-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.65rem;
color: var(--c-text);
}
.value-card p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.65;
}
/* ── Capability layout ───────────────────────────────────── */
.capability-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
max-width: var(--shell-max);
margin: 0 auto;
}
.capability-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 1.75rem 2rem;
transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
position: relative;
}
.capability-card--wide {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--c-surface) 60%, rgba(59,130,246,0.06) 100%);
border-color: rgba(59,130,246,0.2);
}
.capability-card:hover {
transform: translateY(-3px);
box-shadow: var(--s-card);
border-color: var(--c-border-hi);
}
.capability-card h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.6rem;
color: var(--c-text);
display: flex;
align-items: center;
gap: 0.6rem;
}
.capability-card--wide h3 { color: var(--c-blue); }
.capability-card p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.65;
}
/* ── Pricing grid & cards ────────────────────────────────── */
.landing-section--flush { padding-top: 0; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
align-items: stretch;
margin-top: 3rem;
}
.pricing-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
overflow: hidden;
cursor: pointer;
transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.pricing-card:hover {
border-color: rgba(59,130,246,0.45);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
/* Selected state */
.pricing-card--selected {
border-color: var(--c-blue) !important;
box-shadow: 0 0 0 2px var(--c-blue), 0 12px 40px rgba(59,130,246,0.18) !important;
background: linear-gradient(
160deg,
color-mix(in srgb, var(--c-blue) 10%, var(--c-surface)) 0%,
var(--c-surface) 60%
) !important;
transform: translateY(-6px) !important;
}
.pricing-card--selected .plan-price strong {
color: var(--c-blue);
}
/* Featured (teal) — default highlight */
.pricing-card--featured {
border-color: var(--c-teal);
box-shadow: 0 0 0 1px var(--c-teal), var(--s-lifted);
}
.pricing-card--featured:hover {
border-color: var(--c-teal);
box-shadow: 0 0 0 1px var(--c-teal), 0 8px 32px rgba(0,0,0,0.25);
}
.pricing-card--featured.pricing-card--selected {
border-color: var(--c-blue) !important;
box-shadow: 0 0 0 2px var(--c-blue), 0 12px 40px rgba(59,130,246,0.18) !important;
}
.plan-featured-badge {
position: absolute;
top: -1px; right: 1.5rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--c-teal);
color: #05080f;
padding: 0.3rem 0.75rem;
border-radius: 0 0 var(--r-md) var(--r-md);
}
.pricing-card__head {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.plan-badge {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-2);
background: color-mix(in srgb, var(--c-text) 8%, transparent);
border-radius: 999px;
padding: 0.25rem 0.7rem;
display: inline-flex;
width: fit-content;
}
.plan-badge--blue { color: var(--c-blue); background: var(--c-blue-soft); }
.plan-badge--teal { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 12%, transparent); }
.plan-badge--gold { color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, transparent); }
.plan-price {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.plan-price strong {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--c-text);
line-height: 1;
}
.plan-price strong small {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0;
color: var(--c-text-2);
}
.plan-price span {
font-size: 0.8rem;
color: var(--c-text-3);
}
.pricing-card__head > p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.6;
margin: 0;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1;
}
.plan-features li {
font-size: 0.875rem;
color: var(--c-text);
padding-left: 1.4rem;
position: relative;
line-height: 1.45;
}
.plan-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--c-teal);
font-weight: 700;
font-size: 0.8rem;
}
.plan-feature--inherit {
color: var(--c-text-2) !important;
font-style: italic;
}
.plan-feature--inherit::before {
content: '↑' !important;
color: var(--c-blue) !important;
}
.pricing-card__cta { margin-top: auto; }
.pricing-card__cta .btn { width: 100%; justify-content: center; }
.pricing-note {
font-size: 0.8rem;
color: var(--c-text-3);
text-align: center;
margin-top: 1.5rem;
}
/* ── Comparison table ─────────────────────────────────────── */
.pc-table-wrap {
overflow-x: auto;
border-radius: var(--r-xl);
border: 1px solid var(--c-border);
}
.pc-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.pc-table thead tr {
background: var(--c-surface);
border-bottom: 1px solid var(--c-border-hi);
}
.pc-table thead th {
padding: 1rem 1.25rem;
text-align: center;
font-weight: 700;
font-size: 0.8rem;
color: var(--c-text);
white-space: nowrap;
}
.pc-table thead .pc-col-feature {
text-align: left;
min-width: 240px;
}
.pc-col-highlight {
background: color-mix(in srgb, var(--c-teal) 5%, transparent);
}
.pc-table thead .pc-col-highlight {
color: var(--c-teal);
}
.pc-table tbody tr {
border-bottom: 1px solid var(--c-border);
transition: background 0.15s;
}
.pc-table tbody tr:last-child { border-bottom: none; }
.pc-table tbody tr:hover {
background: color-mix(in srgb, var(--c-text) 3%, transparent);
}
.pc-row-category td {
padding: 0.6rem 1.25rem;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-teal);
background: color-mix(in srgb, var(--c-teal) 5%, var(--c-surface));
}
.pc-feature-name {
padding: 0.7rem 1.25rem;
color: var(--c-text);
font-size: 0.875rem;
}
.pc-col-val {
padding: 0.7rem 1rem;
text-align: center;
font-size: 1rem;
}
.pc-yes { color: var(--c-teal); font-weight: 700; }
.pc-no { color: var(--c-text-3); }
/* ── Offer / Deployment cards ────────────────────────────── */
.offer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
max-width: var(--shell-max);
margin: 0 auto;
}
.offer-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 2.25rem 2rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
position: relative;
overflow: hidden;
transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.offer-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 160px;
background: radial-gradient(ellipse 100% 80% at 50% 120%, rgba(59,130,246,0.1) 0%, transparent 70%);
pointer-events: none;
}
.offer-card:hover {
transform: translateY(-5px);
box-shadow: var(--s-lifted);
border-color: rgba(59,130,246,0.3);
}
.offer-label {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--c-blue);
padding: 0.3rem 0.75rem;
background: var(--c-blue-soft);
border-radius: 999px;
display: inline-flex;
width: fit-content;
}
.offer-card h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--c-text);
}
.offer-card p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.65;
flex: 1;
}
/* ── CTA block ───────────────────────────────────────────── */
.cta-block {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: var(--shell-max);
margin: 0 auto;
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-xl);
padding: 3rem;
position: relative;
overflow: hidden;
}
.cta-block::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(59,130,246,0.08) 0%, transparent 60%);
pointer-events: none;
}
.cta-block > div:first-child { position: relative; z-index: 1; }
.cta-block > div:first-child .section-kicker { text-align: left; }
.cta-block h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.25;
max-width: 480px;
margin-top: 0.5rem;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
position: relative;
z-index: 1;
}
.direct-contact {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.direct-contact strong {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
}
.direct-contact span {
font-size: 0.78rem;
color: var(--c-text-3);
}
/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
border-top: 1px solid var(--c-border);
background: var(--c-bg-2);
}
.footer-inner {
max-width: var(--shell-max);
margin: 0 auto;
padding: 2.5rem var(--shell-pad);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem 3rem;
}
.site-footer strong {
display: block;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.footer-brand {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.02em;
color: var(--c-text);
}
.site-footer a {
color: var(--c-blue);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}
.site-footer a:hover { color: #60a5fa; }
.footer-contact {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.footer-contact a {
font-family: var(--font-mono);
font-size: 0.85rem;
}
.footer-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.footer-links a {
font-size: 0.8rem;
color: var(--c-text-3);
text-decoration: none;
}
.footer-links a:hover {
color: var(--c-text);
}
.footer-slogans {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.footer-slogans span,
.footer-slogans .lang {
font-size: 0.78rem;
color: var(--c-text-3);
font-style: italic;
}
/* ══════════════════════════════════════════════════════════
Inner pages — layout & components
══════════════════════════════════════════════════════════ */
/* ── Page hero (inner pages) ─────────────────────────────── */
.page-hero {
position: relative;
overflow: hidden;
background: var(--g-hero);
border-bottom: 1px solid var(--c-border);
padding-top: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(1rem, 2vw, 1.75rem);
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
animation: grid-scroll 30s linear infinite;
}
.page-hero > div {
position: relative;
z-index: 1;
width: min(var(--shell-max), calc(100% - 2 * var(--shell-pad)));
margin: 0 auto;
}
.page-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0.75rem 0 1rem;
}
.page-hero .lead {
font-size: 1rem;
color: var(--c-text-2);
line-height: 1.7;
max-width: 720px;
margin-bottom: 1.75rem;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
align-items: center;
}
.contact-pill {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.6rem 1.1rem;
border: 1px solid var(--c-border-hi);
border-radius: var(--r-md);
background: var(--c-surface);
font-size: 0.9rem;
font-weight: 600;
color: var(--c-text);
font-family: var(--font-mono);
white-space: nowrap;
}
.contact-pill small {
font-size: 0.72rem;
color: var(--c-text-3);
font-weight: 400;
font-family: var(--font-body);
}
/* ── Panels (inner page sections) ────────────────────────── */
.page-hero ~ .panel,
.panel ~ .panel {
margin-top: 1.5rem;
}
.panel {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 2.5rem;
box-shadow: var(--s-card);
width: min(var(--shell-max), calc(100% - 2 * var(--shell-pad)));
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
.panel.highlight {
background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(6,214,160,0.05) 100%);
border-color: rgba(59,130,246,0.25);
}
.panel header {
margin-bottom: 1.5rem;
}
.panel header h2 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 0.4rem;
}
.panel header p {
font-size: 0.9rem;
color: var(--c-text-2);
margin: 0;
line-height: 1.6;
}
/* ── Badge ───────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--c-blue);
color: #fff;
border: 1px solid rgba(59,130,246,0.4);
margin-bottom: 0.6rem;
font-family: var(--font-mono);
}
/* ── Price tag ───────────────────────────────────────────── */
.price-tag {
display: block;
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 700;
color: var(--c-text);
margin: 0.5rem 0 1rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.cards.two-columns { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.three-columns { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cards article {
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.cards article:hover {
transform: translateY(-3px);
box-shadow: var(--s-lifted);
border-color: var(--c-border-hi);
}
.cards article h3 {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
margin: 0;
}
.cards article p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.65;
margin: 0;
}
.cards article ul {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.65;
padding-left: 1.1rem;
margin: 0;
}
.cards article ul li { margin-bottom: 0.3rem; }
.cards article .btn {
margin-top: auto;
align-self: flex-start;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
}
.chip {
padding: 0.3rem 0.85rem;
border: 1px solid var(--c-border-hi);
border-radius: 999px;
font-size: 0.8rem;
background: var(--c-surface-2);
font-family: var(--font-mono);
}
.logo-cloud {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.75rem;
margin-top: 1.5rem;
}
.logo-cloud span {
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 0.75rem;
text-align: center;
background: var(--c-surface-2);
font-weight: 600;
font-size: 0.85rem;
}
.timeline {
list-style: none;
border-left: 2px solid var(--c-border-hi);
padding-left: 0;
margin-top: 1.5rem;
}
.timeline li {
padding: 0 0 1.25rem 1.25rem;
position: relative;
color: var(--c-text-2);
font-size: 0.9rem;
}
.timeline li::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-blue);
position: absolute;
left: -6px;
top: 0.35rem;
box-shadow: 0 0 10px rgba(59,130,246,0.6);
}
.accordion details {
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
}
.accordion summary {
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
}
.pill-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.25rem;
}
.pill-list li {
border: 1px solid rgba(59, 130, 246, 0.35);
border-radius: 999px;
padding: 0.45rem 1.1rem;
font-size: 0.85rem;
font-weight: 500;
background: rgba(59, 130, 246, 0.1);
color: var(--c-text);
}
.agent-avatar {
width: 48px;
height: 48px;
border-radius: var(--r-sm);
background: var(--c-blue-soft);
color: var(--c-blue);
display: grid;
place-items: center;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
/* ── Numbered steps (Mode opératoire & similar) ─────────── */
.cards.steps {
counter-reset: step-counter;
}
.cards.steps article {
counter-increment: step-counter;
position: relative;
padding-top: 3rem;
}
.cards.steps article::before {
content: counter(step-counter, decimal-leading-zero);
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--c-teal);
opacity: 0.85;
}
.panel .cards article {
position: relative;
}
/* ── Agent card hierarchy ─────────────────────────────────── */
.agent-avatar {
width: 52px;
height: 52px;
border-radius: var(--r-sm);
background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(6,214,160,0.18));
border: 1px solid rgba(59,130,246,0.28);
color: var(--c-teal);
display: grid;
place-items: center;
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
/* p1–p2 = role (uppercase label) */
.cards article:has(.agent-avatar) p:nth-of-type(-n+2) {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-blue);
margin-bottom: 0.4rem;
}
/* p3–p4 = tagline (italic, teal) */
.cards article:has(.agent-avatar) p:nth-of-type(n+3):nth-of-type(-n+4) {
font-style: italic;
font-size: 0.88rem;
color: var(--c-teal);
margin-bottom: 0.55rem;
}
/* p5–p6 = focus (muted description) */
.cards article:has(.agent-avatar) p:nth-of-type(n+5) {
font-size: 0.83rem;
color: var(--c-text-muted);
line-height: 1.65;
}
/* Generic: h3 immediately followed by p in cards */
.cards article h3 + p {
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.6;
}
/* ── Timeline (ol.timeline) ───────────────────────────────── */
.timeline {
list-style: none;
padding: 0;
margin: 0;
counter-reset: timeline-counter;
}
.timeline li {
position: relative;
padding: 1.5rem 0 1.5rem 3.5rem;
border-bottom: 1px solid var(--c-border);
counter-increment: timeline-counter;
}
.timeline li:last-child { border-bottom: none; }
.timeline li::before {
content: counter(timeline-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 1.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
color: var(--c-teal);
line-height: 1;
}
.timeline li h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.4rem;
color: var(--c-text);
}
.timeline li p {
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.65;
margin: 0;
}
/* ── Accordion / FAQ ─────────────────────────────────────── */
.accordion {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.accordion details {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
overflow: hidden;
transition: border-color 0.2s;
}
.accordion details[open] {
border-color: var(--c-blue);
}
.accordion summary {
padding: 1rem 1.25rem;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--c-text);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: '+';
font-size: 1.3rem;
font-weight: 300;
color: var(--c-blue);
flex-shrink: 0;
transition: transform 0.25s;
line-height: 1;
}
.accordion details[open] summary::after {
transform: rotate(45deg);
}
.accordion details > :not(summary) {
padding: 0 1.25rem 1rem;
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.7;
}
/* ── Section kicker (eyebrow inside panel header) ─────────── */
.panel header .section-kicker {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-teal);
margin-bottom: 0.5rem;
}
/* ── Problem hero variant ────────────────────────────────── */
.site-hero--problem {
padding: 2.5rem 0 1.75rem;
}
.hero-copy--centered {
text-align: center;
max-width: 760px;
margin: 0 auto 3.5rem;
}
.hero-copy--centered .hero-actions {
justify-content: center;
}
/* ── Problem cards ───────────────────────────────────────── */
.problem-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.problem-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: border-color 0.25s, transform 0.25s var(--ease);
}
.problem-card:hover {
border-color: var(--c-blue);
transform: translateY(-3px);
}
.problem-icon {
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--c-blue) 12%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-blue);
flex-shrink: 0;
}
.problem-card h3 {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--c-text-1);
}
.problem-card p {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.6;
margin: 0;
}
/* ── Section intro (two-col text) ───────────────────────── */
.section-heading--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
margin-bottom: 2.5rem;
}
.section-heading--split h2 {
margin-bottom: 0;
}
.section-intro p {
color: var(--c-text-2);
line-height: 1.7;
margin: 0 0 1rem;
}
.section-intro p:last-child { margin-bottom: 0; }
/* ── Capability checklist variant ───────────────────────── */
.capability-layout--checklist {
grid-template-columns: repeat(3, 1fr);
grid-template-areas: none;
}
.capability-layout--checklist .capability-card--wide {
grid-column: auto;
}
.check-list {
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.check-list li {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.5;
padding-left: 1.5rem;
position: relative;
}
.check-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--c-teal);
font-weight: 700;
font-size: 0.8rem;
}
/* ── Transformation cards ────────────────────────────────── */
.transformation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.transformation-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: border-color 0.25s, transform 0.25s var(--ease);
}
.transformation-card:hover {
border-color: var(--c-teal);
transform: translateY(-3px);
}
.transformation-states {
display: flex;
align-items: center;
gap: 0.75rem;
}
.state {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
}
.state-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--c-text-3);
font-weight: 600;
}
.state--before strong {
color: #f87171;
font-size: 1.1rem;
font-weight: 700;
}
.state--after strong {
color: var(--c-teal);
font-size: 1.1rem;
font-weight: 700;
}
.transformation-arrow {
color: var(--c-text-3);
font-size: 1.25rem;
flex-shrink: 0;
}
.transformation-card p {
font-size: 0.9rem;
color: var(--c-text-2);
line-height: 1.65;
margin: 0;
}
/* ── CTA centered variant ────────────────────────────────── */
.cta-block--centered {
text-align: center;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.cta-block--centered h2 {
max-width: 600px;
}
.cta-block--centered .lead {
max-width: 600px;
color: var(--c-text-2);
font-size: 1.05rem;
line-height: 1.65;
}
.cta-reassurance {
font-size: 0.85rem;
color: var(--c-text-3);
margin: 0;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-grid--corporate {
grid-template-columns: 1fr;
}
.hero-aside {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.hero-copy { max-width: 100%; }
.capability-layout {
grid-template-columns: 1fr;
}
.capability-card--wide { grid-column: auto; }
.problem-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
.capability-layout--checklist {
grid-template-columns: 1fr;
}
.transformation-grid {
grid-template-columns: 1fr;
}
.section-heading--split {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
/* ── Burger / X morph (stays in the page header) ─────── */
.nav-toggle {
display: flex;
position: relative;
z-index: 1100;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Drawer — flat, sober, B2B ───────────────────────── */
/* Sits below the 68px page header so brand + burger/X stay
visible at the top. The header is the drawer's top bar. */
.primary-nav {
position: fixed;
top: 68px;
right: 0;
bottom: 0;
left: 0;
background: rgba(5, 8, 15, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
padding: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
z-index: 99;
}
[data-theme="light"] .primary-nav {
background: rgba(240, 244, 252, 0.97);
}
.primary-nav.is-open {
opacity: 1;
visibility: visible;
}
body.mobile-nav-open { overflow: hidden; }
/* List scrolls between the page header (already visible above
the drawer) and the sticky footer. */
.primary-nav > ul {
display: flex;
flex-direction: column;
list-style: none;
gap: 0;
padding: 12px 0 8px;
margin: 0;
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
width: 100%;
}
.primary-nav > ul > li {
width: 100%;
}
/* Flat list items: no border, no radius, secondary-text tone.
Icon on the left, label, optional chevron on the right. */
.primary-nav > ul > li > a,
.primary-nav > ul > li > button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 12px 18px;
background: transparent;
border: 0;
border-radius: 0;
font-size: 0.95rem;
font-weight: 500;
text-align: left;
color: #cbd2e0;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > button:hover,
.primary-nav > ul > li > a:focus-visible,
.primary-nav > ul > li > button:focus-visible {
background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .primary-nav > ul > li > a,
[data-theme="light"] .primary-nav > ul > li > button {
color: rgba(15, 22, 38, 0.78);
}
[data-theme="light"] .primary-nav > ul > li > a:hover,
[data-theme="light"] .primary-nav > ul > li > button:hover {
background: rgba(15, 22, 38, 0.04);
}
/* Active page — accent border + tinted background. */
.primary-nav > ul > li.is-active > a,
.primary-nav > ul > li.is-active > button {
background: rgba(59, 130, 246, 0.10);
border-left: 2px solid #3b82f6;
padding-left: 16px;
color: #93c5fd;
}
/* Drop the legacy ::after caret marker — chevron is now a real SVG. */
.primary-nav li.has-children > a::after,
.primary-nav li.has-children > button::after {
display: none;
}
/* Icons + label + chevron */
.nav-item-icon {
display: inline-flex;
flex-shrink: 0;
opacity: 0.85;
}
.nav-item-label {
flex: 1;
display: block;
}
.nav-item-chevron {
display: inline-flex;
flex-shrink: 0;
opacity: 0.6;
transition: transform 0.2s var(--ease);
}
.primary-nav li.has-children.is-open > button .nav-item-chevron {
transform: rotate(180deg);
}
/* Visual group separators rendered as . */
.nav-sep {
display: block;
height: 1px;
background: rgba(255, 255, 255, 0.05);
margin: 10px 18px;
}
[data-theme="light"] .nav-sep {
background: rgba(15, 22, 38, 0.06);
}
/* Hide the in-list CTA on mobile — the footer CTA replaces it. */
.primary-nav > ul > li.is-cta { display: none; }
/* ── Submenu / mega-menu accordion (mobile, unchanged behaviour) */
.submenu {
position: static;
transform: none;
left: auto;
box-shadow: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--r-md);
padding: 0.4rem;
margin: 0.2rem 18px 0.4rem;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.3s var(--ease), opacity 0.25s, visibility 0s 0.3s;
pointer-events: none;
}
.submenu::before { display: none; }
.primary-nav li.has-children.is-open .submenu {
max-height: 300px;
opacity: 1;
visibility: visible;
transition: max-height 0.35s var(--ease), opacity 0.25s;
pointer-events: auto;
}
.submenu li a { font-size: 0.95rem; text-align: left; justify-content: flex-start; }
/* ── Sticky footer: lang pills + CTA ──────────────────── */
.primary-nav .nav-actions {
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
margin: 0;
padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 14px);
background: rgba(5, 8, 15, 0.97);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .primary-nav .nav-actions {
background: rgba(240, 244, 252, 0.97);
border-top-color: rgba(15, 22, 38, 0.06);
}
/* Mobile-only "Réserver une démo" CTA */
.nav-mobile-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0 16px;
border-radius: 10px;
background: #2563eb;
color: #fff;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
box-shadow: none;
transition: background 0.15s;
}
.nav-mobile-cta:hover { background: #1d4ed8; }
/* Language pill rail (replaces the dropdown trigger on mobile) */
.primary-nav .lang-dropdown {
width: 100%;
}
.primary-nav .lang-dropdown__trigger { display: none; }
.primary-nav .lang-dropdown__menu {
position: static;
display: flex;
flex-direction: row;
gap: 4px;
width: 100%;
padding: 4px;
margin: 0;
background: rgba(255, 255, 255, 0.04);
border: 0;
border-radius: 8px;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
[data-theme="light"] .primary-nav .lang-dropdown__menu {
background: rgba(15, 22, 38, 0.04);
}
.primary-nav .lang-dropdown__item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #cbd2e0;
text-decoration: none;
}
.primary-nav .lang-dropdown__item--active {
background: rgba(255, 255, 255, 0.08);
color: var(--c-text);
}
[data-theme="light"] .primary-nav .lang-dropdown__item {
color: rgba(15, 22, 38, 0.7);
}
[data-theme="light"] .primary-nav .lang-dropdown__item--active {
background: rgba(15, 22, 38, 0.08);
}
/* Compact: only the 2-letter code is shown */
.primary-nav .lang-dropdown__flag,
.primary-nav .lang-dropdown__name {
display: none;
}
.primary-nav .lang-dropdown__code {
display: inline;
}
.cta-block { padding: 2rem 1.5rem; }
}
@media (max-width: 640px) {
:root {
--section-v: clamp(2.5rem, 5vw, 4rem);
}
.hero-actions { flex-direction: column; align-items: flex-start; }
.metric-grid { grid-template-columns: 1fr; }
.offer-grid { grid-template-columns: 1fr; }
.problem-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.hero-copy--centered { text-align: left; }
.hero-copy--centered .hero-actions { justify-content: flex-start; }
.cta-block {
flex-direction: column;
padding: 1.5rem;
}
.cta-block--centered { align-items: flex-start; text-align: left; }
.section-heading--split { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
/* ── Demo page ───────────────────────────────────────────── */
.demo-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 3rem;
padding-top: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(3rem, 6vw, 6rem);
align-items: start;
}
/* Header */
.demo-header { margin-bottom: 2.25rem; }
.demo-header h1 {
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0.75rem 0 1rem;
}
.demo-header .lead {
font-size: 1rem;
color: var(--c-text);
line-height: 1.7;
max-width: 520px;
}
/* Form */
.demo-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-field--full { grid-column: 1 / -1; }
.form-field label {
font-size: 0.82rem;
font-weight: 600;
color: var(--c-text);
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 0.3rem;
}
.field-required { color: var(--c-blue); font-size: 0.9rem; }
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-md);
padding: 0.7rem 1rem;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--c-text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
appearance: none;
-webkit-appearance: none;
}
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2360a5fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
.form-field textarea {
resize: vertical;
min-height: 110px;
line-height: 1.6;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--c-text-3);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--c-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* Submit */
.form-submit {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.btn--lg {
padding: 0.8rem 2rem;
font-size: 0.95rem;
}
.form-notice {
font-size: 0.8rem;
color: var(--c-text-2);
margin: 0;
}
/* Aside */
.demo-aside {
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: calc(68px + 1.5rem);
}
.demo-aside-card {
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-xl);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.demo-aside-card--session {
background: linear-gradient(135deg, var(--c-surface) 60%, rgba(59,130,246,0.06) 100%);
border-color: rgba(59,130,246,0.18);
}
.demo-phone {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
color: var(--c-text);
text-decoration: none;
transition: color 0.2s;
display: block;
}
.demo-phone:hover { color: var(--c-blue); }
.demo-channels {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.channel-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--c-border-hi);
font-size: 0.8rem;
font-weight: 600;
color: var(--c-text-2);
text-decoration: none;
background: var(--c-surface-2);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.channel-badge:hover {
background: var(--c-blue-soft);
color: var(--c-blue);
border-color: rgba(59,130,246,0.3);
}
.demo-email-link {
font-size: 0.85rem;
color: var(--c-blue);
text-decoration: none;
font-weight: 500;
}
.demo-email-link:hover { text-decoration: underline; }
/* Session steps */
.demo-steps {
list-style: none;
counter-reset: step;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 0;
}
.demo-steps li {
counter-increment: step;
display: flex;
gap: 0.85rem;
font-size: 0.85rem;
color: var(--c-text-2);
line-height: 1.55;
}
.demo-steps li::before {
content: counter(step);
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--c-blue-soft);
color: var(--c-blue);
font-size: 0.72rem;
font-weight: 700;
display: grid;
place-items: center;
margin-top: 0.1rem;
}
.demo-steps li > div {
flex: 1;
min-width: 0;
}
.demo-steps li strong {
display: block;
color: var(--c-text);
font-weight: 600;
margin-bottom: 0.2rem;
}
.demo-steps li p {
margin: 0;
font-size: 0.85rem;
color: var(--c-text);
line-height: 1.55;
}
.demo-duration {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: var(--c-text-2);
padding-top: 0.5rem;
border-top: 1px solid var(--c-border);
}
.demo-duration svg { color: var(--c-blue); flex-shrink: 0; }
/* ── Support page ────────────────────────────────────────── */
/* Hero */
.page-hero--support {
background: var(--g-hero);
border-bottom: 1px solid var(--c-border);
}
.support-hero-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.support-hero-copy { max-width: 600px; }
.support-hero-copy h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 0.5rem 0 1rem;
}
.support-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.support-availability {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.25rem;
font-size: 0.85rem;
color: var(--c-text-2);
}
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.support-hero-stats {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.support-stat-card {
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-xl);
padding: 1.25rem 1.75rem;
text-align: center;
min-width: 140px;
}
.support-stat-card strong {
display: block;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.03em;
color: var(--c-text);
line-height: 1;
}
.support-stat-card strong small {
font-size: 1rem;
font-weight: 600;
color: var(--c-text-2);
}
.support-stat-card span {
display: block;
font-size: 0.75rem;
color: var(--c-text-3);
margin-top: 0.25rem;
}
/* Danger button */
.btn-danger {
background: #ef4444;
color: #fff;
border-color: #ef4444;
font-weight: 700;
}
.btn-danger:hover {
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
}
/* Risk cards */
.support-risk-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
.support-risk-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 1.75rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.risk-icon {
width: 40px;
height: 40px;
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.risk-icon--red { background: rgba(239,68,68,0.12); color: #f87171; }
.risk-icon--orange { background: rgba(251,146,60,0.12); color: #fb923c; }
.support-risk-card h3 {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.4rem;
color: var(--c-text);
}
.support-risk-card p {
font-size: 0.85rem;
color: var(--c-text-2);
line-height: 1.6;
margin: 0;
}
/* Callout warning */
.support-callout {
display: flex;
gap: 0.85rem;
align-items: flex-start;
background: color-mix(in srgb, #f59e0b 8%, transparent);
border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
border-radius: var(--r-xl);
padding: 1.25rem 1.5rem;
color: #fbbf24;
}
.support-callout svg { flex-shrink: 0; margin-top: 2px; color: #f59e0b; }
.support-callout p {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
color: var(--c-text);
line-height: 1.6;
}
/* Benefit cards */
.support-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.support-benefit-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
transition: border-color 0.2s, transform 0.2s var(--ease);
}
.support-benefit-card:hover {
border-color: var(--c-blue);
transform: translateY(-2px);
}
.benefit-icon {
width: 40px;
height: 40px;
border-radius: var(--r-md);
background: var(--c-blue-soft);
color: var(--c-blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.support-benefit-card h3 {
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--c-text);
}
.support-benefit-card p {
font-size: 0.82rem;
color: var(--c-text-2);
line-height: 1.6;
margin: 0;
}
/* Emergency items */
.emergency-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.emergency-item {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 1.25rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 1.25rem 1.5rem;
transition: border-color 0.2s, background 0.2s;
}
.emergency-item:hover {
border-color: rgba(239,68,68,0.4);
background: color-mix(in srgb, #ef4444 4%, var(--c-surface));
}
.emergency-number {
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 800;
color: color-mix(in srgb, #ef4444 60%, transparent);
line-height: 1;
text-align: center;
}
.emergency-content h3 {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.2rem;
color: var(--c-text);
}
.emergency-content p {
font-size: 0.82rem;
color: var(--c-text-2);
margin: 0;
}
.emergency-badge {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ef4444;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.25);
border-radius: 999px;
padding: 0.25rem 0.65rem;
white-space: nowrap;
}
/* Trust grid */
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.85rem;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: var(--c-text);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: 1rem 1.25rem;
}
.trust-item svg { color: var(--c-teal); flex-shrink: 0; }
/* CTA urgence */
.support-cta-section { background: none; }
.support-cta-block {
position: relative;
background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.03) 50%, var(--c-surface) 100%);
border: 1px solid color-mix(in srgb, #ef4444 30%, var(--c-border));
border-radius: var(--r-xl);
padding: 3rem;
overflow: hidden;
text-align: center;
}
.support-cta-pulse {
position: absolute;
top: -80px; right: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(239,68,68,0.15) 0%, transparent 70%);
animation: cta-pulse 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes cta-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.15); opacity: 1; }
}
.support-cta-content { position: relative; z-index: 1; }
.support-cta-content h2 {
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 900;
letter-spacing: -0.03em;
margin: 0.5rem 0 1rem;
}
.support-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
justify-content: center;
margin-top: 1.5rem;
}
.channel-badge--lg {
font-size: 0.9rem;
padding: 0.65rem 1.25rem;
}
/* Responsive */
@media (max-width: 1024px) {
.support-hero-inner { grid-template-columns: 1fr; }
.support-hero-stats { flex-direction: row; flex-wrap: wrap; }
.support-risk-grid { grid-template-columns: 1fr; }
.support-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.support-benefits-grid { grid-template-columns: 1fr; }
.emergency-item { grid-template-columns: 40px 1fr; }
.emergency-badge { display: none; }
.support-cta-block { padding: 2rem 1.5rem; }
}
/* Success / error states */
.demo-success-msg {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 2.5rem 2rem;
background: color-mix(in srgb, var(--c-teal) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--c-teal) 35%, transparent);
border-radius: var(--r-xl);
}
.demo-success-msg svg {
color: var(--c-teal);
}
.demo-success-msg h2 {
margin: 0;
font-size: 1.5rem;
color: var(--c-text);
}
.demo-success-msg p {
margin: 0;
color: var(--c-text-2);
line-height: 1.65;
}
.demo-error-msg {
padding: 1rem 1.25rem;
background: color-mix(in srgb, #f87171 10%, transparent);
border: 1px solid color-mix(in srgb, #f87171 35%, transparent);
border-radius: var(--r-md);
color: #fca5a5;
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* Responsive */
@media (max-width: 900px) {
.demo-layout {
grid-template-columns: 1fr;
}
.demo-aside {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
order: -1;
}
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
.demo-aside { grid-template-columns: 1fr; }
}
/* ============================================================
AI Agents Catalogue
============================================================ */
/* Hero */
.agents-hero {
background: var(--g-hero);
text-align: center;
}
.agents-availability-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255,255,255,0.05);
border: 1px solid var(--c-border-hi);
border-radius: 2rem;
padding: 0.35rem 1rem;
font-size: 0.8rem;
color: var(--c-text-2);
margin-bottom: 1.25rem;
flex-wrap: wrap;
justify-content: center;
}
.plan-pill {
display: inline-block;
padding: 0.15rem 0.65rem;
border-radius: 1rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.plan-pill--onprem {
background: rgba(6, 214, 160, 0.15);
color: var(--c-teal);
border: 1px solid rgba(6, 214, 160, 0.3);
}
.plan-pill--premium {
background: rgba(234, 179, 8, 0.12);
color: #fbbf24;
border: 1px solid rgba(234, 179, 8, 0.25);
}
/* Stats bar */
.agents-stats-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 2rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
flex-wrap: wrap;
}
.agents-stat {
flex: 1 1 140px;
padding: 1rem 1.5rem;
text-align: center;
}
.agents-stat__num {
display: block;
font-size: 1.6rem;
font-weight: 800;
color: var(--c-blue);
line-height: 1;
}
.agents-stat__lbl {
display: block;
font-size: 0.75rem;
color: var(--c-text-3);
margin-top: 0.3rem;
font-weight: 500;
}
.agents-stat-divider {
width: 1px;
height: 3rem;
background: var(--c-border);
flex-shrink: 0;
}
/* Category header */
.agents-category-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
}
.agents-category-icon {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--r-md);
background: hsl(var(--cat-color) / 0.15);
border: 1px solid hsl(var(--cat-color) / 0.3);
color: hsl(var(--cat-color));
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.2rem;
}
.agents-category-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--c-text);
margin: 0 0 0.25rem;
}
.agents-category-sub {
font-size: 0.9rem;
color: var(--c-text-3);
margin: 0;
}
/* Agent grids */
.agents-grid {
display: grid;
gap: 1.25rem;
}
.agents-grid--1 { grid-template-columns: 1fr; }
.agents-grid--2 { grid-template-columns: repeat(2, 1fr); }
.agents-grid--3 { grid-template-columns: repeat(3, 1fr); }
.agents-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Agent card */
.agent-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
position: relative;
overflow: hidden;
}
.agent-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, hsl(var(--agent-color) / 0.06) 0%, transparent 60%);
pointer-events: none;
}
.agent-card:hover {
border-color: hsl(var(--agent-color) / 0.4);
box-shadow: 0 8px 32px hsl(var(--agent-color) / 0.15);
transform: translateY(-2px);
}
.agent-card--featured {
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface) 100%);
}
.agent-card__header {
display: flex;
align-items: center;
gap: 0.75rem;
}
.agent-card__header > div:nth-child(2) {
flex: 1;
}
/* Avatar ring */
.agent-avatar-ring {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: hsl(var(--agent-color) / 0.15);
border: 2px solid hsl(var(--agent-color) / 0.5);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 12px hsl(var(--agent-color) / 0.2);
}
.agent-avatar-initials {
font-size: 0.75rem;
font-weight: 700;
color: hsl(var(--agent-color));
font-family: var(--font-mono);
}
.agent-name {
font-weight: 700;
font-size: 1rem;
color: var(--c-text);
line-height: 1.2;
}
.agent-role {
font-size: 0.75rem;
color: var(--c-text-3);
font-weight: 500;
margin-top: 0.1rem;
}
.agent-tagline {
font-size: 0.88rem;
color: var(--c-text-2);
line-height: 1.55;
margin: 0;
}
/* Focus list */
.agent-focus-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.agent-focus-list li {
font-size: 0.8rem;
color: var(--c-text-3);
padding-left: 1.1em;
position: relative;
line-height: 1.4;
}
.agent-focus-list li::before {
content: '→';
position: absolute;
left: 0;
color: hsl(var(--agent-color));
font-size: 0.7rem;
top: 0.05em;
}
/* Featured agent dual-column focus */
.agent-focus-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
/* Status */
.agent-status {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
color: var(--c-teal);
font-weight: 600;
margin-left: auto;
white-space: nowrap;
}
.agent-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-teal);
animation: pulse-dot 2s ease-in-out infinite;
}
/* CTA section */
.agents-cta-section {
background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59,130,246,0.12) 0%, transparent 70%);
}
.agents-cta-box {
text-align: center;
max-width: 680px;
margin: 0 auto;
}
.agents-cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(6, 214, 160, 0.08);
border: 1px solid rgba(6, 214, 160, 0.2);
border-radius: 2rem;
padding: 0.35rem 1rem;
font-size: 0.78rem;
color: var(--c-teal);
margin-bottom: 1.5rem;
font-weight: 500;
}
.agents-cta-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--c-text);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.agents-cta-sub {
font-size: 0.95rem;
color: var(--c-text-2);
margin: 0 0 2rem;
line-height: 1.65;
}
.agents-cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 1100px) {
.agents-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.agents-grid--3 { grid-template-columns: repeat(2, 1fr); }
.agents-grid--2 { grid-template-columns: 1fr; }
.agent-focus-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.agents-grid--3,
.agents-grid--4 { grid-template-columns: 1fr; }
.agents-stats-bar { flex-direction: column; gap: 0; }
.agents-stat-divider { width: 80%; height: 1px; }
.agents-category-header { flex-direction: column; }
}
/* ============================================================
Clients Page
============================================================ */
/* Hero stats */
.clients-hero { text-align: center; background: var(--g-hero); }
.clients-stats-bar {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
flex-wrap: wrap;
}
.clients-stat {
flex: 1 1 160px;
padding: 1rem 1.5rem;
text-align: center;
}
.clients-stat__num {
display: block;
font-size: 1.6rem;
font-weight: 800;
color: var(--c-blue);
line-height: 1;
}
.clients-stat__lbl {
display: block;
font-size: 0.75rem;
color: var(--c-text-3);
margin-top: 0.3rem;
font-weight: 500;
}
.clients-stat-divider {
width: 1px;
height: 3rem;
background: var(--c-border);
flex-shrink: 0;
}
/* ── Client grid ────────────────────────────────────────── */
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.25rem;
}
.client-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 1.5rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
position: relative;
overflow: hidden;
}
.client-card:hover {
border-color: var(--c-blue);
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);
transform: translateY(-3px);
}
.client-logo-wrap {
width: 100%;
height: 80px;
padding: 10px;
box-sizing: border-box;
border-radius: var(--r-md);
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.client-logo-wrap--dark {
background: #1a2030;
}
.client-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.client-logo-fallback {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.2rem;
font-weight: 800;
color: var(--c-blue-deep);
background: rgba(59, 130, 246, 0.08);
font-family: var(--font-mono);
}
.client-name {
margin-top: 0.75rem;
font-size: 0.88rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.2;
}
.client-sector {
font-size: 0.72rem;
color: var(--c-text-3);
font-weight: 500;
}
/* ── Sectors ────────────────────────────────────────────── */
.sectors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
}
.sector-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: border-color 0.2s;
}
.sector-card:hover {
border-color: var(--c-border-hi);
}
.sector-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--r-sm);
background: var(--c-blue-soft);
color: var(--c-blue);
display: flex;
align-items: center;
justify-content: center;
}
.sector-name {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
}
.sector-clients {
font-size: 0.78rem;
color: var(--c-text-3);
line-height: 1.5;
}
/* ── Testimonials ───────────────────────────────────────── */
.testimonials-list {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.testimonial-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 2rem;
position: relative;
}
.testimonial-card--featured {
border-color: rgba(59, 130, 246, 0.25);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, var(--c-surface) 50%);
}
.testimonial-card--featured::before {
content: '"';
position: absolute;
top: -0.2rem;
right: 1.5rem;
font-size: 6rem;
font-weight: 900;
color: rgba(59, 130, 246, 0.08);
line-height: 1;
pointer-events: none;
}
.testimonial-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.testimonial-logo-wrap {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.testimonial-logo {
max-width: 2.5rem;
max-height: 2.5rem;
object-fit: contain;
}
.testimonial-logo-fallback {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.85rem;
font-weight: 700;
color: var(--c-blue);
font-family: var(--font-mono);
}
.testimonial-author {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
}
.testimonial-role {
font-size: 0.82rem;
color: var(--c-text-2);
}
.testimonial-date {
font-size: 0.72rem;
color: var(--c-text-3);
margin-top: 0.15rem;
}
.testimonial-body {
margin: 0;
padding: 0;
border: none;
}
.testimonial-body p {
font-size: 0.92rem;
color: var(--c-text-2);
line-height: 1.7;
margin: 0 0 1rem;
}
.testimonial-body p:last-child {
margin-bottom: 0;
}
.testimonial-highlights {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.testimonial-highlights li {
font-size: 0.88rem;
color: var(--c-text-2);
padding-left: 1.4em;
position: relative;
line-height: 1.5;
}
.testimonial-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--c-teal);
font-weight: 700;
}
.testimonial-achievement {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.15);
border-radius: var(--r-md);
margin-bottom: 1.25rem;
}
.testimonial-achievement-icon {
flex-shrink: 0;
color: #fbbf24;
margin-top: 0.1rem;
}
.testimonial-achievement p {
font-size: 0.85rem;
color: var(--c-text-2);
margin: 0;
line-height: 1.6;
}
/* ── CTA ────────────────────────────────────────────────── */
.clients-cta-box {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.clients-cta-sub {
font-size: 0.95rem;
color: var(--c-text-2);
margin: 0 0 2rem;
line-height: 1.65;
}
.clients-cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
.clients-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sectors-grid { grid-template-columns: 1fr; }
.clients-stats-bar { flex-direction: column; gap: 0; }
.clients-stat-divider { width: 80%; height: 1px; }
.testimonial-card { padding: 1.25rem; }
}
/* ============================================================
FAQ Page
============================================================ */
.faq-category-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.faq-category-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--r-md);
background: var(--c-blue-soft);
color: var(--c-blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-category-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--c-text);
margin: 0;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.faq-item {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item[open] {
border-color: var(--c-blue);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--c-text);
cursor: pointer;
list-style: none;
transition: color 0.2s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-question:hover { color: var(--c-blue); }
.faq-chevron {
flex-shrink: 0;
color: var(--c-text-3);
transition: transform 0.25s, color 0.2s;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
color: var(--c-blue);
}
.faq-answer {
padding: 0 1.25rem 1.25rem;
}
.faq-answer p {
font-size: 0.88rem;
color: var(--c-text-2);
line-height: 1.7;
margin: 0;
}
/* CTA */
.faq-cta-box {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.faq-cta-sub {
font-size: 0.95rem;
color: var(--c-text-2);
margin: 0 0 2rem;
line-height: 1.65;
}
.faq-cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
Documentation Page
============================================================ */
/* Quick links bar */
.doc-quick-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2rem;
justify-content: center;
}
.doc-quick-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 2rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--c-text-2);
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.doc-quick-link:hover {
border-color: var(--c-blue);
color: var(--c-blue);
background: var(--c-blue-soft);
}
.doc-quick-link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Section header */
.doc-section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.doc-section-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--r-md);
background: var(--c-blue-soft);
color: var(--c-blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-section-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--c-text);
margin: 0;
}
/* Doc grid */
.doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.doc-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 1.25rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.doc-card:hover {
border-color: var(--c-blue);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}
.doc-card__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--c-text);
margin: 0 0 0.5rem;
}
.doc-card__desc {
font-size: 0.82rem;
color: var(--c-text-3);
line-height: 1.6;
margin: 0;
}
/* Resources grid */
.doc-resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.doc-resource-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.doc-resource-card:hover {
border-color: var(--c-blue);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}
.doc-resource-card svg {
flex-shrink: 0;
color: var(--c-blue);
}
.doc-resource-card strong {
display: block;
font-size: 0.92rem;
color: var(--c-text);
}
.doc-resource-card span {
font-size: 0.78rem;
color: var(--c-text-3);
}
/* CTA */
.doc-cta-box {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.doc-cta-sub {
font-size: 0.95rem;
color: var(--c-text-2);
margin: 0 0 2rem;
line-height: 1.65;
}
.doc-cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 700px) {
.doc-grid { grid-template-columns: 1fr; }
.doc-resources-grid { grid-template-columns: 1fr; }
.doc-quick-links { justify-content: flex-start; }
}
/* ============================================================
Documentation Detail Page
============================================================ */
.doc-detail-nav {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.8rem;
color: var(--c-text-3);
}
.doc-detail-nav a {
color: var(--c-blue);
text-decoration: none;
}
.doc-detail-nav a:hover { text-decoration: underline; }
.doc-detail-content {
max-width: 800px;
}
.doc-detail-content h2 {
font-size: 1.2rem;
font-weight: 700;
color: var(--c-text);
margin: 2rem 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--c-border);
}
.doc-detail-content h2:first-child { margin-top: 0; }
.doc-detail-content h3 {
font-size: 1rem;
font-weight: 600;
color: var(--c-text);
margin: 1.5rem 0 0.5rem;
}
.doc-detail-content p {
font-size: 0.9rem;
color: var(--c-text-2);
line-height: 1.75;
margin: 0 0 1rem;
}
.doc-detail-content ul,
.doc-detail-content ol {
margin: 0 0 1rem;
padding-left: 1.5rem;
}
.doc-detail-content li {
font-size: 0.88rem;
color: var(--c-text-2);
line-height: 1.7;
margin-bottom: 0.3rem;
}
.doc-detail-content code {
font-family: var(--font-mono);
font-size: 0.82rem;
background: var(--c-surface-2);
padding: 0.15rem 0.4rem;
border-radius: var(--r-sm);
color: var(--c-teal);
}
.doc-detail-content pre {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
overflow-x: auto;
margin: 0 0 1.25rem;
}
.doc-detail-content pre code {
background: none;
padding: 0;
font-size: 0.8rem;
color: var(--c-text-2);
line-height: 1.6;
}
.doc-detail-content .doc-note {
padding: 1rem 1.25rem;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.15);
border-radius: var(--r-md);
margin: 0 0 1.25rem;
font-size: 0.85rem;
color: var(--c-text-2);
line-height: 1.65;
}
.doc-detail-content .doc-warning {
padding: 1rem 1.25rem;
background: rgba(234, 179, 8, 0.06);
border: 1px solid rgba(234, 179, 8, 0.2);
border-radius: var(--r-md);
margin: 0 0 1.25rem;
font-size: 0.85rem;
color: var(--c-text-2);
line-height: 1.65;
}
.doc-sidebar {
position: sticky;
top: 5rem;
}
.doc-sidebar-title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--c-text-3);
margin: 0 0 0.75rem;
}
.doc-sidebar-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.doc-sidebar-links a {
display: block;
padding: 0.35rem 0.75rem;
font-size: 0.78rem;
color: var(--c-text-3);
text-decoration: none;
border-radius: var(--r-sm);
border-left: 2px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.doc-sidebar-links a:hover,
.doc-sidebar-links a.is-active {
color: var(--c-text);
border-color: var(--c-blue);
background: var(--c-blue-soft);
}
.doc-detail-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 3rem;
align-items: start;
}
@media (max-width: 900px) {
.doc-detail-layout { grid-template-columns: 1fr; }
.doc-sidebar { display: none; }
}
a.doc-card {
text-decoration: none;
display: flex;
flex-direction: column;
}
.doc-card__link {
margin-top: auto;
padding-top: 0.75rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--c-blue);
}
/* ── Emergency form ─────────────────────────────────────── */
.emergency-form-wrapper {
max-width: 680px;
margin: 0 auto;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
}
.emergency-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
}
.emergency-form-header {
text-align: center;
margin-bottom: 2rem;
}
.emergency-form-icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.25);
color: #ef4444;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.emergency-form-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--c-text);
margin: 0 0 0.5rem;
}
.emergency-form-sub {
font-size: 0.88rem;
color: var(--c-text-3);
margin: 0;
}
@media (max-width: 600px) {
.emergency-form-wrapper {
padding: 1.5rem 1.25rem;
}
}
/* ============================================================
Mega Menu — rewritten with .mega-menu prefix on every
selector so specificity always beats .primary-nav ul (0-1-1)
============================================================ */
/* ── Panel ────────────────────────────────────────────────── */
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
transform: translateY(-8px);
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-lg);
box-shadow: 0 16px 48px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.04);
padding: 1.5rem;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 200;
transition: opacity .2s var(--ease),
transform .2s var(--ease),
visibility 0s .2s;
}
.primary-nav li.has-mega.is-open .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity .2s var(--ease),
transform .2s var(--ease);
}
/* ── 3-column grid ────────────────────────────────────────── */
.mega-menu .mega-menu-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 2rem;
}
/* ── Column ───────────────────────────────────────────────── */
.mega-menu .mega-col {
display: block;
text-align: left;
}
.mega-menu .mega-col-heading {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-text-3);
padding: 0 .5rem .6rem;
border-bottom: 1px solid var(--c-border);
margin-bottom: .5rem;
text-align: left;
}
/* ── Item list — reset .primary-nav ul inheritance ────────── */
.mega-menu .mega-col-list {
all: unset;
display: block;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
.mega-menu .mega-col-list li {
display: block;
width: 100%;
margin-bottom: .15rem;
}
.mega-menu .mega-col-list--two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .1rem .5rem;
}
/* ── Link / static item ───────────────────────────────────── */
.mega-menu .mega-col-list li a,
.mega-menu .mega-col-list li .mega-item-static {
display: block;
width: 100%;
padding: .5rem;
border-radius: var(--r-sm);
text-decoration: none;
text-align: left;
transition: background .15s;
}
.mega-menu .mega-col-list li a:hover {
background: var(--c-blue-soft);
}
.mega-menu .mega-col-list li.is-active a {
background: var(--c-blue-soft);
}
/* ── Label & description ──────────────────────────────────── */
.mega-menu .mega-item-label {
display: block;
font-size: .84rem;
font-weight: 600;
color: var(--c-text);
line-height: 1.3;
text-align: left;
}
.mega-menu .mega-item-desc {
display: block;
font-size: .72rem;
color: var(--c-text-3);
line-height: 1.4;
margin-top: .1rem;
text-align: left;
}
.mega-menu .mega-item-static {
cursor: default;
}
.mega-menu .mega-item-static .mega-item-label {
color: var(--c-text-2);
font-weight: 500;
}
/* ── Responsive ≤ 1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
.mega-menu {
position: static;
transform: none;
left: auto;
right: auto;
min-width: auto;
box-shadow: none;
background: rgba(255,255,255,.03);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: .75rem;
margin-top: .4rem;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: max-height .3s var(--ease),
opacity .25s,
visibility 0s .3s;
}
.primary-nav li.has-mega.is-open .mega-menu {
max-height: 2000px;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: max-height .35s var(--ease),
opacity .25s;
}
.mega-menu .mega-menu-inner {
grid-template-columns: 1fr;
gap: 1rem;
}
.mega-menu .mega-col-heading {
text-align: center;
}
}
/* ============================================================
Checkout — quantity stepper on offers cards
============================================================ */
.checkout-form {
display: flex;
flex-direction: column;
gap: .75rem;
width: 100%;
}
.checkout-form__note {
font-size: .72rem;
color: var(--c-text-3);
text-align: center;
margin: 0;
}
.qty-stepper {
display: flex;
flex-direction: column;
gap: .4rem;
padding: .75rem;
background: rgba(255,255,255,.03);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
}
.qty-stepper__label {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-text-3);
}
.qty-stepper__controls {
display: flex;
align-items: center;
gap: .5rem;
}
.qty-stepper__btn {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border: 1px solid var(--c-border-hi);
background: var(--c-surface);
color: var(--c-text);
border-radius: var(--r-sm);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
line-height: 1;
transition: background .15s, border-color .15s;
}
.qty-stepper__btn:hover {
background: var(--c-blue-soft);
border-color: var(--c-blue);
}
.qty-stepper__btn:disabled {
opacity: .4;
cursor: not-allowed;
}
.qty-stepper__input {
flex: 1 1 auto;
min-width: 0;
height: 2rem;
text-align: center;
font-size: .95rem;
font-weight: 600;
color: var(--c-text);
background: var(--c-surface);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
-moz-appearance: textfield;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-stepper__total {
font-size: .85rem;
color: var(--c-text-2);
text-align: right;
}
.qty-stepper__total strong {
color: var(--c-text);
font-size: 1rem;
}
.btn--block {
width: 100%;
justify-content: center;
}
/* ============================================================
Checkout — customer info form page
============================================================ */
.checkout-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 768px) {
.checkout-layout {
grid-template-columns: 1fr;
}
}
.checkout-form-card,
.checkout-summary-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 2rem;
}
.checkout-form-card h2,
.checkout-summary-card h2 {
margin: 0 0 1.25rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--c-text);
}
.checkout-form-card .form-field {
display: flex;
flex-direction: column;
gap: .35rem;
margin-bottom: 1rem;
}
.checkout-form-card label {
font-size: .78rem;
font-weight: 600;
color: var(--c-text-2);
text-transform: uppercase;
letter-spacing: .04em;
}
.checkout-form-card label small {
text-transform: none;
letter-spacing: 0;
color: var(--c-text-3);
font-weight: 400;
}
.checkout-form-card input[type="text"],
.checkout-form-card input[type="email"] {
width: 100%;
padding: .7rem .9rem;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
color: var(--c-text);
font-size: .92rem;
transition: border-color .15s, background .15s;
}
.checkout-form-card input[type="text"]:focus,
.checkout-form-card input[type="email"]:focus {
outline: none;
border-color: var(--c-blue);
background: rgba(255,255,255,.06);
}
.checkout-error {
background: rgba(239,68,68,.12);
border: 1px solid rgba(239,68,68,.4);
color: #ef4444;
padding: .75rem 1rem;
border-radius: var(--r-sm);
margin-bottom: 1rem;
font-size: .88rem;
}
.checkout-back {
display: inline-block;
margin-top: 1rem;
color: var(--c-text-3);
font-size: .85rem;
text-decoration: none;
text-align: center;
width: 100%;
}
.checkout-back:hover {
color: var(--c-text);
}
.checkout-summary-card dl {
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem 1rem;
margin: 0;
}
.checkout-summary-card dt {
color: var(--c-text-3);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.checkout-summary-card dd {
margin: 0;
color: var(--c-text);
font-size: .92rem;
text-align: right;
}
.checkout-summary-card dd strong {
font-size: 1.4rem;
color: var(--c-blue);
}
.checkout-summary-card dd small {
color: var(--c-text-3);
font-size: .78rem;
}
/* ============================================================
Blog
============================================================ */
/* ── Listing grid ─────────────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.blog-card {
display: flex;
flex-direction: column;
gap: .75rem;
padding: 1.5rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
transition: border-color .2s, box-shadow .2s;
}
.blog-card:hover {
border-color: var(--c-blue);
box-shadow: 0 0 0 1px var(--c-blue);
}
.blog-card__img {
display: block;
margin: -.75rem -.75rem .5rem;
border-radius: var(--r-lg) var(--r-lg) 0 0;
overflow: hidden;
}
.blog-card__img img {
display: block;
width: 100%;
height: auto;
}
.blog-card__meta {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
.blog-card__meta time {
font-size: .75rem;
color: var(--c-text-3);
font-family: var(--font-mono);
}
.blog-card__tags {
display: flex;
gap: .35rem;
flex-wrap: wrap;
}
.blog-tag {
display: inline-block;
font-size: .65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
padding: .15rem .45rem;
border-radius: var(--r-sm);
background: rgba(59,130,246,.12);
color: var(--c-blue);
text-decoration: none;
transition: background .15s;
}
a.blog-tag:hover {
background: rgba(59,130,246,.25);
}
/* ── Blog tag filter bar ──────────────────────────────────── */
.blog-filter {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--c-border);
}
.blog-filter__label {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-text-3);
margin-right: .35rem;
}
.blog-filter__tag {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .3rem .55rem;
border-radius: 4px;
font-size: .72rem;
font-weight: 600;
font-family: inherit;
color: var(--c-text-3);
background: transparent;
border: 1px solid var(--c-border);
cursor: pointer;
transition: all .15s;
}
.blog-filter__tag small {
font-weight: 400;
opacity: .5;
font-size: .65rem;
}
.blog-filter__tag:hover {
color: var(--c-text);
border-color: var(--c-text-3);
}
.blog-filter__tag--active {
color: var(--c-blue);
background: rgba(59,130,246,.1);
border-color: rgba(59,130,246,.35);
}
.blog-filter__tag--active:hover {
background: rgba(59,130,246,.18);
border-color: rgba(59,130,246,.5);
}
.blog-filter__tag--hidden {
display: none;
}
.blog-filter__more {
display: inline-flex;
align-items: center;
padding: .3rem .55rem;
border-radius: 4px;
font-size: .72rem;
font-weight: 700;
font-family: inherit;
color: var(--c-blue);
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.25);
cursor: pointer;
transition: all .15s;
}
.blog-filter__more:hover {
background: rgba(59,130,246,.18);
border-color: rgba(59,130,246,.4);
}
.blog-filter__empty {
color: var(--c-text-3);
font-size: .92rem;
padding: 2rem 0;
}
.blog-tag--lg {
font-size: .85rem;
padding: .3rem .65rem;
}
.blog-card__title {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
}
.blog-card__title a {
color: var(--c-text);
text-decoration: none;
}
.blog-card__title a:hover {
color: var(--c-blue);
}
.blog-card__desc {
font-size: .88rem;
color: var(--c-text-2);
line-height: 1.5;
flex: 1;
}
.blog-card__link {
font-size: .82rem;
font-weight: 600;
color: var(--c-blue);
text-decoration: none;
}
.blog-card__link:hover {
text-decoration: underline;
}
/* ── Cover image ──────────────────────────────────────────── */
.blog-cover {
max-width: none;
width: 100%;
margin: 0 0 2rem;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--c-border);
}
.blog-cover img {
display: block;
width: 100%;
height: auto;
}
/* ── Single post ──────────────────────────────────────────── */
.page-hero--blog {
text-align: left;
}
.page-hero--blog h1 {
max-width: none;
}
.page-hero--blog .lead {
max-width: none;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: .82rem;
color: var(--c-text-3);
margin-top: .5rem;
}
.blog-back {
display: inline-block;
color: var(--c-text-3);
font-size: .85rem;
text-decoration: none;
margin-bottom: .25rem;
}
.blog-back:hover {
color: var(--c-text);
}
/* ── Prose (rendered Markdown) ────────────────────────────── */
.blog-prose {
max-width: none;
width: 100%;
font-size: 1rem;
line-height: 1.75;
color: var(--c-text-2);
}
.blog-prose h2 {
font-size: 1.4rem;
font-weight: 700;
color: var(--c-text);
margin: 2.5rem 0 1rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--c-border);
}
.blog-prose h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--c-text);
margin: 2rem 0 .75rem;
}
.blog-prose p {
margin: 0 0 1.25rem;
}
.blog-prose a {
color: var(--c-blue);
text-decoration: underline;
}
.blog-prose strong {
color: var(--c-text);
font-weight: 600;
}
.blog-prose ul,
.blog-prose ol {
margin: 0 0 1.25rem 1.5rem;
padding: 0;
}
.blog-prose li {
margin-bottom: .4rem;
}
.blog-prose blockquote {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-left: 3px solid var(--c-blue);
background: rgba(59,130,246,.06);
color: var(--c-text-2);
font-style: italic;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.blog-prose code {
font-family: var(--font-mono);
font-size: .88em;
padding: .15em .35em;
background: rgba(255,255,255,.06);
border-radius: var(--r-sm);
color: var(--c-text);
}
.blog-prose pre {
margin: 1.25rem 0;
padding: 1.25rem;
background: #0d1117;
border: 1px solid var(--c-border-hi);
border-radius: var(--r-md);
overflow-x: auto;
font-size: .85rem;
line-height: 1.6;
}
.blog-prose pre code {
background: transparent;
padding: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
/* highlight.js override: match our border-radius + padding */
.blog-prose pre code.hljs {
background: transparent;
padding: 0;
border-radius: 0;
}
.blog-prose table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
font-size: .88rem;
}
.blog-prose th,
.blog-prose td {
padding: .6rem .8rem;
border: 1px solid var(--c-border);
text-align: left;
}
.blog-prose th {
background: var(--c-surface);
font-weight: 600;
color: var(--c-text);
}
.blog-prose img {
max-width: 100%;
height: auto;
border-radius: var(--r-md);
margin: 1.25rem 0;
}
/* ── Share buttons — neon style ────────────────────────────── */
.blog-share {
display: flex;
align-items: center;
gap: .75rem;
margin: 2rem 0 1rem;
width: 100%;
padding-top: 1.25rem;
border-top: 1px solid var(--c-border);
flex-wrap: wrap;
}
.blog-share__label {
font-size: .78rem;
font-weight: 600;
color: var(--c-text-3);
margin-right: .25rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.blog-share__btn {
--neon: #fff;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem .9rem;
border-radius: var(--r-sm);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
color: var(--neon);
background: transparent;
border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
position: relative;
transition: color .2s, border-color .2s, box-shadow .3s, background .2s, text-shadow .3s;
}
.blog-share__btn svg {
flex-shrink: 0;
}
.blog-share__btn:hover {
border-color: var(--neon);
background: color-mix(in srgb, var(--neon) 10%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--neon) 40%, transparent),
0 0 20px color-mix(in srgb, var(--neon) 20%, transparent),
inset 0 0 12px color-mix(in srgb, var(--neon) 8%, transparent);
text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 50%, transparent);
}
.blog-share__btn--x {
--neon: #ffffff;
}
.blog-share__btn--li {
--neon: #0A66C2;
}
.blog-share__btn--fb {
--neon: #1877F2;
}
.blog-share__btn--mail {
--neon: #22c55e;
}
.blog-share--top {
border-top: none;
margin: 0 0 1.5rem;
padding-top: 0;
}
/* ── Blog post topbar ─────────────────────────────────────── */
.blog-post-topbar {
margin-bottom: .25rem;
}
.blog-share__btn--pdf {
--neon: #ef4444;
}
/* ── Blog comments ────────────────────────────────────────── */
.blog-comments {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--c-border);
}
.blog-comments__title {
font-size: 1.15rem;
font-weight: 700;
color: var(--c-text);
margin: 0 0 1.25rem;
}
.blog-comments__empty {
color: var(--c-text-3);
font-size: .88rem;
}
.blog-comments__msg {
padding: .75rem 1rem;
border-radius: var(--r-sm);
margin-bottom: 1rem;
font-size: .88rem;
}
.blog-comments__msg--ok {
background: rgba(34,197,94,.12);
border: 1px solid rgba(34,197,94,.4);
color: #22c55e;
}
.blog-comments__msg--error {
background: rgba(239,68,68,.12);
border: 1px solid rgba(239,68,68,.4);
color: #ef4444;
}
/* ── Single comment ───────────────────────────────────────── */
.blog-comment {
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.blog-comment__header {
display: flex;
align-items: baseline;
gap: .75rem;
flex-wrap: wrap;
margin-bottom: .4rem;
}
.blog-comment__name {
font-size: .9rem;
font-weight: 700;
color: var(--c-text);
}
.blog-comment__name a {
color: var(--c-blue);
text-decoration: none;
}
.blog-comment__name a:hover {
text-decoration: underline;
}
.blog-comment__header time {
font-size: .72rem;
color: var(--c-text-3);
font-family: var(--font-mono);
}
.blog-comment__body {
font-size: .9rem;
color: var(--c-text-2);
line-height: 1.6;
margin-bottom: .5rem;
}
.blog-comment__reply-btn {
background: none;
border: none;
font-family: inherit;
font-size: .75rem;
font-weight: 600;
color: var(--c-blue);
cursor: pointer;
padding: 0;
}
.blog-comment__reply-btn:hover {
text-decoration: underline;
}
.blog-comment__replies {
margin-left: 1.5rem;
padding-left: 1rem;
border-left: 2px solid var(--c-border);
}
.blog-comment__reply-form input,
.blog-comment__reply-form textarea {
width: 100%;
padding: .5rem .7rem;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
color: var(--c-text);
font-size: .85rem;
font-family: inherit;
margin-bottom: .4rem;
}
.blog-comment__reply-form input:focus,
.blog-comment__reply-form textarea:focus {
outline: none;
border-color: var(--c-blue);
}
.blog-comment__reply-actions {
display: flex;
gap: .5rem;
margin-top: .25rem;
}
/* ── New comment form ─────────────────────────────────────── */
.blog-comment-form {
margin-top: 2rem;
}
.blog-comment-form h3 {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
margin: 0 0 1rem;
}
.blog-comment-form__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-bottom: .5rem;
}
@media (max-width: 640px) {
.blog-comment-form__fields {
grid-template-columns: 1fr;
}
}
.blog-comment-form input,
.blog-comment-form textarea {
width: 100%;
padding: .65rem .85rem;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
color: var(--c-text);
font-size: .88rem;
font-family: inherit;
margin-bottom: .5rem;
}
.blog-comment-form input:focus,
.blog-comment-form textarea:focus {
outline: none;
border-color: var(--c-blue);
}
.blog-comment-form button {
margin-top: .25rem;
}
/* ── Author link in cards + posts ─────────────────────────── */
.blog-card__author,
.blog-author-link {
display: inline-flex;
align-items: center;
gap: .3rem;
color: var(--c-text);
text-decoration: none;
font-size: .78rem;
font-weight: 600;
padding: .15rem .5rem;
border-radius: var(--r-sm);
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.15);
transition: background .15s, border-color .15s, color .15s;
}
.blog-card__author::before,
.blog-author-link::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-blue);
flex-shrink: 0;
}
.blog-card__author:hover,
.blog-author-link:hover {
background: rgba(59,130,246,.18);
border-color: rgba(59,130,246,.35);
color: var(--c-blue);
}
/* ── Author page ──────────────────────────────────────────── */
.author-hero {
display: flex;
align-items: center;
gap: 1.25rem;
margin: 1rem 0 .75rem;
}
.author-hero__initials {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-blue), #6366f1);
display: flex;
align-items: center;
justify-content:center;
font-size: 1.4rem;
font-weight: 800;
color: #fff;
letter-spacing: .02em;
}
.author-hero__info h1 {
font-size: 1.6rem;
margin: 0;
line-height: 1.2;
}
.author-hero__role {
color: var(--c-text-2);
font-size: .9rem;
margin: .15rem 0 0;
}
.author-hero__count {
color: var(--c-text-3);
font-size: .78rem;
font-family: var(--font-mono);
margin: .15rem 0 0;
}
.author-hero__bio {
color: var(--c-text-2);
font-size: .92rem;
line-height: 1.65;
margin: .5rem 0 1rem;
max-width: none;
}
.author-hero__links {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
font-size: .82rem;
color: var(--c-text-3);
}
.author-hero__links a {
color: var(--c-blue);
text-decoration: none;
font-weight: 600;
}
.author-hero__links a:hover {
text-decoration: underline;
}
/* ============================================================
Blog Admin
============================================================ */
/* ── Login ─────────────────────────────────────────────────── */
.admin-login-card {
max-width: 400px;
margin: 0 auto;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 2rem;
}
.admin-login-card .form-field {
display: flex;
flex-direction: column;
gap: .35rem;
margin-bottom: 1rem;
}
.admin-login-card label {
font-size: .78rem;
font-weight: 600;
color: var(--c-text-2);
}
.admin-login-card input {
width: 100%;
padding: .7rem .9rem;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
color: var(--c-text);
font-size: .92rem;
}
.admin-login-card input:focus {
outline: none;
border-color: var(--c-blue);
}
/* ── Topbar ────────────────────────────────────────────────── */
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.admin-topbar h1 small {
font-weight: 400;
font-size: .7em;
color: var(--c-text-3);
}
.admin-topbar__actions {
display: flex;
gap: .5rem;
}
/* ── Success msg ───────────────────────────────────────────── */
.admin-success {
background: rgba(34,197,94,.12);
border: 1px solid rgba(34,197,94,.4);
color: #22c55e;
padding: .75rem 1rem;
border-radius: var(--r-sm);
margin-bottom: 1rem;
font-size: .88rem;
}
/* ── Posts table ───────────────────────────────────────────── */
.admin-table-wrap {
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: .85rem;
}
.admin-table th {
text-align: left;
padding: .7rem .6rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text-3);
border-bottom: 2px solid var(--c-border);
}
.admin-table td {
padding: .65rem .6rem;
border-bottom: 1px solid var(--c-border);
vertical-align: middle;
}
.admin-row--draft {
opacity: .6;
}
.admin-td-title a {
color: var(--c-text);
text-decoration: none;
font-weight: 600;
}
.admin-td-title a:hover {
color: var(--c-blue);
}
.admin-td-author {
color: var(--c-text-3);
font-size: .78rem;
}
.admin-td-date {
font-family: var(--font-mono);
font-size: .75rem;
color: var(--c-text-3);
}
.admin-td-actions {
display: flex;
gap: .4rem;
flex-wrap: wrap;
}
.admin-action {
font-size: .72rem;
font-weight: 600;
padding: .2rem .4rem;
border-radius: var(--r-sm);
text-decoration: none;
background: none;
border: 1px solid var(--c-border);
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.admin-action:hover {
border-color: var(--c-blue);
color: var(--c-blue);
}
.admin-action--ok {
color: #22c55e;
border-color: rgba(34,197,94,.3);
}
.admin-action--ok:hover {
border-color: #22c55e;
background: rgba(34,197,94,.1);
}
.admin-action--warn {
color: #f59e0b;
border-color: rgba(245,158,11,.3);
}
.admin-action--warn:hover {
border-color: #f59e0b;
background: rgba(245,158,11,.1);
}
.admin-action--danger {
color: #ef4444;
border-color: rgba(239,68,68,.3);
}
.admin-action--danger:hover {
border-color: #ef4444;
background: rgba(239,68,68,.1);
}
/* ── Badges ────────────────────────────────────────────────── */
.admin-badge {
display: inline-block;
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: .15rem .4rem;
border-radius: var(--r-sm);
}
.admin-badge--pub {
background: rgba(34,197,94,.12);
color: #22c55e;
}
.admin-badge--draft {
background: rgba(245,158,11,.12);
color: #f59e0b;
}
/* ── Language dots ─────────────────────────────────────────── */
.admin-lang-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.admin-lang-dot--ok {
background: #22c55e;
}
.admin-lang-dot--no {
background: var(--c-border);
}
/* ── Edit form ─────────────────────────────────────────────── */
.admin-edit-form .form-field {
display: flex;
flex-direction: column;
gap: .3rem;
margin-bottom: .75rem;
}
.admin-edit-form label {
font-size: .75rem;
font-weight: 600;
color: var(--c-text-2);
}
.admin-edit-form input[type="text"],
.admin-edit-form input[type="date"],
.admin-edit-form input[type="email"],
.admin-edit-form select {
width: 100%;
padding: .55rem .75rem;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-hi);
border-radius: var(--r-sm);
color: var(--c-text);
font-size: .88rem;
font-family: inherit;
}
.admin-edit-form input:focus,
.admin-edit-form select:focus {
outline: none;
border-color: var(--c-blue);
}
.admin-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem 1.5rem;
margin-bottom: 1.5rem;
}
.form-field--full {
grid-column: 1 / -1;
}
.admin-checkbox label {
display: flex;
align-items: center;
gap: .5rem;
font-size: .88rem;
cursor: pointer;
}
.admin-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
}
@media (max-width: 640px) {
.admin-edit-grid {
grid-template-columns: 1fr;
}
}
/* ── Tabs FR/EN ────────────────────────────────────────────── */
.admin-tabs {
display: flex;
align-items: center;
gap: .5rem;
border-bottom: 2px solid var(--c-border);
margin-bottom: 1rem;
padding-bottom: .5rem;
flex-wrap: wrap;
}
.admin-tab {
padding: .4rem .8rem;
border: none;
background: none;
font-family: inherit;
font-size: .85rem;
font-weight: 600;
color: var(--c-text-3);
cursor: pointer;
border-radius: var(--r-sm) var(--r-sm) 0 0;
transition: all .15s;
}
.admin-tab:hover {
color: var(--c-text);
}
.admin-tab--active {
color: var(--c-blue);
border-bottom: 2px solid var(--c-blue);
margin-bottom: -2px;
}
.admin-tabs__spacer {
flex: 1;
}
/* ── EasyMDE overrides for dark theme ──────────────────────── */
.EasyMDEContainer .CodeMirror {
background: var(--c-surface) !important;
color: var(--c-text) !important;
border-color: var(--c-border-hi) !important;
}
.EasyMDEContainer .editor-toolbar {
background: var(--c-bg-2) !important;
border-color: var(--c-border) !important;
}
.EasyMDEContainer .editor-toolbar button {
color: var(--c-text-2) !important;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
background: rgba(255,255,255,.08) !important;
color: var(--c-text) !important;
}
.EasyMDEContainer .editor-statusbar {
color: var(--c-text-3) !important;
}
.EasyMDEContainer .CodeMirror-cursor {
border-color: var(--c-text) !important;
}
.EasyMDEContainer .editor-preview {
background: var(--c-surface) !important;
color: var(--c-text-2) !important;
}
/* ── Edit actions ──────────────────────────────────────────── */
.admin-edit-actions {
display: flex;
gap: .75rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.btn--sm {
padding: .3rem .6rem;
font-size: .75rem;
}