/* Self-hosted fonts: Google Fonts (Plus Jakarta Sans, DM Sans, Fraunces),
latin + latin-ext woff2, served from /fonts. Replaces the render-blocking
Google Fonts stylesheet; font-display:swap keeps text visible immediately. */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/dm-sans-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/dm-sans-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/dm-sans-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/dm-sans-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/fraunces-400-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/fraunces-400-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/fonts/fraunces-500-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/fonts/fraunces-500-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================
Prayer Pause Website - Design System
============================================ */
/* Google Fonts are loaded via in the document (non-blocking) */
/* ============================================
CSS Custom Properties (Design Tokens)
============================================ */
:root {
/* --- Colors: Primary Palette --- */
--bg-primary: #1A1510;
--bg-secondary: #241F18;
--bg-tertiary: #2E2820;
--bg-glass: rgba(46, 40, 32, 0.6);
/* --- Colors: Accent Palette --- */
--accent-primary: #C9A96E;
--accent-secondary: #A67C52;
--accent-muted: #8B6914;
--accent-warm: #D4B896;
/* --- Colors: Text --- */
--text-primary: #F5F0E8;
--text-secondary: #C4B5A0;
--text-muted: #B0A593;
--text-accent: #C9A96E;
/* --- Colors: Semantic --- */
--success: #6B8E23;
--warning: #E8A83E;
--streak: #F5A623;
--emergency: #C17A5A;
/* --- Gradients --- */
--gradient-hero: radial-gradient(
ellipse 80% 60% at 50% 40%,
rgba(201, 169, 110, 0.08) 0%,
rgba(26, 21, 16, 0) 70%
);
--gradient-section: linear-gradient(
180deg,
rgba(201, 169, 110, 0.04) 0%,
transparent 100%
);
--gradient-card: linear-gradient(
135deg,
rgba(201, 169, 110, 0.06) 0%,
transparent 50%
);
/* --- Typography --- */
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
/* Mobile-first type scale */
--text-hero: 2.25rem;
--text-h1: 1.875rem;
--text-h2: 1.5rem;
--text-h3: 1.25rem;
--text-body-lg: 1.0625rem;
--text-body: 1rem;
--text-body-sm: 0.875rem;
--text-caption: 0.75rem;
--text-overline: 0.6875rem;
/* --- Spacing --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-30: 120px;
/* --- Borders & Radius --- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* --- Shadows --- */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
--shadow-phone: 0 24px 80px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 0 40px rgba(201, 169, 110, 0.08);
/* --- Borders --- */
--border-subtle: 1px solid rgba(201, 169, 110, 0.08);
--border-hover: 1px solid rgba(201, 169, 110, 0.2);
--border-accent: 2px solid var(--accent-primary);
/* Nav height */
--nav-height: 56px;
--announce-height: 40px;
}
/* Desktop type scale override */
@media (min-width: 1024px) {
:root {
--text-hero: clamp(3.25rem, 6vw, 5.25rem);
--text-h1: 3rem;
--text-h2: 2.25rem;
--text-h3: 1.5rem;
--text-body-lg: 1.25rem;
--text-body: 1.125rem;
--text-body-sm: 1rem;
--text-caption: 0.875rem;
--text-overline: 0.75rem;
--nav-height: 64px;
}
}
/* ============================================
Reset & Base
============================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-body);
line-height: 1.7;
color: var(--text-secondary);
background-color: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* (background pattern removed, at 1.5% alpha it was invisible noise) */
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--text-accent);
text-decoration: none;
transition: opacity 0.2s ease;
}
a:hover {
opacity: 0.8;
}
/* Ensure all App Store download links are always clickable */
a[href*="apps.apple.com"] {
position: relative;
z-index: 50;
cursor: pointer !important;
pointer-events: auto !important;
}
a[href*="apps.apple.com"] img,
a[href*="apps.apple.com"] span {
pointer-events: none;
}
/* Focus states for accessibility */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
/* Skip to content */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-6);
background: var(--accent-primary);
color: var(--bg-primary);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
font-weight: 500;
z-index: 1000;
transition: top 0.2s ease;
}
.skip-link:focus {
top: var(--space-2);
opacity: 1;
}
/* ============================================
Typography Styles
============================================ */
h1, h2, h3, h4 {
font-family: var(--font-heading);
color: var(--text-primary);
letter-spacing: -0.02em;
}
h1 {
font-size: var(--text-h1);
font-weight: 700;
line-height: 1.15;
}
h2 {
font-size: var(--text-h2);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
h3 {
font-size: var(--text-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
}
.text-hero {
font-size: var(--text-hero);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text-primary);
}
.overline {
font-family: var(--font-body);
font-size: var(--text-overline);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-accent);
}
.body-lg {
font-size: var(--text-body-lg);
line-height: 1.6;
}
.text-muted {
color: var(--text-muted);
}
/* ============================================
Layout
============================================ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
position: relative;
z-index: 1;
}
.content-narrow {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.text-center {
text-align: center;
}
/* ============================================
Announcement strip (above nav, dismissible)
============================================ */
.announce {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--announce-height);
z-index: 101;
background: var(--bg-secondary);
border-bottom: 1px solid rgba(201, 169, 110, 0.18);
display: flex;
align-items: center;
}
.announce[hidden] {
display: none;
}
body.no-announce {
--announce-height: 0px;
}
.announce__inner {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-12) 0 var(--space-4);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: 500;
line-height: 1.2;
}
/* Rotating messages: all stacked at the same position, cross-fade between them */
.announce__messages {
position: relative;
flex: 1;
min-height: 1.4em;
}
.announce__msg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
padding: 0 var(--space-2);
text-align: center;
}
.announce__msg--active {
opacity: 1;
}
.announce__close {
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
-webkit-appearance: none;
appearance: none;
transition: color 0.2s ease, background 0.2s ease;
}
.announce__close:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.06);
}
/* ============================================
Navigation
============================================ */
.nav {
position: fixed;
top: var(--announce-height);
left: 0;
right: 0;
height: var(--nav-height);
z-index: 100;
background: transparent;
display: flex;
align-items: center;
transition: background 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease, top 0.3s ease;
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(26, 21, 16, 0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: rgba(201, 169, 110, 0.1);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.nav__brand {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
}
.nav__brand:hover {
opacity: 1;
}
.nav__icon {
width: 24px;
height: 24px;
border-radius: 6px;
}
.nav__wordmark {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-body);
color: var(--text-primary);
}
.nav__right {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nav__rating {
display: none;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: var(--radius-full);
background: rgba(201, 169, 110, 0.08);
border: 1px solid rgba(201, 169, 110, 0.18);
color: var(--accent-warm);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-caption);
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease;
}
.nav__rating:hover {
background: rgba(201, 169, 110, 0.14);
border-color: rgba(201, 169, 110, 0.3);
opacity: 1;
}
/* Mobile hides the short label, tablet+ shows the full label */
.nav__rating-short { display: none; }
.nav__rating-full { display: inline; }
@media (min-width: 640px) {
.nav__rating {
display: inline-flex;
}
}
.nav__link {
position: relative;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-body-sm);
color: var(--text-secondary);
text-decoration: none;
white-space: nowrap;
padding: 6px 0;
transition: color 0.2s ease;
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 2px;
background: var(--accent-primary);
transform: scaleX(0);
transition: transform 0.2s ease;
}
.nav__link:hover {
color: var(--text-primary);
}
.nav__link:hover::after,
.nav__link.is-current::after {
transform: scaleX(1);
}
.nav__link.is-current {
color: var(--text-primary);
}
.nav__cta {
display: inline-flex;
align-items: center;
padding: var(--space-2) 20px;
background: var(--accent-primary);
color: var(--bg-primary);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-body-sm);
border-radius: var(--radius-full);
border: none;
cursor: pointer;
transition: filter 0.2s ease, transform 0.2s ease;
text-decoration: none;
white-space: nowrap;
position: relative;
z-index: 10;
}
.nav__cta:hover {
filter: brightness(1.1);
transform: scale(1.02);
opacity: 1;
}
/* Quick-scroll section links (desktop) */
.nav__links {
display: none;
}
@media (min-width: 900px) {
.nav__links {
display: flex;
align-items: center;
gap: var(--space-6);
}
}
/* Hamburger toggle (mobile, revealed by JS) */
.nav__toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: -6px;
padding: 0;
background: transparent;
border: none;
color: var(--text-primary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 899px) {
.nav--js .nav__toggle {
display: inline-flex;
}
}
.nav__toggle-box {
position: relative;
display: block;
width: 22px;
height: 16px;
}
.nav__toggle-bar {
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__toggle-bar:nth-child(1) { top: 0; }
.nav__toggle-bar:nth-child(2) { top: 7px; }
.nav__toggle-bar:nth-child(3) { top: 14px; }
.nav--open .nav__toggle-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav--open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }
/* Mobile slide-down menu */
.nav__menu {
position: fixed;
top: calc(var(--announce-height) + var(--nav-height));
left: 0;
right: 0;
bottom: 0;
z-index: 99;
display: flex;
flex-direction: column;
padding: var(--space-8) var(--space-6) var(--space-12);
background: rgba(26, 21, 16, 0.97);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.nav-menu-open .nav__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 900px) {
.nav__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav__menu { transition: opacity 0.001s ease, visibility 0.001s; transform: none; }
}
.nav__menu-link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.5rem;
color: var(--text-primary);
text-decoration: none;
padding: var(--space-3) 0;
border-bottom: 1px solid rgba(201, 169, 110, 0.12);
transition: color 0.2s ease;
}
.nav__menu-link:hover,
.nav__menu-link.is-current {
color: var(--accent-warm);
}
.nav__menu-cta {
margin-top: var(--space-8);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
background: var(--accent-primary);
color: var(--bg-primary);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-body);
border-radius: var(--radius-full);
text-decoration: none;
}
body.nav-menu-open {
overflow: hidden;
}
/* ============================================
Hero Section
============================================ */
.hero {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-8));
padding-bottom: var(--space-12);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
@media (min-width: 1024px) {
.hero {
min-height: calc(100vh - var(--nav-height) - var(--announce-height));
min-height: calc(100svh - var(--nav-height) - var(--announce-height));
padding-top: calc(var(--nav-height) + var(--announce-height));
padding-bottom: 0;
}
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-hero);
pointer-events: none;
}
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-8);
padding: var(--space-12) 0 var(--space-10);
width: 100%;
}
@media (min-width: 1024px) {
.hero__inner {
flex-direction: row;
text-align: left;
align-items: center;
gap: var(--space-16);
padding: 0;
}
}
.hero__content {
flex: 1;
max-width: 600px;
position: relative;
z-index: 2;
}
.hero__headline {
margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
.hero__headline {
margin-bottom: var(--space-6);
}
}
/* Staggered hero animations */
.hero__headline {
opacity: 0;
animation: fadeIn 500ms ease-out forwards;
}
.hero__subheadline {
max-width: 540px;
margin-bottom: var(--space-8);
font-size: var(--text-body-lg);
line-height: 1.55;
color: var(--text-secondary);
opacity: 0;
animation: fadeIn 500ms ease-out 200ms forwards;
}
@media (min-width: 1024px) {
.hero__subheadline {
margin-left: 0;
margin-right: auto;
}
}
/* Hero CTA block - composed, intentional grouping */
.hero__cta-block {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
opacity: 0;
animation: fadeIn 500ms ease-out 400ms forwards;
}
@media (min-width: 1024px) {
.hero__cta-block {
align-items: flex-start;
}
}
.hero__cta-primary {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
@media (min-width: 1024px) {
.hero__cta-primary {
align-items: flex-start;
}
}
.hero__app-store {
display: inline-block;
transition: transform 0.2s ease, opacity 0.2s ease;
position: relative;
z-index: 10;
cursor: pointer;
}
.hero__app-store:hover {
transform: scale(1.03);
opacity: 1;
}
.hero__app-store img {
height: 48px;
width: auto;
pointer-events: none;
}
@media (min-width: 1024px) {
.hero__app-store img {
height: 52px;
}
}
.hero__secondary-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-body);
color: var(--text-accent);
}
.hero__secondary-cta svg {
transition: transform 0.2s ease;
}
.hero__secondary-cta:hover svg {
transform: translateY(3px);
}
.hero__social-proof {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-caption);
color: var(--text-muted);
}
.hero__stars {
display: flex;
gap: 2px;
}
.hero__stars svg {
width: 14px;
height: 14px;
fill: var(--accent-primary);
}
/* Hero phone mockup */
.hero__mockup {
flex-shrink: 0;
}
.phone-mockup {
position: relative;
width: 200px;
}
@media (min-width: 768px) {
.phone-mockup {
width: 240px;
}
}
@media (min-width: 1024px) {
.phone-mockup--hero {
width: 280px;
transform: rotate(2deg);
}
}
/* iPhone 17 Pro Max mockup
Screen 1320×2868 px (440×956 pt @ 3x).
Dynamic Island: 126×37.33 pt, ~11 pt from top, centered. */
.phone-mockup__frame {
position: relative;
border-radius: 13.4%/6.2%;
overflow: hidden;
background: #000;
box-shadow: var(--shadow-phone);
border: 1.5px solid #2A2520;
outline: 1px solid rgba(255, 255, 255, 0.04);
outline-offset: -2px;
}
.phone-mockup__screen {
width: 100%;
display: block;
border-radius: inherit;
}
/* Dynamic Island, iPhone 17 Pro Max proportions */
.phone-mockup__frame::before {
content: '';
position: absolute;
top: 1.2%;
left: 50%;
transform: translateX(-50%);
width: 28.6%;
aspect-ratio: 126 / 37.33;
background: #000;
border-radius: 9999px;
z-index: 3;
pointer-events: none;
box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.03);
}
/* ============================================
Problem Section
============================================ */
.problem {
padding: var(--space-16) 0 var(--space-12);
position: relative;
}
@media (min-width: 1024px) {
.problem {
padding: var(--space-30) 0 var(--space-20);
}
}
.problem::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(201, 169, 110, 0.1);
}
.problem::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(201, 169, 110, 0.1);
}
.problem__overline {
margin-bottom: var(--space-4);
}
.problem__headline {
margin-bottom: var(--space-6);
}
.problem__body {
font-size: var(--text-body-lg);
}
/* ============================================
Features Section
============================================ */
.features {
padding: var(--space-16) 0;
}
@media (min-width: 1024px) {
.features {
padding: var(--space-24) 0;
}
}
.features__intro {
text-align: center;
margin-bottom: var(--space-12);
}
@media (min-width: 1024px) {
.features__intro {
margin-bottom: var(--space-20);
}
}
.feature {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-16);
position: relative;
}
.feature:last-child {
margin-bottom: 0;
}
/* Mobile: subtle tick separator between features so the rhythm doesn't blur */
@media (max-width: 767px) {
.feature {
padding-top: var(--space-10);
}
.feature::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 1px;
background: rgba(201, 169, 110, 0.22);
}
/* No separator on the first feature (intro is above it) */
.features__intro + .feature::before { display: none; }
}
@media (min-width: 1024px) {
.feature {
flex-direction: row;
gap: var(--space-16);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
}
.feature--reverse {
flex-direction: row-reverse;
}
}
.feature__content {
flex: 1;
max-width: 480px;
text-align: left;
}
.feature__overline {
margin-bottom: var(--space-3);
}
.feature__headline {
margin-bottom: var(--space-4);
}
.feature__body {
line-height: 1.55;
}
@media (min-width: 1024px) {
.feature__body {
line-height: 1.7;
}
}
.feature__mockup {
flex-shrink: 0;
}
.feature__mockup .phone-mockup {
width: 180px;
}
@media (min-width: 768px) {
.feature__mockup .phone-mockup {
width: 220px;
}
}
@media (min-width: 1024px) {
.feature__mockup .phone-mockup {
width: 240px;
transform: rotate(1deg);
}
.feature--reverse .feature__mockup .phone-mockup {
transform: rotate(-1deg);
}
}
/* ============================================
Mindful Interventions Section (Prominent)
============================================ */
.interventions {
background: var(--bg-secondary);
border-radius: var(--radius-xl);
padding: var(--space-10) var(--space-6);
margin-bottom: var(--space-16);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.interventions {
padding: var(--space-12) var(--space-10);
}
}
@media (min-width: 1024px) {
.interventions {
padding: var(--space-16) var(--space-16);
margin-bottom: 100px;
}
}
.interventions::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
opacity: 0.3;
}
.interventions__header {
text-align: center;
margin-bottom: var(--space-8);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.interventions__headline {
margin-top: var(--space-3);
margin-bottom: var(--space-4);
}
.interventions__desc {
color: var(--text-secondary);
font-size: var(--text-body);
}
/* Mindful Interventions: a 5-card showcase. Every variant is shown statically
so the user can scan all five at once. No tabs, no swappable detail, no
active-state mismatch. Each card is its own self-contained editorial unit:
mini phone, Fraunces italic title, one-line description.
Mobile: horizontal rows (phone left, copy right) so the section doesn't
turn into a 2000px scroll wall.
Tablet+: column-flexed cards in a grid, 2/3/5 columns by breakpoint. */
.interventions__list {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1180px;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 560px) {
.interventions__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-5);
}
}
@media (min-width: 900px) {
.interventions__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-9) var(--space-5);
}
}
@media (min-width: 1200px) {
.interventions__list {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-7) var(--space-5);
max-width: 1180px;
}
}
.intervention-card {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-4);
text-align: left;
padding: var(--space-3) 0;
transition: opacity 0.35s ease;
}
@media (min-width: 560px) {
.intervention-card {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: 0;
transition: transform 0.35s ease;
}
.intervention-card:hover {
transform: translateY(-4px);
}
}
/* Mobile carousel: each card is its own centered "spotlight". Phone on top,
title + desc below, then dots. All cards stack absolutely in the same slot
and only the active one fades in.
Selector specificity is bumped (.interventions__list .intervention-card)
so it wins over .reveal--visible which the scroll-fade observer adds to
every card with class="reveal". Without that, all 5 stayed at opacity 1
after the initial reveal animation. */
@media (max-width: 559px) {
.interventions__list {
position: relative;
min-height: 380px;
}
.interventions__list .intervention-card {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: var(--space-4);
padding: 0;
}
.interventions__list .intervention-card.intervention-card--active {
opacity: 1;
pointer-events: auto;
}
.interventions__list .intervention-card__body {
width: 100%;
max-width: 32ch;
margin: 0 auto;
}
.interventions__list .intervention-card__title {
margin: 0 0 var(--space-2);
}
.interventions__list .intervention-card__desc {
margin: 0 auto;
max-width: 30ch;
}
}
.interventions__controls {
display: none;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-8);
}
@media (max-width: 559px) {
.interventions__controls {
display: flex;
}
}
.interventions__dots {
display: none;
justify-content: center;
align-items: center;
gap: 2px;
}
@media (max-width: 559px) {
.interventions__dots {
display: flex;
}
}
.interventions__arrow {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(201, 169, 110, 0.25);
border-radius: 50%;
color: var(--accent-warm);
cursor: pointer;
padding: 0;
-webkit-appearance: none;
appearance: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.interventions__arrow:hover,
.interventions__arrow:focus-visible {
background: rgba(201, 169, 110, 0.08);
border-color: rgba(201, 169, 110, 0.5);
}
.interventions__arrow:active {
transform: scale(0.94);
}
.interventions__arrow svg {
width: 16px;
height: 16px;
}
.interventions__dot {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
-webkit-appearance: none;
appearance: none;
}
.interventions__dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-muted);
opacity: 0.3;
transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.interventions__dot--active::before {
background: var(--accent-primary);
opacity: 1;
transform: scale(1.3);
}
.intervention-card__visual {
flex-shrink: 0;
display: flex;
justify-content: center;
}
@media (min-width: 560px) {
.intervention-card__visual {
width: 100%;
margin-bottom: var(--space-2);
}
}
.phone-mockup--mini {
width: 124px;
max-width: 100%;
}
@media (min-width: 560px) {
.phone-mockup--mini { width: 200px; }
}
@media (min-width: 900px) {
.phone-mockup--mini { width: 190px; }
}
@media (min-width: 1200px) {
.phone-mockup--mini { width: 170px; }
}
.intervention-card__body {
flex: 1;
min-width: 0;
}
.intervention-card__title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.375rem;
color: var(--accent-warm);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 var(--space-2);
}
@media (min-width: 560px) {
.intervention-card__title {
font-size: clamp(1.375rem, 1.6vw, 1.5rem);
margin: 0;
}
}
.intervention-card__desc {
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
max-width: 30ch;
}
@media (min-width: 560px) {
.intervention-card__desc {
max-width: 26ch;
}
}
/* ============================================
Meet Sabr Section - Interactive Slider
============================================ */
.sabr {
padding: var(--space-16) 0;
background: var(--bg-secondary);
position: relative;
}
@media (min-width: 1024px) {
.sabr {
padding: var(--space-24) 0;
}
}
.sabr__overline {
margin-bottom: var(--space-3);
}
.sabr__headline {
margin-bottom: var(--space-6);
}
.sabr__body {
max-width: 560px;
margin: 0 auto var(--space-10);
font-size: var(--text-body);
text-align: center;
}
@media (min-width: 1024px) {
.sabr__body {
font-size: var(--text-body-lg);
}
}
/* Sabr Slider */
.sabr-slider {
position: relative;
max-width: 400px;
margin: 0 auto;
user-select: none;
touch-action: pan-y pinch-zoom;
}
.sabr-slider__viewport {
overflow: hidden;
border-radius: var(--radius-xl);
}
.sabr-slider__track {
display: flex;
transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.sabr-slider__slide {
flex: 0 0 100%;
text-align: center;
padding: var(--space-6) var(--space-4);
}
.sabr-slider__img {
width: 200px;
height: 200px;
margin: 0 auto var(--space-4);
object-fit: contain;
filter: drop-shadow(0 8px 32px rgba(26, 21, 16, 0.4));
transition: filter 300ms ease;
}
@media (min-width: 768px) {
.sabr-slider__img {
width: 260px;
height: 260px;
}
}
.sabr-slider__name {
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.sabr-slider__desc {
font-size: var(--text-body-sm);
color: var(--text-secondary);
max-width: 280px;
margin: 0 auto;
line-height: 1.5;
}
/* Slider arrows */
.sabr-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-70%);
width: 44px;
height: 44px;
background: var(--bg-tertiary);
border: var(--border-subtle);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
z-index: 2;
}
.sabr-slider__arrow:hover {
background: var(--bg-glass);
color: var(--text-primary);
border-color: rgba(201, 169, 110, 0.2);
}
.sabr-slider__arrow--prev {
left: -8px;
}
.sabr-slider__arrow--next {
right: -8px;
}
@media (min-width: 768px) {
.sabr-slider__arrow--prev { left: -20px; }
.sabr-slider__arrow--next { right: -20px; }
}
/* Slider dots */
.sabr-slider__dots {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
/* 44x44 tap target with a small visible dot inside (WCAG 2.5.5) */
.sabr-slider__dot {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
}
.sabr-slider__dot::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
opacity: 0.3;
transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.sabr-slider__dot--active::before {
opacity: 1;
background: var(--accent-primary);
transform: scale(1.25);
}
/* Mobile: replace slider with horizontal scroll-snap (all 6 states reachable by swipe) */
@media (max-width: 767px) {
.sabr-slider { max-width: 100%; padding: 0; }
.sabr-slider__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* pan-y is required alongside pan-x, without it iOS Safari swallows
vertical swipes that begin inside the carousel and the page won't
scroll past the Sabr section. */
touch-action: pan-x pan-y;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-radius: 0;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.sabr-slider__viewport::-webkit-scrollbar { display: none; }
.sabr-slider__track {
transform: none !important;
transition: none;
gap: var(--space-2);
padding: 0 12vw;
}
.sabr-slider__slide {
flex: 0 0 76%;
scroll-snap-align: center;
padding: var(--space-4) 0;
}
.sabr-slider__arrow,
.sabr-slider__dots { display: none; }
}
/* ============================================
Reviews Section - Horizontal Scroll
============================================ */
.reviews {
padding: var(--space-16) 0;
position: relative;
}
@media (min-width: 1024px) {
.reviews {
padding: var(--space-24) 0;
}
}
.reviews__header {
margin-bottom: var(--space-8);
}
.reviews__rating {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-2);
}
.reviews__number {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 800;
color: var(--text-accent);
line-height: 1;
letter-spacing: -0.03em;
}
.reviews__stars {
display: flex;
gap: 2px;
}
.reviews__stars svg {
width: 20px;
height: 20px;
fill: var(--accent-primary);
}
@media (min-width: 1024px) {
.reviews__stars svg {
width: 24px;
height: 24px;
}
}
.reviews__subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-body-lg);
color: var(--text-secondary);
}
.reviews__hero {
max-width: 32ch;
margin: 0 auto var(--space-12);
text-align: center;
padding: 0 var(--space-4);
}
.reviews__hero-quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
line-height: 1.3;
color: var(--accent-warm);
margin: 0 0 var(--space-5);
letter-spacing: -0.005em;
}
.reviews__hero-attribution {
font-family: var(--font-body);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-muted);
}
/* Mobile: horizontal carousel with mask-faded edges */
.reviews__carousel {
display: flex;
gap: var(--space-3);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--space-6);
-webkit-overflow-scrolling: touch;
/* pan-y must be included or iOS Safari swallows downward swipes inside
this carousel and the page stops scrolling. */
touch-action: pan-x pan-y;
overscroll-behavior-x: contain;
padding: var(--space-2) var(--space-6);
margin: 0 calc(var(--space-6) * -1);
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--space-6),
#000 calc(100% - var(--space-6)),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--space-6),
#000 calc(100% - var(--space-6)),
transparent 100%
);
}
/* Tablet and desktop: drop the carousel entirely, render every review in a
responsive grid so nothing clips mid-sentence at the edges. */
@media (min-width: 768px) {
.reviews__carousel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
overflow: visible;
scroll-snap-type: none;
padding: 0;
margin: 0;
-webkit-mask-image: none;
mask-image: none;
touch-action: auto;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
}
/* Hide scrollbar */
.reviews__carousel::-webkit-scrollbar { display: none; }
.reviews__carousel { -ms-overflow-style: none; scrollbar-width: none; }
.review-card {
flex: 0 0 260px;
scroll-snap-align: start;
background: var(--bg-secondary);
background-image: var(--gradient-card);
border: var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 768px) {
.review-card {
flex: initial;
width: 100%;
scroll-snap-align: none;
}
}
.review-card:hover {
transform: translateY(-2px);
border-color: rgba(201, 169, 110, 0.2);
}
.review-card__quote {
font-style: italic;
color: var(--text-primary);
line-height: 1.55;
font-size: var(--text-body-sm);
margin: 0 0 var(--space-4);
}
.review-card__quote em {
font-style: normal;
color: var(--accent-warm);
}
.review-card__author {
font-size: var(--text-caption);
color: var(--text-muted);
font-weight: 500;
}
.review-card__flag {
margin-left: var(--space-1);
}
/* ============================================
Privacy Section
============================================ */
.privacy-section {
padding: var(--space-16) 0;
}
@media (min-width: 1024px) {
.privacy-section {
padding: var(--space-24) 0;
}
}
.privacy-section__icon {
width: 40px;
height: 40px;
margin: 0 auto var(--space-4);
color: var(--accent-primary);
}
.privacy-section__headline {
margin-bottom: var(--space-4);
}
.privacy-section__body {
max-width: 560px;
margin: 0 auto var(--space-6);
}
.privacy-section__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 500;
color: var(--text-accent);
}
.privacy-section__link svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.privacy-section__link:hover svg {
transform: translateX(4px);
}
/* ============================================
Final CTA
============================================ */
.final-cta {
padding: var(--space-16) 0;
background: var(--bg-secondary);
position: relative;
}
@media (min-width: 1024px) {
.final-cta {
padding: var(--space-24) 0;
}
}
.final-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: var(--gradient-section);
pointer-events: none;
}
.final-cta__headline {
margin-bottom: var(--space-4);
}
.final-cta__subheadline {
max-width: 520px;
margin: 0 auto var(--space-8);
font-size: var(--text-body-lg);
}
.final-cta__badge {
display: inline-block;
transition: transform 0.2s ease;
position: relative;
z-index: 10;
cursor: pointer;
}
.final-cta__badge:hover {
transform: scale(1.03);
opacity: 1;
}
.final-cta__badge img {
height: 52px;
width: auto;
pointer-events: none;
}
@media (min-width: 1024px) {
.final-cta__badge img {
height: 64px;
}
}
/* ============================================
Footer
============================================ */
.footer {
padding: var(--space-10) 0;
border-top: 1px solid rgba(201, 169, 110, 0.08);
position: relative;
z-index: 1;
}
.footer__brand {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.footer__icon {
width: 20px;
height: 20px;
border-radius: 4px;
}
.footer__name {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-body-sm);
color: var(--text-secondary);
}
.footer__links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
list-style: none;
}
.footer__links li:not(:last-child)::after {
content: '\00B7';
margin-left: var(--space-2);
color: var(--text-muted);
}
.footer__links a {
font-size: var(--text-caption);
color: var(--text-muted);
transition: opacity 0.15s ease;
}
.footer__links a:hover {
opacity: 0.8;
}
.footer__badge {
display: flex;
justify-content: center;
margin: 0 auto var(--space-6);
transition: transform 0.2s ease;
}
.footer__badge:hover {
transform: scale(1.03);
opacity: 1;
}
.footer__badge img {
display: block;
height: 40px;
width: auto;
}
.footer__meta {
text-align: center;
}
.footer__copyright,
.footer__email {
font-size: var(--text-caption);
color: var(--text-muted);
}
.footer__maker {
font-size: var(--text-caption);
color: var(--text-muted);
margin-bottom: var(--space-2);
}
.footer__email {
margin-top: var(--space-2);
}
.footer__email a {
color: var(--text-muted);
}
/* ============================================
Scroll Reveal Animations
============================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
.reveal--delay-1 {
transition-delay: 100ms;
}
.reveal--delay-2 {
transition-delay: 200ms;
}
.reveal--delay-3 {
transition-delay: 300ms;
}
/* Phone mockup reveal (with scale) */
.reveal-mockup {
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.reveal-mockup--visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Staggered review cards */
.review-card:nth-child(1) { transition-delay: 0ms; }
.review-card:nth-child(2) { transition-delay: 50ms; }
.review-card:nth-child(3) { transition-delay: 100ms; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInSlideRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ============================================
Mobile Breathing Room (390px target)
============================================ */
@media (max-width: 767px) {
/* More generous section padding on mobile */
.problem {
padding: var(--space-20) 0 var(--space-16);
}
.features {
padding: var(--space-16) 0;
}
.feature {
margin-bottom: var(--space-20);
}
.sabr {
padding: var(--space-20) 0;
}
.reviews {
padding: var(--space-20) 0;
}
.privacy-section {
padding: var(--space-20) 0;
}
.final-cta {
padding: var(--space-20) 0;
}
/* Smaller phone mockups on mobile for less scroll */
.feature__mockup .phone-mockup {
width: 160px;
}
/* Intervention card sizing handled in .phone-mockup--mini block above */
/* Container breathing room */
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
/* Feature content spacing */
.feature__content {
text-align: center;
}
.features__intro {
margin-bottom: var(--space-10);
}
/* Interventions breathing room */
.interventions {
padding: var(--space-8) var(--space-4);
margin-bottom: var(--space-20);
}
}
/* ============================================
Reduced Motion
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal,
.reveal-mockup {
opacity: 1;
transform: none;
}
.hero__headline,
.hero__subheadline,
.hero__cta-block,
.hero__social-proof,
.hero__visual,
.hero__mockup {
opacity: 1;
animation: none;
}
.sabr-slider__track {
transition: none;
}
}
/* ============================================
Subpage Shared Styles
============================================ */
/* Privacy Policy Page */
.privacy-page {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-12));
padding-bottom: var(--space-16);
min-height: 100vh;
}
.privacy-page h1 {
margin-bottom: var(--space-2);
}
.privacy-page h2 {
font-size: var(--text-h3);
margin-top: var(--space-10);
margin-bottom: var(--space-3);
}
.privacy-page h3 {
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.privacy-page p {
margin-bottom: var(--space-3);
max-width: 640px;
}
.privacy-page ul,
.privacy-page ol {
margin-bottom: var(--space-3);
padding-left: var(--space-6);
max-width: 640px;
}
.privacy-page li {
margin-bottom: var(--space-2);
}
.privacy-page strong {
color: var(--text-primary);
font-weight: 500;
}
/* Privacy table */
.privacy-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-4) 0 var(--space-6);
}
.privacy-table {
width: 100%;
min-width: 500px;
max-width: 800px;
border-collapse: collapse;
font-size: var(--text-body-sm);
}
.privacy-table th,
.privacy-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: var(--border-subtle);
}
.privacy-table th {
color: var(--text-primary);
font-weight: 600;
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.privacy-table td {
color: var(--text-secondary);
}
.privacy-page a {
color: var(--text-accent);
}
/* ============================================
Support Page
============================================ */
.support-page {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-12));
padding-bottom: var(--space-16);
min-height: 100vh;
}
.support-page h1 {
margin-bottom: var(--space-2);
}
/* Unified hero subtitle for all four secondary pages.
Same font, size, italic, accent color so the four heros line up. */
.privacy-page__commitment,
.terms-page__subtitle,
.faq-page__subtitle,
.support-page__subtitle {
font-family: var(--font-body);
font-size: var(--text-body-lg);
font-style: italic;
color: var(--text-accent);
margin-bottom: var(--space-2);
max-width: 640px;
}
/* Pages with a Last Updated date line need only space-2 below the subtitle */
.privacy-page__updated,
.terms-page__updated {
font-size: var(--text-caption);
color: var(--text-muted);
margin-bottom: var(--space-10);
}
/* Pages without a Last Updated date give the bottom margin to the subtitle */
.support-page__subtitle,
.faq-page__subtitle {
margin-bottom: var(--space-10);
}
.support-cards {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.support-card {
display: flex;
align-items: center;
gap: var(--space-4);
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.support-card:hover {
background: var(--bg-tertiary);
border-color: rgba(201, 169, 110, 0.2);
opacity: 1;
}
.support-card__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--accent-primary);
}
.support-card__icon svg {
width: 100%;
height: 100%;
}
.support-card__content {
flex: 1;
}
.support-card__title {
font-family: var(--font-heading);
font-size: var(--text-body);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.support-card__desc {
font-size: var(--text-body-sm);
color: var(--text-muted);
line-height: 1.4;
}
.support-divider {
display: flex;
align-items: center;
margin: var(--space-6) 0;
color: var(--text-muted);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.support-divider::before,
.support-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(201, 169, 110, 0.1);
}
.support-divider::before { margin-right: var(--space-4); }
.support-divider::after { margin-left: var(--space-4); }
.support-contact {
text-align: center;
padding: var(--space-6);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: var(--border-subtle);
}
.support-contact p {
color: var(--text-muted);
font-size: var(--text-body-sm);
margin-bottom: var(--space-3);
}
.support-contact a {
color: var(--text-accent);
font-weight: 500;
}
/* ============================================
FAQ Page
============================================ */
.faq-page {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-12));
padding-bottom: var(--space-16);
min-height: 100vh;
}
.faq-page h1 {
margin-bottom: var(--space-2);
}
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.faq-item {
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:hover {
border-color: rgba(201, 169, 110, 0.15);
}
/* Each question is wrapped in an for heading-outline signal; the heading
itself carries no visual weight, the button inside does. */
.faq-q-heading {
margin: 0;
font: inherit;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: var(--text-body);
font-weight: 600;
color: var(--text-primary);
font-family: var(--font-heading);
transition: background 0.2s ease;
line-height: 1.4;
}
.faq-question:hover {
background: rgba(201, 169, 110, 0.03);
}
.faq-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.faq-item.open .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
display: none;
padding: 0 var(--space-6) var(--space-6);
color: var(--text-secondary);
line-height: 1.7;
font-size: var(--text-body-sm);
}
.faq-item.open .faq-answer {
display: block;
}
.faq-more-help {
margin-top: var(--space-10);
text-align: center;
}
.faq-more-help h2 {
font-size: var(--text-h3);
margin-bottom: var(--space-3);
}
.faq-more-help p {
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.faq-more-help a {
color: var(--text-accent);
font-weight: 500;
}
/* ============================================
Terms Page
============================================ */
.terms-page {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-12));
padding-bottom: var(--space-16);
min-height: 100vh;
}
.terms-page h1 {
margin-bottom: var(--space-2);
}
.terms-page h2 {
font-size: var(--text-h3);
margin-top: var(--space-10);
margin-bottom: var(--space-3);
}
.terms-page h3 {
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.terms-page p {
margin-bottom: var(--space-3);
max-width: 640px;
}
.terms-page ul,
.terms-page ol {
margin-bottom: var(--space-3);
padding-left: var(--space-6);
max-width: 640px;
}
.terms-page li {
margin-bottom: var(--space-2);
}
.terms-page strong {
color: var(--text-primary);
font-weight: 500;
}
.terms-page a {
color: var(--text-accent);
}
.terms-highlight {
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
margin: var(--space-4) 0;
}
.terms-highlight h3 {
margin-top: 0;
}
/* ============================================
Sabr Hero (Static Waving Image)
============================================ */
.hero__visual {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
opacity: 0;
animation: fadeInSlideRight 600ms ease-out 300ms forwards;
}
@media (min-width: 1024px) {
.hero__visual {
align-self: flex-end;
padding-bottom: var(--space-12);
}
}
.sabr-hero {
width: 160px;
height: 160px;
margin-bottom: var(--space-4);
filter: drop-shadow(0 8px 24px rgba(26, 21, 16, 0.3));
}
.sabr-hero__img {
width: 100%;
height: 100%;
object-fit: contain;
animation: sabr-gentle-float 4s ease-in-out infinite;
}
@keyframes sabr-gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (min-width: 768px) {
.sabr-hero {
width: 220px;
height: 220px;
}
}
@media (min-width: 1024px) {
.sabr-hero {
width: 280px;
height: 280px;
}
}
/* ============================================
Sabr Emotion States (placed throughout page)
============================================ */
.sabr-emotion {
display: flex;
justify-content: center;
margin-bottom: var(--space-4);
}
.sabr-emotion img {
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(26, 21, 16, 0.2));
}
.sabr-emotion--thinking img {
width: 64px;
height: 64px;
}
.sabr-emotion--reading-quran {
position: absolute;
top: var(--space-4);
right: var(--space-4);
margin-bottom: 0;
opacity: 0.25;
}
.sabr-emotion--reading-quran img {
width: 80px;
height: 80px;
}
.sabr-emotion--celebrating img {
width: 80px;
height: 80px;
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.sabr-emotion--thinking img {
width: 80px;
height: 80px;
}
.sabr-emotion--reading-quran img {
width: 100px;
height: 100px;
}
.sabr-emotion--celebrating img {
width: 100px;
height: 100px;
}
}
@media (min-width: 1024px) {
.sabr-emotion--reading-quran {
opacity: 0.3;
}
.sabr-emotion--reading-quran img {
width: 120px;
height: 120px;
}
}
/* ============================================
Editorial pull-quote treatment.
Used by both the hadith moment and the reviews hero quote so they share
the same visual rhythm: a small gold rule, Fraunces italic accent-warm
text, and an uppercase tracked attribution. No heavy stage, no decorative
quote-marks, just typography breathing in whitespace.
============================================ */
.moment {
padding: clamp(80px, 12vw, 160px) var(--space-6);
text-align: center;
position: relative;
/* Full-bleed band of bg-secondary so the quote sits on its own surface
instead of floating in the same field as the feature blocks above and
below. Subtle, not dramatic. */
background: var(--bg-secondary);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
/* Give the feature that follows the moment band real breathing room so the
phone mockup doesn't appear to perch on the band's edge. */
.moment + .feature {
margin-top: var(--space-12);
}
@media (min-width: 1024px) {
.moment + .feature {
margin-top: var(--space-20);
}
}
.moment__inner {
max-width: 32ch;
margin: 0 auto;
}
.moment__quote {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-style: italic;
font-weight: 400;
line-height: 1.3;
color: var(--accent-warm);
margin: 0 0 var(--space-5);
letter-spacing: -0.005em;
}
.moment__attribution {
font-family: var(--font-body);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-muted);
margin: 0;
}
/* ============================================
Privacy lines stacked
============================================ */
.privacy-section__list {
list-style: none;
margin: var(--space-6) auto var(--space-8);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: left;
max-width: max-content;
}
.privacy-section__list li {
font-family: var(--font-body);
font-size: var(--text-body-lg);
color: var(--text-primary);
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.privacy-section__list li::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-primary);
flex-shrink: 0;
align-self: center;
}
/* ============================================
Final CTA with Sabr emotion
============================================ */
.final-cta__sabr {
display: flex;
justify-content: center;
margin-bottom: var(--space-6);
filter: drop-shadow(0 12px 30px rgba(26, 21, 16, 0.45));
}
.final-cta__sabr img {
width: clamp(180px, 22vw, 260px);
height: auto;
animation: sabr-gentle-float 5s ease-in-out infinite;
}
.final-cta__reassurance {
margin-top: var(--space-4);
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2) var(--space-4);
}
.final-cta__reassurance span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.final-cta__reassurance span::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent-primary);
}
.final-cta__reassurance span:first-child::before {
display: none;
}
/* ============================================
Blog
============================================ */
.blog-page {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-12));
padding-bottom: var(--space-16);
min-height: 100vh;
}
.blog-hero {
text-align: center;
margin-bottom: var(--space-10);
}
.blog-hero__img {
width: 84px;
height: 84px;
display: block;
margin: 0 auto var(--space-4);
}
.blog-hero h1 {
margin-bottom: var(--space-3);
}
.blog-hero__subtitle {
color: var(--text-secondary);
font-size: var(--text-body);
max-width: 560px;
margin: 0 auto;
}
/* Shared pill tag (featured + cards). align-self stops it stretching to
full width when it sits inside a flex-column card. */
.blog-tag {
display: inline-block;
align-self: flex-start;
width: fit-content;
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-warm);
font-weight: 600;
background: rgba(201, 169, 110, 0.1);
border-radius: 999px;
padding: 4px 12px;
margin-bottom: var(--space-3);
}
/* Featured post */
.blog-featured {
display: block;
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-xl);
padding: clamp(var(--space-6), 4vw, var(--space-10));
max-width: 1080px;
margin: 0 auto var(--space-6);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.blog-featured:hover {
border-color: rgba(201, 169, 110, 0.3);
transform: translateY(-3px);
}
/* Desktop: two columns so a text-only featured card fills its width
intentionally (title left, summary + CTA right) instead of leaving a
large empty space on the right. */
@media (min-width: 760px) {
.blog-featured {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(var(--space-6), 5vw, var(--space-10));
align-items: center;
}
}
.blog-featured__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.6rem, 3.2vw, 2.1rem);
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 0;
}
.blog-featured__aside {
margin-top: var(--space-4);
}
@media (min-width: 760px) {
.blog-featured__aside {
margin-top: 0;
}
}
.blog-featured__excerpt {
color: var(--text-secondary);
font-size: var(--text-body);
line-height: 1.6;
margin-bottom: var(--space-4);
}
.blog-featured__more,
.blog-card__more {
font-size: var(--text-body-sm);
color: var(--text-accent);
font-weight: 600;
}
.blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 760px) {
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6) var(--space-6);
}
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
height: 100%;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.blog-card:hover {
border-color: rgba(201, 169, 110, 0.25);
transform: translateY(-3px);
}
.blog-card__title {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: var(--space-2);
line-height: 1.3;
}
.blog-card__excerpt {
color: var(--text-secondary);
font-size: var(--text-body-sm);
line-height: 1.6;
margin-bottom: var(--space-4);
flex: 1;
}
.blog-card__more {
margin-top: auto;
}
/* Filtered-out or paginated-away cards */
.blog-card.is-hidden,
.blog-featured.is-hidden {
display: none;
}
/* Category filter pills */
.blog-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
max-width: 1080px;
margin: 0 auto var(--space-8);
}
.blog-filter[hidden],
.blog-pagination[hidden] {
display: none;
}
.blog-filter__pill {
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: 600;
color: var(--text-secondary);
background: transparent;
border: 1px solid rgba(201, 169, 110, 0.22);
border-radius: var(--radius-full);
padding: 8px 18px;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.blog-filter__pill:hover {
color: var(--text-primary);
border-color: rgba(201, 169, 110, 0.45);
}
.blog-filter__pill.is-active {
color: var(--bg-primary);
background: var(--accent-primary);
border-color: var(--accent-primary);
}
/* Pagination */
.blog-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-2);
max-width: 1080px;
margin: var(--space-12) auto 0;
}
.blog-pagination__btn {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-3);
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.blog-pagination__btn:hover:not(:disabled):not(.is-active) {
color: var(--text-primary);
border-color: rgba(201, 169, 110, 0.3);
}
.blog-pagination__btn.is-active {
color: var(--bg-primary);
background: var(--accent-primary);
border-color: var(--accent-primary);
cursor: default;
}
.blog-pagination__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Article (single post) */
.article {
padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-10));
padding-bottom: var(--space-16);
}
.article__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-body-sm);
color: var(--text-muted);
margin-bottom: var(--space-6);
}
.article__back:hover {
color: var(--text-accent);
}
.article__tag {
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-warm);
font-weight: 600;
margin-bottom: var(--space-3);
}
.article__title {
font-size: var(--text-h1);
line-height: 1.15;
margin-bottom: var(--space-4);
max-width: 16ch;
}
.article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-caption);
color: var(--text-muted);
margin-bottom: var(--space-8);
}
.article__meta span::before {
content: '·';
margin-right: var(--space-2);
color: var(--text-muted);
}
.article__meta span:first-child::before {
display: none;
}
.article__lede {
font-size: 1.2rem;
line-height: 1.6;
color: var(--text-primary);
margin-bottom: var(--space-6);
max-width: 680px;
}
.article__body {
max-width: 680px;
}
.article__body h2 {
font-size: var(--text-h3);
margin-top: var(--space-10);
margin-bottom: var(--space-3);
line-height: 1.3;
}
.article__body h3 {
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.article__body p {
margin-bottom: var(--space-4);
line-height: 1.75;
color: var(--text-secondary);
}
.article__body ul,
.article__body ol {
margin-bottom: var(--space-4);
padding-left: var(--space-6);
color: var(--text-secondary);
}
.article__body li {
margin-bottom: var(--space-2);
line-height: 1.7;
}
.article__body strong {
color: var(--text-primary);
font-weight: 600;
}
.article__body a {
color: var(--text-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.article__body blockquote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.3rem;
line-height: 1.5;
color: var(--accent-warm);
border-left: 2px solid var(--accent-primary);
padding-left: var(--space-6);
margin: var(--space-6) 0;
max-width: 640px;
}
/* Scripture / source citation under article blockquotes */
.article__body cite {
display: block;
margin-top: var(--space-3);
font-style: normal;
font-family: var(--font-body);
font-size: var(--text-caption);
color: var(--text-muted);
letter-spacing: 0.01em;
}
.article__body cite a {
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Comparison tables (blog) */
.comparison-table-wrapper {
margin: var(--space-8) 0;
max-width: 680px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--border-subtle);
border-radius: var(--radius-lg);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-body-sm);
min-width: 480px;
}
.comparison-table th,
.comparison-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: var(--border-subtle);
vertical-align: top;
line-height: 1.5;
}
.comparison-table thead th {
background: var(--bg-tertiary);
color: var(--text-primary);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-caption);
letter-spacing: 0.02em;
white-space: nowrap;
}
.comparison-table tbody th {
color: var(--text-primary);
font-weight: 600;
font-family: var(--font-body);
}
.comparison-table td {
color: var(--text-secondary);
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
border-bottom: none;
}
.comparison-table .hl {
background: rgba(201, 169, 110, 0.08);
color: var(--text-primary);
}
.comparison-table thead th.hl {
color: var(--text-accent);
}
/* In-article CTA */
.article__cta {
background: var(--bg-secondary);
border: var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-10) 0;
text-align: center;
max-width: 680px;
}
.article__cta h3 {
margin-bottom: var(--space-2);
}
.article__cta p {
color: var(--text-secondary);
font-size: var(--text-body-sm);
margin-bottom: var(--space-4);
}
.article__cta .article__cta-badge img {
width: 180px;
height: auto;
}
/* Related posts at the end of an article */
.article__related {
max-width: 680px;
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: var(--border-subtle);
}
.article__related h2 {
font-size: var(--text-h3);
margin-bottom: var(--space-4);
}
.article__related-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.article__related-link {
color: var(--text-accent);
font-weight: 600;
font-size: var(--text-body-sm);
}
@media (min-width: 768px) {
.article__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
text-align: left;
}
.article__cta-text { flex: 1; }
.article__cta p { margin-bottom: 0; }
.article__cta-badge { flex-shrink: 0; }
}
/* Blog post hero image */
.article__hero { margin: var(--space-6) 0 var(--space-8); }
.article__hero picture { display: block; }
.article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.article__hero-credit { margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--text-muted); text-align: right; }
.article__hero-credit a { color: inherit; text-decoration: underline; }