/* ==========================================================================
EL-Link — Liquid Glass
The rule that makes this both authentic and fast:
GLASS IS FOR CHROME. CONTENT IS OPAQUE.
In Apple's system the translucency lives on the navigation and control
layers — the floating bar, menus, popovers, the search field. Content
underneath is solid. That is why it stays smooth: only a handful of
surfaces ever sample the backdrop, and most of them are transient.
An earlier attempt put backdrop-filter on 41 elements including every card,
sitting over an animated blur. That is what made the page stutter. Here the
blur count is bounded and nothing filtered is ever animated.
What sells the glass, in order of importance:
1. a bright specular hairline along the top edge (inset box-shadow)
2. a rim gradient, brightest top-left, masked to 1px
3. backdrop-filter blur + saturate so the backdrop bends and enriches
4. a soft, wide, low-opacity shadow lifting it off the page
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
--brand-50: #eef8fc;
--brand-100: #d5eef7;
--brand-200: #a9dfef;
--brand-300: #6fcae4;
--brand-400: #29b0d3;
--brand-500: #00a3c6;
--brand-600: #0086a6;
--brand-700: #026c86;
--brand-800: #0a5268;
--brand-900: #0c3b52;
--navy-900: #0a1220;
--navy-800: #101a2c;
--navy-700: #17253c;
/* Electric blue carries the interactive weight; cyan is the highlight. */
--blue-400: #4d8dff;
--blue-500: #2f6fe4;
--blue-600: #1f56c4;
--cyan-400: #35d6f5;
--cyan-500: #22c9ec;
--slate-500: #64748b;
--slate-300: #cbd5e1;
--amber: #c77b12;
--danger: #c0343c;
--success: #12734f;
/* Neutrals in the Apple register: near-black label, cool-neutral greys. */
--label: #1d1d1f;
--label-2: #424248;
--label-3: #6e6e73;
--paper: #f8fbff;
--paper-2: #edf5ff;
--paper-3: #f6faff;
--surface: #ffffff;
--surface-2: #fbfcfd;
--bg: transparent;
--bg-alt: rgba(255, 255, 255, 0.55);
--bg-deep: #e4e9ef;
--text: var(--label);
--text-soft: var(--label-2);
--text-faint: #5c5c63;
--line: rgba(20, 30, 42, 0.09);
--line-strong: rgba(20, 30, 42, 0.16);
/* Glass recipe — chrome only. */
--glass-blur: 26px;
--glass-sat: 190%;
--glass-bg: rgba(255, 255, 255, 0.68);
--glass-bg-strong: rgba(255, 255, 255, 0.82);
--glass-edge: rgba(255, 255, 255, 0.75);
--spec: rgba(255, 255, 255, 0.92);
--shadow-xs: 0 1px 2px rgba(16, 32, 43, 0.05);
--shadow-sm: 0 2px 6px rgba(16, 32, 43, 0.06);
--shadow-md: 0 6px 18px rgba(16, 32, 43, 0.08), 0 1px 3px rgba(16, 32, 43, 0.05);
--shadow-lg: 0 18px 44px rgba(16, 32, 43, 0.14), 0 4px 10px rgba(16, 32, 43, 0.06);
--shadow-float: 0 10px 34px rgba(16, 32, 43, 0.13), 0 2px 8px rgba(16, 32, 43, 0.06);
/* Generous and consistent — Apple radii are large. */
--r-xs: 8px;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 220ms;
--t-base: 400ms;
--t-slow: 700ms;
--t-reveal: 850ms;
--nav-h: 60px;
--nav-gap: 14px;
--container: 1200px;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
:root[data-theme='dark'] {
--label: #f5f5f7;
--label-2: #c6c6cc;
--label-3: #98989f;
--paper: #0e141a;
--paper-2: #131b23;
--surface: #182028;
--surface-2: #1d262f;
--bg-alt: rgba(255, 255, 255, 0.05);
--bg-deep: #0a1015;
--text: var(--label);
--text-soft: var(--label-2);
--text-faint: #a4a4ac;
--line: rgba(255, 255, 255, 0.11);
--line-strong: rgba(255, 255, 255, 0.2);
--glass-bg: rgba(30, 40, 50, 0.62);
--glass-bg-strong: rgba(30, 40, 50, 0.8);
--glass-edge: rgba(255, 255, 255, 0.16);
--spec: rgba(255, 255, 255, 0.26);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.5);
--shadow-float: 0 10px 34px rgba(0, 0, 0, 0.45);
}
/* --------------------------------------------------------------------------
2. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + var(--nav-gap) * 2 + 12px);
background: var(--paper);
}
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.011em;
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
main { overflow-x: clip; }
a { color: var(--brand-700); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-500); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
line-height: 1.14;
font-weight: 650;
letter-spacing: -0.025em;
color: var(--text);
}
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--brand-200); color: var(--brand-900); }
/* --------------------------------------------------------------------------
3. Ground
Neutral, not a rainbow. Two very soft desaturated washes give the glass
something to bend without the page reading as a toy. Static: one element,
no filter, no animation.
-------------------------------------------------------------------------- */
.mesh {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(60% 44% at 82% 0%, rgba(77, 141, 255, 0.16) 0%, rgba(77, 141, 255, 0) 66%),
radial-gradient(50% 40% at 6% 22%, rgba(53, 214, 245, 0.13) 0%, rgba(53, 214, 245, 0) 68%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper-3) 100%);
}
:root[data-theme='dark'] .mesh {
background:
radial-gradient(58% 46% at 78% 4%, rgba(40, 90, 125, 0.30) 0%, rgba(40, 90, 125, 0) 68%),
radial-gradient(52% 42% at 10% 26%, rgba(48, 70, 95, 0.28) 0%, rgba(48, 70, 95, 0) 70%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 62%, var(--paper) 100%);
}
.mesh__blob { display: none; }
/* --------------------------------------------------------------------------
4. Surfaces
Content surfaces are opaque — this is what keeps scrolling smooth. Only the
chrome in section 11 samples the backdrop.
-------------------------------------------------------------------------- */
.glass, .glass-2, .glass-3, .panel {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.glass { box-shadow: var(--shadow-xs); }
.glass-2, .panel { box-shadow: var(--shadow-sm); }
.glass-3 { box-shadow: var(--shadow-md); }
[data-specular] { isolation: auto; }
[data-specular]::after { content: none; }
/* --------------------------------------------------------------------------
5. Layout
-------------------------------------------------------------------------- */
.container, .container-fluid { width: 100%; margin-inline: auto; padding-inline: 22px; }
.container { max-width: var(--container); }
.container-narrow { max-width: 820px; margin-inline: auto; padding-inline: 22px; }
.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--gutter, 24px) / -2); }
.row > * { padding-inline: calc(var(--gutter, 24px) / 2); margin-bottom: var(--row-gap, 0px); width: 100%; }
.g-0{--gutter:0px;--row-gap:0px}.g-1{--gutter:8px;--row-gap:8px}.g-2{--gutter:16px;--row-gap:16px}
.g-3{--gutter:22px;--row-gap:22px}.g-4{--gutter:26px;--row-gap:26px}.g-5{--gutter:38px;--row-gap:38px}
.col { flex: 1 0 0%; width: auto; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}
.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}
.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}
.order-1{order:1}.order-2{order:2}.order-3{order:3}
.d-none{display:none !important}.d-block{display:block !important}
.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}
.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}
.d-grid{display:grid !important}
@media (min-width: 576px) {
.col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}
.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
.col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}
.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}
@media (min-width: 768px) {
.col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}
.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}
.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
.text-md-start{text-align:left}
.d-md-none{display:none !important}.d-md-inline{display:inline !important}
.d-md-inline-block{display:inline-block !important}.d-md-inline-flex{display:inline-flex !important}
.d-md-block{display:block !important}.d-md-flex{display:flex !important}
}
@media (min-width: 992px) {
.col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}
.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}
.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}
.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
.order-lg-1{order:1}.order-lg-2{order:2}
.d-lg-none{display:none !important}.d-lg-block{display:block !important}
.d-lg-inline-flex{display:inline-flex !important}.d-lg-flex{display:flex !important}
}
@media (min-width: 1200px) { .col-xl-3{width:25%}.col-xl-4{width:33.3333%}.col-xl-6{width:50%} }
.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-grow-1{flex-grow:1}
.justify-content-start{justify-content:flex-start}.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start{align-items:flex-start}.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}.align-self-center{align-self:center}
.text-center{text-align:center}.text-start{text-align:left}.text-end{text-align:right}
.gap-1{gap:.5rem}.gap-2{gap:.75rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}
.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.ms-0{margin-left:0}.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}.ms-auto{margin-left:auto}
.me-0{margin-right:0}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}.me-4{margin-right:1.5rem}.me-auto{margin-right:auto}
.my-2{margin-block:.5rem}.my-3{margin-block:1rem}.my-4{margin-block:1.5rem}.my-5{margin-block:3rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:2.5rem}
.pt-0{padding-top:0}.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}.pt-5{padding-top:2.5rem}
.pb-0{padding-bottom:0}.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}.pb-5{padding-bottom:2.5rem}
.px-3{padding-inline:1rem}.px-4{padding-inline:1.5rem}
.py-2{padding-block:.5rem}.py-3{padding-block:1rem}.py-4{padding-block:1.5rem}.py-5{padding-block:2.5rem}
.w-100{width:100%}.h-100{height:100%}
.min-vh-50{min-height:50vh}.min-vh-100{min-height:100vh}
.position-relative{position:relative}.position-static{position:static}
.overflow-hidden{overflow:hidden}
.border-0{border:0 !important}
.rounded-2{border-radius:var(--r-sm)}.rounded-3{border-radius:var(--r-md)}.rounded-pill{border-radius:var(--r-pill)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.list-unstyled{list-style:none;padding-left:0}
.text-decoration-none{text-decoration:none}
.text-break{overflow-wrap:anywhere;word-break:break-word}
.is-hidden{display:none}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fw-normal{font-weight:400}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.fw-bold{font-weight:700}
.fs-4{font-size:1.35rem}.small{font-size:.875rem}
.text-muted{color:var(--text-faint) !important}
.text-soft{color:var(--text-soft) !important}
.text-accent{color:var(--brand-700) !important}
.text-primary{color:var(--navy-900) !important}
.text-danger{color:var(--danger) !important}
.text-success{color:var(--success) !important}
.text-white{color:#fff !important}
/* --------------------------------------------------------------------------
6. Typography
-------------------------------------------------------------------------- */
.display-1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); font-weight: 700; letter-spacing: -0.037em; line-height: 1.06; }
.hero-title {
font-size: clamp(2.15rem, 4.6vw, 3.6rem);
font-weight: 700;
letter-spacing: -0.036em;
line-height: 1.07;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
font-weight: 400;
color: var(--text-soft);
letter-spacing: -0.012em;
max-width: 52ch;
margin-bottom: 1.9rem;
}
.section-title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.032em; margin-bottom: 0.5rem; }
.section-subtitle { font-size: 1.05rem; color: var(--text-soft); max-width: 60ch; margin-bottom: 0; letter-spacing: -0.012em; }
.text-gradient {
background: linear-gradient(96deg, var(--brand-600) 0%, var(--brand-400) 50%, #6f8fe0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Capsule kicker — a small piece of glass in its own right. */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.34rem 0.8rem;
font-size: 0.76rem; font-weight: 600;
letter-spacing: 0.005em;
color: var(--brand-800);
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--glass-edge);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs), inset 0 1px 0 0 rgba(255,255,255,0.9);
margin-bottom: 1rem;
}
.eyebrow .icon { display: inline-block; color: var(--brand-500); }
:root[data-theme='dark'] .eyebrow { color: var(--brand-200); background: rgba(255,255,255,0.08); }
/* --------------------------------------------------------------------------
7. Icons
-------------------------------------------------------------------------- */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.135em; }
.icon--lg { width: 1.4em; height: 1.4em; }
.icon--xl { width: 2em; height: 2em; }
.icon-sprite { display: none; }
/* --------------------------------------------------------------------------
8. Buttons — capsules, as in the Apple system
-------------------------------------------------------------------------- */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
padding: 0.68rem 1.35rem;
font-size: 0.95rem; font-weight: 550; line-height: 1.25;
letter-spacing: -0.014em;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs);
transition: transform var(--t-fast) var(--ease),
box-shadow var(--t-base) var(--ease),
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
white-space: nowrap; text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.97); opacity: 0.86; transition-duration: 90ms; }
.btn-accent {
color: #fff;
background: var(--brand-700);
border-color: transparent;
box-shadow: 0 2px 8px rgba(2, 108, 134, 0.28), inset 0 1px 0 0 rgba(255,255,255,0.22);
}
.btn-accent:hover { color: #fff; background: var(--brand-800); }
.btn-primary { color: #fff; background: var(--navy-900); border-color: transparent; }
.btn-primary:hover { color: #fff; background: var(--navy-800); }
.btn-outline-primary { color: var(--brand-700); background: rgba(255,255,255,0.7); border-color: var(--line-strong); }
.btn-outline-primary:hover { color: var(--brand-800); background: #fff; }
.btn-outline-secondary { color: var(--text-soft); background: rgba(255,255,255,0.7); border-color: var(--line-strong); }
.btn-outline-secondary:hover { color: var(--text); background: #fff; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-soft); }
.btn-ghost:hover { background: rgba(20,30,42,0.06); color: var(--text); box-shadow: none; }
.btn-lg { padding: 0.88rem 1.75rem; font-size: 1.02rem; }
.btn-sm { padding: 0.48rem 1rem; font-size: 0.87rem; }
.btn-block, .btn.w-100 { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: 0.55; pointer-events: none; }
:root[data-theme='dark'] .btn { background: rgba(255,255,255,0.09); border-color: var(--line-strong); }
:root[data-theme='dark'] .btn-outline-primary,
:root[data-theme='dark'] .btn-outline-secondary { background: rgba(255,255,255,0.07); }
/* --------------------------------------------------------------------------
9. Forms
-------------------------------------------------------------------------- */
.form-label { display: block; margin-bottom: 0.4rem; font-size: 0.87rem; font-weight: 600; color: var(--text); }
.form-group { margin-bottom: 1.1rem; }
.form-control, .form-control-custom, .form-select, textarea.form-control {
display: block; width: 100%;
padding: 0.72rem 1rem;
font-size: 0.96rem; color: var(--text);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
outline: none; border-color: var(--brand-500);
box-shadow: 0 0 0 4px rgba(0, 163, 198, 0.16);
}
:root[data-theme='dark'] .form-control,
:root[data-theme='dark'] .form-select { background: rgba(255,255,255,0.06); }
.form-select {
appearance: none; padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.95rem center;
}
textarea.form-control { min-height: 140px; resize: vertical; }
.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .form-control { padding-left: 2.7rem; }
.input-group-text {
position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; color: var(--text-faint);
pointer-events: none; z-index: 2; transition: color var(--t-fast) var(--ease);
}
.input-group:focus-within .input-group-text { color: var(--brand-600); }
.input-action {
position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
color: var(--text-faint); z-index: 2;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.input-action:hover { background: rgba(20,30,42,0.07); color: var(--brand-700); }
.form-check { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 0.75rem; }
.form-check input[type='checkbox'], .form-check input[type='radio'] {
width: 17px; height: 17px; margin-top: 0.22rem;
accent-color: var(--brand-600); flex: none; cursor: pointer;
}
.form-check label { font-size: 0.91rem; color: var(--text-soft); cursor: pointer; }
.otp-row { display: flex; gap: 0.5rem; justify-content: center; margin-block: 1.3rem; }
.otp-digit {
/* Fluid, not fixed: a fixed width sets the automatic minimum size, so six
boxes could not shrink and overflowed the card on narrow phones. */
flex: 1 1 0; min-width: 0; max-width: 54px; height: 60px;
text-align: center; font-size: 1.4rem; font-weight: 650; padding: 0;
border-radius: var(--r-sm);
background: var(--surface);
border: 1px solid var(--line-strong);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.otp-digit:focus { outline: none; transform: scale(1.04); border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(0,163,198,0.18); }
.otp-digit.is-filled { border-color: var(--brand-300); }
@media (max-width: 420px) { .otp-digit { height: 52px; font-size: 1.15rem; } .otp-row { gap: 0.3rem; } }
.auth-shell {
display: flex; align-items: center; justify-content: center;
min-height: calc(100vh - var(--nav-h) - var(--nav-gap) * 2);
padding: 3.5rem 22px;
}
.auth-card { width: 100%; max-width: 450px; padding: 2.3rem; border-radius: var(--r-xl); }
.auth-card--wide { max-width: 590px; }
.auth-head { text-align: center; margin-bottom: 1.7rem; }
.auth-head h1 { font-size: 1.7rem; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
.auth-head p { color: var(--text-soft); margin: 0; font-size: 0.95rem; }
.auth-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; margin-bottom: 1rem;
border-radius: var(--r-md);
color: #fff;
background: linear-gradient(160deg, var(--brand-500), var(--brand-800));
box-shadow: 0 6px 16px rgba(2,108,134,0.3), inset 0 1px 0 0 rgba(255,255,255,0.3);
}
.auth-foot { margin-top: 1.4rem; text-align: center; font-size: 0.92rem; color: var(--text-soft); }
@media (max-width: 480px) { .auth-card { padding: 1.75rem 1.3rem; } }
/* --------------------------------------------------------------------------
10. Alerts
-------------------------------------------------------------------------- */
.alert, .alert-custom {
display: flex; align-items: flex-start; gap: 0.65rem;
padding: 0.85rem 1rem; margin-bottom: 1.1rem;
font-size: 0.91rem;
border-radius: var(--r-sm);
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
}
.alert .icon { margin-top: 0.2em; flex: none; }
.alert-success { border-color: rgba(18,115,79,0.26); background: #eef8f3; color: #0d5c3f; }
.alert-danger, .alert-error { border-color: rgba(192,52,60,0.26); background: #fdf0f1; color: #96262d; }
.alert-warning { border-color: rgba(199,123,18,0.28); background: #fdf6ea; color: #85520d; }
.alert-info { border-color: rgba(0,163,198,0.26); background: var(--brand-50); color: var(--brand-800); }
:root[data-theme='dark'] .alert { background: rgba(255,255,255,0.06); color: var(--text); }
:root[data-theme='dark'] .alert-success { color: #6fdcae; }
:root[data-theme='dark'] .alert-danger { color: #ffa2a8; }
:root[data-theme='dark'] .alert-warning { color: #ffce8c; }
:root[data-theme='dark'] .alert-info { color: var(--brand-200); }
/* --------------------------------------------------------------------------
11. Floating capsule navigation
The bar is detached from the viewport edge and rides above the content as a
single piece of glass — the defining move of the Liquid Glass system.
-------------------------------------------------------------------------- */
.util-bar {
background: transparent;
color: var(--text-faint);
font-size: 0.8rem;
}
.util-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; padding-top: 6px; }
.util-bar__group { display: flex; align-items: center; gap: 1.3rem; }
.util-bar a { color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.35rem; }
.util-bar a:hover { color: var(--brand-700); }
.util-bar .icon { color: var(--brand-500); }
@media (max-width: 767.98px) { .util-bar__group--secondary { display: none; } }
.nav-shell {
position: sticky;
top: var(--nav-gap);
z-index: 1000;
width: calc(100% - 32px);
max-width: var(--container);
margin: var(--nav-gap) auto 0;
border-radius: var(--r-pill);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-float), inset 0 1px 0 0 var(--spec);
transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* The rim — what separates glass from a translucent rectangle. */
.nav-shell::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(140deg,
rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 32%,
rgba(255,255,255,0.04) 58%, rgba(150,205,230,0.34) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.nav-shell.is-scrolled { background: var(--glass-bg-strong); box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--spec); }
/* The pill supplies its own gutter, so the inner container must not add one. */
.nav-shell .container { max-width: none; padding-inline: 8px; }
.nav-inner { position: relative; display: flex; align-items: center; gap: 0.9rem; height: var(--nav-h); }
.nav-brand { display: inline-flex; align-items: center; flex: none; padding-left: 0.85rem; }
.nav-brand img { height: 32px; width: auto; transition: transform var(--t-base) var(--ease); }
.nav-brand:hover img { transform: scale(1.04); }
.nav-links { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.nav-menu { display: flex; align-items: center; flex: 1; gap: 0.8rem; }
.nav-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; padding-right: 0.35rem; }
.nav-link {
position: relative;
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.5rem 0.85rem;
font-size: 0.92rem; font-weight: 500;
letter-spacing: -0.014em;
color: var(--text);
border-radius: var(--r-pill);
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-link .icon { display: none; }
.nav-link .nav-caret { display: inline-block; }
.nav-link:hover, .nav-link[aria-expanded='true'] { color: var(--brand-800); background: rgba(255,255,255,0.72); }
.nav-link.is-active { color: var(--brand-800); font-weight: 600; background: rgba(255,255,255,0.62); }
.nav-caret { transition: transform var(--t-base) var(--ease); }
.nav-link[aria-expanded='true'] .nav-caret { transform: rotate(180deg); }
.nav-search { position: relative; flex: 0 1 240px; margin-left: auto; }
.nav-search input {
width: 100%;
padding: 0.46rem 0.9rem 0.46rem 2.3rem;
font-size: 0.88rem;
color: var(--text);
background: rgba(255,255,255,0.6);
border: 1px solid var(--glass-edge);
border-radius: var(--r-pill);
transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-search input:focus { outline: none; background: #fff; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(0,163,198,0.16); }
.nav-search .icon { position: absolute; left: 0.82rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
/* Floating glass panels hung beneath the pill. */
.mega {
position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 40;
padding: 1.7rem 1.6rem 1.5rem;
border-radius: var(--r-xl);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--spec);
opacity: 0; visibility: hidden;
transform: translateY(-8px) scale(0.99); transform-origin: top center;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s; }
.mega .container { max-width: none; padding-inline: 0; }
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem 1.8rem; }
.mega__title {
display: block; font-size: 0.74rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--text-faint);
padding-bottom: 0.45rem; margin-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
}
.mega__title:hover { color: var(--brand-700); }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__link {
display: flex; align-items: center; gap: 0.35rem;
padding: 0.38rem 0.55rem; margin-left: -0.55rem;
font-size: 0.91rem; color: var(--text);
border-radius: var(--r-xs);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mega__link:hover { background: rgba(255,255,255,0.8); color: var(--brand-800); }
.mega__link .icon { color: var(--brand-400); font-size: 0.78em; }
.mega__foot { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.dropdown { position: relative; }
.dropdown__menu {
position: absolute; top: calc(100% + 12px); right: 0;
min-width: 210px; padding: 0.4rem; list-style: none; margin: 0;
border-radius: var(--r-md);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--spec);
opacity: 0; visibility: hidden;
transform: translateY(-6px) scale(0.97); transform-origin: top right;
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
z-index: 50;
}
.dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease), visibility 0s; }
.dropdown__item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: var(--r-xs); font-size: 0.92rem; color: var(--text); transition: background var(--t-fast) var(--ease); }
.dropdown__item:hover { background: rgba(255,255,255,0.85); }
.dropdown__item--danger { color: var(--danger); }
.nav-user {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.3rem 0.7rem 0.3rem 0.3rem;
border-radius: var(--r-pill);
border: 1px solid var(--glass-edge);
background: rgba(255,255,255,0.66);
font-size: 0.88rem; font-weight: 500; color: var(--text);
transition: background var(--t-fast) var(--ease);
}
.nav-user:hover { background: #fff; }
.nav-avatar {
display: grid; place-items: center;
width: 27px; height: 27px; border-radius: 50%;
color: #fff; font-size: 0.76rem; font-weight: 650;
background: linear-gradient(160deg, var(--brand-500), var(--brand-800));
flex: none;
}
.theme-toggle {
display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 50%;
color: var(--text-soft);
border: 1px solid var(--glass-edge);
background: rgba(255,255,255,0.6);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: #fff; color: var(--text); }
.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 50%; place-items: center; margin-left: auto; margin-right: 0.4rem; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--text); transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 991.98px) {
.nav-toggle { display: grid; }
.nav-search { display: none; }
.nav-menu {
position: absolute; top: calc(100% + 12px); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0.15rem;
max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
padding: 0.9rem;
border-radius: var(--r-xl);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--spec);
opacity: 0; visibility: hidden;
transform: translateY(-8px) scale(0.99); transform-origin: top center;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s; }
.nav-links { flex-direction: column; align-items: stretch; }
.nav-link { justify-content: space-between; padding: 0.72rem 0.85rem; }
.nav-actions { margin-left: 0; margin-top: 0.7rem; padding: 0.7rem 0 0; border-top: 1px solid var(--line); }
.nav-actions .btn, .nav-actions .nav-link, .nav-actions .nav-user { flex: 1; justify-content: center; }
.mega {
position: static; padding: 0.3rem 0 0.5rem; border: none; border-radius: 0;
background: transparent; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
display: none; opacity: 1; visibility: visible; transform: none;
}
.mega.is-open { display: block; }
.mega__grid { grid-template-columns: 1fr; gap: 0.9rem; }
.mega__foot { display: none; }
.dropdown__menu {
position: static; transform: none; opacity: 1; visibility: hidden; display: none;
box-shadow: none; margin-top: 0.3rem; border: none; background: transparent;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.dropdown__menu.is-open { display: block; visibility: visible; }
.nav-shell { width: calc(100% - 20px); }
}
/* --------------------------------------------------------------------------
12. Sections
-------------------------------------------------------------------------- */
.section { position: relative; padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--deferred { }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 3.5vw, 2.9rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.section-bar .section-head { margin-bottom: 0; }
/* --------------------------------------------------------------------------
13. Hero
-------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.75rem, 5vw, 4rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.hero-media { position: relative; }
.hero-search { margin-bottom: 1.1rem; max-width: 530px; }
.hero-search__field {
position: relative; display: flex;
padding: 0.34rem;
border-radius: var(--r-pill);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-float), inset 0 1px 0 0 var(--spec);
transition: box-shadow var(--t-base) var(--ease);
}
.hero-search__field:focus-within { box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0,163,198,0.16), inset 0 1px 0 0 var(--spec); }
.hero-search__field .icon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); z-index: 2; }
.hero-search input {
flex: 1; min-width: 0;
padding: 0.72rem 0.9rem 0.72rem 2.6rem;
font-size: 1rem; color: var(--text);
background: transparent; border: 0; border-radius: var(--r-pill);
}
.hero-search input:focus { outline: none; }
.hero-search button { flex: none; padding-inline: 1.5rem; }
.hero-search__hint { margin: 0.75rem 0 0; font-size: 0.86rem; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.hero-search__hint a { color: var(--text-soft); }
.hero-search__hint a:hover { color: var(--brand-700); }
.trust-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.5rem; }
/* --------------------------------------------------------------------------
14. Cards — opaque, generously rounded
-------------------------------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.card-body { padding: 1.4rem; flex: 1; }
.tile {
position: relative;
display: flex; flex-direction: column; height: 100%;
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none; color: inherit;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tile__media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
background: linear-gradient(170deg, #f7f9fb, #eef2f6);
border-bottom: 1px solid var(--line);
}
.tile__media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform var(--t-slow) var(--ease); }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.28rem; flex: 1; }
.tile__eyebrow { font-size: 0.73rem; font-weight: 600; letter-spacing: -0.005em; color: var(--text-faint); }
.tile__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.019em; margin: 0; transition: color var(--t-fast) var(--ease); }
.tile:hover .tile__title { color: var(--brand-700); }
.tile__text { font-size: 0.88rem; color: var(--text-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__cta { display: inline-flex; align-items: center; gap: 0.28rem; margin-top: auto; padding-top: 0.7rem; font-size: 0.86rem; font-weight: 600; color: var(--brand-700); }
.tile__cta .icon { transition: transform var(--t-base) var(--ease); }
.tile:hover .tile__cta .icon { transform: translateX(3px); }
.tile__flag {
position: absolute; top: 0.65rem; right: 0.65rem; z-index: 3;
display: inline-flex; align-items: center; gap: 0.28rem;
padding: 0.26rem 0.6rem;
font-size: 0.72rem; font-weight: 600;
color: var(--brand-900);
background: rgba(255,255,255,0.9);
border: 1px solid var(--glass-edge);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs);
}
.cat-card {
position: relative;
display: flex; flex-direction: column; height: 100%;
min-height: 268px; padding: 1.5rem;
border-radius: var(--r-lg);
overflow: hidden;
color: #fff; text-decoration: none;
isolation: isolate;
box-shadow: var(--shadow-sm);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
.cat-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, rgba(16,32,43,0.34) 0%, rgba(10,22,32,0.9) 84%); }
.cat-card:hover img { transform: scale(1.05); opacity: 0.72; }
.cat-card__count { font-size: 0.73rem; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-200); }
.cat-card h3 { margin: 0.3rem 0 0.4rem; font-size: 1.3rem; letter-spacing: -0.028em; color: #fff; }
.cat-card p { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.84); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card__cta { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 600; color: #fff; }
.cat-card__cta .icon { transition: transform var(--t-base) var(--ease); }
.cat-card:hover .cat-card__cta .icon { transform: translateX(3px); }
.feature-card {
height: 100%; padding: 1.6rem;
border-radius: var(--r-lg);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon {
display: grid; place-items: center;
width: 46px; height: 46px; margin-bottom: 1rem;
border-radius: var(--r-sm);
color: #fff;
background: linear-gradient(160deg, var(--brand-500), var(--brand-800));
box-shadow: 0 5px 14px rgba(2,108,134,0.28), inset 0 1px 0 0 rgba(255,255,255,0.28);
}
.feature-card h3 { font-size: 1.05rem; letter-spacing: -0.022em; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.91rem; color: var(--text-soft); margin: 0; }
.feature-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 500; color: var(--text-soft); }
.feature-item .icon { color: var(--brand-600); }
.feature-badge {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.7rem;
font-size: 0.79rem; font-weight: 600;
color: var(--brand-800);
background: rgba(255,255,255,0.75);
border: 1px solid var(--glass-edge);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs);
}
:root[data-theme='dark'] .feature-badge { color: var(--brand-200); background: rgba(255,255,255,0.08); }
.stat-item { padding: 0; }
.stat-number { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.stat-label { font-size: 0.85rem; color: var(--text-soft); }
.step-card { position: relative; height: 100%; padding: 1.6rem; border-radius: var(--r-lg); }
.step-card__num {
display: grid; place-items: center;
width: 34px; height: 34px; margin-bottom: 0.9rem;
border-radius: 50%;
font-size: 0.85rem; font-weight: 650; color: #fff;
background: linear-gradient(160deg, var(--brand-500), var(--brand-800));
box-shadow: 0 4px 12px rgba(2,108,134,0.26);
}
.step-card h3 { font-size: 1.02rem; letter-spacing: -0.022em; margin-bottom: 0.4rem; }
.step-card p { font-size: 0.91rem; color: var(--text-soft); margin-bottom: 0.7rem; }
.range-item {
display: flex; align-items: center; gap: 0.6rem; height: 100%;
padding: 0.9rem 1.05rem;
border-radius: var(--r-md);
font-size: 0.9rem; font-weight: 500;
transition: transform var(--t-base) var(--ease);
}
.range-item:hover { transform: translateY(-2px); }
.range-item .icon { color: var(--brand-600); }
.cta-banner {
position: relative;
padding: clamp(2rem, 4vw, 3rem);
border-radius: var(--r-xl);
overflow: hidden;
color: #fff;
background: linear-gradient(140deg, var(--navy-900) 0%, var(--brand-800) 100%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: var(--shadow-lg), inset 0 1px 0 0 rgba(255,255,255,0.18);
}
.cta-banner .section-title, .cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.84); }
.cta-banner .btn-accent { background: #fff; border-color: transparent; color: var(--brand-900); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.cta-banner .btn-accent:hover { background: var(--brand-50); color: var(--navy-900); }
/* --------------------------------------------------------------------------
15. Page furniture
-------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-faint); margin-bottom: 0.9rem; }
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--brand-700); }
.crumbs .icon { font-size: 0.8em; }
.page-head { position: relative; padding: clamp(1.8rem, 3.5vw, 2.75rem) 0 clamp(1.4rem, 2.5vw, 2rem); }
.toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
padding: 0.75rem 0.9rem;
border-radius: var(--r-pill);
margin-bottom: 1.8rem;
}
.toolbar .input-group { flex: 1; min-width: 210px; }
.toolbar .form-control { background: transparent; border-color: transparent; box-shadow: none; }
.toolbar .form-control:focus { background: var(--surface); box-shadow: none; }
.empty-state { text-align: center; padding: 3.5rem 1.5rem; border-radius: var(--r-xl); }
.empty-state .icon { color: var(--brand-400); margin: 0 auto 0.9rem; }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after {
content: ''; position: absolute; inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
img[data-fade] { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
img[data-fade].is-loaded { opacity: 1; }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.28rem; margin-top: 2rem; }
.prose h3 { font-size: 1.06rem; margin-top: 1.5rem; }
.prose p, .prose li { color: var(--text-soft); }
.prose > :first-child { margin-top: 0; }
/* --------------------------------------------------------------------------
16. Footer
-------------------------------------------------------------------------- */
.site-footer {
position: relative;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2.75rem, 5vw, 4rem);
color: rgba(255,255,255,0.76);
background: var(--navy-900);
}
.site-footer h4, .site-footer .footer-title { color: #fff; }
.footer-logo { height: 34px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-about { font-size: 0.9rem; color: rgba(255,255,255,0.7); max-width: 40ch; }
.footer-title { font-size: 0.79rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: rgba(255,255,255,0.76); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.footer-links a:hover { color: #fff; transform: translateX(3px); }
.footer-links .icon { color: var(--brand-300); font-size: 0.82em; }
.contact-item { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.95rem; }
.contact-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--line); }
.site-footer .contact-icon { color: var(--brand-200); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.contact-details { display: flex; flex-direction: column; }
.contact-label { font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; }
.site-footer .contact-label { color: rgba(255,255,255,0.56); }
.contact-value { font-size: 0.92rem; color: var(--text); }
.site-footer .contact-value { color: rgba(255,255,255,0.9); }
a.contact-value:hover { color: var(--brand-700); }
.site-footer a.contact-value:hover { color: #fff; }
.footer-bottom { margin-top: 2.4rem; padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: rgba(255,255,255,0.58); }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: space-between; }
.footer-bottom a { color: rgba(255,255,255,0.76); }
.footer-bottom a:hover { color: #fff; }
.to-top {
position: fixed; right: 20px; bottom: 20px; z-index: 900;
display: grid; place-items: center;
width: 46px; height: 46px; border-radius: 50%;
color: var(--brand-800);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-float), inset 0 1px 0 0 var(--spec);
opacity: 0; visibility: hidden;
transform: translateY(10px) scale(0.94);
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s; }
.to-top:hover { transform: translateY(-2px) scale(1.05); }
/* --------------------------------------------------------------------------
17. Motion
-------------------------------------------------------------------------- */
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, 16px, 0);
transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal='left'], .js [data-reveal='right'], .js [data-reveal='scale'] { transform: translate3d(0, 16px, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.no-motion [data-reveal], .no-motion .fade-up-init {
opacity: 1 !important; transform: none !important; transition: none !important;
}
[data-parallax] { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); }
[data-tilt] { transform: none; }
.js .fade-up-init { opacity: 0; transform: translate3d(0, 14px, 0); }
body.is-ready .fade-up-init {
opacity: 1; transform: none;
transition: opacity var(--t-reveal) var(--ease) var(--enter-delay, 0ms),
transform var(--t-reveal) var(--ease) var(--enter-delay, 0ms);
}
.page-veil { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--paper); opacity: 0; transition: opacity 260ms var(--ease); }
.page-veil.is-active { opacity: 0.5; }
.progress-bar-top {
position: fixed; top: 0; left: 0; z-index: 10000;
height: 2px; width: 100%;
transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
transition: transform 260ms var(--ease), opacity 300ms var(--ease);
}
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* --------------------------------------------------------------------------
18. Accessibility, fallbacks, print
-------------------------------------------------------------------------- */
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 10001;
padding: 0.65rem 1.1rem; border-radius: var(--r-pill);
background: var(--brand-800); color: #fff; font-weight: 600;
transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; }
[data-parallax] { transform: none !important; }
.fade-up-init { opacity: 1 !important; transform: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-shell, .mega, .dropdown__menu, .nav-menu, .hero-search__field, .to-top {
background: rgba(255, 255, 255, 0.97) !important;
}
:root[data-theme='dark'] .nav-shell,
:root[data-theme='dark'] .mega,
:root[data-theme='dark'] .dropdown__menu,
:root[data-theme='dark'] .nav-menu,
:root[data-theme='dark'] .hero-search__field,
:root[data-theme='dark'] .to-top { background: #1a232c !important; }
}
@media print {
.nav-shell, .util-bar, .site-footer, .to-top, .page-veil, .mesh { display: none !important; }
body { background: #fff; color: #000; }
.glass, .glass-2, .glass-3, .panel, .tile, .card { box-shadow: none; border: 1px solid #ccc; }
}
/* --------------------------------------------------------------------------
19. Utility overrides — last, so utilities beat components
-------------------------------------------------------------------------- */
.m-0{margin:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.ms-0{margin-left:0}.me-0{margin-right:0}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.p-0{padding:0}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}
.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}.pt-5{padding-top:2.5rem}
.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}.pb-5{padding-bottom:2.5rem}
.py-2{padding-block:.5rem}.py-3{padding-block:1rem}.py-4{padding-block:1.5rem}.py-5{padding-block:2.5rem}
.w-100{width:100%}
.text-center{text-align:center}
/* ==========================================================================
20. Showcase layer
The pieces that make this read as a product site rather than a catalogue:
a dark band, a 3D product stage, floating spec pills, an animated topology
and the network canvas.
Performance rules still hold — nothing here adds a persistent
backdrop-filter to content, and the only continuous animation is one canvas
that pauses itself when off screen or when the tab is hidden.
========================================================================== */
/* --- Network canvas ------------------------------------------------------ */
.netfield {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s var(--ease);
}
.netfield.is-live { opacity: 1; }
.netfield canvas { display: block; width: 100%; height: 100%; }
.hero > .container, .band-dark > .container { position: relative; z-index: 1; }
/* --- Dark band ----------------------------------------------------------- */
.band-dark {
position: relative;
overflow: hidden;
color: #eaf0f8;
background:
radial-gradient(70% 60% at 78% 0%, rgba(47, 111, 228, 0.28) 0%, rgba(47, 111, 228, 0) 62%),
radial-gradient(56% 50% at 10% 100%, rgba(53, 214, 245, 0.16) 0%, rgba(53, 214, 245, 0) 64%),
linear-gradient(165deg, #0a1220 0%, #101a2c 58%, #0b1424 100%);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark .section-title { color: #fff; }
.band-dark p, .band-dark .section-subtitle { color: rgba(233, 240, 250, 0.72); }
.band-dark .eyebrow {
color: var(--cyan-400);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: none;
}
.band-dark .text-gradient {
background: linear-gradient(96deg, var(--cyan-400) 0%, var(--blue-400) 60%, #a9b8ff 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.band-dark .btn-outline-primary {
color: #dbe6f7; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22);
}
.band-dark .btn-outline-primary:hover { color: #fff; background: rgba(255,255,255,0.14); }
.band-dark .feature-item { color: rgba(233,240,250,0.78); }
.band-dark .feature-item .icon { color: var(--cyan-400); }
.band-dark .tile { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.band-dark .tile:hover { background: rgba(255,255,255,0.09); }
.band-dark .tile__title { color: #fff; }
.band-dark .tile__eyebrow { color: rgba(233,240,250,0.6); }
.band-dark .tile__cta { color: var(--cyan-400); }
.band-dark .tile__media { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.1); }
.band-dark .tile__flag { color: #eaf2ff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
/* --- 3D product stage ---------------------------------------------------- */
.stage {
position: relative;
display: grid;
place-items: center;
min-height: 360px;
perspective: 1200px;
}
.stage__product {
position: relative;
width: min(100%, 440px);
transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 600ms var(--ease);
}
.stage__product.is-live { transition: transform 120ms linear; }
.stage__product img {
width: 100%;
filter: drop-shadow(0 18px 26px rgba(4, 10, 22, 0.55));
}
/* Reflection: a flipped, faded copy fading out downward. */
.stage__reflection {
position: absolute;
top: 100%; left: 0; right: 0;
height: 44%;
overflow: hidden;
pointer-events: none;
opacity: 0.22;
transform: scaleY(-1);
-webkit-mask-image: linear-gradient(to top, transparent 4%, #000 92%);
mask-image: linear-gradient(to top, transparent 4%, #000 92%);
}
.stage__reflection img { width: 100%; filter: none; }
/* Contact shadow on the floor, which slides with the tilt. */
.stage__shadow {
position: absolute;
bottom: -5%; left: 50%;
width: 60%; height: 24px;
transform: translateX(calc(-50% + var(--shadow-x, 0px)));
background: radial-gradient(50% 50% at 50% 50%, rgba(4, 10, 22, 0.5) 0%, rgba(4, 10, 22, 0) 72%);
filter: blur(6px);
transition: transform 600ms var(--ease);
pointer-events: none;
}
/* --- Floating spec pills ------------------------------------------------- */
.spec-pill {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.8rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: -0.008em;
color: #eaf2ff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--r-pill);
box-shadow: 0 6px 20px rgba(3, 8, 18, 0.4), inset 0 1px 0 0 rgba(255,255,255,0.2);
cursor: default;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
animation: pill-float 7s var(--ease-soft) infinite alternate;
animation-delay: var(--float-delay, 0s);
}
.spec-pill .icon { color: var(--cyan-400); }
.spec-pill:hover, .spec-pill:focus-within {
background: rgba(255,255,255,0.18);
border-color: rgba(53, 214, 245, 0.45);
}
/* The explanation. Grid-rows animation so revealing it cannot shift layout. */
.spec-pill__note {
display: grid;
grid-template-columns: 0fr;
overflow: hidden;
opacity: 0;
transition: grid-template-columns var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.spec-pill__note > span {
min-width: 0;
overflow: hidden;
font-weight: 400;
color: rgba(234,242,255,0.82);
padding-left: 0.35rem;
}
.spec-pill:hover .spec-pill__note,
.spec-pill:focus-within .spec-pill__note { grid-template-columns: 1fr; opacity: 1; }
@keyframes pill-float {
from { transform: translateY(0); }
to { transform: translateY(-9px); }
}
.spec-pill--tl { top: 4%; left: -1%; }
.spec-pill--tr { top: 18%; right: -3%; }
.spec-pill--bl { bottom: 24%; left: -4%; }
.spec-pill--br { bottom: 6%; right: -1%; }
@media (max-width: 991.98px) {
.spec-pill { position: static; animation: none; }
.stage__reflection, .stage__shadow { display: none; }
.stage { min-height: 0; perspective: none; }
.stage__product { transform: none !important; }
.spec-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; }
}
@media (min-width: 992px) { .spec-row { display: contents; } }
/* --- Ecosystem topology -------------------------------------------------- */
.topo { position: relative; }
.topo__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 1rem;
position: relative;
z-index: 1;
}
.topo__node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
padding: 1.3rem 0.9rem;
text-align: center;
border-radius: var(--r-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.topo__node:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.topo__icon {
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
color: var(--cyan-400);
background: rgba(53, 214, 245, 0.12);
border: 1px solid rgba(53, 214, 245, 0.3);
}
.topo__name { font-size: 0.92rem; font-weight: 600; color: #fff; }
.topo__meta { font-size: 0.78rem; color: rgba(233,240,250,0.62); }
/* The line drawing itself between nodes as the section scrolls into view. */
.topo__link {
position: absolute;
top: 52px;
left: 8%;
right: 8%;
height: 2px;
z-index: 0;
background: linear-gradient(90deg,
rgba(53,214,245,0) 0%, rgba(53,214,245,0.5) 10%,
rgba(77,141,255,0.5) 90%, rgba(77,141,255,0) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.8s var(--ease);
}
.topo.is-in .topo__link { transform: scaleX(1); }
@media (max-width: 767.98px) { .topo__link { display: none; } }
/* --- Stats --------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.6rem 1rem; }
.stat-item { text-align: center; }
/* On light cards the ramp runs blue-600 to navy — cyan on white measures
1.97:1, which fails even the large-text minimum. Cyan is reserved for the
dark band, where it has the contrast to carry it. */
.stat-number {
font-variant-numeric: tabular-nums;
background: linear-gradient(96deg, var(--blue-600), var(--navy-800));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.band-dark .stat-number {
background: linear-gradient(96deg, var(--cyan-400), var(--blue-400));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.band-dark .stat-label { color: rgba(233,240,250,0.66); }
/* --- Micro-interactions -------------------------------------------------- */
.btn-accent { position: relative; }
.btn-accent::after {
content: '';
position: absolute; inset: -1px;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(53, 214, 245, 0);
transition: box-shadow var(--t-base) var(--ease);
pointer-events: none;
}
.btn-accent:hover::after { box-shadow: 0 0 22px 2px rgba(53, 214, 245, 0.35); }
.tile:hover .tile__media img { transform: scale(1.05) rotate(1.5deg); }
@media (prefers-reduced-motion: reduce) {
.spec-pill { animation: none; }
.topo__link { transform: scaleX(1) !important; transition: none; }
.netfield { display: none; }
.stage__product { transform: none !important; }
}
/* ==========================================================================
21. Hero showpiece
The right-hand column was carrying only stat text and read as empty. It now
holds a live topology — router, switch, cameras, recorder — which says what
EL-Link sells before a word is read.
========================================================================== */
/* --- Pointer light -------------------------------------------------------- */
.hero { isolation: isolate; }
.hero__glow {
position: absolute;
top: 0; left: 0;
width: 620px; height: 620px;
z-index: 0;
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle,
rgba(53, 214, 245, 0.20) 0%,
rgba(47, 111, 228, 0.11) 34%,
rgba(47, 111, 228, 0) 68%);
opacity: 0;
transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
transition: opacity 700ms var(--ease);
will-change: transform;
}
.hero__glow.is-live { opacity: 1; }
/* --- Topology showpiece --------------------------------------------------- */
.netmap {
position: relative;
width: 100%;
max-width: 440px;
margin-inline: auto;
aspect-ratio: 1 / 0.95;
}
.netmap__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.netmap__wire {
fill: none;
stroke: rgba(31, 86, 196, 0.28);
stroke-width: 1.5;
stroke-linecap: round;
}
/* The travelling packet: one short dash chasing along each wire. */
.netmap__flow {
fill: none;
stroke: var(--cyan-500);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 5 190;
animation: flow 3.4s linear infinite;
animation-delay: var(--flow-delay, 0s);
filter: drop-shadow(0 0 4px rgba(53, 214, 245, 0.8));
}
@keyframes flow { from { stroke-dashoffset: 195; } to { stroke-dashoffset: 0; } }
.netmap__node {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0.7rem 0.55rem 0.55rem;
min-width: 86px;
border-radius: var(--r-md);
text-align: center;
/* No backdrop-filter here on purpose. There are five of these and they sit
permanently in the hero; blurring each one was how the page got slow
before. On a pale gradient a near-opaque card is indistinguishable. */
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 6px 20px rgba(16, 32, 43, 0.10), inset 0 1px 0 0 rgba(255,255,255,0.95);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
cursor: default;
}
.netmap__node:hover, .netmap__node:focus-within {
transform: translate(-50%, -50%) scale(1.07);
box-shadow: 0 12px 30px rgba(16, 32, 43, 0.16), 0 0 0 3px rgba(53, 214, 245, 0.3);
}
.netmap__icon {
display: grid; place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
color: #fff;
background: linear-gradient(160deg, var(--blue-500), var(--navy-800));
box-shadow: 0 3px 10px rgba(31, 86, 196, 0.35);
}
.netmap__label { font-size: 0.74rem; font-weight: 650; letter-spacing: -0.01em; color: var(--navy-900); }
.netmap__sub { font-size: 0.66rem; color: var(--text-faint); }
/* Positions expressed as percentages so the whole map scales with the box. */
.netmap__node--router { top: 11%; left: 50%; }
.netmap__node--switch { top: 45%; left: 50%; }
.netmap__node--cam1 { top: 84%; left: 16%; }
.netmap__node--cam2 { top: 84%; left: 50%; }
.netmap__node--nvr { top: 84%; left: 84%; }
/* A slow pulse on the switch marks it as the active hub. */
.netmap__node--switch .netmap__icon::after {
content: '';
position: absolute;
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid rgba(53, 214, 245, 0.55);
animation: hub-pulse 3.2s var(--ease-soft) infinite;
}
@keyframes hub-pulse {
0% { transform: scale(1); opacity: 0.8; }
70% { transform: scale(2.1); opacity: 0; }
100% { transform: scale(2.1); opacity: 0; }
}
@media (max-width: 991.98px) { .netmap { max-width: 360px; } }
/* --- Stat cards ----------------------------------------------------------- */
.stat-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
padding: 1rem 0.75rem;
border-radius: var(--r-md);
text-align: center;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-xs);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
overflow: hidden;
}
.stat-card::after {
content: '';
position: absolute; inset: -1px;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(53, 214, 245, 0);
transition: box-shadow var(--t-base) var(--ease);
pointer-events: none;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card:hover::after { box-shadow: 0 0 20px 1px rgba(53, 214, 245, 0.32); }
.stat-card .stat-number { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.stat-card .stat-label { font-size: 0.76rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
.netmap__flow { animation: none; stroke-dasharray: none; opacity: 0.5; }
.netmap__node--switch .netmap__icon::after { animation: none; opacity: 0; }
.hero__glow { display: none; }
}
/* Resources dropdown opens from the left edge of its trigger, unlike the
account menu which is right-aligned at the end of the bar. */
.dropdown__menu--start { right: auto; left: 0; transform-origin: top left; }
/* Solutions cards inside the mega panel sit on light glass, not the dark
topology background the .topo__node class was written for. */
.mega .netmap-solution {
background: rgba(255, 255, 255, 0.7);
border-color: var(--line);
color: var(--text);
}
.mega .netmap-solution:hover { background: #fff; border-color: var(--brand-300); }
/* The nav carries five items now; give the search a little less room so the
bar does not crowd between 992 and 1200px. */
@media (max-width: 1199.98px) { .nav-search { flex-basis: 170px; } }
/* ==========================================================================
22. 3D hardware scene
Real CSS 3D geometry — each device is a six-faced box with genuine depth,
not an image with a tilt applied. A WebGL library would have been another
~150KB and a third-party dependency; boxes are transform-only, composited,
and cost nothing to animate.
The whole scene shares one perspective and rotates toward the pointer, so
the devices move together as real objects rather than independently.
========================================================================== */
.dev3d {
position: relative;
width: 100%;
max-width: 460px;
margin-inline: auto;
aspect-ratio: 1 / 0.94;
perspective: 1400px;
perspective-origin: 50% 42%;
}
.dev3d__scene {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(var(--rx, 14deg)) rotateY(var(--ry, -22deg));
transition: transform 700ms var(--ease);
}
.dev3d__scene.is-live { transition: transform 140ms linear; }
/* Reusable box. Faces are centred on the box origin, then pushed out along
their own axis by half the relevant dimension. */
.box3d {
position: absolute;
top: 50%; left: 50%;
width: var(--w); height: var(--h);
transform-style: preserve-3d;
}
.box3d > i {
position: absolute;
top: 50%; left: 50%;
display: block;
background: var(--face, #223047);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.box3d > .f-front,
.box3d > .f-back { width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2); }
.box3d > .f-left,
.box3d > .f-right { width: var(--d); height: var(--h); margin-left: calc(var(--d) / -2); margin-top: calc(var(--h) / -2); }
.box3d > .f-top,
.box3d > .f-bottom{ width: var(--w); height: var(--d); margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2); }
.box3d > .f-front { transform: translateZ(calc(var(--d) / 2)); }
.box3d > .f-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.box3d > .f-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.box3d > .f-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.box3d > .f-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.box3d > .f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
/* Shading: lit from the top-left, so each face gets its own value. */
.box3d > .f-top { --face: #34475f; }
.box3d > .f-front { --face: #223047; }
.box3d > .f-left { --face: #1a2537; }
.box3d > .f-right { --face: #16202f; }
.box3d > .f-back,
.box3d > .f-bottom { --face: #121a27; }
/* ---- Recorder / NVR: the hero object ------------------------------------ */
.dev-nvr {
--w: 250px; --h: 46px; --d: 168px;
transform: translate3d(-50%, -50%, 0) translateY(58px);
}
.dev-nvr .f-front {
background: linear-gradient(180deg, #2b3b55 0%, #1d2942 100%);
display: flex; align-items: center; gap: 7px;
padding: 0 14px;
}
/* Drive bays */
.dev-nvr .bay {
width: 34px; height: 26px;
border-radius: 2px;
background: linear-gradient(180deg, #16202f, #0f1724);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
position: relative;
}
.dev-nvr .bay::after {
content: '';
position: absolute; right: 4px; top: 50%; margin-top: -2px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--cyan-400);
box-shadow: 0 0 6px 1px rgba(53, 214, 245, 0.9);
animation: led 2.6s steps(1, end) infinite;
animation-delay: var(--led-delay, 0s);
}
.dev-nvr .brandmark {
margin-left: auto;
font-size: 8px; font-weight: 700; letter-spacing: 0.16em;
color: rgba(255,255,255,0.5);
}
@keyframes led { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.25; } }
/* ---- PoE switch --------------------------------------------------------- */
.dev-switch {
--w: 210px; --h: 26px; --d: 116px;
transform: translate3d(-50%, -50%, 0) translate3d(-58px, -62px, 74px);
}
.dev-switch .f-front {
background: linear-gradient(180deg, #2f4260 0%, #1f2c44 100%);
display: flex; align-items: center; gap: 3px;
padding: 0 10px;
}
.dev-switch .port {
width: 11px; height: 9px;
border-radius: 1px;
background: #0e1622;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
position: relative;
}
.dev-switch .port::after {
content: '';
position: absolute; inset: auto 2px 1px 2px; height: 2px;
background: rgba(53, 214, 245, 0.85);
box-shadow: 0 0 5px 1px rgba(53,214,245,0.7);
animation: led 1.9s steps(1, end) infinite;
animation-delay: var(--led-delay, 0s);
}
/* ---- Dome camera -------------------------------------------------------- */
.dev-cam {
position: absolute;
top: 50%; left: 50%;
width: 104px; height: 104px;
transform-style: preserve-3d;
transform: translate3d(-50%, -50%, 0) translate3d(112px, -74px, 96px);
}
/* Ceiling plate */
.dev-cam__base {
position: absolute; inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #3d5372 0%, #22304a 58%, #172233 100%);
box-shadow: 0 16px 34px rgba(4, 10, 22, 0.5);
transform: rotateX(90deg) translateZ(-14px);
}
/* The dome itself — shading does the sphere, no geometry needed. */
.dev-cam__dome {
position: absolute;
left: 12px; top: 12px;
width: 80px; height: 80px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 26%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0) 46%),
radial-gradient(circle at 62% 74%, rgba(53,214,245,0.22) 0%, rgba(53,214,245,0) 52%),
radial-gradient(circle at 50% 44%, #2b3d59 0%, #16202f 72%, #0e1622 100%);
box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 10px 26px rgba(4,10,22,0.45);
transform: translateZ(16px);
}
/* Lens */
.dev-cam__lens {
position: absolute;
left: 34px; top: 32px;
width: 34px; height: 34px;
border-radius: 50%;
background: radial-gradient(circle at 38% 34%, #4b6a92 0%, #101a28 62%, #060b12 100%);
box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 0 2px rgba(255,255,255,0.05);
transform: translateZ(26px);
}
.dev-cam__lens::after {
content: '';
position: absolute; left: 8px; top: 7px;
width: 9px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
filter: blur(1px);
}
/* IR ring */
.dev-cam__ir {
position: absolute;
left: 26px; top: 24px;
width: 50px; height: 50px;
border-radius: 50%;
border: 2px solid rgba(53, 214, 245, 0.22);
transform: translateZ(22px);
animation: ir 3.4s var(--ease-soft) infinite;
}
@keyframes ir {
0%, 100% { opacity: 0.25; transform: translateZ(22px) scale(1); }
50% { opacity: 0.7; transform: translateZ(22px) scale(1.06); }
}
/* ---- Floor shadow + labels ---------------------------------------------- */
.dev3d__floor {
position: absolute;
left: 50%; bottom: 8%;
width: 74%; height: 34px;
transform: translateX(calc(-50% + var(--shadow-x, 0px)));
background: radial-gradient(50% 50% at 50% 50%, rgba(4, 10, 22, 0.34) 0%, rgba(4, 10, 22, 0) 72%);
filter: blur(7px);
transition: transform 700ms var(--ease);
pointer-events: none;
}
.dev3d__tag {
position: absolute;
z-index: 4;
display: inline-flex; align-items: center; gap: 0.32rem;
padding: 0.3rem 0.65rem;
font-size: 0.72rem; font-weight: 650;
letter-spacing: -0.008em;
color: var(--navy-900);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: var(--r-pill);
box-shadow: 0 4px 14px rgba(16, 32, 43, 0.16);
white-space: nowrap;
}
.dev3d__tag .icon { color: var(--blue-500); }
.dev3d__tag--cam { top: 6%; right: 0; }
.dev3d__tag--sw { top: 30%; left: 0; }
.dev3d__tag--nvr { bottom: 12%; left: 50%; transform: translateX(-50%); }
@media (max-width: 991.98px) {
.dev3d { max-width: 330px; }
.dev3d__scene { transform: rotateX(14deg) rotateY(-22deg) scale(0.74); }
}
@media (prefers-reduced-motion: reduce) {
.dev-nvr .bay::after, .dev-switch .port::after, .dev-cam__ir { animation: none; }
.dev3d__scene { transition: none; }
}
/* Stat cards now live on the dark band, so they must be dark glass. Left as
white cards they inherited .band-dark's light label colour and the labels
measured 1.25:1. */
.band-dark .stat-card {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
}
.band-dark .stat-card:hover { background: rgba(255, 255, 255, 0.11); }
.band-dark .stat-label { color: rgba(233, 240, 250, 0.82); }
/* Mega panels now live inside their . On desktop they still resolve
against .nav-inner, so give the trigger's no positioning of its own —
only .dropdown (the Resources item) is a positioning context. */
.nav-item { position: static; }
.nav-item.dropdown { position: relative; }
/* Solutions cards inside the mega panel. */
.mega .netmap-solution {
display: flex; flex-direction: column; align-items: center; gap: .3rem;
padding: 1.1rem .9rem;
text-align: center;
text-decoration: none;
border-radius: var(--r-md);
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--line);
color: var(--text);
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mega .netmap-solution:hover { background: #fff; border-color: var(--brand-300); }
.mega .netmap-solution .feature-icon { width: 38px; height: 38px; margin-bottom: .4rem; }
.mega .netmap__label { font-size: .95rem; font-weight: 600; color: var(--navy-900); }
.mega .netmap__sub { font-size: .76rem; color: var(--text-faint); }
@media (max-width: 991.98px) {
/* In the drawer the panel is a normal block under its trigger. */
.nav-menu .mega { width: 100%; padding-left: 0; padding-right: 0; }
.nav-menu .mega .mega__grid { grid-template-columns: 1fr; gap: .5rem; }
.nav-menu .mega .netmap-solution { flex-direction: row; text-align: left; gap: .6rem; padding: .7rem .8rem; }
.nav-menu .mega .netmap-solution .feature-icon { margin-bottom: 0; width: 32px; height: 32px; }
.nav-menu .mega__title { margin-top: .3rem; }
/* Indent the panel contents so the hierarchy is legible. */
.nav-menu .mega .container { padding-left: .85rem; }
}