/* ==========================================================================
SkyBootstrap — Design Tokens
========================================================================== */
:root {
/* Colors */
--color-primary: #4F5CCF;
--color-primary-hover: #3F4FC2;
--color-primary-light: #8B93E0;
--gradient-primary: linear-gradient(135deg, #4F5CCF, #8B93E0);
--gradient-cta: linear-gradient(135deg, #4F5CCF, #3F4FC2);
--color-tint-1: #E9EAFB;
--color-tint-2: #EEF0FF;
--color-tint-3: #C7CBEE;
--color-ink: #111827;
--color-body: #374151;
--color-body-2: #1F2937;
--color-muted: #6B7280;
--color-muted-2: #64748B;
--color-muted-3: #94A3B8;
--color-border: #E5E7EB;
--color-bg: #FFFFFF;
--color-bg-alt: #F8FAFC;
--color-dark: #111827;
--color-dark-2: #1F2937;
--color-dark-3: #283449;
--color-success: #16A34A;
--color-amber: #F59E0B;
--color-sky: #0EA5E9;
/* Typography */
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
--fs-body: 16px;
--fs-small: 14px;
--h1-size: clamp(34px, 4.6vw, 56px);
--h2-size: clamp(28px, 3vw, 40px);
--h2-size-alt: clamp(24px, 2.6vw, 32px);
--h3-size: 30px;
--h4-size: 21px;
/* Radius */
--radius-sm: 5px;
--radius-md: 10px;
--radius-card: 14px;
--radius-card-lg: 18px;
--radius-card-xl: 20px;
--radius-pill: 100px;
/* Layout */
--max-width: 1360px;
--max-width-narrow: 1160px;
--gutter: 32px;
}
/* ==========================================================================
Reset & Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-size: var(--fs-body);
font-family: var(--font-family);
background: var(--color-bg-alt);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
/*
* Twenty Twenty-Five (parent theme) sets its own global font family
* (Manrope) and a regular (400) heading weight via theme.json. WordPress
* prints that global-styles block late in , sometimes after our own
* stylesheet, so a plain `body{font-family}` rule of ours isn't guaranteed
* to win on source order alone. These two rules pin our design regardless
* of print order: a higher-specificity body selector for the font, and the
* .wp-block-heading class (which every Heading block always has) for
* weight — a class always beats the parent's plain h1..h6 element rule.
*/
html body {
font-family: var(--font-family) !important;
}
.wp-block-heading {
font-weight: 800;
}
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover { color: var(--color-primary-hover); }
button { font-family: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/*
* Parent theme's global rule is `:where(.wp-site-blocks *:focus)`, which
* matches on ANY focus (including a plain mouse click), not just
* :focus-visible — and it doesn't set outline-color, so it renders in
* the element's own text color (near-black for our dark text), showing
* as a dark bar under custom buttons after clicking. Give our own
* interactive controls an explicit brand-colored outline on :focus too,
* so it wins regardless of input method.
*/
.faq-item__question:focus,
.tab-btn:focus,
.testimonial__arrow:focus,
.toc__toggle:focus,
.docs-panel__articles-list a:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/*
* WordPress core CSS adds margin-top between adjacent Group blocks
* (block-flow vertical rhythm: `.wp-block-group + .wp-block-group`).
* That's meant for normal stacked content, but it also matches Group
* blocks used as CSS-grid/flex items (like our repeating cards), pushing
* every card except the first one down and breaking row alignment. Our
* own components always control spacing themselves via `gap`, so this
* default is never wanted — reset it globally.
*/
.wp-block-group + .wp-block-group {
margin-top: 0 !important;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--max-width-narrow); }
.eyebrow {
color: var(--color-primary);
font-weight: 700;
font-size: var(--fs-body);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 10px;
}
.eyebrow--light { color: var(--color-primary-light); }
.section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 48px;
}
.section-head h2 { font-size: var(--h2-size); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; }
.section-head p { color: var(--color-muted-2); font-size: var(--fs-body); margin: 0; }
/* ==========================================================================
Buttons
========================================================================== */
/*
* Button rules are written twice on purpose:
* 1) .btn-primary — for a plain
* 2) .wp-block-button.btn-primary .wp-block-button__link
* — for a WordPress core Button block, where
* the className always lands on the outer
* .wp-block-button wrapper, never on the
* actual visible/clickable itself.
* Without the second form, core Button blocks silently fall back to
* Twenty Twenty-Five's default pill-shaped black button (set in the
* parent theme's theme.json) instead of our design.
*/
.btn,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 26px;
border-radius: var(--radius-sm) !important;
font-weight: 700;
font-size: var(--fs-body);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
text-decoration: none;
}
.btn-primary,
.wp-block-button.btn-primary .wp-block-button__link {
background: var(--color-primary) !important; color: #fff !important;
}
.btn-primary:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover {
background: var(--color-primary-hover) !important; color: #fff !important; transform: translateY(-2px);
}
.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link {
background: #fff !important; border-color: var(--color-border) !important; color: var(--color-ink) !important;
}
.btn-secondary:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover {
background: var(--color-bg-alt) !important; border-color: #D1D5DB !important; color: var(--color-ink) !important; transform: translateY(-2px);
}
.btn-white,
.wp-block-button.btn-white .wp-block-button__link {
background: #fff !important; color: var(--color-primary) !important;
}
.btn-white:hover,
.wp-block-button.btn-white .wp-block-button__link:hover {
transform: translateY(-2px); color: var(--color-primary) !important;
}
.btn-ghost-light,
.wp-block-button.btn-ghost-light .wp-block-button__link {
background: transparent !important; border-color: rgba(255,255,255,0.4) !important; color: #fff !important;
}
.btn-ghost-light:hover,
.wp-block-button.btn-ghost-light .wp-block-button__link:hover {
background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.7) !important; color: #fff !important;
}
.btn-sm,
.wp-block-button .wp-block-button__link.btn-sm {
padding: 9px 14px; font-size: var(--fs-body); border-radius: var(--radius-sm) !important;
}
/* ==========================================================================
Header / Nav
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 16px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: nowrap;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
flex-shrink: 0;
color: var(--color-ink);
}
.logo:hover { color: var(--color-ink); }
.logo__mark {
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--gradient-primary);
}
.main-nav {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
overflow-x: auto;
flex: 1 1 auto;
min-width: 0;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: linear-gradient(to right, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
color: var(--color-body);
font-size: var(--fs-body);
font-weight: 500;
white-space: nowrap;
transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--color-ink); }
.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
flex-wrap: nowrap;
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: 88px var(--gutter) 60px;
display: flex;
gap: 40px;
align-items: center;
flex-wrap: wrap;
}
.hero__content { flex: 1 1 440px; min-width: 300px; }
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-tint-1);
color: var(--color-primary);
padding: 7px 14px;
border-radius: var(--radius-pill);
font-size: var(--fs-body);
font-weight: 600;
margin-bottom: 22px;
}
.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.hero__content h1 {
font-size: var(--h1-size);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 800;
margin: 0 0 22px;
color: var(--color-ink);
}
.hero__content > p {
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-muted-2);
max-width: 500px;
margin: 0 0 34px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.hero__stat-value { font-size: 24px; font-weight: 800; }
.hero__stat-value--green { color: var(--color-success); }
.hero__stat-value--sky { color: var(--color-sky); }
.hero__stat-value--amber { color: var(--color-amber); }
.hero__stat-label { font-size: var(--fs-body); color: var(--color-muted-2); margin-top: 2px; }
/* Hero floating mockup graphic */
.hero__visual {
flex: 1 1 420px;
min-width: 300px;
max-width: 460px;
position: relative;
height: 420px;
}
.hero-card {
position: absolute;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.07);
}
.hero-card--plugins { top: 0; left: 0; width: 220px; padding: 16px; }
.hero-card__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 12px; letter-spacing: 0.02em; }
.plugin-row { display: flex; align-items: center; justify-content: space-between; }
.plugin-row + .plugin-row { margin-top: 9px; }
.plugin-row__label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 600; }
.plugin-row__dot { width: 8px; height: 8px; border-radius: 2px; }
.toggle { width: 30px; height: 16px; border-radius: var(--radius-pill); background: var(--color-primary); position: relative; }
.toggle span { width: 12px; height: 12px; border-radius: 50%; background: #fff; position: absolute; top: 2px; right: 2px; }
.toggle.is-off { background: var(--color-border); }
.toggle.is-off span { left: 2px; right: auto; }
.hero-card--update {
top: 14px; right: 0;
border-radius: var(--radius-md);
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
padding: 9px 14px;
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-body); font-weight: 600; color: var(--color-ink);
}
.hero-card--update .check {
width: 16px; height: 16px; border-radius: 50%; background: var(--color-success);
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.hero-card--editor {
top: 70px; right: 0; width: 250px;
box-shadow: 0 14px 32px rgba(17, 24, 39, 0.08);
overflow: hidden;
}
.hero-card--editor__bar {
display: flex; align-items: center; gap: 6px;
padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt);
}
.hero-card--editor__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.hero-card--editor__bar em { font-style: normal; font-size: var(--fs-body); color: var(--color-muted-2); margin-left: 6px; font-weight: 600; }
.hero-card--editor__body { padding: 14px; }
.skeleton-line { height: 6px; background: var(--color-border); border-radius: 3px; margin-bottom: 6px; }
.skeleton-line--title { height: 9px; width: 70%; background: var(--color-ink); opacity: 0.85; margin-bottom: 10px; }
.skeleton-line--w95 { width: 95%; }
.skeleton-line--w88 { width: 88%; }
.skeleton-line--w60 { width: 60%; margin-bottom: 12px; }
.skeleton-blocks { display: flex; gap: 6px; }
.skeleton-blocks div { flex: 1; height: 36px; background: var(--color-tint-1); border-radius: 8px; }
.hero-card--revenue { bottom: 0; left: 20px; width: 210px; padding: 16px; }
.hero-card--revenue__value { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.hero-card--revenue__value span { color: var(--color-success); font-size: var(--fs-body); font-weight: 700; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.mini-bars div { flex: 1; background: var(--color-tint-1); border-radius: 3px; }
.mini-bars div.is-active { background: var(--color-primary); }
.hero-card--score { bottom: 10px; right: 10px; width: 140px; padding: 14px; text-align: center; }
.score-ring {
width: 56px; height: 56px; border-radius: 50%;
background: conic-gradient(var(--color-success) 0 92%, var(--color-border) 92% 100%);
display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
}
.score-ring span {
width: 42px; height: 42px; border-radius: 50%; background: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body);
}
.hero-card--score__label { font-size: var(--fs-body); color: var(--color-muted-2); font-weight: 600; }
/* ==========================================================================
Trust logos strip
========================================================================== */
.trust-strip {
max-width: var(--max-width);
margin: 0 auto;
padding: 40px var(--gutter);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.trust-strip__label {
text-align: center; font-size: var(--fs-body); font-weight: 700;
letter-spacing: 0.06em; color: var(--color-muted-2); text-transform: uppercase; margin-bottom: 22px;
}
.trust-strip__logos { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-strip__logos div {
font-size: var(--fs-body); font-weight: 800; color: var(--color-muted-2);
filter: grayscale(1); transition: color 0.15s ease, filter 0.15s ease;
}
.trust-strip__logos div:hover { color: var(--color-primary); filter: grayscale(0); }
/* ==========================================================================
Section spacing
========================================================================== */
.section { max-width: var(--max-width); margin: 0 auto; padding: 96px var(--gutter) 40px; }
/* ==========================================================================
Products grid
========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.product-card {
display: block; background: #fff; border: 1px solid var(--color-border);
border-radius: 16px; padding: 26px; color: var(--color-ink);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--color-primary); color: var(--color-ink); }
.product-card__icon {
width: 44px; height: 44px; border-radius: 12px; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); margin-bottom: 16px;
}
.product-card__name { font-weight: 700; font-size: var(--fs-body); margin-bottom: 8px; }
.product-card__desc { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.55; margin-bottom: 16px; }
.product-card__features { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.product-card__features div,
.product-card__features p {
display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--color-body); margin: 0;
}
.product-card__features span { color: var(--color-success); font-weight: 700; }
.product-card__footer { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.product-card__meta { font-size: var(--fs-body); color: var(--color-muted-2); }
.product-card__cta { color: var(--color-primary); font-weight: 700; font-size: var(--fs-body); }
/* ==========================================================================
Category tabs
========================================================================== */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.tab-btn {
padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
background: #fff; color: var(--color-body); font-size: var(--fs-body); font-weight: 600;
cursor: pointer; transition: all 0.15s ease;
}
.tab-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tab-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.tab-btn.is-active:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tab-panel {
background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card-xl);
padding: 44px; display: none; gap: 40px; align-items: center; flex-wrap: wrap;
}
.tab-panel.is-active { display: flex; }
.tab-panel__info { flex: 1 1 280px; min-width: 240px; }
.tab-panel__icon {
width: 52px; height: 52px; border-radius: 14px; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); margin-bottom: 18px;
}
.tab-panel__info h3 { font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.tab-panel__info p { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 20px; }
.tab-panel__info a { color: var(--color-primary); font-weight: 700; font-size: var(--fs-body); }
.tab-panel__features {
flex: 1 1 320px; min-width: 280px; background: var(--color-bg-alt);
border-radius: 14px; padding: 22px; border: 1px solid var(--color-border);
}
.tab-panel__features-label { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 12px; }
.tab-panel__features-list { display: flex; flex-direction: column; gap: 10px; }
.tab-panel__features-list div {
display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--color-ink);
background: #fff; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border);
}
.tab-panel__features-list span { color: var(--color-primary); }
/* ==========================================================================
Why us grid
========================================================================== */
.why-us-head { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 36px; }
.why-us-head__title { flex: 1 1 320px; min-width: 260px; }
.why-us-head__title h2 { font-size: var(--h2-size); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.why-us-head__desc { flex: 1 1 320px; min-width: 260px; display: flex; align-items: flex-end; }
.why-us-head__desc p { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.why-us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.why-us-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; }
.why-us-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.why-us-card__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 700; flex-shrink: 0; }
.why-us-card__title { font-weight: 700; font-size: var(--fs-body); }
.why-us-card__desc { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.5; }
/* ==========================================================================
Feature showcase (alternating rows)
========================================================================== */
.showcase { max-width: var(--max-width); margin: 0 auto; padding: 96px var(--gutter) 40px; display: flex; flex-direction: column; gap: 90px; }
.showcase-row { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.showcase-row--reverse { flex-wrap: wrap-reverse; }
.showcase-row__mockup { flex: 1 1 420px; min-width: 300px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card-lg); padding: 28px; }
.showcase-row__text { flex: 1 1 380px; min-width: 300px; }
.showcase-row__text h3 { font-size: var(--h3-size); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; }
.showcase-row__text p { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.65; margin: 0; }
.mockup-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.mockup-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.mockup-icon-lib { display: flex; gap: 14px; }
.mockup-icon-lib__panel { width: 180px; flex-shrink: 0; background: var(--color-bg-alt); border-radius: 10px; padding: 14px; border: 1px solid var(--color-border); }
.mockup-icon-lib__panel-label { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 10px; }
.icon-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.icon-swatch-grid div { aspect-ratio: 1; border-radius: 6px; }
.mockup-icon-lib__content { flex: 1; }
.perf-report-label { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 14px; }
.perf-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.perf-report-grid > div { background: var(--color-bg-alt); border-radius: 10px; padding: 14px; text-align: center; }
.perf-report-grid .value { font-size: 22px; font-weight: 800; }
.perf-report-grid .value--green { color: var(--color-success); }
.perf-report-grid .value--primary { color: var(--color-primary); }
.perf-report-grid .label { font-size: var(--fs-body); color: var(--color-muted-2); }
/* ==========================================================================
Dark services CTA banner
========================================================================== */
.services-cta-wrap { max-width: var(--max-width); margin: 0 auto; padding: 20px var(--gutter) 90px; }
.services-cta {
background: var(--color-dark); border-radius: var(--radius-card-xl); padding: 48px;
display: flex; gap: 36px; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.services-cta__text { flex: 1 1 340px; min-width: 280px; }
.services-cta__text h2 { color: #fff; font-size: var(--h2-size-alt); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.services-cta__text p { color: var(--color-muted-3); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 22px; max-width: 440px; }
.services-cta__grid { flex: 1 1 380px; min-width: 280px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.services-cta__grid a { background: var(--color-dark-2); border-radius: 12px; padding: 16px; transition: background 0.15s ease; display: block; }
.services-cta__grid a:hover { background: var(--color-dark-3); }
.services-cta__grid .title { color: #fff; font-weight: 700; font-size: var(--fs-body); margin-bottom: 4px; }
.services-cta__grid .sub { color: var(--color-muted-3); font-size: var(--fs-body); }
/* ==========================================================================
Integrations
========================================================================== */
.integrations-strip { max-width: var(--max-width); margin: 0 auto; padding: 60px var(--gutter); }
.integrations-strip__label { text-align: center; font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.06em; color: var(--color-muted-2); text-transform: uppercase; margin-bottom: 26px; }
.integrations-strip__list { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.integrations-strip__list div {
display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: #fff; font-size: var(--fs-body); font-weight: 600; color: var(--color-body);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.integrations-strip__list div:hover { border-color: var(--color-primary); }
.integrations-strip__list span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
/* ==========================================================================
Stat counters (dark)
========================================================================== */
.stats-band { background: var(--color-dark); padding: 80px var(--gutter); }
.stats-band__grid {
max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px; text-align: center;
}
.stat-value { font-size: 38px; font-weight: 800; color: #fff; }
.stat-label { color: var(--color-muted-3); font-size: var(--fs-body); margin-top: 6px; }
/* ==========================================================================
Testimonial carousel
========================================================================== */
.testimonial { max-width: 760px; margin: 0 auto; padding: 96px var(--gutter) 40px; text-align: center; }
.testimonial__quote { font-size: 26px; line-height: 1.5; color: var(--color-ink); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 32px; }
.testimonial__person { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testimonial__avatar {
width: 40px; height: 40px; border-radius: 50%; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); flex-shrink: 0;
}
.testimonial__meta { text-align: left; }
.testimonial__name { font-weight: 700; font-size: var(--fs-body); }
.testimonial__role { color: var(--color-muted-2); font-size: var(--fs-body); }
.testimonial__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.testimonial__arrow {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff;
font-size: var(--fs-body); cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center;
}
.testimonial__arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.testimonial__dots { display: flex; gap: 7px; }
.testimonial__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background 0.15s ease; }
.testimonial__dots span.is-active { background: var(--color-primary); }
/* ==========================================================================
Documentation
========================================================================== */
.docs-panel {
background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card-xl);
padding: 48px; display: flex; gap: 48px; flex-wrap: wrap;
}
.docs-panel__info { flex: 1 1 320px; min-width: 280px; }
.docs-panel__info h2 { font-size: var(--h3-size); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.docs-panel__info p { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 22px; }
.docs-search {
display: flex; align-items: center; gap: 10px; background: var(--color-bg-alt); border: 1px solid var(--color-border);
border-radius: 12px; padding: 14px 16px; color: var(--color-muted-2); font-size: var(--fs-body);
}
.docs-panel__articles { flex: 1 1 380px; min-width: 300px; }
.docs-panel__articles-label { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 14px; }
.docs-panel__articles-list { display: flex; flex-direction: column; gap: 2px; }
.docs-panel__articles-list a {
display: flex; align-items: center; justify-content: space-between; padding: 13px 10px; border-bottom: 1px solid var(--color-border);
color: var(--color-ink); font-size: var(--fs-body); font-weight: 500; border-radius: 8px;
transition: background 0.15s ease, padding-left 0.15s ease;
}
.docs-panel__articles-list a:hover { background: var(--color-bg-alt); padding-left: 16px; color: var(--color-ink); }
.docs-panel__articles-list a span { color: var(--color-primary); }
/* ==========================================================================
Blog
========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.blog-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; color: var(--color-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-4px); color: var(--color-ink); }
.blog-card__image {
height: 150px; background: repeating-linear-gradient(135deg, var(--color-tint-1), var(--color-tint-1) 10px, var(--color-bg-alt) 10px, var(--color-bg-alt) 20px);
display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); color: var(--color-primary); font-family: monospace;
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.blog-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #fff; color: var(--color-body);
font-size: var(--fs-body); font-weight: 600; transition: all 0.15s ease;
}
.blog-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-pagination .page-numbers.dots { border: none; background: none; }
.blog-card__body { padding: 20px; }
.blog-card__meta { color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.blog-card__title { font-weight: 700; font-size: var(--fs-body); margin-bottom: 8px; line-height: 1.35; }
.blog-card__excerpt { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.55; }
/* ==========================================================================
Free resources banner
========================================================================== */
.resources-wrap { max-width: var(--max-width); margin: 0 auto; padding: 70px var(--gutter) 40px; }
.resources-panel {
background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card-xl); padding: 44px;
display: flex; gap: 36px; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.resources-panel__text { flex: 1 1 340px; min-width: 280px; }
.resources-panel__text h2 { font-size: var(--h2-size-alt); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.resources-panel__text p { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 22px; max-width: 440px; }
.resources-panel__grid { flex: 1 1 380px; min-width: 280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.resources-panel__grid > div { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.resources-panel__thumb { height: 64px; background: repeating-linear-gradient(135deg, var(--color-tint-1), var(--color-tint-1) 8px, var(--color-bg-alt) 8px, var(--color-bg-alt) 16px); }
.resources-panel__grid .label { padding: 8px 10px; font-size: var(--fs-body); font-weight: 600; }
/* ==========================================================================
Pricing
========================================================================== */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.pricing-card {
background: #fff; border-radius: var(--radius-card-lg); padding: 28px; border: 1px solid var(--color-border);
position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--color-tint-3); }
.pricing-card--featured { border: 2px solid var(--color-primary); }
.pricing-card--featured:hover { transform: none; border-color: var(--color-primary); }
.pricing-card__badge {
display: inline-block; background: var(--color-tint-1); color: var(--color-primary); font-size: var(--fs-body);
font-weight: 800; letter-spacing: 0.04em; padding: 5px 10px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.pricing-card__name { font-weight: 700; font-size: var(--fs-body); margin-bottom: 8px; }
.pricing-card__price { margin-bottom: 4px; }
.pricing-card__price .amount { font-size: 34px; font-weight: 800; }
.pricing-card__price .period { color: var(--color-muted-2); font-size: var(--fs-body); }
.pricing-card__sites { color: var(--color-muted-2); font-size: var(--fs-body); margin-bottom: 20px; }
.wp-block-buttons:has(> .wp-block-button.pricing-card__cta) { display: block; }
.wp-block-button.pricing-card__cta { display: block; width: 100%; }
.pricing-card__cta,
.wp-block-button.pricing-card__cta .wp-block-button__link {
display: block; width: 100%; text-align: center; padding: 12px; border-radius: var(--radius-sm) !important; font-weight: 700; font-size: var(--fs-body);
background: var(--color-bg-alt) !important; color: var(--color-ink) !important; border: 1px solid var(--color-border); transition: all 0.15s ease;
}
.pricing-card__cta:hover,
.wp-block-button.pricing-card__cta .wp-block-button__link:hover {
background: var(--color-tint-1) !important; border-color: var(--color-primary); color: var(--color-primary) !important;
}
.pricing-card--featured .pricing-card__cta,
.pricing-card--featured .wp-block-button.pricing-card__cta .wp-block-button__link {
background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary);
}
.pricing-card--featured .pricing-card__cta:hover,
.pricing-card--featured .wp-block-button.pricing-card__cta .wp-block-button__link:hover {
background: var(--color-primary-hover) !important; border-color: var(--color-primary-hover); color: #fff !important;
}
.pricing-card__features { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pricing-card__features div { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--color-body); }
.pricing-card__features span { color: var(--color-success); font-weight: 700; }
/* ==========================================================================
FAQ accordion
========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; transition: border-color 0.15s ease; }
.faq-item:hover { border-color: var(--color-tint-3); }
.faq-item__question {
width: 100%; text-align: left; padding: 18px 22px; background: none; border: none;
display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
font-size: var(--fs-body); font-weight: 700; color: var(--color-ink); transition: background 0.15s ease;
}
.faq-item__question:hover { background: var(--color-bg-alt); }
.faq-item__question .icon { color: var(--color-primary); font-size: var(--fs-body); flex-shrink: 0; }
.faq-item__answer { padding: 0 22px 20px; color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.6; display: none; }
.faq-item.is-open .faq-item__answer { display: block; }
/* ==========================================================================
Final CTA
========================================================================== */
.final-cta-wrap { margin: 96px var(--gutter); max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.final-cta {
background: var(--gradient-cta); border-radius: 24px; padding: 70px 40px; text-align: center;
position: relative; overflow: hidden;
}
.final-cta::before {
content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
border-radius: 50%; background: rgba(255, 255, 255, 0.08);
}
.final-cta::after {
content: ''; position: absolute; bottom: -80px; left: -40px; width: 260px; height: 260px;
border-radius: 50%; background: rgba(255, 255, 255, 0.06);
}
.final-cta__inner { position: relative; }
.final-cta h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.final-cta p { color: var(--color-tint-1); font-size: var(--fs-body); margin: 0 0 32px; }
.final-cta__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ==========================================================================
Footer
========================================================================== */
.site-footer { background: var(--color-dark); padding: 70px var(--gutter) 30px; color: var(--color-muted-3); }
.footer-grid {
max-width: var(--max-width); margin: 0 auto; display: grid;
grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; margin-bottom: 50px;
}
.footer-brand .logo { color: #fff; font-size: 19px; margin-bottom: 14px; }
.footer-brand .logo__mark { width: 26px; height: 26px; }
.footer-brand p { font-size: var(--fs-body); line-height: 1.6; max-width: 260px; margin: 0 0 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 32px; height: 32px; border-radius: 8px; background: var(--color-dark-2); display: flex;
align-items: center; justify-content: center; font-size: var(--fs-body); color: #fff; transition: background 0.15s ease;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }
.footer-col-title { color: #fff; font-weight: 700; font-size: var(--fs-body); margin-bottom: 16px; }
.footer-col-links { display: flex; flex-direction: column; gap: 11px; font-size: var(--fs-body); }
.footer-col-links a { color: var(--color-muted-3); }
.footer-col-links a:hover { color: #fff; }
.footer-bottom {
max-width: var(--max-width); margin: 0 auto; padding-top: 26px; border-top: 1px solid var(--color-dark-2);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--fs-body);
}
.footer-bottom__legal { display: flex; gap: 20px; }
.footer-bottom__legal a { color: var(--color-muted-3); }
.footer-bottom__legal a:hover { color: #fff; }
/* ==========================================================================
Waitlist / newsletter form
========================================================================== */
.waitlist {
background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card-xl);
padding: 44px; text-align: center; max-width: 600px; margin: 0 auto;
}
.waitlist__text h3 { font-size: var(--h3-size); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.waitlist__text p { color: var(--color-muted-2); font-size: var(--fs-body); margin: 0 0 24px; }
.waitlist__fields { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.waitlist__input {
flex: 1 1 260px; min-width: 220px; padding: 13px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--color-border); font-size: var(--fs-body); font-family: var(--font-family);
}
.waitlist__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.waitlist__success { color: var(--color-success); font-weight: 600; font-size: var(--fs-body); }
/* ==========================================================================
Blog archive (home.html)
========================================================================== */
.blog-hero { max-width: var(--max-width); margin: 0 auto; padding: 56px var(--gutter) 8px; }
.blog-hero h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 760px; }
.blog-hero p { color: var(--color-body); font-size: 18px; line-height: 1.6; max-width: 640px; margin: 0; }
.category-pills { max-width: var(--max-width); margin: 0 auto; padding: 28px var(--gutter) 0; }
.category-pills-list { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.category-pills-list li { display: inline-block; }
.category-pills-list a {
display: inline-block; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
background: #fff; color: var(--color-body); font-size: var(--fs-body); font-weight: 600; transition: all 0.15s ease;
}
.category-pills-list a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.category-pills-list li.current-cat a,
.category-pills-list a.is-active {
background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.featured-post-wrap { max-width: var(--max-width); margin: 0 auto; padding: 28px var(--gutter) 0; }
.featured-post {
display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--color-border); border-radius: 16px;
overflow: hidden; color: var(--color-ink); transition: border-color 0.15s ease;
}
.featured-post:hover { border-color: var(--color-tint-3); color: var(--color-ink); }
.featured-post__visual {
background: var(--gradient-primary); padding: 48px; display: flex; flex-direction: column; justify-content: center;
gap: 16px; min-height: 280px; color: #fff;
}
.featured-post__badge {
align-self: flex-start; background: rgba(255,255,255,0.18); color: #fff; font-weight: 700; font-size: 13px;
letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-sm);
}
.featured-post__visual h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.25; }
.featured-post__visual p { color: var(--color-tint-1); font-size: 18px; line-height: 1.6; margin: 0; }
.featured-post__info { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.featured-post__info p { color: var(--color-body); font-size: 18px; line-height: 1.65; margin: 0; }
.featured-post__cta { color: var(--color-primary); font-weight: 700; font-size: 18px; }
.newsletter-banner { max-width: var(--max-width); margin: 40px auto 90px; padding: 0 var(--gutter); }
.newsletter-banner__inner { background: var(--color-dark); border-radius: var(--radius-card-xl); padding: 56px 40px; text-align: center; }
.newsletter-banner h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.newsletter-banner p { color: var(--color-muted-3); font-size: 18px; margin: 0 0 26px; max-width: 480px; margin-left: auto; margin-right: auto; }
.newsletter-banner .waitlist__fields { max-width: 440px; margin: 0 auto; }
.newsletter-banner .waitlist__input { background: var(--color-dark-2); border-color: var(--color-body); color: #fff; }
.newsletter-banner .waitlist__success { color: var(--color-primary-light); }
/* ==========================================================================
Single blog post
========================================================================== */
.post-layout { max-width: var(--max-width-narrow); margin: 0 auto; padding: 56px var(--gutter) 40px; display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
.post-layout__article { flex: 1 1 560px; min-width: 280px; }
.post-layout__article h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.post-layout__meta { color: var(--color-muted-2); font-size: var(--fs-body); margin-bottom: 32px; }
.post-layout__article .entry-content { font-size: 18px; line-height: 1.75; color: var(--color-body); }
.post-layout__article .entry-content h2 { font-size: 28px; font-weight: 800; margin: 40px 0 16px; }
.post-layout__article .entry-content h3 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
.post-layout__article .entry-content p { margin: 0 0 20px; }
.post-layout__article .entry-content ul, .post-layout__article .entry-content ol { margin: 0 0 20px; padding-left: 24px; list-style: revert; }
.post-layout__article .entry-content img { border-radius: 12px; }
.post-layout__image { margin: 0 0 32px; border-radius: 12px; overflow: hidden; }
.post-layout__image img { width: 100%; height: auto; display: block; }
.post-layout__toc { flex: 0 0 220px; width: 220px; position: sticky; top: 90px; order: -1; }
.post-layout__sidebar { flex: 0 0 300px; width: 300px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.promo-card { background: var(--color-tint-1); border: 1px solid var(--color-tint-3); border-radius: var(--radius-card); padding: 24px; }
.promo-card__label { color: var(--color-primary); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.promo-card__title { font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.promo-card__desc { color: var(--color-body); font-size: var(--fs-body); line-height: 1.5; margin-bottom: 16px; }
.toc { border-left: 2px solid var(--color-border); padding-left: 16px; }
.toc__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
background: none; border: none; padding: 0; margin-bottom: 10px; cursor: pointer; text-align: left;
}
.toc__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-2); }
.toc__icon { font-size: 16px; font-weight: 700; color: var(--color-primary); line-height: 1; flex-shrink: 0; }
.toc__list { display: block; }
.toc.is-collapsed .toc__list { display: none; }
.toc.is-collapsed .toc__toggle { margin-bottom: 0; }
.toc__item { display: block; font-size: var(--fs-body); color: var(--color-body); padding: 6px 0; line-height: 1.4; }
.toc__item:hover { color: var(--color-primary); }
.toc__item--h3 { padding-left: 14px; font-size: 14px; color: var(--color-muted-2); }
/* ==========================================================================
Generic content page (page-generic.html)
========================================================================== */
.page-hero { max-width: 900px; margin: 0 auto; padding: 88px var(--gutter) 50px; text-align: center; }
.page-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 20px; }
.page-hero p { font-size: var(--fs-body); line-height: 1.65; color: var(--color-muted-2); max-width: 620px; margin: 0 auto; }
.page-content { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--gutter) 90px; font-size: 18px; line-height: 1.75; color: var(--color-body); }
.page-content h2 { font-size: 28px; font-weight: 800; margin: 40px 0 16px; }
.page-content h3 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
.page-content ul, .page-content ol { margin: 0 0 20px; padding-left: 24px; list-style: revert; }
.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; text-align: center; margin: 20px 0 60px; }
.about-stats > div { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 22px; }
.about-stats .value { font-size: 26px; font-weight: 800; }
.about-stats .label { color: var(--color-muted-2); font-size: var(--fs-body); margin-top: 4px; }
.about-cta { text-align: center; padding: 0 0 40px; }
.about-cta p { color: var(--color-muted-2); font-size: var(--fs-body); margin: 0 0 18px; }
.about-cta .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ==========================================================================
Service / product single-page hero (back link + icon badge)
========================================================================== */
.entry-hero { max-width: 900px; margin: 0 auto; padding: 80px var(--gutter) 50px; }
.entry-hero__back { color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; display: inline-block; margin-bottom: 18px; }
.entry-hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.entry-hero__icon {
width: 52px; height: 52px; border-radius: 14px; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); flex-shrink: 0;
}
.entry-hero__label { color: var(--color-muted-2); font-size: var(--fs-body); }
.entry-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 16px; }
.entry-hero p.entry-hero__desc { font-size: var(--fs-body); line-height: 1.6; color: var(--color-muted-2); max-width: 600px; margin: 0 0 30px; }
.entry-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.entry-hero__price { font-weight: 700; font-size: var(--fs-body); color: var(--color-ink); }
/* ==========================================================================
Product hero (icon badge + text | icon-library mockup panel)
========================================================================== */
.product-hero { max-width: var(--max-width); margin: 0 auto; padding: 80px var(--gutter) 50px; display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.product-hero__text { flex: 1 1 480px; min-width: 320px; }
.product-hero__back { color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; display: inline-block; margin-bottom: 4px; }
.product-hero__meta { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px; }
.product-hero__icon {
width: 52px; height: 52px; border-radius: 14px; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); flex-shrink: 0;
}
.product-hero__label { color: var(--color-muted-2); font-size: var(--fs-body); }
.product-hero__text h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 18px; }
.product-hero__desc { font-size: var(--fs-body); line-height: 1.6; color: var(--color-muted-2); max-width: 520px; margin: 0 0 30px; }
.product-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.product-hero__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.product-hero__stats .value { font-size: 22px; font-weight: 800; }
.product-hero__stats .label { font-size: var(--fs-body); color: var(--color-muted-2); }
.product-hero__mockup { flex: 1 1 420px; min-width: 300px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 26px; }
.product-hero__mockup-label { font-size: var(--fs-body); font-weight: 700; color: var(--color-muted-2); margin-bottom: 14px; }
.product-hero__mockup-search {
display: flex; align-items: center; gap: 8px; background: var(--color-bg-alt); border: 1px solid var(--color-border);
border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; color: var(--color-muted-2); font-size: var(--fs-body);
}
.product-hero__mockup-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.product-hero__mockup-grid div { aspect-ratio: 1; border-radius: 8px; }
/* ==========================================================================
Unlock More / Pro highlights grid
========================================================================== */
.unlock-pro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.unlock-pro-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; }
.unlock-pro-card--pro { border: 1.5px solid var(--color-primary); background: var(--color-tint-1); }
.unlock-pro-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.unlock-pro-card__title { font-weight: 700; font-size: var(--fs-body); }
.unlock-pro-card__badge {
background: var(--color-primary); color: #fff; font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.unlock-pro-card__desc { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.5; }
/* ==========================================================================
Free resource single page (breadcrumb, badge, stats, preview gallery)
========================================================================== */
.resource-breadcrumb { max-width: var(--max-width-narrow); margin: 0 auto; padding: 20px var(--gutter) 0; font-size: 15px; color: var(--color-muted-2); }
.resource-breadcrumb a { color: var(--color-muted-2); }
.resource-hero { max-width: var(--max-width-narrow); margin: 0 auto; padding: 24px var(--gutter) 0; }
.resource-hero__badge {
display: inline-flex; align-items: center; gap: 8px; background: var(--color-tint-1); color: var(--color-primary);
padding: 7px 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; margin-bottom: 18px;
}
.resource-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; }
.resource-hero__desc { font-size: 18px; line-height: 1.65; color: var(--color-body); margin: 0 0 26px; max-width: 480px; }
.resource-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.resource-hero__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.resource-hero__stats .value { font-weight: 800; font-size: 20px; }
.resource-hero__stats .label { color: var(--color-muted-2); font-size: 15px; }
.preview-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.preview-gallery__shot {
width: 100%; height: 220px; border-radius: 12px;
background: repeating-linear-gradient(135deg, var(--color-tint-1), var(--color-tint-1) 10px, var(--color-bg-alt) 10px, var(--color-bg-alt) 20px);
}
/* ==========================================================================
Hub pages (Services archive, Free Resources archive)
========================================================================== */
.hub-hero { max-width: 1000px; margin: 0 auto; padding: 88px var(--gutter) 50px; text-align: center; }
.hub-hero__badge {
display: inline-flex; align-items: center; gap: 8px; background: var(--color-tint-1); color: var(--color-primary);
padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--fs-body); font-weight: 600; margin-bottom: 20px;
}
.hub-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 18px; }
.hub-hero p { font-size: var(--fs-body); line-height: 1.6; color: var(--color-muted-2); max-width: 620px; margin: 0 auto 32px; }
.hub-hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.service-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
.service-card__icon {
width: 44px; height: 44px; border-radius: 12px; background: var(--color-tint-1); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); margin-bottom: 16px;
}
.service-card__name { font-weight: 700; font-size: var(--fs-body); margin-bottom: 8px; }
.service-card__desc { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.55; margin-bottom: 16px; flex: 1; }
.service-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--color-border); }
.service-card__price { font-weight: 700; font-size: var(--fs-body); color: var(--color-ink); }
.service-card__cta { color: var(--color-primary); font-weight: 700; font-size: var(--fs-body); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.resource-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; display: block; color: var(--color-ink); }
.resource-card:hover { color: var(--color-ink); }
.resource-card__thumb {
height: 160px;
background: repeating-linear-gradient(135deg, var(--color-tint-1), var(--color-tint-1) 10px, var(--color-bg-alt) 10px, var(--color-bg-alt) 20px);
}
.resource-card__body { padding: 20px; }
.resource-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.resource-card__name { font-weight: 700; font-size: var(--fs-body); }
.resource-card__badge { background: var(--color-tint-1); color: var(--color-primary); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.resource-card__desc { color: var(--color-muted-2); font-size: var(--fs-body); line-height: 1.55; margin-bottom: 18px; }
.resource-card__cta {
display: block; text-align: center; padding: 11px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-body);
background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-ink); transition: all 0.15s ease;
}
.resource-card__cta:hover { background: var(--color-tint-1); border-color: var(--color-primary); color: var(--color-primary); }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 900px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.hero__visual { display: none; }
.featured-post { grid-template-columns: 1fr; }
.post-layout__sidebar { position: static; width: 100%; }
.post-layout__toc {
position: sticky; top: 0; width: 100%; order: 0; z-index: 10;
background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
padding: 12px var(--gutter); margin: 0 calc(var(--gutter) * -1);
}
.post-layout__toc .toc { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
:root { --gutter: 20px; }
}