/* ============================================================
ZENSKAYL — styles.css
Single shared stylesheet for all pages
============================================================ */
/* ─── GOOGLE FONTS ─────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
/* ─── DESIGN TOKENS — LIGHT MODE (DEFAULT) ─────────────────── */
:root {
--color-primary: #009e49;
--color-primary-dark: #007a38;
--color-primary-light: #e6f7ee;
--color-accent: #ff8c00;
--color-accent-dark: #cc7000;
--color-accent-light: #fff3e0;
--color-bg: #ffffff;
--color-bg-alt: #f7f9fc;
--color-bg-card: #ffffff;
--color-border: #e2e8f0;
--color-text-primary: #0f1923;
--color-text-secondary: #4a5568;
--color-text-muted: #718096;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
--radius-card: 16px;
--radius-btn: 8px;
--radius-pill: 999px;
--radius-input: 8px;
--nav-height: 64px;
--container-max: 1200px;
--section-padding: clamp(64px, 10vw, 120px);
--nav-bg: rgba(255, 255, 255, 0.85);
--nav-border: rgba(226, 232, 240, 0.8);
}
/* ─── DARK MODE ─────────────────────────────────────────────── */
[data-theme="dark"] {
--color-bg: #0d1117;
--color-bg-alt: #161b22;
--color-bg-card: #1c2333;
--color-border: #2d3748;
--color-text-primary: #e6edf3;
--color-text-secondary: #8b949e;
--color-text-muted: #6e7681;
--color-primary-light: #0d2818;
--color-accent-light: #2a1800;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.2);
--nav-bg: rgba(13, 17, 23, 0.85);
--nav-border: rgba(45, 55, 72, 0.8);
}
/* ─── RESET ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: "Inter", "system-ui", sans-serif;
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-primary);
background-color: var(--color-bg);
transition:
background-color 0.3s ease,
color 0.3s ease;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
button {
cursor: pointer;
}
/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
.section-padding {
padding: var(--section-padding) 0;
}
/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.display-heading {
font-size: clamp(2.8rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
h1,
.h1 {
font-size: clamp(2.8rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
h2,
.h2 {
font-size: clamp(1.9rem, 3.5vw, 2.75rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
}
h3,
.h3 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
}
h4,
.h4 {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}
.text-muted {
color: var(--color-text-muted);
}
.text-secondary {
color: var(--color-text-secondary);
}
.text-primary-color {
color: var(--color-primary);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-primary-light);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--radius-pill);
margin-bottom: 20px;
}
[data-theme="dark"] .eyebrow {
background: var(--color-primary-light);
color: #4ade80;
}
.section-label {
text-align: center;
margin-bottom: 48px;
}
.section-label h2 {
margin-bottom: 16px;
}
.section-label p {
font-size: 1.125rem;
color: var(--color-text-secondary);
max-width: 640px;
margin: 0 auto;
}
/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-btn);
font-weight: 600;
font-size: 0.9375rem;
border: 2px solid transparent;
transition: all 0.2s ease;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.btn-lg {
padding: 14px 28px;
font-size: 1rem;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.btn-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-secondary:hover {
background: var(--color-primary-light);
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: var(--color-border);
}
.btn-ghost:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-accent {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.btn-accent:hover {
background: var(--color-accent-dark);
border-color: var(--color-accent-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-accent-outline {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-accent-outline:hover {
background: var(--color-accent-light);
}
.btn-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* ─── FOCUS VISIBLE / ACCESSIBILITY ─────────────────────────── */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
/* ─── CARDS ──────────────────────────────────────────────────── */
.card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 28px;
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* ─── BADGE ──────────────────────────────────────────────────── */
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.badge-orange {
background: var(--color-accent-light);
color: var(--color-accent-dark);
}
[data-theme="dark"] .badge-orange {
background: #2a1800;
color: #ffa733;
}
/* ─── SCROLL ANIMATIONS ──────────────────────────────────────── */
.animate-on-scroll {
opacity: 0;
transform: translateY(32px);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: none;
}
.animate-on-scroll[style*="--delay"] {
transition-delay: var(--delay, 0ms);
}
/* ──────────────────────────────────────────────────────────────
NAVIGATION
────────────────────────────────────────────────────────────── */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
z-index: 1000;
background: var(--nav-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--nav-border);
transition:
box-shadow 0.3s ease,
background 0.3s ease;
}
.site-nav.scrolled {
box-shadow: var(--shadow-md);
}
.nav-inner {
display: flex;
align-items: center;
height: var(--nav-height);
gap: 32px;
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.nav-logo img {
height: 126px;
width: auto;
}
.nav-logo-tagline {
font-size: 0.75rem;
color: var(--color-text-muted);
white-space: nowrap;
}
/* Center links */
.nav-links-center {
display: flex;
align-items: center;
gap: 4px;
margin: 0 auto;
}
.nav-link {
position: relative;
display: flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-secondary);
border-radius: var(--radius-btn);
transition:
color 0.2s ease,
background 0.2s ease;
}
.nav-link:hover {
color: var(--color-text-primary);
background: var(--color-bg-alt);
}
.nav-link[aria-current="page"],
.nav-link.nav-active {
color: var(--color-primary);
}
.nav-link[aria-current="page"]::after,
.nav-link.nav-active::after {
content: "";
position: absolute;
bottom: 4px;
left: 14px;
right: 14px;
height: 2px;
background: var(--color-primary);
border-radius: 1px;
}
.nav-link svg {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.nav-link.dropdown-trigger.open svg {
transform: rotate(180deg);
}
/* Right actions */
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
color: var(--color-text-secondary);
transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-light);
}
/* Mobile hamburger */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
color: var(--color-text-secondary);
transition: all 0.2s ease;
}
.mobile-menu-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* ─── MEGA DROPDOWN ──────────────────────────────────────────── */
.nav-dropdown-wrapper {
position: relative;
}
.mega-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 560px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
padding: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-8px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
z-index: 100;
}
.mega-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.dropdown-col-heading {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.dropdown-product-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
transition: all 0.2s ease;
text-decoration: none;
}
.dropdown-product-card:hover {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.dropdown-product-card.muted {
opacity: 0.7;
cursor: default;
pointer-events: none;
}
.dropdown-product-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
background: var(--color-primary-light);
}
.dropdown-product-icon.orange {
background: var(--color-accent-light);
}
.dropdown-product-info {
flex: 1;
}
.dropdown-product-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
.dropdown-product-desc {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.4;
}
.dropdown-col-right .dropdown-product-card + .dropdown-product-card {
margin-top: 8px;
}
/* ─── MOBILE DRAWER ──────────────────────────────────────────── */
.mobile-nav-drawer {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg);
z-index: 999;
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0.25s ease;
}
.mobile-nav-drawer.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-nav-link {
display: flex;
align-items: center;
padding: 14px 16px;
font-size: 1.0625rem;
font-weight: 500;
color: var(--color-text-primary);
border-radius: var(--radius-btn);
border: 1px solid transparent;
transition: all 0.2s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus {
background: var(--color-bg-alt);
border-color: var(--color-border);
}
.mobile-nav-divider {
height: 1px;
background: var(--color-border);
margin: 8px 0;
}
.mobile-nav-section-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 8px 16px 4px;
}
.mobile-nav-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.mobile-theme-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-radius: var(--radius-btn);
background: var(--color-bg-alt);
}
.mobile-theme-row span {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-secondary);
}
/* ──────────────────────────────────────────────────────────────
FOOTER
────────────────────────────────────────────────────────────── */
.site-footer {
background: #0d1117;
color: #8b949e;
padding: 72px 0 0;
}
[data-theme="dark"] .site-footer {
background: #161b22;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 64px;
border-bottom: 1px solid #21262d;
}
.footer-logo img {
height: 148px;
width: auto;
margin-bottom: 16px;
filter: brightness(0) invert(1) opacity(0.9);
}
.footer-tagline {
font-size: 0.9rem;
color: #6e7681;
line-height: 1.6;
margin-bottom: 20px;
max-width: 260px;
}
.footer-social {
display: flex;
gap: 10px;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid #21262d;
color: #6e7681;
transition: all 0.2s ease;
}
.footer-social a:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.footer-social a svg {
width: 16px;
height: 16px;
}
.footer-col-heading {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #e6edf3;
margin-bottom: 16px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 0.9rem;
color: #6e7681;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #e6edf3;
}
.footer-links .muted-link {
color: #4a5568;
font-size: 0.875rem;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
font-size: 0.8125rem;
color: #4a5568;
flex-wrap: wrap;
gap: 8px;
}
/* ──────────────────────────────────────────────────────────────
HERO SECTION (Homepage)
────────────────────────────────────────────────────────────── */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: var(--nav-height);
position: relative;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background: var(--color-bg);
}
/* Animated gradient mesh */
.hero-mesh {
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 60% 50% at 110% 20%,
rgba(0, 158, 73, 0.07) 0%,
transparent 70%
),
radial-gradient(
ellipse 50% 40% at -10% 80%,
rgba(0, 158, 73, 0.04) 0%,
transparent 60%
);
background-size: 200% 200%;
animation: meshMove 12s ease-in-out infinite alternate;
}
[data-theme="dark"] .hero-mesh {
background:
radial-gradient(
ellipse 60% 55% at 110% 15%,
rgba(0, 158, 73, 0.12) 0%,
transparent 70%
),
radial-gradient(
ellipse 40% 40% at -5% 85%,
rgba(0, 158, 73, 0.06) 0%,
transparent 60%
);
background-size: 200% 200%;
animation: meshMove 12s ease-in-out infinite alternate;
}
@keyframes meshMove {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 55% 45%;
align-items: center;
gap: 48px;
padding: 80px 0 80px;
}
.hero-content {
padding-right: 24px;
}
.hero-h1 {
font-size: clamp(2.8rem, 5vw, 4.25rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
color: var(--color-text-primary);
margin-bottom: 24px;
}
.hero-h1 .accent {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: rgba(0, 158, 73, 0.35);
text-underline-offset: 6px;
text-decoration-thickness: 3px;
}
.hero-sub {
font-size: 1.125rem;
color: var(--color-text-secondary);
line-height: 1.75;
margin-bottom: 36px;
max-width: 520px;
}
/* Trust bar */
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
}
/* Hero visual */
.hero-visual {
position: relative;
}
.hero-screenshot {
border-radius: 20px;
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--color-border);
transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
width: 100%;
height: auto;
}
.hero-screenshot:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
/* Dark/Light image swap */
.hero-img-dark {
display: none;
}
.hero-img-light {
display: block;
}
[data-theme="dark"] .hero-img-dark {
display: block;
}
[data-theme="dark"] .hero-img-light {
display: none;
}
/* ──────────────────────────────────────────────────────────────
STATS / NUMBERS SECTION
────────────────────────────────────────────────────────────── */
.stats-section {
background: var(--color-bg-alt);
padding: clamp(48px, 8vw, 96px) 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
margin-bottom: 40px;
}
.stat-item .stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 8px;
}
.stat-item .stat-label {
font-size: 0.9375rem;
color: var(--color-text-secondary);
}
.stats-subtext {
text-align: center;
font-size: 1.0625rem;
color: var(--color-text-secondary);
max-width: 560px;
margin: 0 auto;
line-height: 1.7;
}
/* ──────────────────────────────────────────────────────────────
PROBLEM SECTION
────────────────────────────────────────────────────────────── */
.problem-section {
padding: var(--section-padding) 0;
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.problem-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.problem-card {
display: flex;
gap: 16px;
padding: 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-left: 4px solid #ff4757;
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
}
.problem-icon {
font-size: 1.4rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.problem-card h4 {
margin-bottom: 8px;
color: var(--color-text-primary);
}
.problem-card p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.problem-quote {
margin-top: 32px;
padding-left: 24px;
border-left: 4px solid var(--color-primary);
}
.problem-quote p {
font-size: 1.2rem;
font-weight: 500;
color: var(--color-text-primary);
font-style: italic;
line-height: 1.6;
}
.problem-visual {
position: sticky;
top: calc(var(--nav-height) + 32px);
}
.problem-visual img {
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
width: 100%;
height: auto;
}
/* ──────────────────────────────────────────────────────────────
MODULARITY SECTION / HUB DIAGRAM
────────────────────────────────────────────────────────────── */
.modularity-section {
background: var(--color-bg);
padding: var(--section-padding) 0;
}
.modularity-section .section-label {
margin-bottom: 64px;
}
.hub-diagram {
position: relative;
max-width: 800px;
margin: 0 auto 56px;
}
.hub-center-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.hub-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
text-align: center;
line-height: 1.3;
box-shadow:
0 0 0 12px rgba(0, 158, 73, 0.12),
0 0 0 24px rgba(0, 158, 73, 0.05);
padding: 16px;
gap: 4px;
}
.hub-center span {
font-size: 1.5rem;
}
.hub-modules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.hub-module {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
text-align: center;
transition: all 0.2s ease;
cursor: default;
}
.hub-module:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.hub-module.active {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
[data-theme="dark"] .hub-module.active {
background: #0d2818;
border-color: var(--color-primary);
}
.hub-module-icon {
font-size: 1.5rem;
}
.hub-module-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.3;
}
.modularity-cta {
text-align: center;
}
.modularity-cta p {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 20px;
font-style: italic;
}
/* ──────────────────────────────────────────────────────────────
PRODUCT SPOTLIGHT
────────────────────────────────────────────────────────────── */
.spotlight-section {
background: var(--color-bg-alt);
padding: var(--section-padding) 0;
}
.spotlight-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 20px;
margin: 32px 0 36px;
}
.feature-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.feature-check {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.feature-check svg {
width: 12px;
height: 12px;
}
.feature-item p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.feature-item p strong {
color: var(--color-text-primary);
display: block;
margin-bottom: 2px;
}
.spotlight-visual img {
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
width: 100%;
height: auto;
}
/* Light/dark image swap */
.spotlight-img-light {
display: block;
}
.spotlight-img-dark {
display: none;
}
[data-theme="dark"] .spotlight-img-light {
display: none;
}
[data-theme="dark"] .spotlight-img-dark {
display: block;
}
/* ──────────────────────────────────────────────────────────────
TRUST / SECURITY SECTION (always dark)
────────────────────────────────────────────────────────────── */
.trust-section {
background: #0d1117;
padding: var(--section-padding) 0;
color: #e6edf3;
}
[data-theme="dark"] .trust-section {
background: #161b22;
}
.trust-section h2 {
color: #e6edf3;
}
.trust-section .eyebrow {
background: rgba(0, 158, 73, 0.15);
color: #4ade80;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 64px;
}
.trust-card {
padding: 28px 24px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-card);
transition: all 0.2s ease;
}
.trust-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(0, 158, 73, 0.3);
}
.trust-card-icon {
font-size: 2rem;
margin-bottom: 16px;
display: block;
}
.trust-card h4 {
color: #e6edf3;
margin-bottom: 10px;
font-size: 1rem;
}
.trust-card p {
font-size: 0.9rem;
color: #8b949e;
line-height: 1.65;
}
.trust-quote-block {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 48px;
text-align: center;
}
.trust-quote-block blockquote {
font-size: 1.125rem;
color: #8b949e;
font-style: italic;
max-width: 700px;
margin: 0 auto 20px;
line-height: 1.7;
}
.trust-quote-block blockquote strong {
color: #e6edf3;
font-style: normal;
}
.trust-quote-attribution {
font-size: 0.875rem;
color: #6e7681;
margin-top: 16px;
}
.trust-quote-logo {
height: 124px;
width: auto;
margin: 12px auto 0;
filter: brightness(0) invert(1) opacity(0.5);
}
/* ──────────────────────────────────────────────────────────────
COMING SOON SECTION
────────────────────────────────────────────────────────────── */
.coming-soon-section {
padding: var(--section-padding) 0;
background: var(--color-bg-alt);
}
.coming-soon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.coming-soon-card {
position: relative;
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.2s ease;
}
.coming-soon-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.cs-badge {
position: absolute;
top: 20px;
right: 20px;
}
.cs-icon {
font-size: 2.25rem;
margin-bottom: 4px;
}
.coming-soon-card h3 {
font-size: 1.1875rem;
color: var(--color-text-primary);
}
.coming-soon-card p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.6;
flex: 1;
}
/* ──────────────────────────────────────────────────────────────
AFFORDABILITY SECTION
────────────────────────────────────────────────────────────── */
.affordability-section {
background: var(--color-primary-light);
padding: var(--section-padding) 0;
}
[data-theme="dark"] .affordability-section {
background: #0d2818;
}
.affordability-section h2 {
max-width: 700px;
margin-bottom: 24px;
}
.affordability-body {
max-width: 700px;
margin-bottom: 48px;
}
.affordability-body p {
font-size: 1.0625rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.affordability-body p + p {
margin-top: 16px;
}
.value-props {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.value-prop {
padding: 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
}
.value-prop-icon {
font-size: 1.75rem;
margin-bottom: 12px;
}
.value-prop h4 {
margin-bottom: 8px;
font-size: 0.9375rem;
}
.value-prop p {
font-size: 0.9rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
/* ──────────────────────────────────────────────────────────────
CONTACT SECTION
────────────────────────────────────────────────────────────── */
.contact-section {
padding: var(--section-padding) 0;
background: var(--color-bg);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-form-wrapper h2 {
margin-bottom: 8px;
}
.contact-form-wrapper > p {
color: var(--color-text-secondary);
margin-bottom: 32px;
}
/* What to expect */
.contact-expect h3 {
margin-bottom: 24px;
}
.expect-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 36px;
}
.expect-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.expect-check {
color: var(--color-primary);
font-size: 1.1rem;
flex-shrink: 0;
margin-top: 1px;
}
.expect-item p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.contact-direct {
padding: 24px;
background: var(--color-bg-alt);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
}
.contact-direct h4 {
margin-bottom: 8px;
}
.contact-direct p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
}
.contact-direct a {
color: var(--color-primary);
font-weight: 500;
}
/* contact.html hero grid: booking form (left) + "Or Reach Out Directly"
panel (right). Collapses to a single column on mobile so the right-hand
panel drops below the booking form instead of squeezing beside it. */
.contact-page-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 768px) {
.contact-page-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* ──────────────────────────────────────────────────────────────
SHARED CONTACT FORM (partials/contact-form.html)
Posts to the /api/contact Cloudflare Worker, which relays to
solutions@zenskayl.com via Postmark. Behaviour: main.js.
────────────────────────────────────────────────────────────── */
.zs-field {
margin-bottom: 16px;
}
.zs-field label {
display: block;
margin-bottom: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
}
.zs-req {
color: var(--color-primary);
}
.zs-optional {
font-weight: 400;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.zs-field input,
.zs-field select,
.zs-field textarea {
width: 100%;
padding: 12px 14px;
font-family: inherit;
font-size: 0.9375rem;
color: var(--color-text-primary);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.zs-field textarea {
resize: vertical;
min-height: 104px;
line-height: 1.6;
}
.zs-field select {
cursor: pointer;
/* Native arrow rendering is inconsistent across platforms. */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 38px;
}
.zs-field input:focus,
.zs-field select:focus,
.zs-field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
.zs-field input[aria-invalid="true"],
.zs-field textarea[aria-invalid="true"] {
border-color: #d92d20;
}
.zs-field-error {
margin-top: 6px;
font-size: 0.8125rem;
font-weight: 500;
color: #d92d20;
}
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.zs-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.zs-turnstile {
margin: 4px 0 16px;
min-height: 65px;
}
.zs-submit {
width: 100%;
justify-content: center;
}
.zs-submit[disabled] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.zs-form-note {
margin-top: 14px;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--color-text-muted);
}
.zs-form-note a {
color: var(--color-primary);
font-weight: 500;
}
.zs-form-status {
margin-top: 14px;
padding: 12px 14px;
border-radius: var(--radius-btn);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.55;
background: #fef3f2;
border: 1px solid #fda29b;
color: #b42318;
}
[data-theme="dark"] .zs-form-status {
background: #2d1513;
border-color: #7a271a;
color: #fda29b;
}
/* Post-submit confirmation, swapped in for the form. */
.zs-form-success {
text-align: center;
padding: 40px 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
}
.zs-success-mark {
width: 56px;
height: 56px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.zs-success-mark svg {
width: 28px;
height: 28px;
}
.zs-form-success h3 {
margin-bottom: 10px;
}
.zs-form-success p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
max-width: 380px;
margin: 0 auto;
}
/* ─── MODE SWITCH — calendar ⇄ message ────────────────────────
Used on contact.html so a visitor with no date in mind is never
stuck staring at a calendar.
────────────────────────────────────────────────────────────── */
.zs-mode-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
margin-bottom: 20px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
}
.zs-mode-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 8px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--color-text-secondary);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
text-align: center;
transition:
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.zs-mode-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.zs-mode-btn:hover {
color: var(--color-text-primary);
}
.zs-mode-btn[aria-selected="true"] {
background: var(--color-bg-card);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
@media (max-width: 420px) {
.zs-mode-btn svg {
display: none;
}
}
/* ──────────────────────────────────────────────────────────────
ABOUT PAGE — HERO
────────────────────────────────────────────────────────────── */
.page-hero {
min-height: 60vh;
display: flex;
align-items: center;
padding-top: var(--nav-height);
position: relative;
overflow: hidden;
background: var(--color-bg);
}
.page-hero-mesh {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 80% 50% at 50% 0%,
rgba(0, 158, 73, 0.06) 0%,
transparent 70%
);
}
[data-theme="dark"] .page-hero-mesh {
background: radial-gradient(
ellipse 80% 50% at 50% 0%,
rgba(0, 158, 73, 0.09) 0%,
transparent 70%
);
}
.page-hero-inner {
position: relative;
z-index: 1;
text-align: center;
padding: 80px 0;
max-width: 800px;
margin: 0 auto;
}
.page-hero-inner h1 {
margin-bottom: 24px;
}
.page-hero-inner p {
font-size: 1.25rem;
color: var(--color-text-secondary);
line-height: 1.7;
max-width: 620px;
margin: 0 auto;
}
/* ──────────────────────────────────────────────────────────────
ABOUT PAGE — STORY / 2-COL
────────────────────────────────────────────────────────────── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.two-col-text h2 {
margin-bottom: 24px;
}
.two-col-text p {
font-size: 1rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.two-col-text p + p {
margin-top: 16px;
}
.two-col-visual img {
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
width: 100%;
height: auto;
}
/* ──────────────────────────────────────────────────────────────
PHILOSOPHY PILLAR CARDS
────────────────────────────────────────────────────────────── */
.philosophy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.philosophy-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.philosophy-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-primary);
}
.philosophy-card-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
opacity: 0.25;
line-height: 1;
margin-bottom: 16px;
}
.philosophy-card h3 {
margin-bottom: 12px;
}
.philosophy-card p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.7;
}
/* ──────────────────────────────────────────────────────────────
AUDIENCE CARDS (About — Who We Built This For)
────────────────────────────────────────────────────────────── */
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.audience-card {
padding: 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.audience-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.audience-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.audience-card h3 {
margin-bottom: 10px;
font-size: 1.0625rem;
}
.audience-card blockquote {
font-size: 0.9375rem;
color: var(--color-text-secondary);
font-style: italic;
line-height: 1.6;
border-left: 3px solid var(--color-primary);
padding-left: 14px;
}
/* ──────────────────────────────────────────────────────────────
AI PHILOSOPHY SECTION (About — dark)
────────────────────────────────────────────────────────────── */
.ai-dark-section {
background: #0d1117;
padding: var(--section-padding) 0;
color: #e6edf3;
}
[data-theme="dark"] .ai-dark-section {
background: #161b22;
}
.ai-dark-section h2 {
color: #e6edf3;
text-align: center;
margin-bottom: 48px;
}
.ai-dark-section .eyebrow {
background: rgba(0, 158, 73, 0.15);
color: #4ade80;
}
.ai-body-text {
max-width: 720px;
margin: 0 auto;
}
.ai-body-text p {
font-size: 1.0625rem;
color: #8b949e;
line-height: 1.8;
}
.ai-body-text p + p {
margin-top: 20px;
}
/* ──────────────────────────────────────────────────────────────
CONTACT STRIP (simple centred CTA strip)
────────────────────────────────────────────────────────────── */
.cta-strip {
padding: clamp(64px, 8vw, 96px) 0;
background: var(--color-bg-alt);
text-align: center;
}
.cta-strip h2 {
margin-bottom: 12px;
}
.cta-strip p {
font-size: 1.0625rem;
color: var(--color-text-secondary);
margin-bottom: 32px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* Dark CTA strip variant */
.cta-strip-dark {
background: #0d1117;
padding: clamp(64px, 8vw, 96px) 0;
text-align: center;
}
[data-theme="dark"] .cta-strip-dark {
background: #161b22;
}
.cta-strip-dark h2 {
color: #e6edf3;
margin-bottom: 16px;
}
.cta-strip-dark p {
font-size: 1.0625rem;
color: #8b949e;
max-width: 560px;
margin: 0 auto 32px;
line-height: 1.7;
}
/* ──────────────────────────────────────────────────────────────
PRODUCT PAGE — HERO (workforce-os)
────────────────────────────────────────────────────────────── */
.product-hero {
min-height: 70vh;
display: flex;
align-items: center;
padding-top: var(--nav-height);
position: relative;
overflow: hidden;
background: var(--color-bg);
}
.product-hero-mesh {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 70% 60% at 60% 20%,
rgba(0, 158, 73, 0.07) 0%,
transparent 70%
);
}
[data-theme="dark"] .product-hero-mesh {
background: radial-gradient(
ellipse 70% 60% at 60% 20%,
rgba(0, 158, 73, 0.11) 0%,
transparent 70%
);
}
.product-hero-inner {
position: relative;
z-index: 1;
padding: 80px 0 60px;
}
.product-hero-content {
max-width: 680px;
margin-bottom: 56px;
}
.product-hero-content h1 {
margin-bottom: 24px;
}
.product-hero-content p {
font-size: 1.125rem;
color: var(--color-text-secondary);
line-height: 1.75;
margin-bottom: 32px;
}
/* Browser chrome mockup */
.browser-frame {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.browser-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.browser-dot.red {
background: #ff5f57;
}
.browser-dot.yellow {
background: #febc2e;
}
.browser-dot.green {
background: #28c840;
}
.browser-url {
flex: 1;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 4px 12px;
font-size: 0.8rem;
color: var(--color-text-muted);
margin-left: 8px;
font-family: monospace;
}
.browser-frame img {
width: 100%;
height: auto;
display: block;
}
/* ──────────────────────────────────────────────────────────────
THREE PRINCIPLES / COLUMNS
────────────────────────────────────────────────────────────── */
.three-col-section {
padding: var(--section-padding) 0;
background: var(--color-bg-alt);
}
.three-col-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 0;
}
.principle-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.principle-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.principle-number {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 16px;
}
.principle-card h3 {
margin-bottom: 12px;
}
.principle-card p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.7;
}
/* ──────────────────────────────────────────────────────────────
MODULES GRID (Workforce OS page)
────────────────────────────────────────────────────────────── */
.modules-section {
padding: var(--section-padding) 0;
background: var(--color-bg);
}
.modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.module-card {
padding: 28px 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.2s ease;
}
.module-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-primary);
}
.module-card-icon {
font-size: 2rem;
}
.module-card h3 {
font-size: 1.0625rem;
}
.module-card p {
font-size: 0.9rem;
color: var(--color-text-secondary);
line-height: 1.6;
flex: 1;
}
.module-card-link {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
transition: gap 0.2s ease;
}
.module-card-link:hover {
gap: 8px;
}
.module-card-link.disabled {
color: var(--color-text-muted);
pointer-events: none;
}
/* ──────────────────────────────────────────────────────────────
SCREENSHOT GALLERY
────────────────────────────────────────────────────────────── */
.gallery-section {
padding: var(--section-padding) 0;
background: var(--color-bg-alt);
overflow: hidden;
}
.gallery-container {
position: relative;
}
.gallery-track-wrapper {
overflow: hidden;
border-radius: var(--radius-card);
}
.gallery-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-slide {
flex: 0 0 100%;
padding: 0 4px;
}
.gallery-slide img {
width: 100%;
height: auto;
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg);
}
.gallery-caption {
text-align: center;
margin-top: 16px;
font-size: 0.9rem;
color: var(--color-text-muted);
font-weight: 500;
}
.gallery-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.gallery-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.gallery-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.gallery-dots {
display: flex;
gap: 8px;
}
.gallery-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border);
transition: all 0.2s ease;
cursor: pointer;
border: none;
}
.gallery-dot.active {
background: var(--color-primary);
width: 24px;
border-radius: 4px;
}
/* ──────────────────────────────────────────────────────────────
TAB COMPONENT (Workforce OS)
────────────────────────────────────────────────────────────── */
.tabs-section {
padding: var(--section-padding) 0;
background: var(--color-bg);
}
.tab-bar {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--color-border);
margin-bottom: 40px;
overflow-x: auto;
}
.tab-btn {
padding: 12px 24px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: all 0.2s ease;
cursor: pointer;
}
.tab-btn:hover {
color: var(--color-text-primary);
}
.tab-btn[aria-selected="true"] {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
.tab-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.tab-text h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.tab-text p {
font-size: 1rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.tab-text p + p {
margin-top: 16px;
}
.tab-visual img {
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
width: 100%;
height: auto;
}
/* ──────────────────────────────────────────────────────────────
MODULE DETAIL PAGES
────────────────────────────────────────────────────────────── */
.module-hero {
min-height: 50vh;
display: flex;
align-items: center;
padding-top: var(--nav-height);
background: var(--color-bg);
position: relative;
overflow: hidden;
}
.module-hero-mesh {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 60% at 80% 30%,
rgba(0, 158, 73, 0.06) 0%,
transparent 70%
);
}
[data-theme="dark"] .module-hero-mesh {
background: radial-gradient(
ellipse 60% 60% at 80% 30%,
rgba(0, 158, 73, 0.1) 0%,
transparent 70%
);
}
.module-hero-inner {
position: relative;
z-index: 1;
padding: 72px 0 64px;
max-width: 760px;
}
.module-hero-inner h1 {
margin-bottom: 20px;
}
.module-hero-inner p {
font-size: 1.125rem;
color: var(--color-text-secondary);
line-height: 1.75;
}
.module-features-section {
padding: var(--section-padding) 0;
background: var(--color-bg-alt);
}
.module-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.module-feature-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.module-feature-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.mf-icon {
font-size: 2rem;
margin-bottom: 16px;
display: block;
}
.module-feature-card h3 {
margin-bottom: 12px;
}
.module-feature-card p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.7;
}
.module-editorial-section {
padding: var(--section-padding) 0;
background: var(--color-bg);
}
.editorial-block {
max-width: 760px;
margin: 0 auto;
}
.editorial-block h2 {
margin-bottom: 24px;
}
.editorial-block p {
font-size: 1.0625rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.editorial-block p + p {
margin-top: 16px;
}
.module-quote {
padding: 32px 40px;
border-left: 4px solid var(--color-primary);
background: var(--color-primary-light);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
margin: 40px 0;
}
[data-theme="dark"] .module-quote {
background: #0d2818;
}
.module-quote blockquote {
font-size: 1.125rem;
font-style: italic;
color: var(--color-text-primary);
line-height: 1.7;
}
.module-back-link {
display: flex;
width: fit-content;
align-items: center;
gap: 8px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-muted);
transition: color 0.2s ease;
margin-bottom: 48px;
}
.module-back-link:hover {
color: var(--color-primary);
}
/* Image blur overlay — keeps top section sharp, blurs lower portion */
.img-overlay-container {
position: relative;
display: block;
line-height: 0;
}
.img-overlay-container > img {
width: 100%;
height: auto;
display: block;
}
.img-overlay-container::after {
content: "";
position: absolute;
inset: 0 0 0 62%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(
to right,
transparent 0%,
rgba(255, 255, 255, 0.06) 40%
);
border-radius: inherit;
pointer-events: none;
}
[data-theme="dark"] .img-overlay-container::after {
background: linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.06) 40%
);
}
/* ──────────────────────────────────────────────────────────────
RESPONSIVE — TABLET (≤ 768px)
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.nav-links-center {
display: none;
}
.mobile-menu-btn {
display: flex;
}
/* Hide "Book a Demo" text button in nav on mobile, keep just the hamburger */
.nav-actions .btn {
display: none;
}
.hero-inner {
grid-template-columns: 1fr;
padding: 56px 0 48px;
gap: 40px;
}
.hero-content {
padding-right: 0;
}
.hero-h1 {
font-size: clamp(2.2rem, 7vw, 3rem);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.problem-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.problem-visual {
position: static;
}
.spotlight-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.trust-grid {
grid-template-columns: repeat(2, 1fr);
}
.coming-soon-grid {
grid-template-columns: 1fr;
}
.value-props {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.two-col {
grid-template-columns: 1fr;
gap: 40px;
}
.philosophy-grid {
grid-template-columns: 1fr;
}
.audience-grid {
grid-template-columns: 1fr;
}
.three-col-grid {
grid-template-columns: 1fr;
}
.modules-grid {
grid-template-columns: repeat(2, 1fr);
}
.tab-content {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.hub-modules-grid {
grid-template-columns: repeat(3, 1fr);
}
.module-features-grid {
grid-template-columns: 1fr;
}
.product-hero-inner {
padding: 64px 0 48px;
}
.mega-dropdown {
display: none;
}
}
/* ──────────────────────────────────────────────────────────────
RESPONSIVE — MOBILE (≤ 480px)
────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.trust-grid {
grid-template-columns: 1fr;
}
.modules-grid {
grid-template-columns: 1fr;
}
.hub-modules-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr;
}
h1,
.h1 {
font-size: clamp(2rem, 8vw, 2.8rem);
}
h2,
.h2 {
font-size: clamp(1.6rem, 6vw, 2rem);
}
.btn-group {
flex-direction: column;
align-items: stretch;
}
.btn-group .btn {
justify-content: center;
}
.hero-trust {
justify-content: flex-start;
}
.tab-bar {
flex-direction: column;
border-bottom: none;
gap: 4px;
}
.tab-btn {
border: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-btn);
margin-bottom: 0;
text-align: left;
}
.tab-btn[aria-selected="true"] {
background: var(--color-primary-light);
border-color: var(--color-primary);
}
}
/* ──────────────────────────────────────────────────────────────
UTILITIES
────────────────────────────────────────────────────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.text-center {
text-align: center;
}
.mt-8 {
margin-top: 8px;
}
.mt-16 {
margin-top: 16px;
}
.mt-24 {
margin-top: 24px;
}
.mt-32 {
margin-top: 32px;
}
.mt-40 {
margin-top: 40px;
}
.mt-48 {
margin-top: 48px;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-16 {
margin-bottom: 16px;
}
.mb-24 {
margin-bottom: 24px;
}
.mb-32 {
margin-bottom: 32px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-48 {
margin-bottom: 48px;
}
/* ──────────────────────────────────────────────────────────────
PRICING PAGE
────────────────────────────────────────────────────────────── */
/* Trial banner — matches .rd-trial-note on request-demo.html.
Scoped as ".pricing-hero .pricing-trial-banner" (not just the bare
class) so it outranks ".page-hero-inner p" — that sitewide rule sets
margin: 0 auto and max-width: 620px on every in a page hero, which
was silently zeroing this margin and forcing the wrap below. */
.pricing-hero .pricing-trial-banner {
display: inline-block;
margin-top: 20px;
max-width: none;
white-space: nowrap;
padding: 13px 18px;
background: var(--color-primary-light);
border: 1px solid rgba(0, 158, 73, 0.3);
border-radius: var(--radius-btn);
box-shadow: var(--shadow-sm);
font-size: 1.0625rem;
color: var(--color-text-primary);
text-align: center;
line-height: 1.5;
}
.pricing-trial-banner strong {
color: var(--color-primary);
}
[data-theme="dark"] .pricing-trial-banner strong {
color: #4ade80;
}
/* Hero note */
.pricing-hero .pricing-hero-note {
margin-top: 12px;
max-width: none;
font-size: 1rem;
color: var(--color-text-muted);
text-align: center;
}
@media (max-width: 640px) {
.pricing-hero .pricing-trial-banner {
white-space: normal;
max-width: 100%;
}
}
/* How it works — 3 steps */
.pricing-steps {
display: flex;
align-items: flex-start;
gap: 0;
margin-top: 48px;
}
.pricing-step {
flex: 1;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 36px 28px;
box-shadow: var(--shadow-sm);
text-align: center;
}
.pricing-step-number {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-primary);
margin-bottom: 12px;
text-transform: uppercase;
}
.pricing-step-icon {
font-size: 2.25rem;
margin-bottom: 16px;
display: block;
}
.pricing-step h3 {
margin-bottom: 12px;
}
.pricing-step p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.65;
margin-bottom: 20px;
}
.pricing-step-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 8px 16px;
border-radius: var(--radius-pill);
}
.pricing-step-price span {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.pricing-step-connector {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
font-size: 1.5rem;
color: var(--color-primary);
opacity: 0.5;
padding-top: 80px;
}
/* Billing toggle */
.billing-toggle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 40px;
}
.billing-toggle {
display: inline-flex;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 4px;
gap: 4px;
}
.billing-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
border-radius: var(--radius-pill);
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.billing-toggle-btn.active {
background: var(--color-bg-card);
color: var(--color-text-primary);
box-shadow: var(--shadow-sm);
}
.billing-sale-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
background: var(--color-accent);
color: #fff;
padding: 3px 8px;
border-radius: var(--radius-pill);
}
.billing-toggle-note {
font-size: 0.875rem;
color: var(--color-text-muted);
}
/* Core card */
.pricing-core-card {
background: var(--color-bg-card);
border: 2px solid var(--color-primary);
border-radius: var(--radius-card);
padding: 32px;
box-shadow: var(--shadow-md);
position: relative;
}
.pricing-core-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 5px 14px;
border-radius: var(--radius-pill);
margin-bottom: 24px;
}
.pricing-core-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.pricing-core-left {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1;
min-width: 240px;
}
.pricing-core-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.pricing-core-name {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 8px;
}
.pricing-core-desc {
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: 12px;
}
.pricing-module-learn {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
transition: opacity 0.2s;
}
.pricing-module-learn:hover {
opacity: 0.75;
}
.pricing-core-right {
text-align: right;
flex-shrink: 0;
}
.pricing-core-price {
display: flex;
align-items: baseline;
gap: 6px;
justify-content: flex-end;
}
.pricing-amount {
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
transition: all 0.3s ease;
}
.pricing-per {
font-size: 0.9rem;
color: var(--color-text-muted);
font-weight: 500;
}
.pricing-annual-note {
font-size: 0.8125rem;
color: var(--color-accent);
font-weight: 600;
margin-top: 8px;
}
/* Module catalog */
.pricing-tier-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 40px;
padding: 16px 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
}
.tier-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.tier-dots {
font-size: 0.9rem;
letter-spacing: 2px;
}
.tier-starter {
color: #4ade80;
}
.tier-standard {
color: var(--color-primary);
}
.tier-advanced {
color: var(--color-accent);
}
.pricing-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.pricing-module-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.2s ease;
}
.pricing-module-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.pricing-module-card--advanced {
border-color: var(--color-accent);
background: linear-gradient(
135deg,
var(--color-bg-card) 85%,
var(--color-accent-light) 100%
);
}
[data-theme="dark"] .pricing-module-card--advanced {
background: linear-gradient(
135deg,
var(--color-bg-card) 85%,
rgba(42, 24, 0, 0.4) 100%
);
}
.pricing-module-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.pricing-module-icon {
font-size: 1.75rem;
}
.pricing-module-name {
font-size: 1rem;
font-weight: 700;
margin-bottom: 4px;
}
.pricing-module-desc {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.6;
flex: 1;
}
.pricing-module-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
gap: 8px;
}
.pricing-module-from {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-text-primary);
transition: color 0.3s ease;
}
.pricing-module-from small {
font-weight: 400;
color: var(--color-text-muted);
font-size: 0.75rem;
}
.pricing-currency-note {
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: 36px;
}
/* Estimator */
#billing {
/* Estimator sits directly below now — trim this section's bottom
padding so the two closely related sections don't leave a huge gap
between them (each side's .section-padding stacks otherwise). */
padding-bottom: 32px;
}
.pricing-estimator-section {
padding-top: 24px;
background: var(--color-bg);
}
.pricing-estimator {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 48px;
box-shadow: var(--shadow-md);
}
.estimator-controls {
display: flex;
flex-direction: column;
gap: 36px;
}
.estimator-control-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.estimator-label-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.estimator-label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary);
}
.estimator-value-display {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
min-width: 36px;
text-align: right;
}
.estimator-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--color-border);
outline: none;
cursor: pointer;
}
.estimator-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.15s ease;
}
.estimator-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.estimator-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
border: none;
}
.estimator-slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.estimator-result {
text-align: center;
padding: 32px;
background: var(--color-bg-alt);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
}
.estimator-result-label {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.estimator-result-range {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.estimator-range-low,
.estimator-range-high {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-primary);
transition: all 0.25s ease;
}
.estimator-range-sep {
font-size: 1.5rem;
color: var(--color-text-muted);
}
.estimator-range-period {
font-size: 0.9rem;
color: var(--color-text-muted);
font-weight: 500;
align-self: flex-end;
padding-bottom: 4px;
}
/* Confirms, next to the live estimate itself, that the annual discount
was applied to this whole range (all users, all modules) — not just
the Core price shown in the section above. */
.estimator-annual-note {
display: inline-block;
margin-bottom: 14px;
padding: 6px 12px;
background: var(--color-primary-light);
border-radius: var(--radius-pill);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-primary);
}
[data-theme="dark"] .estimator-annual-note {
color: #4ade80;
}
.estimator-disclaimer {
font-size: 0.8rem;
color: var(--color-text-muted);
line-height: 1.5;
}
/* Trust strip */
.pricing-trust-section {
background: var(--color-bg);
padding: 36px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.pricing-trust-strip {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 32px;
}
.pricing-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.pricing-trust-icon {
font-size: 1.1rem;
}
/* Enterprise callout */
.pricing-enterprise-card {
background: linear-gradient(135deg, #0d1117 0%, #0f2518 100%);
border-radius: var(--radius-card);
padding: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
[data-theme="dark"] .pricing-enterprise-card {
background: linear-gradient(135deg, #161b22 0%, #0d2818 100%);
border: 1px solid var(--color-border);
}
.pricing-enterprise-content {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1;
min-width: 240px;
}
.pricing-enterprise-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.pricing-enterprise-card h2 {
color: #e6edf3;
margin-bottom: 12px;
}
.pricing-enterprise-card p {
color: #8b949e;
font-size: 1rem;
line-height: 1.65;
}
.pricing-enterprise-cta {
flex-shrink: 0;
}
/* Final CTA */
.pricing-final-cta {
background: var(--color-primary);
}
.pricing-final-cta-inner {
text-align: center;
}
.pricing-final-cta h2 {
color: #fff;
margin-bottom: 16px;
}
.pricing-final-cta p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.125rem;
margin-bottom: 28px;
}
.pricing-final-cta .btn-primary {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
.pricing-final-cta .btn-primary:hover {
background: rgba(255, 255, 255, 0.9);
}
.pricing-final-cta-sub {
margin-top: 20px !important;
margin-bottom: 0 !important;
font-size: 0.875rem !important;
color: rgba(255, 255, 255, 0.7) !important;
}
/* ── Responsive: Pricing Page ─────────────────────────────── */
@media (max-width: 900px) {
.pricing-steps {
flex-direction: column;
}
.pricing-step-connector {
width: 100%;
height: 32px;
padding-top: 0;
transform: rotate(90deg);
}
.pricing-estimator {
grid-template-columns: 1fr;
padding: 32px 24px;
gap: 32px;
}
.pricing-core-content {
flex-direction: column;
align-items: flex-start;
}
.pricing-core-right {
text-align: left;
width: 100%;
}
.pricing-core-price {
justify-content: flex-start;
}
.pricing-enterprise-card {
flex-direction: column;
align-items: flex-start;
padding: 32px;
}
}
@media (max-width: 600px) {
.pricing-modules-grid {
grid-template-columns: 1fr;
}
.billing-toggle-btn {
padding: 10px 16px;
font-size: 0.875rem;
}
.pricing-trust-strip {
gap: 10px 20px;
}
.pricing-tier-legend {
flex-direction: column;
gap: 12px;
}
}
/* ──────────────────────────────────────────────────────────────
FAQ PAGE
────────────────────────────────────────────────────────────── */
.faq-hero {
min-height: 40vh;
}
.faq-container {
max-width: 760px;
}
.faq-category {
margin-bottom: 56px;
}
.faq-category:last-child {
margin-bottom: 0;
}
.faq-category-heading {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.12));
}
.faq-item:first-child {
border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.12));
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
background: none;
border: none;
padding: 20px 0;
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
text-align: left;
cursor: pointer;
transition: color 0.2s ease;
line-height: 1.5;
}
.faq-question:hover {
color: var(--color-primary);
}
.faq-question[aria-expanded="true"] {
color: var(--color-primary);
}
.faq-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--color-text-muted);
transition: transform 0.25s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
color: var(--color-primary);
}
.faq-answer {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.faq-answer:not([hidden]) {
/* max-height set dynamically by JS */
}
.faq-answer p {
padding: 0 0 20px;
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.8;
margin: 0;
}
/* FAQ Bottom CTA */
.faq-cta-section {
background: var(--color-surface, rgba(0, 158, 73, 0.04));
border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.12));
}
.faq-cta-inner {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.faq-cta-inner h2 {
margin-bottom: 16px;
}
.faq-cta-inner p {
font-size: 1.0625rem;
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: 32px;
}
.faq-cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.faq-cta-actions {
flex-direction: column;
align-items: stretch;
}
.faq-cta-actions .btn {
justify-content: center;
text-align: center;
}
}
/* ──────────────────────────────────────────────────────────────
LEGAL PAGES (Privacy Policy & Terms of Service)
────────────────────────────────────────────────────────────── */
.legal-page-wrap {
padding-top: var(--nav-height);
min-height: 100vh;
}
.legal-page-header {
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
background: var(--color-bg);
}
.legal-header-inner {
max-width: 760px;
margin: 0 auto;
padding: 56px var(--container-padding, 24px) 40px;
}
.legal-last-updated {
font-size: 0.8125rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.legal-page-header h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.15;
margin-bottom: 20px;
color: var(--color-text);
}
.legal-intro {
font-size: 1rem;
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: 16px;
}
.legal-intro-list {
margin: 0 0 16px 1.25rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.legal-intro-list li {
margin-bottom: 8px;
}
.legal-body {
max-width: 760px;
margin: 0 auto;
padding: 48px var(--container-padding, 24px) 80px;
}
/* ── Summary block ── */
.legal-summary {
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.12));
}
.legal-summary h2 {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 16px;
color: var(--color-text);
}
.legal-summary ul {
margin: 0 0 0 1.25rem;
color: var(--color-text-secondary);
line-height: 1.8;
}
.legal-summary ul li {
margin-bottom: 12px;
}
/* ── Table of Contents ── */
.legal-toc {
background: var(--color-surface, rgba(0, 158, 73, 0.03));
border: 1px solid var(--color-border, rgba(128, 128, 128, 0.12));
border-radius: var(--radius-card, 12px);
padding: 28px 32px;
margin-bottom: 48px;
}
.legal-toc h2 {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
margin-bottom: 16px;
}
.legal-toc ol {
margin: 0 0 0 1.25rem;
padding: 0;
columns: 2;
column-gap: 32px;
}
.legal-toc li {
margin-bottom: 6px;
break-inside: avoid;
font-size: 0.9rem;
line-height: 1.5;
}
.legal-toc a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.legal-toc a:hover {
color: var(--color-primary);
}
/* ── Legal content sections ── */
.legal-content {
color: var(--color-text-secondary);
}
.legal-section {
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.08));
}
.legal-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.legal-section h2 {
font-size: 1.1875rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 16px;
padding-top: 8px;
}
.legal-section h3 {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 24px 0 10px;
}
.legal-section p {
font-size: 0.9375rem;
line-height: 1.8;
margin-bottom: 14px;
}
.legal-section p:last-child {
margin-bottom: 0;
}
.legal-section ul,
.legal-section ol {
margin: 0 0 14px 1.25rem;
line-height: 1.8;
}
.legal-section li {
margin-bottom: 6px;
font-size: 0.9375rem;
}
.legal-section a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-section a:hover {
color: var(--color-primary-dark);
}
/* ── SLA Tables ── */
.legal-table-wrap {
overflow-x: auto;
margin: 20px 0;
border-radius: 8px;
border: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
min-width: 460px;
}
.legal-table th {
background: var(--color-surface, rgba(0, 158, 73, 0.04));
font-weight: 600;
color: var(--color-text);
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
}
.legal-table td {
padding: 12px 16px;
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.08));
vertical-align: top;
line-height: 1.6;
}
.legal-table tr:last-child td {
border-bottom: none;
}
/* ── Legal footer strip ── */
.legal-footer-strip {
border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
padding: 16px 0;
margin-top: 24px;
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.legal-footer-strip a {
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.legal-footer-strip a:hover {
color: var(--color-primary);
}
.legal-footer-strip .legal-sep {
margin: 0 8px;
opacity: 0.4;
}
/* Responsive */
@media (max-width: 600px) {
.legal-toc ol {
columns: 1;
}
.legal-header-inner {
padding-top: 40px;
}
}
/* ══════════════════════════════════════════════════════════════
ZENSKAYL APPS
Each app page sets `--app-accent` (and optionally `--app-accent-rgb`
for the phone-frame glow) on
; every component below derives
its tint from that single variable via color-mix().
══════════════════════════════════════════════════════════════ */
/* ─── Hero ───────────────────────────────────────────────────── */
.app-hero-inner {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
padding: 48px 0 88px;
}
.app-hero-content h1 {
margin: 20px 0;
}
.app-hero-content > p {
font-size: 1.125rem;
color: var(--color-text-secondary);
line-height: 1.75;
max-width: 520px;
}
.app-icon-badge {
width: 68px;
height: 68px;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-md);
flex-shrink: 0;
margin-bottom: 20px;
}
.app-icon-badge img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-availability {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--color-text-secondary);
margin: 24px 0 28px;
}
.app-availability .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--app-accent, var(--color-primary));
flex-shrink: 0;
}
/* ─── Google Play badge (CSS-built — no external brand asset) ── */
.play-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #000;
color: #fff;
padding: 10px 18px 10px 14px;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.play-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
[data-theme="dark"] .play-badge {
background: #fff;
color: #111;
}
.play-badge i {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.play-badge-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.play-badge-text .eyebrow-line {
font-size: 0.625rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.8;
}
.play-badge-text .brand-line {
font-size: 1.0625rem;
font-weight: 600;
font-family: "Inter", sans-serif;
}
/* ─── Phone frame ────────────────────────────────────────────── */
.phone-frame-wrap {
position: relative;
display: flex;
justify-content: center;
}
.phone-frame-wrap::before {
content: "";
position: absolute;
inset: -10%;
background: radial-gradient(
ellipse 60% 60% at 50% 40%,
color-mix(in srgb, var(--app-accent, var(--color-primary)) 22%, transparent) 0%,
transparent 70%
);
z-index: 0;
}
.phone-frame {
position: relative;
z-index: 1;
width: min(100%, 300px);
background: #111;
border-radius: 40px;
padding: 14px;
box-shadow: var(--shadow-lg);
}
.phone-frame::before {
content: "";
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
z-index: 2;
}
.phone-frame-screen {
position: relative;
border-radius: 26px;
overflow: hidden;
line-height: 0;
}
.phone-frame-screen img {
width: 100%;
height: auto;
display: block;
}
/* Redacts third-party app names visible in raw screenshots (e.g. a
phone's own "Top Apps" list) — same technique as .img-overlay-container. */
.brand-blur {
position: absolute;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(0, 0, 0, 0.35);
border-radius: 4px;
pointer-events: none;
}
.phone-frame.is-secondary {
width: min(100%, 260px);
}
/* ─── Feature icon chip (used inside .module-feature-card) ──── */
.app-icon-chip {
width: 52px;
height: 52px;
border-radius: var(--radius-btn);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 16px;
background: color-mix(in srgb, var(--app-accent, var(--color-primary)) 14%, transparent);
}
/* ─── Pricing tiers ──────────────────────────────────────────── */
.pricing-toggle {
display: flex;
width: fit-content;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 4px;
gap: 4px;
margin: 0 auto 40px;
}
.pricing-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: var(--radius-pill);
border: none;
background: none;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.pricing-toggle-btn.active {
background: var(--color-bg-card);
color: var(--color-text-primary);
box-shadow: var(--shadow-sm);
}
.pricing-toggle-save-badge {
font-size: 0.6875rem;
font-weight: 700;
background: color-mix(in srgb, var(--app-accent, var(--color-primary)) 16%, transparent);
color: var(--app-accent, var(--color-primary));
padding: 2px 8px;
border-radius: var(--radius-pill);
}
.app-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.app-pricing-card {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.app-pricing-card.featured {
border-color: var(--app-accent, var(--color-primary));
box-shadow: var(--shadow-md);
}
.app-pricing-badge {
position: absolute;
top: -12px;
left: 28px;
background: var(--app-accent, var(--color-primary));
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--radius-pill);
}
.app-pricing-tier {
font-size: 1.0625rem;
font-weight: 700;
margin-bottom: 6px;
}
.app-pricing-price {
font-size: 2rem;
font-weight: 800;
margin-bottom: 4px;
}
.app-pricing-price .unit {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-muted);
}
.app-pricing-price .price-original {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-muted);
text-decoration: line-through;
margin-right: 6px;
display: none;
}
.app-pricing-price.is-yearly .price-original {
display: inline;
}
.app-pricing-yearly {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-bottom: 20px;
}
.app-pricing-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
flex: 1;
}
.app-pricing-features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
.app-pricing-features li i {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
color: var(--app-accent, var(--color-primary));
}
/* ─── Hub: app showcase cards ────────────────────────────────── */
.apps-hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.app-showcase-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.2s ease;
}
.app-showcase-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--card-accent, var(--color-primary));
}
.app-showcase-icon {
width: 56px;
height: 56px;
border-radius: 14px;
overflow: hidden;
margin-bottom: 6px;
}
.app-showcase-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-showcase-card h3 {
font-size: 1.125rem;
}
.app-showcase-card > p {
font-size: 0.9rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.app-showcase-benefits {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.85rem;
color: var(--color-text-secondary);
flex: 1;
}
.app-showcase-benefits li {
display: flex;
align-items: flex-start;
gap: 6px;
}
.app-showcase-benefits li i {
width: 14px;
height: 14px;
margin-top: 3px;
flex-shrink: 0;
color: var(--card-accent, var(--color-primary));
}
/* "More from ZenSkayl Apps" mini-cards reuse .module-card; only the
icon needs to support an ![]()
instead of an emoji glyph. */
.module-card-icon img {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
}
/* ─── Nav dropdown: ZenSkayl Apps group ──────────────────────── */
.dropdown-apps-group {
margin-top: 16px;
}
.dropdown-app-links {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 6px;
}
.dropdown-app-link {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 0.8125rem;
color: var(--color-text-secondary);
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
.dropdown-app-link:hover {
background: var(--color-primary-light);
color: var(--color-primary);
}
/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.app-hero-inner {
grid-template-columns: 1fr;
gap: 48px;
padding: 32px 0 56px;
}
.phone-frame-wrap {
order: -1;
}
.app-pricing-grid {
grid-template-columns: 1fr;
}
.apps-hub-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.app-hero-content > p {
max-width: none;
}
}