/* ======================================================================== Boostly DZ — Homepage styles (Sprint 2.0) Constitution §3.1–§3.4 (Hero, Sectors, Services, Bundles), §4 (Design), §5.1 (Mobile-First), §5.3 (Sticky WhatsApp). No hardcoded colors / spacing / sizes — all values flow from tokens.css. TODO Sprint 2.6: extract above-the-fold critical CSS and inline in AFTER Lighthouse measurement confirms the LCP element and render-blocking CSS impact. Premature optimization without measurement = risk. ======================================================================== */ @import url('./tokens.css'); @import url('./components.css'); /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); /* 16 px §4.2 */ line-height: var(--leading-normal); color: var(--color-gray-800); background: var(--color-gray-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-mint-600); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-mint-700); text-decoration: underline; } h1, h2, h3 { font-weight: var(--font-bold); line-height: var(--leading-tight); margin: 0 0 var(--space-2); color: var(--color-navy-900); } p { margin: 0 0 var(--space-2); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: var(--border-width-1) solid var(--color-gray-200); } /* =========================================== Sprint 2.5.7 — Header Logo DEFINITIVE sizing Mobile-first cascade: 80 -> 88 -> 96 px. !important applied to defeat any inline / cascade conflicts. =========================================== */ .site-header, header.site-header { min-height: 96px !important; } @media (min-width: 1024px) { .site-header, header.site-header { min-height: 112px !important; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: 12px; min-height: 96px !important; } @media (min-width: 1024px) { .site-header__inner { min-height: 112px !important; } } .site-brand { display: flex !important; align-items: center !important; gap: var(--space-2); font-weight: var(--font-bold); font-size: var(--text-base); color: var(--color-navy-900); text-decoration: none; flex-shrink: 0; padding: 8px 0 !important; } .site-brand img { height: 80px !important; width: auto !important; max-width: 280px !important; display: block !important; object-fit: contain; } @media (min-width: 768px) { .site-brand img { height: 88px !important; max-width: 320px !important; } } @media (min-width: 1024px) { .site-brand img { height: 96px !important; max-width: 360px !important; } } .site-nav { display: none; gap: var(--space-3); } @media (min-width: 1024px) { .site-nav { display: inline-flex; align-items: center; } } .site-nav a { color: var(--color-gray-800); font-weight: var(--font-medium); font-size: var(--text-xs); } .site-header__cta { display: none; } @media (min-width: 768px) { .site-header__cta { display: inline-flex; } } /* ---------- Hero §3.1 ---------- */ .hero { padding-block: var(--space-6) var(--space-8); background: radial-gradient(1200px 600px at 50% -200px, rgba(0, 229, 160, 0.10), transparent 60%), var(--color-white); } @media (min-width: 1024px) { .hero { padding-block: var(--space-12) var(--space-16); } } .hero__grid { display: grid; gap: var(--space-4); } @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-8); } } .hero__title { font-size: var(--text-2xl); /* 30 px mobile §4.2 */ font-weight: var(--font-bold); letter-spacing: -0.01em; line-height: var(--leading-tight); } @media (min-width: 768px) { .hero__title { font-size: var(--text-3xl); } } /* 36 px */ @media (min-width: 1024px) { .hero__title { font-size: var(--text-4xl); } } /* 48 px §4.2 */ .hero__title-accent { color: var(--color-mint-600); } .hero__subtitle { font-size: var(--text-base); /* 18 px §4.2 body large */ color: var(--color-gray-600); max-width: 600px; margin-block: var(--space-2); } .hero__trust { font-size: var(--text-xs); /* 14 px §4.2 (minimum) */ color: var(--color-gray-600); margin-block: var(--space-2) var(--space-3); } .hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3); } .hero__social-proof { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-gray-600); margin-top: var(--space-2); } .hero__social-proof .stars { color: var(--color-warning); letter-spacing: 2px; } .hero__visual { display: none; } @media (min-width: 1024px) { .hero__visual { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--color-mint-500) 0%, var(--color-navy-700) 100%); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); position: relative; overflow: hidden; } .hero__visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.12) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(0,229,160,0.20) 0%, transparent 50%); } } /* ---------- Trust bar §2.2 row 3 ---------- */ .trust-bar { background: var(--color-gray-100); padding-block: var(--space-3); text-align: center; } .trust-bar__text { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-gray-600); letter-spacing: 0.02em; margin: 0; } .trust-bar__text .highlight { color: var(--color-navy-900); } /* ---------- Section heads ---------- */ .section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-block-end: var(--space-4); } @media (min-width: 1024px) { .section-head { margin-block-end: var(--space-6); } } .section-head__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-mint-600); margin-bottom: var(--space-1); } .section-head__title { font-size: var(--text-xl); /* 24 px mobile §4.2 H2 */ margin-bottom: var(--space-1); } @media (min-width: 768px) { .section-head__title { font-size: var(--text-3xl); } } /* 36 px */ .section-head__sub { font-size: var(--text-sm); color: var(--color-gray-600); } /* ---------- Sectors §3.2 ---------- */ .sectors { background: var(--color-white); } .sectors__grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; /* §5.1 — 1 column on mobile */ } @media (min-width: 768px) { .sectors__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } } @media (min-width: 1024px) { .sectors__grid { grid-template-columns: repeat(4, 1fr); } } .sector-card { text-align: center; } .sector-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-block-end: var(--space-1); } .sector-card__icon svg { width: 28px; height: 28px; } .sector-card__title { font-size: var(--text-base); font-weight: var(--font-bold); margin-bottom: var(--space-0-5); color: var(--color-navy-900); } .sector-card__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--color-gray-600); line-height: var(--leading-snug); } .sector-card__list li { display: inline; } .sector-card__list li::after { content: " · "; color: var(--color-gray-400); } .sector-card__list li:last-child::after { content: ""; } /* ---------- Services §3.3 ---------- */ .services { background: var(--color-gray-50); } .services__grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; } @media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } } @media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } } .service-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-mint-500); color: var(--color-navy-900); border-radius: var(--radius-md); margin-block-end: var(--space-2); } .service-card__icon svg { width: 24px; height: 24px; } .service-card__title { font-size: var(--text-base); font-weight: var(--font-bold); margin-bottom: var(--space-0-5); color: var(--color-navy-900); } .service-card__price { display: inline-flex; align-items: baseline; gap: var(--space-0-5); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-mint-600); margin-block-end: var(--space-1); } .service-card__price .currency { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-600); } .service-card__lead-time { display: inline-block; font-size: var(--text-xs); color: var(--color-gray-600); background: var(--color-gray-100); padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-full); margin-block-end: var(--space-2); } .service-card__desc { font-size: var(--text-xs); color: var(--color-gray-600); line-height: var(--leading-relaxed); margin: 0; } /* ---------- Bundles §3.4 ---------- */ .bundles { background: var(--color-white); } .bundles__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; /* §5.1 — 1 column on mobile */ } @media (min-width: 1024px) { .bundles__grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--space-4); } } .bundle-card { display: flex; flex-direction: column; text-align: center; } .bundle-card__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-navy-900); margin-bottom: var(--space-0-5); } .bundle-card__tagline { font-size: var(--text-xs); color: var(--color-gray-600); margin-bottom: var(--space-2); } .bundle-card__price { display: flex; flex-direction: column; align-items: center; gap: var(--space-0-5); margin-block: var(--space-2); } .bundle-card__price-amount { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--color-navy-900); letter-spacing: -0.01em; } .bundle-card__price-amount .currency { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-gray-600); margin-inline-start: var(--space-0-5); } .bundle-card__price-saved { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-mint-700); background: color-mix(in srgb, var(--color-mint-500) 15%, transparent); padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-full); } .bundle-card__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; flex: 1; } .bundle-card__list li { font-size: var(--text-sm); color: var(--color-gray-800); padding-block: var(--space-0-5); border-bottom: var(--border-width-1) solid var(--color-gray-200); } .bundle-card__list li:last-child { border-bottom: 0; } .bundle-card__list li::before { content: "✓ "; color: var(--color-mint-600); font-weight: var(--font-bold); } .bundle-card__lead-time { font-size: var(--text-xs); color: var(--color-gray-600); margin-bottom: var(--space-2); } /* ---------- Sticky WhatsApp button §5.3 ---------- */ .sticky-wa { position: fixed; bottom: var(--space-2); right: var(--space-2); width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-whatsapp); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: var(--z-sticky); opacity: 0; transform: scale(0.8); transition: opacity var(--transition-base), transform var(--transition-base); text-decoration: none; } .sticky-wa.is-visible { opacity: 1; transform: scale(1); } .sticky-wa:hover { transform: scale(1.05); color: var(--color-white); text-decoration: none; } .sticky-wa svg { width: 28px; height: 28px; } /* Hide on desktop §5.1 — mobile-first thumb-zone CTA only */ @media (min-width: 1024px) { .sticky-wa { display: none; } } /* ---------- Footer §3.8 + Amendment 7.4 (NO social media — §9.4 #3) ---------- */ .site-footer { background: var(--color-navy-900); color: var(--color-white); padding-block: var(--space-6); text-align: center; } .site-footer__inner { display: grid; gap: var(--space-3); } @media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 1fr; grid-template-areas: "brand contact" "links links" "copy copy"; gap: var(--space-4); text-align: start; } .site-footer__brand { grid-area: brand; } .site-footer__contact { grid-area: contact; } .site-footer__links { grid-area: links; } .site-footer__copyright { grid-area: copy; } } .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-0-5); } .site-footer__name { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 0; color: var(--color-white); } .site-footer__tagline { font-size: var(--text-xs); color: rgba(255,255,255,0.7); margin: 0; } .site-footer__contact { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: rgba(255,255,255,0.85); } .site-footer__contact p { margin: 0; } @media (min-width: 768px) { .site-footer__contact { align-items: flex-end; } } .site-footer__contact a { color: var(--color-mint-300); } .site-footer__contact a:hover { color: var(--color-mint-500); } .site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); padding-block-start: var(--space-2); border-top: var(--border-width-1) solid rgba(255,255,255,0.10); } .site-footer__links a { color: rgba(255,255,255,0.85); font-weight: var(--font-medium); } .site-footer__links a:hover { color: var(--color-mint-500); text-decoration: underline; } .site-footer__links a[aria-current="page"] { color: var(--color-mint-300); font-weight: var(--font-semibold); } .site-footer__copyright { font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin: 0; padding-block-start: var(--space-2); border-top: var(--border-width-1) solid rgba(255,255,255,0.10); } @media (min-width: 768px) { .site-footer__copyright { border-top: 0; padding-block-start: 0; text-align: center; } } /* ---------- Stub pages (Amendment 7.4) ---------- */ .section--stub { padding-block: var(--space-12); text-align: center; } .section--stub h1 { font-size: var(--text-2xl); margin-block-end: var(--space-2); } .section--stub p { font-size: var(--text-sm); color: var(--color-gray-600); margin-block-end: var(--space-3); } /* ---------- Homepage Guarantee Banner (Amendment 7.3) ---------- */ .section--guarantee-banner { background: var(--color-navy-900); color: var(--color-white); padding-block: var(--space-6); text-align: center; } .guarantee-banner__content { max-width: 720px; margin-inline: auto; } .guarantee-banner__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mint-300); margin-block-end: var(--space-1); } .guarantee-banner__title { color: var(--color-white); font-size: var(--text-2xl); margin-block-end: var(--space-1); } @media (min-width: 768px) { .guarantee-banner__title { font-size: var(--text-3xl); } } .guarantee-banner__sub { font-size: var(--text-base); color: rgba(255,255,255,0.85); margin-block-end: var(--space-3); } .section--guarantee-banner .btn--secondary { color: var(--color-mint-300); border-color: var(--color-mint-300); } .section--guarantee-banner .btn--secondary:hover { background: var(--color-mint-500); color: var(--color-navy-900); border-color: var(--color-mint-500); } /* ---------- FAQ §3.7 ---------- */ .faq__list { max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-1); } .faq__item { background: var(--color-white); border: var(--border-width-1) solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .faq__item[open] { border-color: var(--color-mint-500); box-shadow: var(--shadow-sm); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-navy-900); cursor: pointer; list-style: none; min-height: 56px; } .faq__question::-webkit-details-marker { display: none; } .faq__question:hover { background: var(--color-gray-50); } .faq__question:focus-visible { outline: var(--border-width-3) solid var(--color-mint-500); outline-offset: -2px; } .faq__chevron { flex-shrink: 0; color: var(--color-mint-600); transition: transform var(--transition-base); } .faq__item[open] .faq__chevron { transform: rotate(180deg); } .faq__answer { padding: 0 var(--space-3) var(--space-3); color: var(--color-gray-800); font-size: var(--text-sm); line-height: var(--leading-relaxed); border-top: var(--border-width-1) solid var(--color-gray-100); padding-top: var(--space-2); } .faq__answer p { margin: 0; } /* ======================================================================== /guarantee — Performance Guarantee Page (§3.6 + Amendment 7.1+7.2) ======================================================================== */ /* Hero */ .guarantee-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--color-mint-500) 8%, var(--color-gray-50)), var(--color-gray-50)); padding-block: var(--space-8); text-align: center; } .guarantee-hero__inner { max-width: 800px; margin-inline: auto; } .guarantee-hero__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mint-700); background: color-mix(in srgb, var(--color-mint-500) 18%, transparent); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); margin-block-end: var(--space-2); } .guarantee-hero__title { font-size: var(--text-3xl); margin-block-end: var(--space-2); } @media (min-width: 768px) { .guarantee-hero__title { font-size: var(--text-4xl); } } @media (min-width: 1024px) { .guarantee-hero__title { font-size: var(--text-5xl); } } .guarantee-hero__sub { font-size: var(--text-base); color: var(--color-gray-800); margin-block-end: var(--space-3); line-height: var(--leading-relaxed); } @media (min-width: 768px) { .guarantee-hero__sub { font-size: var(--text-lg); } } /* Timeline */ .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); position: relative; } .timeline__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-2); align-items: start; position: relative; } .timeline__item::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: calc(var(--space-3) * -1); width: 2px; background: var(--color-mint-500); opacity: 0.3; } .timeline__item:last-child::before { display: none; } .timeline__marker { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-mint-500); color: var(--color-navy-900); border-radius: var(--radius-full); flex-shrink: 0; } .timeline__body { padding-block-start: var(--space-0-5); } .timeline__when { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-mint-700); text-transform: uppercase; letter-spacing: 0.05em; margin-block-end: var(--space-0-5); } .timeline__title { font-size: var(--text-base); margin-block-end: var(--space-0-5); } .timeline__text { font-size: var(--text-sm); color: var(--color-gray-600); margin: 0; } @media (min-width: 1024px) { .timeline { grid-template-columns: repeat(6, 1fr); gap: var(--space-2); } .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); text-align: center; } .timeline__item::before { left: 56%; top: 24px; bottom: auto; width: calc(100% - 48px); height: 2px; } .timeline__marker { margin-inline: auto; } } /* Money-back */ .moneyback__grid { display: grid; gap: var(--space-3); } @media (min-width: 768px) { .moneyback__grid { grid-template-columns: 1fr 1fr; } } .moneyback__card { text-align: center; padding: var(--space-4); } .moneyback__card--featured { border-color: var(--color-mint-500); } .moneyback__badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-mint-700); background: color-mix(in srgb, var(--color-mint-500) 18%, transparent); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); margin-block-end: var(--space-1); } .moneyback__badge--alt { color: var(--color-navy-900); background: var(--color-mint-500); } .moneyback__title { margin-block-end: var(--space-1); } .moneyback__text { color: var(--color-gray-800); margin: 0; } /* Bullet list (included / excluded) */ .bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); max-width: 720px; margin-inline: auto; } .bullet-list__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2); align-items: start; padding: var(--space-1) var(--space-2); background: var(--color-white); border: var(--border-width-1) solid var(--color-gray-200); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-snug); } .bullet-list__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-mint-500); color: var(--color-navy-900); border-radius: var(--radius-full); flex-shrink: 0; } .bullet-list--info .bullet-list__icon { background: color-mix(in srgb, var(--color-mint-500) 18%, transparent); color: var(--color-mint-700); } /* Protection grid */ .protection-grid { display: grid; gap: var(--space-2); } @media (min-width: 768px) { .protection-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .protection-grid { grid-template-columns: repeat(4, 1fr); } } .protection-card { text-align: start; } .protection-card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-mint-500) 18%, transparent); color: var(--color-mint-700); border-radius: var(--radius-md); margin-block-end: var(--space-2); } .protection-card__title { font-size: var(--text-base); margin-block-end: var(--space-1); } .protection-card__text { font-size: var(--text-sm); color: var(--color-gray-600); margin: 0; } .protection-card code { font-size: var(--text-xs); background: var(--color-gray-100); color: var(--color-navy-900); padding: 0 var(--space-0-5); border-radius: var(--radius-sm); font-family: var(--font-mono, monospace); } /* Final CTA */ .guarantee-final-cta { background: var(--color-navy-900); color: var(--color-white); text-align: center; } .guarantee-final-cta__inner { max-width: 720px; margin-inline: auto; } .guarantee-final-cta__title { color: var(--color-white); font-size: var(--text-2xl); margin-block-end: var(--space-2); } @media (min-width: 768px) { .guarantee-final-cta__title { font-size: var(--text-3xl); } } .guarantee-final-cta__text { color: rgba(255,255,255,0.85); font-size: var(--text-base); margin-block-end: var(--space-3); } /* ---------- Language switcher §5.4 + Amendment 8 ---------- */ .lang-switcher { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-sans); font-size: var(--text-xs); /* 14 px per §5.4 line 897 */ font-weight: var(--font-medium); color: var(--color-gray-600); background: transparent; border: var(--border-width-1) solid var(--color-gray-200); border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-2); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .lang-switcher:hover { background: var(--color-gray-100); color: var(--color-navy-900); border-color: var(--color-gray-400); } .lang-switcher:focus-visible { outline: var(--border-width-3) solid var(--color-mint-500); outline-offset: 2px; } /* Hide on smallest screens to preserve thumb-zone space; show ≥640 px. */ .lang-switcher { display: none; } @media (min-width: 640px) { .lang-switcher { display: inline-flex; } } /* Position the switcher at the end of the header inner row. On FR (LTR) this places it after the CTA on the right. On AR (RTL via row-reverse in rtl.css) this places it on the left. */ .site-header__lang { margin-inline-start: var(--space-1); }