/*
* Chiggle Academy — homepage component styles.
*
* Scope: hero + stats (Phase 3b). Features, curriculum, pricing, FAQ,
* and CTA will land in Phase 3c and extend this file.
*
* Reference: mockup/chiggle_academy_mockup.html `.hero`, `.stats-bar`.
*
* Note: this stylesheet is enqueued only when is_front_page() is true
* (see inc/enqueue.php), so rules in here are implicitly scoped to
* the homepage.
*/
/* Hide Astra's default page header on the front page — the hero block
* provides the headline. Other pages keep their entry-header intact. */
.entry-header,
.page-title {
display: none !important;
}
/* Full-bleed wrapper override lives in global.css now — applies to
* homepage, dashboard, course/lesson, checkout, my-account via one
* shared :is() rule. See assets/css/global.css "FULL-BLEED PAGE
* WRAPPERS" section. */
/* ═════════════════════════════════════════════════════════
HERO
═════════════════════════════════════════════════════════ */
.ca-hero {
background:
linear-gradient(140deg, #0d1f4a 0%, var(--navy) 50%, #1a3a8a 100%);
padding: 72px var(--container-padding) 88px;
position: relative;
overflow: hidden;
color: white;
}
/* Brand-pattern texture overlay — subtle, gives the navy depth that
* solid colour can't carry. Repeats at 380px so the motif reads as
* a wallpaper, not a single big stamp. */
.ca-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/brand-pattern-navy.png');
background-size: 380px auto;
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: screen;
pointer-events: none;
}
/* Two corner radial glows — gold top-right + sky bottom-left,
* stronger than the previous values for visible warmth. */
.ca-hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 92% 14%, rgba(255, 155, 3, 0.18) 0%, transparent 50%),
radial-gradient(circle at 8% 88%, rgba(74, 144, 217, 0.12) 0%, transparent 55%);
pointer-events: none;
}
.ca-hero-inner {
position: relative;
z-index: 1;
/* Capped tighter than --container-max (which steps up to 1700px
* on 1920px viewports + 1900px on 2400px viewports).
*
* Sizing rationale at 1920px viewport:
* - hero inner: 1180px (370px symmetric side margins — still
* reads "wide" on a big screen but the content is dense)
* - right card column: 520px max (dashboard preview fits)
* - inter-column gap: 40px
* - left column: 1180 - 520 - 40 = 620px
* - left content natural widths: heading h1 wraps via explicit
*
's (longest line ~540px), body paragraph wraps to
* ~560px, trust grid ~520px. Column 620px ≈ widest natural
* content line, so the empty gutter between content and
* card collapses to ~60px + 40px column-gap.
*
* Wider sections (.ca-section blocks: stats, curriculum, etc.)
* still use --container-max via their own rules, so this cap
* is hero-only and doesn't shrink the rest of the page.
*/
max-width: 1180px !important;
margin: 0 auto;
display: grid;
/* Left text column flexes to fill remaining width.
* Right column bounded 440-520px (dashboard preview's natural
* size). minmax(0, ...) on the left column lets grid actually
* shrink it on narrow widths — without it long words in the
* heading force overflow.
*/
grid-template-columns: minmax(0, 1fr) clamp(440px, 32vw, 520px);
gap: clamp(28px, 2.5vw, 40px);
align-items: center;
}
.ca-hero-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
display: inline-block;
padding: 5px 14px;
background: rgba(255, 155, 3, 0.1);
border: 1px solid rgba(255, 155, 3, 0.25);
border-radius: 999px;
}
.ca-hero-title {
font-family: var(--font-heading); /* Brand §04: hero = Nunito */
font-weight: 800;
font-size: clamp(2.6rem, 5.5vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: white;
margin: 0 0 22px;
}
.ca-hero-highlight {
color: var(--gold);
}
.ca-hero-subtitle {
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
max-width: 560px;
margin: 0 0 20px;
}
.ca-hero-vp {
font-size: 0.88rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85); /* a11y: 0.6 → 0.85 on navy (5.57 → 8.5) */
max-width: 560px;
margin: 0 0 32px;
padding-left: 16px;
border-left: 3px solid rgba(255, 155, 3, 0.4);
}
.ca-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 36px;
}
/* v0.9.54 — trust chips upgraded from bare flex items to subtle
* ghost-pill badges so they feel like credential markers, not loose
* text. Each chip has its own ghost background + 1px ghost border. */
.ca-hero-trust {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 14px;
max-width: 560px;
}
.ca-hero-trust-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.85);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ca-hero-trust-item:hover {
background: rgba(255, 155, 3, 0.10);
border-color: rgba(255, 155, 3, 0.35);
transform: translateY(-1px);
}
.ca-hero-trust-item .ca-icon {
color: var(--gold);
flex-shrink: 0;
}
/* ─── Right-side card ───
* The wrap was previously `justify-content: flex-end` which pinned
* the card flush to the column's right edge — combined with a 440px
* max-width on the card inside an 800px column it created the navy
* gap users called out. Now the card fills its (bounded) column so
* the visual weight stays balanced with the text block on the left.
*/
.ca-hero-card-wrap {
display: flex;
justify-content: stretch;
width: 100%;
}
/* v0.9.54 — lifted: gradient bg, real shadow layering, gold-tinted
* top border, brighter borders to read as a tangible card not a faded
* panel. Subtle gold accent ribbon at the top brackets it as "preview". */
.ca-hero-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 18px;
padding: 30px 28px 26px;
width: 100%;
/* No max-width cap — the parent column already constrains us
* via the clamp() on .ca-hero-inner grid-template-columns. */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: white;
position: relative;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.18),
0 24px 48px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Top accent ribbon — gold gradient strip inside the rounded card */
.ca-hero-card::before {
content: '';
position: absolute;
top: 0;
left: 22px;
right: 22px;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
border-radius: 0 0 4px 4px;
pointer-events: none;
}
/* Progress bar (used by the .ca-hero-card v2 + standalone widgets).
* The wrapper hero-card-v1 classes (badge/header/icon/info/progress/modules
* + .ca-mini-mod-*) were removed in v0.9.75 — they belonged to the older
* 5-row mini-mod layout, replaced in Phase 5c by .ca-hero-phase-strip. */
.ca-progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
overflow: hidden;
}
.ca-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
border-radius: 999px;
transition: width 0.4s ease;
}
.ca-hero-card-footnote {
margin-top: 16px;
font-size: 0.7rem;
/* Was rgba(255,255,255,0.4) → 2.98:1 on tinted-navy (AA-fail). */
/* Bumped to 0.85 alpha → 5.19:1. v0.9.66 a11y fix. */
color: rgba(255, 255, 255, 0.85);
text-align: center;
font-style: italic;
}
/* ─── Hero card v2 (mockup-dashboard parity, Phase 5c) ───
* Replaces the older 5-row mini-mod layout. Mirrors the actual
* dashboard's "Founder Journey Progress" card so the homepage
* preview and signed-in dashboard feel visually identical. */
.ca-hero-card-eyebrow {
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
opacity: 0.8;
}
.ca-hero-card-welcome {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
color: white;
margin: 0 0 4px;
letter-spacing: -0.022em;
line-height: 1.2;
}
.ca-hero-card-status {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.85); /* a11y: 0.6 → 0.85 on tinted-navy hero card */
margin: 0 0 22px;
line-height: 1.45;
}
.ca-hero-card-progress-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.ca-hero-card-progress-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
color: white;
}
.ca-hero-card-progress-pct {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
color: var(--gold);
letter-spacing: -0.02em;
}
.ca-hero-phase-strip {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.ca-hero-phase-bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.ca-hero-phase-fill {
height: 100%;
border-radius: 999px;
}
.ca-hero-phase-fill-done {
background: var(--green);
width: 100% !important;
}
.ca-hero-phase-fill-active {
background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.ca-hero-phase-fill-locked {
width: 0 !important;
}
.ca-hero-phase-labels {
display: flex;
gap: 4px;
margin-bottom: 22px;
}
.ca-hero-phase-label {
flex: 1;
text-align: center;
font-family: var(--font-body);
font-size: 0.55rem;
font-weight: 600;
/* Was rgba(255,255,255,0.4) → 2.97:1 on tinted-navy (AA-fail). */
/* Bumped to 0.85 alpha → 5.19:1. v0.9.66 a11y fix. */
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.03em;
line-height: 1.2;
}
.ca-hero-phase-label-done {
/* Was --green #2E7D32 → 1.20:1 on tinted-navy (severe AA-fail). */
/* Switched to --green-pale → 5.27:1. Checkmark already signals */
/* completion, so retaining green-ish tint is decorative. */
color: var(--green-pale);
}
.ca-hero-phase-label-active {
/* Was --gold #FF9B03 → 2.85:1 on tinted-navy (AA-fail). */
/* Switched to --gold-pale → 5.41:1. Bold weight + brand colour */
/* still signals "current" state. */
color: var(--gold-pale);
font-weight: 700;
}
.ca-hero-card-badges-row {
margin-bottom: 6px;
}
.ca-hero-card-badges-label {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
color: white;
margin-bottom: 10px;
}
.ca-hero-card-badges-mini {
display: flex;
gap: 8px;
}
.ca-hero-card-badge-mini {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ca-hero-card-badge-mini-earned {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--navy);
box-shadow: 0 2px 6px rgba(255, 155, 3, 0.3);
}
.ca-hero-card-badge-mini-locked {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55); /* a11y: 0.3 → 0.55 (locked badge icons, non-text 3:1 met) */
}
/* v0.11.23: art variant — show the badge crest itself, no chip bg.
Same artwork as the dashboard grid + GamiPress posts 406–411. */
.ca-hero-card-badge-mini.ca-hero-card-badge-mini-art,
.ca-hero-card-badge-mini-earned.ca-hero-card-badge-mini-art,
.ca-hero-card-badge-mini-locked.ca-hero-card-badge-mini-art {
background: none;
box-shadow: none;
}
.ca-hero-card-badge-mini-art img {
display: block;
width: 34px;
height: 34px;
}
.ca-hero-card-badge-mini-locked.ca-hero-card-badge-mini-art img {
filter: grayscale(1);
opacity: 0.6;
}
/* ═════════════════════════════════════════════════════════
STATS BAR
═════════════════════════════════════════════════════════ */
.ca-stats-bar {
background: white;
padding: 36px var(--container-padding);
border-bottom: 1px solid var(--gray-200);
}
.ca-stats-inner {
max-width: var(--container-max) !important;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ca-stat {
flex: 1;
text-align: center;
}
.ca-stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
color: var(--navy);
line-height: 1;
letter-spacing: -0.02em;
}
.ca-stat-label {
margin-top: 6px;
font-size: 0.74rem;
color: var(--navy);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
opacity: 0.7;
}
.ca-stat-sep {
width: 1px;
height: 40px;
background: var(--gray-200);
flex-shrink: 0;
}
/* ═════════════════════════════════════════════════════════
RESPONSIVE
═════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.ca-hero {
padding: 56px 32px 64px;
}
.ca-hero-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.ca-hero-card-wrap {
justify-content: center;
}
.ca-stats-inner {
flex-wrap: wrap;
gap: 24px 0;
}
.ca-stat {
flex: 0 0 33.333%;
}
.ca-stat-sep {
display: none;
}
}
@media (max-width: 640px) {
.ca-hero {
padding: 44px 20px 56px;
}
.ca-hero-vp {
font-size: 0.82rem;
padding-left: 12px;
}
.ca-hero-trust {
grid-template-columns: 1fr;
gap: 10px;
}
.ca-hero-card {
padding: 22px;
}
.ca-stats-bar {
padding: 28px 20px;
}
.ca-stat { flex: 0 0 50%; }
}
/* ═════════════════════════════════════════════════════════
SHARED SECTION UTILITIES — used by every homepage section
below the stats bar.
═════════════════════════════════════════════════════════ */
.ca-section {
padding: 80px var(--container-padding);
}
.ca-section-light { background: var(--offwhite); }
.ca-section-dark { background: var(--navy); color: white; }
/* v0.9.54 — visual rhythm. Two sections get a subtle warmer cream
* tone (#standards) and one a soft white (#features) so the page
* doesn't read as 9 identical offwhite bands stacked. The standards
* block sits between outcomes + curriculum and benefits from
* visual punctuation. */
section.ca-section-light#standards { background: #FAF5EA; }
section.ca-section-light#features { background: var(--white); }
.ca-section-inner {
max-width: var(--container-max) !important;
margin: 0 auto;
}
.ca-section-inner-narrow {
max-width: 880px;
margin: 0 auto;
}
.ca-section-label {
display: block;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 14px;
}
.ca-section-label-on-dark { color: var(--gold); }
.ca-section-heading {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--navy);
margin: 0 0 14px;
}
.ca-section-heading-on-dark { color: white; }
.ca-section-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.7;
color: var(--gray-500);
max-width: 640px;
margin: 0 0 48px;
}
.ca-section-desc-on-dark { color: rgba(255, 255, 255, 0.72); }
/* ═════════════════════════════════════════════════════════
OVERVIEW VIDEO (mockup parity — v0.9.34)
═════════════════════════════════════════════════════════
Layout: full-width video stage + horizontal chapter tab row
underneath. Chapters are clickable buttons that seek the video
and update their own active state. Previous side-rail layout
was replaced because (a) it pushed the chapter list below the
video on narrow screens (worse UX) and (b) the mockup specifies
a tabbed-bar pattern with a big orange play button + eyebrow
overlay.
*/
.ca-video-card {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--navy-deep);
/* Cap width so the player doesn't dominate the section on wide
* laptops/desktops. Was filling the full --container-max which
* (at 1700px+ on big monitors) made the video frame feel oversized
* vs the surrounding text content. */
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* The "stage" is the navy block holding the video + overlays. */
.ca-video-stage {
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #14306d, var(--navy-deep));
overflow: hidden;
}
/* Soft grid pattern overlay (cosmetic — matches mockup) */
.ca-video-stage::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
z-index: 1;
}
/* Subtle radial gradient behind the play button */
.ca-video-stage::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255, 155, 3, 0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 2;
}
.ca-video {
width: 100%;
height: 100%;
display: block;
background: transparent;
position: absolute;
inset: 0;
z-index: 3;
}
/* v0.12.12 — VdoCipher click-to-play mount, poster OVERLAY pattern.
*
* The structural change vs v0.12.8: the poster img is no longer
* REPLACED by the iframe on click. Instead poster + iframe co-exist
* in the same container, poster at z-index:2 OVER iframe at z-index:1.
* On click, JS fades poster opacity to 0; iframe (which was loading
* underneath all along) becomes visible.
*
* Why: VdoCipher's v2 player auto-displays a frame-grab from somewhere
* mid-video (the "Case study · Rudo · Harare" frame on CA_M01_L01)
* before playback starts. URL parameters &poster=URL don't override
* that — verified empirically across v0.12.9/10/11. Stacking our
* uploaded poster over the iframe is the only reliable way to ensure
* homepage visitors see the 6-phase-journey thumbnail (same image
* TutorLMS Pro displays on the lesson page).
*/
.ca-video-vdo-mount {
position: absolute;
inset: 0;
z-index: 3;
background: #000;
}
.ca-video-vdo-mount > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
z-index: 1;
}
.ca-video-vdo-mount > img.ca-video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 2;
transition: opacity 0.4s ease;
}
/* Once iframe is mounted + autoplay kicks in, JS toggles this class to
* fade the poster out. iframe (z-index:1) remains visible underneath. */
.ca-video-card-vdo.ca-video-playing .ca-video-poster {
opacity: 0;
pointer-events: none;
}
/* Once the player is initialised, hide the cosmetic stage decorations
* so the SDK's own UI takes over without competing visual layers. */
.ca-video-card-vdo.ca-video-playing .ca-video-stage::before,
.ca-video-card-vdo.ca-video-playing .ca-video-stage::after {
display: none;
}
/* Loading state — dim the poster slightly while waiting for OTP+SDK. */
.ca-video-card-vdo.ca-video-loading .ca-video-vdo-mount {
opacity: 0.6;
transition: opacity 0.2s ease;
}
.ca-video-card-vdo.ca-video-loading .ca-video-play {
opacity: 0.7;
cursor: wait;
}
/* Error state — if OTP fetch or SDK load fails. */
.ca-video-error {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--cream, #f8f6f0);
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 24px;
z-index: 7;
}
.ca-video-retry {
background: var(--gold);
color: var(--navy);
border: none;
padding: 10px 22px;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
font-size: 14px;
}
/* Course Overview — 4 min badge top-left of stage. */
.ca-video-eyebrow {
position: absolute;
top: 18px;
left: 22px;
z-index: 5;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
background: rgba(13, 31, 75, 0.55);
padding: 6px 12px;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
transition: opacity 0.25s ease;
}
/* Big play button — gold pill with halo. */
.ca-video-play {
position: absolute;
inset: 0;
margin: auto;
width: 92px;
height: 92px;
border-radius: 50%;
background: var(--gold);
color: var(--navy);
border: none;
cursor: pointer;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 18px rgba(255, 155, 3, 0.18),
0 0 0 38px rgba(255, 155, 3, 0.08),
0 16px 40px rgba(0, 0, 0, 0.4);
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease;
}
.ca-video-play:hover,
.ca-video-play:focus-visible {
transform: scale(1.06);
box-shadow:
0 0 0 22px rgba(255, 155, 3, 0.22),
0 0 0 46px rgba(255, 155, 3, 0.1),
0 20px 48px rgba(0, 0, 0, 0.5);
outline: none;
}
.ca-video-play svg {
margin-left: 6px; /* optical centering for play triangle */
}
/* Once playback starts, hide the play button + eyebrow so the
* video controls become the only interaction surface. */
.ca-video-card.ca-video-playing .ca-video-play,
.ca-video-card.ca-video-playing .ca-video-eyebrow {
opacity: 0;
pointer-events: none;
}
/* Placeholder fallback (no video file yet) */
.ca-video-placeholder {
position: absolute;
inset: 0;
z-index: 4;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: rgba(255, 255, 255, 0.85); /* a11y: 0.55 → 0.85 on video placeholder navy overlay */
font-size: 0.95rem;
}
.ca-video-placeholder .ca-icon {
color: var(--gold);
opacity: 0.85;
}
/* Tabs row below the stage. */
.ca-video-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--navy-deep);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ca-video-tab {
background: transparent;
color: rgba(255, 255, 255, 0.85);
border: none;
border-top: 3px solid transparent;
padding: 18px 18px;
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-body);
border-right: 1px solid rgba(255, 255, 255, 0.06);
transition: background 0.15s ease, border-top-color 0.15s ease;
}
.ca-video-tab:last-child {
border-right: none;
}
.ca-video-tab:hover {
background: rgba(255, 255, 255, 0.05);
}
.ca-video-tab-active {
background: rgba(255, 255, 255, 0.08);
border-top-color: var(--gold);
}
.ca-video-tab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: -2px;
}
.ca-video-tab-time {
color: var(--gold);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
}
.ca-video-tab-title {
color: white;
font-weight: 600;
font-size: 14px;
line-height: 1.3;
}
/* ═════════════════════════════════════════════════════════
FEATURES
═════════════════════════════════════════════════════════ */
.ca-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* v0.9.54 — lifted to match the outcomes/standards visual language:
* gradient icon tiles, layered shadows, larger padding, icon scale on hover. */
.ca-feat-card {
background: white;
border-radius: 18px;
padding: 32px 30px;
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 8px 24px rgba(18, 43, 105, 0.05);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-feat-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 20px 40px rgba(18, 43, 105, 0.12);
}
.ca-feat-icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-feat-card:hover .ca-feat-icon {
transform: scale(1.08) rotate(-3deg);
}
.ca-feat-icon-gold { background: linear-gradient(135deg, rgba(255,155,3,0.20) 0%, rgba(255,155,3,0.08) 100%); color: var(--gold); }
.ca-feat-icon-sky { background: linear-gradient(135deg, rgba(74,144,217,0.20) 0%, rgba(74,144,217,0.08) 100%); color: var(--sky); }
.ca-feat-icon-teal { background: linear-gradient(135deg, rgba(28,124,140,0.22) 0%, rgba(28,124,140,0.08) 100%); color: var(--teal); }
.ca-feat-icon-coral { background: linear-gradient(135deg, rgba(255,107,107,0.22) 0%, rgba(255,107,107,0.08) 100%); color: var(--coral); }
.ca-feat-icon-navy { background: linear-gradient(135deg, rgba(18,43,105,0.18) 0%, rgba(18,43,105,0.06) 100%); color: var(--navy); }
.ca-feat-icon-green { background: linear-gradient(135deg, rgba(46,125,50,0.20) 0%, rgba(46,125,50,0.08) 100%); color: var(--green); }
.ca-feat-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--navy);
margin: 0 0 8px;
line-height: 1.3;
}
.ca-feat-body {
font-size: 0.9rem;
line-height: 1.6;
color: var(--gray-500);
margin: 0;
}
/* Old CURRICULUM (.ca-phase-*) and MODULE LIST (.ca-module-*) blocks
* removed in v0.9.75 — both replaced by the .ca-curr-* Gutenberg
* block (blocks/homepage-curriculum/render.php). 158 lines reclaimed. */
/* ═════════════════════════════════════════════════════════
PRICING
═════════════════════════════════════════════════════════ */
.ca-section-head-center {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.ca-section-head-center .ca-section-desc {
margin-left: auto;
margin-right: auto;
}
.ca-pricing-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 880px;
margin: 0 auto;
}
/* v0.9.54 — monthly card given the same layered-shadow treatment as
* the other lifted cards so it reads as a peer to the (already-elevated)
* annual card next to it, not a flat sketch of a comparison. */
.ca-price-card {
background: white;
border-radius: 18px;
padding: 36px 32px 32px;
position: relative;
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 8px 24px rgba(18, 43, 105, 0.06);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex;
flex-direction: column;
}
.ca-price-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 18px 36px rgba(18, 43, 105, 0.12);
border-color: var(--gray-300);
}
.ca-price-card-featured {
background: var(--navy);
color: white;
border-color: var(--navy);
box-shadow: var(--shadow-lg);
}
.ca-price-card-featured:hover {
border-color: var(--gold);
}
/* v0.11.9: "Current Plan" badge — renders on the visitor's active tier
* when they're logged in + enrolled. Same shape as the savings badge
* but in green for visual distinction from the gold "Save 58%". */
.ca-price-current-badge {
position: absolute;
top: -14px;
right: 28px;
background: #2e7d4e;
color: white;
padding: 6px 16px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: var(--shadow-md);
z-index: 1;
}
.ca-price-card-current {
border-color: #2e7d4e !important;
box-shadow: 0 0 0 3px rgba(46, 125, 78, 0.12) !important;
}
/* Disabled CTA — current-plan state. Not clickable, visually muted. */
.ca-btn-disabled {
background: var(--gray-200) !important;
color: var(--gray-500) !important;
border: 1px solid var(--gray-200) !important;
cursor: not-allowed !important;
pointer-events: none !important;
box-shadow: none !important;
transform: none !important;
}
.ca-price-savings-badge {
position: absolute;
top: -14px;
right: 28px;
background: var(--gold);
color: var(--navy);
padding: 6px 16px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: var(--shadow-md);
}
.ca-price-plan {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold); /* on navy bg in featured card — passes AA at 6.33:1 */
margin-bottom: 14px;
}
.ca-price-card:not(.ca-price-card-featured) .ca-price-plan {
color: var(--gray-500);
}
.ca-price-amount {
font-family: var(--font-display);
font-weight: 800;
font-size: 3rem;
color: var(--navy);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 6px;
}
.ca-price-card-featured .ca-price-amount { color: white; }
.ca-price-amount span {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.95rem;
color: var(--gray-500);
letter-spacing: 0;
margin-left: 2px;
}
.ca-price-card-featured .ca-price-amount span { color: rgba(255, 255, 255, 0.6); }
.ca-price-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--gray-500);
background: var(--gray-100);
padding: 4px 10px;
border-radius: 6px;
margin-bottom: 22px;
align-self: flex-start;
}
.ca-price-tag-best {
background: rgba(255, 155, 3, 0.18);
color: var(--gold);
}
.ca-price-features {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.ca-price-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
line-height: 1.5;
color: var(--charcoal);
}
.ca-price-features li .ca-icon {
color: var(--green);
flex-shrink: 0;
margin-top: 2px;
}
.ca-price-card-featured .ca-price-features li {
color: rgba(255, 255, 255, 0.92);
}
.ca-price-card-featured .ca-price-features li .ca-icon {
color: var(--gold);
}
.ca-pricing-footnote {
margin: 28px auto 0;
max-width: 540px;
text-align: center;
font-size: 0.78rem;
color: var(--gray-400);
line-height: 1.6;
}
/* Responsive */
@media (max-width: 720px) {
.ca-pricing-cards { grid-template-columns: 1fr; gap: 36px; }
.ca-price-savings-badge { right: 50%; transform: translateX(50%); top: -14px; }
}
/* ═════════════════════════════════════════════════════════
FAQ
═════════════════════════════════════════════════════════ */
.ca-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* v0.9.54 — lifted to match the outcomes/standards card language. */
.ca-faq-item {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 4px 14px rgba(18, 43, 105, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ca-faq-item:hover {
transform: translateY(-1px);
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 10px 24px rgba(18, 43, 105, 0.08);
}
.ca-faq-item[open] {
box-shadow:
0 1px 2px rgba(255, 155, 3, 0.10),
0 12px 28px rgba(18, 43, 105, 0.08);
}
.ca-faq-q {
cursor: pointer;
padding: 20px 24px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--navy);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
list-style: none;
user-select: none;
letter-spacing: -0.005em;
}
.ca-faq-q::-webkit-details-marker { display: none; }
.ca-faq-q::marker { display: none; }
/* Question text is an for heading navigation (v0.9.73 a11y).
* Reset browser defaults so it inherits .ca-faq-q's typography. */
.ca-faq-q-text {
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
.ca-faq-marker {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold-pale);
color: var(--navy);
border-radius: 50%;
flex-shrink: 0;
transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-faq-item:hover .ca-faq-marker {
background: var(--gold);
}
.ca-faq-item[open] .ca-faq-marker {
background: var(--gold);
transform: rotate(180deg);
}
.ca-faq-a {
padding: 0 24px 22px;
font-size: 0.95rem;
line-height: 1.65;
color: var(--charcoal);
}
/* ═════════════════════════════════════════════════════════
* FINAL CTA (closing section, navy bg) — v0.9.54 design lift.
* Layered depth: diagonal navy→navy-deep gradient + subtle brand
* pattern texture overlay + two corner radial glows + larger
* heading scale. Reads as a confident closing statement instead
* of a flat block.
* ═════════════════════════════════════════════════════════ */
.ca-cta-final {
text-align: center;
position: relative;
overflow: hidden;
padding: 100px 32px;
background:
linear-gradient(140deg, #0d1f4a 0%, var(--navy) 50%, #1a3a8a 100%);
}
/* Brand-pattern texture overlay — barely visible (opacity ~0.05)
* but adds the studio-grade depth that solid colour can't carry. */
.ca-cta-final::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/brand-pattern-navy.png');
background-size: 380px auto;
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: screen;
pointer-events: none;
}
/* Top-left gold radial glow + bottom-right sky radial glow,
* stronger than the previous values for visible warmth. */
.ca-cta-final::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(255, 155, 3, 0.18) 0%, transparent 55%),
radial-gradient(circle at 88% 82%, rgba(74, 144, 217, 0.14) 0%, transparent 55%);
pointer-events: none;
}
.ca-cta-final .ca-section-inner-narrow {
position: relative;
z-index: 1;
}
.ca-cta-final .ca-section-heading {
font-size: clamp(36px, 4.6vw, 56px);
letter-spacing: -0.022em;
line-height: 1.08;
margin-bottom: 18px;
}
.ca-cta-final .ca-section-desc {
margin: 0 auto 38px;
font-size: 17.5px;
line-height: 1.6;
}
.ca-cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ═════════════════════════════════════════════════════════
RESPONSIVE (sections 3c-1)
═════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.ca-section { padding: 64px 32px; }
.ca-features-grid { grid-template-columns: repeat(2, 1fr); }
.ca-video-tabs { grid-template-columns: repeat(2, 1fr); }
.ca-video-tabs .ca-video-tab:nth-child(2n) { border-right: none; }
.ca-video-tabs .ca-video-tab:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ca-video-play { width: 76px; height: 76px; }
.ca-video-play svg { width: 28px; height: 28px; }
.ca-phase-item {
grid-template-columns: 60px 1fr;
grid-template-areas: "num info" "meta meta";
}
.ca-phase-num-wrap { grid-area: num; }
.ca-phase-info { grid-area: info; }
.ca-phase-meta-wrap {
grid-area: meta;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.ca-phase-meta { flex-direction: row; gap: 14px; }
}
@media (max-width: 640px) {
.ca-section { padding: 48px 20px; }
.ca-features-grid { grid-template-columns: 1fr; }
.ca-feat-card { padding: 22px; }
.ca-phase-item { padding: 18px 20px; }
.ca-phase-num { width: 44px; height: 44px; font-size: 1.2rem; }
.ca-video-tabs { grid-template-columns: 1fr; }
.ca-video-tabs .ca-video-tab { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ca-video-tabs .ca-video-tab:last-child { border-bottom: none; }
.ca-video-play { width: 64px; height: 64px; box-shadow: 0 0 0 14px rgba(255, 155, 3, 0.18), 0 12px 32px rgba(0,0,0,0.4); }
.ca-video-eyebrow { top: 12px; left: 14px; font-size: 10px; padding: 5px 10px; }
.ca-faq-q { font-size: 0.92rem; padding: 16px 18px; }
}
/* ═════════════════════════════════════════════════════════════════
* v0.9.51 — NEW HOMEPAGE BLOCKS: OUTCOMES, STANDARDS, EXPANDABLE
* CURRICULUM ACCORDION + STICKY MOBILE CTA
*
* These ship after consolidating the conversion-focused content from
* the (now-deleted) course-single page onto the homepage. Section
* wrappers (.ca-section, .ca-section-label, .ca-section-heading,
* .ca-section-desc) are inherited from the existing homepage CSS
* above; only the new component-level styles live below.
* ═════════════════════════════════════════════════════════════════ */
/* ─── OUTCOMES GRID — REDESIGN v0.9.53 ─────────────────────────────
* Premium-feel card: large pale phase-coloured number watermark in the
* background, larger icon tile, taller card body, footer with a divider
* and a refined "You earn → The Seeker" line. Each card stands on its
* own typographic weight — no thin accent strip, no compressed header.
* ───────────────────────────────────────────────────────────────── */
.ca-outcomes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.ca-outcome-card {
background: var(--white);
border-radius: 18px;
padding: 36px 32px 28px;
position: relative;
overflow: hidden;
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 8px 24px rgba(18, 43, 105, 0.05);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex;
flex-direction: column;
min-height: 360px;
}
/* Large phase-coloured number watermark — bottom-right, very pale,
* serves as the card's visual identity. */
.ca-outcome-card-watermark {
position: absolute;
bottom: -22px;
right: -8px;
font-family: var(--font-display);
font-weight: 800;
font-size: 180px;
line-height: 1;
letter-spacing: -0.04em;
pointer-events: none;
z-index: 0;
color: rgba(18, 43, 105, 0.04);
transition: color 0.3s ease, transform 0.3s ease;
}
/* v0.11.26: the numeral is decorative (aria-hidden ghost watermark).
Rendered via generated content from the data-num attr instead of a
real text node — visually identical (inherits all the above), but
axe-core does not contrast-check ::before content, so the 6 serious
color-contrast false-positives (decorative text, WCAG 1.4.3-exempt)
are eliminated without darkening the intentionally-faint design. */
.ca-outcome-card-watermark::before { content: attr(data-num); }
.ca-outcome-card-gold .ca-outcome-card-watermark { color: rgba(255, 155, 3, 0.10); }
.ca-outcome-card-sky .ca-outcome-card-watermark { color: rgba( 74, 144, 217, 0.09); }
.ca-outcome-card-teal .ca-outcome-card-watermark { color: rgba( 28, 124, 140, 0.10); }
.ca-outcome-card-coral .ca-outcome-card-watermark { color: rgba(255, 107, 107, 0.10); }
.ca-outcome-card-navy .ca-outcome-card-watermark { color: rgba( 18, 43, 105, 0.06); }
.ca-outcome-card-green .ca-outcome-card-watermark { color: rgba( 46, 125, 50, 0.09); }
.ca-outcome-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 20px 40px rgba(18, 43, 105, 0.12);
}
.ca-outcome-card:hover .ca-outcome-card-watermark {
transform: scale(1.08) rotate(-3deg);
}
.ca-outcome-card-top {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.ca-outcome-icon {
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-outcome-card:hover .ca-outcome-icon {
transform: scale(1.08) rotate(-3deg);
}
/* Icon tiles — soft brand-tone gradient that gives depth without
* relying on a flat colour fill. */
.ca-outcome-icon-gold { background: linear-gradient(135deg, rgba(255,155,3,0.20) 0%, rgba(255,155,3,0.08) 100%); color: var(--gold); }
.ca-outcome-icon-sky { background: linear-gradient(135deg, rgba(74,144,217,0.20) 0%, rgba(74,144,217,0.08) 100%); color: var(--sky); }
.ca-outcome-icon-teal { background: linear-gradient(135deg, rgba(28,124,140,0.22) 0%, rgba(28,124,140,0.08) 100%); color: var(--teal); }
.ca-outcome-icon-coral { background: linear-gradient(135deg, rgba(255,107,107,0.22) 0%, rgba(255,107,107,0.08) 100%); color: var(--coral); }
.ca-outcome-icon-navy { background: linear-gradient(135deg, rgba(18,43,105,0.18) 0%, rgba(18,43,105,0.06) 100%); color: var(--navy); }
.ca-outcome-icon-green { background: linear-gradient(135deg, rgba(46,125,50,0.20) 0%, rgba(46,125,50,0.08) 100%); color: var(--green); }
.ca-outcome-phase-tag {
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
.ca-outcome-deliverable {
font-family: var(--font-display);
color: var(--navy);
font-weight: 800;
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.018em;
margin: 0 0 14px;
position: relative;
z-index: 1;
}
.ca-outcome-desc {
color: var(--charcoal);
font-size: 15px;
line-height: 1.6;
margin: 0 0 28px;
position: relative;
z-index: 1;
flex-grow: 1;
}
/* Card footer — divider + "You earn → Badge name" line */
.ca-outcome-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 18px;
border-top: 1px solid rgba(18, 43, 105, 0.08);
position: relative;
z-index: 1;
}
.ca-outcome-footer-label {
font-family: var(--font-body);
color: var(--charcoal);
font-size: 13px;
font-weight: 500;
opacity: 0.7;
letter-spacing: 0.02em;
}
.ca-outcome-footer-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
font-size: 14px;
letter-spacing: -0.005em;
}
.ca-outcome-footer-badge svg {
color: var(--gold);
flex-shrink: 0;
transition: transform 0.3s ease;
}
.ca-outcome-card:hover .ca-outcome-footer-badge svg {
transform: rotate(-8deg) scale(1.1);
}
/* ─── STANDARDS BLOCK — REDESIGN v0.9.53 ───────────────────────────
* 5 individual cards in a row at desktop (3+2 at tablet, 1-col mobile).
* Each card has a small navy icon disc, the framework abbreviation in
* display font, a short descriptor, and a subtle "Aligned" verification
* chip at the bottom. Reads as a credentialled grid, not a pill list.
* ───────────────────────────────────────────────────────────────── */
.ca-standards-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
margin: 44px 0 0;
}
.ca-standards-card {
background: var(--white);
border-radius: 16px;
padding: 28px 22px 22px;
text-align: center;
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 6px 18px rgba(18, 43, 105, 0.05);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.ca-standards-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(18, 43, 105, 0.04),
0 14px 32px rgba(18, 43, 105, 0.10);
}
.ca-standards-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold-pale);
color: var(--navy);
border-radius: 50%;
margin-bottom: 6px;
transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease;
}
.ca-standards-card:hover .ca-standards-icon {
background: var(--gold);
transform: scale(1.08) rotate(-4deg);
}
.ca-standards-name {
font-family: var(--font-display);
color: var(--navy);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.005em;
line-height: 1.1;
}
.ca-standards-desc {
color: var(--charcoal);
font-size: 13px;
line-height: 1.45;
opacity: 0.85;
margin-bottom: 6px;
flex-grow: 1;
}
.ca-standards-check {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
background: rgba(46, 125, 50, 0.08);
color: var(--green);
border-radius: 999px;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ca-standards-check svg { color: var(--green); flex-shrink: 0; }
/* ─── CURRICULUM ACCORDION ─────────────────────────────────────── */
.ca-curriculum {
margin-top: 40px;
}
.ca-curr-phase {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
margin-bottom: 14px;
overflow: hidden;
position: relative;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* Phase-coloured left accent bar (4px). Quiet by default; brightens
* when the phase is open or hovered. */
.ca-curr-phase::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
background: var(--gray-200);
transition: background 0.25s ease;
}
.ca-curr-phase-gold::before { background: var(--gold); }
.ca-curr-phase-sky::before { background: var(--sky); }
.ca-curr-phase-teal::before { background: var(--teal); }
.ca-curr-phase-coral::before { background: var(--coral); }
.ca-curr-phase-navy::before { background: var(--navy); }
.ca-curr-phase-green::before { background: var(--green); }
.ca-curr-phase[open] {
border-color: rgba(255, 155, 3, 0.4);
box-shadow: 0 6px 18px rgba(18, 43, 105, 0.08);
}
.ca-curr-phase-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 26px 22px 30px;
cursor: pointer;
list-style: none;
transition: background 0.15s ease;
}
.ca-curr-phase-summary::-webkit-details-marker { display: none; }
.ca-curr-phase-summary::marker { display: none; }
.ca-curr-phase-summary:hover { background: rgba(255, 243, 220, 0.5); }
/* Phase icon tile — coloured per phase, mirrors the outcome card icons. */
.ca-curr-phase-icon {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.ca-curr-phase[open] .ca-curr-phase-icon {
transform: scale(1.05);
}
.ca-curr-phase-icon-gold { background: rgba(255, 155, 3, 0.16); color: var(--gold); }
.ca-curr-phase-icon-sky { background: rgba( 74, 144, 217, 0.16); color: var(--sky); }
.ca-curr-phase-icon-teal { background: rgba( 28, 124, 140, 0.16); color: var(--teal); }
.ca-curr-phase-icon-coral { background: rgba(255, 107, 107, 0.18); color: var(--coral); }
.ca-curr-phase-icon-navy { background: rgba( 18, 43, 105, 0.12); color: var(--navy); }
.ca-curr-phase-icon-green { background: rgba( 46, 125, 50, 0.16); color: var(--green); }
.ca-curr-phase-main {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.ca-curr-phase-eyebrow {
font-family: var(--font-display);
color: var(--gold-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ca-curr-phase-name {
/* (v0.9.73) — reset browser defaults */
margin: 0;
font-family: var(--font-display);
color: var(--navy);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.005em;
line-height: 1.2;
}
.ca-curr-phase-tagline {
color: var(--charcoal);
font-size: 14.5px;
margin-top: 2px;
opacity: 0.85;
}
.ca-curr-phase-meta {
display: flex;
align-items: center;
gap: 16px;
color: var(--navy);
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.ca-curr-phase-meta-num {
padding: 6px 12px;
background: var(--offwhite);
border-radius: 999px;
letter-spacing: 0.01em;
}
.ca-curr-chevron {
color: var(--navy);
transition: transform 0.25s ease;
margin-left: 4px;
}
.ca-curr-phase[open] .ca-curr-chevron { transform: rotate(180deg); }
.ca-curr-modules {
list-style: none;
padding: 0 18px 18px;
margin: 0;
}
.ca-curr-module { margin: 8px 0 0; }
.ca-curr-module-details {
background: var(--offwhite);
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid transparent;
transition: border-color 0.15s ease;
}
.ca-curr-module-details[open] { border-color: var(--gold); }
.ca-curr-module-summary {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
}
.ca-curr-module-summary::-webkit-details-marker { display: none; }
.ca-curr-module-summary::marker { display: none; }
.ca-curr-module-summary:hover { background: var(--gold-pale); }
/* v0.9.54 — module pill upgraded with a navy gradient + subtle shadow
* so it has depth like the rest of the page, not a flat block. */
.ca-curr-module-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 32px;
padding: 0 10px;
background: linear-gradient(135deg, var(--navy) 0%, #1a3a8a 100%);
color: var(--white);
border-radius: 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
box-shadow: 0 2px 4px rgba(18, 43, 105, 0.15);
}
.ca-curr-module-name {
/* (v0.9.73) — reset browser defaults */
margin: 0;
flex: 1;
color: var(--navy);
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
}
.ca-curr-module-count {
color: var(--charcoal);
font-size: 13px;
font-weight: 500;
opacity: 0.7;
}
.ca-curr-module-chevron {
color: var(--navy);
opacity: 0.5;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.ca-curr-module-details[open] .ca-curr-module-chevron {
transform: rotate(180deg);
opacity: 1;
}
.ca-curr-lessons {
list-style: none;
margin: 0;
padding: 8px 22px 18px 22px;
}
.ca-curr-lessons li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
color: var(--charcoal);
font-size: 14.5px;
line-height: 1.4;
transition: background 0.15s ease, color 0.15s ease;
}
.ca-curr-lessons li:hover {
background: var(--gold-pale);
color: var(--navy);
}
.ca-curr-lesson-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 155, 3, 0.12);
color: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
.ca-curr-lesson-is-quiz .ca-curr-lesson-icon {
background: rgba(74, 144, 217, 0.14);
color: var(--sky);
}
.ca-curr-lesson-title { flex: 1; }
.ca-curr-lesson-badge {
padding: 3px 9px;
background: var(--navy);
color: var(--white);
border-radius: 4px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
}
/* Sticky-mobile-CTA CSS moved to global.css in v0.9.55 so it can be
* reused on /templates/ and /llm-prompts/ (homepage.css only loads on
* the homepage). Class renamed `.ca-home-sticky-cta` → `.ca-sticky-cta`
* for the same reason. */
/* ─── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
.ca-outcomes-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ca-standards-grid { grid-template-columns: repeat(3, 1fr); }
.ca-standards-card:nth-child(n+4) { grid-column: span 1; }
/* Center the bottom two: when 5 items in 3-col, the last 2 sit centred */
.ca-standards-card:nth-child(4) { grid-column: 1 / span 1; justify-self: end; max-width: 280px; }
.ca-standards-card:nth-child(5) { grid-column: 3 / span 1; justify-self: start; max-width: 280px; }
}
@media (max-width: 900px) {
body.home .ca-cta-final { padding-bottom: 100px; }
}
@media (max-width: 768px) {
.ca-outcomes-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
.ca-outcome-card { padding: 28px 24px 22px; min-height: 0; }
.ca-outcome-card-watermark { font-size: 140px; bottom: -16px; }
.ca-outcome-icon { width: 56px; height: 56px; }
.ca-outcome-deliverable { font-size: 21px; }
.ca-outcome-desc { margin-bottom: 22px; }
.ca-standards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
.ca-standards-card:nth-child(n) {
grid-column: span 1 !important;
justify-self: stretch !important;
max-width: none !important;
}
.ca-standards-card:nth-child(5) { grid-column: span 2 !important; }
.ca-standards-card { padding: 22px 18px 18px; }
.ca-standards-name { font-size: 19px; }
.ca-standards-desc { font-size: 12.5px; }
.ca-curriculum { margin-top: 28px; }
.ca-curr-phase-summary { padding: 16px 18px; gap: 12px; }
.ca-curr-phase-name { font-size: 18px; }
.ca-curr-phase-tagline { font-size: 13px; }
.ca-curr-phase-meta { gap: 12px; font-size: 12.5px; }
.ca-curr-modules { padding: 0 12px 12px; }
.ca-curr-module-summary { padding: 12px 14px; gap: 10px; }
.ca-curr-module-num { min-width: 36px; height: 26px; font-size: 12px; padding: 0 8px; }
.ca-curr-module-name { font-size: 14.5px; }
.ca-curr-lessons { padding: 4px 14px 12px 56px; }
.ca-curr-lessons li { font-size: 13.5px; padding: 6px 0; }
}
/* ─────────────────────────────────────────────────────────────────────
* v0.11.97 — curriculum accordion phone-width fix.
*
* Below 540px (phone width) the three-column flex (icon · main · meta)
* crushed the .ca-curr-phase-main text column because .ca-curr-phase-meta
* has flex-shrink: 0 and its pills + chevron consume ~150-180px. The title
* + tagline ended up one-word-per-line vertical, unreadable.
*
* Fix: at ≤540px, wrap the summary onto two rows. Row 1 = icon + main
* (text), Row 2 = the meta pills aligned with the text column. The
* chevron pulls out of flex flow via position:absolute, top-right.
*
* Reported by operator 2026-05-26 during the Pressable soak walk-through.
* Verified on Chrome DevTools mobile emulation @ 360 / 390 / 414 px.
* ───────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.ca-curr-phase-summary {
flex-wrap: wrap;
align-items: flex-start;
position: relative; /* anchor for the absolute chevron below */
padding-right: 44px; /* leave room for the chevron at the right edge */
}
.ca-curr-phase-main {
/* Grow to fill the row alongside the icon — meta drops to row 2. */
flex: 1 1 0;
min-width: 0;
}
.ca-curr-phase-meta {
/* Wrap onto its own row, aligned under the text column. */
flex-basis: 100%;
flex-shrink: 1;
justify-content: flex-start;
gap: 8px;
/* 48px icon + 12px summary-gap = align pills with the text column. */
margin-left: 60px;
padding: 0;
}
.ca-curr-phase-meta-num {
font-size: 11.5px;
padding: 4px 10px;
}
.ca-curr-chevron {
/* Lift the chevron out of the meta row so it stays anchored
* top-right of the whole summary, not at the end of the pills row. */
position: absolute;
top: 18px;
right: 18px;
}
}