Think Smarter Style Guide

Book Energy System Section

• LayoutTwo-column grid (image left, copy right) mirroring home “10 Lessons” module but reversed order.
• VisualFull-height editorial image with parallax data attributes and drop shadow.
• PanelNavy card background (#0F1F38), Accent Rose typography, 2–4rem padding, vertical stack spacing 1.25rem.
• KickerCera Pro uppercase, 0.3rem tracking, 0.95rem size.
• HeadlineHoefler Text clamp(1.8rem–2.6rem), 1.2 line height, Primary Navy color.
• Body/List1.05rem body copy with 1.7 line height; unordered list uses 0.75rem vertical gap and Primary Navy text.
• CTA.btn with lessons-cta variant linking to Amazon preorder.
• ResponsiveStacks columns at ≤900px maintaining image first.

Audiobook Promo Section

• LayoutFull-bleed navy band with centered 1200px grid (50/50 split). Left column hosts 300px audiobook cover; right column mirrors Elementor copy/buttons.
• TypographyWhite copy: kicker Cera Pro uppercase 1.4rem, body Hoefler 1.1rem / 1.6 leading, em retains italic accent.
• ButtonsPrimary download button uses translucent white fill and Audible icon; secondary audio button uses outline and ties into shared audio toggle script (aria-pressed feedback, label swaps between “Audio clip” and “Pause clip”).
• MediaImage constrained via width:min(100%,300px) for equilibrium on large screens; grid collapses to single column ≤900px with centered content.
• InteractionAudio button reuses global audio preview logic and listens for ended events to reset state.

Shop Feature Section

• Layout50/50 grid (image + copy) with 1.5–3rem gap, stacks to single column ≤900px.
• TypographyKicker uses Hoefler 2rem italicized “Shop”; title uses Cera Pro 2rem/600 with 0.2rem tracking; body copy is Cera Pro 1.1rem normal case.
• ImageEdge-to-edge responsive figure showing Smarter downloadables/books with full-bleed parallax motion (data-parallax-root + .parallax-img) so the product floats as you scroll.
• CTAPrimary “Shop now” button reuses .btn with Primary Navy stroke/text and subtle scale hover.
• ContentBody copy: “A range of additional products that enhance your Smarter journey.” Links to shop-smarter.html.

Shop Smarter Hero

• CanvasFull-bleed section (.shop-hero) spans 100vw and shifts left via calc(50% - 50vw) so the image kisses the viewport edges.
• Image.shop-hero-figure locks height at 500px; image source assets/images/Shop-SMARTER.jpg with object-fit: cover for full-width crop.
• TypographyCentered overlay text “Shop Smarter” uses Hoefler Text 2.6rem, sentence case with italicized <em> emphasis, white fill, 0.08em tracking.
• Copy blockFollow-up .shop-overview section uses content-section spacing to introduce headline/description beneath the visual; subtitle (Cera Pro, 2.4rem, all caps) is centered below the image at 80% width in Primary Navy.

Downloadables Hero

• CanvasReuses .shop-hero shell; add .download-hero modifier for mix-blend overlay and hero-specific typography.
• ImageSource assets/images/Reading-Download.jpg cropped at 500px height with 10–40% Primary Navy overlay (rgba(0,51,159,0.4), multiply blend).
• TypographyCaption text italicized; title set to Hoefler Text 3rem with heavier drop shadow. Subtitle uses italic Cera Pro 1.4rem centered at 70% width.
• SpacingSubtitle margin clamp(1rem,2vw,1.5rem); additional clamp(3rem, 8vw, 5rem) margin separates hero from following sections.

Contact Hero

• LayoutSame .shop-hero/.download-hero stack: full-bleed 500px tall visual with centered caption.
• ImageUse assets/images/contact-billboard.jpg (local SMARTER-Billboard import) with object-fit: cover.
• Caption“Contact” title in Hoefler Text, italic <em> allowed if desired, uppercase spacing consistent with other hero captions.
• ModifiersAdd .contact-hero class for page-specific adjustments if needed; currently shares download-hero overlay styling.

Downloadables Cards

• Grid.download-card-grid mirrors shop cards (3-up desktop → 2-up tablet → single column mobile) with clamp(1.5rem–2.5rem) gaps.
• Figure.download-card-figure uses dark Primary Navy background (#001B60), 2:3 aspect ratio, centered imagery, and containment-fit so PDFs preview cleanly.
• TypographyTitles switch to Cera Pro 1.4rem/400, no price line.
• CTAFooter adds 1rem buffer before the Download button (standard .btn) which carries Primary Navy stroke/text.

Link Behavior

Links inherit Primary Navy, remove underlines, and animate into Accent Rose.

• Default color#00339F
• Hover color#DFABCD
• DecorationNone
• MotionScale to 104% in 0.2s

Hero Shell

Reserve a centered visual container for the hero image.

• Widthmin(46rem, 90vw)
• Tablet widthConstrain to min(38rem, 82vw) for edge breathing room
• Main image (tablet)Scale to ~92% width inside hero-media for visual relief
• Side images (tablet)Reduce overlap by ~50% total (move inward three ticks) to hug the smaller frame
• Left image (tablet)Raise ~60% higher than desktop baseline to keep form aligned
• Mobile titleCap “SMARTER” at ~3.5rem (−20% vs desktop)
• Mobile social iconsHalve icon/button size to 20px
• Aspect46:30 placeholder frame
• PaddingClamp(3rem, 10vw, 6rem) vertical
• StyleDashed Primary Navy border, soft gradient fill
• HeadlineCoconat Demi, 8rem cap height
• SublineHoefler Text, 3rem, weight 200
• Offset0 gap below sticky header
• Side image351px width, ~80px left overlap
• TaglineCera Pro, 2rem, weight 600
• StatementCera Pro body copy · 75vw max width
• CTABuy Now button · 1px border, uppercase