/* ==========================================================================
BOOSTIO — GLOBAL STYLESHEET · /css/boostio.css · v1.0
--------------------------------------------------------------------------
Instagram growth STRATEGY & guidance for Indian creators and brands.
We advise — we never run, log into, or post from a customer's account.
Visual language: light surfaces + navy ink, rounded 12–16px corners,
soft shadows, generous whitespace, ONE clear CTA per section.
CONTENTS
────────────────────────────────────────────────────────────
00. Fonts (Google Fonts import)
01. Design tokens — colour ramps, gradients, type, spacing,
radius, shadows, z-index, motion
02. Reset & base
03. Typography
04. Layout — container, section, grid helpers
05. Accessibility — skip link, focus rings, reduced motion
06. Buttons
07. Cards
08. Badges & chips
09. Site header & navigation (sticky + mobile hamburger)
10. Site footer
11. Component — section heading
12. Component — plan card (pricing)
13. Component — mechanism strip (3 steps)
14. Component — trust badge ("No password. No account control.")
15. Component — FAQ accordion
16. Component — testimonial card
17. Component — stat block
18. Utilities
────────────────────────────────────────────────────────────
BRAND RULES BAKED INTO THIS FILE
• --gradient-brand goes on AT MOST ONE primary element per screen
(usually the hero/primary CTA). Everything else stays flat.
• No spinning/fake counters, no countdown or urgency timers.
• Growth is always "expected growth" — never a guarantee.
Pair growth claims with: "Results depend on your content
and consistency."
• Currency is INR; numeric UI uses tabular figures (.tabular).
BREAKPOINTS (mobile-first, min-width)
• 640px — sm (large phones / small tablets)
• 768px — md (tablets)
• 1024px — lg (laptops; desktop nav switches on here)
• 1280px — xl (wide desktop)
========================================================================== */
/* ==========================================================================
00. FONTS
--------------------------------------------------------------------------
Headings: "Plus Jakarta Sans" 600/700/800 · Body/UI: "Inter" 400/500/600/700
Performance note: for production you may move this to
+ tags in ; @import here keeps the foundation
self-contained. (Customer/admin portals additionally load "Mukta" for
Hindi UI text — not needed on the marketing site.)
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");
/* ==========================================================================
01. DESIGN TOKENS
========================================================================== */
:root {
/* ---- Violet ramp (primary · brand #5D16EA = 500) ------------------- */
--violet-50: #F5F0FE;
--violet-100: #EADFFD;
--violet-200: #D3BEFA;
--violet-300: #B593F6;
--violet-400: #8E55F0;
--violet-500: #5D16EA; /* brand primary */
--violet-600: #4B11C2; /* links & text on light bg (AA 9.7:1) */
--violet-700: #3B0D99;
--violet-800: #2B0971;
--violet-900: #1D064E;
/* ---- Pink ramp (secondary · brand #F6197C = 500) -------------------- */
--pink-50: #FEF0F6;
--pink-100: #FDDEEC;
--pink-200: #FBBBD8;
--pink-300: #F98BBC;
--pink-400: #F84E9C;
--pink-500: #F6197C; /* brand secondary — large accents/icons only */
--pink-600: #D40E67; /* smallest AA-safe pink for white bg (5.2:1) */
--pink-700: #A80A52;
--pink-800: #7C073C;
--pink-900: #540528;
/* ---- Orange ramp (accent · brand #FE5621 = 500) --------------------- */
--orange-50: #FFF3EE;
--orange-100: #FFE4D9;
--orange-200: #FEC5AF;
--orange-300: #FEA47F;
--orange-400: #FE7B4E;
--orange-500: #FE5621; /* brand accent — icons/graphics, not body text */
--orange-600: #E23D0A;
--orange-700: #B33008; /* smallest AA-safe orange for text (6.3:1) */
--orange-800: #852406;
--orange-900: #5C1904;
/* ---- Navy / ink ramp (brand ink #0A1740 = 700, max ink #000C36 = 900) */
--navy-50: #F2F4F9;
--navy-100: #E4E6EE; /* = brand border colour */
--navy-200: #C6CBDD;
--navy-300: #9AA0B4; /* = brand "muted" — DECORATIVE ONLY on white
(2.6:1 — fails AA for text; see --color-text-muted) */
--navy-400: #667090; /* lightest AA-safe muted text on #FFF/#FAFAFC (4.7:1) */
--navy-500: #3E4A6B;
--navy-600: #232F52;
--navy-700: #0A1740; /* primary ink */
--navy-800: #051238;
--navy-900: #000C36; /* max ink */
/* ---- Semantic (500 = brand token; 700 = AA-safe as text on white) --- */
--success-50: #E7F8F0;
--success-500: #12B76A;
--success-700: #067647;
--warning-50: #FEF4E6;
--warning-500: #F5A524;
--warning-700: #B54708;
--error-50: #FEECEE;
--error-500: #F0384B;
--error-700: #B42318;
/* ---- Neutral surfaces ---------------------------------------------- */
--color-bg: #FFFFFF;
--color-bg-alt: #FAFAFC;
--color-surface: #FFFFFF;
--color-border: var(--navy-100);
/* ---- Text aliases ---------------------------------------------------
Use these instead of raw ramp values wherever possible. */
--color-ink: var(--navy-700);
--color-ink-max: var(--navy-900);
--color-text: var(--navy-700);
--color-text-secondary: var(--navy-500);
--color-text-muted: var(--navy-400); /* AA-safe muted */
--color-decorative: var(--navy-300); /* brand muted — icons, rules, bg art */
--color-primary: var(--violet-500);
--color-link: var(--violet-600);
/* ---- Gradients ------------------------------------------------------
RULE: --gradient-brand appears on AT MOST ONE primary element per
screen (hero headline accent OR the primary CTA — not both).
--gradient-wash is a faint background tint for hero/section bands;
backgrounds don't count against the one-gradient-element budget. */
--gradient-brand: linear-gradient(135deg, #482AF6 0%, #F6197C 62%, #FC3C54 100%);
--gradient-wash: linear-gradient(135deg, #F5F0FE 0%, #FEF0F6 55%, #FFF3EE 100%);
/* ---- Typography ----------------------------------------------------- */
--font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, Arial, sans-serif;
--text-xs: 0.75rem; /* 12px — captions, legal micro-copy */
--text-sm: 0.875rem; /* 14px — secondary UI text */
--text-md: 1rem; /* 16px — body */
--text-lg: 1.125rem; /* 18px — lede on mobile */
--text-xl: 1.25rem; /* 20px — lede on desktop */
/* ---- Spacing scale --------------------------------------------------- */
--space-2xs: 0.25rem; /* 4px */
--space-xs: 0.5rem; /* 8px */
--space-sm: 0.75rem; /* 12px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
--space-4xl: 6rem; /* 96px */
/* ---- Radius ---------------------------------------------------------- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* ---- Shadows --------------------------------------------------------- */
--shadow-soft: 0 4px 16px rgba(10, 23, 64, 0.08); /* brand default */
--shadow-lift: 0 10px 28px rgba(10, 23, 64, 0.12); /* hover states */
/* ---- Chrome ---------------------------------------------------------- */
--header-h: 64px;
--z-header: 100;
--z-skip: 200;
/* ---- Motion ---------------------------------------------------------- */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 150ms var(--ease);
--transition: 220ms var(--ease);
/* ---- Focus ring colour (overridden to white on dark surfaces) ------- */
--color-focus: var(--violet-500);
}
@media (min-width: 1024px) {
:root { --header-h: 72px; }
}
/* ==========================================================================
02. RESET & BASE
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
/* keep anchor targets clear of the sticky header */
scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--font-body);
font-size: var(--text-md);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video { display: block; max-width: 100%; height: auto; }
input,
button,
textarea,
select { font: inherit; color: inherit; }
ul[class],
ol[class] { list-style: none; padding: 0; }
::selection { background: var(--violet-200); color: var(--navy-900); }
/* ==========================================================================
03. TYPOGRAPHY
--------------------------------------------------------------------------
Element selectors are paired with class equivalents (.h1–.h4) so any tag
can carry any size without breaking heading semantics/outline.
========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-ink);
overflow-wrap: break-word;
}
h1, .h1 { font-size: clamp(2.125rem, 1.45rem + 3vw, 3.25rem); } /* 34→52px */
h2, .h2 { font-size: clamp(1.625rem, 1.28rem + 1.7vw, 2.375rem); } /* 26→38px */
h3, .h3 { font-size: clamp(1.25rem, 1.16rem + 0.5vw, 1.5rem); /* 20→24px */
font-weight: 700; line-height: 1.25; }
h4, .h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
p { margin-block: 0 var(--space-md); }
p:last-child { margin-bottom: 0; }
/* Unclassed links in running text stay underlined (colour is never the
only cue); component links opt out via classes. */
a { color: var(--color-link); }
a:where(:not([class])) { text-decoration: underline; text-underline-offset: 3px; }
a:where(:not([class])):hover { color: var(--violet-700); }
strong { font-weight: 600; color: var(--color-ink); }
/* Lede — supporting line under a heading */
.lede {
font-size: clamp(var(--text-lg), 1.05rem + 0.4vw, var(--text-xl));
line-height: 1.55;
color: var(--color-text-secondary);
}
/* Eyebrow — small overline above section headings */
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--violet-600);
}
/* Tabular figures — apply to every number that sits next to other numbers
(prices, stats, tables). Headline stats & plan prices get it by default. */
.tabular { font-variant-numeric: tabular-nums; }
/* ==========================================================================
04. LAYOUT
========================================================================== */
.container {
width: 100%;
max-width: 75rem; /* 1200px incl. padding */
margin-inline: auto;
padding-inline: 20px;
}
.container--narrow { max-width: 50rem; } /* 800px — prose, FAQ, legal pages */
@media (min-width: 640px) { .container { padding-inline: 24px; } }
@media (min-width: 1024px) { .container { padding-inline: 32px; } }
/* Vertical rhythm for page sections. Alternate .section--alt for the
#FAFAFC band; keep ONE clear CTA per section. */
.section { padding-block: clamp(3.5rem, 2.75rem + 3.5vw, 6rem); }
.section--alt { background-color: var(--color-bg-alt); }
.section--wash { background-image: var(--gradient-wash); } /* hero bands */
/* Simple responsive grids */
.grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* ==========================================================================
05. ACCESSIBILITY
========================================================================== */
/* Skip link — first element inside ; visible only when focused */
.skip-link {
position: fixed;
top: var(--space-sm);
left: var(--space-sm);
z-index: var(--z-skip);
padding: var(--space-sm) var(--space-md);
background: var(--navy-700);
color: #FFFFFF;
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
border-radius: var(--radius-sm);
transform: translateY(calc(-100% - var(--space-md) - 8px));
}
.skip-link:focus { transform: none; }
/* Single global focus ring — 3px solid violet (7.6:1 on white), offset so
it reads on filled buttons too. Dark surfaces re-set --color-focus. */
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Respect users who opt out of motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ==========================================================================
06. BUTTONS
--------------------------------------------------------------------------
.btn-primary — gradient fill, white text. THE one gradient element
allowed on a screen. One per screen, max.
.btn-secondary — violet outline on white.
.btn-tertiary — quiet navy text link with arrow.
Sizes: .btn--sm / default / .btn--lg · Width: .btn--block
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-height: 48px; /* comfortable touch target */
padding: 0.75rem 1.5rem;
border: 2px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* -- Primary: brand gradient ------------------------------------------- */
.btn-primary {
background-image: var(--gradient-brand);
color: #FFFFFF;
box-shadow: var(--shadow-soft);
}
.btn-primary:hover:not([disabled]):not(.is-disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
/* -- Secondary: violet outline ------------------------------------------ */
.btn-secondary {
background-color: var(--color-surface);
border-color: var(--violet-500);
color: var(--violet-600);
}
.btn-secondary:hover:not([disabled]):not(.is-disabled) {
background-color: var(--violet-50);
color: var(--violet-700);
}
/* -- Tertiary: quiet text link ------------------------------------------ */
.btn-tertiary {
min-height: 44px;
padding: 0.5rem 0.25rem;
border: 0;
background: transparent;
color: var(--navy-600);
}
.btn-tertiary::after {
content: "\2192"; /* → decorative arrow */
transition: transform var(--transition-fast);
}
.btn-tertiary:hover { color: var(--violet-600); }
.btn-tertiary:hover::after { transform: translateX(4px); }
/* -- Sizes / width ------------------------------------------------------- */
.btn--sm { min-height: 40px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
/* ==========================================================================
07. CARDS
========================================================================== */
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.card--hover { transition: transform var(--transition), box-shadow var(--transition); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* ==========================================================================
08. BADGES & CHIPS
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.badge--violet { background: var(--violet-50); color: var(--violet-700); }
.badge--pink { background: var(--pink-50); color: var(--pink-700); }
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--solid { background: var(--pink-600); color: #FFFFFF; } /* "Most Popular" */
/* Chip — sentence-case metric/label pill (testimonials, filters) */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: 0.375rem 0.875rem;
border-radius: var(--radius-pill);
background: var(--success-50);
color: var(--success-700);
font-size: var(--text-sm);
font-weight: 600;
}
/* ==========================================================================
09. SITE HEADER & NAVIGATION
--------------------------------------------------------------------------
Markup: /partials/header.html · Behaviour: /js/boostio.js
Sticky; gains border + shadow after scroll (.is-scrolled).
Mobile-first: hamburger panel < 1024px, inline nav >= 1024px.
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
border-bottom-color: var(--color-border);
box-shadow: var(--shadow-soft);
}
.site-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: var(--header-h);
}
/* -- Brand (uses the original Boostio logo PNGs in /assets) ------------- */
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
}
.brand__logo { height: 34px; width: auto; } /* lockup: mark + wordmark */
.brand__mark-img { height: 36px; width: 36px; } /* square B mark */
.brand__name {
font-family: var(--font-heading);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.brand__name--light { color: #FFFFFF; }
@media (min-width: 1024px) { .brand__logo { height: 38px; } }
/* -- Hamburger toggle (hidden on desktop) ------------------------------- */
.nav-toggle {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
}
.nav-toggle__bar {
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--navy-700);
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* -- Nav: mobile dropdown panel ----------------------------------------- */
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
background: var(--color-surface);
border-block: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.site-nav.is-open { display: block; animation: navIn 180ms var(--ease); }
@keyframes navIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.site-nav__list { display: grid; gap: 2px; margin: 0; }
.site-nav__link {
display: block;
padding: 0.75rem 0.625rem;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 1rem;
color: var(--navy-600);
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.site-nav__link:hover { background: var(--navy-50); color: var(--violet-600); }
.site-nav__link[aria-current="page"] { color: var(--violet-600); }
.site-nav__actions {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.site-nav__login {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-weight: 600;
color: var(--navy-600);
text-decoration: none;
}
.site-nav__login:hover { color: var(--violet-600); }
/* Lock page scroll while the mobile panel is open (set by JS) */
body.nav-open { overflow: hidden; }
/* -- Nav: desktop -> inline row ---------------------------------------- */
@media (min-width: 1024px) {
.nav-toggle { display: none; }
.site-nav {
position: static;
display: flex;
align-items: center;
gap: var(--space-xl);
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.site-nav__list { display: flex; gap: 2px; }
.site-nav__link { padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
.site-nav__actions {
display: flex;
align-items: center;
gap: var(--space-md);
margin: 0;
padding: 0;
border: 0;
}
body.nav-open { overflow: auto; }
}
/* ==========================================================================
10. SITE FOOTER
--------------------------------------------------------------------------
Markup: /partials/footer.html · Dark navy anchor; focus rings flip white.
========================================================================== */
.site-footer {
--color-focus: #FFFFFF; /* visible focus on dark bg */
background-color: var(--navy-700);
color: var(--navy-200);
font-size: var(--text-sm);
padding-block: var(--space-3xl) var(--space-lg);
margin-top: auto; /* pushes footer down in flex bodies */
}
.site-footer__grid {
display: grid;
gap: var(--space-2xl) var(--space-xl);
margin-bottom: var(--space-2xl);
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.site-footer__tagline {
margin-top: var(--space-md);
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 700;
color: #FFFFFF;
}
.site-footer__made { margin-top: var(--space-xs); color: var(--navy-300); }
.site-footer__title {
margin-bottom: var(--space-md);
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
}
.site-footer__links { display: grid; gap: var(--space-sm); margin: 0; }
.site-footer__link {
color: var(--navy-200);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer__link:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer__contact-line { margin-bottom: var(--space-sm); color: var(--navy-300); }
/* Payment text marks — text only by design (no logo images) */
.site-footer__pay {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
padding-block: var(--space-lg);
border-block: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__pay-label { color: var(--navy-300); margin-right: var(--space-2xs); }
.paymark {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
color: var(--navy-100);
white-space: nowrap;
}
/* Compliance note — required framing lives here on every page */
.site-footer__note {
max-width: 46rem;
margin-block: var(--space-lg) 0;
font-size: var(--text-xs);
line-height: 1.6;
color: var(--navy-300);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-sm) var(--space-lg);
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: var(--text-xs);
color: var(--navy-300);
}
/* ==========================================================================
11. COMPONENT — SECTION HEADING
--------------------------------------------------------------------------
Eyebrow + heading + lede. Centered by default; .section-head--left for
left-aligned layouts. Keep ONE per section.
========================================================================== */
.section-head {
max-width: 42rem;
margin-inline: auto;
margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
text-align: center;
}
.section-head .eyebrow { margin-bottom: var(--space-sm); }
.section-head .lede { margin-top: var(--space-md); }
.section-head--left { margin-inline: 0; text-align: left; }
/* ==========================================================================
12. COMPONENT — PLAN CARD (PRICING)
--------------------------------------------------------------------------
Plans (INR, GST extra): Spark ₹999/mo (₹9,599/yr) · Surge ₹1,999/mo
(₹19,199/yr, Most Popular) · Blaze ₹2,999/mo (₹28,799/yr).
Yearly = 12 × monthly − 20%.
Gradient budget: on a pricing screen, ONLY the popular card's CTA is
.btn-primary; the other cards use .btn-secondary.
========================================================================== */
.plan-grid { align-items: stretch; }
.plan-grid .card { display: flex; flex-direction: column; }
.plan-card { position: relative; }
.plan-card--popular {
border: 2px solid var(--violet-500);
box-shadow: var(--shadow-lift);
}
.plan-card__flag {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.plan-card__name { font-size: 1.25rem; }
.plan-card__for { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-card__price {
display: flex;
align-items: baseline;
gap: var(--space-2xs);
margin-top: var(--space-lg);
}
.plan-card__amount {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.plan-card__period { font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-card__yearly {
margin-top: var(--space-xs);
font-size: var(--text-sm);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.plan-card__gst { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-card__features {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-lg);
}
.plan-card__features li {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.plan-card__features .icon-check { flex: none; margin-top: 1px; }
.plan-card__cta { margin-top: auto; } /* pin CTA to card bottom */
/* Shared footnote under the plan grid — required expectation framing */
.plan-footnote {
margin-top: var(--space-xl);
text-align: center;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ==========================================================================
13. COMPONENT — MECHANISM STRIP (3 STEPS)
--------------------------------------------------------------------------
"How Boostio works" — advice-only mechanism, customer always posts from
their own account.
========================================================================== */
.steps { counter-reset: step; }
.step { padding: var(--space-md) 0; }
.step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-md);
border-radius: var(--radius-pill);
background: var(--violet-50);
border: 1px solid var(--violet-100);
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 800;
color: var(--violet-700);
font-variant-numeric: tabular-nums;
}
.step__title { margin-bottom: var(--space-xs); }
.step__body { font-size: var(--text-sm); color: var(--color-text-secondary); }
/* ==========================================================================
14. COMPONENT — TRUST BADGE
--------------------------------------------------------------------------
"No password. No account control." — appears near every CTA/pricing area.
Pill for inline use; .trust-card for an expanded explainer.
========================================================================== */
.trust-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-soft);
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-ink);
}
.trust-badge svg { flex: none; }
.trust-card {
display: flex;
gap: var(--space-md);
align-items: flex-start;
max-width: 34rem;
}
.trust-card svg { flex: none; margin-top: 2px; }
.trust-card__title { margin-bottom: var(--space-2xs); font-size: 1.0625rem; }
.trust-card__body { font-size: var(--text-sm); color: var(--color-text-secondary); }
/* ==========================================================================
15. COMPONENT — FAQ ACCORDION
--------------------------------------------------------------------------
Markup contract (JS wires ARIA + ids automatically):
Without JS every panel stays open (content never trapped). The collapse
styles only apply once boostio.js adds .js to .
========================================================================== */
.accordion {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--color-border); }
.accordion__heading { margin: 0; }
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: var(--space-lg);
border: 0;
background: transparent;
text-align: left;
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 700;
color: var(--color-ink);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.accordion__trigger:hover { background: var(--navy-50); }
.accordion__icon { flex: none; color: var(--violet-600); transition: transform var(--transition); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
/* Animated collapse via grid-template-rows (no JS height maths) */
.js .accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition);
}
.js .accordion__panel-inner { visibility: hidden; transition: visibility var(--transition); }
.js .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.js .accordion__item.is-open .accordion__panel-inner { visibility: visible; }
.accordion__panel-inner { overflow: hidden; }
.accordion__panel-inner > * {
margin: 0;
padding: 0 var(--space-lg) var(--space-lg);
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text-secondary);
}
/* ==========================================================================
16. COMPONENT — TESTIMONIAL CARD
--------------------------------------------------------------------------
Initials avatars only — never stock "influencer" photos. Any metric chip
must be creator-reported and labelled as such.
========================================================================== */
.testimonial { display: flex; flex-direction: column; }
.testimonial__quote {
flex: 1;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--navy-600);
}
.testimonial__quote::before {
content: "\201C";
display: block;
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 800;
line-height: 0.6;
margin-bottom: var(--space-sm);
color: var(--violet-200); /* decorative */
}
.testimonial__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: var(--violet-100);
color: var(--violet-700);
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.avatar--pink { background: var(--pink-100); color: var(--pink-700); }
.avatar--orange { background: var(--orange-100); color: var(--orange-700); }
.testimonial__name { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
.testimonial__role { font-size: var(--text-xs); color: var(--color-text-muted); }
.testimonial__stat { margin-top: var(--space-md); }
.testimonial__stat-note {
display: block;
margin-top: var(--space-2xs);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ==========================================================================
17. COMPONENT — STAT BLOCK
--------------------------------------------------------------------------
Static numbers only — animated/"spinning" counters are banned.
========================================================================== */
.stat-row { display: grid; gap: var(--space-xl); text-align: center; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat__value {
font-family: var(--font-heading);
font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.stat__value--violet { color: var(--violet-600); }
.stat__label {
margin-top: var(--space-xs);
font-size: 0.9375rem;
color: var(--color-text-muted);
}
/* ==========================================================================
18. UTILITIES
========================================================================== */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.text-center { text-align: center; }
/* Stack rhythm — consistent vertical gaps inside a block */
.flow > * + * { margin-top: var(--flow-gap, var(--space-md)); }