/* ========================================================= SPARKZ COUNSELLING — EMOTIONAL FIRST AID LANDING PAGE Mobile-first stylesheet. Breakpoints: 640px (tablet), 1024px (desktop) ========================================================= */ /* ---------- 1. CSS VARIABLES (Dim-White / Gradient / Black / White System) ---------- */ :root { --offwhite: #F7F5F2; --pink: #F6DCE7; --lilac: #DED2F6; --black: #000000; --white: #FFFFFF; --yellow: #FFD600; --gradient: linear-gradient(135deg, var(--pink) 0%, var(--lilac) 100%); --font-body: 'Inter', sans-serif; --container-width: 1200px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.08); --transition: 0.2s ease; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x lives on (not ) so stays the sole scrolling element; setting it on alone forces the browser to compute overflow-y: auto on body too, turning body into its own scroll container — which breaks position: fixed children (they end up anchored to body's scroll box instead of the real viewport) in many mobile browsers. */ html { scroll-behavior: smooth; overflow-x: hidden; } body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } a { text-decoration: none; color: inherit; } body { font-family: var(--font-body); background: var(--offwhite); color: var(--black); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-body); color: var(--black); line-height: 1.25; font-weight: 700; } h1 { font-size: 2rem; } h2 { font-size: 1.65rem; } h3 { font-size: 1.2rem; } p { max-width: 65ch; } /* Visible focus states for keyboard accessibility */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; } /* Skip link for keyboard users */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--black); color: var(--white); padding: 0.75rem 1rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ---------- 3. LAYOUT UTILITIES ---------- */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 3rem 0; } .section--tight { padding: var(--space-lg) 0; } /* EFA Introduction is one of the gradient "feature" moments; Webinar Details keeps the light/dim-white treatment. Kept as separate classes because the markup still carries these two distinct names. */ .section--navy { background: var(--gradient); } .section--charcoal { background: var(--offwhite); } .section--white { background: var(--offwhite); } /* Section heading blocks are centered as a group (eyebrow + heading + intro paragraph); grids/cards below keep their own readable internal alignment — see individual card rules. */ .section-header { max-width: 640px; margin: 0 auto var(--space-lg); text-align: center; } .section-header--center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); margin-bottom: var(--space-xs); } .section-lead { color: var(--black); max-width: 60ch; margin: 0.5rem auto 0; } /* ---------- 4. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: 0.9rem 1.75rem; border-radius: var(--radius-sm); border: 2px solid transparent; min-height: 48px; transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition); text-align: center; } .btn-primary { background: var(--black); color: var(--white); border-color: var(--black); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--white); color: var(--black); border-color: var(--black); transform: translateY(-1px); } .btn-secondary { background: var(--white); color: var(--black); border-color: var(--black); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--black); color: var(--white); } .btn-block { width: 100%; } .btn-group { display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--space-md); } /* ---------- 5. PLACEHOLDER BLOCKS ---------- */ /* Visually distinct so placeholders are never mistaken for finished content */ .placeholder { border: 2px dashed var(--black); background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 10px, rgba(0, 0, 0, 0.12) 10px, rgba(0, 0, 0, 0.12) 20px ); color: var(--black); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; text-align: center; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.03em; padding: 1rem; } .placeholder small { display: block; margin-top: 0.35rem; font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: rgba(0, 0, 0, 0.7); } .placeholder--logo { width: 150px; height: 40px; font-size: 0.7rem; border-radius: var(--radius-sm); } .placeholder--handbook { aspect-ratio: 3 / 4; width: 100%; max-width: 220px; margin: 0 auto; } /* ---------- 6. HEADER ---------- */ .site-header { background: var(--offwhite); border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 0.85rem 0; position: relative; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; } .site-header__cta { display: none; } /* ---------- 7. HERO ---------- */ .hero { background: var(--gradient); color: var(--black); padding: var(--space-lg) 0 var(--space-xl); } /* Grid areas define reading/visual order per breakpoint so the DOM order (badge > headline > subhead > body > facilitator > logistics > price > cta) stays semantic while desktop can move the facilitator into a right column. */ .hero__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "badge" "headline" "subhead" "body" "facilitator" "logistics" "price" "cta"; row-gap: 0.9rem; text-align: center; } .hero__badge { grid-area: badge; justify-self: center; background: var(--black); border-radius: var(--radius-sm); color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 0.9rem; } .hero h1 { grid-area: headline; color: var(--black); font-size: 2.1rem; } .hero__subhead { grid-area: subhead; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; color: var(--black); } .hero__body { grid-area: body; color: rgba(0, 0, 0, 0.75); font-size: 1rem; max-width: 55ch; } .hero__facilitator { grid-area: facilitator; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .placeholder--hero-photo { aspect-ratio: 4 / 5; width: 100%; max-width: 200px; border-radius: var(--radius-lg); margin: 0 auto; } .hero__facilitator-name { font-family: var(--font-body); font-weight: 700; color: var(--black); font-size: 1.05rem; } .hero__facilitator-role { font-family: var(--font-body); font-weight: 500; color: rgba(0, 0, 0, 0.65); font-size: 0.85rem; margin-top: -0.35rem; } .hero__logistics { grid-area: logistics; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .hero__logistics-item { background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-sm); padding: 0.65rem 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; } .hero__logistics-label { font-family: var(--font-body); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); } .hero__logistics-value { font-weight: 600; color: var(--black); font-size: 0.85rem; } .hero__price { grid-area: price; font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; color: var(--black); } .hero__price span { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: rgba(0, 0, 0, 0.65); margin-top: 0.15rem; } .hero__cta { grid-area: cta; margin-top: 0; } /* ---------- 8. PROBLEM SECTION ---------- */ .signs-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: var(--space-md); } .signs-list li { background: var(--white); border-left: 4px solid var(--black); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-weight: 500; color: var(--black); box-shadow: var(--shadow-card); } /* ---------- 9. EFA INTRO SECTION ---------- */ .efa-quote { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; color: var(--black); border-left: 4px solid var(--black); padding-left: var(--space-sm); margin: var(--space-md) 0; } .efa-steps { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: var(--space-md); } .efa-steps li { display: flex; align-items: center; gap: 0.75rem; background: var(--white); border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-weight: 600; color: var(--black); box-shadow: var(--shadow-card); } .efa-steps li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--black); flex-shrink: 0; } .efa-note { margin-top: var(--space-md); background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--black); } /* ---------- 10. CURRICULUM ---------- */ .curriculum-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: var(--space-lg); } .curriculum-item { background: var(--white); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.5rem; } .curriculum-item__number { font-family: var(--font-body); font-size: 1.75rem; font-weight: 700; color: var(--black); opacity: 0.5; } .curriculum-item h3 { font-size: 1.05rem; } /* ---------- 11. WHO SHOULD ATTEND ---------- */ .audience-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: var(--space-lg); } .audience-card { background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); padding: 1.25rem; display: flex; align-items: center; gap: 0.9rem; font-family: var(--font-body); font-weight: 600; color: var(--black); } .audience-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; flex-shrink: 0; } /* ---------- 12. TAKEAWAYS ---------- */ .takeaway-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: var(--space-lg); } .takeaway-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 500; } .takeaway-list li::before { content: '✓'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } /* ---------- 13. BONUS ---------- */ .bonus-box { background: var(--gradient); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); align-items: center; text-align: center; } /* The E-Handbook placeholder sits on the gradient bonus box; give it its own white card treatment so it reads clearly as "white = card". */ .bonus-box .placeholder { background: var(--white); border-color: var(--black); color: var(--black); } .bonus-tag { display: inline-block; background: var(--black); color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; padding: 0.35rem 0.9rem; border-radius: 999px; text-transform: uppercase; } /* ---------- 14. SPEAKER ---------- */ /* The bio placeholder sits outside .section-header (it's content, not the heading block), so it needs its own centered, contained width — matching .section-header's max-width keeps it visually aligned under the heading above it rather than stretching full-bleed across the container. */ .speaker-card__bio { max-width: 640px; margin: 0.5rem auto 0; } /* ---------- 15. WEBINAR DETAILS ---------- */ .details-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-lg); } .details-item { background: var(--white); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .details-item__label { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); } .details-item__value { font-weight: 600; color: var(--black); text-align: right; } /* ---------- 16. PRICE / REGISTER ---------- */ .price-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-lg); text-align: center; max-width: 480px; margin: var(--space-lg) auto 0; } .price-card__amount { font-family: var(--font-body); font-size: 2.5rem; font-weight: 700; color: var(--black); } .price-card__note { color: rgba(0, 0, 0, 0.65); margin-top: 0.25rem; } .price-card .btn-group { margin-top: var(--space-md); } .price-card__disclaimer { margin-top: 1rem; font-size: 0.8rem; color: rgba(0, 0, 0, 0.65); } /* ---------- 17. FAQ ---------- */ .faq-list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 0.25rem 1.25rem; } .faq-item summary { font-family: var(--font-body); font-weight: 600; color: var(--black); padding: 1rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--black); flex-shrink: 0; transition: transform var(--transition); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding-bottom: 1.1rem; color: rgba(0, 0, 0, 0.75); max-width: none; } .faq-item p.needs-confirmation { color: var(--black); font-size: 0.85rem; font-weight: 700; font-style: italic; text-decoration: underline; } /* ---------- 18. FINAL CTA ---------- */ /* The closing conversion section — the one "important CTA/feature section" using pure black, immediately before the black footer. */ .final-cta { background: var(--black); color: var(--white); text-align: center; } .final-cta h2 { font-size: 1.75rem; max-width: 20ch; margin: 0 auto; color: var(--white); } .final-cta .section-lead { margin: var(--space-sm) auto 0; text-align: center; color: var(--white); } .final-cta .price-card { margin-left: auto; margin-right: auto; } /* The price-card itself stays white (it's a card), so its primary CTA must flip to the on-black treatment to stay visible against white. */ .final-cta .btn-primary { background: var(--white); color: var(--black); border-color: var(--white); } .final-cta .btn-primary:hover, .final-cta .btn-primary:focus-visible { background: var(--black); color: var(--white); border-color: var(--white); } /* ---------- 19. FOOTER ---------- */ .site-footer { background: var(--black); color: var(--white); padding: var(--space-lg) 0 calc(var(--space-lg) + 70px); text-align: center; font-size: 0.85rem; } /* Footer sits on a black background, so its logo placeholder flips to a white-based treatment — the base black-on-transparent placeholder would be invisible here. Still only the approved colors. */ .site-footer .placeholder--logo { margin: 0 auto var(--space-sm); border-color: var(--white); background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 10px, rgba(255, 255, 255, 0.16) 10px, rgba(255, 255, 255, 0.16) 20px ); color: var(--white); } .site-footer p + p { margin-top: 0.5rem; } /* Reserve space at the bottom of the footer on every breakpoint so the persistent sticky CTA bar (mobile and desktop) never covers footer content */ /* ---------- 20. STICKY REGISTRATION CTA BAR (mobile + desktop) ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--white); border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); padding: 0.65rem 0; padding-bottom: max(0.65rem, env(safe-area-inset-bottom)); } .sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .sticky-cta__title { display: none; } .sticky-cta__price { font-family: var(--font-body); font-weight: 700; color: var(--black); line-height: 1.15; font-size: 0.95rem; } .sticky-cta__price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.7rem; color: rgba(0, 0, 0, 0.65); } .sticky-cta .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; min-height: 44px; flex-shrink: 0; } /* The sticky bar is the single strongest conversion moment on the page, so it gets the one approved yellow accent — no other element uses it. */ .sticky-cta .btn-primary { background: var(--yellow); color: var(--black); border-color: var(--yellow); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .sticky-cta .btn-primary:hover, .sticky-cta .btn-primary:focus-visible { background: var(--black); color: var(--yellow); border-color: var(--black); } /* ---------- 21. TABLET BREAKPOINT (>= 640px) ---------- */ @media (min-width: 640px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.9rem; } .curriculum-grid { grid-template-columns: repeat(2, 1fr); } .audience-grid { grid-template-columns: repeat(2, 1fr); } .btn-group { flex-direction: row; } } /* ---------- 22. DESKTOP BREAKPOINT (>= 1024px) ---------- */ @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.15fr 1fr; grid-template-areas: "badge facilitator" "headline facilitator" "subhead facilitator" "body facilitator" "logistics facilitator" "price facilitator" "cta facilitator"; column-gap: var(--space-xl); align-items: center; text-align: left; } .hero__badge { justify-self: start; } .hero__logistics-item { align-items: flex-start; text-align: left; } .hero__facilitator { align-self: center; } .placeholder--hero-photo { max-width: 340px; } .hero h1 { font-size: 3rem; } .site-header__cta { display: inline-flex; } .signs-list, .efa-steps { grid-template-columns: repeat(2, 1fr); } .curriculum-grid { grid-template-columns: repeat(4, 1fr); } .audience-grid { grid-template-columns: repeat(3, 1fr); } .takeaway-list { grid-template-columns: repeat(2, 1fr); } .bonus-box { flex-direction: row; text-align: left; align-items: center; justify-content: space-between; } .bonus-box__media { flex-shrink: 0; } .details-grid { grid-template-columns: repeat(3, 1fr); } .details-item { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .details-item__value { text-align: left; } .sticky-cta__title { display: inline-block; font-family: var(--font-body); font-weight: 700; color: var(--black); font-size: 0.95rem; } .section { padding: 4rem 0; } }