/*!
* File: site.css
* Copyright (c) 2026 CannaLog Technologies Limited. All rights reserved.
* Licensed to CannaLog. Proprietary and confidential.
*/
/* ==========================================================================
CannaLog Public Website — site.css
Central stylesheet for cannalog.co.uk
Aesthetic: Clinical Clarity — refined, trustworthy, modern medical.
Warm light grey base (#E8E8E4), deep forest green primary (#1E3A5F),
generous white space, Product Sans typography.
To update brand colours: edit the :root variables below only.
========================================================================== */
/* ==========================================================================
01. FONTS
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap');
/* ==========================================================================
02. DESIGN TOKENS
========================================================================== */
:root {
/* ── Typography ── */
--font-display: 'Google Sans', system-ui, -apple-system, sans-serif;
--font-body: 'Google Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'Roboto Mono', ui-monospace, monospace;
/* ── Palette ── */
--green: #1E3A5F;
--green-lt: #3A6FAA;
--green-mid: #2A4F7E;
--green-bg: #EAF0F7;
--green-dark: #0E2240;
--green-glow: rgba(30,58,95,0.15);
--bg: #ECEAE5;
--surface: #F5F4F0;
--surface-2: #EDECE8;
--border: #D6D4CE;
--border-lt: #E0DED9;
--text: #111511;
--muted: #4A4D47;
--hint: #6A6D67;
--amber: #B45309;
--amber-bg: #FEF3C7;
--red: #DC2626;
--red-bg: #FEF2F2;
--blue: #1E5FAD;
--blue-bg: #EFF6FF;
/* ── Nav chrome (separate from --surface so the bar can stay pure white
in light mode while page surfaces remain warm-grey, and adapt cleanly
to a dark surface in dark mode). ── */
--nav-bg: #fff;
--nav-hover-bg: rgba(17,21,17,0.05);
/* ── Spacing & Shape ── */
--radius: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(17,21,17,0.06), 0 1px 2px rgba(17,21,17,0.04);
--shadow-md: 0 4px 12px rgba(17,21,17,0.08), 0 2px 4px rgba(17,21,17,0.04);
--shadow-lg: 0 16px 40px rgba(17,21,17,0.12), 0 4px 12px rgba(17,21,17,0.06);
--shadow-green: 0 8px 32px rgba(30,58,95,0.2);
/* ── Layout ── */
--nav-h: 84px;
--max-w: 1160px;
--max-w-text: 680px;
/* ── Transitions & Motion Tokens ── */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--motion-duration-xs: 180ms;
--motion-duration-sm: 260ms;
--motion-duration-md: 420ms;
--motion-duration-lg: 700ms;
--motion-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--motion-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--motion-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ==========================================================================
02b. DARK MODE
Triggered by the OS / browser preference. No manual toggle yet — if you
want a user-controlled switch, add data-theme="dark" / "light" handling
on and mirror these values under that selector.
The brand navy (--green / --green-lt / --green-mid / --green-dark) carries
over unchanged — it reads correctly on both light and dark surfaces.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
/* Surfaces — bg is the deepest, surface is the lifted card */
--bg: #0B0F14;
--surface: #161A20;
--surface-2: #11151B;
--border: #2A2F37;
--border-lt: #1F242C;
/* Text */
--text: #F0F2F5;
--muted: #A2A8B3;
--hint: #737783;
/* Status / accent backgrounds — dark tints rather than pale washes */
--amber-bg: #3B2A0A;
--red-bg: #3A1414;
--blue-bg: #0E1F3A;
/* ── Brand navy lifted for dark-mode contrast ──
In light mode --green is deep navy (#1E3A5F) on white. On dark
surfaces that reads as low-contrast / nearly black-on-black, so
every accent, link, button and icon using var(--green) appears
"dark". We lift the whole brand ramp here to the cornflower /
sky family so the brand stays recognisable but legible. The
pale wash --green-bg flips to a deep tint, --green-dark stays
as the deep anchor (used for footer / hero backgrounds). */
--green: #60A5FA;
--green-lt: #93C5FD;
--green-mid: #4A7FB8;
--green-bg: #0F1F33;
--green-glow: rgba(96,165,250,0.18);
/* Nav chrome */
--nav-bg: #161A20;
--nav-hover-bg: rgba(255,255,255,0.06);
/* Shadows lifted slightly so they remain visible on dark surfaces.
--shadow-green keeps a brand tint, now matching the lifted
--green so the primary-button halo reads correctly. */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
--shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.35);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);
--shadow-green: 0 8px 32px rgba(96,165,250,0.25);
}
}
/* ==========================================================================
03. BASE RESET & ACCESSIBILITY
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--green);
text-decoration: none;
transition: opacity 0.15s ease;
}
a:hover {
opacity: 0.75;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hint);
}
h1, h2, h3, h4, h5, h6 {
background: transparent;
}
/* ── Focus Reset — Remove ugly UA rings, keep keyboard accessibility ── */
[role="button"]:focus, [tabindex]:focus, button:focus, a:focus, .step-item:focus, .hero-title:focus, .hero-title-em:focus {
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
*:focus {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(--green) !important;
outline-offset: 3px;
}
.step-item:focus-visible, .hero-title:focus-visible, .hero-title-em:focus-visible {
outline: none !important;
}
/* ── Horizontal-scroll container with edge shadow hints ── */
/* Shadows fade as the user reaches either edge, signalling that content
extends horizontally. Pure CSS — no JS scroll listener needed. */
.scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(90deg, var(--surface) 30%, rgba(255,255,255,0)) 0 0,
linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) 0 0,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
/* ── Skip-to-content link — visible only when focused via keyboard ── */
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 10000;
background: var(--green);
color: #fff;
padding: 10px 16px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
transform: translateY(-200%);
transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #fff !important;
outline-offset: 2px;
}
/* ==========================================================================
04. LAYOUT UTILITIES
========================================================================== */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
}
.section {
padding: 96px 0;
}
.section--sm {
padding: 64px 0;
}
.section--lg {
padding: 128px 0;
}
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 16px;
}
.section-label::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: var(--green);
border-radius: 1px;
}
.section-heading {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 20px;
}
.section-heading em {
font-style: normal;
color: var(--green);
}
.section-sub {
font-size: 18px;
color: var(--muted);
line-height: 1.65;
max-width: var(--max-w-text);
}
.text-center {
text-align: center;
}
.text-center .section-sub {
margin: 0 auto;
}
.text-center .section-label {
margin-left: auto;
margin-right: auto;
}
.disabled-link {
pointer-events: none;
cursor: not-allowed;
opacity: 0.45;
user-select: none;
}
.users-title {
background: transparent !important;
}
/* ==========================================================================
05. BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.2s var(--ease);
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.01em;
}
.btn-primary {
background: var(--green);
color: #fff;
border-color: var(--green);
box-shadow: var(--shadow-green);
}
.btn-primary:hover {
background: var(--green-lt);
border-color: var(--green-lt);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(30,58,95,0.28);
opacity: 1;
}
.btn-outline {
background: transparent;
color: var(--green);
border-color: var(--green);
}
.btn-outline:hover {
background: var(--green-bg);
transform: translateY(-1px);
opacity: 1;
}
.btn-ghost {
background: rgba(255,255,255,0.12);
color: #fff;
border-color: rgba(255,255,255,0.25);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background: rgba(255,255,255,0.2);
opacity: 1;
}
.btn-sm {
padding: 10px 20px;
font-size: 13px;
}
.btn-lg {
padding: 18px 36px;
font-size: 17px;
}
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ==========================================================================
06. NAVIGATION — Dark green, glass on home hero only
========================================================================== */
/* Solid white in every state — including over the navy home hero. The
data-nav="home" attribute on is still set by the layout but no
longer triggers a glass variant; the bar stays opaque white so the brand
reads consistently across pages. */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-h);
z-index: 100;
background: var(--nav-bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.nav-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
height: 100%;
display: flex;
align-items: center;
gap: 0;
}
.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
/* Logo hover — Schwarz-Rot-Gold reveal (a subtle but powerful homage).
The brand mark itself fills with the German flag's stripe order on
hover: black top third, red middle, gold bottom. Achieved via a
mask-image overlay — a span sits absolutely on top of the ![]()
with
the same SVG used as its mask, and a hard-stop tri-colour gradient
as its background. The gradient is clipped to the logo letterforms
exactly, so what reveals is the wordmark itself in flag colours. No
halo, no rectangle, no edges. The mask URL flips with the dark-mode
logo so the silhouette stays accurate in both palettes. */
.nav-logo {
position: relative; /* anchor for the absolute flag overlay */
}
.nav-logo-flag {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom,
#000000 0%, #000000 33.34%,
#DD0000 33.34%, #DD0000 66.66%,
#FFCE00 66.66%, #FFCE00 100%);
-webkit-mask-image: url('../img/cl-logo-v6-dark.svg');
mask-image: url('../img/cl-logo-v6-dark.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-logo:hover .nav-logo-flag {
opacity: 1;
}
/* Dark mode — swap the mask to the light-mark variant so the silhouette
matches whichever logo is actually rendered behind it. */
@media (prefers-color-scheme: dark) {
.nav-logo-flag {
-webkit-mask-image: url('../img/cl-logo-v7-light.svg');
mask-image: url('../img/cl-logo-v7-light.svg');
}
}
@media (prefers-reduced-motion: reduce) {
.nav-logo-flag { transition: none; }
}
.nav-logo-img {
height: 50px;
width: auto;
display: block;
object-fit: contain;
filter: none;
}
/* Light/dark logo swap — markup ships both ![]()
s, CSS shows the right one
for the current colour scheme. Avoids a flash on theme change because
neither needs to load lazily. */
.nav-logo-img--dark { display: none; }
@media (prefers-color-scheme: dark) {
.nav-logo-img--light { display: none; }
.nav-logo-img--dark { display: block; }
}
.nav-links {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 0 56px;
list-style: none;
flex: 1;
padding: 0;
}
.nav-links li {
display: flex;
align-items: center;
}
.nav-links a {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 14px;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: var(--muted);
border-radius: var(--radius-pill);
transition: color 0.2s ease, background 0.2s ease;
text-decoration: none;
letter-spacing: 0.01em;
white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
color: var(--text);
background: var(--nav-hover-bg);
opacity: 1;
}
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
@media (max-width: 768px) {
.nav-actions {
display: none;
}
}
.site-nav .btn {
height: 38px;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
}
.site-nav .btn-outline {
color: var(--text);
border-color: var(--border);
background: transparent;
}
.site-nav .btn-outline:hover {
background: var(--nav-hover-bg);
border-color: var(--green);
color: var(--green);
transform: translateY(-1px);
opacity: 1;
}
.site-nav .btn-primary {
box-shadow: 0 4px 16px rgba(30,58,95,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.nav-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
color: var(--text);
padding: 11px;
min-width: 44px;
min-height: 44px;
border-radius: var(--radius);
margin-left: auto;
transition: color 0.2s ease;
align-items: center;
justify-content: center;
}
.nav-mobile-toggle:hover {
color: var(--green);
}
/* ── Mobile menu overlay ── */
.mobile-menu {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 23, 46, 0.92);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
z-index: 99;
padding: 32px 24px;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease);
overflow-y: auto;
border-top: 1px solid rgba(96, 165, 250, 0.1);
}
.mobile-menu.open {
opacity: 1;
pointer-events: auto;
}
.mobile-nav-links {
list-style: none;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
.mobile-nav-links li {
border-bottom: 1px solid rgba(255,255,255,0.07);
transform: translateY(16px);
opacity: 0;
transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.mobile-menu.open .mobile-nav-links li {
transform: translateY(0);
opacity: 1;
}
.mobile-menu.open .mobile-nav-links li:nth-child(1) {
transition-delay: 0.04s;
}
.mobile-menu.open .mobile-nav-links li:nth-child(2) {
transition-delay: 0.08s;
}
.mobile-menu.open .mobile-nav-links li:nth-child(3) {
transition-delay: 0.12s;
}
.mobile-menu.open .mobile-nav-links li:nth-child(4) {
transition-delay: 0.16s;
}
.mobile-menu.open .mobile-nav-links li:nth-child(5) {
transition-delay: 0.20s;
}
.mobile-menu.open .mobile-nav-links li:nth-child(6) {
transition-delay: 0.24s;
}
.mobile-nav-links a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
font-weight: 500;
color: rgba(255,255,255,0.85);
text-decoration: none;
padding: 20px 0;
transition: color 0.2s, padding-left 0.25s var(--ease);
}
.mobile-nav-links a:hover {
color: #fff;
padding-left: 10px;
opacity: 1;
}
.mobile-nav-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 36px;
transform: translateY(16px);
opacity: 0;
transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
transition-delay: 0.28s;
padding-bottom: 32px;
}
.mobile-menu.open .mobile-nav-actions {
transform: translateY(0);
opacity: 1;
}
@media (min-width: 769px) {
.mobile-menu {
display: none !important;
}
}
/* ==========================================================================
07. HERO SECTION — Dark premium, ambient depth
========================================================================== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background: #08172E;
margin-bottom: 0;
}
.hero-canvas {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
}
.hero-glow--a {
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(30,58,95,0.45) 0%, transparent 70%);
top: -180px;
right: -120px;
animation: glowFloat 18s var(--motion-ease-soft) infinite;
animation-delay: -2s;
}
.hero-glow--b {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(58,111,170,0.25) 0%, transparent 70%);
bottom: 80px;
left: -100px;
animation: glowFloat 18s var(--motion-ease-soft) infinite;
animation-delay: -6s;
}
.hero-glow--c {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(30,58,95,0.18) 0%, transparent 70%);
top: 45%;
left: 38%;
animation: glowFloat 18s var(--motion-ease-soft) infinite;
animation-delay: -10s;
}
.hero-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.hero-lines {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px );
pointer-events: none;
}
.hero-container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 8;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: var(--nav-h);
padding-bottom: calc(var(--hero-wave-h, 160px) + 20px);
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.hero-copy {
display: flex;
flex-direction: column;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(58,111,170,0.12);
border: 1px solid rgba(58,111,170,0.3);
border-radius: var(--radius-pill);
padding: 7px 16px;
font-size: 12.5px;
font-weight: 600;
color: #A3C5F0;
margin-bottom: 28px;
width: fit-content;
letter-spacing: 0.01em;
}
.hero-badge-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #60A5FA;
flex-shrink: 0;
animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
0%,100% {
box-shadow: 0 0 0 0 rgba(96,165,250,0.6);
}
50% {
box-shadow: 0 0 0 6px rgba(96,165,250,0);
}
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(42px, 5vw, 68px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.035em;
color: #F0F4F1;
margin-bottom: 28px;
background: transparent !important;
-webkit-text-fill-color: #F0F4F1;
opacity: 1;
transform: none;
}
.animate-in .hero-title {
animation: heroTitleIn var(--motion-duration-lg) var(--motion-ease-smooth) both;
}
.hero-title-em {
font-style: normal;
/* Polished navy-iridescent shimmer. Eleven stops with a near-white peak
around 50% give the text a brushed-metal feel rather than a flat
gradient — reads more premium against the deep navy nav. */
background: linear-gradient(120deg,
#1E3A5F 0%,
#3A6FAA 12%,
#6A91C8 24%,
#93B4DD 36%,
#C7DBF0 46%,
#EAF2FB 50%,
#C7DBF0 54%,
#93B4DD 64%,
#6A91C8 76%,
#3A6FAA 88%,
#1E3A5F 100%);
background-size: 240% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent !important;
color: transparent !important;
isolation: isolate;
display: inline-block;
animation: shimmerSlow 9s ease-in-out infinite;
}
/* ── Gentle shimmer — opt-in for any heading on content pages ─── */
/* Keeps the heading typography unchanged but runs the brand greens
back-and-forth across the glyphs. Slow enough to read as ambient. */
.shimmer-em {
font-style: normal;
background: linear-gradient(120deg,
var(--green) 0%,
var(--green-lt) 45%,
var(--green) 55%,
var(--green-lt) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
animation: shimmerSlow 9s ease-in-out infinite;
}
@keyframes shimmerSlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Subtitle / section-header entrance ─────────────────────────────────
The page-hero pattern (Contact, What's New, Help, Find a Clinic, etc.)
is `.section--sm > .container.text-center > section-label / heading
/ section-sub`. Animate that triplet in with a subtle staggered fade
on first paint so the page feels alive without waiting on scroll. The
reveal is gated by prefers-reduced-motion further down in this file. */
@keyframes subtitleRise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.text-center .section-label,
.text-center .section-heading,
.text-center .section-sub {
animation: subtitleRise 0.7s var(--motion-ease-smooth) both;
}
.text-center .section-label { animation-delay: 0.05s; }
.text-center .section-heading { animation-delay: 0.18s; }
.text-center .section-sub { animation-delay: 0.32s; }
/* ── Staggered reveal helper for grids of [data-animate] children ─── */
/* Use on the parent of a grid where each child is individually marked
[data-animate]. The children will cascade in with a 60ms ramp instead
of all flashing into view at once. */
.animate-stagger > [data-animate]:nth-child(1) { transition-delay: 0s; }
.animate-stagger > [data-animate]:nth-child(2) { transition-delay: 0.06s; }
.animate-stagger > [data-animate]:nth-child(3) { transition-delay: 0.12s; }
.animate-stagger > [data-animate]:nth-child(4) { transition-delay: 0.18s; }
.animate-stagger > [data-animate]:nth-child(5) { transition-delay: 0.24s; }
.animate-stagger > [data-animate]:nth-child(6) { transition-delay: 0.30s; }
.animate-stagger > [data-animate]:nth-child(7) { transition-delay: 0.36s; }
.animate-stagger > [data-animate]:nth-child(8) { transition-delay: 0.42s; }
.animate-stagger > [data-animate]:nth-child(9) { transition-delay: 0.48s; }
.hero-desc {
font-size: 17px;
color: rgba(255,255,255,0.6);
line-height: 1.75;
margin-bottom: 40px;
max-width: 500px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 9px;
background: linear-gradient(135deg, #3A6FAA 0%, #1E3A5F 100%);
color: #fff;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
padding: 15px 30px;
border-radius: var(--radius-pill);
text-decoration: none;
letter-spacing: 0.01em;
box-shadow: 0 8px 32px rgba(30,58,95,0.45), 0 2px 8px rgba(0,0,0,0.3);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
border: 1px solid rgba(255,255,255,0.15);
}
.hero-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(30,58,95,0.55), 0 4px 12px rgba(0,0,0,0.3);
opacity: 1;
}
.hero-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.85);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 15px 24px;
border-radius: var(--radius-pill);
text-decoration: none;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(8px);
transition: all 0.2s var(--ease);
}
.hero-btn-ghost:hover {
background: rgba(255,255,255,0.1);
color: #fff;
opacity: 1;
}
.hero-trust {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.4);
}
.hero-trust-item svg {
color: rgba(96,165,250,0.7);
}
.hero-visual {
position: relative;
}
.animate-in .hero-visual {
animation: slideUp 0.7s var(--ease) both;
}
.hero-dashboard {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 24px;
backdrop-filter: blur(20px);
box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
}
.hero-dashboard::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(96,165,250,0.5), transparent);
}
.hero-dash-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.hero-dash-logo {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: #60A5FA;
}
.hero-dash-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #60A5FA;
background: rgba(96,165,250,0.1);
border: 1px solid rgba(96,165,250,0.2);
border-radius: var(--radius-pill);
padding: 3px 10px;
}
.hero-dash-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #60A5FA;
animation: pulse 2s ease-in-out infinite;
}
.hero-dash-greeting {
font-size: 18px;
font-weight: 700;
color: rgba(255,255,255,0.92);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.hero-dash-sub {
font-size: 12px;
color: rgba(255,255,255,0.4);
margin-bottom: 20px;
}
.hero-dash-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.hero-dash-stat {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 12px 14px;
position: relative;
}
.hero-dash-stat-val {
font-size: 20px;
font-weight: 700;
color: rgba(255,255,255,0.92);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 4px;
font-family: var(--font-display);
}
.hero-dash-stat-lbl {
font-size: 11px;
color: rgba(255,255,255,0.4);
font-weight: 500;
}
.hero-dash-stat-trend {
position: absolute;
top: 10px;
right: 12px;
font-size: 12px;
font-weight: 700;
}
.hero-dash-stat-trend.up {
color: #60A5FA;
}
.hero-dash-stat-trend.neutral {
color: rgba(255,255,255,0.3);
}
.hero-dash-section-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.3);
margin-bottom: 10px;
}
.hero-dash-sessions {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 18px;
}
.hero-dash-session {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.hero-dash-session:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.08);
}
.hero-dash-session-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #3A6FAA;
flex-shrink: 0;
}
.hero-dash-session-info {
flex: 1;
min-width: 0;
}
.hero-dash-session-product {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.82);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-dash-session-meta {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: 1px;
}
.hero-dash-session-score {
font-size: 14px;
font-weight: 700;
color: #60A5FA;
font-family: var(--font-display);
flex-shrink: 0;
}
.hero-dash-stock {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 12px 14px;
}
.hero-dash-stock-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.hero-dash-stock-label {
font-size: 11px;
color: rgba(255,255,255,0.45);
font-weight: 500;
}
.hero-dash-stock-val {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.75);
}
.hero-dash-stock-bar {
height: 5px;
background: rgba(255,255,255,0.08);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.hero-dash-stock-fill {
height: 100%;
background: linear-gradient(90deg, #3A6FAA, #60A5FA);
border-radius: 3px;
}
.hero-dash-stock-days {
font-size: 10px;
color: rgba(255,255,255,0.3);
}
.hero-accent {
position: absolute;
background: rgba(14,34,64,0.85);
border: 1px solid rgba(96,165,250,0.25);
border-radius: var(--radius-lg);
padding: 10px 16px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.85);
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
white-space: nowrap;
z-index: 2;
}
.hero-accent--tl {
top: -18px;
left: -24px;
animation: floatCard 6s ease-in-out infinite;
}
.hero-accent--br {
bottom: -18px;
right: -24px;
animation: floatCard 6s ease-in-out infinite;
animation-delay: 2.5s;
}
/* ==========================================================================
08. FEATURES / HOW IT WORKS
========================================================================== */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 64px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 36px 32px;
transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green), var(--green-lt));
opacity: 0;
transition: opacity 0.3s;
}
.feature-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
background: transparent;
box-shadow: 0 0 0 0 transparent;
transition: box-shadow 0.4s var(--ease);
pointer-events: none;
z-index: -1;
}
.feature-card:hover {
box-shadow: 0 20px 60px rgba(30,58,95,0.18), 0 8px 24px rgba(30,58,95,0.10), 0 2px 8px rgba(17,21,17,0.06);
transform: translateY(-6px);
border-color: rgba(30,58,95,0.35);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card:hover::after {
box-shadow: 0 0 40px 4px rgba(30,58,95,0.12), 0 0 80px 16px rgba(30,58,95,0.06);
}
.feature-number {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--green);
letter-spacing: 0.08em;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.feature-number::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: var(--green-bg);
border: 1px solid rgba(30,58,95,0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: background 0.2s, transform 0.2s;
}
.feature-card:hover .feature-icon {
background: var(--green);
transform: scale(1.05);
}
.feature-icon svg {
width: 24px;
height: 24px;
color: var(--green);
transition: color 0.2s;
}
.feature-card:hover .feature-icon svg {
color: #fff;
}
.feature-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.feature-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.65;
}
/* ==========================================================================
09. HOW IT WORKS — STEPS
========================================================================== */
.steps-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-top: 64px;
}
.steps-list {
display: flex;
flex-direction: column;
gap: 0;
}
.step-item {
display: flex;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid var(--border-lt);
cursor: pointer;
transition: background var(--motion-duration-sm) var(--motion-ease-soft), transform var(--motion-duration-sm) var(--motion-ease-soft), border-color var(--motion-duration-sm) var(--motion-ease-soft), opacity 0.2s;
}
.step-item:last-child {
border-bottom: none;
}
.step-item:not(.active) {
opacity: 0.55;
}
.step-item:hover {
opacity: 0.85;
transform: translateX(6px);
background: transparent;
border-color: var(--border);
}
.step-item.active {
background: transparent;
border-color: var(--border); /* Keeping a subtle border instead of the green block */
transform: translateX(8px);
opacity: 1;
}
.step-num {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: var(--hint);
flex-shrink: 0;
transition: all 0.2s;
}
.step-item.active .step-num {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.step-content {
flex: 1;
}
.step-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.step-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
}
.steps-visual {
position: relative;
}
.steps-img-wrap {
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--shadow-lg);
}
.steps-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.steps-img-wrap:hover img {
transform: scale(1.03);
}
/* ==========================================================================
10. SECURITY SECTION
========================================================================== */
.security-section {
background: var(--green-dark);
color: #fff;
position: relative;
overflow: hidden;
}
.security-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(30,58,95,0.4) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 10% 20%, rgba(58,111,170,0.2) 0%, transparent 60%);
pointer-events: none;
}
.security-grid-pattern {
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: 48px 48px;
pointer-events: none;
}
.security-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
.security-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-lt);
margin-bottom: 16px;
}
.security-label::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: var(--green-lt);
border-radius: 1px;
}
.security-title {
font-family: var(--font-display);
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: 20px;
}
.security-desc {
font-size: 17px;
color: rgba(255,255,255,0.7);
line-height: 1.65;
margin-bottom: 40px;
}
.security-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.security-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
backdrop-filter: blur(8px);
transition: background 0.2s;
}
.security-item:hover {
background: rgba(255,255,255,0.1);
}
.security-item-icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: rgba(58,111,170,0.2);
border: 1px solid rgba(58,111,170,0.3);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.security-item-icon svg {
width: 18px;
height: 18px;
color: var(--green-lt);
}
.security-item-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.security-item-desc {
font-size: 13px;
color: rgba(255,255,255,0.6);
line-height: 1.5;
}
.security-disclaimer {
font-size: 12px;
color: rgba(255,255,255,0.4);
margin-top: 24px;
line-height: 1.5;
}
.security-visual {
display: flex;
flex-direction: column;
gap: 16px;
}
.security-shield {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl);
padding: 48px 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.security-shield-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: rgba(30,58,95,0.25);
border: 2px solid rgba(58,111,170,0.4);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 60px rgba(30,58,95,0.3);
}
.security-shield-icon svg {
width: 48px;
height: 48px;
color: var(--green-lt);
}
.security-cert-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.security-cert {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-pill);
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.8);
letter-spacing: 0.02em;
}
/* ==========================================================================
11. WHAT'S NEW
========================================================================== */
.whats-new-grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 48px;
margin-top: 64px;
}
.whats-new-sidebar {
display: flex;
flex-direction: column;
gap: 12px;
}
.version-tab {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
border-radius: var(--radius-lg);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
border: 1px solid transparent;
text-align: left;
background: none;
width: 100%;
font-family: var(--font-body);
}
.version-tab:hover {
background: var(--surface);
}
.version-tab.active {
background: var(--surface);
border-color: var(--border);
box-shadow: var(--shadow-sm);
}
.version-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
.version-tag--new {
background: var(--green-bg);
color: var(--green);
}
.version-tag--beta {
background: var(--amber-bg);
color: var(--amber);
}
.version-tag--soon {
background: var(--surface-2);
color: var(--hint);
border: 1px solid var(--border);
}
.version-tab-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.version-tab-date {
font-size: 12px;
color: var(--hint);
}
.whats-new-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 40px;
}
.release-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 32px;
gap: 16px;
}
.release-version {
font-family: var(--font-mono);
font-size: 13px;
color: var(--hint);
margin-bottom: 8px;
}
.release-title {
font-size: 24px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
}
.release-date {
font-size: 13px;
color: var(--hint);
margin-top: 4px;
}
.release-features {
display: flex;
flex-direction: column;
gap: 20px;
}
.release-feature {
display: flex;
gap: 14px;
align-items: flex-start;
}
.release-feature-icon {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--green-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.release-feature-icon svg {
width: 16px;
height: 16px;
color: var(--green);
}
.release-feature-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.release-feature-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
}
/* ── Version-switch transition ───────────────────────────────────────
Blazor remounts the panel via @@key="SelectedRelease" whenever the
user picks a new version in the sidebar. The CSS below orchestrates a
fade-rise on the panel and a cascading slide-in on each feature, so
the content materialises rather than snapping in. Works equally on
the Legal tabs which reuse the same .animate-fade-in class. */
.animate-fade-in {
animation: fadeRiseIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeRiseIn {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* WhatsNew-specific: cascade each release-feature from the sidebar side
(translateX -12 → 0) so it feels like the new content flows out from
the tab the user just clicked. Delays are built up to support the
longest release (v1.0.0 has 13 features). */
.animate-fade-in .release-feature {
opacity: 0;
animation: featureSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-fade-in .release-feature:nth-child(1) { animation-delay: 0.10s; }
.animate-fade-in .release-feature:nth-child(2) { animation-delay: 0.15s; }
.animate-fade-in .release-feature:nth-child(3) { animation-delay: 0.20s; }
.animate-fade-in .release-feature:nth-child(4) { animation-delay: 0.25s; }
.animate-fade-in .release-feature:nth-child(5) { animation-delay: 0.30s; }
.animate-fade-in .release-feature:nth-child(6) { animation-delay: 0.35s; }
.animate-fade-in .release-feature:nth-child(7) { animation-delay: 0.40s; }
.animate-fade-in .release-feature:nth-child(8) { animation-delay: 0.45s; }
.animate-fade-in .release-feature:nth-child(9) { animation-delay: 0.50s; }
.animate-fade-in .release-feature:nth-child(10) { animation-delay: 0.55s; }
.animate-fade-in .release-feature:nth-child(11) { animation-delay: 0.60s; }
.animate-fade-in .release-feature:nth-child(12) { animation-delay: 0.65s; }
.animate-fade-in .release-feature:nth-child(13) { animation-delay: 0.70s; }
@keyframes featureSlideIn {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/* Gently pop the feature icon so the eye tracks it in. */
.animate-fade-in .release-feature-icon {
animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: inherit;
}
@keyframes iconPop {
0% { transform: scale(0.6); }
55% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* ==========================================================================
12. HELP CENTER
========================================================================== */
.help-search-wrap {
max-width: 560px;
margin: 40px auto 64px;
position: relative;
}
.help-search {
width: 100%;
padding: 18px 20px 18px 54px;
font-family: var(--font-body);
font-size: 16px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-pill);
outline: none;
color: var(--text);
box-shadow: var(--shadow-md);
transition: border-color 0.15s, box-shadow 0.15s;
}
.help-search:focus {
border-color: var(--green);
box-shadow: 0 0 0 4px var(--green-glow), var(--shadow-md);
}
.help-search::placeholder {
color: var(--hint);
}
.help-search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--hint);
pointer-events: none;
}
.help-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 64px;
}
.help-cat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px 28px;
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
gap: 14px;
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s;
}
.help-cat-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
border-color: rgba(30,58,95,0.2);
opacity: 1;
}
.help-cat-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: var(--green-bg);
border: 1px solid rgba(30,58,95,0.15);
display: flex;
align-items: center;
justify-content: center;
}
.help-cat-icon svg {
width: 24px;
height: 24px;
color: var(--green);
}
.help-cat-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
}
.help-cat-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
}
.help-cat-count {
font-size: 13px;
color: var(--hint);
font-weight: 500;
margin-top: auto;
}
.help-articles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.help-article {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
text-decoration: none;
color: var(--text);
transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.help-article:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: rgba(30,58,95,0.15);
opacity: 1;
}
.help-article-icon {
width: 40px;
height: 40px;
border-radius: var(--radius);
background: var(--green-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.help-article-icon svg {
width: 20px;
height: 20px;
color: var(--green);
}
.help-article-cat {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--green);
margin-bottom: 4px;
}
.help-article-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
}
.help-article-meta {
font-size: 12px;
color: var(--hint);
margin-top: 6px;
}
/* ==========================================================================
13. CONTACT PAGE
========================================================================== */
.contact-layout {
display: grid;
/* Form is the primary action — promote it to the left/first column,
and demote the info card to the right sidebar so reading order
(Western LTR) leads with the CTA. */
grid-template-columns: 1fr 360px;
gap: 60px;
margin-top: 48px;
}
.contact-form-card {
order: 1;
}
.contact-info-card {
order: 2;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 36px 32px;
height: fit-content;
position: sticky;
top: calc(var(--nav-h) + 24px);
}
.contact-info-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.contact-info-items {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-info-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.contact-info-icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--green-bg);
border: 1px solid rgba(30,58,95,0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-icon svg {
width: 17px;
height: 17px;
color: var(--green);
}
.contact-info-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hint);
margin-bottom: 3px;
}
.contact-info-value {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.contact-info-value a {
color: var(--green);
text-decoration: none;
}
.contact-form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.contact-tabs {
display: flex;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.contact-tab {
flex: 1;
padding: 18px 20px;
font-size: 14px;
font-weight: 600;
color: var(--hint);
border: none;
background: none;
cursor: pointer;
transition: color 0.15s, background 0.15s;
font-family: var(--font-body);
border-bottom: 2px solid transparent;
text-align: center;
}
.contact-tab:hover {
color: var(--text);
}
.contact-tab.active {
color: var(--green);
background: var(--surface);
border-bottom-color: var(--green);
}
.contact-form-body {
padding: 40px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.form-field:last-of-type {
margin-bottom: 0;
}
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.form-label .required {
color: var(--red);
margin-left: 4px;
}
.form-input, .form-select, .form-textarea {
font-family: var(--font-body);
font-size: 16px; /* 16px prevents iOS Safari auto-zoom on focus */
font-weight: 400;
color: var(--text);
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 13px 16px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-glow);
}
.form-input::placeholder, .form-textarea::placeholder {
color: var(--hint);
}
.form-textarea {
resize: vertical;
min-height: 140px;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238A8D87'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 20px;
padding-right: 42px;
}
.form-submit {
width: 100%;
margin-top: 32px;
justify-content: center;
}
.form-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px;
text-align: center;
}
.form-success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--green-bg);
border: 1px solid rgba(30,58,95,0.2);
display: flex;
align-items: center;
justify-content: center;
}
.form-success-icon svg {
width: 32px;
height: 32px;
color: var(--green);
}
.form-success h3 {
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.form-success p {
font-size: 15px;
color: var(--muted);
}
/* ==========================================================================
14. FOOTER
========================================================================== */
.site-footer {
background: var(--green-dark);
color: rgba(255,255,255,0.7);
padding: 72px 0 32px;
}
/* ── Top: brand + 3 link columns ─────────────────────────────────── */
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 56px;
padding-bottom: 44px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { max-width: 360px; }
.footer-brand-logo {
display: inline-flex;
margin-bottom: 18px;
text-decoration: none;
position: relative; /* anchor for the absolute flag overlay */
}
/* Schwarz-Rot-Gold reveal — same mechanism as the nav logo. The footer
sits on --green-dark (#0E2240) in both light and dark mode, so it
always shows cl-logo-v7-light.svg. One mask URL, no media-query swap
needed here. */
.footer-brand-logo-flag {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom,
#000000 0%, #000000 33.34%,
#DD0000 33.34%, #DD0000 66.66%,
#FFCE00 66.66%, #FFCE00 100%);
-webkit-mask-image: url('../img/cl-logo-v7-light.svg');
mask-image: url('../img/cl-logo-v7-light.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-brand-logo:hover .footer-brand-logo-flag {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.footer-brand-logo-flag { transition: none; }
}
.footer-brand-logo-img {
height: 65px;
width: auto;
display: block;
object-fit: contain;
}
.footer-brand-desc {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.55);
margin-bottom: 18px;
}
.footer-brand-contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.footer-brand-contact-link:hover {
background: rgba(34,197,94,0.12);
border-color: rgba(34,197,94,0.35);
color: #fff;
}
.footer-col-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 16px;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 14px;
color: rgba(255,255,255,0.62);
text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover {
color: #fff;
opacity: 1;
}
/* ── Mid: registered company info + trust badges ─────────────────── */
.footer-meta {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 48px;
padding-bottom: 36px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-meta-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 14px;
}
.footer-reg-list {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 28px;
}
.footer-reg-row { margin: 0; min-width: 0; }
.footer-reg-row--wide { grid-column: 1 / -1; }
.footer-reg-row dt {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.42);
margin-bottom: 3px;
}
.footer-reg-row dd {
font-size: 13px;
color: rgba(255,255,255,0.78);
margin: 0;
line-height: 1.45;
overflow-wrap: anywhere;
}
.footer-trust-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.footer-trust-item { flex-shrink: 0; }
.footer-trust-seal { width: 115px; height: 57px; }
.footer-trust-seal img { width: 100%; height: 100%; cursor: pointer; border: 0; }
.footer-trust-afc {
height: 163px;
width: auto;
object-fit: contain;
opacity: 0.9;
transition: opacity 0.15s;
}
.footer-trust-afc:hover { opacity: 1; }
/* ── Bottom: copyright + disclaimer + trademarks ──────────────────── */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
font-size: 13px;
color: rgba(255,255,255,0.4);
margin: 0;
}
.footer-disclaimer {
font-size: 12px;
color: rgba(255,255,255,0.35);
max-width: 480px;
text-align: right;
line-height: 1.5;
margin: 0;
}
/* Trademark acknowledgements — Apple/Google brand guidelines for the
"Add to Wallet" buttons require visible attribution. Sits below the
copyright + medical disclaimer row, spans the full footer width. */
.footer-trademarks {
flex-basis: 100%;
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 11px;
color: rgba(255,255,255,0.3);
line-height: 1.55;
max-width: none;
}
/* ==========================================================================
15. CARDS & MISC COMPONENTS
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
}
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid;
}
.tag-green {
background: var(--green-bg);
color: var(--green);
border-color: rgba(30,58,95,0.2);
}
.tag-amber {
background: var(--amber-bg);
color: var(--amber);
border-color: rgba(180,83,9,0.2);
}
.tag-blue {
background: var(--blue-bg);
color: var(--blue);
border-color: rgba(30,95,173,0.2);
}
.divider {
height: 1px;
background: var(--border-lt);
margin: 40px 0;
}
/* ── Home page security strip ── */
.home-security-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.home-security-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (max-width: 1024px) {
.home-security-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.home-security-copy {
align-items: center;
text-align: center;
}
.home-security-label {
align-self: center;
}
.home-security-copy .security-item-text {
text-align: left;
}
.home-security-copy .btn {
align-self: center;
}
}
/* ==========================================================================
16. HOME PAGE — STATS BAR, DETAIL ROWS, FEATURE LIST, CTA, WAVE
========================================================================== */
/* ── Stats bar ── */
.hl-stats-bar {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 32px 0;
margin-top: 0;
position: relative;
z-index: 1;
}
.hl-stats-bar.adjust-up {
margin-top: calc(-1 * var(--hero-wave-overlap, 18px));
}
.hl-stats-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.hl-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 24px;
border-right: 1px solid var(--border);
}
.hl-stat:last-child {
border-right: none;
}
.hl-stat-val {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
letter-spacing: -1px;
color: var(--green);
line-height: 1;
}
.hl-stat-label {
font-size: 13px;
color: var(--muted);
font-weight: 500;
text-align: center;
}
/* ── Detail rows ── */
.hl-detail-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
padding: 64px 0;
}
.hl-detail-row--reversed {
direction: rtl;
}
.hl-detail-row--reversed > * {
direction: ltr;
}
.hl-detail-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.hl-detail-heading {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
}
.hl-detail-heading em {
font-style: normal;
color: var(--green);
}
.hl-detail-desc {
font-size: 16px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 28px;
}
.hl-detail-points {
display: flex;
flex-direction: column;
gap: 14px;
}
.hl-detail-point {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--text);
font-weight: 500;
line-height: 1.5;
}
.hl-detail-point-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--green-bg);
border: 1px solid rgba(30,58,95,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
color: var(--green);
}
.hl-detail-point-icon svg {
width: 12px;
height: 12px;
}
.hl-detail-divider {
height: 1px;
background: var(--border-lt);
margin: 0;
}
.hl-detail-visual {
position: relative;
}
.hl-detail-visual img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
display: block;
}
.hl-detail-card {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 18px;
box-shadow: var(--shadow-lg);
min-width: 180px;
max-width: 240px;
}
.hl-detail-card--tr {
top: -16px;
right: -16px;
}
.hl-detail-card--bl {
bottom: -16px;
left: -16px;
}
/* ── Mini progress bar ── */
.hl-mini-stat-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hint);
margin-bottom: 2px;
}
.hl-mini-stat-val {
font-size: 22px;
font-weight: 700;
color: var(--text);
font-family: var(--font-display);
letter-spacing: -0.5px;
line-height: 1.1;
}
.hl-mini-stat-sub {
font-size: 12px;
color: var(--muted);
margin-bottom: 10px;
}
.hl-mini-bar {
height: 6px;
background: var(--border-lt);
border-radius: 3px;
overflow: hidden;
}
.hl-mini-bar-fill {
height: 100%;
background: var(--green);
border-radius: 3px;
}
/* ── Feature list ── */
.feature-list {
list-style: none;
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 20px;
border-top: 1px solid var(--border-lt);
}
.feature-list li {
font-size: 13px;
color: var(--muted);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.feature-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
opacity: 0.6;
}
/* ── Final CTA block ── */
.hl-cta-block {
background: var(--green-dark);
border-radius: var(--radius-xl);
overflow: hidden;
position: relative;
}
.hl-cta-block::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(30,58,95,0.5) 0%, transparent 65%);
pointer-events: none;
}
.hl-cta-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
padding: 72px 64px;
}
/* ── Hero wave ── */
:root {
--hero-wave-h: 160px;
--hero-wave-overlap: 18px;
}
.hero-wave {
position: absolute;
left: 0;
right: 0;
bottom: calc(-1 * var(--hero-wave-overlap));
height: var(--hero-wave-h);
overflow: hidden; /* Hide the duplicated path off-screen */
pointer-events: none;
z-index: 2;
line-height: 0;
}
.hero-wave svg {
display: block;
width: 100%;
height: 100%;
margin: 0;
transform: translateY(0.5px);
}
.wave-layer-scroll {
transform-origin: center;
will-change: transform;
animation: waveScroll linear infinite;
}
.wave-layer-scroll--1 {
animation-duration: 22s;
}
.wave-layer-scroll--2 {
animation-duration: 16s;
opacity: 0.95;
}
@keyframes waveScroll {
0% {
transform: translateX(0);
}
100% {
/* Move exactly the width of the SVG viewBox to create the perfect loop */
transform: translateX(-1440px);
}
}
/* ==========================================================================
17. COOKIE CONSENT BANNER
========================================================================== */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
padding: 0 24px 24px;
pointer-events: none;
transform: translateY(calc(100% + 24px));
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner--visible {
transform: translateY(0);
pointer-events: auto;
}
.cookie-banner--hiding {
transform: translateY(calc(100% + 24px));
}
.cookie-banner-inner {
max-width: 960px;
margin: 0 auto;
/* Pinned to deep navy in both modes. The previous var(--text) was
clever — dark in light mode, light in dark mode — but every child
(title, description, dismiss icon, reject button) is hardcoded
white/rgba-white, so a light banner left them invisible. The
cookie consent reads as a strong dark CTA against either page. */
background: var(--green-dark);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08);
position: relative;
}
.cookie-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
background: rgba(30,58,95,0.25);
border: 1px solid rgba(96,165,250,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #60A5FA;
}
.cookie-copy {
flex: 1;
min-width: 0;
}
.cookie-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.cookie-desc {
font-size: 13px;
color: rgba(255,255,255,0.55);
line-height: 1.55;
}
.cookie-link {
color: #60A5FA;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.cookie-link:hover {
opacity: 0.8;
}
.cookie-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cookie-btn-accept {
display: inline-flex;
align-items: center;
background: var(--green);
color: #fff;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
padding: 10px 20px;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease;
box-shadow: 0 4px 16px rgba(30,58,95,0.4);
}
.cookie-btn-accept:hover {
background: var(--green-lt);
transform: translateY(-1px);
}
.cookie-btn-reject {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.85);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
padding: 10px 20px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255,255,255,0.18);
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cookie-btn-reject:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.30);
transform: translateY(-1px);
}
.cookie-btn-learn {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.5);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s;
padding: 10px 4px;
}
.cookie-btn-learn:hover {
color: rgba(255,255,255,0.85);
opacity: 1;
}
.cookie-dismiss {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
cursor: pointer;
color: rgba(255,255,255,0.3);
padding: 4px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
line-height: 0;
}
.cookie-dismiss:hover {
color: rgba(255,255,255,0.7);
}
/* ==========================================================================
18. MOTION SYSTEM & UTILITIES (Scroll Reveal & Hovers)
========================================================================== */
[data-animate] {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--motion-duration-md) var(--motion-ease-smooth), transform var(--motion-duration-md) var(--motion-ease-smooth);
}
[data-animate].animate-in {
opacity: 1;
transform: translateY(0);
}
.animate-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
.hover-pop {
transition: transform var(--motion-duration-sm) var(--motion-ease-pop), box-shadow var(--motion-duration-sm) var(--motion-ease-soft);
}
.hover-pop:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.hover-fade {
transition: opacity var(--motion-duration-xs) var(--motion-ease-soft);
}
.hover-fade:hover {
opacity: 0.75;
}
@keyframes floatCard {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
}
to {
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-fade-up {
animation: fadeInUp 0.5s var(--ease);
}
.animate-fade-up-1 {
animation-delay: 0.1s;
}
.animate-fade-up-2 {
animation-delay: 0.2s;
}
.animate-fade-up-3 {
animation-delay: 0.3s;
}
.animate-fade-up-4 {
animation-delay: 0.4s;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
/* Kill all infinite decorative animations site-wide */
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
[data-animate] {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
.hover-pop, .hover-fade {
transition: none !important;
transform: none !important;
box-shadow: none !important;
}
.hero-glow--a, .hero-glow--b, .hero-glow--c {
animation: none !important;
opacity: 0.95;
}
.hero-dash-dot,
.hero-badge-pulse,
.hero-accent--tl,
.hero-accent--br,
.hw-app-head-pill .dot {
animation: none !important;
}
.hero-title {
animation: none !important;
opacity: 1;
transform: none !important;
}
}
/* ==========================================================================
19. RESPONSIVE MEDIA QUERIES
========================================================================== */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 48px;
text-align: center;
}
.hero-phone-frame {
max-width: 280px;
}
.hero-float-card {
display: none;
}
.hero-copy {
text-align: center;
}
.hero-badge, .hero-actions, .hero-trust {
justify-content: center;
}
.hero-desc {
margin-left: auto;
margin-right: auto;
}
.hero-accent {
display: none;
}
.features-grid {
grid-template-columns: 1fr 1fr;
}
.steps-layout {
grid-template-columns: 1fr;
}
.security-inner {
grid-template-columns: 1fr;
}
.whats-new-grid {
grid-template-columns: 1fr;
}
.contact-layout {
grid-template-columns: 1fr;
}
.contact-info-card {
position: static;
}
.footer-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
}
.footer-brand { grid-column: 1 / -1; max-width: none; }
.footer-meta { grid-template-columns: 1fr; gap: 32px; }
.help-categories {
grid-template-columns: 1fr 1fr;
}
.help-articles {
grid-template-columns: 1fr;
}
.hl-stats-inner {
grid-template-columns: repeat(2, 1fr);
row-gap: 0; /* Remove row-gap so we can manually control the cuts */
}
/* ── Top Row ── */
.hl-stat:nth-child(1),
.hl-stat:nth-child(2) {
/* Margin forces the vertical border to stop 32px BEFORE the next row */
margin-bottom: 32px;
}
.hl-stat:nth-child(2) {
border-right: none;
}
/* ── Bottom Row ── */
.hl-stat:nth-child(3),
.hl-stat:nth-child(4) {
border-top: 1px solid var(--border);
padding-top: 32px;
margin-top: 0;
}
.hl-detail-row {
grid-template-columns: 1fr;
gap: 40px;
}
.hl-detail-row--reversed {
direction: ltr;
}
.hl-detail-card--tr {
top: -12px;
right: -8px;
}
.hl-detail-card--bl {
bottom: -12px;
left: -8px;
}
.hl-cta-inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 48px 40px;
}
}
@media (max-width: 768px) {
:root {
--nav-h: 70px;
}
.section {
padding: 56px 0;
}
.section--sm {
padding: 40px 0;
}
.section--lg {
padding: 72px 0;
}
.section-heading {
font-size: clamp(26px, 6vw, 36px);
}
.section-sub {
font-size: 16px;
}
.nav-links {
display: none;
}
.nav-mobile-toggle {
display: flex;
}
.nav-logo-img {
height: 40px;
}
.hero-inner {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.hero-copy {
align-items: center;
}
.hero-badge, .hero-actions, .hero-trust {
justify-content: center;
}
.hero-desc {
font-size: 15px;
margin-left: auto;
margin-right: auto;
max-width: 90%;
}
.hero-actions {
flex-direction: column;
width: 100%;
gap: 10px;
}
.hero-btn-primary, .hero-btn-ghost {
width: 100%;
justify-content: center;
}
.hero-trust {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.hero-visual {
max-width: 480px;
margin: 0 auto;
width: 100%;
}
.hero-dashboard {
padding: 16px;
}
.hero-dash-stat-val {
font-size: 17px;
}
.hero-dash-sessions {
display: none;
}
.features-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.feature-card {
padding: 28px 24px;
}
.steps-layout {
grid-template-columns: 1fr;
gap: 32px;
margin-top: 40px;
}
.security-inner {
grid-template-columns: 1fr;
}
.whats-new-grid {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 32px;
}
/* Sidebar becomes a horizontal scroller on phones — keeps the tabs
compact and one-thumb reachable instead of stacking 3+ tall buttons
above the changelog content. */
.whats-new-sidebar {
flex-direction: row;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.whats-new-sidebar::-webkit-scrollbar {
display: none;
}
.version-tab {
flex: 0 0 auto;
scroll-snap-align: start;
padding: 12px 14px;
gap: 10px;
max-width: 240px;
}
.whats-new-content {
padding: 24px 20px;
border-radius: var(--radius-lg);
}
.release-header {
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.release-title {
font-size: 20px;
}
.release-features {
gap: 16px;
}
.release-feature-title {
font-size: 14.5px;
}
.release-feature-desc {
font-size: 13.5px;
}
.contact-layout {
grid-template-columns: 1fr;
gap: 32px;
margin-top: 32px;
}
.contact-info-card {
position: static;
padding: 24px 22px;
}
.contact-info-title {
font-size: 16px;
margin-bottom: 18px;
}
.contact-info-items {
gap: 18px;
}
/* Three tabs (Patient / Clinics / Press) won't fit on a phone at the
desktop padding — tighten them and let labels wrap rather than
overflow off-canvas. */
.contact-tabs {
gap: 0;
}
.contact-tab {
padding: 14px 8px;
font-size: 13px;
line-height: 1.25;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.contact-form-body {
padding: 22px 20px;
}
.help-categories {
grid-template-columns: 1fr;
}
.help-articles {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
padding-bottom: 32px;
margin-bottom: 28px;
}
.footer-brand { grid-column: 1 / -1; max-width: none; }
.footer-reg-list { grid-template-columns: 1fr; gap: 10px; }
.footer-reg-row--wide { grid-column: auto; }
.footer-trust-row { gap: 18px; }
.footer-trust-afc { height: 80px; }
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 10px;
}
.footer-disclaimer {
text-align: center;
max-width: 100%;
}
.cookie-banner {
padding: 0 12px 16px;
}
.cookie-banner-inner {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px 18px 18px;
}
.cookie-icon {
display: none;
}
/* Reserve space for the absolute-positioned dismiss button so the
title doesn't run underneath it on narrow viewports. */
.cookie-copy {
padding-right: 28px;
}
.cookie-title {
font-size: 15px;
}
.cookie-desc {
font-size: 13px;
}
.cookie-actions {
width: 100%;
flex-wrap: wrap;
gap: 8px;
}
.cookie-btn-accept,
.cookie-btn-reject {
flex: 1 1 0;
min-width: 0;
justify-content: center;
padding: 12px 16px;
}
/* Demote the Privacy Policy link to a centred sibling under the
primary actions instead of fighting for inline space with them. */
.cookie-btn-learn {
flex: 1 1 100%;
text-align: center;
padding: 6px 4px 0;
}
.cookie-dismiss {
top: 10px;
right: 10px;
}
.hl-stats-inner {
grid-template-columns: repeat(2, 1fr);
}
.hl-detail-row {
grid-template-columns: 1fr;
gap: 32px;
padding: 40px 0;
}
.hl-detail-row--reversed {
direction: ltr;
}
.hl-detail-card {
display: none;
}
.hl-detail-heading {
font-size: clamp(22px, 5vw, 32px);
}
.hl-cta-inner {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 24px;
}
}
@media (max-width: 640px) {
:root {
--hero-wave-h: 120px;
--hero-wave-overlap: 12px;
}
.hero-container {
padding-top: var(--nav-h);
padding-bottom: calc(var(--hero-wave-h) + 20px);
}
.hl-stats-bar.adjust-up {
margin-top: calc(-1 * var(--hero-wave-overlap));
}
.hero-title {
font-size: 36px;
}
.hero-dash-stats {
grid-template-columns: repeat(3,1fr);
}
.hero-badge {
margin-top: 24px;
}
.hero-desc {
font-size: 15px;
}
.hero-trust {
gap: 12px;
}
.hero-trust-item {
font-size: 11px;
}
.wave-layer-swell--1 {
animation: waveSwellSlow 8s ease-in-out infinite;
}
.wave-layer-swell--2 {
animation: waveSwellFast 6s ease-in-out infinite;
}
@keyframes waveSwellSlow {
0%, 100% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(-8px) scaleY(1.12);
}
}
@keyframes waveSwellFast {
0%, 100% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(-12px) scaleY(1.18);
}
}
}
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.hero-title {
font-size: 32px;
letter-spacing: -0.025em;
}
.hero-badge {
font-size: 11.5px;
padding: 6px 13px;
}
.hero-desc {
font-size: 14px;
}
.hero-trust {
display: none;
}
.hl-stats-inner {
grid-template-columns: 1fr 1fr;
}
.hl-stat {
padding: 16px 12px;
}
.hl-stat-val {
font-size: 22px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.footer-trust-row {
justify-content: flex-start;
flex-wrap: wrap;
gap: 14px;
}
.footer-trust-afc { height: 64px; }
.footer-trust-seal { width: 100px; height: 50px; }
}
/* Extra-narrow phones (≤360px) — Galaxy Fold, iPhone SE portrait squeeze */
@media (max-width: 360px) {
.footer-trust-afc { height: 52px; }
.footer-trust-seal { width: 86px; height: 43px; }
.feature-card {
padding: 24px 20px;
}
.section {
padding: 40px 0;
}
.section--sm {
padding: 28px 0;
}
}
/* ==========================================================================
HOW IT WORKS PAGE (Moved from scoped HowItWorks.razor.css)
========================================================================== */
/* ── Chevron on each step ── */
.step-chevron {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-left: auto;
padding-left: 8px;
color: var(--hint);
opacity: 0;
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), color 0.2s ease;
}
.step-item {
cursor: pointer;
user-select: none;
}
.step-item:hover .step-chevron {
opacity: 0.45;
}
.step-item.active .step-chevron {
opacity: 1;
color: var(--green);
transform: rotate(90deg);
}
/* ── Animated description reveal ── */
.step-desc--animated {
animation: stepDescIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
/* ── Image swap transition ── */
.steps-img-wrap {
overflow: hidden !important;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
aspect-ratio: 4/3;
}
.steps-img-active {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: stepImgIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
/* ── Image badge ── */
.steps-img-badge {
position: absolute;
bottom: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(14,34,64,0.88);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 10px 16px;
pointer-events: none;
animation: stepDescIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
.steps-img-badge-num {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--green);
color: #fff;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.steps-img-badge-label {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
/* ── Progress dots ── */
.steps-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.steps-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s ease, width 0.25s cubic-bezier(0.16,1,0.3,1);
}
.steps-dot.active {
background: var(--green);
width: 24px;
border-radius: 4px;
}
/* ── Keyframes (Must be global to avoid Blazor scoping bugs) ── */
@keyframes stepDescIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes stepImgIn {
from {
transform: scale(1.03);
}
to {
transform: scale(1);
}
}
/* End of file */