/* ============================================================ NRI Sound of Roots — shared stylesheet (?v=12) Mobile-first. Tokens v2.0 (2026-06-23): "careful parent's field notebook, reimagined for a sunlit modern American kitchen." Warm earth palette + deep-teal anchor; Fraunces display + Inter body. Design-identity refresh v12 (2026-07-23): the swara system (eyebrow ticks, quiz Sa–Ni ladder, footer motif), Fraunces on H2s, tanpura drone on teal, marigold honest-pick chip. See design-refresh-spec.md. ============================================================ */ /* ---------- Self-hosted fonts (font-display: swap) ---------- Files live in /fonts/. Display weight (Fraunces 600) is preloaded in each page . Inter + Fraunces fall back to system serif/sans until the woff2 loads (swap), so first paint is never blocked. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; /* variable-ish range we use */ font-display: swap; src: url('../fonts/fraunces-display.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); } :root { /* ----- Surfaces / background (warmer, less yellow) ----- */ --color-bg: #FBF7F1; --color-surface: #FFFFFF; --color-surface-alt: #F3ECE1; /* ----- Primary terracotta (deepened ~half-step for AA) ----- */ --color-primary: #A23A1E; --color-primary-hover: #85290E; --color-primary-light: #F7E7DF; /* ----- Accent "raga green" (cooler/deeper than olive) ----- */ --color-accent: #3E6B4E; --color-accent-light: #E7F0E8; --color-gold: #B8841F; /* ----- Deep-teal anchor: hero band, footer, "evidence" surfaces ----- */ --color-teal-deep: #163B3A; --color-text-on-dark: #FBF7F1; /* cream text on teal/dark — AA verified (~11:1) */ --color-text-base: #1C1B19; --color-text-secondary:#5E5349; --color-text-muted: #8A7C70; /* fails AA at body sizes — use only for >=18.7px bold text */ --color-text-on-primary:#FFFFFF; --color-border: #E6DCCE; --color-border-strong: #C9B9A8; --color-error: #C0392B; --color-success: #3A7D44; --color-warning: #B8841F; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;--space-20: 80px; --space-24: 96px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(28,27,25,0.08), 0 4px 12px rgba(28,27,25,0.06); --shadow-raised: 0 6px 24px rgba(28,27,25,0.12), 0 1px 4px rgba(28,27,25,0.07); --shadow-overlay: 0 8px 32px rgba(28,27,25,0.15); /* ----- Design-identity refresh v12 (2026-07-23): swara system + honest-pick marigold ----- */ --color-eyebrow-on-teal: #E9B88F; /* peach eyebrow on deep-teal surfaces */ --color-swara: #A23A1E; /* swara accent = primary terracotta */ --color-swara-muted: #C9B9A8; /* inactive swara on light = border-strong */ --color-swara-on-teal:#E9B88F; /* swara on deep-teal surfaces = eyebrow peach */ --color-marigold: #C77A0F; /* kumkum/marigold — reserved for the "the one we use" honest-pick tag ONLY */ } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text-base); font-family: var(--font-sans); font-size: 1.0625rem; /* ~17px — comfortable reading base */ line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { line-height: 1.2; color: var(--color-text-base); } /* Display serif: one Fraunces moment per viewport (the H1). */ h1 { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--space-4); } h2 { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.005em; margin: var(--space-8) 0 var(--space-4); } /* serif (was sans): Fraunces does section-head work — see refresh §4 */ h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; margin: var(--space-8) 0 var(--space-3); } @media (min-width: 1024px) { h1 { font-size: 2.75rem; } h2 { font-size: 1.875rem; } } h4 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-6) 0 var(--space-2); } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); } li { margin-bottom: var(--space-2); } small, .text-sm { font-size: var(--text-sm); } .muted { color: var(--color-text-secondary); } /* AA: body-size text must not use --color-text-muted */ .secondary { color: var(--color-text-secondary); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-primary); color: var(--color-text-on-primary); padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 768px) { .container { padding: 0 var(--space-8); } } main { padding-bottom: var(--space-16); } .page-intro { max-width: 720px; } .page-header { padding: var(--space-10) 0 var(--space-2); } .page-header .kicker { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: var(--space-2); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-border); height: 56px; transition: box-shadow 150ms ease; } .site-header.scrolled { box-shadow: var(--shadow-card); } .site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .wordmark { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; font-size: var(--text-lg); color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-2); } /* Emblem mark to the LEFT of the "Sound of Roots" text (header only; footer wordmark has no ). */ .wordmark-mark { display: block; width: auto; height: 30px; flex: none; } @media (min-width: 768px) { .wordmark-mark { height: 36px; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer; color: var(--color-text-base); } .site-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--color-surface); box-shadow: var(--shadow-overlay); transform: translateX(100%); transition: transform 200ms ease; padding: var(--space-16) var(--space-6) var(--space-6); overflow-y: auto; z-index: 60; } .site-nav.open { transform: translateX(0); } .site-nav ul { list-style: none; padding: 0; margin: 0; } .site-nav li { margin: 0; } .site-nav a { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text-base); font-weight: 500; font-size: var(--text-sm); border-radius: var(--radius-sm); } .site-nav a:hover { background: var(--color-primary-light); color: var(--color-primary-hover); } .site-nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; } .nav-close { position: absolute; top: var(--space-3); right: var(--space-3); min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer; font-size: var(--text-xl); color: var(--color-text-secondary); } .nav-cta { margin-top: var(--space-4); } .site-nav a.btn-primary { background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-pill); justify-content: center; padding: var(--space-2) var(--space-5); font-weight: 600; } .site-nav a.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary); } .nav-overlay { position: fixed; inset: 0; background: rgba(26,20,16,0.35); /* Must sit BELOW .site-header (position:sticky, z-index:50). The header creates a stacking context, so #site-nav's z-index:60 is trapped inside it and the drawer effectively stacks at the header's level (50). The overlay is a SIBLING of the header in the root context — at z-index 55 it painted OVER the whole drawer, eating every link tap. Dropping it to 45 keeps it above page content (z-auto) while the drawer stays tappable above it. */ z-index: 45; opacity: 0; pointer-events: none; transition: opacity 200ms ease; border: none; padding: 0; } .nav-overlay.open { opacity: 1; pointer-events: auto; } /* Desktop nav: 4 nowrap links + wordmark + Find Your Path CTA button fit comfortably. Flat bar ships at 768px. Verified in headless Chrome at 768x900: the 4 links + wordmark + CTA sit on one line with the button fully inside the right edge, no wrap of the nav items (measured 2026-07-08). Drawer below 768px. */ @media (min-width: 768px) { .site-header { height: 60px; } .nav-toggle, .nav-close { display: none; } .nav-overlay { display: none; } .site-nav { position: static; width: auto; transform: none; background: transparent; box-shadow: none; padding: 0; overflow: visible; } .site-nav ul { display: flex; align-items: center; gap: var(--space-1); } .site-nav a { padding: var(--space-2) var(--space-3); white-space: nowrap; } .site-nav a[aria-current="page"] { background: var(--color-primary-light); } .nav-cta { margin-top: 0; margin-left: var(--space-2); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-6); border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); text-decoration: none; cursor: pointer; border: none; transition: background-color 150ms ease, color 150ms ease; } .btn-primary { background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-card); } .btn-primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } @media (prefers-reduced-motion: no-preference) { .btn { transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-raised); } } .btn-ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-ghost:hover { background: var(--color-primary-light); color: var(--color-primary-hover); } .btn-on-primary { background: transparent; color: var(--color-text-on-primary); border: 1.5px solid var(--color-text-on-primary); } .btn-on-primary:hover { background: rgba(255,255,255,0.12); color: var(--color-text-on-primary); } /* ---------- Hero — asymmetric split: teal panel + photo bleed ---------- */ .hero { background: var(--color-teal-deep); color: var(--color-text-on-dark); overflow: hidden; } .hero .container { padding-left: 0; padding-right: 0; } .hero-grid { display: grid; gap: 0; } /* Mobile: photo on top, then teal text panel beneath. */ .hero-photo { order: -1; } /* Text panel (deep teal) */ .hero-copy { padding: var(--space-12) var(--space-4) var(--space-12); max-width: 620px; } .hero h1 { font-size: 2rem; color: var(--color-text-on-dark); line-height: 1.08; letter-spacing: -0.01em; } .hero .kicker { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-eyebrow-on-teal); margin-bottom: var(--space-3); /* contrast: 6.34:1 on #163B3A — AA (normal text) */ display: block; } .hero .subhead { font-size: var(--text-lg); color: rgba(251,247,241,0.85); max-width: 34em; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } /* Photo bleeds off the right edge; squared corners + elevation. */ .hero-photo { margin: 0; position: relative; } .hero-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; /* squared — founder wants sharp corners at every breakpoint */ } /* ---------- Hero carousel ---------- Progressive enhancement: with NO JS, slide 1 (.is-active by default in markup) renders and every slide would be in normal flow. JS adds .js-enhanced to the viewport which switches slides to absolute-stacked crossfade. Local stacking context stays low (viewport z-index:0; content z-index:1; controls z-index:2) so the carousel NEVER paints over the mobile nav (overlay z-index:45 / header z-index:50, both in the root context above the hero's local layers). */ /* The carousel fills its column and the viewport fills the carousel, so the photo is the dominant element (like the pre-carousel single-image hero) AND the overlaid controls (anchored to the viewport) always sit ON the photo — never in a dead teal band below it. */ .hero-carousel { position: relative; display: flex; } .hero-carousel__viewport { position: relative; z-index: 0; flex: 1 1 auto; width: 100%; min-width: 0; } /* No-JS baseline: slides flow normally but only slide 1 is shown, so the hero is never blank and there's no giant stack of images if scripting fails. */ .hero-slide { margin: 0; } .hero-carousel:not(.js-enhanced) .hero-slide:not(.is-active) { display: none; } .hero-slide img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; } /* JS-enhanced: crossfade stack. Slides absolutely overlap; active one is opaque. */ .hero-carousel.js-enhanced .hero-carousel__viewport { display: grid; } .hero-carousel.js-enhanced .hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; } .hero-carousel.js-enhanced .hero-slide.is-active { opacity: 1; visibility: visible; } /* Auto-advance runs for ALL users (see main.js). Motion users get a gentle 550ms eased cross-dissolve (ease-in-out cubic-bezier): the outgoing slide fades 1->0 while the incoming fades 0->1 on the SAME symmetric curve, so at the midpoint both sit near ~0.5 (a true cross-dissolve) and neither is ever fully opaque while the other is still visible — no double-exposure flash. 550ms completes well within the 2s dwell, so each slide holds fully visible for ~1.45s rather than living mid-fade. Reduced-motion users still advance but the fade stays near-instant (no long animated motion) — the eased fade below is scoped to no-preference ONLY and must never leak into reduce. Because the carousel keeps moving even under reduced-motion, the Pause toggle is ALWAYS shown and functional (JS never re-hides it); a moving carousel with no pause control would fail WCAG 2.2.2 (Pause, Stop, Hide). */ @media (prefers-reduced-motion: no-preference) { .hero-carousel.js-enhanced .hero-slide { transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 550ms; } .hero-carousel.js-enhanced .hero-slide.is-active { transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } } @media (prefers-reduced-motion: reduce) { .hero-carousel.js-enhanced .hero-slide { transition: opacity 0.01ms linear, visibility 0s linear 0.01ms; } .hero-carousel.js-enhanced .hero-slide.is-active { transition: opacity 0.01ms linear, visibility 0s linear 0s; } } /* ---- Overlaid controls (directly ON the photo) ---- Anchored to the VIEWPORT (the photo box), not the figure, so they always sit over the image — no dead teal band. A bottom scrim keeps them legible over any slide (incl. slide 2's bright stage lights). Dots centered; prev/next as edge arrows; Pause pinned bottom-right. */ .hero-carousel__controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "prev dots pause next"; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-3) var(--space-3); pointer-events: none; /* scrim is decorative; children re-enable */ /* Stronger scrim (0.72) so AA holds even over slide 2's bright lights. */ background: linear-gradient(to top, rgba(22,59,58,0.78) 0%, rgba(22,59,58,0.45) 45%, rgba(22,59,58,0) 100%); } .hero-carousel__controls > * { pointer-events: auto; } .hero-carousel__prev { grid-area: prev; } .hero-carousel__next { grid-area: next; } .hero-carousel__toggle { grid-area: pause; } .hero-carousel__dots { grid-area: dots; } /* Controls hidden until JS enhances (no point showing dead buttons if JS fails). */ .hero-carousel:not(.js-enhanced) .hero-carousel__controls { display: none; } .hero-carousel__btn { -webkit-appearance: none; appearance: none; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(251,247,241,0.85); border-radius: 999px; background: rgba(22,59,58,0.72); color: var(--color-cream, #FBF7F1); cursor: pointer; line-height: 1; } .hero-carousel__btn svg { width: 20px; height: 20px; } .hero-carousel__btn:hover { background: rgba(22,59,58,0.92); } .hero-carousel__btn:focus-visible { outline: 3px solid var(--color-cream, #FBF7F1); outline-offset: 2px; } .hero-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 2px; } .hero-carousel__dot { -webkit-appearance: none; appearance: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* The visible dot is a small circle centered in the 44px hit target. */ .hero-carousel__dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(251,247,241,0.7); /* dark ring keeps the dot readable over bright slides (e.g. stage lights) */ box-shadow: 0 0 0 1.5px rgba(22,59,58,0.7); transition: background 150ms ease, transform 150ms ease; } .hero-carousel__dot[aria-current="true"]::before { background: var(--color-cream, #FBF7F1); transform: scale(1.35); box-shadow: 0 0 0 1.5px rgba(22,59,58,0.85); } .hero-carousel__dot:focus-visible { outline: 3px solid var(--color-cream, #FBF7F1); outline-offset: -6px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .hero-carousel__dot::before { transition: none; } } @media (prefers-reduced-motion: no-preference) { .hero-copy > * { animation: hero-fade-up 480ms cubic-bezier(0.16,0.84,0.44,1) both; } .hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 120ms; } .hero-copy > :nth-child(4) { animation-delay: 180ms; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } } .topic-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; } .topic-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); text-decoration: none; color: var(--color-text-base); display: flex; flex-direction: column; gap: var(--space-3); min-height: 44px; } @media (prefers-reduced-motion: no-preference) { .topic-card { transition: box-shadow 150ms ease, transform 150ms ease; } .topic-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); } } /* Icon chip: 40px rounded-square, primary-light fill, terracotta icon. */ .topic-card svg { color: var(--color-primary); width: 22px; height: 22px; background: var(--color-primary-light); padding: 9px; border-radius: var(--radius-md); box-sizing: content-box; } .topic-card strong { font-size: var(--text-sm); } @media (min-width: 768px) { .hero-copy { padding-left: var(--space-8); padding-right: var(--space-8); } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 58% 42%; align-items: stretch; max-width: 1280px; margin: 0 auto; } .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-20) var(--space-12) var(--space-20) var(--space-8); } .hero h1 { font-size: 3.25rem; } /* Desktop: copy left, photo right (reset the mobile photo-on-top order). */ .hero-photo { order: 0; } /* Photo is the dominant element: the carousel + viewport stretch to fill the full column height and the image covers it (like the original single-image hero). No fixed aspect-ratio box here so the photo is as tall as the copy, not shrunk. */ .hero-carousel { align-self: stretch; height: 100%; } .hero-photo img, .hero-slide img { min-height: 560px; height: 100%; aspect-ratio: auto; /* fill the column; cover crops as needed */ border-radius: 0; /* squared — no inner-left rounding */ box-shadow: var(--shadow-raised); } /* On the crossfade grid the shadow belongs to the viewport, not each slide, so stacked hidden slides don't double it. */ .hero-carousel.js-enhanced .hero-slide img { box-shadow: none; } .hero-carousel.js-enhanced .hero-carousel__viewport { box-shadow: var(--shadow-raised); } /* The crossfade grid must fill the viewport height so both slides + shadow span the full photo, and stretched slides cover the full box. */ .hero-carousel.js-enhanced .hero-carousel__viewport { height: 100%; } .hero-carousel.js-enhanced .hero-slide { height: 100%; } } @media (min-width: 768px) { .topic-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } } /* ---------- Card grids ---------- */ .card-row { display: grid; gap: var(--space-4); margin: var(--space-6) 0; } @media (min-width: 768px) { .card-row.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-row.cols-4 { grid-template-columns: repeat(4, 1fr); } .card-row.cols-2 { grid-template-columns: repeat(2, 1fr); } } .card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); padding: var(--space-6); } .card h3 { margin-top: 0; } .card.tint-primary { background: var(--color-primary-light); border-color: transparent; } .card.tint-accent { background: var(--color-accent-light); border-color: transparent; } .card.tint-alt { background: var(--color-surface-alt); border-color: transparent; } a.card { text-decoration: none; color: var(--color-text-base); display: block; } @media (prefers-reduced-motion: no-preference) { a.card, .resource-item { transition: box-shadow 150ms ease, transform 150ms ease; } a.card:hover, .resource-item:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); } } /* ---------- Quiz CTA banner ---------- */ .cta-banner { background: var(--color-primary); color: var(--color-text-on-primary); padding: var(--space-12) 0; margin-top: var(--space-16); } .cta-banner h2 { color: var(--color-text-on-primary); margin-top: 0; } .cta-banner p { max-width: 40em; } /* Deep-link targets (quiz route cards): keep the sticky-ish header from clipping headings. */ h3[id], h2[id] { scroll-margin-top: var(--space-8); } /* ---------- Hero: single primary CTA + demoted secondary link + trust note ---------- */ .hero-secondary-link { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(251,247,241,0.85); } .hero-secondary-link a { color: var(--color-text-on-dark); text-decoration: underline; } .hero-cta-note { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: rgba(251,247,241,0.7); } /* ---------- Quiz result: "Your path" routing cards ---------- */ .result-routes { display: grid; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); } .result-routes .route-card { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border: 1px solid var(--color-surface-alt); } .result-routes .route-copy { flex: 1 1 auto; } .result-routes .route-label { font-weight: 600; display: block; } .result-routes .route-label .tag { margin-left: var(--space-2); } .result-routes .route-why { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; } .result-routes .route-arrow { color: var(--color-primary); flex-shrink: 0; font-weight: 600; } /* 320px edge affordance: tighten padding so the arrow clears the green panel wall. */ @media (max-width: 360px) { .quiz-result { padding-left: var(--space-4); padding-right: var(--space-4); } .result-routes .route-card { padding: var(--space-3); } } /* ---------- Platforms: price band (scannable, per-month-equivalent units) ---------- */ .price-band { font-weight: 600; } .price-band .band { color: var(--color-primary); letter-spacing: 0.05em; } .price-band .note-ref { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 400; } /* ---------- Callouts / notes ---------- */ .callout { border-left: 3px solid var(--color-primary); background: var(--color-primary-light); padding: var(--space-6); border-radius: var(--radius-md); margin: var(--space-6) 0; } .callout.tip { border-left-color: var(--color-accent); background: var(--color-accent-light); } .callout.warning { border-left-color: var(--color-gold); background: #FBF3E2; } .callout > :last-child { margin-bottom: 0; } .note { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--text-sm); margin: var(--space-4) 0; } .note > :last-child { margin-bottom: 0; } /* ---------- Author byline + disclosure ---------- */ .page-byline { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); margin: var(--space-12) 0 0; padding-top: var(--space-6); } .page-byline .byline-name { font-weight: 600; color: var(--color-text-base); } .page-byline a { color: var(--color-text-secondary); } .author-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-6) 0; } .author-card > :last-child { margin-bottom: 0; } .author-photo-placeholder { width: 96px; height: 96px; border-radius: var(--radius-pill); background: var(--color-primary-light); border: 1px dashed var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--color-text-secondary); text-align: center; margin-bottom: var(--space-4); } .inline-disclosure { font-size: var(--text-sm); color: var(--color-text-secondary); border-left: 3px solid var(--color-gold); background: #FBF3E2; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: var(--space-4) 0; } .inline-disclosure a { color: var(--color-text-secondary); } /* ---------- Tags ---------- */ .tag { display: inline-block; background: var(--color-accent-light); color: #4E6834; /* AA at 12px/600 on accent-light */ border-radius: var(--radius-pill); padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: 600; } .tag.gold { background: #FBF3E2; color: #8a6313; } /* Marigold honest-pick chip — RESERVED for the "the one we use" (SMA) disclosure on online-platforms.html ONLY. Do NOT use --color-marigold anywhere else. */ /* --color-marigold / .tag--pick must appear ONLY on the SMA "the one we use" chips on online-platforms.html. Never on buttons, nav, other tags, other pages, the quiz, or the footer. Its whole value is that it means one specific thing: the academy the author's family personally pays for. */ .tag--pick { background: #FBEFD9; /* pale marigold tint */ color: #8A4E06; /* contrast: 6.1:1 on #FBEFD9 — AA */ box-shadow: inset 0 0 0 1px rgba(199,122,15,0.35); } /* ---------- Comparison tables ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: var(--space-6) 0; display: none; /* mobile: hidden, cards shown instead */ } table.compare { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } table.compare th, table.compare td { border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; } table.compare thead th { background: var(--color-surface-alt); font-family: var(--font-sans); font-weight: 600; } table.compare tbody th[scope="row"] { background: var(--color-surface-alt); font-weight: 600; position: sticky; left: 0; min-width: 140px; } table.compare tbody tr:nth-child(even) td { background: var(--color-surface); } table.compare tbody tr:nth-child(odd) td { background: var(--color-bg); } table.compare td.win { background: var(--color-accent-light) !important; border-left: 3px solid var(--color-accent); } .table-legend { display: none; /* shown with the table at >=768px */ font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-6) 0 var(--space-4); } /* Mobile card-flip pattern */ .compare-cards { margin: var(--space-6) 0; } .compare-cards details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--shadow-card); } .compare-cards summary { cursor: pointer; padding: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; list-style-position: inside; } .compare-cards details dl { margin: 0; padding: 0 var(--space-4) var(--space-4); } .compare-cards details dt { font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-2) 0; background: var(--color-surface-alt); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-top: var(--space-2); } .compare-cards details dd { margin: 0; padding: var(--space-1) var(--space-2) var(--space-2); background: var(--color-surface-alt); font-size: var(--text-sm); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .compare-cards details dd.win { background: var(--color-accent-light); } .compare-cards .win-flag { color: #4E6834; font-weight: 600; } @media (min-width: 768px) { .table-wrap { display: block; } .table-legend { display: block; } .compare-cards { display: none; } } /* Full app directory (collapsed by default) */ .directory-full { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); padding: 0 var(--space-4); margin: var(--space-6) 0; } .directory-full > summary { cursor: pointer; font-weight: 600; padding: var(--space-4) 0; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); list-style-position: inside; } .directory-full > summary::-webkit-details-marker { display: none; } .directory-full > summary::after { content: ""; margin-left: auto; width: .6em; height: .6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .directory-full[open] > summary::after { transform: rotate(-135deg); } .directory-full[open] > summary { border-bottom: 1px solid var(--color-border); } .directory-full[open] { padding-bottom: var(--space-4); } /* ---------- Pros / cons ---------- */ .pros-cons { display: grid; gap: var(--space-6); margin: var(--space-6) 0; } @media (min-width: 768px) { .pros-cons { grid-template-columns: 1fr 1fr; } } .pros-cons .pros, .pros-cons .cons { border-radius: var(--radius-md); padding: var(--space-6); } .pros-cons .pros { background: var(--color-accent-light); } .pros-cons .cons { background: #FEF3F2; } .pros-cons h3, .pros-cons h4 { margin-top: 0; font-family: var(--font-sans); font-size: var(--text-base); text-transform: none; letter-spacing: 0; } .pros-cons .pros h3, .pros-cons .pros h4 { color: var(--color-success); } .pros-cons .cons h3, .pros-cons .cons h4 { color: var(--color-error); } .pros-cons ul { list-style: none; padding: 0; margin: 0; } .pros-cons li { padding-left: 1.5em; position: relative; } .pros-cons li::before { position: absolute; left: 0; font-weight: 700; } .pros-cons .pros li::before { content: "\2713"; color: var(--color-success); } .pros-cons .cons li::before { content: "\2717"; color: var(--color-error); } /* ---------- Long-form guide layout ---------- */ .guide-layout { display: grid; gap: var(--space-8); } .guide-content { max-width: 720px; min-width: 0; } .toc { margin: var(--space-4) 0; } .toc details { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); } .toc summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); min-height: 44px; display: flex; align-items: center; } .toc ul { list-style: none; padding: var(--space-2) 0 var(--space-2); margin: 0; } .toc a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; padding: 0 var(--space-3); border-left: 2px solid transparent; } .toc a:hover { color: var(--color-primary); border-left-color: var(--color-primary); } @media (min-width: 1024px) { .guide-layout { grid-template-columns: minmax(0, 70%) minmax(0, 30%); } .toc { order: 2; } .toc details { position: sticky; top: 76px; background: transparent; border: none; padding: 0; } .toc summary { pointer-events: none; list-style: none; } .toc summary::-webkit-details-marker { display: none; } .toc details[open] summary ~ * { display: block; } } /* ---------- Quiz ---------- */ .quiz-shell { max-width: 680px; margin: var(--space-8) auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6); } @media (min-width: 768px) { .quiz-shell { padding: var(--space-12); } } .quiz-progress { width: 100%; height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } /* margin-bottom removed: .quiz-progress-wrap now owns the spacing (refresh §3.2) */ .quiz-progress-fill { height: 100%; background: var(--color-primary); width: 0; border-radius: var(--radius-pill); } @media (prefers-reduced-motion: no-preference) { .quiz-progress-fill { transition: width 200ms ease; } } /* Seven-swara ladder above the quiz progress bar (Sa Re Ga Ma Pa Dha Ni). Decorative labelling of the track — aria-hidden; .quiz-step-counter stays the authoritative accessible progress text. */ .quiz-progress-wrap { margin-bottom: var(--space-6); } .swara-scale { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--font-serif); /* Fraunces — gives the display face a job (refresh §4) */ font-size: var(--text-xs); font-weight: 500; color: var(--color-text-secondary); /* contrast: ~7.5:1 (#5E5349 on #FFFFFF) — AA */ letter-spacing: 0.02em; } .swara-scale li { margin: 0; text-align: center; } .swara-scale li:first-child { text-align: left; } .swara-scale li:last-child { text-align: right; } .quiz-step-counter { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); } .quiz-shell fieldset { border: none; padding: 0; margin: 0 0 var(--space-6); } .quiz-shell legend { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 600; padding: 0; margin-bottom: var(--space-4); line-height: 1.3; } .quiz-option { display: block; margin-bottom: var(--space-3); } .quiz-option input[type="radio"] { position: absolute; opacity: 0; width: 44px; height: 44px; } .quiz-option label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .quiz-option label:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .quiz-option input[type="radio"]:checked + label { border: 2px solid var(--color-primary); background: var(--color-primary-light); padding: calc(var(--space-4) - 1px); } .quiz-option label .check { visibility: hidden; color: var(--color-primary); font-weight: 700; } .quiz-option input[type="radio"]:checked + label .check { visibility: visible; } .quiz-option input[type="radio"]:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 3px; } .quiz-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); } .quiz-result { background: var(--color-accent-light); border-radius: var(--radius-md); padding: var(--space-6); margin-top: var(--space-4); } .quiz-result h2 { margin-top: 0; } .quiz-result dl { margin: var(--space-4) 0; } .quiz-result dt { font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); } .quiz-result dd { margin: 0 0 var(--space-3); font-size: var(--text-lg); } .quiz-result .result-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } .quiz-error { color: var(--color-error); font-size: var(--text-sm); margin-top: var(--space-3); } [hidden] { display: none !important; } /* ---------- Resource directory ---------- */ .resource-list { list-style: none; padding: 0; margin: var(--space-4) 0; } .resource-item { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-5); margin-bottom: var(--space-3); display: flex; gap: var(--space-4); align-items: flex-start; } .resource-item .icon-square { flex: 0 0 40px; width: 40px; height: 40px; background: var(--color-surface-alt); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .resource-item .body { min-width: 0; } .resource-item .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .resource-item strong { font-weight: 600; } .resource-item p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); } /* ---------- Footer — deep-teal anchor, bookends the hero ---------- */ .site-footer { background: var(--color-teal-deep); color: var(--color-text-on-dark); border-top: none; margin-top: var(--space-20); padding: var(--space-16) 0 0; } /* Footer swara motif — the deliberate footer signature (7 dots on a cream rule, peach on teal). decorative — peach at 25–85% opacity on #163B3A, non-text graphic, no contrast req. */ .footer-swara { display: block; width: 100%; max-width: 480px; height: 20px; margin: 0 auto var(--space-12); opacity: 1; } @media (max-width: 375px) { .footer-swara { max-width: 100%; } } .footer-grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1.4fr; } } .site-footer .wordmark { font-size: var(--text-lg); color: var(--color-text-on-dark); } /* Footer emblem — cream variant reads on the deep-teal footer bg; scoped so header is untouched. */ .site-footer .wordmark-mark { height: 28px; } .site-footer p { color: rgba(251,247,241,0.78); } .site-footer .secondary { color: rgba(251,247,241,0.78); } .site-footer h4 { margin-top: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-eyebrow-on-teal); } /* contrast: 6.34:1 on #163B3A — AA at 12px/600 */ .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(251,247,241,0.85); text-decoration: none; font-size: var(--text-sm); } .site-footer ul a:hover { color: #fff; text-decoration: underline; } .site-footer p a { color: var(--color-text-on-dark); text-decoration: underline; } .footer-bottom { border-top: 1px solid rgba(251,247,241,0.16); padding: var(--space-4) 0; font-size: var(--text-sm); color: rgba(251,247,241,0.7); } .footer-bottom a { color: rgba(251,247,241,0.85); } /* ---------- Imagery (natural photo treatment, no grading) ---------- */ /* Hero photo styling lives in the Hero section above. */ /* Topic-card band sits directly under the hero. */ .topic-band { margin-top: var(--space-12); } /* Spot illustrations on cards (centered above the heading) */ .card-spot { display: block; margin: 0 auto var(--space-4); width: 80px; height: 80px; } /* Swara-dot section divider */ .divider-swara { display: block; width: 100%; max-width: 480px; height: 24px; margin: var(--space-10) auto; } /* Quiz intro photo: full-width below the intro on mobile, floats right on wider screens */ .quiz-intro-photo { margin: var(--space-4) 0; max-width: 480px; } .quiz-intro-photo img { aspect-ratio: 4 / 3; } @media (min-width: 768px) { .quiz-intro-photo { float: right; width: 360px; margin: 0 0 var(--space-4) var(--space-6); } } /* Quiz result icons (JS-populated) */ .result-icons { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); } .result-icons img { width: 64px; height: 64px; } /* Section-heading spots (practice-tools) */ .h3-spot-row { display: flex; align-items: center; gap: var(--space-3); } .h3-spot-row img { flex: 0 0 auto; } .spot-tanpura { width: 40px; height: 56px; } .spot-tabla { width: 56px; height: 48px; } /* Photos: fixed aspect ratio (no layout shift), natural treatment — no filters or overlays */ .photo-figure { margin: var(--space-8) 0; } .photo-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); } .photo-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; } .photo-frame-4x3 img { aspect-ratio: 4 / 3; } .photo-frame-wide img { aspect-ratio: 1600 / 531; } .photo-credit { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); } .photo-credit a { color: var(--color-text-secondary); } @media (max-width: 375px) { .card-spot { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1 / 1; } .divider-swara { max-width: 100%; } } /* ---------- Section rhythm + banded surfaces (modern editorial lever) ---------- */ .section-band { padding: var(--space-12) 0; } @media (min-width: 1024px) { .section-band { padding: var(--space-20) 0; } } .band-alt { background: var(--color-surface-alt); } /* Deep-teal "evidence" band: reads as a promise, not fine print. */ .band-evidence { background: var(--color-teal-deep); color: var(--color-text-on-dark); } .band-evidence h2, .band-evidence h3 { color: var(--color-text-on-dark); } .band-evidence p { color: rgba(251,247,241,0.88); } .band-evidence .kicker { color: var(--color-eyebrow-on-teal); } /* contrast: 6.34:1 on #163B3A — AA */ /* Swara tick: a tuning-dot glyph that precedes an eyebrow label. Decorative. Rides currentColor (terracotta ≥6:1 on light / peach 6.34:1 on teal) — decorative graphic, not text. */ .kicker--swara { display: inline-flex; align-items: center; gap: var(--space-2); } /* specificity guard: .hero .kicker sets display:block (0,2,0) which would beat .kicker--swara (0,1,0); re-assert inline-flex at matching specificity so the tick+label align. */ .hero .kicker--swara, .page-header .kicker--swara, .band-evidence .kicker--swara { display: inline-flex; } .kicker--swara .swara-tick { flex: none; width: 34px; height: 8px; /* three dots on a faint baseline */ } .band-evidence a { color: var(--color-text-on-dark); text-decoration: underline; } /* Tanpura drone texture: faint vertical resonance strings on deep-teal surfaces. Static (no motion). ~4.5% opacity peach lines — decorative, does NOT sit on text, measured to leave the cream/peach text pairs unchanged at AA (background wash only). */ .hero, .site-footer, .band-evidence { position: relative; } .hero > *, .site-footer > *, .band-evidence > * { position: relative; z-index: 1; } .hero::before, .site-footer::before, .band-evidence::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient( 90deg, rgba(233,184,143,0.045) 0px, rgba(233,184,143,0.045) 1px, transparent 1px, transparent 26px ); } /* ---------- Methodology weight bars (CSS-only; numbers come from HTML) ---------- */ .weight-bars { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-3); } .weight-bars li { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; } .weight-bars .wb-label { font-size: var(--text-sm); font-weight: 500; } .weight-bars .wb-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-sm); color: var(--color-text-secondary); } .weight-bars .wb-track { grid-column: 1 / -1; height: 8px; background: var(--color-surface-alt); border-radius: var(--radius-pill); overflow: hidden; } .weight-bars .wb-fill { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); } /* ---------- "How we stay honest" trust card (gold-ruled, shield icon) ---------- */ .trust-card { display: flex; gap: var(--space-4); align-items: flex-start; background: #FBF3E2; border: 1px solid #ECD9AE; border-left: 4px solid var(--color-gold); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-8) 0; box-shadow: var(--shadow-card); } .trust-card .trust-icon { flex: 0 0 40px; width: 40px; height: 40px; color: var(--color-gold); } .trust-card > div > :last-child { margin-bottom: 0; } .trust-card h3 { margin-top: 0; } /* ---------- Section header with photo masthead (methodology/online-platforms) ---------- */ .masthead { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-6) 0 var(--space-10); box-shadow: var(--shadow-card); } .masthead img { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; } /* About page hero is a 16:9 family portrait (people at each edge) — show the whole frame, not the 16:5 banner cover-crop that shaved off heads. Scoped to the About figure so methodology/online-platforms keep their wide banner. */ .masthead--portrait img { aspect-ratio: 16 / 9; height: auto; } /* ---------- Comparison header (desktop) ---------- The column headers were previously `position: sticky; top: 60px`. Because the site nav is also sticky (60px), the pinned thead floated over the first tbody row while scrolling and permanently hid the top lines of the tallest first row ("Teacher quality pool") — its opaque background painted over the cell text. For this short (8-row) table with legally load-bearing cell copy, a sticky thead offers little benefit and clips content, so it is left in normal flow. The sticky left row-header column (th[scope="row"]) is kept: it does not overlap anything because the table never scrolls horizontally at >=768px. */ table.compare td, table.compare th { font-variant-numeric: tabular-nums; } table.compare td.win .win-flag, .compare-cards dd.win .win-flag { font-weight: 700; } /* ---------- Misc ---------- */ .as-of { display: inline-block; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .source { font-size: var(--text-xs); color: var(--color-text-secondary); } .source a { color: var(--color-text-secondary); } /* Comparison score glyphs — shape carries the meaning; color is a reinforcing cue only (AA-safe). */ .score-yes, .score-partial, .score-no, .score-unknown { font-weight: 700; } .score-yes { color: var(--color-success); } .score-partial { color: var(--color-warning); } .score-no { color: var(--color-error); } .score-unknown { color: var(--color-text-secondary); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-10) 0; } ol.steps { counter-reset: step; list-style: none; padding-left: 0; } ol.steps > li { counter-increment: step; position: relative; padding-left: 2.2em; margin-bottom: var(--space-3); } ol.steps > li::before { content: counter(step) "."; position: absolute; left: 0; color: var(--color-primary); font-weight: 600; } /* ---------- Listening examples ("Hear the difference") ---------- */ .video-embed { position: relative; aspect-ratio: 16 / 9; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; } .audio-figure { margin: 1.5rem 0; } .audio-figure figcaption { margin-bottom: .5rem; } .audio-figure audio { width: 100%; } /* ---------- Editorial "our pick" highlight (practice-tools) ---------- Built from the .callout grammar (left frame-bar + tinted surface), deliberately NOT the .card grammar: no drop shadow, no hover lift, so it reads as author emphasis inside a list, not a sponsored unit. Teal frame-bar (teal = frame); terracotta reserved for the one action link. */ .pick { border-left: 3px solid var(--color-teal-deep); background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-6) 0; max-width: 720px; /* matches .page-intro measure so it doesn't overrun the column */ } .pick > :last-child { margin-bottom: 0; } /* Badge row: factual capability chip + quiet eyebrow. Restrained, not a sticker. */ .pick-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .pick-badge .tag { /* Reuse .tag but recolor to the teal frame family so it reads structural, not promotional. Contrast: #163B3A on #E7F0E8 ~ 9.4:1 (AA/AAA). */ background: var(--color-accent-light); color: var(--color-teal-deep); text-transform: uppercase; letter-spacing: 0.04em; } .pick-eyebrow { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); /* #5E5349 on #F3ECE1 ~ 6.6:1, AA */ } .pick-name { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 600; } .pick-name .pick-plat { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); } /* Links: primary = naadsadhana.com (terracotta text, the single action color). NOT a filled pill/button — a filled CTA button is the ad tell we avoid. Underline + generous tap target carries the affordance. */ .pick-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); margin-bottom: 0; font-weight: 600; } .pick-links a { display: inline-flex; align-items: center; min-height: 44px; /* tap target >= 44px */ text-decoration: underline; text-underline-offset: 3px; } .pick-link-primary { color: var(--color-primary); } /* #A23A1E on #F3ECE1 ~ 6.0:1, AA */ .pick-link-primary:hover { color: var(--color-primary-hover); } .pick-links a:not(.pick-link-primary) { color: var(--color-text-secondary); /* App Store: quiet, secondary */ } .pick-links a:not(.pick-link-primary):hover { color: var(--color-primary-hover); } /* ---------- Utility classes (replace former inline style="" attrs so the site can run a strict CSP: style-src 'self' with no 'unsafe-inline'). Added 2026-07-13. ---------- */ .u-text-left { text-align: left; } .u-mt-4 { margin-top: var(--space-4); } .u-mt-6 { margin-top: var(--space-6); } .u-mt-8 { margin-top: var(--space-8); }