@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap');
/* ==========================================================================
PATROX — Design System Stylesheet
Tokens, layout, typography, buttons, cards, nav, hero, offer grid,
FAQ accordion, footer, sticky buy bar, scroll reveal, mobile, utilities.
========================================================================== */
/* --------------------------------------------------------------------------
1. Google Fonts
-------------------------------------------------------------------------- */
/* Inter (400, 500, 600) + Space Grotesk (700) */
/* NOTE: HTML must include these preconnect + stylesheet links:
*/
/* --------------------------------------------------------------------------
2. Design Tokens — CSS Custom Properties
-------------------------------------------------------------------------- */
:root {
/* Background */
--bg: #0F0F10;
--bg-deep: #050505;
/* Cards */
--card-top: #1F1F23;
--card-bottom: #050505;
/* Borders */
--border: rgba(255, 255, 255, .10);
--border-active: rgba(255, 255, 255, .35);
/* Brand colours */
--primary: #3E89FF;
--accent: #78ABFF;
--cyan: #5FFFE2;
--link: #C1FDFE;
/* Text */
--text: #F9F9F9;
--muted: #A0A0A0;
/* Status */
--error: #FF3B30;
/* Shell */
--shell: #262626;
--divider: #2E2E2E;
/* Radius scale */
--radius-sm: 6px;
--radius-md: 8px;
--radius-card: 14px;
--radius-premium: 18px;
/* Shadow */
--shadow-card: 0 9px 24px rgba(0, 0, 0, .18);
/* Transitions */
--transition: 0.2s ease;
--transition-gradient: 0.35s ease;
/* Layout */
--max-width: 1200px;
}
/* --------------------------------------------------------------------------
3. Reset + Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
video {
max-width: 100%;
display: block;
}
a {
color: var(--link);
text-decoration: none;
transition: opacity var(--transition);
}
a:hover {
opacity: 0.8;
}
ul,
ol {
list-style: none;
}
button {
font-family: inherit;
}
/* --------------------------------------------------------------------------
4. Typography Classes
-------------------------------------------------------------------------- */
.display {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
}
.h1 {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
color: var(--text);
}
.h2 {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.h3 {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: var(--text);
}
.body-lg {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
}
.body {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
.caption {
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.muted {
color: var(--muted);
}
/* --------------------------------------------------------------------------
5. Layout
-------------------------------------------------------------------------- */
.container {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: 16px;
}
.section {
padding-block: 64px; /* 16 * 4 = 64px (py-16 mobile) */
}
#section-for-whom,
#section-offers {
padding-block: 48px;
}
/* --------------------------------------------------------------------------
6. Buttons
-------------------------------------------------------------------------- */
/* Primary button — animated gradient */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px; /* mobile default */
padding-inline: 24px;
background: linear-gradient(108deg, #3E89FF 0%, #3E89FF 42%, #78ABFF 52%, #78ABFF 100%);
background-size: 200%;
background-position: 0%;
border: none;
border-radius: var(--radius-md);
color: var(--text);
font-size: 16px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: background-position var(--transition-gradient);
white-space: nowrap;
text-decoration: none;
}
.btn-primary:hover {
background-position: 100%;
opacity: 1;
}
.btn-primary:active {
transform: translateY(1px);
}
.btn-primary:disabled,
.btn-primary[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Secondary button */
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding-inline: 24px;
background: rgba(255, 255, 255, .08);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
font-size: 16px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
white-space: nowrap;
text-decoration: none;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, .13);
border-color: var(--border-active);
opacity: 1;
}
.btn-secondary:active {
transform: translateY(1px);
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* "Not live yet" CTA state — reads as intentional/launching-soon, not broken.
Defined before .btn-sm so .btn-sm's height/padding still win when combined. */
.btn-waitlist {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding-inline: 24px;
background: rgba(255, 255, 255, .04);
border: 1px dashed var(--border-active);
border-radius: var(--radius-md);
color: var(--muted);
font-size: 16px;
font-weight: 500;
cursor: default;
}
.btn-waitlist .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 8px var(--cyan);
flex-shrink: 0;
}
/* Secondary link paired with a waitlist CTA (e.g. "Learn more") */
.cta-secondary-link {
display: block;
text-align: center;
margin-top: 12px;
color: var(--accent);
font-size: 12px;
font-weight: 500;
}
/* Small button modifier */
.btn-sm {
height: 36px;
padding-inline: 16px;
font-size: 14px;
}
/* --------------------------------------------------------------------------
7. Cards
-------------------------------------------------------------------------- */
.card {
background: linear-gradient(221deg, var(--card-top), var(--card-bottom));
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
/* Glass-morphism surface — premium panels */
.glass {
background: rgba(0, 0, 0, .6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--border-active);
border-radius: var(--radius-premium);
box-shadow:
0 2px 30px rgba(0, 0, 0, .05),
0 8px 72px -5px rgba(0, 0, 0, .1),
inset 1px 0.5px 0 rgba(255, 255, 255, .6),
inset -1px -1px 0 rgba(255, 255, 255, .4),
inset 0 0 5px rgba(255, 255, 255, .15);
}
/* --------------------------------------------------------------------------
7b. What You Get — system module panels
-------------------------------------------------------------------------- */
.wyg-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
.wyg-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 15% 45%, rgba(62, 137, 255, .09), transparent 68%),
radial-gradient(ellipse 55% 45% at 88% 58%, rgba(95, 255, 226, .07), transparent 65%);
pointer-events: none;
z-index: 0;
}
.wyg-section > .container {
position: relative;
z-index: 1;
}
.wyg-heading {
max-width: 22ch;
margin-inline: auto;
}
.wyg-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.wyg-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 16px;
background: rgba(255, 255, 255, .025);
border: 1px solid rgba(120, 172, 255, .14);
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
border-color var(--transition),
box-shadow var(--transition),
transform var(--transition);
}
.wyg-card:hover {
border-color: rgba(120, 172, 255, .3);
box-shadow: 0 8px 32px rgba(62, 137, 255, .1);
}
.wyg-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 11px;
background: rgba(62, 137, 255, .1);
border: 1px solid rgba(120, 172, 255, .22);
color: var(--accent);
box-shadow: 0 0 18px rgba(62, 137, 255, .12);
}
.wyg-card__icon svg {
width: 20px;
height: 20px;
}
.wyg-card__body {
min-width: 0;
flex: 1;
}
.wyg-card__title {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--text);
margin-bottom: 6px;
}
.wyg-card__text {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
.wyg-card:nth-child(2) .wyg-card__icon {
color: var(--cyan);
background: rgba(95, 255, 226, .08);
border-color: rgba(95, 255, 226, .22);
box-shadow: 0 0 18px rgba(95, 255, 226, .1);
}
.wyg-card:nth-child(4) .wyg-card__icon {
color: var(--link);
background: rgba(193, 253, 254, .06);
border-color: rgba(193, 253, 254, .18);
box-shadow: 0 0 18px rgba(193, 253, 254, .08);
}
.wyg-card.reveal:nth-child(1) { transition-delay: 0s; }
.wyg-card.reveal:nth-child(2) { transition-delay: .07s; }
.wyg-card.reveal:nth-child(3) { transition-delay: .14s; }
.wyg-card.reveal:nth-child(4) { transition-delay: .21s; }
@media (min-width: 640px) {
.wyg-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.wyg-card {
flex-direction: column;
gap: 16px;
padding: 24px;
border-radius: var(--radius-premium);
}
}
@media (min-width: 1024px) {
.wyg-grid {
gap: 20px;
}
.wyg-card__title {
font-size: 17px;
}
}
@media (max-width: 639px) {
.wyg-section {
padding-block: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.wyg-card:hover {
transform: none;
}
.wyg-card.reveal:nth-child(n) {
transition-delay: 0s;
}
}
/* --------------------------------------------------------------------------
8. Navigation
-------------------------------------------------------------------------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
height: 64px;
background: rgba(15, 15, 16, .85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: 16px;
}
.nav-logo {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--text);
text-decoration: none;
letter-spacing: -0.01em;
}
.nav-links {
display: flex;
gap: 24px;
align-items: center;
list-style: none;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
transition: color var(--transition);
}
.nav-links a:hover {
color: var(--text);
opacity: 1;
}
/* Language toggle pill */
.lang-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
background: rgba(62, 137, 255, .12);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text);
font-size: 12px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
white-space: nowrap;
text-decoration: none;
}
a.lang-toggle {
color: var(--text);
}
a.lang-toggle:hover {
opacity: 1;
}
.lang-toggle:hover {
background: rgba(62, 137, 255, .2);
border-color: var(--border-active);
}
/* Hamburger placeholder — hidden on desktop, shown on mobile via media query */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: none;
border: none;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
border-radius: 1px;
transition: opacity var(--transition);
}
/* --------------------------------------------------------------------------
9. Hero Section
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Aurora ambient glow layer */
.hero-aurora {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-aurora__glow {
width: 80vmax;
height: 80vmax;
border-radius: 50%;
background: conic-gradient(
from 225deg at 50% 50%,
#6663FF 0deg,
#11BFFF 90deg,
#D0DEFF 180deg,
#5FFFE2 270deg,
rgba(115, 125, 215, 0.87) 326.25deg,
#1100FF 360deg
);
filter: blur(36px);
opacity: 0.18;
animation: aurora-spin 24s linear infinite;
}
@keyframes aurora-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-aurora__glow {
animation: none;
}
}
/* Hero layout — copy + accent collage (not background photos) */
.hero-grid {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
padding-block: 80px 40px;
}
/* Hero content */
.hero-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
text-align: center;
width: 100%;
}
.hero-trust {
margin-top: 16px;
}
.hero-trust-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 10px;
}
.hero-trust-item {
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: var(--muted);
}
.hero-trust-item:not(:last-child)::after {
content: "·";
margin-left: 10px;
opacity: 0.45;
}
/* Eyebrow badge — tinted pill above the headline (reuses .lang-toggle's recipe) */
.eyebrow-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(62, 137, 255, .12);
border: 1px solid rgba(120, 172, 255, .35);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
text-shadow: 0 0 12px rgba(120, 172, 255, .5);
box-shadow: 0 0 24px rgba(62, 137, 255, .15);
}
/* Soft glow behind the hero headline */
.hero-headline-glow {
text-shadow: 0 0 40px rgba(62, 137, 255, .25), 0 0 80px rgba(95, 255, 226, .12);
}
/* Staggered entrance for above-the-fold hero content (load-time, not scroll-triggered) */
@keyframes float-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content > .hero-float-in {
animation: float-in .7s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-content > .hero-float-in:nth-child(1) { animation-delay: 0s; }
.hero-content > .hero-float-in:nth-child(2) { animation-delay: .12s; }
.hero-content > .hero-float-in:nth-child(3) { animation-delay: .24s; }
.hero-content > .hero-float-in:nth-child(4) { animation-delay: .36s; }
/* Hero accent photo collage */
.hero-visual {
width: 100%;
max-width: 480px;
flex-shrink: 0;
}
.hero-visual-collage {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-visual-accents {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Shared framed accent photo — explicit img elements, never background-image */
.accent-photo {
margin: 0;
overflow: hidden;
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
background: rgba(255, 255, 255, .04);
}
.accent-photo__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-photo--primary {
transform: rotate(-2deg);
animation: photo-accent-float 8s ease-in-out infinite;
}
.hero-photo--accent-1 {
transform: rotate(3deg);
animation: photo-accent-float 8s ease-in-out infinite .4s;
}
.hero-photo--accent-2 {
transform: rotate(-4deg);
animation: photo-accent-float 8s ease-in-out infinite .8s;
}
.hero-photo--primary .accent-photo__img {
aspect-ratio: 3 / 4;
max-height: 420px;
}
.hero-photo--accent .accent-photo__img {
aspect-ratio: 4 / 5;
}
@keyframes photo-accent-float {
0%, 100% { transform: rotate(var(--photo-rot, -2deg)) translateY(0); }
50% { transform: rotate(var(--photo-rot, -2deg)) translateY(-6px); }
}
.hero-photo--primary { --photo-rot: -2deg; }
.hero-photo--accent-1 { --photo-rot: 3deg; }
.hero-photo--accent-2 { --photo-rot: -4deg; }
/* Section split — text + side accent image */
.section-split {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
.section-split__text {
flex: 1;
min-width: 0;
}
.section-split__visual {
width: 100%;
max-width: 360px;
flex-shrink: 0;
}
.section-split__visual--compact {
max-width: 280px;
}
.section-accent-photo .accent-photo__img {
aspect-ratio: 4 / 5;
}
.section-accent-photo--compact .accent-photo__img {
aspect-ratio: 3 / 4;
}
@media (min-width: 769px) {
.hero-grid {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.hero-content {
flex: 1;
max-width: 560px;
}
.hero-visual {
flex: 0 1 480px;
}
.section-split {
flex-direction: row;
align-items: center;
gap: 48px;
}
.section-split--for-whom {
align-items: flex-start;
}
.section-split__visual {
max-width: 320px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-photo--primary,
.hero-photo--accent-1,
.hero-photo--accent-2 {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-float-in {
animation: none;
opacity: 1;
transform: none;
}
}
/* Ambient drifting glow blobs — independent of the aurora, coexists with it */
.hero-glow-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .22;
pointer-events: none;
z-index: 0;
animation: blob-drift 18s ease-in-out infinite alternate;
}
.hero-glow-blob--a {
width: 420px;
height: 420px;
top: -80px;
left: 4%;
background: var(--primary);
}
.hero-glow-blob--b {
width: 360px;
height: 360px;
bottom: -120px;
right: 4%;
background: var(--cyan);
animation-duration: 22s;
animation-delay: -6s;
}
@keyframes blob-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(30px, -20px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.hero-glow-blob {
animation: none;
}
}
/* Floating benefit cards around the hero — built from real whatYouGet items, not fabricated people.
Positioned in the top/bottom bands only (not mid-left/right), since the hero text is left-aligned
on desktop and sits vertically centered — mid-height cards would overlap the headline/CTA. */
.hero-float-card {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
max-width: 210px;
font-size: 13px;
font-weight: 500;
line-height: 1.3;
color: var(--text);
pointer-events: none;
/* Combined with the keyframe below so the per-card rotation isn't clobbered by the float animation */
transform: rotate(var(--rot, 0deg));
animation: card-float 6s ease-in-out infinite;
}
.hero-float-card-icon {
display: inline-flex;
color: var(--primary);
flex-shrink: 0;
}
.hero-float-card--1 { top: 8%; left: 3%; --rot: -6deg; }
.hero-float-card--2 { bottom: 12%; left: 4%; --rot: 4deg; animation-delay: .6s; }
.hero-float-card--3 { top: 10%; right: 4%; --rot: 5deg; animation-delay: 1.2s; }
.hero-float-card--4 { bottom: 14%; right: 5%; --rot: -4deg; animation-delay: 1.8s; }
@keyframes card-float {
0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
50% { transform: rotate(var(--rot, 0deg)) translateY(-8px); }
}
@media (max-width: 1024px) {
.hero-float-card {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-float-card {
animation: none;
}
}
/* --------------------------------------------------------------------------
10. Product Offer Grid — wyg-inspired glass panels
-------------------------------------------------------------------------- */
.offers-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
.offers-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 68% 52% at 85% 35%, rgba(95, 255, 226, .09), transparent 68%),
radial-gradient(ellipse 58% 48% at 10% 58%, rgba(62, 137, 255, .11), transparent 65%),
radial-gradient(ellipse 42% 36% at 50% 100%, rgba(193, 253, 254, .06), transparent 72%);
pointer-events: none;
z-index: 0;
}
.offers-section > .container {
position: relative;
z-index: 1;
}
.offers-heading {
max-width: 20ch;
margin-inline: auto;
}
.offer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.offer-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
gap: 16px;
padding: 20px 18px;
background: rgba(255, 255, 255, .025);
border: 1px solid rgba(120, 172, 255, .14);
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
border-color var(--transition),
box-shadow var(--transition),
transform var(--transition);
}
.offer-card:hover {
border-color: rgba(120, 172, 255, .3);
box-shadow: 0 8px 32px rgba(62, 137, 255, .1);
}
.offer-card__title-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.offer-card__title-row .offer-card__title {
flex: 1;
min-width: 0;
padding-top: 8px;
}
.offer-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 11px;
background: rgba(62, 137, 255, .1);
border: 1px solid rgba(120, 172, 255, .22);
color: var(--accent);
box-shadow: 0 0 18px rgba(62, 137, 255, .12);
}
.offer-card__icon svg {
width: 20px;
height: 20px;
}
.offer-card__media {
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(120, 172, 255, .16);
background: rgba(62, 137, 255, .04);
box-shadow: inset 0 0 24px rgba(62, 137, 255, .06);
}
.offer-card__media img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.offer-card__body {
display: flex;
flex-direction: column;
flex: 1;
gap: 6px;
}
.offer-card__title {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: var(--text);
}
.offer-card__tagline {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
/* Per-product accent — kitchen (cyan / nutrition) */
.offer-card--kitchen {
border-color: rgba(95, 255, 226, .16);
}
.offer-card--kitchen:hover {
border-color: rgba(95, 255, 226, .34);
box-shadow: 0 8px 32px rgba(95, 255, 226, .1);
}
.offer-card--kitchen .offer-card__icon {
color: var(--cyan);
background: rgba(95, 255, 226, .08);
border-color: rgba(95, 255, 226, .22);
box-shadow: 0 0 18px rgba(95, 255, 226, .1);
}
.offer-card--kitchen .offer-card__media {
border-color: rgba(95, 255, 226, .18);
background: rgba(95, 255, 226, .04);
box-shadow: inset 0 0 24px rgba(95, 255, 226, .05);
}
.offer-card--kitchen .offer-price {
color: var(--cyan);
}
/* Lifestyle (blue / reset) */
.offer-card--lifestyle .offer-price {
color: var(--accent);
}
/* Complete system (aqua / discipline) */
.offer-card--complete {
border-color: rgba(193, 253, 254, .18);
}
.offer-card--complete:hover {
border-color: rgba(193, 253, 254, .36);
box-shadow:
0 8px 32px rgba(95, 255, 226, .12),
0 0 40px rgba(193, 253, 254, .06);
}
.offer-card--complete .offer-card__icon {
color: var(--link);
background: rgba(193, 253, 254, .06);
border-color: rgba(193, 253, 254, .18);
box-shadow: 0 0 18px rgba(193, 253, 254, .08);
}
.offer-card--complete .offer-card__media {
border-color: rgba(193, 253, 254, .2);
background: rgba(193, 253, 254, .04);
box-shadow: inset 0 0 28px rgba(193, 253, 254, .05);
}
.offer-card--complete .offer-price {
color: var(--link);
}
/* Featured / best-value offer card */
.offer-card.featured {
border-color: rgba(62, 137, 255, .38);
box-shadow: 0 0 0 1px rgba(62, 137, 255, .25);
}
/* Best value badge */
.badge-best-value {
position: absolute;
top: -1px;
right: 16px;
padding: 4px 10px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 0 0 8px 8px;
color: var(--text);
font-size: 10px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
/* Premium / flagship-tier offer card */
.offer-card.premium {
border-color: rgba(95, 255, 226, .32);
box-shadow:
0 0 0 1px rgba(95, 255, 226, .2),
0 0 36px rgba(95, 255, 226, .1);
}
.badge-premium {
position: absolute;
top: -1px;
right: 16px;
padding: 4px 10px;
background: linear-gradient(90deg, var(--cyan), var(--accent));
border-radius: 0 0 8px 8px;
color: #05100D;
font-size: 10px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
/* Offer card price display */
.offer-price {
font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1;
color: var(--text);
margin-top: 4px;
}
.offer-price s {
font-size: 16px;
font-weight: 400;
color: var(--muted);
margin-left: 8px;
}
.offer-card__actions {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding-top: 4px;
}
.offer-card__actions .cta-secondary-link {
margin-top: 0;
}
.offer-price sub {
font-size: 16px;
font-weight: 400;
vertical-align: baseline;
}
.offer-card.reveal:nth-child(1) { transition-delay: 0s; }
.offer-card.reveal:nth-child(2) { transition-delay: .08s; }
.offer-card.reveal:nth-child(3) { transition-delay: .16s; }
.offer-card.reveal:nth-child(4) { transition-delay: .24s; }
@media (min-width: 640px) {
.offer-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.offer-card {
padding: 24px;
border-radius: var(--radius-premium);
}
}
@media (min-width: 1024px) {
.offer-grid {
gap: 20px;
}
.offer-card__title {
font-size: 18px;
}
.offer-price {
font-size: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.offer-card:hover {
transform: none;
}
.offer-card.reveal:nth-child(n) {
transition-delay: 0s;
}
}
.offer-features {
display: flex;
flex-direction: column;
gap: 8px;
margin-block: 16px;
}
.offer-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--muted);
}
.offer-feature::before {
content: '';
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
background: var(--primary);
border-radius: 50%;
opacity: 0.7;
}
/* --------------------------------------------------------------------------
11. FAQ Accordion
-------------------------------------------------------------------------- */
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
border-top: 1px solid var(--border);
}
.faq-item:last-child {
border-bottom: 1px solid var(--border);
}
.faq-item button {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
padding: 16px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
transition: color var(--transition);
gap: 12px;
}
.faq-item button:hover {
color: var(--accent);
}
.faq-item button[aria-expanded="true"] {
color: var(--accent);
border-bottom-color: var(--border);
}
/* Chevron icon */
.faq-item button .faq-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform var(--transition);
color: var(--muted);
}
.faq-item button[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
color: var(--accent);
}
.faq-panel {
display: none;
padding: 16px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
border-bottom: 1px solid var(--border);
}
.faq-panel[hidden] {
display: none;
}
/* JS removes [hidden] / sets display:block via .is-open */
.faq-item.is-open .faq-panel {
display: block;
}
/* --------------------------------------------------------------------------
12. Footer
-------------------------------------------------------------------------- */
#footer-content .container {
padding-block: 48px 0;
}
.footer-legal {
padding-top: 24px;
padding-bottom: 48px;
}
@media (min-width: 769px) {
#footer-content .container {
padding-block: 64px 0;
}
.footer-legal {
padding-top: 32px;
padding-bottom: 64px;
}
}
/* --------------------------------------------------------------------------
13. Sticky Buy Bar (mobile)
-------------------------------------------------------------------------- */
.sticky-buy {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: none; /* shown via .sticky-buy.visible */
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(15, 15, 16, .95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid var(--border);
z-index: 50;
}
.sticky-buy.visible {
display: flex;
}
.sticky-buy .btn-primary {
flex: 1;
}
.sticky-buy-price {
font-size: 16px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
14. Scroll Reveal
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* --------------------------------------------------------------------------
15. Desktop Styles (≥ 769px)
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.container {
padding-inline: 24px;
}
.section {
padding-block: 96px; /* py-24 desktop */
}
#section-for-whom,
#section-offers {
padding-block: 56px;
}
.btn-primary,
.btn-secondary {
height: 50px;
}
.btn-sm {
height: 36px; /* unchanged */
}
.offer-grid {
/* 260px (not 280px) so the grid's 4 tiers (was 3) fit one row at the
1200px container width instead of stranding the 4th card alone below. */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.hero-content {
text-align: left;
}
.hero-trust-list {
justify-content: flex-start;
align-items: flex-start;
}
.hero-grid {
padding-block: 96px 48px;
}
.nav-links {
display: flex; /* ensure visible on desktop */
}
.nav-hamburger {
display: none;
}
}
/* --------------------------------------------------------------------------
16. Mobile Overrides (≤ 768px)
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Generic cards shed border/radius/shadow on mobile — flat, full-bleed */
.card {
border: none;
border-radius: 0;
box-shadow: none;
}
#section-offers {
padding-block: 56px;
}
.offer-grid {
gap: 12px;
padding-block: 4px;
}
.offer-card {
padding: 20px 18px;
}
/* Nav: hide links, show hamburger */
.nav-links {
display: none;
}
.nav-hamburger {
display: flex;
}
/* Mobile nav drawer — opened by #nav-hamburger, toggles .nav-open on .nav */
.nav-links {
position: absolute;
top: 64px;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: rgba(15, 15, 16, .98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 8px 16px 16px;
}
.nav.nav-open .nav-links {
display: flex;
}
.nav-links a {
padding: 12px 0;
width: 100%;
border-bottom: 1px solid var(--border);
}
/* Hamburger → X transform when open */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Primary button — 44px on mobile */
.btn-primary {
height: 44px;
}
.hero-trust-list {
flex-direction: column;
gap: 4px;
}
.hero-trust-item:not(:last-child)::after {
content: none;
}
}
/* --------------------------------------------------------------------------
17. Utility Classes
-------------------------------------------------------------------------- */
/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Display */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none !important; }
/* Flex helpers */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
/* Gap */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
/* Width */
.w-full { width: 100%; }
/* Margin top */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
/* Margin bottom */
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
/* Screen-reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* --------------------------------------------------------------------------
18. Status / Badge Utilities
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.badge-primary { background: rgba(62, 137, 255, .15); color: var(--accent); }
.badge-success { background: rgba(16, 185, 129, .15); color: #10b981; }
.badge-warning { background: rgba(251, 191, 36, .15); color: #fbbf24; }
.badge-error { background: rgba(239, 68, 68, .15); color: #ef4444; }
/* --------------------------------------------------------------------------
19. Divider
-------------------------------------------------------------------------- */
.divider {
height: 1px;
background: var(--divider);
border: none;
margin-block: 0;
}
/* --------------------------------------------------------------------------
20. Focus Styles (Accessibility)
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}