/* ============================================================= lp-academies-palette-bold.css COLOR OVERLAY — load AFTER lp-academies.css to override palette only. Layout, typography, spacing, motion: unchanged. This file does ONE thing: shifts the page's energy via color. - Hero: deep teal background, cream H1, lime cycling word - Founders section: gets a subtle accent shift so it doesn't repeat hero - Final CTA: kept dark (no change), now framed by the new color rhythm To revert: remove the tag for this file from the page . To swap to safer palette (orange cycling word, no lime): change `--lpb-cycle-color` from #C2F734 to #FBF7F0 (cream) or use the orange. ============================================================= */ /* ---- LOCAL TOKENS ---- Pulled from your root palette so any future global re-tuning carries through. These are local variables to this overlay; they don't replace your :root tokens. */ .lp-academies-body { --lpb-hero-bg: #154951; /* --accent-deep — deep teal */ --lpb-hero-bg-end: #1E5F69; /* --accent — for the optional gradient */ --lpb-hero-ink: #FBF7F0; /* cream text on dark teal */ --lpb-hero-ink-soft: rgba(251, 247, 240, 0.78); --lpb-hero-eyebrow: #C2F734; /* --accent-lg — the lime signature */ --lpb-cycle-color: #C2F734; /* --accent-lg — high-contrast lime against teal */ --lpb-hero-microcopy: rgba(251, 247, 240, 0.6); } /* ============================================================= HERO — deep teal, cream copy, lime cycling word ============================================================= */ .lp-academies-body .lp-hero { background: var(--lpb-hero-bg); /* Subtle radial wash adds depth without making it look like a gradient gimmick */ background-image: radial-gradient(ellipse 80% 60% at 75% 50%, rgba(30, 95, 105, 0.45), transparent 70%), linear-gradient(180deg, var(--lpb-hero-bg) 0%, #103E45 100%); } /* Watermark — the doors illustration needs to stay legible on dark teal. Drop opacity slightly and add a screen/lighten blend so the line work pops instead of disappearing into the dark background. */ .lp-academies-body .lp-hero-bg img { opacity: 0.12; filter: saturate(0.5) brightness(1.4); mix-blend-mode: screen; } /* Topbar — sits above the hero, needs to feel like part of the hero now */ .lp-academies-body .lp-topbar { background: var(--lpb-hero-bg); border-bottom: 1px solid rgba(251, 247, 240, 0.08); } .lp-academies-body .lp-topbar-meta { color: var(--lpb-hero-microcopy); } .lp-academies-body .lp-topbar-meta em { color: var(--lpb-hero-eyebrow); } /* Hero eyebrow — lime to signal "this is the moment" */ .lp-academies-body .lp-hero .lp-eyebrow { color: var(--lpb-hero-microcopy); } .lp-academies-body .lp-hero .lp-eyebrow em { color: var(--lpb-hero-eyebrow); font-style: italic; } /* H1 — cream on deep teal */ .lp-academies-body .lp-hero-title { color: var(--lpb-hero-ink); } .lp-academies-body .lp-hero-title em { color: var(--lpb-hero-ink); /* "at 11pm." now ties to the lime signature */ } /* Slot animation — lime, slightly heavier optical weight for energy */ .lp-academies-body .lp-lang { color: var(--lpb-cycle-color); /* Subtle text-shadow gives the lime a faint glow against the dark teal — just enough to feel alive, not enough to look like a 90s neon sign */ text-shadow: 0 0 24px rgba(194, 247, 52, 0.25), 0 0 48px rgba(194, 247, 52, 0.12); } /* Hero subtitle — soft cream */ .lp-academies-body .lp-hero-sub { color: var(--lpb-hero-ink-soft); } .lp-academies-body .lp-hero-sub em { color: var(--lpb-hero-ink); } /* Hero microcopy below the CTA */ .lp-academies-body .lp-hero-microcopy { color: var(--lpb-hero-microcopy); } .lp-academies-body .lp-hero-microcopy em { color: var(--lpb-hero-eyebrow); } .lp-academies-body .lp-hero-microcopy span { color: var(--lpb-hero-ink-soft); } /* ============================================================= HERO CTA — orange button stays orange (it's the conversion color, don't mess with proven affordance), but get a lime focus-ring accent and ensure it pops against the dark teal background. ============================================================= */ .lp-academies-body .lp-hero .lp-cta-btn { /* Sit slightly proud of the dark background */ box-shadow: 0 8px 24px rgba(21, 20, 15, 0.18); } @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-hero .lp-cta-btn:hover { box-shadow: 0 12px 32px rgba(232, 75, 38, 0.35); } } /* Focus ring becomes lime when on the dark hero — better contrast than teal-on-teal */ .lp-academies-body .lp-hero .lp-cta-btn:focus-visible { outline-color: var(--lpb-hero-eyebrow); } /* ============================================================= DIFFERENTIATORS — keep cream, but the 01/02/03 numbers get the lime signature so it threads through the page instead of dying at the hero. ============================================================= */ .lp-academies-body .lp-diff-num { /* Was: --accent-org orange. Now: brand teal + lime accent dot. Switching the number color itself feels too much; instead we keep the orange but add a tiny lime square next to "01" to thread the accent. */ /* Actually — restraint here. Keep numbers orange. Add lime only in the founders block. */ } /* Border-top of each differentiator card stays orange — it's the rhythmic accent */ /* ============================================================= FOUNDERS SECTION — already teal in the base. Now we add the lime accent so it visually rhymes with the hero without being identical. ============================================================= */ .lp-academies-body .lp-founders .lp-eyebrow em { color: var(--lpb-hero-eyebrow); } .lp-academies-body .lp-founders-quote em { color: var(--lpb-hero-eyebrow); } /* The founder's sig link stays orange-pink (FFE0D6) — that's warmth. Don't touch — orange-pink against teal is its own thing. */ /* ============================================================= FINAL CTA — currently dark #0F1419. Now it gets a lime accent on the headline italic, completing the page's color rhythm: teal → cream → cream → cream → teal → dark, with lime threading through. ============================================================= */ .lp-academies-body .lp-finalcta-title em { color: var(--lpb-hero-eyebrow); } .lp-academies-body .lp-finalcta-micro em { color: var(--lpb-hero-eyebrow); } /* ============================================================= REDUCED MOTION — kill the text-shadow glow if user prefers reduced effects. Glow can read as "flashing" to vestibular-sensitive users. ============================================================= */ @media (prefers-reduced-motion: reduce) { .lp-academies-body .lp-lang { text-shadow: none; } } /* Optimize high-contrast text rendering mechanics on small displays */ @media (max-width: 640px) { .lp-academies-body .lp-lang { /* Reduce shadow dispersion radius slightly so letters stay sharp on mobile interfaces */ text-shadow: 0 0 12px rgba(194, 247, 52, 0.25); letter-spacing: -0.5px; } } /* Ensure the background watermark stays firmly behind your core copy layout layer */ .lp-academies-body .lp-hero-bg img { will-change: transform; transform: translate3d(0, -50%, 0); /* Force hardware GPU acceleration to preserve scrolling fluidness */ } /* ============================================================= GRID ITEM HOVER ANIMATIONS & ICON METRICS ============================================================= */ /* Setup header container layout for number + icon alignment */ .lp-diff-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } /* Inherit font behavior for number block */ .lp-diff-item .lp-diff-num { margin-bottom: 0; /* Clear previous baseline spacer */ } /* Structural styling for inline icons */ .lp-diff-icon { width: 24px; height: 24px; color: var(--lpb-hero-bg); /* Uses deep teal for branding harmony */ opacity: 0.4; transform: scale(0.95); transition: opacity 0.4s var(--ease-out-strong), transform 0.4s var(--ease-out-strong), color 0.4s var(--ease-out-strong); } /* Update baseline card state for smooth transition interpolation */ .lp-diff-item { position: relative; border-top: 1px solid rgba(26, 31, 42, 0.08); transition: border-color 0.4s var(--ease-out-strong), transform 0.4s var(--ease-out-strong); transform: translate3d(0, 0, 0); /* Forces hardware GPU layer creation */ } /* HOVER TRIGGERS */ @media (hover: hover) { .lp-diff-item:hover { border-top-color: var(--lpb-hero-bg); /* Subtle brand color shift */ transform: translate3d(0, -4px, 0); /* Gentle fluid lift */ } .lp-diff-item:hover .lp-diff-icon { opacity: 1; color: var(--lpb-hero-eyebrow); /* Glow accent shift to Lime #C2F734 */ transform: scale(1.08); } } /* ============================================================= lp-academies-cards.css STRUCTURAL OVERLAY for the .lp-diff section. Load AFTER lp-academies.css and lp-academies-palette-bold.css. Adds: - Icon container styling (above the numbered cards) - Entry stagger animation as cards enter viewport - Hover lift + icon micro-animation per card - Reduced-motion + touch-device handling Removable: drop this file and the section reverts to the current 5-card layout without icons or animations. ============================================================= */ /* ============================================================= GRID — 5 cards needs different breakpoints than 3 3-col on wide, 2-col on tablet, 1-col on mobile. The 5th card on a 3-col grid would orphan; explicit gap handling. ============================================================= */ .lp-academies-body .lp-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 48px; } /* On the 3-col layout, cards 4 and 5 sit in row 2. Anchor them LEFT (columns 1 and 2), leaving column 3 empty on the right. This matches natural left-to-right reading flow. */ @media (min-width: 1025px) { .lp-academies-body .lp-diff-grid { grid-template-areas: "c1 c2 c3" "c4 c5 ."; } .lp-academies-body .lp-diff-item:nth-child(1) { grid-area: c1; } .lp-academies-body .lp-diff-item:nth-child(2) { grid-area: c2; } .lp-academies-body .lp-diff-item:nth-child(3) { grid-area: c3; } .lp-academies-body .lp-diff-item:nth-child(4) { grid-area: c4; } .lp-academies-body .lp-diff-item:nth-child(5) { grid-area: c5; } } @media (max-width: 1024px) { .lp-academies-body .lp-diff-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } } @media (max-width: 640px) { .lp-academies-body .lp-diff-grid { grid-template-columns: 1fr; gap: 36px; } } /* ============================================================= CARD — base treatment The card already has: border-top: 2px solid #E84B26, padding-top: 28px We're adding: icon container above the number, hover state, transform setup ============================================================= */ .lp-academies-body .lp-diff-item { position: relative; /* Internal padding gives content breathing room. Small negative outer margin extends the card edge slightly into the grid gap (without consuming it entirely) — leaves ~16px visible gap. */ padding: 28px 24px 24px; margin: 0 -16px; border-radius: 12px; background: #F2ECDF; transition: transform 280ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)), background-color 280ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 280ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); will-change: transform, background-color; } @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:hover { background-color: #FFFFFF; box-shadow: 0 4px 12px rgba(21, 20, 15, 0.06), 0 12px 32px rgba(21, 20, 15, 0.08); } } /* ============================================================= ICON + NUMBER ROW Sit on the SAME horizontal row, not stacked. Markup: a wrapper div.lp-diff-meta holds both .lp-diff-icon and .lp-diff-num. The number is the editorial anchor; the icon sits beside it for scannability. ============================================================= */ .lp-academies-body .lp-diff-meta { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 14px; } /* Override the existing .lp-diff-num margin so it lines up cleanly with the icon */ .lp-academies-body .lp-diff-meta .lp-diff-num { margin-bottom: 0; line-height: 1; } /* Override the icon's own margin since the wrapper now handles spacing */ .lp-academies-body .lp-diff-meta .lp-diff-icon { margin-bottom: 0; } /* ============================================================= ICON CONTAINER ============================================================= */ .lp-academies-body .lp-diff-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; background: #FFFFFF; border: 1px solid var(--line, rgba(21, 20, 15, 0.08)); border-radius: 10px; color: #1E5F69; flex-shrink: 0; transition: background 260ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)), border-color 260ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)), color 260ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); } .lp-academies-body .lp-diff-icon svg { width: 22px; height: 22px; /* Each SVG child element transitions individually so per-icon animations work */ transition: transform 320ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); } /* ============================================================= HOVER — desktop only, fine pointers only Card lifts slightly. Icon container fills with teal, icon goes lime. This is where the color reveal happens. ============================================================= */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:hover { transform: translateY(-4px); } .lp-academies-body .lp-diff-item:hover .lp-diff-icon { background: #1E5F69; border-color: #1E5F69; color: #C2F734; } } /* ============================================================= PER-ICON HOVER ANIMATIONS Each icon gets its own subtle motion on card hover. Using nth-child to target by position in the grid. ============================================================= */ /* Card 1 — AI tutor: speech bubble dots ping */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:nth-child(1):hover .lp-diff-icon-dots circle:nth-child(1) { animation: lp-dot-pulse 800ms var(--ease-in-out-strong, cubic-bezier(0.77, 0, 0.175, 1)) 0ms infinite; } .lp-academies-body .lp-diff-item:nth-child(1):hover .lp-diff-icon-dots circle:nth-child(2) { animation: lp-dot-pulse 800ms var(--ease-in-out-strong, cubic-bezier(0.77, 0, 0.175, 1)) 150ms infinite; } .lp-academies-body .lp-diff-item:nth-child(1):hover .lp-diff-icon-dots circle:nth-child(3) { animation: lp-dot-pulse 800ms var(--ease-in-out-strong, cubic-bezier(0.77, 0, 0.175, 1)) 300ms infinite; } } @keyframes lp-dot-pulse { 0%, 100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } } /* Card 2 — No walls: corners expand outward */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:nth-child(2):hover .lp-diff-icon-corners { transform: scale(1.08); } } /* Card 3 — Domain: globe arrow exits */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:nth-child(3):hover .lp-diff-icon-arrow { transform: translate(2px, -2px); } } /* Card 4 — DRM: shield checkmark draws in */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:nth-child(4):hover .lp-diff-icon-check { stroke-dashoffset: 0; } } /* Set up the dasharray for the checkmark draw-in */ .lp-academies-body .lp-diff-item:nth-child(4) .lp-diff-icon-check { stroke-dasharray: 20; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); } /* Card 5 — Payouts: arrow nudges right */ @media (hover: hover) and (pointer: fine) { .lp-academies-body .lp-diff-item:nth-child(5):hover .lp-diff-icon-flow { transform: translateX(2px); } } /* ============================================================= ENTRY STAGGER ANIMATION Cards fade-up as they enter viewport via IntersectionObserver. Initial state: invisible + translated down 12px. Reveal state: opacity 1, translate 0. Stagger via per-card delay (60ms between cards). Markup contract: cards start with [data-reveal] attribute, become [data-revealed] when intersected (set by JS — see footer). ============================================================= */ .lp-academies-body .lp-diff-item[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)), transform 480ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); } .lp-academies-body .lp-diff-item[data-reveal][data-revealed] { opacity: 1; transform: translateY(0); } /* Stagger delays — 60ms between each card */ .lp-academies-body .lp-diff-item[data-reveal]:nth-child(1) { transition-delay: 0ms; } .lp-academies-body .lp-diff-item[data-reveal]:nth-child(2) { transition-delay: 60ms; } .lp-academies-body .lp-diff-item[data-reveal]:nth-child(3) { transition-delay: 120ms; } .lp-academies-body .lp-diff-item[data-reveal]:nth-child(4) { transition-delay: 180ms; } .lp-academies-body .lp-diff-item[data-reveal]:nth-child(5) { transition-delay: 240ms; } /* ============================================================= REDUCED MOTION — kill all decorative motion Keep opacity changes for entry (still aids comprehension) but skip all transforms. ============================================================= */ @media (prefers-reduced-motion: reduce) { .lp-academies-body .lp-diff-item, .lp-academies-body .lp-diff-item:hover, .lp-academies-body .lp-diff-icon svg, .lp-academies-body .lp-diff-icon-dots circle, .lp-academies-body .lp-diff-icon-corners, .lp-academies-body .lp-diff-icon-arrow, .lp-academies-body .lp-diff-icon-flow { transform: none !important; animation: none !important; } .lp-academies-body .lp-diff-item[data-reveal] { opacity: 1; transform: none; transition: none; } .lp-academies-body .lp-diff-item:nth-child(4) .lp-diff-icon-check { stroke-dashoffset: 0; } } .lp-diff-body em { color: #E84B26; } /* ============================================================= FAQ TAG PREFIX Small uppercase tag prepended to a question, marking topical cluster. Visually distinct from the question text but doesn't dominate. ============================================================= */ .lp-faq-tag { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1E5F69; background: rgba(30, 95, 105, 0.08); padding: 3px 8px; border-radius: 4px; margin-right: 10px; vertical-align: middle; /* Subtle baseline shift to optically align with the question text */ position: relative; top: -1px; } /* Slight tweak for dark/teal sections if you use FAQ on dark in the future */ .lp-founders .lp-faq-tag, .lp-finalcta .lp-faq-tag { color: #C2F734; background: rgba(194, 247, 52, 0.12); }