/*
* VirelixaGlobal — "Atelier" Editorial Design System
* Light · Paper · Ink · Forest Green
* Typography: Poppins (thin/extralight/light) — single family throughout
* Dark mode via [data-theme="dark"] on
* Mobile carousels via scroll-snap on grids with 3+ items
*/
/* ========================================
GOOGLE FONTS
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,200;1,300&display=swap');
/* ========================================
DESIGN TOKENS
======================================== */
:root {
/* Paper & Ink */
--paper: #F6F3EC; /* warm parchment background */
--paper-soft: #FBF9F3; /* slightly lighter */
--paper-deep: #EFEAE0; /* deeper paper */
--surface: #FFFFFF; /* pure white card */
--surface-2: #FAF7F1; /* off-white card */
--ink: #0A0E1A; /* near-black text */
--ink-soft: #2A2E38; /* secondary text */
--ink-mute: #5C6068; /* muted text */
--ink-faint: #8A8E94; /* very muted */
--line: #D8D2C5; /* warm border */
--line-soft: #E5E0D4; /* lighter border */
--line-strong: #B8B0A0; /* stronger border */
/* Forest — primary accent */
--forest-900: #062B22;
--forest-800: #0A3A2E;
--forest-700: #0E4D3A; /* primary */
--forest-600: #15604A;
--forest-500: #1F7558;
--forest-400: #2E8B6E;
--forest-300: #6BAE99;
--forest-200: #A7CEC0;
--forest-100: #D6E8E1;
--forest-50: #ECF4F0;
/* Clay — warm secondary accent (NOT gold) */
--clay-900: #4A2009;
--clay-800: #6B2E0D;
--clay-700: #8B3D14;
--clay-600: #B45309; /* secondary accent */
--clay-500: #C76A1F;
--clay-400: #D9833B;
--clay-300: #E8A368;
--clay-200: #F0C7A0;
/* Functional */
--success: #15803D;
--success-bg: #ECFDF5;
--error: #B91C1C;
--error-bg: #FEF2F2;
--warning: #B45309;
--warning-bg: #FFFBEB;
--info: #1D4ED8;
--info-bg: #EFF6FF;
/* Typography */
--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Fluid type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.0625rem;
--text-lg: 1.1875rem;
--text-xl: clamp(1.3rem, 1.2rem + 0.4vw, 1.55rem);
--text-2xl: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
--text-3xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
--text-4xl: clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
--text-5xl: clamp(3rem, 2.2rem + 4vw, 5.5rem);
--text-6xl: clamp(3.5rem, 2.4rem + 6vw, 7.5rem);
/* Spacing */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-14: 3.5rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
--sp-32: 8rem;
--sp-40: 10rem;
/* Radii */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--r-xl: 22px;
--r-2xl: 32px;
--r-full: 9999px;
/* Shadows — soft & subtle */
--shadow-xs: 0 1px 2px rgba(15, 20, 30, 0.04);
--shadow-sm: 0 2px 8px rgba(15, 20, 30, 0.05), 0 1px 2px rgba(15, 20, 30, 0.04);
--shadow-md: 0 8px 24px rgba(15, 20, 30, 0.07), 0 2px 6px rgba(15, 20, 30, 0.04);
--shadow-lg: 0 24px 60px rgba(15, 20, 30, 0.10), 0 6px 18px rgba(15, 20, 30, 0.05);
--shadow-xl: 0 40px 100px rgba(15, 20, 30, 0.14), 0 12px 30px rgba(15, 20, 30, 0.06);
--shadow-forest: 0 12px 40px rgba(14, 77, 58, 0.22);
--shadow-clay: 0 12px 40px rgba(180, 83, 9, 0.20);
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.15s var(--ease);
--t-base: 0.28s var(--ease);
--t-slow: 0.55s var(--ease-out);
/* Layout */
--container: 1240px;
--container-narrow: 880px;
--header-h: 72px;
}
/* ========================================
RESET & BASE
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--ink);
background: var(--paper);
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-radius: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
::selection { background: var(--forest-700); color: #fff; }
/* ========================================
LAYOUT — Container & Grid
======================================== */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.container.narrow { max-width: var(--container-narrow); }
.section { padding: var(--sp-20) 0; position: relative; }
.section-sm { padding: var(--sp-16) 0; }
.section-lg { padding: var(--sp-24) 0; }
@media (max-width: 768px) {
.section { padding: var(--sp-12) 0; }
.section-sm { padding: var(--sp-10) 0; }
.section-lg { padding: var(--sp-16) 0; }
}
/* Editorial section header */
.section-head {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-bottom: var(--sp-10);
}
.section-head.center { align-items: center; text-align: center; }
.section-head.left { align-items: flex-start; text-align: left; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--forest-700);
}
.eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--forest-700);
display: inline-block;
}
.section-head.center .eyebrow::before { display: none; }
.section-title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-4xl);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 18ch;
}
.section-head.center .section-title { margin: 0 auto; }
.section-title em {
font-style: italic;
font-weight: 300;
color: var(--forest-700);
}
.section-lead {
font-size: var(--text-md);
line-height: 1.7;
color: var(--ink-mute);
max-width: 60ch;
}
.section-head.center .section-lead { margin: 0 auto; }
/* Section number — editorial */
.section-num {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 300;
color: var(--ink-faint);
letter-spacing: 0.1em;
}
/* ========================================
BUTTONS
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 0.85rem 1.5rem;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1;
border-radius: var(--r-full);
transition: all var(--t-base);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn i { font-size: 0.85em; transition: transform var(--t-base); }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn-primary {
background: var(--forest-700);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--forest-800);
transform: translateY(-1px);
box-shadow: var(--shadow-forest);
}
.btn-secondary {
background: var(--ink);
color: var(--paper);
}
.btn-secondary:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-outline {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--line-strong);
}
.btn-outline:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.btn-ghost {
background: transparent;
color: var(--forest-700);
padding: 0.6rem 1rem;
}
.btn-ghost:hover { background: var(--forest-50); }
.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }
/* Text link with arrow */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--forest-700);
font-weight: 300;
font-size: 0.9375rem;
transition: gap var(--t-base), color var(--t-base);
}
.link-arrow:hover { color: var(--forest-800); gap: 0.6rem; }
.link-arrow i { font-size: 0.75em; }
/* ========================================
HEADER / NAVIGATION
======================================== */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: var(--sp-4) 0;
transition: all var(--t-base);
background: transparent;
}
.site-header.scrolled {
background: rgba(246, 243, 236, 0.82);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid var(--line-soft);
padding: var(--sp-3) 0;
}
.header-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
}
/* Logo */
.brand {
display: flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 300;
color: var(--ink);
letter-spacing: -0.01em;
flex-shrink: 0;
}
.brand-mark-svg {
display: block;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
border-radius: 10px;
/* Subtle hover lift */
transition: transform var(--t-base), box-shadow var(--t-base);
}
.brand:hover .brand-mark-svg {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Remove the old .brand-mark::after overlay — gradient is now in the SVG itself */
.brand-name { display: flex; align-items: baseline; gap: 4px; }
.brand-name .accent { color: var(--forest-700); font-style: italic; font-weight: 300; }
/* Nav */
.main-nav {
display: flex;
align-items: center;
gap: var(--sp-1);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--line-soft);
border-radius: var(--r-full);
padding: 6px;
box-shadow: var(--shadow-xs);
}
.nav-link {
position: relative;
padding: 0.55rem 1rem;
font-size: 0.875rem;
font-weight: 300;
color: var(--ink-soft);
border-radius: var(--r-full);
transition: all var(--t-fast);
display: inline-flex;
align-items: center;
gap: 5px;
}
.nav-link:hover { color: var(--ink); background: var(--paper-deep); }
.nav-link.active { color: var(--forest-700); background: var(--forest-50); }
/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { cursor: pointer; }
.nav-dropdown-trigger i { font-size: 0.65em; opacity: 0.7; transition: transform var(--t-fast); }
.nav-dropdown:hover .nav-dropdown-trigger i { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 280px;
background: #fff;
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
padding: var(--sp-2);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: all var(--t-base);
z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0.6rem 0.85rem;
border-radius: var(--r-md);
font-size: 0.875rem;
color: var(--ink-soft);
transition: all var(--t-fast);
}
.nav-dropdown-item i {
width: 28px;
height: 28px;
background: var(--forest-50);
color: var(--forest-700);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
flex-shrink: 0;
}
.nav-dropdown-item:hover { background: var(--paper-soft); color: var(--ink); }
.nav-dropdown-item:hover i { background: var(--forest-700); color: #fff; }
/* Header CTA */
.header-cta {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 0;
}
.header-phone {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 0.875rem;
color: var(--ink-soft);
font-weight: 300;
}
.header-phone i { color: var(--forest-700); }
/* Mobile toggle */
.mobile-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: #fff;
border: 1px solid var(--line-soft);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.mobile-toggle span {
width: 18px;
height: 1.5px;
background: var(--ink);
transition: all var(--t-fast);
}
.mobile-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1100px) {
.main-nav { display: none; }
.header-phone { display: none; }
.mobile-toggle { display: flex; }
}
@media (max-width: 600px) {
.header-cta .btn-primary { display: none; }
.header-cta .btn-ghost { display: none; }
}
/* Mobile menu overlay */
.mobile-menu {
position: fixed;
top: 0; right: 0;
width: min(400px, 100vw);
height: 100vh;
background: var(--paper);
border-left: 1px solid var(--line);
z-index: 99;
padding: calc(var(--header-h) + var(--sp-6)) var(--sp-6) var(--sp-6);
transform: translateX(100%);
transition: transform var(--t-base);
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav-link {
display: block;
padding: 0.95rem var(--sp-4);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 300;
color: var(--ink);
border-radius: var(--r-md);
transition: all var(--t-fast);
}
.mobile-nav-link:hover { background: var(--paper-deep); color: var(--forest-700); }
.mobile-nav-sublink {
display: block;
padding: 0.55rem var(--sp-4);
font-size: 0.9375rem;
color: var(--ink-mute);
}
.mobile-nav-sublink:hover { color: var(--forest-700); }
.mobile-nav-section-title {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-faint);
padding: var(--sp-4) var(--sp-4) var(--sp-2);
margin-top: var(--sp-3);
border-top: 1px solid var(--line-soft);
}
.mobile-menu-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 26, 0.4);
z-index: 98;
opacity: 0;
visibility: hidden;
transition: all var(--t-base);
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
/* ========================================
HERO (homepage)
======================================== */
.hero {
padding-top: calc(var(--header-h) + var(--sp-16));
padding-bottom: var(--sp-24);
position: relative;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 70% 20%, rgba(14, 77, 58, 0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(180, 83, 9, 0.04) 0%, transparent 60%);
z-index: 0;
}
.hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.5;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 70%);
z-index: 0;
}
.hero-content { position: relative; z-index: 2; }
.hero-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-faint);
letter-spacing: 0.1em;
margin-bottom: var(--sp-6);
}
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest-500); }
.hero-meta .divider { width: 24px; height: 1px; background: var(--line); }
.hero-title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-6xl);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: var(--sp-8);
max-width: 16ch;
}
.hero-title em {
font-style: italic;
font-weight: 300;
color: var(--forest-700);
position: relative;
}
.hero-title em::after {
content: '';
position: absolute;
bottom: 0.08em;
left: 0;
right: 0;
height: 0.12em;
background: var(--clay-600);
opacity: 0.25;
z-index: -1;
}
.hero-lead {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--ink-mute);
max-width: 52ch;
margin-bottom: var(--sp-10);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-16); }
/* Hero stats — editorial number strip */
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
padding-top: var(--sp-8);
}
.hero-stat {
padding: 0 var(--sp-6) 0 0;
border-right: 1px solid var(--line-soft);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
color: var(--ink);
line-height: 1;
margin-bottom: var(--sp-2);
letter-spacing: -0.02em;
}
.hero-stat-num .unit { color: var(--forest-700); font-style: italic; }
.hero-stat-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-faint);
}
@media (max-width: 768px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.hero-stat { border-right: none; border-bottom: 1px solid var(--line-soft); padding-bottom: var(--sp-4); }
.hero-stat:nth-last-child(-n+2) { border-bottom: none; }
}
/* Hero side card */
.hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-16);
align-items: end;
}
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-12); } }
.hero-aside {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-2xl);
padding: var(--sp-8);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.hero-aside::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--forest-700), var(--clay-600));
}
.hero-aside-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--forest-700);
margin-bottom: var(--sp-4);
}
.hero-aside-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
line-height: 1.3;
margin-bottom: var(--sp-4);
color: var(--ink);
}
.hero-aside-text {
font-size: var(--text-sm);
color: var(--ink-mute);
line-height: 1.7;
margin-bottom: var(--sp-6);
}
.hero-aside-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--sp-4);
border-top: 1px solid var(--line-soft);
}
.hero-aside-author {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.hero-aside-author-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 300;
font-size: 0.95rem;
}
.hero-aside-author-name { font-size: 0.875rem; font-weight: 300; color: var(--ink); }
.hero-aside-author-role { font-size: 0.75rem; color: var(--ink-faint); }
/* ========================================
TRUST STRIP
======================================== */
.trust-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--sp-6) 0;
background: var(--paper-soft);
}
.trust-grid {
display: grid;
grid-template-columns: auto repeat(4, 1fr);
gap: var(--sp-8);
align-items: center;
}
.trust-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-faint);
border-right: 1px solid var(--line);
padding-right: var(--sp-8);
}
.trust-item { display: flex; align-items: center; gap: var(--sp-3); }
.trust-item i {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--forest-50);
color: var(--forest-700);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 0.95rem;
}
.trust-item-text { font-size: 0.875rem; font-weight: 300; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 1024px) {
.trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.trust-label { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 var(--sp-4) 0; }
}
@media (max-width: 600px) {
.trust-grid { grid-template-columns: 1fr; }
}
/* ========================================
CARDS — Editorial Bento
======================================== */
.card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
padding: var(--sp-8);
transition: all var(--t-base);
position: relative;
overflow: hidden;
}
.card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-icon {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: var(--forest-50);
color: var(--forest-700);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: var(--sp-5);
transition: all var(--t-base);
}
.card:hover .card-icon {
background: var(--forest-700);
color: #fff;
transform: scale(1.05) rotate(-3deg);
}
.card-icon.clay { background: #FDF1E0; color: var(--clay-700); }
.card:hover .card-icon.clay { background: var(--clay-600); color: #fff; }
.card-icon.ink { background: var(--paper-deep); color: var(--ink); }
.card:hover .card-icon.ink { background: var(--ink); color: var(--paper); }
.card-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-3);
line-height: 1.25;
letter-spacing: -0.01em;
}
.card-text {
font-size: var(--text-sm);
color: var(--ink-mute);
line-height: 1.7;
}
/* Card with number badge */
.card-numbered {
counter-increment: card;
padding-top: var(--sp-10);
}
.card-numbered::before {
content: counter(card, decimal-leading-zero);
position: absolute;
top: var(--sp-6);
right: var(--sp-6);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-faint);
letter-spacing: 0.1em;
}
/* ========================================
BENTO GRID
======================================== */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--sp-5);
}
.bento > * { grid-column: span 4; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-5 { grid-column: span 5; }
.bento .span-6 { grid-column: span 6; }
.bento .span-7 { grid-column: span 7; }
.bento .span-8 { grid-column: span 8; }
.bento .span-12 { grid-column: span 12; }
.bento .row-2 { grid-row: span 2; }
@media (max-width: 1024px) {
.bento > * { grid-column: span 6; }
.bento .span-3, .bento .span-4, .bento .span-5 { grid-column: span 6; }
.bento .span-7, .bento .span-8 { grid-column: span 12; }
}
@media (max-width: 600px) {
.bento > * { grid-column: span 12 !important; }
}
/* ========================================
FEATURE CARD — image + content
======================================== */
.feature-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
overflow: hidden;
transition: all var(--t-base);
display: flex;
flex-direction: column;
}
.feature-card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.feature-card-image {
aspect-ratio: 16/10;
overflow: hidden;
background: var(--paper-deep);
position: relative;
}
.feature-card-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow);
}
.feature-card:hover .feature-card-image img { transform: scale(1.04); }
.feature-card-body { padding: var(--sp-8); flex: 1; display: flex; flex-direction: column; }
.feature-card-num {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--forest-700);
letter-spacing: 0.15em;
margin-bottom: var(--sp-3);
}
.feature-card-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-3);
line-height: 1.2;
}
.feature-card-text {
font-size: var(--text-sm);
color: var(--ink-mute);
line-height: 1.7;
flex: 1;
}
/* ========================================
STEPS / PROCESS
======================================== */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
counter-reset: step;
}
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step {
counter-increment: step;
padding: var(--sp-8);
border-top: 1.5px solid var(--ink);
position: relative;
}
.step::before {
content: counter(step, decimal-leading-zero);
display: block;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--forest-700);
letter-spacing: 0.15em;
margin-bottom: var(--sp-5);
}
.step-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-3);
line-height: 1.25;
}
.step-text {
font-size: var(--text-sm);
color: var(--ink-mute);
line-height: 1.7;
}
/* Vertical timeline for steps */
.steps-vertical {
display: flex;
flex-direction: column;
gap: 0;
counter-reset: step-v;
}
.step-v {
counter-increment: step-v;
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--sp-6);
padding: var(--sp-8) 0;
border-bottom: 1px solid var(--line-soft);
position: relative;
}
.step-v:last-child { border-bottom: none; }
.step-v::before {
content: counter(step-v, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 1rem;
color: var(--forest-700);
letter-spacing: 0.1em;
padding-top: 4px;
}
.step-v-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
margin-bottom: var(--sp-2);
color: var(--ink);
}
.step-v-text { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.7; max-width: 60ch; }
/* ========================================
STATS BAND
======================================== */
.stats-band {
background: var(--ink);
color: var(--paper);
padding: var(--sp-20) 0;
position: relative;
overflow: hidden;
}
.stats-band::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(14, 77, 58, 0.35) 0%, transparent 40%),
radial-gradient(circle at 80% 30%, rgba(180, 83, 9, 0.20) 0%, transparent 40%);
}
.stats-band-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-8);
position: relative;
z-index: 2;
}
@media (max-width: 768px) { .stats-band-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); } }
.stat-block {
border-left: 1px solid rgba(255,255,255,0.15);
padding-left: var(--sp-5);
}
.stat-num {
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: 300;
line-height: 1;
margin-bottom: var(--sp-3);
letter-spacing: -0.03em;
}
.stat-num .unit { color: var(--forest-300); font-style: italic; font-size: 0.5em; }
.stat-label {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.6);
}
/* ========================================
TEAM
======================================== */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
overflow: hidden;
transition: all var(--t-base);
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.team-card-image {
aspect-ratio: 4/5;
overflow: hidden;
background: var(--paper-deep);
position: relative;
}
.team-card-image img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(20%);
transition: all var(--t-slow);
}
.team-card:hover .team-card-image img { filter: grayscale(0%); transform: scale(1.03); }
.team-card-body { padding: var(--sp-5); }
.team-card-name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
color: var(--ink);
margin-bottom: 2px;
}
.team-card-role {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--forest-700);
}
/* ========================================
GALLERY — Editorial Mosaic
======================================== */
.gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 180px;
gap: var(--sp-4);
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--paper-deep);
}
.gallery-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.big { grid-column: span 2; grid-row: span 2; }
.gallery-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: var(--sp-6) var(--sp-4) var(--sp-4);
background: linear-gradient(transparent, rgba(10, 14, 26, 0.7));
color: #fff;
font-size: 0.8125rem;
font-weight: 300;
opacity: 0;
transform: translateY(8px);
transition: all var(--t-base);
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) {
.gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; }
.gallery-item.big { grid-column: span 6; }
.gallery-item.wide { grid-column: span 6; }
}
@media (max-width: 600px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
.gallery-item.tall { grid-row: span 1; }
.gallery-item.wide, .gallery-item.big { grid-column: span 2; }
}
/* ========================================
TESTIMONIALS
======================================== */
.testimonials {
background: var(--paper-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--sp-20) 0;
}
.testimonial-feature {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.testimonial-mark {
font-family: var(--font-display);
font-size: 5rem;
line-height: 0.5;
color: var(--forest-300);
margin-bottom: var(--sp-4);
}
.testimonial-text {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
line-height: 1.3;
color: var(--ink);
margin-bottom: var(--sp-8);
letter-spacing: -0.01em;
}
.testimonial-text em { color: var(--forest-700); font-style: italic; }
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.testimonial-author-avatar {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 300;
}
.testimonial-author-name { font-weight: 300; color: var(--ink); }
.testimonial-author-role { font-size: 0.8125rem; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.05em; }
.testimonial-nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
margin-top: var(--sp-12);
}
.testimonial-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--line-strong);
cursor: pointer;
transition: all var(--t-fast);
}
.testimonial-dot.active { background: var(--forest-700); width: 28px; border-radius: 4px; }
.testimonial-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: #fff;
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast);
color: var(--ink-soft);
}
.testimonial-arrow:hover { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
/* ========================================
FAQ
======================================== */
.faq-list {
max-width: 880px;
margin: 0 auto;
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
transition: all var(--t-base);
}
.faq-item.active { background: var(--paper-soft); }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-6) var(--sp-2);
cursor: pointer;
transition: padding var(--t-base);
}
.faq-item.active .faq-question { padding-left: var(--sp-5); }
.faq-question-text {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
color: var(--ink);
line-height: 1.4;
}
.faq-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--paper-deep);
color: var(--forest-700);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all var(--t-base);
}
.faq-item.active .faq-icon { background: var(--forest-700); color: #fff; transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-slow);
}
.faq-item.active .faq-answer { max-height: 600px; }
.faq-answer-inner {
padding: 0 var(--sp-2) var(--sp-6);
font-size: var(--text-md);
color: var(--ink-mute);
line-height: 1.75;
max-width: 70ch;
}
.faq-item.active .faq-answer-inner { padding-left: var(--sp-5); padding-right: var(--sp-5); }
/* ========================================
FORMS
======================================== */
.form-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-2xl);
padding: var(--sp-10);
box-shadow: var(--shadow-md);
}
.form-card-header {
display: flex;
align-items: center;
gap: var(--sp-4);
padding-bottom: var(--sp-6);
margin-bottom: var(--sp-8);
border-bottom: 1px solid var(--line-soft);
}
.form-card-header-icon {
width: 44px; height: 44px;
border-radius: var(--r-md);
background: var(--forest-50);
color: var(--forest-700);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
}
.form-card-header-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
color: var(--ink);
line-height: 1.2;
}
.form-card-header-sub { font-size: 0.875rem; color: var(--ink-mute); }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.form-group { margin-bottom: var(--sp-5); }
.form-label {
display: block;
font-size: 0.8125rem;
font-weight: 300;
color: var(--ink-soft);
margin-bottom: var(--sp-2);
letter-spacing: 0.01em;
}
.form-label .req { color: var(--clay-600); }
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 0.85rem 1rem;
background: var(--paper-soft);
border: 1.5px solid var(--line);
border-radius: var(--r-md);
color: var(--ink);
font-size: var(--text-sm);
font-family: var(--font-body);
transition: all var(--t-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--forest-700);
background: #fff;
box-shadow: 0 0 0 4px var(--forest-50);
}
.form-input.field-error { border-color: var(--error); box-shadow: 0 0 0 4px var(--error-bg); }
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C6068' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
/* Amount input */
.amount-wrap { position: relative; }
.amount-prefix {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--forest-700);
font-weight: 300;
font-size: var(--text-md);
pointer-events: none;
z-index: 2;
}
.amount-wrap .form-input { padding-left: 2.25rem; }
/* Checkbox */
.checkbox-label {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
cursor: pointer;
font-size: 0.875rem;
color: var(--ink-mute);
line-height: 1.5;
}
.checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-custom {
width: 20px; height: 20px;
border: 1.5px solid var(--line-strong);
border-radius: var(--r-sm);
background: #fff;
flex-shrink: 0;
margin-top: 1px;
position: relative;
transition: all var(--t-fast);
}
.checkbox-custom::after {
content: '';
position: absolute;
top: 2px; left: 5px;
width: 6px; height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform var(--t-fast);
}
.checkbox:checked + .checkbox-custom {
background: var(--forest-700);
border-color: var(--forest-700);
}
.checkbox:checked + .checkbox-custom::after { transform: rotate(45deg) scale(1); }
.checkbox:focus + .checkbox-custom { box-shadow: 0 0 0 4px var(--forest-50); }
.checkbox-text a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 2px; }
/* Form success/error */
.form-success {
background: var(--success-bg);
border: 1px solid #BBF7D0;
color: #065F46;
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-md);
margin-bottom: var(--sp-6);
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 0.875rem;
line-height: 1.5;
}
.form-error {
background: var(--error-bg);
border: 1px solid #FECACA;
color: #991B1B;
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-md);
margin-bottom: var(--sp-6);
text-align: center;
font-size: 0.875rem;
}
/* Form layout */
.form-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--sp-8);
align-items: start;
}
@media (max-width: 1024px) {
.form-layout { grid-template-columns: 1fr; }
.form-sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
.form-sidebar { grid-template-columns: 1fr; }
}
/* Info cards in sidebar */
.info-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
padding: var(--sp-6);
transition: all var(--t-base);
}
.info-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.info-card-icon {
width: 40px; height: 40px;
border-radius: var(--r-md);
background: var(--forest-50);
color: var(--forest-700);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--sp-4);
}
.info-card-title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 300;
margin-bottom: var(--sp-2);
color: var(--ink);
}
.info-card-text { font-size: 0.8125rem; color: var(--ink-mute); line-height: 1.6; }
/* ========================================
PAGE HERO (interior pages)
======================================== */
.page-hero {
padding-top: calc(var(--header-h) + var(--sp-16));
padding-bottom: var(--sp-12);
border-bottom: 1px solid var(--line);
position: relative;
background: var(--paper);
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.4;
mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-faint);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--sp-6);
}
.breadcrumb a { color: var(--ink-mute); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--forest-700); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb .current { color: var(--forest-700); }
.page-title {
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: var(--sp-5);
max-width: 18ch;
}
.page-title em { font-style: italic; font-weight: 300; color: var(--forest-700); }
.page-lead {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--ink-mute);
max-width: 62ch;
}
/* ========================================
LEGAL CONTENT (privacy/terms)
======================================== */
.legal-content {
max-width: 760px;
margin: 0 auto;
font-size: var(--text-md);
line-height: 1.8;
color: var(--ink-soft);
}
.legal-content h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
color: var(--ink);
margin-top: var(--sp-12);
margin-bottom: var(--sp-4);
letter-spacing: -0.01em;
scroll-margin-top: 100px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
color: var(--ink);
margin-top: var(--sp-8);
margin-bottom: var(--sp-3);
}
.legal-content p { margin-bottom: var(--sp-4); }
.legal-content ul, .legal-content ol { margin: var(--sp-4) 0; padding-left: var(--sp-6); }
.legal-content li { margin-bottom: var(--sp-2); }
.legal-content ul li { list-style: disc; }
.legal-content ol li { list-style: decimal; }
.legal-content strong { color: var(--ink); font-weight: 300; }
.legal-content a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 2px; }
/* ========================================
SCAM DETAIL
======================================== */
.scam-detail-content {
max-width: 760px;
margin: 0 auto;
font-size: var(--text-md);
line-height: 1.8;
color: var(--ink-soft);
}
.scam-detail-content p { margin-bottom: var(--sp-5); }
.warning-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.warning-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--sp-4);
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--line-soft);
border-left: 3px solid var(--clay-600);
border-radius: var(--r-md);
transition: all var(--t-base);
}
.warning-item:hover { box-shadow: var(--shadow-sm); }
.warning-item-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: #FDF1E0;
color: var(--clay-700);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.warning-item-title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-2);
}
.warning-item-text { font-size: 0.875rem; color: var(--ink-mute); line-height: 1.6; }
/* Scam cards grid */
.scam-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
@media (max-width: 1200px) { .scam-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .scam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scam-grid { grid-template-columns: 1fr; } }
.scam-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
padding: var(--sp-8);
transition: all var(--t-base);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.scam-card:hover { border-color: var(--forest-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.scam-card-icon {
width: 48px; height: 48px;
border-radius: var(--r-md);
background: var(--forest-50);
color: var(--forest-700);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
margin-bottom: var(--sp-5);
transition: all var(--t-base);
}
.scam-card:hover .scam-card-icon { background: var(--forest-700); color: #fff; }
.scam-card-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-3);
line-height: 1.3;
}
.scam-card-text {
font-size: 0.875rem;
color: var(--ink-mute);
line-height: 1.65;
margin-bottom: var(--sp-5);
flex: 1;
}
.scam-card-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--forest-700);
font-size: 0.8125rem;
font-weight: 300;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.scam-card-link i { font-size: 0.7em; transition: transform var(--t-fast); }
.scam-card:hover .scam-card-link i { transform: translateX(3px); }
/* Filter pills */
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: center;
margin-bottom: var(--sp-12);
}
.filter-pill {
padding: 0.5rem 1.1rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-full);
color: var(--ink-soft);
font-size: 0.8125rem;
font-weight: 300;
cursor: pointer;
transition: all var(--t-fast);
}
.filter-pill:hover { border-color: var(--forest-300); color: var(--forest-700); }
.filter-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ========================================
CTA BAND
======================================== */
.cta-band {
background: var(--ink);
color: var(--paper);
border-radius: var(--r-2xl);
padding: var(--sp-20) var(--sp-16);
position: relative;
overflow: hidden;
text-align: center;
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 20%, rgba(14, 77, 58, 0.4) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(180, 83, 9, 0.25) 0%, transparent 50%);
pointer-events: none;
}
.cta-band::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
.cta-band-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta-band-title {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 300;
line-height: 1.1;
margin-bottom: var(--sp-5);
letter-spacing: -0.025em;
}
.cta-band-title em { font-style: italic; color: var(--forest-300); }
.cta-band-text {
font-size: var(--text-md);
color: rgba(255,255,255,0.7);
line-height: 1.6;
margin-bottom: var(--sp-8);
}
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); }
.cta-band .btn-primary:hover { background: #fff; }
.cta-band .btn-outline { color: var(--paper); border-color: rgba(255,255,255,0.3); }
.cta-band .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* ========================================
FOOTER
======================================== */
.site-footer {
background: var(--ink);
color: var(--paper);
padding: var(--sp-20) 0 var(--sp-8);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 60%; height: 100%;
background: radial-gradient(circle, rgba(14, 77, 58, 0.18) 0%, transparent 60%);
pointer-events: none;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.4fr 1.2fr;
gap: var(--sp-12);
position: relative;
z-index: 2;
margin-bottom: var(--sp-16);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color: var(--paper); margin-bottom: var(--sp-5); }
.footer-brand .brand-mark-svg { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.footer-brand .brand-name .accent { color: var(--forest-300); }
.footer-tagline {
font-size: 0.9375rem;
color: rgba(255,255,255,0.6);
line-height: 1.7;
max-width: 36ch;
margin-bottom: var(--sp-6);
}
.footer-social { display: flex; gap: var(--sp-2); }
.footer-social a {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.7);
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast);
}
.footer-social a:hover { background: var(--forest-700); border-color: var(--forest-700); color: #fff; transform: translateY(-2px); }
.footer-heading {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.4);
margin-bottom: var(--sp-5);
}
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a {
font-size: 0.9375rem;
color: rgba(255,255,255,0.75);
transition: all var(--t-fast);
}
.footer-links a:hover { color: var(--forest-300); padding-left: 4px; }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
font-size: 0.9375rem;
color: rgba(255,255,255,0.75);
line-height: 1.6;
}
.footer-contact-item i {
color: var(--forest-300);
margin-top: 4px;
flex-shrink: 0;
}
.footer-contact-item a { color: rgba(255,255,255,0.75); }
.footer-contact-item a:hover { color: var(--forest-300); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--sp-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.footer-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }
.footer-legal { display: flex; gap: var(--sp-5); }
.footer-legal a { font-size: 0.8125rem; color: rgba(255,255,255,0.5); transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--forest-300); }
/* ========================================
TOAST
======================================== */
.toast-container {
position: fixed;
bottom: var(--sp-6);
right: var(--sp-6);
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--sp-2);
pointer-events: none;
}
.toast {
background: var(--ink);
color: var(--paper);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
font-size: 0.875rem;
max-width: 360px;
transform: translateX(120%);
opacity: 0;
transition: all var(--t-base);
border-left: 3px solid var(--forest-500);
pointer-events: auto;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.toast-error { border-left-color: var(--error); }
.toast.toast-success { border-left-color: var(--success); }
/* ========================================
REVEAL ANIMATIONS
======================================== */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ========================================
UTILITIES
======================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); } .mt-16 { margin-top: var(--sp-16); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); } .mb-12 { margin-bottom: var(--sp-12); } .mb-16 { margin-bottom: var(--sp-16); }
.bg-paper { background: var(--paper); }
.bg-soft { background: var(--paper-soft); }
.bg-deep { background: var(--paper-deep); }
.bg-forest { background: var(--forest-700); color: #fff; }
.bg-ink { background: var(--ink); color: var(--paper); }
.divider-thin {
height: 1px;
background: var(--line);
margin: var(--sp-12) 0;
}
/* Highlight inline */
.highlight {
color: var(--forest-700);
font-style: italic;
font-weight: 300;
}
.gold { color: var(--forest-700); font-style: italic; font-weight: 300; }
/* Two column layout */
.split-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-16);
align-items: center;
}
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; gap: var(--sp-10); } }
/* Image frame */
.image-frame {
border-radius: var(--r-2xl);
overflow: hidden;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-lg);
aspect-ratio: 4/3;
background: var(--paper-deep);
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Section divider with label */
.divider-label {
display: flex;
align-items: center;
gap: var(--sp-4);
margin: var(--sp-20) 0;
color: var(--ink-faint);
}
.divider-label::before, .divider-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.divider-label-text {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* Pill */
.pill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.35rem 0.85rem;
border-radius: var(--r-full);
background: var(--forest-50);
color: var(--forest-700);
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pill .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--forest-500);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* ============================================================
POPPINS THIN ENFORCEMENT
Override any element that previously used heavier weights
to keep the design thin & airy throughout.
============================================================ */
h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; }
.section-title { font-weight: 300 !important; letter-spacing: -0.015em; }
.section-title em { font-weight: 200 !important; }
.btn, .nav-link, .eyebrow, .section-num,
.testimonial-author-name, .team-card-name,
.card-title, .stat-num, .faq-question {
font-weight: 300 !important;
}
strong, b { font-weight: 400 !important; }
.brand-name { font-weight: 300 !important; letter-spacing: 0.01em; }
.brand-name .accent { font-weight: 200 !important; }
/* ============================================================
DARK MODE (toggle adds data-theme="dark" on )
============================================================ */
:root[data-theme="dark"] {
/* Paper & Ink — inverted */
--paper: #0A0E12;
--paper-soft: #0F141A;
--paper-deep: #06090C;
--surface: #161B22;
--surface-2: #1C232C;
--ink: #F1F4F8;
--ink-soft: #D5DBE3;
--ink-mute: #97A1AE;
--ink-faint: #6B7480;
--line: #2A323C;
--line-soft: #1F262E;
--line-strong: #3A434E;
/* Forest — slightly brightened for dark backgrounds */
--forest-900: #062B22;
--forest-800: #0A3A2E;
--forest-700: #2E8B6E; /* brighter for contrast */
--forest-600: #36A082;
--forest-500: #4DB396;
--forest-400: #6BC4AB;
--forest-300: #8FD5C0;
--forest-200: #B6E4D5;
--forest-100: #1A332B;
--forest-50: #11221C;
/* Clay */
--clay-900: #4A2009;
--clay-800: #6B2E0D;
--clay-700: #8B3D14;
--clay-600: #D9833B; /* brighter */
--clay-500: #E89954;
--clay-400: #F0AE73;
--clay-300: #F4C596;
--clay-200: #F8DBC0;
/* Functional */
--success: #4ADE80;
--success-bg: #0F2A1C;
--error: #F87171;
--error-bg: #2A1414;
--warning: #FBBF24;
--warning-bg: #2A2010;
--info: #60A5FA;
--info-bg: #0F1F33;
/* Shadows — softer on dark */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.65), 0 12px 30px rgba(0, 0, 0, 0.40);
--shadow-forest: 0 12px 40px rgba(46, 139, 110, 0.30);
--shadow-clay: 0 12px 40px rgba(217, 131, 59, 0.30);
}
/* Dark-mode body & header adjustments — exclude admin pages (they have their own dark styling) */
:root[data-theme="dark"] body:not(.admin-login):not(.admin-dashboard) { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .site-header { background: rgba(15, 20, 26, 0.85); border-color: var(--line); }
:root[data-theme="dark"] .header-inner { background: rgba(15, 20, 26, 0.85); }
:root[data-theme="dark"] .brand-name { color: var(--ink); }
:root[data-theme="dark"] .brand-name .accent { color: var(--forest-400); }
:root[data-theme="dark"] .brand-mark-svg { filter: brightness(1.05); }
:root[data-theme="dark"] .nav-link { color: var(--ink-soft); }
:root[data-theme="dark"] .nav-link:hover { color: var(--ink); }
:root[data-theme="dark"] .nav-link.active { color: var(--forest-300); background: var(--forest-100); }
:root[data-theme="dark"] .nav-dropdown-menu { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .nav-dropdown-item { color: var(--ink-soft); }
:root[data-theme="dark"] .nav-dropdown-item:hover { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .header-phone { color: var(--ink-mute); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .testimonial-feature,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .scam-card {
background: var(--surface);
border-color: var(--line);
color: var(--ink);
}
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .team-card-name,
:root[data-theme="dark"] .faq-question,
:root[data-theme="dark"] .testimonial-text,
:root[data-theme="dark"] .stat-num,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2,
:root[data-theme="dark"] h3, :root[data-theme="dark"] h4 {
color: var(--ink);
}
:root[data-theme="dark"] .section-lead,
:root[data-theme="dark"] .card-text,
:root[data-theme="dark"] .team-card-role,
:root[data-theme="dark"] .faq-answer,
:root[data-theme="dark"] .testimonial-author-role,
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] p {
color: var(--ink-mute);
}
:root[data-theme="dark"] .eyebrow { color: var(--forest-300); }
:root[data-theme="dark"] .eyebrow::before { background: var(--forest-300); }
:root[data-theme="dark"] .section-title em { color: var(--forest-300); }
:root[data-theme="dark"] .footer { background: var(--paper-deep); border-color: var(--line); color: var(--ink-mute); }
:root[data-theme="dark"] .footer a { color: var(--ink-soft); }
:root[data-theme="dark"] .footer h4, :root[data-theme="dark"] .footer .footer-title { color: var(--ink); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
background: var(--surface-2);
color: var(--ink);
border-color: var(--line);
}
:root[data-theme="dark"] .btn-outline { color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .cta-band { background: var(--forest-800); color: var(--ink); }
:root[data-theme="dark"] .cta-band .eyebrow { color: var(--forest-300); }
:root[data-theme="dark"] .cta-band-title { color: var(--ink); }
:root[data-theme="dark"] .cta-band-text { color: rgba(241,244,248,0.78); }
:root[data-theme="dark"] .mobile-menu { background: var(--paper); }
:root[data-theme="dark"] .mobile-nav-link,
:root[data-theme="dark"] .mobile-nav-sublink { color: var(--ink-soft); }
:root[data-theme="dark"] .mobile-nav-section-title { color: var(--ink-faint); }
:root[data-theme="dark"] .testimonial-author-avatar { background: var(--forest-700); color: #fff; }
:root[data-theme="dark"] .testimonial-mark { color: var(--forest-600); }
:root[data-theme="dark"] .testimonial-dots .testimonial-dot { background: var(--line-strong); }
:root[data-theme="dark"] .testimonial-dots .testimonial-dot.active { background: var(--forest-400); }
:root[data-theme="dark"] .faq-item.open .faq-question { color: var(--forest-300); }
:root[data-theme="dark"] .card-icon { background: var(--forest-100); color: var(--forest-300); }
:root[data-theme="dark"] .card-icon.clay { background: rgba(217,131,59,0.15); color: var(--clay-400); }
:root[data-theme="dark"] .card-icon.ink { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .stats-band { background: var(--forest-900); }
:root[data-theme="dark"] .stats-band .stat-num { color: #fff; }
:root[data-theme="dark"] .stats-band .stat-label { color: rgba(255,255,255,0.65); }
/* ============================================================
DARK MODE FIXES — explicit overrides for hardcoded whites
(footer, header scrolled, nav pill, dropdown, mobile toggle,
form inputs, FAQ items, etc.)
============================================================ */
/* Footer — force deep dark bg + light text in dark mode (was inverted) */
:root[data-theme="dark"] .site-footer {
background: #06090C;
color: #D5DBE3;
}
:root[data-theme="dark"] .site-footer::before {
background: radial-gradient(circle, rgba(46, 139, 110, 0.20) 0%, transparent 60%);
}
:root[data-theme="dark"] .footer-brand .brand { color: #F1F4F8; }
:root[data-theme="dark"] .footer-brand .brand-mark-svg { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }
:root[data-theme="dark"] .footer-brand .brand-name .accent { color: var(--forest-300); }
:root[data-theme="dark"] .footer-tagline { color: rgba(209, 219, 227, 0.65); }
:root[data-theme="dark"] .footer-heading { color: rgba(151, 161, 174, 0.65); }
:root[data-theme="dark"] .footer-links a { color: rgba(209, 219, 227, 0.75); }
:root[data-theme="dark"] .footer-links a:hover { color: var(--forest-300); }
:root[data-theme="dark"] .footer-contact-item { color: rgba(209, 219, 227, 0.75); }
:root[data-theme="dark"] .footer-contact-item a { color: rgba(209, 219, 227, 0.85); }
:root[data-theme="dark"] .footer-contact-item a:hover { color: var(--forest-300); }
:root[data-theme="dark"] .footer-contact-item i { color: var(--forest-300); }
:root[data-theme="dark"] .footer-social a {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(209, 219, 227, 0.7);
}
:root[data-theme="dark"] .footer-social a:hover {
background: var(--forest-600);
border-color: var(--forest-600);
color: #fff;
}
:root[data-theme="dark"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .footer-copy { color: rgba(151, 161, 174, 0.55); }
:root[data-theme="dark"] .footer-legal a { color: rgba(209, 219, 227, 0.65); }
/* Header scrolled state — was hardcoded light cream */
:root[data-theme="dark"] .site-header.scrolled {
background: rgba(10, 14, 18, 0.85);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom-color: var(--line);
}
/* Main nav pill — was hardcoded white glass */
:root[data-theme="dark"] .main-nav {
background: rgba(22, 27, 34, 0.7);
border-color: var(--line);
}
:root[data-theme="dark"] .nav-link { color: var(--ink-soft); }
:root[data-theme="dark"] .nav-link:hover { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .nav-link.active { background: var(--forest-100); color: var(--forest-300); }
/* Dropdown menu — was hardcoded #fff */
:root[data-theme="dark"] .nav-dropdown-menu {
background: var(--surface);
border-color: var(--line);
box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .nav-dropdown-item { color: var(--ink-soft); }
:root[data-theme="dark"] .nav-dropdown-item:hover { background: var(--surface-2); color: var(--ink); }
/* Mobile toggle — was hardcoded #fff */
:root[data-theme="dark"] .mobile-toggle {
background: var(--surface);
border-color: var(--line);
}
:root[data-theme="dark"] .mobile-toggle span { background: var(--ink); }
/* Cards / scam cards / info cards / form cards — explicit dark overrides */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .scam-card,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .stat-card {
background: var(--surface);
border-color: var(--line);
}
:root[data-theme="dark"] .scam-card-title,
:root[data-theme="dark"] .info-card-title,
:root[data-theme="dark"] .form-card-header-title {
color: var(--ink);
}
:root[data-theme="dark"] .scam-card-text,
:root[data-theme="dark"] .info-card-text,
:root[data-theme="dark"] .form-card-header-sub {
color: var(--ink-mute);
}
:root[data-theme="dark"] .scam-card-link { color: var(--forest-300); }
:root[data-theme="dark"] .scam-card-icon { background: var(--forest-100); color: var(--forest-300); }
:root[data-theme="dark"] .info-card-icon { background: var(--surface-2); color: var(--forest-300); }
:root[data-theme="dark"] .form-card { background: var(--surface); border-color: var(--line); }
/* Form inputs / labels / selects */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-textarea,
:root[data-theme="dark"] .form-select {
background: var(--surface-2);
color: var(--ink);
border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-input::placeholder,
:root[data-theme="dark"] .form-textarea::placeholder { color: var(--ink-faint); }
:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-textarea:focus,
:root[data-theme="dark"] .form-select:focus {
border-color: var(--forest-500);
outline-color: var(--forest-500);
}
:root[data-theme="dark"] .form-label { color: var(--ink-soft); }
:root[data-theme="dark"] .form-select option { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .amount-prefix { color: var(--ink-mute); background: var(--surface-2); border-color: var(--line-strong); }
:root[data-theme="dark"] .checkbox-text { color: var(--ink-mute); }
:root[data-theme="dark"] .checkbox-label a { color: var(--forest-300); }
:root[data-theme="dark"] .checkbox-custom { border-color: var(--line-strong); background: var(--surface-2); }
:root[data-theme="dark"] .checkbox-label input:checked + .checkbox-custom { background: var(--forest-600); border-color: var(--forest-600); }
/* FAQ items — explicit dark */
:root[data-theme="dark"] .faq-item { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .faq-question { color: var(--ink); }
:root[data-theme="dark"] .faq-answer { color: var(--ink-mute); }
:root[data-theme="dark"] .faq-item.open { background: var(--surface); border-color: var(--forest-500); }
/* Steps — process steps on how-it-works + scam pages */
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .step-card {
background: var(--surface);
border-color: var(--line);
color: var(--ink);
}
:root[data-theme="dark"] .step-num,
:root[data-theme="dark"] .step-number { color: var(--forest-300); background: var(--forest-100); }
:root[data-theme="dark"] .step-title,
:root[data-theme="dark"] .step-card-title { color: var(--ink); }
:root[data-theme="dark"] .step-text,
:root[data-theme="dark"] .step-card-text { color: var(--ink-mute); }
/* Page hero / breadcrumb */
:root[data-theme="dark"] .page-hero { background: var(--paper-soft); border-bottom-color: var(--line); }
:root[data-theme="dark"] .page-title { color: var(--ink); }
:root[data-theme="dark"] .page-lead { color: var(--ink-mute); }
:root[data-theme="dark"] .breadcrumb a { color: var(--ink-mute); }
:root[data-theme="dark"] .breadcrumb .current { color: var(--ink); }
:root[data-theme="dark"] .breadcrumb .sep { color: var(--ink-faint); }
/* CTA band on home */
:root[data-theme="dark"] .cta-band { background: linear-gradient(135deg, #062B22, #0A3A2E); border-color: var(--forest-700); }
:root[data-theme="dark"] .cta-band .eyebrow { color: var(--forest-300); }
:root[data-theme="dark"] .cta-band-title { color: #F1F4F8; }
:root[data-theme="dark"] .cta-band-text { color: rgba(209, 219, 227, 0.78); }
:root[data-theme="dark"] .cta-band .btn-primary { background: var(--forest-500); color: #fff; }
:root[data-theme="dark"] .cta-band .btn-primary:hover { background: var(--forest-400); color: #fff; }
:root[data-theme="dark"] .cta-band .btn-outline { color: #F1F4F8; border-color: rgba(255,255,255,0.4); }
:root[data-theme="dark"] .cta-band .btn-outline:hover { background: #F1F4F8; color: var(--forest-900); border-color: #F1F4F8; }
/* Stats band */
:root[data-theme="dark"] .stats-band { background: linear-gradient(135deg, #062B22, #0A3A2E); }
:root[data-theme="dark"] .stats-band .stat-num { color: #fff; }
:root[data-theme="dark"] .stats-band .stat-label { color: rgba(255, 255, 255, 0.7); }
/* "A track record that speaks for itself" title uses inline color: var(--paper)
which becomes dark in dark mode — force it to white here. */
:root[data-theme="dark"] .stats-band .section-title,
:root[data-theme="dark"] .stats-band h2[style*="color: var(--paper)"],
:root[data-theme="dark"] .stats-band h2[style*="color:var(--paper)"] {
color: #ffffff !important;
}
/* Hero (home page) */
:root[data-theme="dark"] .hero { background: var(--paper); }
:root[data-theme="dark"] .hero-title { color: var(--ink); }
:root[data-theme="dark"] .hero-subtitle { color: var(--ink-mute); }
:root[data-theme="dark"] .hero-eyebrow { color: var(--forest-300); }
:root[data-theme="dark"] .hero-eyebrow::before { background: var(--forest-300); }
/* Filter pills (scam index) */
:root[data-theme="dark"] .filter-pill {
background: var(--surface);
border-color: var(--line);
color: var(--ink-soft);
}
:root[data-theme="dark"] .filter-pill:hover { border-color: var(--forest-500); color: var(--forest-300); }
:root[data-theme="dark"] .filter-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Testimonial feature card */
:root[data-theme="dark"] .testimonial-feature { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .testimonial-text { color: var(--ink); }
:root[data-theme="dark"] .testimonial-author-name { color: var(--ink); }
:root[data-theme="dark"] .testimonial-author-role { color: var(--ink-mute); }
:root[data-theme="dark"] .testimonial-author-avatar { background: var(--forest-600); color: #fff; }
:root[data-theme="dark"] .testimonial-mark { color: var(--forest-500); opacity: 0.5; }
/* Team cards */
:root[data-theme="dark"] .team-card { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .team-card-body { background: var(--surface); }
:root[data-theme="dark"] .team-card-name { color: var(--ink); }
:root[data-theme="dark"] .team-card-role { color: var(--ink-mute); }
/* Success / error / info banners on forms */
:root[data-theme="dark"] .form-success { background: var(--success-bg); border-color: rgba(74,222,128,0.3); color: var(--success); }
:root[data-theme="dark"] .form-error { background: var(--error-bg); border-color: rgba(248,113,113,0.3); color: var(--error); }
/* Body paragraphs / links / general text */
:root[data-theme="dark"] p { color: var(--ink-mute); }
:root[data-theme="dark"] a { color: var(--forest-300); }
:root[data-theme="dark"] strong { color: var(--ink); }
/* Generic content sections (privacy / terms / about / scam detail pages) */
:root[data-theme="dark"] .content-section,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .prose,
:root[data-theme="dark"] article {
color: var(--ink-mute);
}
:root[data-theme="dark"] .content-section h1,
:root[data-theme="dark"] .content-section h2,
:root[data-theme="dark"] .content-section h3,
:root[data-theme="dark"] .content-section h4,
:root[data-theme="dark"] .prose h1,
:root[data-theme="dark"] .prose h2,
:root[data-theme="dark"] .prose h3,
:root[data-theme="dark"] .prose h4,
:root[data-theme="dark"] article h1,
:root[data-theme="dark"] article h2,
:root[data-theme="dark"] article h3,
:root[data-theme="dark"] article h4 {
color: var(--ink);
}
:root[data-theme="dark"] .prose li,
:root[data-theme="dark"] article li { color: var(--ink-mute); }
:root[data-theme="dark"] .prose strong,
:root[data-theme="dark"] article strong { color: var(--ink); }
:root[data-theme="dark"] .prose a,
:root[data-theme="dark"] article a { color: var(--forest-300); }
/* Misc utility — box backgrounds that are hardcoded white */
:root[data-theme="dark"] .scam-info-box,
:root[data-theme="dark"] .info-box,
:root[data-theme="dark"] .warning-box,
:root[data-theme="dark"] .callout {
background: var(--surface);
border-color: var(--line);
color: var(--ink);
}
/* Selection */
:root[data-theme="dark"] ::selection { background: var(--forest-600); color: #fff; }
/* Forms inside scam detail pages — same form-card treatment */
:root[data-theme="dark"] .scam-claim-form { background: var(--surface); }
/* Sidebar info-card variant with green background — keep its tinted look */
:root[data-theme="dark"] .form-sidebar .info-card[style*="forest-700"] {
background: linear-gradient(135deg, #0E4D3A, #15604A) !important;
color: #fff !important;
}
/* Body & html base bg (already set, but ensure any inline override loses) */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body { background: var(--paper); }
/* Page hero — was using paper-soft (cream) background */
:root[data-theme="dark"] .page-hero { background: linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%); }
/* ============================================================
THEME TOGGLE SWITCH (top-right, desktop + mobile)
============================================================ */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--r-full);
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
transition: all var(--t-base);
flex-shrink: 0;
margin-left: var(--sp-3);
position: relative;
overflow: hidden;
}
.theme-toggle:hover { border-color: var(--forest-500); transform: translateY(-1px); }
.theme-toggle i { font-size: 0.95rem; transition: transform 0.4s var(--ease); }
.theme-toggle .icon-sun { display: inline; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
:root[data-theme="dark"] .theme-toggle { background: var(--surface-2); border-color: var(--line-strong); }
/* Hide theme toggle on very narrow screens to avoid overflow — keep icon-only */
@media (max-width: 380px) {
.header-phone { display: none; }
}
/* ============================================================
MOBILE CAROUSELS (≤ 768px)
Convert any multi-item grid (3+) to horizontal swipe carousel
using native CSS scroll-snap — works on every grid without JS.
============================================================ */
@media (max-width: 768px) {
/* Generic container — overflow scroll + hidden scrollbar.
Also wraps each carousel in a positioned .carousel-wrap so
the hover-only prev/next arrows have an anchor. */
.bento,
.team-grid,
.stats-band-grid,
.scam-grid,
.steps,
.faq-list,
.card-grid,
.services-grid,
.values-grid,
.process-grid,
.steps-grid,
.feature-grid,
.trust-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
gap: var(--sp-4) !important;
padding: var(--sp-2) var(--sp-4) var(--sp-6);
margin-left: calc(-1 * var(--sp-4));
margin-right: calc(-1 * var(--sp-4));
padding-left: var(--sp-4);
padding-right: var(--sp-4);
counter-reset: card;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Hide scrollbars entirely (cross-browser) */
.bento::-webkit-scrollbar,
.team-grid::-webkit-scrollbar,
.stats-band-grid::-webkit-scrollbar,
.scam-grid::-webkit-scrollbar,
.steps::-webkit-scrollbar,
.faq-list::-webkit-scrollbar,
.card-grid::-webkit-scrollbar,
.services-grid::-webkit-scrollbar,
.values-grid::-webkit-scrollbar,
.process-grid::-webkit-scrollbar,
.steps-grid::-webkit-scrollbar,
.feature-grid::-webkit-scrollbar,
.trust-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Each child becomes a snap card */
.bento > *,
.team-grid > *,
.scam-grid > *,
.steps > *,
.faq-list > *,
.card-grid > *,
.services-grid > *,
.values-grid > *,
.process-grid > *,
.steps-grid > *,
.feature-grid > *,
.trust-grid > * {
flex: 0 0 85% !important;
max-width: 85% !important;
min-width: 85%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* Trust grid — first child is the label, give it the full first card */
.trust-grid > .trust-label {
flex: 0 0 85% !important;
max-width: 85% !important;
min-width: 85%;
border-right: none;
border-bottom: 1px solid var(--line);
padding: 0 0 var(--sp-3) 0;
}
/* Hero stats — NOT a carousel. 2x2 grid on mobile. */
.hero-stats {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sp-4) !important;
border-top: 1px solid var(--line);
padding-top: var(--sp-5);
}
.hero-stats .hero-stat {
border-right: 1px solid var(--line-soft);
padding: 0 var(--sp-3) 0 0;
}
.hero-stats .hero-stat:nth-child(2n) { border-right: none; padding-right: 0; }
/* Stats — narrower cards */
.stats-band-grid > * {
flex: 0 0 70% !important;
max-width: 70% !important;
min-width: 70%;
scroll-snap-align: center;
}
/* Span overrides — single column on mobile carousel */
.bento > .span-2, .bento > .span-3, .bento > .span-4,
.bento > .span-5, .bento > .span-6, .bento > .span-8,
.bento > .span-12,
.bento > .col-2, .bento > .col-3, .bento > .col-4 {
flex: 0 0 85% !important;
max-width: 85% !important;
min-width: 85%;
grid-column: auto !important;
}
/* FAQ items — slightly wider for readability */
.faq-list > * {
flex: 0 0 88% !important;
max-width: 88% !important;
min-width: 88%;
}
/* Steps — full-width single step */
.steps > * {
flex: 0 0 88% !important;
max-width: 88% !important;
min-width: 88%;
}
/* (Removed the ::after swipe hint — replaced by visible prev/next arrows
that show on hover.) */
/* Testimonials — keep its own prev/next arrows, hide on mobile carousel mode */
.testimonial-feature { overflow: visible; }
.testimonial-feature .testimonial-nav { display: none; }
.testimonial-feature #testimonial-display { text-align: center; }
/* Filter pills — horizontal scroll carousel on mobile (9+ categories) */
.filter-pills {
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
justify-content: flex-start !important;
padding-bottom: var(--sp-3);
margin-left: calc(-1 * var(--sp-4));
margin-right: calc(-1 * var(--sp-4));
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
.filter-pill {
flex: 0 0 auto;
scroll-snap-align: start;
white-space: nowrap;
}
.filter-pills::-webkit-scrollbar { height: 4px; }
.filter-pills::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
/* Section heads: stack on mobile when grid template is two-column */
.section-head[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
CAROUSEL NAV ARROWS (mobile only, ≤ 768px)
Each carousel container gets injected prev/next buttons via JS.
They are hidden by default and fade in when the carousel (or
the arrows themselves) is hovered. On touch devices (no hover),
we keep them visible at low opacity so users still see they exist.
============================================================ */
@media (max-width: 768px) {
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: var(--r-full);
background: var(--surface);
border: 1px solid var(--line-strong);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.85rem;
z-index: 5;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
-webkit-tap-highlight-color: transparent;
}
.carousel-nav.prev { left: 6px; }
.carousel-nav.next { right: 6px; }
.carousel-nav:hover,
.carousel-nav:focus-visible {
opacity: 1 !important;
background: var(--forest-600);
color: #fff;
border-color: var(--forest-600);
transform: translateY(-50%) scale(1.05);
}
.carousel-nav:active { transform: translateY(-50%) scale(0.96); }
.carousel-nav[disabled] {
opacity: 0 !important;
pointer-events: none;
}
/* Reveal arrows when the carousel container is hovered. */
.carousel-wrap:hover .carousel-nav,
.carousel-wrap:focus-within .carousel-nav {
opacity: 0.92;
}
/* On touch-first devices (no hover), keep arrows visible at low opacity. */
@media (hover: none) {
.carousel-nav { opacity: 0.7; }
.carousel-nav[disabled] { opacity: 0 !important; }
}
/* Wrapper around each carousel — gives us a positioned parent
for the absolutely-positioned arrows. */
.carousel-wrap {
position: relative;
margin-left: calc(-1 * var(--sp-4));
margin-right: calc(-1 * var(--sp-4));
}
/* Remove the negative margins from the inner scroller since the
wrapper now handles edge bleed. */
.carousel-wrap > .bento,
.carousel-wrap > .team-grid,
.carousel-wrap > .stats-band-grid,
.carousel-wrap > .scam-grid,
.carousel-wrap > .steps,
.carousel-wrap > .faq-list,
.carousel-wrap > .card-grid,
.carousel-wrap > .services-grid,
.carousel-wrap > .values-grid,
.carousel-wrap > .process-grid,
.carousel-wrap > .steps-grid,
.carousel-wrap > .feature-grid,
.carousel-wrap > .trust-grid {
margin-left: 0;
margin-right: 0;
}
}
/* ============================================================
ADMIN FALLBACK TOKENS
The admin pages reference tokens (--neutral-*, --gold-*,
--space-*, --font-heading) that the Atelier CSS does not
define. Provide them here so admin pages render properly.
============================================================ */
:root {
--neutral-50: #F9FAFB;
--neutral-100: #F3F4F6;
--neutral-200: #E5E7EB;
--neutral-300: #D1D5DB;
--neutral-400: #9CA3AF;
--neutral-500: #6B7280;
--neutral-600: #4B5563;
--neutral-700: #374151;
--neutral-800: #1F2937;
--neutral-900: #111827;
--neutral-950: #030712;
--gold-300: #FCD34D;
--gold-400: #FBBF24;
--gold-500: #F59E0B;
--gold-600: #D97706;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ============================================================
ADMIN PAGES — login, dashboard, submissions, settings, view
============================================================ */
body.admin-login {
background: linear-gradient(135deg, #0A0E12 0%, #0E4D3A 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 300;
}
.admin-login-card {
background: var(--neutral-900);
border: 1px solid var(--neutral-800);
border-radius: 16px;
padding: var(--space-12);
width: 100%;
max-width: 420px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.35);
}
.admin-login-card .logo-icon {
width: 64px; height: 64px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
border-radius: 14px;
display: block;
color: transparent;
font-size: 0;
box-shadow: 0 8px 24px rgba(14,77,58,0.4);
}
.admin-login-title {
font-family: var(--font-heading);
font-weight: 300;
font-size: 1.75rem;
color: #fff;
text-align: center;
margin-top: var(--space-4);
letter-spacing: -0.01em;
}
.admin-login-subtitle {
text-align: center;
color: var(--neutral-400);
font-size: 0.875rem;
margin-top: var(--space-1);
margin-bottom: var(--space-8);
font-weight: 300;
}
.admin-login .form-group { margin-bottom: var(--space-5); }
.admin-login .form-label {
display: block;
font-size: 0.8125rem;
color: var(--neutral-300);
margin-bottom: var(--space-2);
font-weight: 300;
letter-spacing: 0.02em;
}
.admin-login .form-input {
width: 100%;
background: var(--neutral-800);
border: 1px solid var(--neutral-700);
border-radius: 10px;
padding: 0.75rem 1rem;
color: #fff;
font-size: 0.9375rem;
font-family: inherit;
font-weight: 300;
transition: border-color 0.2s, background 0.2s;
}
.admin-login .form-input:focus {
outline: none;
border-color: var(--gold-400);
background: var(--neutral-750, #232B36);
}
.admin-login .form-input::placeholder { color: var(--neutral-500); }
.admin-login .btn-primary {
width: 100%;
background: linear-gradient(135deg, var(--forest-700, #0E4D3A), var(--forest-500, #1F7558));
color: #fff;
border: none;
padding: 0.875rem 1rem;
border-radius: 10px;
font-weight: 400;
font-size: 0.9375rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.admin-login .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(14, 77, 58, 0.4);
}
/* Dashboard layout */
body.admin-dashboard {
background: var(--neutral-950);
color: var(--neutral-200);
min-height: 100vh;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 300;
display: grid;
grid-template-columns: 260px 1fr;
}
.admin-sidebar {
background: var(--neutral-900);
border-right: 1px solid var(--neutral-800);
padding: var(--space-6) var(--space-4);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
}
.admin-sidebar-brand {
padding-bottom: var(--space-6);
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--neutral-800);
}
.admin-sidebar-brand .logo {
display: flex; align-items: center; gap: var(--space-3);
}
.admin-sidebar-brand .logo-icon {
width: 38px; height: 38px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
border-radius: 9px;
display: block;
color: transparent;
font-size: 0;
}
.admin-sidebar-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral-500);
margin: var(--space-6) 0 var(--space-3) var(--space-3);
font-weight: 300;
}
.admin-sidebar-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0.7rem var(--space-3);
color: var(--neutral-400);
border-radius: 8px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 300;
transition: all 0.2s;
margin-bottom: 2px;
}
.admin-sidebar-link:hover {
background: var(--neutral-800);
color: var(--neutral-100);
}
.admin-sidebar-link.active {
background: linear-gradient(135deg, var(--forest-700, #0E4D3A), var(--forest-500, #1F7558));
color: #fff;
}
.admin-sidebar-link i { width: 18px; text-align: center; font-size: 0.875rem; }
.admin-main {
padding: var(--space-8) var(--space-10);
overflow-x: auto;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-8);
}
.admin-title {
font-family: var(--font-heading);
font-weight: 300;
font-size: 1.875rem;
color: #fff;
letter-spacing: -0.01em;
}
.admin-stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.admin-stat-card {
background: var(--neutral-900);
border: 1px solid var(--neutral-800);
border-radius: 14px;
padding: var(--space-6);
transition: transform 0.2s, border-color 0.2s;
}
.admin-stat-card:hover { transform: translateY(-2px); border-color: var(--neutral-700); }
.admin-stat-card-label {
font-size: 0.8125rem;
color: var(--neutral-400);
font-weight: 300;
margin-bottom: var(--space-3);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.admin-stat-card-value {
font-family: var(--font-heading);
font-size: 2.25rem;
font-weight: 200;
color: #fff;
line-height: 1;
letter-spacing: -0.02em;
}
.admin-table-wrapper {
background: var(--neutral-900);
border: 1px solid var(--neutral-800);
border-radius: 14px;
overflow: hidden;
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
font-weight: 300;
}
.admin-table thead { background: var(--neutral-850, #161B22); }
.admin-table th {
text-align: left;
padding: var(--space-4) var(--space-5);
color: var(--neutral-400);
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--neutral-800);
}
.admin-table td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--neutral-850, #161B22);
color: var(--neutral-200);
}
.admin-table tbody tr { transition: background 0.15s; }
.admin-table tbody tr:hover { background: var(--neutral-850, #161B22); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-badge {
display: inline-block;
padding: 0.25rem 0.625rem;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 400;
text-transform: capitalize;
letter-spacing: 0.04em;
}
.admin-badge.new { background: rgba(251, 191, 36, 0.15); color: var(--gold-400); border: 1px solid rgba(251,191,36,0.3); }
.admin-badge.read { background: rgba(96, 165, 250, 0.15); color: #60A5FA; border: 1px solid rgba(96,165,250,0.3); }
.admin-badge.replied { background: rgba(74, 222, 128, 0.15); color: #4ADE80; border: 1px solid rgba(74,222,128,0.3); }
/* Responsive admin: stack sidebar on top on small screens */
@media (max-width: 900px) {
body.admin-dashboard {
grid-template-columns: 1fr;
}
.admin-sidebar {
position: relative;
height: auto;
flex-direction: row;
overflow-x: auto;
padding: var(--space-3);
}
.admin-sidebar-brand { padding-bottom: 0; margin-bottom: 0; border-bottom: none; border-right: 1px solid var(--neutral-800); padding-right: var(--space-4); margin-right: var(--space-4); }
.admin-sidebar-label { display: none; }
.admin-sidebar-link { white-space: nowrap; margin-bottom: 0; }
.admin-main { padding: var(--space-6); }
}
/* ============================================================
THANK-YOU / CONFIRMATION PAGE
Centered modal card with animated checkmark + confetti burst.
============================================================ */
.thank-you-section {
min-height: calc(100vh - var(--header-h, 80px));
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-10) 0;
}
.ty-modal-wrap {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.ty-modal-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl, 18px);
padding: var(--sp-12) var(--sp-10) var(--sp-10);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
overflow: hidden;
text-align: center;
z-index: 1;
}
.ty-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: var(--r-full);
background: transparent;
border: 1px solid var(--line);
color: var(--ink-mute);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
transition: all 0.2s ease;
z-index: 3;
}
.ty-modal-close:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
/* Animated checkmark */
.ty-check {
width: 80px;
height: 80px;
margin: 0 auto var(--sp-5);
color: var(--forest-600);
}
.ty-check-svg { width: 100%; height: 100%; }
.ty-check-circle {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: ty-circle-draw 0.7s ease-out 0.15s forwards;
}
.ty-check-tick {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: ty-tick-draw 0.4s ease-out 0.7s forwards;
}
@keyframes ty-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes ty-tick-draw { to { stroke-dashoffset: 0; } }
.ty-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--forest-700);
margin-bottom: var(--sp-3);
}
.ty-heading {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
font-weight: 300;
color: var(--ink);
margin-bottom: var(--sp-3);
letter-spacing: -0.02em;
line-height: 1.15;
}
.ty-subheading {
color: var(--ink);
font-size: 1.05rem;
font-weight: 500;
margin-bottom: var(--sp-4);
}
.ty-body {
color: var(--ink-mute);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: var(--sp-6);
max-width: 46ch;
margin-left: auto;
margin-right: auto;
}
.ty-body strong { color: var(--ink); font-weight: 600; }
.ty-case-box {
display: inline-block;
background: var(--forest-50);
border: 1px solid var(--forest-100);
border-radius: 12px;
padding: var(--sp-3) var(--sp-5);
margin-bottom: var(--sp-6);
}
.ty-case-label {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-mute);
margin-bottom: 4px;
}
.ty-case-id {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--forest-700);
letter-spacing: 0.04em;
}
.ty-next-steps {
text-align: left;
background: var(--paper-soft);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: var(--sp-5) var(--sp-5) var(--sp-4);
margin-bottom: var(--sp-6);
}
.ty-next-steps-title {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-mute);
margin-bottom: var(--sp-3);
}
.ty-steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ty-steps-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ty-step-num {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--forest-600);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-top: 2px;
}
.ty-steps-list li strong { color: var(--ink); font-weight: 600; }
.ty-steps-list li div { color: var(--ink-mute); font-size: 0.875rem; line-height: 1.55; }
.ty-actions {
display: flex;
gap: var(--sp-3);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--sp-5);
}
.ty-actions .btn { min-width: 180px; }
.ty-support {
font-size: 0.85rem;
color: var(--ink-mute);
padding-top: var(--sp-4);
border-top: 1px solid var(--line-soft);
}
.ty-support a { color: var(--forest-700); font-weight: 600; }
/* Confetti pieces */
.ty-confetti-host {
position: absolute;
top: 0; left: 0; right: 0;
height: 0;
pointer-events: none;
z-index: 2;
}
.ty-confetti-piece {
position: absolute;
display: block;
border-radius: 2px;
will-change: transform, opacity;
animation-name: ty-confetti-fall;
animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
animation-fill-mode: forwards;
}
@keyframes ty-confetti-fall {
0% { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 1; }
80% { opacity: 1; }
100% { transform: translate3d(var(--tx, 60px), 520px, 0) rotate(720deg); opacity: 0; }
}
/* Dark mode tweaks */
:root[data-theme="dark"] .ty-modal-card {
background: var(--surface);
border-color: var(--line);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}
:root[data-theme="dark"] .ty-check { color: var(--forest-300); }
:root[data-theme="dark"] .ty-eyebrow { color: var(--forest-300); }
:root[data-theme="dark"] .ty-heading,
:root[data-theme="dark"] .ty-subheading { color: var(--ink); }
:root[data-theme="dark"] .ty-body { color: var(--ink-mute); }
:root[data-theme="dark"] .ty-body strong { color: var(--ink); }
:root[data-theme="dark"] .ty-case-box { background: rgba(46,139,110,0.12); border-color: rgba(46,139,110,0.3); }
:root[data-theme="dark"] .ty-case-label { color: var(--ink-mute); }
:root[data-theme="dark"] .ty-case-id { color: var(--forest-300); }
:root[data-theme="dark"] .ty-next-steps { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .ty-next-steps-title { color: var(--ink-mute); }
:root[data-theme="dark"] .ty-step-num { background: var(--forest-600); color: #fff; }
:root[data-theme="dark"] .ty-steps-list li strong { color: var(--ink); }
:root[data-theme="dark"] .ty-steps-list li div { color: var(--ink-mute); }
:root[data-theme="dark"] .ty-support { color: var(--ink-mute); border-top-color: var(--line); }
:root[data-theme="dark"] .ty-support a { color: var(--forest-300); }
:root[data-theme="dark"] .ty-modal-close { border-color: var(--line); color: var(--ink-mute); }
:root[data-theme="dark"] .ty-modal-close:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
/* Mobile */
@media (max-width: 600px) {
.ty-modal-card { padding: var(--sp-10) var(--sp-5) var(--sp-6); }
.ty-actions .btn { min-width: 140px; width: 100%; }
.ty-actions { flex-direction: column; }
}