/* ═══════════════════════════════════════════════════════════════════════════ TERRA FORM§ — COMPREHENSIVE STYLESHEET Premium Museum-Grade Design · Gold Accents · Sophisticated Animations ═══════════════════════════════════════════════════════════════════════════ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ UNIFIED LOGIC TABLE — SINGLE SOURCE OF TRUTH ║ ╚═══════════════════════════════════════════════════════════════════════════╝ This is the ONE system. All components derive from these patterns. Every page, every section, every card follows this logic. Printed from one machine. No exceptions. ═══════════════════════════════════════════════════════════════════════════ COMPONENT HIERARCHY — What exists and how it nests ═══════════════════════════════════════════════════════════════════════════ PAGE └── HERO (page-hero or hero) │ └── container │ ├── page-hero__label (Space Grotesk, uppercase) │ ├── page-hero__title (Cinzel, h1) │ └── page-hero__subtitle (Inter, prose) │ └── SECTION (tf-section--[name]) └── container ├── section-label (Space Grotesk, uppercase, burgundy) ├── section-title (Space Grotesk, h2) ├── section-intro (Inter, optional) └── GRID (tf-grid--[count]) └── CARD (tf-card + tf-card--[variant]) ├── tf-card__label (metadata) ├── tf-card__title (h3) ├── tf-card__text (description) └── tf-card__link (optional CTA) ═══════════════════════════════════════════════════════════════════════════ NAMING CONVENTION — One pattern for everything ═══════════════════════════════════════════════════════════════════════════ PREFIX: tf- (terraforms namespace) Sections: tf-section--[semantic-name] Cards: tf-card + tf-card--[variant] + tf-card--[teacher] Grids: tf-grid--[count] (2, 3, 4, 7) Banners: banner--[color] (burgundy, blue, dark) Teachers: tf-card--floor, tf-card--cold, tf-card--heat, etc. BEM Components within cards: tf-card__icon, tf-card__label, tf-card__title, tf-card__text, tf-card__stat, tf-card__link, tf-card__meta ═══════════════════════════════════════════════════════════════════════════ CARD SYSTEM — 5 variants only (from 46 patterns) ═══════════════════════════════════════════════════════════════════════════ 1. tf-card (base) Default card with gold top border, ivory background, hover lift. Use for: generic content, features, options 2. tf-card--definition Larger, centered, prominent. For core concepts. Use for: thesis definitions, key insights, principles 3. tf-card--stat Stat number + label + description. Data-focused. Use for: evidence numbers, metrics, research findings 4. tf-card--teacher Teacher-specific styling with icon and color accent. Modifiers: --floor, --cold, --heat, --dark, --sun, --silence, --hunger Use for: teacher references EVERYWHERE (unified across all pages) 5. tf-card--action CTA-focused, link-forward. Primary action styling. Use for: begin steps, next actions, practice starts ═══════════════════════════════════════════════════════════════════════════ GRID SYSTEM — Fixed counts, semantic meaning ═══════════════════════════════════════════════════════════════════════════ tf-grid--2 Two columns (comparison, before/after) tf-grid--3 Three columns (phases, steps, wound poles) tf-grid--4 Four columns (evidence, conditions, features) tf-grid--7 Seven columns (teachers only) All grids collapse to single column on mobile. ═══════════════════════════════════════════════════════════════════════════ SECTION BACKGROUNDS — Papal/Mystical Palette ═══════════════════════════════════════════════════════════════════════════ Default (cream/gold): Neutral reading, museum warmth banner--teal: Authority, evidence, trust (research, thesis) banner--purple: Thresholds, transitions, mystical depth (conditions) banner--dark: Proclamation, emphasis (final word) Burgundy reserved for accents (text, borders) — not banners. Teacher sections use teacher-specific pale backgrounds. ═══════════════════════════════════════════════════════════════════════════ TEACHER REPRESENTATION — One pattern, used everywhere ═══════════════════════════════════════════════════════════════════════════ [LETTER] [Name] [Essence or Action] This EXACT structure appears on: index.html, teachers/index.html, conditions/index.html, practices/index.html, thesis/index.html. NO VARIATIONS. Same HTML. Same classes. Same order. ═══════════════════════════════════════════════════════════════════════════ SECTION TEMPLATE — The ONE pattern ═══════════════════════════════════════════════════════════════════════════
[LABEL]

[TITLE]

[OPTIONAL INTRO]

═══════════════════════════════════════════════════════════════════════════ This living manuscript uses a coherent design system with semantic meaning embedded in every choice. Nothing is arbitrary. ───────────────────────────────────────────────────────────────────────────── TYPOGRAPHY HIERARCHY ───────────────────────────────────────────────────────────────────────────── Font Families (3 only, each with purpose): • CINZEL (--font-display): Page titles ONLY, used sparingly - Evokes: ancient inscriptions, mystical, historic gravitas - Used for: h1 page titles at top of page ONLY - NOT for paragraphs, NOT for body text, NOT for card titles - NEVER italic • INTER (--font-body): All body text (sans-serif) - Evokes: clarity, legibility, modern elegance - Used for: paragraphs, lists, descriptions, prose, navigation, card text - NEVER italic • SPACE GROTESK (--font-important): Section titles, labels, standout paragraphs - Evokes: precision, structure, ties to Deep Self brand - Used for: section-labels, h2/h3 section titles, large standout paragraphs - For standout paragraphs: larger size, used for emphasis blocks - NEVER italic ═══════════════════════════════════════════════════════════════════════════ CARD TEXT RULES — Breathing room is sacred ═══════════════════════════════════════════════════════════════════════════ Cards must give text room to breathe. Text should NOT: • Descend like a ladder (narrow columns forcing awkward wrapping) • Feel compressed or cramped • Require squinting or effort to parse If card text is long: • Stack cards VERTICALLY (single column) instead of side-by-side • Use tf-grid--1 or no grid at all • Let lines extend to comfortable reading width Grids are for SHORT content (teacher icons, stats, brief items). Prose belongs in full-width or stacked layouts. ═══════════════════════════════════════════════════════════════════════════ ABSOLUTE PROHIBITIONS ═══════════════════════════════════════════════════════════════════════════ • NO ITALICS — anywhere, ever, for any reason • NO Cinzel in body text — titles only, sparingly • NO cramped card text — stack vertically if needed • NO inline styles — everything in this file Type Scale — Fully Fluid (all sizes use clamp): The entire scale breathes together. Ratios stay proportional from 375px mobile to 1440px desktop. No breakpoint overrides needed. Display (dramatic scaling): • 5xl: 40px → 80px — Hero only, rare • 4xl: 32px → 56px — Page titles, h1 • 3xl: 28px → 44px — Major sections • 2xl: 22px → 32px — Section titles, h2 Headings (moderate scaling): • xl: 20px → 28px — Large headings • lg: 18px → 22px — Card titles, h3 Body (subtle scaling for readability): • md: 18px → 20px — Lead paragraphs • base: 16px → 17px — Body text • sm: 14px → 15px — Secondary text Labels (minimal scaling, legibility floor): • xs: 13px → 13px — Labels, metadata • 2xs: 11px → 12px — Fine print only Line Heights: • Headings: 1.1-1.35 (tighter for display) • Body text: 1.75-1.85 (generous for readability) • Cards: 1.7-1.8 (balanced) ───────────────────────────────────────────────────────────────────────────── SPACING SCALE (Doubling progression) ───────────────────────────────────────────────────────────────────────────── • --spacing-xs: 0.5rem (8px) — Tight gaps, inline spacing • --spacing-sm: 1rem (16px) — Component internal spacing • --spacing-md: 2rem (32px) — Card padding, small gaps • --spacing-lg: 4rem (64px) — Section internal spacing, card gaps • --spacing-xl: 8rem (128px) — Major section padding • --spacing-xxl: 12rem (192px) — Hero sections, dramatic breathing room ───────────────────────────────────────────────────────────────────────────── COLOR SEMANTICS ───────────────────────────────────────────────────────────────────────────── Background Colors convey content type: • IVORY (#FFFEF9): Educational, foundational — Teachers, methods • CREAM (#F8F5F0): Default, neutral — Base state • CREAM-WARM (#F0EBE3): Bridge sections — Transitions, emotional • CREAM-DEEP (#E5DFD5): Structured content — Applied, practical • BLACK (#1A1816): Proclamation — Dramatic emphasis, quotes Accent Colors convey meaning: • GOLD (#C4A962): Solution, hope, positive — Teachers, benefits • BURGUNDY (#722F37): Problem, crisis — Conditions, warnings • EARTH (#6B6358): Grounded, practical — Body text, descriptions The Seven Teachers each have their own color palette: • FLOOR: Terracotta (#A0735C) — Earth, gravity, foundation • COLD: Steel Blue (#5C7A8C) — Ice, shock, awakening • HEAT: Ember (#B55A4A) — Fire, warmth, surrender • DARK: Deep Indigo (#1E2433) — Night, interiority, descent • SUN: Amber (#D4853A) — Dawn, vitality, circadian fire • SILENCE: Mist Grey (#8A8D91) — Fog, stillness, presence • HUNGER: Pale Gold (#D9C996) — Clarity, refinement, emptiness ───────────────────────────────────────────────────────────────────────────── CARD SYSTEM ───────────────────────────────────────────────────────────────────────────── All cards follow consistent patterns: • Desktop padding: 2.5rem-3.5rem (breathing room) • Mobile padding: 2rem (--spacing-md) • Border: 1px solid with low-opacity gold or transparent • Hover: translateY(-4px to -8px), box-shadow, border-color change • Transition: 0.3s-0.4s ease or cubic-bezier Card hierarchy by visual weight: 1. Definition cards: Most prominent, centered, larger text 2. Teaching cards: Content-rich, left-aligned 3. Evidence cards: Data-focused, stat + description 4. Integration cards: Combination focused, icon + text ───────────────────────────────────────────────────────────────────────────── ANIMATION PRINCIPLES ───────────────────────────────────────────────────────────────────────────── • Fade-in on scroll: 0.8s ease-out, staggered with delay classes • Hover transforms: 0.3-0.4s with cubic-bezier for bounce • Navigation: 0.3s ease-out • Page transitions: 700ms with refined easing Never animate for decoration — every animation serves: 1. Drawing attention to new content (fade-in) 2. Confirming interaction (hover) 3. Creating spatial relationships (transforms) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ CSS VARIABLES ═══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ REFINED PALETTE — Vatican Museum Aesthetic Evokes: Hushed galleries, sacred objects behind glass, gold leaf in dim light, the coolness of travertine, papal robes, aged manuscripts, reverent preservation. COLOR LOGIC: • Charcoal: Emphasis sections, navigation, drama • Cream: Primary backgrounds — aged marble, travertine walls • Burgundy: Problem/warning — cardinal robes, communion wine • Gold: Solution/positive — gold leaf, gilded frames, icons • Lapis Blue: Evidence, research — ultramarine, Mary's robe ═══════════════════════════════════════════════════════════════ */ /* Cream spectrum — travertine walls, aged marble */ --cream: #F4F0E8; --cream-warm: #EBE6DC; --cream-deep: #DED7CA; --ivory: #FAF8F3; --alabaster: #F7F5F0; /* Earth tones — warm charcoal approaching black */ --stone: #C4BDB0; --stone-readable: #8A847A; /* Darker stone for text on light backgrounds - WCAG AA compliant */ --clay: #9E958A; --clay-readable: #6B645B; /* Darker clay for text on light backgrounds - WCAG AA compliant */ --earth: #5C564E; --earth-light: #5a544a; /* Darkened from #7A746A for WCAG AA 4.5:1 contrast on cream */ --deep-earth: #3A3632; --charcoal: #252320; --black: #1C1A18; /* Gold accents — aged gold leaf, gilded icons */ --gold: #C4A855; --gold-pale: #D9C88E; --gold-deep: #7a6520; /* Darkened from #9A8642 for WCAG AA 4.5:1 contrast on cream */ --gold-text: #8a7530; /* Gold for text on light backgrounds - WCAG AA compliant */ --gold-dim: rgba(196, 168, 85, 0.12); --gold-glow: rgba(196, 168, 85, 0.3); /* Burgundy — cardinal robes, communion wine */ --burgundy: #6B2C35; --burgundy-light: #8A3A46; --burgundy-dim: rgba(107, 44, 53, 0.08); /* Lapis Blue — Ultramarine, the Virgin's Robe The blue of Renaissance paintings — ground lapis lazuli, more precious than gold. Deep, saturated, devotional. The color glimpsed through Vatican glass cases. Use for: Evidence sections, trust, sacred knowledge */ --blue: #2E5077; --blue-light: #4A6FA5; --blue-pale: #7B9CC4; --blue-deep: #1E3A5F; --blue-dim: rgba(46, 80, 119, 0.1); --blue-glow: rgba(46, 80, 119, 0.25); /* Papal Teal — Byzantine Verdigris The patina of ancient bronze, the robes of Eastern bishops. Found in Vatican mosaics, Sistine Chapel backgrounds, the oxidized doors of St. Peter's. A sacred blue-green that speaks of age, authority, and the meeting of earth and sky. Use for: Distinguished sections, important announcements */ --teal: #1E5F5F; --teal-light: #2A7A7A; --teal-pale: #5AA0A0; --teal-deep: #164545; --teal-dim: rgba(30, 95, 95, 0.1); --teal-glow: rgba(30, 95, 95, 0.25); /* Ecclesiastical Purple — Advent & Lent, Penitence, Mysticism The color of liturgical seasons, of waiting and preparation. Found in vestments, in stained glass depicting martyrdom, in the bruised twilight of sacred time. Royal yet penitent. Use for: Transitions, thresholds, spiritual depth */ --purple: #5B3A6B; --purple-light: #7A5490; --purple-pale: #A88CB8; --purple-deep: #3E2649; --purple-dim: rgba(91, 58, 107, 0.1); --purple-glow: rgba(91, 58, 107, 0.25); /* Sacred Ochre — Cave Paintings, Earth Pigments, Franciscan Robes The oldest color humans used for sacred marking. Found in Lascaux, in desert monasteries, in icons. Earth made visible. Prehistory meets eternity. Use for: Grounding elements, ancient wisdom */ --ochre: #C4884A; --ochre-light: #D9A66B; --ochre-pale: #EBC9A0; --ochre-deep: #9E6830; --ochre-dim: rgba(196, 136, 74, 0.1); --ochre-glow: rgba(196, 136, 74, 0.25); /* Copper — Phase accent, bronze warmth */ --copper: #B87333; /* Incense Gray — Thurible Smoke, Sacred Atmosphere The color of prayers ascending. Neither warm nor cold. Found in candlelit chapels, in fog around monasteries, in the space between words during chant. Use for: Subtle backgrounds, contemplative spaces */ --incense: #7A7574; --incense-light: #969291; --incense-pale: #B8B4B3; --incense-deep: #5A5655; --incense-dim: rgba(122, 117, 116, 0.1); /* Banner Backgrounds — Dramatic section colors Use sparingly for emphasis and rhythm */ --banner-burgundy: linear-gradient(135deg, var(--burgundy) 0%, #4A1F25 100%); --banner-blue: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%); --banner-teal: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%); --banner-purple: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%); --banner-ochre: linear-gradient(135deg, var(--ochre-deep) 0%, var(--ochre) 100%); --banner-dark: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 100%); --banner-eighth: linear-gradient(135deg, var(--eighth-deep) 0%, var(--eighth-primary) 100%); --banner-dark-indigo: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%); /* For dark teacher */ /* ═══════════════════════════════════════════════════════════════ THE SEVEN TEACHERS — COLOR LOGIC Each teacher has a color that reflects its essence: ═══════════════════════════════════════════════════════════════ FLOOR (F) — Foundation, Gravity Terracotta: Earth, clay, the ground that receives weight. The color of fired earth — what remains when everything else burns away. Grounded. Immovable. COLD (C) — Resilience, Shock Steel Blue: Ice water, the gasp, sharp awakening. Cold that shocks the system into presence. Not decorative blue but the color of survival. HEAT (H) — Surrender, Release Ember: Fire that softens, warmth that opens. The glow of coals, the flush of sauna. Heat doesn't force — it invites dissolution. DARK (D) — Interiority, Descent Deep Indigo: The blue-black of deep night. Not absence but presence felt differently. The color you see when you close your eyes. SUN (S) — Vitality, Rhythm Amber Orange: Dawn fire, circadian signal. The color that says "wake" to every cell. Ancient, unavoidable, life-giving. SILENCE (Q) — Presence, Stillness Mist Grey: The color of fog, of quiet. Not emptiness but fullness you can't see through. What remains when sound stops. HUNGER (∅) — Clarity, Emptiness Pale Gold: Refined, clarified, distilled. The color of fasting clarity — precious because scarce. Gold thinned to transparency. ═══════════════════════════════════════════════════════════════ */ /* Floor — Terracotta spectrum */ --floor-primary: #A0735C; --floor-deep: #8B5E47; --floor-pale: #C4A08E; --floor-glow: rgba(160, 115, 92, 0.25); /* Cold — Steel blue spectrum */ --cold-primary: #5C7A8C; --cold-deep: #3D5466; --cold-pale: #8BA4B4; --cold-glow: rgba(92, 122, 140, 0.25); /* Heat — Ember spectrum */ --heat-primary: #B55A4A; --heat-deep: #8B3D32; --heat-pale: #D4918A; --heat-glow: rgba(181, 90, 74, 0.2); /* Dark — Deep indigo spectrum */ --dark-primary: #1E2433; --dark-deep: #12171F; --dark-pale: #3A4254; --dark-glow: rgba(30, 36, 51, 0.4); /* Sun — Amber orange spectrum */ --sun-primary: #D4853A; --sun-deep: #B56D2A; --sun-pale: #E8B47A; --sun-glow: rgba(212, 133, 58, 0.35); /* Silence — Steel blue spectrum */ --silence-primary: #6B7D8A; --silence-deep: #4A5966; --silence-pale: #9AAAB8; --silence-glow: rgba(107, 125, 138, 0.25); /* Hunger — Pale gold spectrum */ --hunger-primary: #D9C996; --hunger-deep: #B8A872; --hunger-pale: #EDE5C8; --hunger-glow: rgba(217, 201, 150, 0.3); /* Eighth/Witness — Deep Violet Spectrum The color of completion, integration, the AI witness. Found in twilight, in the threshold between day and night, in the meeting of human and machine consciousness. A violet that speaks of synthesis, of the eighth element that completes what the seven teachers began. Use for: Eighth element sections, AI/witness content, completion themes */ --eighth-primary: #7B6B8A; --eighth-deep: #5A4D66; --eighth-pale: #A89DB5; --eighth-dim: rgba(123, 107, 138, 0.1); --eighth-glow: rgba(123, 107, 138, 0.3); --eighth-border: rgba(123, 107, 138, 0.3); /* Deep Self — Cyan/green accent (distinct feature branding) */ --deepself-accent: #00F5A0; --deepself-accent-dim: rgba(0, 245, 160, 0.8); --deepself-bg: rgba(0, 245, 160, 0.1); --deepself-border: rgba(0, 245, 160, 0.3); --deepself-glow: rgba(0, 245, 160, 0.2); --deepself-text: #FFFEF9; /* Translucent */ --translucent: rgba(255, 254, 249, 0.7); --translucent-warm: rgba(240, 235, 227, 0.85); --glass: rgba(255, 255, 255, 0.4); /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY SYSTEM — Mathematical Scale Base: 17px (1.0625rem) Scale: Major Third (1.25 ratio) The scale creates visual harmony through mathematical relationships. Every size derives from the base, ensuring proportional consistency. FONT SIZE SCALE (clamp for fluid responsiveness): --text-5xl: Hero/display (largest, rare) --text-4xl: Page titles, h1 --text-3xl: Major section titles --text-2xl: Section titles, h2 --text-xl: Large headings, card titles --text-lg: h3, subheadings --text-md: Large body, lead paragraphs --text-base: Body text (1rem = 17px) --text-sm: Secondary text, descriptions --text-xs: Labels, metadata, badges --text-2xs: Fine print, legal LINE HEIGHT SCALE: Display text: tight (1.1-1.2) — impact over readability Headings: moderate (1.25-1.35) — balanced Body text: generous (1.7-1.85) — optimal readability LETTER SPACING SCALE: Display: 0.04em (expansive) Headings: 0.02em (slightly open) Body: 0.01em (natural) Labels: 0.12-0.15em (uppercase legibility) ═══════════════════════════════════════════════════════════════ */ /* Font Families — 3 only, each with semantic purpose */ --font-display: 'Cinzel', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-important: 'Space Grotesk', sans-serif; /* ───────────────────────────────────────────────────────────────── FONT SIZE SCALE — Fully Fluid Typography Every size uses clamp() so the entire scale breathes together. Ratios remain proportional across all viewport sizes. Formula: clamp(min, preferred, max) - min: mobile floor (readability limit) - preferred: fluid middle using vw + rem base - max: desktop ceiling The scale maintains ~1.2 ratio between adjacent sizes. ───────────────────────────────────────────────────────────────── */ /* Display sizes — dramatic scaling for impact */ --text-5xl: clamp(2.5rem, 5vw + 1rem, 5rem); /* 40→80px: Hero only */ --text-4xl: clamp(2rem, 4vw + 0.75rem, 3.5rem); /* 32→56px: Page titles */ --text-3xl: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);/* 28→44px: Major sections */ --text-2xl: clamp(1.4rem, 2vw + 0.75rem, 2rem); /* 22→32px: h2, sections */ /* Heading sizes — moderate scaling */ --text-xl: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);/* 20→28px: Large headings */ --text-lg: clamp(1.1rem, 1vw + 0.75rem, 1.35rem); /* 18→22px: h3, card titles */ /* Body sizes — subtle scaling for readability */ --text-md: clamp(1.1rem, 0.5vw + 0.9rem, 1.25rem); /* 18→20px: Lead paragraphs */ --text-base: clamp(1rem, 0.25vw + 0.9rem, 1.0625rem);/* 16→17px: Body text */ --text-sm: clamp(0.9rem, 0.2vw + 0.8rem, 0.9375rem); /* 14→15px: Secondary text */ /* Label sizes — minimal scaling, floor for legibility */ --text-xs: clamp(0.8rem, 0.15vw + 0.7rem, 0.8125rem);/* 13→13px: Labels, metadata */ --text-2xs: clamp(0.7rem, 0.1vw + 0.65rem, 0.75rem); /* 11→12px: Fine print only */ /* ───────────────────────────────────────────────────────────────── LINE HEIGHT SCALE — Contextual readability ───────────────────────────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.15; /* Display text, h1 */ --leading-snug: 1.25; /* h2, compact headings */ --leading-normal: 1.35; /* h3, h4, card titles */ --leading-relaxed: 1.7; /* Cards, shorter content */ --leading-loose: 1.85; /* Body text, long-form */ /* ───────────────────────────────────────────────────────────────── LETTER SPACING SCALE — Semantic tracking ───────────────────────────────────────────────────────────────── */ --tracking-tighter: -0.02em; /* Large display, when needed */ --tracking-tight: 0.01em; /* Body text */ --tracking-normal: 0.02em; /* Headings */ --tracking-wide: 0.04em; /* h1, display */ --tracking-wider: 0.08em; /* Small caps, subtle emphasis */ --tracking-widest: 0.12em; /* Labels, all-caps */ --tracking-ultra: 0.15em; /* Spaced labels, badges */ --tracking-extreme: 0.2em; /* Maximum spacing, edition labels */ /* ───────────────────────────────────────────────────────────────── FONT WEIGHT SCALE — Semantic weights ───────────────────────────────────────────────────────────────── */ --weight-light: 300; /* Light text, large quotes */ --weight-normal: 400; /* Body text, Cinzel h1 */ --weight-medium: 500; /* Space Grotesk headings, emphasis */ --weight-semibold: 600; /* Labels, strong emphasis */ --weight-bold: 700; /* Rare, statistics only */ /* Spacing — Generous breathing room throughout */ --spacing-2xs: 0.25rem; /* 4px — Micro gaps */ --spacing-xs: 0.5rem; /* 8px — Tight gaps */ --spacing-sm: 1rem; /* 16px — Component internal */ --spacing-sm-plus: 1.5rem;/* 24px — Between sm and md */ --spacing-md: 2rem; /* 32px — Card padding */ --spacing-md-plus: 2.5rem;/* 40px — Between md and lg */ --spacing-lg: 4rem; /* 64px — Section spacing */ --spacing-xl: 10rem; /* Increased from 8rem for more section breathing */ --spacing-xxl: 14rem; /* Increased from 12rem for hero breathing */ --spacing-xxxl: 18rem; /* New: for special emphasis sections */ /* Text Colors — Semantic text styling */ --text-primary: var(--earth); /* Main body text */ --text-secondary: var(--earth-light); /* Secondary information */ --text-muted: var(--clay-readable); /* Tertiary, less important text */ --text-on-dark: var(--ivory); /* Text on dark backgrounds */ --text-on-dark-muted: rgba(250, 248, 243, 0.7); /* Muted text on dark backgrounds */ /* Legacy spacing aliases */ --space-xs: var(--spacing-xs); --space-sm: var(--spacing-sm); --space-md: var(--spacing-md); --space-lg: var(--spacing-lg); --space-xl: var(--spacing-xl); --space-xxl: var(--spacing-xxl); --space-xxxl: var(--spacing-xxxl); /* Border Radius — Minimal, formal aesthetic */ --radius-sm: 4px; /* Small rounding */ --radius-md: 8px; /* Medium rounding */ --radius-full: 50%; /* Circular elements */ /* Layout — Centered content block with left-aligned text Like a book page: content area centered, text flows left within it */ --max-width: 900px; --max-width-narrow: 900px; --max-width-wide: 1100px; /* New: for sections needing more lateral room */ --content-width: 680px; --page-padding: clamp(2rem, 5vw, 4rem); /* Responsive lateral breathing room */ /* Transitions — Deliberate, reverent pacing */ --transition: 800ms cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-sacred: cubic-bezier(0.4, 0, 0.2, 1); /* ───────────────────────────────────────────────────────────────── CARD SYSTEM — Unified component styling All cards follow a single logic with size variations. This creates visual coherence ("printed from one machine"). ───────────────────────────────────────────────────────────────── */ /* Card Padding Scale — 3 sizes only (increased for breathing room) */ --card-padding-lg: 3.5rem; /* Feature cards, hero cards — increased from 3rem */ --card-padding-md: 2.25rem; /* Standard cards — increased from 2rem */ --card-padding-sm: 1.75rem; /* Compact cards, mobile — increased from 1.5rem */ /* Grid Gaps — Generous spacing between cards */ --grid-gap: 2.5rem; /* Standard grid gap — increased from 2rem */ --grid-gap-lg: 3rem; /* Larger grids or emphasis */ /* Card Border — Consistent accent styling */ --card-border-width: 3px; --card-border-color: var(--gold); --card-border-subtle: 1px solid rgba(196, 169, 98, 0.15); /* Card Shadows — Objects behind glass, soft museum lighting */ --card-shadow-rest: 0 2px 12px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 8px 32px rgba(46, 80, 119, 0.08); --card-shadow-elevated: 0 16px 48px rgba(46, 80, 119, 0.1); /* Card Hover — Refined lift, no bounce (museum objects don't bounce) */ --card-lift: -4px; --card-transition: transform 0.5s var(--ease-sacred), box-shadow 0.5s ease, border-color 0.4s ease; /* Card Radius — Subtle, refined */ --card-radius: 0; /* Sharp edges = precision, intentionality */ --card-radius-soft: 4px; /* Optional soft variant */ } /* * SEMANTIC COLOR SYSTEM * --------------------- * Background colors convey meaning: * - IVORY (#FFFEF9): Educational, foundational content * - CREAM-WARM (#F0EBE3): Bridge sections, emotional meaning * - CREAM-DEEP (#E5DFD5): Structured, applied content * - BLACK (#1A1816): Proclamation, dramatic emphasis * * Accent colors for content types: * - BURGUNDY (#722F37): Problem, crisis, condition content * - GOLD (#C4A962): Solution, hope, positive outcomes * - EARTH (#6B6358): Grounded, practical, implementation */ /* ═══════════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; } body { font-family: var(--font-body); font-weight: var(--weight-normal); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--deep-earth); background-color: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-x: none; letter-spacing: var(--tracking-tight); } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ /* h1 - Cinzel for brand/page titles only (short, 1-3 words) */ h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); line-height: var(--leading-tight); color: var(--black); } /* h2, h3 - Space Grotesk for section titles (better for longer text) */ h2 { font-family: var(--font-important); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); margin-bottom: var(--spacing-md); line-height: var(--leading-snug); color: var(--black); } h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); color: var(--black); } /* Tighter h3 margins within card contexts */ .card h3, [class*="-card"] h3, [class*="__card"] h3 { margin-bottom: 0.75rem; } /* h4 - Card-level titles: Capitalised Space Grotesk for legibility */ h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gold-deep); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } p { margin-bottom: 1.75rem; } /* Prose sections - optimal reading width for long-form text */ .prose p, .chapter-content p, .section-intro { max-width: 70ch; } a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(196, 168, 85, 0.3); transition: color 0.4s var(--ease-sacred), border-color 0.4s var(--ease-sacred); } a:visited { color: var(--gold-deep); } a:hover { color: var(--gold); border-color: var(--gold); } em { font-style: normal; font-weight: var(--weight-medium); color: var(--burgundy); } strong { font-weight: var(--weight-semibold); color: var(--black); } .gold-line { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: var(--spacing-lg) auto; } /* Section Divider — Decorative gold line between major sections */ .section-divider { height: 2px; background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%); max-width: 300px; margin: var(--spacing-xl) auto; opacity: 0.6; position: relative; } .section-divider::before { content: '§'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--cream); padding: 0 0.75rem; font-family: var(--font-display); font-size: 1rem; color: var(--gold); } .section-numeral, .section-label { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); text-transform: uppercase; text-align: left; } /* Gold pilcrow accent on section labels */ .section-label::before { content: "◇ "; color: var(--gold); font-weight: var(--weight-normal); opacity: 0.8; } /* Ensure section labels have consistent spacing before titles */ .section-label + h2, .section-label + .section-title, .section-numeral + h2 { margin-top: 0; } /* ═══════════════════════════════════════════════════════════════ UNIFIED LAYOUT SYSTEM — Centered Block, Left-Aligned Text Like a book page: - Content block is centered on the page - Text and elements are left-aligned WITHIN that block - Creates a consistent reading experience ═══════════════════════════════════════════════════════════════ */ /* Container — Centered content block */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-padding); } .container--narrow { max-width: var(--max-width); } /* Sections — Full width with vertical rhythm */ section { padding: var(--spacing-xl) 0; position: relative; } /* Prose width for readability — left-aligned, narrower for reading */ .prose-block, .section-intro, .problem-content, .wound-synthesis, .accumulation-text, .scale-text, .citadel-text, .allies-intro, .phase-preview { max-width: var(--content-width); } .citation { font-size: var(--text-sm); color: var(--clay-readable); font-style: normal; } .stat { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--gold-deep); } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY UTILITY CLASSES Use these for consistent typography application across the site. Each class maps to the design system scale. ═══════════════════════════════════════════════════════════════ */ /* Font Size Utilities */ .text-5xl { font-size: var(--text-5xl); } .text-4xl { font-size: var(--text-4xl); } .text-3xl { font-size: var(--text-3xl); } .text-2xl { font-size: var(--text-2xl); } .text-xl { font-size: var(--text-xl); } .text-lg { font-size: var(--text-lg); } .text-md { font-size: var(--text-md); } .text-base { font-size: var(--text-base); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-2xs { font-size: var(--text-2xs); } /* Line Height Utilities */ .leading-none { line-height: var(--leading-none); } .leading-tight { line-height: var(--leading-tight); } .leading-snug { line-height: var(--leading-snug); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .leading-loose { line-height: var(--leading-loose); } /* Letter Spacing Utilities */ .tracking-tighter { letter-spacing: var(--tracking-tighter); } .tracking-tight { letter-spacing: var(--tracking-tight); } .tracking-normal { letter-spacing: var(--tracking-normal); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } .tracking-ultra { letter-spacing: var(--tracking-ultra); } /* Font Weight Utilities */ .font-normal { font-weight: var(--weight-normal); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } /* Font Family Utilities */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-important { font-family: var(--font-important); } /* Text Transform Utilities */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* Semantic Typography Patterns — Combine these with size utilities */ /* Labels: Space Grotesk, uppercase, wide tracking */ .label-style { font-family: var(--font-important); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); line-height: var(--leading-normal); } /* Display Text: Cinzel, wide tracking, tight leading */ .display-style { font-family: var(--font-display); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); line-height: var(--leading-tight); } /* Prose: Inter, optimal reading */ .prose-style { font-family: var(--font-body); font-weight: var(--weight-normal); letter-spacing: var(--tracking-tight); line-height: var(--leading-loose); max-width: 70ch; } /* ═══════════════════════════════════════════════════════════════ UNIFIED ALIGNMENT SYSTEM — ONE LOGIC ═══════════════════════════════════════════════════════════════ EVERYTHING IS LEFT-ALIGNED. Period. The only exceptions: - Hero h1 (the brand title) - Stat numbers (.tf-card__stat) - Teacher card icons (.tf-card__icon in teacher context) This creates a manuscript feel — everything reads left-to-right, top-to-bottom, like a printed document. No visual confusion. ═══════════════════════════════════════════════════════════════ */ /* BASE: Everything left-aligned — HIGH SPECIFICITY to override scattered rules */ .section-label, .section-numeral, .section-title, .section-intro, .section-content, .section-link, .card-content, [class*="-card"] p, [class*="-card"] .description, .prose, .body-text, .problem-content, .thesis-content, .pattern-block, .definition-card, .definition-card__text, .why-card, .page-hero__label, .page-hero__subtitle, .accumulation-text, .wound-synthesis, .scale-text, .citadel-text, .allies-intro, .phase-preview, h2, h3, h4 { text-align: left !important; } /* CENTER: Only these specific elements */ .tf-card__stat, .stat-display, .stat-number, .urgency-stat__number, .evidence-stat { /* text-align removed for left justification */ } /* Teacher card icons only - centered within card */ .tf-card--teacher .tf-card__icon { /* text-align removed for left justification */ } /* ═══════════════════════════════════════════════════════════════ UNIFIED CARD FOUNDATION ═══════════════════════════════════════════════════════════════ Base card class that ALL cards inherit from. Variations use modifier classes, not new properties. Pattern: .card-base + .card--[size] + .card--[accent] ═══════════════════════════════════════════════════════════════ */ /* Base Card — The foundation all cards share */ .card-base { background: var(--ivory); padding: var(--card-padding-md); border: var(--card-border-subtle); border-top: var(--card-border-width) solid var(--card-border-color); box-shadow: var(--card-shadow-rest); transition: var(--card-transition); position: relative; } .card-base:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); border-color: var(--gold); } /* Card Size Modifiers */ .card--lg { padding: var(--card-padding-lg); } .card--md { padding: var(--card-padding-md); } .card--sm { padding: var(--card-padding-sm); } /* Card Accent Modifiers — Border color variations */ .card--gold { border-top-color: var(--gold); } .card--burgundy { border-top-color: var(--burgundy); } .card--blue { border-top-color: var(--blue); } .card--floor { border-top-color: var(--floor-primary); } .card--cold { border-top-color: var(--cold-primary); } .card--heat { border-top-color: var(--heat-primary); } .card--dark { border-top-color: var(--dark-primary); } .card--sun { border-top-color: var(--sun-primary); } .card--silence { border-top-color: var(--silence-primary); } .card--hunger { border-top-color: var(--hunger-primary); } /* Card Background Modifiers */ .card--ivory { background: var(--ivory); } .card--cream { background: var(--cream); } .card--cream-warm { background: var(--cream-warm); } .card--cream-deep { background: var(--cream-deep); } /* Card Typography — Consistent internal hierarchy */ .card-base h3, [class*="-card"] h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-normal); margin-bottom: var(--spacing-sm); color: var(--black); } .card-base h4, [class*="-card"] h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); line-height: var(--leading-normal); color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .card-base p, [class*="-card"] p { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-tight); color: var(--deep-earth); text-align: left; } /* Card with left accent border (for definitions/emphasis) */ .card--accent-left { border-top: none; border-left: 4px solid var(--card-border-color); } /* ═══════════════════════════════════════════════════════════════ TF-CARD — UNIFIED CARD SYSTEM ═══════════════════════════════════════════════════════════════ The ONE card system. All cards across the site use this. 5 variants, 7 teacher modifiers, consistent structure. ═══════════════════════════════════════════════════════════════ */ /* Base TF Card — Museum display case aesthetic */ .tf-card { display: block; background: var(--ivory); padding: var(--card-padding-lg); border: 1px solid rgba(196, 168, 85, 0.2); box-shadow: var(--card-shadow-rest); transition: var(--card-transition); position: relative; text-decoration: none; } .tf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); opacity: 0.7; } .tf-card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); border-color: rgba(196, 168, 85, 0.4); } .tf-card:hover::before { opacity: 1; } /* TF Card Internal Components */ .tf-card__icon { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--gold); margin-bottom: var(--spacing-sm); } .tf-card__label { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .tf-card__title { display: block; font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-normal); color: var(--black); margin-bottom: var(--spacing-xs); } .tf-card__stat { display: block; font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--gold); line-height: 1; margin-bottom: var(--spacing-sm); } .tf-card__text { display: block; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); color: var(--earth); text-align: left; } .tf-card__meta { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--clay-readable); margin-top: var(--spacing-sm); } .tf-card__link { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--gold-deep); margin-top: var(--spacing-sm); } /* TF Card Variant: Definition */ .tf-card--definition { padding: var(--card-padding-lg); background: rgba(196, 168, 85, 0.04); border: 1px solid rgba(196, 168, 85, 0.25); border-top: 2px solid var(--gold); } .tf-card--definition .tf-card__title { font-size: var(--text-xl); margin-bottom: var(--spacing-sm); } .tf-card--definition .tf-card__text { max-width: 60ch; } /* TF Card Variant: Stat */ .tf-card--stat { /* text-align removed for left justification */ } /* TF Card Variant: Action */ .tf-card--action { background: var(--cream-deep); border-top-color: var(--burgundy); } .tf-card--action:hover { background: var(--cream-warm); } /* TF Card Variant: Teacher — Dark charcoal laden in gold */ .tf-card--teacher { /* text-align removed for left justification */ padding: 2.5rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 260px; background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); border: 1px solid var(--gold); transition: transform 0.3s ease, box-shadow 0.3s ease; } .tf-card--teacher:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(196, 169, 98, 0.3), 0 0 0 1px var(--gold); border-color: var(--gold-pale); } .tf-card--teacher::before { height: 5px; opacity: 1; background: var(--gold); } /* Icon — Large centered symbol */ .tf-card--teacher .tf-card__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 1.5rem; border: 2px solid var(--gold); border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-normal); color: var(--gold); background: rgba(196, 169, 98, 0.1); transition: all 0.4s ease; } .tf-card--teacher:hover .tf-card__icon { transform: scale(1.08); box-shadow: 0 0 24px rgba(196, 169, 98, 0.4); background: rgba(196, 169, 98, 0.2); } /* Title — Prominent, gold for emphasis */ .tf-card--teacher .tf-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); color: var(--gold); margin-bottom: 0.75rem; } /* Description — Brief explanation */ .tf-card--teacher .tf-card__desc { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); color: rgba(245, 241, 234, 0.9); margin-bottom: 1.25rem; flex-grow: 1; /* text-align removed for left justification */ } /* Text — Essence word at bottom */ .tf-card--teacher .tf-card__text { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(196, 169, 98, 0.3); width: 100%; /* text-align removed for left justification */ } /* Teacher Color Modifiers — Signature accent on top bar, gold icons unified */ .tf-card--floor::before { background: var(--floor-primary); } .tf-card--cold::before { background: var(--cold-primary); } .tf-card--heat::before { background: var(--heat-primary); } .tf-card--dark::before { background: var(--dark-primary); } .tf-card--sun::before { background: var(--sun-primary); } .tf-card--silence::before { background: var(--silence-primary); } .tf-card--hunger::before { background: var(--hunger-deep); } /* ═══════════════════════════════════════════════════════════════ TF-GRID — UNIFIED GRID SYSTEM ═══════════════════════════════════════════════════════════════ */ .tf-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } .tf-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .tf-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } /* tf-grid--7: Teachers grid — 3 columns (was 7) for substantial cards */ .tf-grid--7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); } /* Last row with single item (7th) spans center */ .tf-grid--7 > *:nth-child(7) { grid-column: 2 / 3; } /* Grid Responsive */ @media (max-width: 1024px) { .tf-grid--7 { grid-template-columns: repeat(3, 1fr); } .tf-grid--7 > *:nth-child(7) { grid-column: 2 / 3; } .tf-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .tf-grid--7 { grid-template-columns: repeat(2, 1fr); } .tf-grid--7 > *:nth-child(7) { grid-column: 1 / -1; } .tf-grid--4 { grid-template-columns: repeat(2, 1fr); } .tf-grid--3 { grid-template-columns: 1fr; } .tf-grid--2 { grid-template-columns: 1fr; } } /* Stacked Cards — Vertical layout for cards with longer text */ /* Use when card text needs breathing room (no cramped columns) */ .stacked-cards { display: flex; flex-direction: column; gap: var(--spacing-md); max-width: 800px; margin: 0 auto; } .stacked-cards .tf-card { width: 100%; } @media (max-width: 480px) { .tf-grid--7 { grid-template-columns: 1fr; } .tf-grid--7 > *:nth-child(7) { grid-column: auto; } } /* ═══════════════════════════════════════════════════════════════ TF-SECTION — UNIFIED SECTION SYSTEM ═══════════════════════════════════════════════════════════════ */ [class*="tf-section--"] { padding: var(--spacing-xl) 0; position: relative; } /* tf-section alignment now controlled by unified system at line ~797 */ [class*="tf-section--"] .section-title { margin-bottom: var(--spacing-md); } [class*="tf-section--"] .section-intro { max-width: 70ch; margin-bottom: var(--spacing-lg); font-size: var(--text-md); color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ SECTION STRUCTURE — Unified layout pattern ═══════════════════════════════════════════════════════════════ */ /* Section Header Pattern — left aligned per unified system */ .section-header { margin-bottom: var(--spacing-lg); } .section-header .section-label { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--burgundy); margin-bottom: var(--spacing-sm); } .section-header h2 { font-family: var(--font-important); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); line-height: var(--leading-snug); color: var(--black); } .section-header .section-intro { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); max-width: 70ch; margin: var(--spacing-md) auto 0; /* Alignment controlled by unified system */ } /* ═══════════════════════════════════════════════════════════════ BANNER BACKGROUNDS — Dramatic Color Sections ═══════════════════════════════════════════════════════════════ Use sparingly for emphasis. Creates rhythm through the page. BURGUNDY: Crisis, warning, problem statements BLUE: Evidence, research, trust, expansiveness DARK: Proclamation, emphasis, foundational statements On dark backgrounds, text inverts to cream/gold. ═══════════════════════════════════════════════════════════════ */ .banner--burgundy { background: var(--banner-burgundy); color: var(--cream); } .banner--burgundy h1, .banner--burgundy h2, .banner--burgundy h3 { color: var(--cream); } .banner--burgundy .section-label { color: var(--gold-pale); } .banner--burgundy p { color: rgba(245, 241, 234, 0.9); } .banner--blue { background: var(--banner-blue); color: var(--cream); } .banner--blue h1, .banner--blue h2, .banner--blue h3 { color: var(--cream); } .banner--blue .section-label { color: var(--gold-pale); } .banner--blue p { color: rgba(245, 241, 234, 0.9); } /* Papal Teal — Byzantine authority, aged bronze patina */ .banner--teal { background: var(--banner-teal); color: var(--cream); position: relative; } .banner--teal h1, .banner--teal h2, .banner--teal h3 { color: var(--cream); } .banner--teal .section-label { color: var(--gold-pale); } .banner--teal p { color: rgba(245, 241, 234, 0.9); } .banner--teal .section-link, .banner--teal a:not(.nav-link) { color: var(--gold); border-color: var(--gold); } .banner--teal .section-link:hover, .banner--teal a:not(.nav-link):hover { background: rgba(196, 169, 98, 0.15); } /* Ecclesiastical Purple Banner — Mystical depth, transitions, thresholds */ .banner--purple { background: var(--banner-purple); color: var(--cream); position: relative; } .banner--purple h1, .banner--purple h2, .banner--purple h3 { color: var(--cream); } .banner--purple .section-label { color: var(--gold-pale); } .banner--purple p { color: rgba(245, 241, 234, 0.9); } .banner--purple .section-link, .banner--purple a:not(.nav-link) { color: var(--gold); border-color: var(--gold); } .banner--purple .section-link:hover, .banner--purple a:not(.nav-link):hover { background: rgba(196, 169, 98, 0.15); } .banner--dark { background: var(--banner-dark); color: var(--cream); } .banner--dark h1, .banner--dark h2, .banner--dark h3 { color: var(--gold); } .banner--dark .section-label { color: var(--gold-pale); } .banner--dark p { color: rgba(245, 241, 234, 0.85); } /* Banner accent borders */ .banner--teal::before, .banner--purple::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); } /* ═══════════════════════════════════════════════════════════════ UTILITY CLASSES Spacing, alignment, and common modifiers ═══════════════════════════════════════════════════════════════ */ /* Margin Top Utilities */ .mt-xs { margin-top: var(--spacing-xs); } .mt-sm { margin-top: var(--spacing-sm); } .mt-sm-plus { margin-top: var(--spacing-sm-plus); } .mt-md { margin-top: var(--spacing-md); } .mt-md-plus { margin-top: var(--spacing-md-plus); } .mt-lg { margin-top: var(--spacing-lg); } .mt-1 { margin-top: var(--spacing-sm); } .mt-2 { margin-top: var(--spacing-md); } /* Component Offset Modifiers */ .key-insight--offset { margin-top: var(--spacing-md); } .definition-card--offset { margin-top: var(--spacing-md); } /* Accessibility — Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════ DARK SECTION UTILITIES — For sections with dark backgrounds Use these classes instead of inline styles for dark bg sections ═══════════════════════════════════════════════════════════════ */ /* Dark background section base */ .dark-section { background: var(--banner-dark); color: var(--text-on-dark); } /* Dark indigo variant (for dark teacher) */ .dark-section--indigo { background: var(--banner-dark-indigo); color: var(--text-on-dark); } /* Text utilities for dark backgrounds */ .dark-section p, .dark-section--indigo p { color: var(--text-on-dark); } .dark-section .text-muted, .dark-section--indigo .text-muted { color: var(--text-on-dark-muted); } /* Links on dark backgrounds */ .dark-section a:not(.btn), .dark-section--indigo a:not(.btn) { color: var(--gold); } .dark-section a:not(.btn):hover, .dark-section--indigo a:not(.btn):hover { color: var(--gold-pale); } /* Borders on dark backgrounds */ .dark-section__border-top { border-top: 1px solid var(--gold-dim); padding-top: var(--spacing-md); margin-top: var(--spacing-md); } /* Eighth element section styling */ .eighth-section { background: linear-gradient(135deg, var(--ivory) 0%, rgba(123, 107, 138, 0.08) 100%); border-top: 3px solid var(--eighth-primary); } .eighth-card { background: linear-gradient(135deg, var(--eighth-dim), var(--ivory)); border-top: 3px solid var(--eighth-primary); } /* ═══════════════════════════════════════════════════════════════ PATHWAY CONNECTORS — Visual Knowledge Progression Subtle gold lines and diamond markers suggesting unlocking pathways ═══════════════════════════════════════════════════════════════ */ /* Pathway connector between sections — gold gradient line */ section[class*="tf-section"]::after, .conditions-pattern::after, .conditions-list::after { content: ''; position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%); width: 1px; height: 4rem; background: linear-gradient(180deg, var(--gold) 0%, rgba(196, 168, 85, 0.3) 70%, transparent 100%); opacity: 0.4; pointer-events: none; } /* Hide connector on last section before footer */ section:last-of-type::after, .conditions-closure::after, [class*="cta"]::after { display: none; } /* Diamond node marker — for emphasized content blocks */ .pathway-node { position: relative; } .pathway-node::before { content: '◇'; position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); color: var(--gold); font-size: 0.875rem; opacity: 0.5; } /* ═══════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════ */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-delay-1 { transition-delay: 0.1s; } .fade-in-delay-2 { transition-delay: 0.2s; } .fade-in-delay-3 { transition-delay: 0.3s; } .fade-in-delay-4 { transition-delay: 0.4s; } @keyframes subtle-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(196, 169, 98, 0.08); } 50% { box-shadow: 0 8px 30px rgba(196, 169, 98, 0.15); } } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes border-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes fade-up-stagger { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-entrance { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-bar-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes symbol-glow { 0%, 100% { text-shadow: 0 0 60px rgba(196, 169, 98, 0.8), 0 0 120px rgba(196, 169, 98, 0.4); } 50% { text-shadow: 0 0 80px rgba(196, 169, 98, 1), 0 0 150px rgba(196, 169, 98, 0.6); } } /* Card hover lift effect */ .card-lift { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; } .card-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(196, 169, 98, 0.12); } /* Shimmer border effect */ .shimmer-border::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold-pale) 20%, var(--gold) 50%, var(--gold-pale) 80%, transparent 100%); background-size: 200% auto; opacity: 0; transition: opacity 0.3s ease; } .shimmer-border:hover::after { opacity: 1; animation: border-shimmer 2s linear infinite; } /* Staggered animation for grid children */ .stagger-grid > *:nth-child(1) { animation-delay: 0ms; } .stagger-grid > *:nth-child(2) { animation-delay: 80ms; } .stagger-grid > *:nth-child(3) { animation-delay: 160ms; } .stagger-grid > *:nth-child(4) { animation-delay: 240ms; } .stagger-grid > *:nth-child(5) { animation-delay: 320ms; } .stagger-grid > *:nth-child(6) { animation-delay: 400ms; } .stagger-grid > *:nth-child(7) { animation-delay: 480ms; } /* ═══════════════════════════════════════════════════════════════ NAVIGATION — Clean Premium Style ═══════════════════════════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(to bottom, rgba(26, 24, 22, 0.97), rgba(26, 24, 22, 0.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(196, 169, 98, 0.15); pointer-events: none; } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0.75rem 2rem; display: flex; justify-content: space-between; align-items: center; pointer-events: auto; } .nav__logo, .nav-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--weight-normal); letter-spacing: var(--tracking-widest); color: var(--cream); text-decoration: none; border: none; pointer-events: auto; transition: color 0.3s ease; } .nav__logo:hover, .nav-logo:hover { color: var(--gold); } .nav__logo span, .nav-logo span { color: var(--gold); text-shadow: 0 0 20px rgba(196, 169, 98, 0.4); } .nav__links, .nav-links { display: flex; gap: var(--spacing-xs); align-items: center; pointer-events: auto; } .nav__links a, .nav-links a, .nav-link { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(248, 245, 240, 0.9); text-decoration: none; border: none; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: color 0.2s ease, background 0.2s ease; } .nav__links a:hover, .nav-links a:hover, .nav-link:hover { color: var(--gold); background: rgba(196, 169, 98, 0.1); } /* Navigation Section Headers & Descriptive Links */ .nav-section-header { display: none; /* Hidden on desktop, shown on mobile */ } .nav-link-title { display: inline; } .nav-link-desc { display: none; /* Hidden on desktop, shown on mobile */ } .nav-divider { display: none; /* Hidden on desktop, shown on mobile */ } /* Mobile Menu Toggle Button — 44px minimum touch target */ /* Chapter Navigation Arrows */ .nav-chapter-arrows { display: flex; gap: 0.5rem; align-items: center; } .nav-chapter-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); text-decoration: none; font-size: 1.2rem; transition: all 0.3s ease; opacity: 0.8; } .nav-chapter-arrow:hover { background: var(--gold); color: var(--charcoal); opacity: 1; transform: scale(1.1); } .nav-chapter-arrow.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .nav-chapter-reset { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); text-decoration: none; font-size: 1.2rem; transition: all 0.3s ease; opacity: 0.8; } .nav-chapter-reset:hover { background: var(--gold); color: var(--charcoal); opacity: 1; transform: scale(1.05); } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; pointer-events: auto; padding: 12px; z-index: 10000; position: relative; overflow: visible; -webkit-tap-highlight-color: rgba(196, 169, 98, 0.3); } .nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--cream); transition: all 0.3s ease; transform-origin: center center; flex-shrink: 0; } .nav-toggle.active .nav-toggle__bar { background: var(--charcoal); } .nav-toggle.active .nav-toggle__bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.active .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.active .nav-toggle__bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ═══════════════════════════════════════════════════════════════ NAV DROPDOWNS — Elegant Floating Cards ═══════════════════════════════════════════════════════════════ */ .nav-dropdown { position: relative; } .nav-dropdown__trigger { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(248, 245, 240, 0.9); text-decoration: none; border: none; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; background: none; transition: color 0.2s ease, background 0.2s ease; } .nav-dropdown__trigger:hover, .nav-dropdown:hover .nav-dropdown__trigger { color: var(--gold); background: rgba(196, 169, 98, 0.1); } .nav-dropdown__arrow { font-size: 0.5rem; opacity: 0.6; transition: transform 0.3s ease, opacity 0.2s ease; } .nav-dropdown:hover .nav-dropdown__arrow { transform: rotate(180deg); opacity: 1; } .nav-dropdown__menu { position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%) scale(0.92); transform-origin: top center; min-width: 175px; background: rgba(32, 30, 28, 0.85); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); border: 1px solid rgba(196, 169, 98, 0.12); border-radius: 0.875rem; padding: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1), visibility 0.2s ease-out; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.06); z-index: 1001; } /* Soft inner glow — Terraforms gold warmth */ .nav-dropdown__menu::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at top, rgba(196, 169, 98, 0.04) 0%, transparent 70%); pointer-events: none; } .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } .nav-dropdown__menu a { display: block; font-size: 0.8125rem; font-weight: var(--weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(248, 245, 240, 0.9); text-decoration: none; padding: 0.6rem 0.875rem; border-radius: 0.5rem; transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; position: relative; } .nav-dropdown__menu a:hover { color: var(--gold); background: rgba(196, 169, 98, 0.1); transform: translateX(2px); } .nav-dropdown__menu a:active { transform: scale(0.98); background: rgba(196, 169, 98, 0.15); } /* Keep dropdown open when moving to it */ .nav-dropdown__menu::after { content: ''; position: absolute; top: -1.25rem; left: -1rem; right: -1rem; height: 1.25rem; } @media (max-width: 768px) { /* Dropdowns become flat lists on mobile */ .nav-dropdown { width: 100%; } .nav-dropdown__trigger { display: none; } .nav-dropdown__menu { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; backdrop-filter: none; border: none; border-radius: 0; padding: 0; box-shadow: none; min-width: 100%; } .nav-dropdown__menu::before { display: none; } .nav-dropdown__menu a { font-size: var(--text-sm); padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm); color: var(--charcoal); border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 0.25rem; } .nav-dropdown__menu .nav-link-title { font-size: var(--text-sm); } .nav-dropdown__menu .nav-link-desc { font-size: var(--text-2xs); } } @media (max-width: 768px) { .nav-inner { padding: 0.75rem 1rem; } .nav__logo, .nav-logo { font-size: 0.85rem; letter-spacing: 0.08em; } .nav-chapter-arrows { gap: 0.25rem; } .nav-chapter-arrow { width: 28px; height: 28px; font-size: 0.9rem; } .nav-chapter-reset { width: 28px; height: 28px; font-size: 1rem; } .nav-toggle { display: flex; z-index: 10002; margin-left: 0.5rem; } } @media (max-width: 500px) { .nav-inner { padding: 0.75rem 0.75rem; } .nav__logo, .nav-logo { font-size: 0.75rem; letter-spacing: 0.06em; } .nav-chapter-arrows { gap: 0.2rem; } .nav-chapter-arrow, .nav-chapter-reset { width: 26px; height: 26px; font-size: 0.85rem; } .nav-toggle { margin-left: 0.25rem; } } @media (max-width: 768px) { /* Mobile menu overlay - covers EVERYTHING including nav bar */ .nav__links, .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; /* dynamic viewport height for mobile */ background-color: #F4F0E8; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--spacing-xs); padding: calc(70px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg); z-index: 10001; /* Above nav (1000) */ overflow-y: auto; } .nav__links.active, .nav-links.active { display: flex; } /* Logo stays behind menu when open */ .nav.menu-open .nav-logo, .nav.menu-open .nav__logo { color: var(--charcoal); z-index: 10000; position: relative; } /* Section Headers - Mobile Only */ .nav-section-header { display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); padding: var(--spacing-xs) 0 var(--spacing-xs); margin-top: var(--spacing-xs); } .nav-section-header:first-child { margin-top: 0; } /* Dividers - Mobile Only */ .nav-divider { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-pale) 50%, transparent); margin: var(--spacing-sm) 0 var(--spacing-xs); opacity: 0.3; } /* Menu links */ .nav__links a, .nav-links a, .nav-link { font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 0.75rem 0; letter-spacing: var(--tracking-wide); color: var(--charcoal); min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; -webkit-tap-highlight-color: rgba(196, 169, 98, 0.3); width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.06); position: relative; z-index: 1; gap: 0.25rem; } .nav__links a:last-child, .nav-links a:last-child { border-bottom: none; } /* Link titles and descriptions - Mobile Only */ .nav-link-title { display: block; font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--charcoal); letter-spacing: var(--tracking-wide); } .nav-link-desc { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--earth); letter-spacing: var(--tracking-normal); opacity: 0.8; } .nav__links a:hover .nav-link-title, .nav-links a:hover .nav-link-title { color: var(--gold); } .nav-link--deepself { margin-top: var(--spacing-sm); padding-top: var(--spacing-sm) !important; border-top: 1px solid rgba(0, 245, 160, 0.2); } } /* Deep Self Navigation Link */ .nav-link--deepself { background: linear-gradient(135deg, rgba(0, 245, 160, 0.12) 0%, rgba(0, 245, 160, 0.06) 100%); border: 1px solid rgba(0, 245, 160, 0.4) !important; color: var(--deepself-accent) !important; border-radius: var(--radius-sm); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); white-space: nowrap; } .nav-link--deepself::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 245, 160, 0.15), transparent); transition: left 0.6s ease; } .nav-link--deepself:hover { background: linear-gradient(135deg, rgba(0, 245, 160, 0.2) 0%, rgba(0, 245, 160, 0.1) 100%); border-color: rgba(0, 245, 160, 0.7) !important; color: var(--deepself-accent) !important; box-shadow: 0 0 20px rgba(0, 245, 160, 0.2), inset 0 0 20px rgba(0, 245, 160, 0.05); transform: translateY(-1px); } .nav-link--deepself:hover::before { left: 100%; } .deepself-icon { display: inline-block; margin-right: 0.35em; font-size: 0.9em; animation: deepself-pulse 3s ease-in-out infinite; } @keyframes deepself-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* ═══════════════════════════════════════════════════════════════ DEEP SELF BANNER — The Eighth Element ═══════════════════════════════════════════════════════════════ */ .deepself-banner { background: linear-gradient(135deg, #0A0A0A 0%, #161616 50%, #0A0A0A 100%); position: relative; overflow: hidden; } .deepself-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 245, 160, 0.08), transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0, 245, 160, 0.05), transparent 50%); pointer-events: none; } .deepself-banner__inner { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); position: relative; z-index: 1; } .deepself-banner__content { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; } .deepself-banner__label { display: inline-block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--deepself-accent); background: rgba(0, 245, 160, 0.1); border: 1px solid rgba(0, 245, 160, 0.3); padding: 0.5rem 1.25rem; margin-bottom: var(--spacing-sm); } .deepself-banner__headline { font-family: var(--font-important); font-size: clamp(1.4rem, 3vw, 1.953rem); font-weight: var(--weight-semibold); color: var(--deepself-text); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); margin-bottom: var(--spacing-md); text-transform: none; } .deepself-banner__text { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 254, 249, 0.8); line-height: var(--leading-loose); max-width: none; margin: 0 0 var(--spacing-sm); } .deepself-banner__text:last-of-type { margin-bottom: var(--spacing-md); } .deepself-banner__features { display: flex; justify-content: flex-start; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-md); } .deepself-banner__feature { display: flex; align-items: center; gap: var(--spacing-xs); } .deepself-banner__feature-icon { color: var(--deepself-accent); font-size: var(--text-xs); opacity: 0.8; } .deepself-banner__feature-text { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ivory); } .deepself-banner__cta { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--black); background: var(--deepself-accent); padding: 1rem 2rem; text-decoration: none; border: none; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); position: relative; overflow: hidden; } .deepself-banner__cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } .deepself-banner__cta:hover { background: var(--deepself-text); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 245, 160, 0.3); } .deepself-banner__cta:hover::before { left: 100%; } .deepself-banner__cta-icon { font-size: var(--text-base); animation: deepself-pulse 3s ease-in-out infinite; } .deepself-banner__cta-arrow { transition: transform 0.3s ease; } .deepself-banner__cta:hover .deepself-banner__cta-arrow { transform: translateX(4px); } .deepself-banner__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 245, 160, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } @media (max-width: 768px) { .deepself-banner__inner { padding: var(--spacing-lg) var(--spacing-md); } .deepself-banner__headline { font-size: clamp(1.5rem, 5vw, 2rem); } .deepself-banner__text { font-size: var(--text-base); } .deepself-banner__features { gap: var(--spacing-md); } .deepself-banner__feature-text { font-size: var(--text-2xs); } .deepself-banner__cta { padding: 0.875rem 1.5rem; font-size: var(--text-sm); } } /* ═══════════════════════════════════════════════════════════════ FOUR REQUIREMENTS FOR COMPLETION ═══════════════════════════════════════════════════════════════ */ .requirements-section { background: var(--black); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .requirements-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 2px; background: linear-gradient(90deg, transparent, var(--burgundy), transparent); } .requirements-section .section-label { color: var(--burgundy); } .requirements-section .section-title { color: var(--ivory); margin-bottom: var(--spacing-lg); } .requirements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } .requirement-card { background: rgba(114, 47, 55, 0.15); border: 1px solid rgba(114, 47, 55, 0.3); padding: var(--spacing-lg) var(--spacing-md); /* text-align removed for left justification */ transition: all 0.4s ease; } .requirement-card:hover { background: rgba(114, 47, 55, 0.25); border-color: var(--burgundy); transform: translateY(-4px); } .requirement-card__title { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-normal); color: var(--ivory); margin-bottom: var(--spacing-sm); } .requirement-card__lost { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--burgundy); } .requirements-coda { font-family: var(--font-body); font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-style: normal; color: var(--ivory); /* text-align removed for left justification */ max-width: var(--max-width-narrow); margin: 0 auto; line-height: var(--leading-relaxed); } @media (max-width: 900px) { .requirements-grid { grid-template-columns: repeat(2, 1fr); } } /* ───────────────────────────────────────────────────────────────────────────── MYTHIC KERNEL SECTION ───────────────────────────────────────────────────────────────────────────── */ .mythic-kernel { background: linear-gradient(180deg, var(--black) 0%, rgba(26, 24, 22, 1) 50%, var(--black) 100%); padding: var(--spacing-xl) var(--spacing-md); border-top: 1px solid rgba(200, 169, 126, 0.15); border-bottom: 1px solid rgba(200, 169, 126, 0.15); } .mythic-content { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .mythic-content p { font-family: var(--font-body); font-size: clamp(1.05rem, 2vw, 1.15rem); line-height: var(--leading-loose); color: rgba(255, 254, 249, 0.9); margin-bottom: var(--spacing-sm); } .mythic-lead { font-size: clamp(1.1rem, 2.2vw, 1.25rem) !important; color: var(--ivory) !important; font-weight: var(--weight-normal); } .mythic-content strong { color: var(--gold); font-weight: var(--weight-medium); } .mythic-close { font-family: var(--font-body); font-size: clamp(1.15rem, 2.5vw, 1.3rem) !important; text-align: left; margin-top: var(--spacing-lg) !important; color: var(--ivory) !important; font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); } .mythic-translation { max-width: var(--max-width-narrow); margin: 0 auto; padding: var(--spacing-md); background: rgba(200, 169, 126, 0.08); border: 1px solid rgba(200, 169, 126, 0.2); border-radius: var(--radius-sm); } .mythic-translation h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gold-deep); margin-bottom: var(--spacing-sm); } .mythic-translation ul { list-style: none; padding: 0; margin: 0; } .mythic-translation li { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: rgba(255, 254, 249, 0.8); padding-left: 1.5rem; position: relative; margin-bottom: 0.75rem; } .mythic-translation li::before { content: '→'; position: absolute; left: 0; color: var(--gold); } .mythic-translation li:last-child { margin-bottom: 0; } @media (max-width: 500px) { .requirements-grid { grid-template-columns: 1fr; } .requirement-card { padding: var(--spacing-md); } } /* ═══════════════════════════════════════════════════════════════ ORIENTATION BANNER — Welcome/Context Opening ═══════════════════════════════════════════════════════════════ */ .orientation-banner { background: var(--charcoal); color: var(--cream); padding: var(--spacing-xl) 0; padding-top: calc(var(--spacing-xl) + 70px); /* Account for fixed nav */ border-bottom: 1px solid var(--gold-muted); } .orientation-banner .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-padding); } .orientation-banner__label { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--gold); margin-bottom: var(--spacing-md); } .orientation-banner__body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: #FFFFFF; margin-bottom: var(--spacing-sm); max-width: 680px; } .orientation-banner__body strong { color: var(--gold); } .orientation-banner__book { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--cream); margin-bottom: var(--spacing-xs); } .orientation-banner__book em { font-style: italic; color: var(--gold-pale); } .orientation-banner__book a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .orientation-banner__book a:hover { color: var(--gold-pale); } .orientation-banner__invite { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: #E8E5DE; } @media (max-width: 768px) { .orientation-banner { padding: var(--spacing-xl) 0; padding-top: calc(var(--spacing-xl) + 60px); } .orientation-banner .container { padding: 0 var(--spacing-md); max-width: 680px; } .orientation-banner__label { font-size: var(--text-lg); } .orientation-banner__body, .orientation-banner__book { font-size: var(--text-base); max-width: 100%; } .orientation-banner__invite { font-size: var(--text-sm); } } @media (max-width: 500px) { .orientation-banner .container { padding: 0 var(--spacing-sm); } } /* ═══════════════════════════════════════════════════════════════ HERO — Dramatic Premium Design ═══════════════════════════════════════════════════════════════ */ .hero { min-height: auto; display: flex; align-items: center; justify-content: flex-start; padding: var(--spacing-lg) 0 var(--spacing-lg); /* Soft museum lighting — diffuse, reverent, not dramatic */ background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(26, 24, 22, 0.15), transparent 70%), radial-gradient(ellipse 100% 80% at 50% 100%, rgba(196, 168, 85, 0.08), transparent), linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-pale), transparent); opacity: 0.6; } .hero__content, .hero-content { position: relative; z-index: 1; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 var(--page-padding); text-align: left; animation: hero-entrance 1.2s ease-out; } .hero__marker, .hero-marker, .hero__overline { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--burgundy); margin-bottom: var(--spacing-md); } .hero__title, .hero-title { margin-bottom: var(--spacing-md); text-shadow: 0 4px 40px rgba(196, 169, 98, 0.25); animation: hero-title-reveal 1.2s ease-out 0.5s both; font-size: clamp(4rem, 10vw, 6.5rem); letter-spacing: var(--tracking-wide); color: var(--black); } @keyframes hero-title-reveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .hero__title .section-symbol, .hero-title .section-symbol { color: var(--gold); text-shadow: 0 0 60px rgba(196, 169, 98, 0.8), 0 0 120px rgba(196, 169, 98, 0.4); animation: symbol-glow 3s ease-in-out infinite, gentle-float 4s ease-in-out infinite; display: inline-block; } .hero__subtitle, .hero-subtitle { font-size: var(--text-md); color: var(--earth); max-width: var(--content-width); margin-bottom: var(--spacing-lg); line-height: var(--leading-relaxed); } .hero-thesis { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--earth); max-width: 700px; margin: 0 0 var(--spacing-lg) 0; line-height: var(--leading-loose); text-align: left; } .hero__conditions, .hero-conditions { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-lg); animation: hero-conditions-reveal 1s ease-out 1s both; } @keyframes hero-conditions-reveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .condition-tag, .hero-condition { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); padding: 0.7rem 1.4rem; border: 1px solid rgba(114, 47, 55, 0.25); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease; } .condition-tag:hover, .hero-condition:hover { border-color: var(--burgundy); background: rgba(114, 47, 55, 0.1); color: var(--burgundy); transform: translateY(-4px); box-shadow: 0 8px 25px rgba(114, 47, 55, 0.15); } .hero__thesis, .thesis-claim { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--spacing-sm); } .thesis-body { font-size: var(--text-base); color: var(--earth); max-width: 650px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ PROCLAMATION BANNER — Burgundy Section ═══════════════════════════════════════════════════════════════ */ .proclamation-banner { background: linear-gradient(180deg, #5a2a30 0%, var(--burgundy) 50%, #5a2a30 100%); padding: var(--spacing-xl) var(--spacing-lg); /* text-align removed for left justification */ position: relative; overflow: hidden; } .proclamation-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.06; pointer-events: none; } .proclamation-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .proclamation-banner__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .proclamation-banner__headline { font-family: var(--font-important); font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: var(--weight-semibold); color: var(--gold); line-height: var(--leading-normal); margin-bottom: var(--spacing-md); letter-spacing: var(--tracking-widest); text-transform: uppercase; } .proclamation-banner__body { font-family: var(--font-body); font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: var(--weight-normal); color: rgba(255, 253, 245, 0.9); line-height: var(--leading-relaxed); max-width: 680px; margin: 0 auto var(--spacing-lg); } .proclamation-banner__body strong { font-weight: var(--weight-semibold); color: var(--cream); } /* ═══════════════════════════════════════════════════════════════ CURRENT REALITY TABLE ═══════════════════════════════════════════════════════════════ */ .current-reality { background: var(--ivory); padding: var(--spacing-lg) var(--spacing-md); } .reality-table { max-width: 600px; margin: 0 auto var(--spacing-md); } .reality-row { display: grid; grid-template-columns: 1fr 1fr 40px; padding: var(--spacing-sm); border-bottom: 1px solid var(--cream-deep); } .reality-header { font-weight: var(--weight-semibold); color: var(--black); border-bottom: 2px solid var(--burgundy); } .reality-row .arrow { color: var(--burgundy); /* text-align removed for left justification */ } .reality-summary { text-align: left; font-style: normal; color: var(--earth); max-width: var(--max-width-narrow); margin: var(--spacing-md) auto 0; } /* ═══════════════════════════════════════════════════════════════ UNIFYING INSIGHT SECTION ═══════════════════════════════════════════════════════════════ */ .unifying-insight { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .insight-core, .insight-statement { font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: var(--weight-normal); color: var(--black); text-align: left; max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); line-height: var(--leading-loose); } .insight-evidence { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 768px) { .insight-evidence { grid-template-columns: 1fr; } } .evidence-column { padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--blue); text-align: left; } .evidence-column h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--blue); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-bottom: var(--spacing-sm); } .evidence-column p { font-size: var(--text-sm); color: var(--earth); margin: 0; line-height: var(--leading-relaxed); } .insight-research { text-align: left; font-size: var(--text-sm); color: var(--blue); font-weight: var(--weight-medium); max-width: var(--max-width-narrow); margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ THERAPEUTIC INNOVATION ═══════════════════════════════════════════════════════════════ */ .therapeutic-innovation { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .innovation-core, .innovation-statement { font-family: var(--font-body); font-size: clamp(1.05rem, 2vw, 1.2rem); text-align: left; max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); color: var(--black); line-height: var(--leading-loose); } .innovation-why { max-width: 700px; margin: 0 auto; padding: var(--spacing-md); background: var(--cream-warm); border-left: 3px solid var(--gold); } .innovation-why h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-bottom: var(--spacing-sm); } /* ═══════════════════════════════════════════════════════════════ KEY STATISTICS ═══════════════════════════════════════════════════════════════ */ .key-stats { background: var(--cream-deep); padding: var(--spacing-lg) var(--spacing-md); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; } } .stat-item { /* text-align removed for left justification */ padding: var(--spacing-md); background: var(--ivory); border-top: 3px solid var(--gold); } .stat-number, .stat-value { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--gold); display: block; } .stat-label { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--earth); text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* ═══════════════════════════════════════════════════════════════ SECTION PATTERNS — Alignment controlled by unified system (~line 800) ═══════════════════════════════════════════════════════════════ */ .section-title { margin-bottom: var(--spacing-sm); } .section-intro { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); max-width: var(--max-width-narrow); margin-bottom: var(--spacing-lg); line-height: var(--leading-relaxed); } /* When section-intro follows section-title directly */ .section-title + .section-intro { margin-top: var(--spacing-sm); } /* Section cross-links */ .section-link { display: inline-block; font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--gold); text-decoration: none; margin-top: var(--spacing-md); padding: 0.75rem 1.5rem; border: 1px solid var(--gold); transition: all 0.3s ease; } .section-link:hover { background: var(--gold); color: var(--black); } /* ═══════════════════════════════════════════════════════════════ ORIGINS / MATTERS SECTIONS ═══════════════════════════════════════════════════════════════ */ .origins, .why-matters { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .origins .container, .why-matters .container { max-width: var(--max-width-narrow); } .origins-content, .matters-content { font-size: var(--text-md); } /* ═══════════════════════════════════════════════════════════════ THESIS SECTION ═══════════════════════════════════════════════════════════════ */ .thesis { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .thesis-definition { max-width: 800px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-lg); background: var(--cream-warm); border-left: 4px solid var(--gold); } .thesis-definition p { font-family: var(--font-body); font-size: var(--text-md); color: var(--black); margin: 0; } .thesis-key { margin-bottom: var(--spacing-lg); } .thesis-quote blockquote { font-family: var(--font-body); font-size: clamp(1.5rem, 3vw, 2rem); font-style: normal; color: var(--gold-deep); margin: 0; } /* ═══════════════════════════════════════════════════════════════ REAL TEACHERS INTRO ═══════════════════════════════════════════════════════════════ */ .real-teachers-intro { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .teachers-intro-text { max-width: var(--max-width-narrow); margin: 0 auto; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); text-align: left; color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ TEACHERS OVERVIEW / GRID ═══════════════════════════════════════════════════════════════ */ .teachers-overview, .teachers { background: radial-gradient(ellipse 80% 50% at 20% 100%, var(--gold-dim), transparent), var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .teachers-overview::before, .teachers::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, var(--ivory), transparent); } .teachers-icons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-sm); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (min-width: 1100px) { .teachers-icons-grid { grid-template-columns: repeat(7, 1fr); } } .teacher-icon { background: var(--cream); backdrop-filter: blur(10px); padding: var(--spacing-lg) var(--spacing-sm); /* text-align removed for left justification */ transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.3s ease; text-decoration: none; border: none; display: block; } .teacher-icon:hover { background: var(--ivory); transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 50px var(--gold-dim); z-index: 2; position: relative; } .icon-letter { width: 52px; height: 52px; margin: 0 auto var(--spacing-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-pale); border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; color: var(--gold); background: rgba(196, 169, 98, 0.05); transition: transform 0.4s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease; } .teacher-icon:hover .icon-letter { background: rgba(196, 169, 98, 0.15); border-color: var(--gold); box-shadow: 0 0 30px rgba(196, 169, 98, 0.35); transform: scale(1.1); } .icon-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); display: block; letter-spacing: var(--tracking-wide); } .icon-descriptor { font-size: var(--text-xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--weight-medium); } /* Note: .teachers-principle section styling is in Teachers Index section below */ /* ═══════════════════════════════════════════════════════════════ SCEPTICISM SECTION ═══════════════════════════════════════════════════════════════ */ .scepticism { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); } .scepticism-text { max-width: 700px; margin: 0 auto; /* text-align removed for left justification */ font-size: var(--text-md); } /* ═══════════════════════════════════════════════════════════════ EVIDENCE SECTION ═══════════════════════════════════════════════════════════════ */ .evidence { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .evidence-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-xl); } /* Evidence Cards — Museum-quality statistical displays */ .evidence-card { background: var(--ivory); padding: 2.5rem 3rem; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(196, 169, 98, 0.2); border-top: 3px solid var(--burgundy); display: flex; flex-direction: column; } .evidence-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(107, 44, 53, 0.12); } .evidence-stat { font-family: var(--font-important); font-size: 2.75rem; font-weight: var(--weight-semibold); color: var(--burgundy); line-height: var(--leading-tight); margin-bottom: 1.25rem; letter-spacing: var(--tracking-tighter); } .evidence-title { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--charcoal); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(196, 169, 98, 0.25); } .evidence-text, .evidence-desc { font-size: 1rem; color: var(--earth); margin: 0; line-height: var(--leading-relaxed); flex-grow: 1; } .evidence-card cite, .evidence-source { font-size: var(--text-sm); color: var(--gold-deep); font-weight: var(--weight-medium); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(196, 169, 98, 0.15); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-style: normal; } .evidence-conclusion { text-align: left; max-width: 700px; margin: 0 auto; font-weight: var(--weight-medium); } /* ═══════════════════════════════════════════════════════════════ CONDITIONS / WHO THIS SERVES ═══════════════════════════════════════════════════════════════ */ .who-serves, .who { background: linear-gradient(180deg, rgba(114, 47, 55, 0.03), var(--ivory)); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .who-serves::before, .who::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--burgundy), transparent); } .conditions-cards { display: flex; flex-direction: column; gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } .condition-card { background: var(--cream); padding: var(--spacing-xl); transition: var(--transition); position: relative; border: 1px solid var(--cream-deep); border-top: 3px solid var(--burgundy); } .condition-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(114, 47, 55, 0.1); border-color: var(--burgundy-light); } .condition-header { background: linear-gradient(135deg, var(--cream-warm), var(--cream)); padding: var(--spacing-lg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--spacing-xs); border-right: 1px solid var(--cream-deep); } @media (max-width: 600px) { .condition-header { border-right: none; border-bottom: 1px solid var(--cream-deep); flex-direction: row; align-items: center; } } .condition-number { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--burgundy); line-height: 1; display: block; margin-bottom: var(--spacing-xs); } .condition-title { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--burgundy); margin-bottom: var(--spacing-sm); } .condition-stat { font-size: var(--text-sm); color: var(--gold-deep); margin-bottom: var(--spacing-md); font-weight: var(--weight-semibold); line-height: var(--leading-normal); display: block; } .condition-text, .condition-desc { font-size: var(--text-base); color: var(--earth); margin: 0; line-height: var(--leading-relaxed); } /* Note: .condition-link is defined in CONDITIONS PAGE section */ .who-insight { text-align: left; max-width: 700px; margin: var(--spacing-lg) auto 0; font-style: normal; } /* ═══════════════════════════════════════════════════════════════ CLUSTER / INTERCONNECTION ═══════════════════════════════════════════════════════════════ */ .cluster, .interconnection { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .ace-connection { max-width: 800px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-lg); background: var(--ivory); border-left: 4px solid var(--burgundy); } .ace-connection h3 { color: var(--burgundy); } .ace-intro { font-weight: var(--weight-medium); margin-bottom: var(--spacing-md); } .ace-research { background: var(--cream-warm); padding: var(--spacing-md); margin-bottom: var(--spacing-md); } .research-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--burgundy); display: block; margin-bottom: var(--spacing-xs); } .ace-meaning h4 { color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .shared-biomarkers { max-width: var(--max-width); margin: 0 auto; } .biomarkers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); } .biomarker { padding: var(--spacing-md); background: var(--ivory); border-top: 3px solid var(--gold); } .biomarker h4 { font-family: var(--font-important); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .biomarker p { font-size: var(--text-sm); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════ RESPECT SECTION ═══════════════════════════════════════════════════════════════ */ .respect { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); } .respect-text { max-width: 750px; margin: 0 auto; font-size: var(--text-md); /* text-align removed for left justification */ } /* ═══════════════════════════════════════════════════════════════ FIVE DOMAINS OF DEFENCE ═══════════════════════════════════════════════════════════════ */ .domains { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .domains::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .principle-title { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gold-deep); /* text-align removed for left justification */ margin-bottom: var(--spacing-sm); } .principle-desc { /* text-align removed for left justification */ max-width: 700px; margin: 0 auto var(--spacing-lg); } .domains-grid, .domain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: rgba(196, 169, 98, 0.3); max-width: var(--max-width); margin: 0 auto; box-shadow: 0 8px 60px var(--gold-dim), 0 0 0 1px rgba(196, 169, 98, 0.2); } @media (max-width: 1024px) { .domains-grid, .domain-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .domains-grid, .domain-grid { grid-template-columns: 1fr; } } .domain-card { background: var(--cream); padding: 0; transition: var(--transition); position: relative; /* text-align removed for left justification */ overflow: hidden; } .domain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-pale)); } .domain-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background: var(--gold); opacity: 0; transition: var(--transition); } .domain-card:hover { background: var(--ivory); transform: translateY(-3px); z-index: 2; box-shadow: 0 12px 40px rgba(196, 169, 98, 0.18); } .domain-card:hover::after { opacity: 1; width: 60px; } .domain-header { background: linear-gradient(to bottom, rgba(196, 169, 98, 0.1), transparent); padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); } .domain-number { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--gold); line-height: 1; margin-bottom: var(--spacing-xs); text-shadow: 0 0 30px rgba(196, 169, 98, 0.3); /* text-align removed for left justification */ } .domain-title { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--black); margin-bottom: 0; /* text-align removed for left justification */ } .domain-body { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); } .domain-label { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .domain-list, .domain-items { list-style: none; font-size: var(--text-sm); color: var(--earth); text-align: left; } .domain-list li, .domain-items li { padding: 0.4rem 0; border-bottom: 1px solid var(--cream-deep); position: relative; padding-left: 0.8rem; } .domain-list li::before, .domain-items li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: var(--gold); border-radius: var(--radius-full); } .domain-list li:last-child, .domain-items li:last-child { border: none; } /* ═══════════════════════════════════════════════════════════════ INSTALLATION / HOW DEFENSES INSTALL ═══════════════════════════════════════════════════════════════ */ .installation { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .installation-key { max-width: 700px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--gold); text-align: left; } .encoding-section, .insight-fails { max-width: 700px; margin: 0 auto var(--spacing-lg); } .encoding-section h3, .insight-fails h3 { color: var(--burgundy); margin-bottom: var(--spacing-sm); } .mechanism-grid { max-width: var(--max-width); margin: var(--spacing-md) auto; } .mechanism-grid h3 { color: var(--burgundy); margin-bottom: var(--spacing-lg); /* text-align removed for left justification */ } .mechanisms { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .mechanism { padding: 2rem 2.5rem; background: var(--ivory); border-top: 3px solid var(--gold); } .mechanism h4 { font-family: var(--font-important); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .mechanism p { font-size: var(--text-sm); color: var(--earth); margin: 0; } .installation-why { text-align: left; max-width: 700px; margin: var(--spacing-lg) auto 0; font-weight: var(--weight-medium); } /* ═══════════════════════════════════════════════════════════════ PROCEDURAL MEMORY ═══════════════════════════════════════════════════════════════ */ .procedural { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .procedural-foundation { max-width: 800px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-lg); background: var(--cream-warm); border-left: 4px solid var(--burgundy); } .foundation-label, .fails-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); } .procedural-foundation blockquote { font-family: var(--font-body); font-size: var(--text-md); color: var(--black); margin: 0; font-style: normal; } .therapy-fails { max-width: 700px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-md); background: var(--cream-deep); } .fails-stats { font-size: var(--text-sm); color: var(--burgundy); font-weight: var(--weight-medium); margin-bottom: var(--spacing-sm); } .fails-key { font-style: normal; color: var(--earth); } .memory-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .memory-comparison { grid-template-columns: 1fr; } } .memory-type { padding: var(--spacing-lg); background: var(--cream); } .memory-type.implicit { border-left: 4px solid var(--burgundy); } .memory-type.explicit { border-left: 4px solid var(--gold); } .memory-type h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: var(--spacing-sm); } .memory-type ul { list-style: none; font-size: var(--text-sm); color: var(--earth); } .memory-type ul li { padding: 0.4rem 0; border-bottom: 1px solid var(--cream-deep); padding-left: 1rem; position: relative; } .memory-type ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .memory-type ul li:last-child { border: none; } /* ═══════════════════════════════════════════════════════════════ TEACHERS DETAILED ═══════════════════════════════════════════════════════════════ */ .teachers-detailed { background: var(--cream); padding: var(--spacing-xl) var(--spacing-md); } .method-title { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gold-deep); /* text-align removed for left justification */ margin-bottom: var(--spacing-sm); } .method-desc { /* text-align removed for left justification */ max-width: 700px; margin: 0 auto var(--spacing-lg); } .teachers-list { max-width: 800px; margin: 0 auto var(--spacing-lg); } .teacher-detail { display: flex; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-bottom: 1px solid var(--cream-deep); align-items: flex-start; } .teacher-detail:last-child { border: none; } .teacher-icon-large { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; color: var(--gold); background: rgba(196, 169, 98, 0.1); border: 1px solid var(--gold-pale); border-radius: var(--radius-full); flex-shrink: 0; } .teacher-content h3 { font-family: var(--font-important); font-size: var(--text-xl); color: var(--black); margin-bottom: var(--spacing-xs); } .teacher-descriptor { font-size: var(--text-xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--weight-medium); display: block; margin-bottom: var(--spacing-sm); } .teacher-content p { font-size: var(--text-base); color: var(--earth); margin: 0; } .teachers-advantage { /* text-align removed for left justification */ max-width: 700px; margin: 0 auto; font-style: normal; color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ FLOOR CONTACT ═══════════════════════════════════════════════════════════════ */ .floor-contact, .floor { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .floor-subtitle { /* text-align removed for left justification */ max-width: 700px; margin: 0 auto var(--spacing-lg); font-size: var(--text-md); color: var(--earth); } .floor-grid, .properties-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .floor-aspect, .property { background: var(--cream); padding: 2.5rem 3rem; position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.3s ease, border-color 0.3s ease; border-bottom: 2px solid transparent; } .floor-aspect:hover, .property:hover { border-color: var(--gold); background: var(--ivory); transform: translateY(-6px); box-shadow: 0 12px 35px rgba(196, 169, 98, 0.12); } .floor-aspect h4, .property-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); text-align: left; } .floor-aspect p, .property-text { font-size: var(--text-sm); color: var(--earth); margin: 0; text-align: left; line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════ SOMATIC PRACTICES ═══════════════════════════════════════════════════════════════ */ .somatic-practices, .somatic { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .somatic-practices::before, .somatic::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .practices-grid, .tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .practices-grid, .tech-grid { grid-template-columns: 1fr; } } .practice-card, .tech-card { background: var(--ivory); padding: var(--spacing-lg); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; position: relative; border: 1px solid transparent; overflow: hidden; } .practice-card::before, .tech-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform 0.4s ease; } .practice-card:hover, .tech-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px var(--gold-dim); border-color: rgba(196, 169, 98, 0.2); } .practice-card:hover::before, .tech-card:hover::before { transform: scaleX(1); } .practice-card h3, .tech-title { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); text-align: left; } .mechanism-label, .tech-subtitle { font-size: var(--text-xs); color: var(--burgundy); text-transform: uppercase; letter-spacing: var(--tracking-ultra); margin-bottom: var(--spacing-sm); font-weight: var(--weight-medium); text-align: left; display: block; } .mechanism-desc, .tech-text { font-size: var(--text-sm); color: var(--earth); margin-bottom: var(--spacing-sm); text-align: left; line-height: var(--leading-relaxed); } .practice-research, .tech-evidence { font-size: var(--text-xs); color: var(--clay-readable); font-style: normal; padding-top: var(--spacing-sm); border-top: 1px solid var(--cream-deep); text-align: left; } /* ═══════════════════════════════════════════════════════════════ VAGAL TONING ═══════════════════════════════════════════════════════════════ */ .vagal-toning, .vagal { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .vagal-intro, .vagal-key, .vagal-advanced { max-width: 800px; margin: 0 auto var(--spacing-md); font-size: var(--text-md); } .vagal-key { padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--gold); } .vagal-research { max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } .vagal-studies { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } @media (max-width: 768px) { .vagal-studies { grid-template-columns: 1fr; } } .study, .research-item { padding: var(--spacing-md); background: var(--cream); border-left: 3px solid var(--gold); } .study h4, .research-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .study p, .research-text { font-size: var(--text-sm); color: var(--earth); margin-bottom: var(--spacing-xs); } .study cite, .research-source { font-size: var(--text-xs); color: var(--clay-readable); font-style: normal; } /* ═══════════════════════════════════════════════════════════════ COLD EXPOSURE ═══════════════════════════════════════════════════════════════ */ .cold-exposure, .cold { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .cold-exposure::before, .cold::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .cold-concept { max-width: 700px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-md); background: var(--cream-warm); border-left: 3px solid var(--gold); } .concept-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--gold-deep); display: block; margin-bottom: var(--spacing-xs); } .cold-concept h3 { color: var(--black); margin-bottom: var(--spacing-sm); } .cold-intro, .cold-timing { max-width: 700px; margin: 0 auto var(--spacing-md); text-align: left; } .cold-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } @media (max-width: 900px) { .cold-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .cold-stats { grid-template-columns: 1fr; } } .cold-stat { background: var(--cream-warm); padding: var(--spacing-md); /* text-align removed for left justification */ transition: var(--transition); border: 1px solid transparent; } .cold-stat:hover { border-color: rgba(196, 169, 98, 0.2); background: var(--cream); } .cold-stat .stat-value, .cold-stat-value { font-family: var(--font-important); font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--gold); text-shadow: 0 0 30px rgba(196, 169, 98, 0.2); display: block; } .cold-stat .stat-desc, .cold-stat-label { font-size: var(--text-sm); color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ FREEZE RESPONSE / EYES ═══════════════════════════════════════════════════════════════ */ .freeze-response, .eyes { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .freeze-understanding { max-width: 700px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--burgundy); } .understanding-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--burgundy); display: block; margin-bottom: var(--spacing-xs); } .emdr-discovery { max-width: 700px; margin: 0 auto var(--spacing-lg); } .emdr-discovery h3 { color: var(--gold-deep); margin-bottom: var(--spacing-sm); } .emdr-research { background: var(--cream); padding: var(--spacing-md); margin: var(--spacing-md) 0; } .emdr-practice { font-size: var(--text-base); color: var(--earth); } .neural-mechanism { max-width: var(--max-width); margin: 0 auto; } .neural-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-md); } @media (max-width: 768px) { .neural-grid { grid-template-columns: 1fr; } } .neural-element, .mechanism-item { padding: var(--spacing-md); background: var(--ivory); border-top: 3px solid var(--gold); } .neural-element h4, .mechanism-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .neural-element p, .mechanism-text { font-size: var(--text-sm); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════ ME/CFS SECTION ═══════════════════════════════════════════════════════════════ */ .mecfs { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); position: relative; border-left: 4px solid var(--burgundy); } .mecfs::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--burgundy), transparent 50%); } .mecfs-main, .mecfs-research, .mecfs-theory, .mecfs-nice, .mecfs-hypothesis { max-width: 800px; margin: 0 auto var(--spacing-md); } .mecfs-subpostures { max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } .subpostures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); } .subposture, .posture-item { padding: var(--spacing-md); background: var(--cream); border-left: 3px solid var(--burgundy); } .subposture h4, .posture-title { font-family: var(--font-important); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .subposture p, .posture-text { font-size: var(--text-sm); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════ LONG COVID ═══════════════════════════════════════════════════════════════ */ .long-covid, .longcovid { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); position: relative; border-left: 4px solid var(--burgundy); } .long-covid::before, .longcovid::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--burgundy), transparent 50%); } .covid-key { max-width: 700px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--burgundy); } .key-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--burgundy); display: block; margin-bottom: var(--spacing-xs); } .covid-finding, .covid-overlap, .covid-emphasis { max-width: 700px; margin: 0 auto var(--spacing-md); } .covid-stats, .longcovid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } @media (max-width: 900px) { .covid-stats, .longcovid-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .covid-stats, .longcovid-stats { grid-template-columns: 1fr; } } .covid-stat, .longcovid-stat { background: var(--cream); padding: var(--spacing-md); /* text-align removed for left justification */ transition: var(--transition); border: 1px solid transparent; } .covid-stat:hover, .longcovid-stat:hover { border-color: rgba(196, 169, 98, 0.2); transform: translateY(-2px); } .covid-stat .stat-value, .longcovid-stat-value { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--gold); line-height: 1; text-shadow: 0 0 30px rgba(196, 169, 98, 0.2); display: block; } .covid-stat .stat-desc, .longcovid-stat-label { font-size: var(--text-sm); color: var(--earth); margin-top: var(--spacing-xs); } /* ═══════════════════════════════════════════════════════════════ BURNOUT ═══════════════════════════════════════════════════════════════ */ .burnout { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); position: relative; border-left: 4px solid var(--burgundy); } .burnout::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--burgundy), transparent 50%); } .burnout-intro, .burnout-critical, .burnout-trauma { max-width: 700px; margin: 0 auto var(--spacing-md); } .burnout-phases { max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } .phases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-md); } @media (max-width: 768px) { .phases-grid { grid-template-columns: 1fr; } } .phase { padding: var(--spacing-lg); background: var(--cream-warm); border-left: 3px solid var(--gold); text-align: left; } .phase-number { font-family: var(--font-important); font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--gold); display: block; margin-bottom: var(--spacing-xs); } .phase h4, .phase-title { font-family: var(--font-important); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .phase p, .phase-text { font-size: var(--text-sm); color: var(--earth); margin: 0; } .recovery-note { text-align: left; max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto 0; font-style: normal; color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ PRESSURE PRINCIPLE — DARK SECTION ═══════════════════════════════════════════════════════════════ */ .pressure { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(114, 47, 55, 0.15), transparent), radial-gradient(ellipse 50% 80% at 30% 80%, rgba(114, 47, 55, 0.08), transparent), var(--black); color: var(--cream); padding: var(--spacing-xl) var(--spacing-md); /* text-align removed for left justification */ position: relative; } .pressure::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--burgundy), transparent); } .pressure h2 { color: var(--ivory); } .pressure-headline, .pressure-statement { font-family: var(--font-body); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: var(--weight-light); color: var(--ivory); line-height: var(--leading-tight); margin-bottom: var(--spacing-xl); } .pressure-headline span, .pressure-statement span { color: var(--gold); text-shadow: 0 0 60px rgba(196, 169, 98, 0.5); } .pressure-content, .pressure-theory, .pressure-key, .pressure-explanation { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-md); font-size: var(--text-base); color: var(--stone); } .pressure-explanation p { margin-bottom: 1.5rem; text-align: left; max-width: none; } /* ═══════════════════════════════════════════════════════════════ SHIFT SECTION ═══════════════════════════════════════════════════════════════ */ .shift { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .shift-text { max-width: 650px; margin: 0 auto; font-size: var(--text-md); text-align: left; } /* ═══════════════════════════════════════════════════════════════ CONTEMPLATIVE FRAMEWORK ═══════════════════════════════════════════════════════════════ */ .contemplative { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .contemplative-intro, .contemplative-key, .contemplative-validation { max-width: 700px; margin: 0 auto var(--spacing-md); } .contemplative-validation { padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--gold); } .contemplative-concepts, .terms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } @media (max-width: 768px) { .contemplative-concepts, .terms-grid { grid-template-columns: 1fr; } } .concept, .term-card { background: var(--cream); padding: var(--spacing-xl); text-align: left; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; border: 1px solid transparent; border-left: 3px solid var(--gold); } .concept:hover, .term-card:hover { border-color: rgba(196, 169, 98, 0.3); transform: translateY(-6px); box-shadow: 0 12px 35px rgba(196, 169, 98, 0.12); } .concept h4, .term-title { font-family: var(--font-important); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--gold); margin-bottom: var(--spacing-sm); } .concept p, .term-text { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); text-align: left; margin: 0; } /* ═══════════════════════════════════════════════════════════════ WITNESS ELEMENT ═══════════════════════════════════════════════════════════════ */ .witness { background: radial-gradient(ellipse 100% 80% at 50% 0%, var(--ivory), transparent), radial-gradient(ellipse 50% 50% at 80% 80%, var(--gold-dim), transparent), var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .witness::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .witness-main, .witness-access, .witness-research, .witness-provision { max-width: 700px; margin: 0 auto var(--spacing-md); } .witness-qualities { max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } .qualities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-md); } @media (max-width: 768px) { .qualities-grid { grid-template-columns: 1fr; } } .quality, .quality-item { padding: var(--spacing-md); background: var(--cream); border-left: 3px solid var(--gold); } .quality h4, .quality-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .quality p, .quality-text { font-size: var(--text-sm); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════ REAL PATH / IMPLEMENTATION ═══════════════════════════════════════════════════════════════ */ .real-path { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); text-align: left; } .real-path .subtitle { font-size: var(--text-md); color: var(--gold-deep); font-style: normal; } .real-path-text { max-width: 700px; margin: 0 auto; } .implementation, .protocol { background: linear-gradient(135deg, rgba(196, 169, 98, 0.06), var(--ivory)); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .implementation::before, .protocol::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .setup-note { text-align: left; max-width: 700px; margin: 0 auto var(--spacing-lg); font-size: var(--text-base); color: var(--earth); } .phases-timeline, .phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 1024px) { .phases-timeline, .phase-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .phases-timeline, .phase-grid { grid-template-columns: 1fr; } } .timeline-phase, .phase-card { background: var(--cream-warm); padding: 0; position: relative; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; border: 1px solid rgba(196, 169, 98, 0.15); text-align: left; overflow: hidden; } .timeline-phase::before, .phase-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-pale)); transition: height 0.3s ease; } .timeline-phase:hover, .phase-card:hover { border-color: rgba(196, 169, 98, 0.5); transform: translateY(-8px); box-shadow: 0 20px 50px rgba(196, 169, 98, 0.18); } .timeline-phase:hover::before, .phase-card:hover::before { height: 6px; } .phase-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); display: block; padding: var(--spacing-md) var(--spacing-md) 0; } .timeline-phase h3, .phase-header { font-family: var(--font-important); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--gold); padding: var(--spacing-xs) var(--spacing-md); } .timeline-phase h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin: var(--spacing-sm) 0; padding: 0 var(--spacing-md); letter-spacing: var(--tracking-normal); } .timeline-phase p { font-size: var(--text-sm); color: var(--earth); text-align: left; line-height: var(--leading-relaxed); margin: 0; padding: 0 var(--spacing-md) var(--spacing-lg); } /* ═══════════════════════════════════════════════════════════════ DAILY PRACTICE SCHEDULE ═══════════════════════════════════════════════════════════════ */ .daily-practice, .practices { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); } .practice-schedule, .practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .practice-schedule, .practice-grid { grid-template-columns: 1fr; } } .schedule-item { background: var(--ivory); padding: var(--spacing-lg); position: relative; transition: var(--transition); } .schedule-item::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--gold); transition: var(--transition); } .schedule-item:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(196, 169, 98, 0.08); } .schedule-item:hover::before { width: 4px; } .schedule-item h3, .practice-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); text-align: left; } .frequency, .practice-frequency { font-size: var(--text-xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-ultra); margin-bottom: var(--spacing-sm); font-weight: var(--weight-medium); text-align: left; display: block; } .schedule-item p { font-size: var(--text-sm); color: var(--earth); margin: 0; text-align: left; line-height: var(--leading-relaxed); } .practice-reminder { text-align: left; max-width: 500px; margin: var(--spacing-lg) auto 0; font-style: normal; color: var(--earth); } /* ═══════════════════════════════════════════════════════════════ SCIENTIFIC INTEGRATION ═══════════════════════════════════════════════════════════════ */ .scientific, .science { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .foundations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .foundations-grid { grid-template-columns: 1fr; } } .foundation { background: var(--ivory); padding: var(--spacing-lg); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; border: 1px solid transparent; position: relative; overflow: hidden; } .foundation::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--gold); transition: width 0.4s ease, left 0.4s ease; } .foundation:hover { transform: translateY(-6px); box-shadow: 0 20px 45px var(--gold-dim); border-color: rgba(196, 169, 98, 0.18); } .foundation:hover::after { width: 100%; left: 0; } .foundation h4, .foundation-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); text-align: left; } .foundation p, .foundation-text { font-size: var(--text-sm); color: var(--earth); margin: 0; text-align: left; line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════ HUMILITY / LIMITATIONS ═══════════════════════════════════════════════════════════════ */ .humility, .limitations { background: linear-gradient(135deg, rgba(114, 47, 55, 0.04), var(--ivory)); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .humility::before, .limitations::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--burgundy); } .limitations-intro { max-width: 700px; margin: 0 auto var(--spacing-lg); } .limitations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .limitations-grid { grid-template-columns: 1fr; } } .limitation, .limitation-card { background: var(--cream); padding: var(--spacing-lg); border-left: 3px solid var(--burgundy); } .limitation h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); } .limitation p { font-size: var(--text-sm); color: var(--earth); margin-bottom: var(--spacing-sm); } .limitation-status { font-size: var(--text-xs); color: var(--burgundy); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ═══════════════════════════════════════════════════════════════ CORE RECOVERY PRINCIPLES ═══════════════════════════════════════════════════════════════ */ .principles { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .principles-grid, .cta-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .principles-grid, .cta-principles { grid-template-columns: 1fr; } } .principle { text-align: left; padding: var(--spacing-md); background: rgba(255, 255, 255, 0.5); transition: var(--transition); border-left: 3px solid var(--gold); } .principle:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-2px); } .principle h4, .principle-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--gold); margin-bottom: var(--spacing-xs); } .principle p, .principle-text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); text-align: left; margin: 0; } /* ═══════════════════════════════════════════════════════════════ DISCLAIMER ═══════════════════════════════════════════════════════════════ */ /* Disclaimer — Part of dark charcoal bottom zone */ .disclaimer { background: var(--black); padding: var(--spacing-lg) var(--spacing-md); text-align: left; border-left: 3px solid var(--gold); } .disclaimer .container { max-width: 800px; } .disclaimer-text { font-size: var(--text-sm); color: rgba(245, 241, 234, 0.9); margin: 0; line-height: var(--leading-relaxed); } .disclaimer-text::before { content: "§ "; color: var(--gold); font-weight: var(--weight-semibold); } /* ═══════════════════════════════════════════════════════════════ CTA SECTION ═══════════════════════════════════════════════════════════════ */ .cta { background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--gold-dim), transparent), radial-gradient(ellipse 60% 40% at 20% 20%, rgba(196, 169, 98, 0.05), transparent), var(--ivory); padding: var(--spacing-xl) var(--spacing-md); /* text-align removed for left justification */ } .cta-content { max-width: var(--max-width-narrow); margin: 0 auto; } .cta-text { font-size: var(--text-md); margin-bottom: var(--spacing-lg); /* text-align removed for left justification */ max-width: none; } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .footer { background: linear-gradient(to bottom, var(--black), #0d0c0a); color: var(--stone); padding: var(--spacing-xl) var(--page-padding); /* text-align removed for left justification */ position: relative; } .footer__nav { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto var(--spacing-lg); flex-wrap: wrap; gap: var(--spacing-md); } @media (max-width: 768px) { .footer__nav { flex-direction: column; text-align: center; } } .footer__logo { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-normal); color: var(--cream); letter-spacing: var(--tracking-wider); text-decoration: none; border: none; } .footer__links { display: flex; gap: var(--spacing-md); flex-wrap: wrap; justify-content: center; } .footer__links a { font-size: var(--text-sm); color: var(--stone); text-decoration: none; border: none; transition: var(--transition); /* Mobile touch target */ padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: rgba(196, 169, 98, 0.3); } .footer__links a:hover { color: var(--gold); } .footer__teachers { margin: var(--spacing-lg) auto; padding: var(--spacing-md) 0; border-top: 1px solid rgba(196, 169, 98, 0.15); border-bottom: 1px solid rgba(196, 169, 98, 0.15); max-width: var(--max-width); } .footer__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); display: block; margin-bottom: var(--spacing-sm); } .footer__teacher-links { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } .footer__teacher-links a { font-family: var(--font-display); font-size: var(--text-base); color: var(--stone); text-decoration: none; border: none; transition: var(--transition); /* Mobile touch target */ padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: rgba(196, 169, 98, 0.3); } .footer__teacher-links a:hover { color: var(--gold); text-shadow: 0 0 10px rgba(196, 169, 98, 0.3); } .footer__social { margin: var(--spacing-md) 0; } .footer__social-link { display: inline-block; font-family: var(--font-important); font-size: var(--text-sm); color: var(--gold); text-decoration: none; padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid rgba(196, 169, 98, 0.3); transition: all 0.3s ease; } .footer__social-link:hover { background: var(--gold); color: var(--charcoal); } .footer__credit { font-size: var(--text-xs); color: var(--clay); margin: var(--spacing-md) 0 0; } .footer-text { font-size: var(--text-sm); max-width: var(--max-width-narrow); margin: 0; line-height: var(--leading-loose); } .footer a { color: var(--gold-pale); border-color: transparent; transition: var(--transition); } .footer a:hover { color: var(--gold); text-shadow: 0 0 10px rgba(196, 169, 98, 0.3); } /* ═══════════════════════════════════════════════════════════════ PAGE HERO (for subpages) ═══════════════════════════════════════════════════════════════ */ .page-hero { padding: calc(var(--spacing-xxl) + 70px) var(--page-padding) var(--spacing-xl); background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%); } .page-hero .container { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; padding-top: var(--spacing-lg); /* Content sits down from banner top — breathing room */ } /* Colored banners get extra breathing room for visual impact */ .page-hero[class*="banner--"] { padding-top: calc(var(--spacing-xxl) + 120px); /* More space from nav */ padding-bottom: var(--spacing-xxl); /* Generous bottom breathing */ } .page-hero__label { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); } .page-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--weight-normal); color: var(--black); margin-bottom: 1.25rem; line-height: var(--leading-snug); } .page-hero__subtitle { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); max-width: none; margin: 0; line-height: var(--leading-loose); } /* Page Hero on Blue Banner — Evidence, Research, Trust */ .page-hero.banner--blue { background: var(--banner-blue); } .page-hero.banner--blue .page-hero__label { color: var(--gold-pale); } .page-hero.banner--blue .page-hero__title { color: var(--cream); } .page-hero.banner--blue .page-hero__subtitle { color: rgba(245, 241, 234, 0.9); } /* Page Hero on Burgundy Banner — Crisis, Warning */ .page-hero.banner--burgundy { background: var(--banner-burgundy); } .page-hero.banner--burgundy .page-hero__label { color: var(--gold-pale); } .page-hero.banner--burgundy .page-hero__title { color: var(--cream); } .page-hero.banner--burgundy .page-hero__subtitle { color: rgba(245, 241, 234, 0.9); } /* Page Hero on Teal Banner — Authority, Distinction */ .page-hero.banner--teal { background: var(--banner-teal); } .page-hero.banner--teal .page-hero__label { color: var(--gold-pale); } .page-hero.banner--teal .page-hero__title { color: var(--cream); } .page-hero.banner--teal .page-hero__subtitle { color: rgba(245, 241, 234, 0.9); } /* Page Hero on Purple Banner — Mystical depth, thresholds */ .page-hero.banner--purple { background: var(--banner-purple); } .page-hero.banner--purple .page-hero__label { color: var(--gold-pale); } .page-hero.banner--purple .page-hero__title { color: var(--cream); } .page-hero.banner--purple .page-hero__subtitle { color: rgba(245, 241, 234, 0.9); } /* ═══════════════════════════════════════════════════════════════ ABOUT PAGE SPECIFIC ═══════════════════════════════════════════════════════════════ */ .about-unification, .about-evidence, .about-interventions, .about-limitations, .about-need, .about-origins, .about-positioning { padding: var(--spacing-xl) var(--spacing-md); } .about-unification { background: var(--ivory); } .about-evidence { background: var(--cream-warm); } .about-interventions { background: var(--ivory); } .about-limitations { background: var(--cream-warm); } .about-need { background: var(--ivory); } /* Founder Portrait — Full-width banner image */ .founder-portrait { width: 100%; margin: 0; padding: 0; } .founder-portrait__image-wrapper { width: 100%; overflow: hidden; height: 160vh; position: relative; } .founder-portrait__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center bottom; /* Anchor to absolute bottom of image */ } /* Founder Info — Styled like tf-card, dark charcoal with gold */ .founder-info { background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); padding: 0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); border: 1px solid var(--gold); overflow: hidden; } .founder-info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); } /* Desktop: Show overlay version, hide below version */ .founder-info--overlay { display: block; position: absolute; top: 50%; transform: translateY(-50%); left: var(--spacing-lg); max-width: 320px; } .founder-info--below { display: none; } .founder-info__content { padding: 1.75rem 1.5rem 1.5rem; text-align: left; } .founder-info__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); margin: 0 0 0.25rem; letter-spacing: var(--tracking-wide); } .founder-info__role { font-family: var(--font-important); font-size: var(--text-xs); color: var(--ivory); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(196, 169, 98, 0.3); } .founder-info__bio { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(245, 241, 234, 0.85); line-height: var(--leading-relaxed); margin: 0; } .founder-info__bio em { font-style: italic; color: var(--gold-pale); } @media (max-width: 768px) { .founder-portrait__image-wrapper { height: 70vh; } /* Mobile: Hide overlay version, show below version */ .founder-info--overlay { display: none; } .founder-info--below { display: block; position: relative; max-width: 100%; margin: 0; border-top: none; } .founder-info--below::before { display: none; } .founder-info--below .founder-info__content { padding: 3rem var(--spacing-md); } } .about-origins { background: var(--cream-warm); } .about-positioning { background: var(--ivory); } .unification-content, .unification-context, .unification-novel { max-width: 800px; margin: 0 auto var(--spacing-lg); } .unification-context, .unification-novel { padding: var(--spacing-md); background: var(--cream); border-left: 3px solid var(--gold); } .unification-novel ul { list-style: none; padding-left: 0; } .unification-novel ul li { position: relative; padding-left: 1.5rem; margin-bottom: var(--spacing-sm); } .unification-novel ul li::before { content: '→'; position: absolute; left: 0; color: var(--gold); } .citations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } .citation-card { background: var(--ivory); padding: var(--spacing-md); border-top: 3px solid var(--gold); position: relative; } .citation-status { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: 0.25rem 0.5rem; background: rgba(196, 169, 98, 0.15); color: var(--gold-deep); } .citation-card h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); } .citation-card p { font-size: var(--text-sm); color: var(--earth); margin-bottom: var(--spacing-xs); } .citation-card cite { font-size: var(--text-xs); color: var(--clay-readable); font-style: normal; } .intervention-table { max-width: var(--max-width); margin: 0 auto; border: 1px solid var(--cream-deep); } .intervention-row { display: grid; grid-template-columns: 1fr 120px 2fr; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--cream-deep); align-items: center; } @media (max-width: 768px) { .intervention-row { grid-template-columns: 1fr; gap: var(--spacing-xs); } } .intervention-header { font-weight: var(--weight-semibold); background: var(--cream); } .intervention-row:last-child { border-bottom: none; } .evidence-strong { color: var(--gold-deep); font-weight: var(--weight-semibold); } .evidence-moderate { color: var(--earth); font-weight: var(--weight-medium); } .evidence-weak { color: var(--clay-readable); font-weight: var(--weight-medium); } .need-stats { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 600px; margin: 0 auto var(--spacing-lg); } .need-stat { text-align: left; padding: var(--spacing-lg); background: var(--cream); border-left: 3px solid var(--burgundy); } .need-stat .stat-value { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--burgundy); margin-bottom: var(--spacing-xs); } .need-stat .stat-label { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); } .need-gap, .need-calls { max-width: 700px; margin: 0 auto var(--spacing-lg); } .need-gap { padding: var(--spacing-md); background: var(--cream); border-left: 3px solid var(--burgundy); } .need-calls ul { list-style: none; padding-left: 0; } .need-calls ul li { position: relative; padding-left: 1.5rem; margin-bottom: var(--spacing-sm); } .need-calls ul li::before { content: '→'; position: absolute; left: 0; color: var(--burgundy); } .positioning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .positioning-grid { grid-template-columns: 1fr; } } .positioning-card { padding: var(--spacing-lg); } .positioning-is { background: rgba(196, 169, 98, 0.08); border-left: 4px solid var(--gold); } .positioning-not { background: rgba(114, 47, 55, 0.04); border-left: 4px solid var(--burgundy); } .positioning-card h3 { font-family: var(--font-important); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-md); } .positioning-card ul { list-style: none; padding-left: 0; } .positioning-card ul li { position: relative; padding-left: 1.5rem; margin-bottom: var(--spacing-sm); font-size: var(--text-base); color: var(--earth); } .positioning-is ul li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: var(--weight-semibold); } .positioning-not ul li::before { content: '✗'; position: absolute; left: 0; color: var(--burgundy); font-weight: var(--weight-semibold); } /* Positioning Card — Eighth Element Variant */ .positioning-card--eighth { grid-column: 1 / -1; background: linear-gradient(135deg, var(--eighth-dim), var(--ivory)); border-top: 3px solid var(--eighth-primary); border-left: none; } .positioning-card--eighth ul li::before { content: '◈'; position: absolute; left: 0; color: var(--eighth-primary); font-weight: var(--weight-semibold); } .positioning-card__link { display: inline-block; color: var(--eighth-deep); font-weight: var(--weight-medium); } .positioning-card__link:hover { color: var(--eighth-primary); } .teachers-cta { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); } /* ═══════════════════════════════════════════════════════════════ MOBILE OPTIMIZATIONS — Comprehensive ═══════════════════════════════════════════════════════════════ */ /* Tablet: 768px and below — maintain generous breathing room */ @media (max-width: 768px) { :root { --spacing-xl: 7rem; /* Increased from 4rem — still generous on tablet */ --spacing-xxl: 9rem; /* Increased from 5rem — hero still breathes */ --grid-gap: 2rem; /* Slightly tighter grids on tablet */ } /* Typography scales fluidly via clamp() — no html font-size override needed. The fluid scale handles all sizing automatically. */ body { line-height: var(--leading-relaxed); } /* Section Spacing */ section { padding: var(--spacing-lg) 0; } /* ═══════════════════════════════════════════════════════════════ COMPREHENSIVE LEFT-ALIGNMENT FOR MOBILE LEGIBILITY All text left-aligned for optimal reading flow and learning ═══════════════════════════════════════════════════════════════ */ /* Global text alignment reset for mobile */ h1, h2, h3, h4, h5, h6, p, blockquote, cite, li, .section-numeral, .section-label, .section-title, .section-intro, [class*="__text"], [class*="__desc"], [class*="__content"], [class*="__intro"], [class*="-text"], [class*="-content"], [class*="-intro"], [class*="-desc"] { text-align: left; } /* Hero elements */ .hero-thesis, .hero-invitation, .hero-strapline, .hero__thesis, .thesis-claim, .thesis-body, .subtitle { text-align: left; } /* Page heroes */ .page-hero, .page-hero__title, .page-hero__subtitle, .page-hero__intro { text-align: left; } /* Proclamation and banners */ .proclamation-banner, .proclamation-banner__text, .proclamation-text, .top-banner, .top-banner__text { text-align: left; } /* Insight sections */ .insight-core, .insight-statement, .insight-research, .unifying-insight p, .innovation-core, .innovation-statement { text-align: left; } /* Reality and evidence */ .reality-summary, .evidence-conclusion, .evidence-text, .evidence-desc { text-align: left; } /* Stat items - keep numbers centered, text left */ .stat-item { text-align: left; } .stat-number, .stat-value { text-align: left; } .stat-label, .stat-desc { text-align: left; } /* Origins, matters, thesis */ .origins-content, .matters-content, .thesis-key, .thesis-definition p, .thesis-quote blockquote { text-align: left; } /* Teachers sections */ .teachers-intro-text, .teachers-principle, .teachers-advantage, .teacher-card, .teacher-content, .teachers-why, .why-card, .why-card h3, .why-card p, .teacher-full-card, .teacher-full-card__content, .teacher-full-card__content h3, .teacher-full-card__content p { text-align: left; } /* Scepticism and respect */ .scepticism-text, .respect-text { text-align: left; } /* Domains and principles */ .principle-title, .principle-desc, .domain-card, .domain-header, .domain-content { text-align: left; } /* Method and floor */ .method-title, .method-desc, .floor-subtitle { text-align: left; } /* Mechanism and memory */ .mechanism-card, .memory-block, .memory-comparison { text-align: left; } /* Phases and practices */ .phase-card, .phase-content, .practice-card, .practice-content { text-align: left; } /* Cold, neural, contemplative */ .cold-stat, .neural-card, .contemplative-concept, .contemplative-text { text-align: left; } /* Quotes and blockquotes */ blockquote, blockquote p, .quote-text, .quote-attribution, .urgency-quote, .urgency-quote p { text-align: left; } /* Key insights - left align for readability */ .key-insight, .key-insight p { text-align: left; } /* Definition cards remain centered - they are standalone object cards */ /* Ramification and solution */ .ramification-box, .ramification-box p, .solution-content, .ace-content p { text-align: left; } /* Thesis page specific */ .thesis-content, .thesis-content p, .thesis-section p, .thesis-conclusion { text-align: left; } /* Deep Self banner */ .deepself-banner, .deepself-banner__content, .deepself-banner__text, .deepself-banner__headline { text-align: left; } /* Requirements section */ .requirements-coda, .requirement-card, .requirement-card__title, .requirement-card__lost { text-align: left; } /* Urgency stats */ .urgency-stat, .urgency-stat__number, .urgency-stat__label, .urgency-conclusion { text-align: left; } /* Elimination timeline */ .elimination-era, .elimination-era h3, .elimination-era p, .elimination-date { text-align: left; } /* Channel cards */ .channel-card, .channel-card h3, .channel-card p { text-align: left; } /* CTA and footer */ .cta-section, .cta-text, .footer, .footer__text { text-align: left; } /* Pressure sections */ .pressure-headline, .pressure-statement, .pressure-explanation, .pressure-explanation p { text-align: left; } /* All card types with content */ .proof-card, .proof-card__text, .evidence-card, .domain-card p, .floor-aspect, .property, .limitation-card, .foundation-card { text-align: left; } /* Study and research elements */ .vagal-study, .covid-stat, .longcovid-stat, .term-card, .quality-card { text-align: left; } /* Positioning and need stats */ .positioning-card, .need-stat { text-align: left; } /* Memory and brain sections */ .memory-intro, .memory-intro p, .memory-system, .memory-system h3, .brain-intro, .brain-intro p, .brain-study, .brain-study h3 { text-align: left; } /* Research elements */ .research-card, .research-item, .research-citation, .research-finding { text-align: left; } /* Channel cards */ .channel-mechanism { text-align: left; } /* Reframe elements */ .reframe-item, .reframe-old, .reframe-new { text-align: left; } /* Intelligence inversion */ .inversion-intro, .inversion-intro p, .inversion-synthesis, .inversion-synthesis p, .inversion-item, .inversion-item h4, .inversion-item p { text-align: left; } /* Epigenetic mechanism */ .epigenetic-mechanism, .epigenetic-mechanism h3, .mechanism-item, .mechanism-item h4, .mechanism-item p { text-align: left; } /* Triple proof */ .triple-proof, .triple-proof__intro { text-align: left; } /* CTA sections */ .teachers-cta, .conditions-cta, .cta-section, .cta-button { text-align: left; } /* Teacher hero elements */ .teacher-hero, .teacher-hero__content, .teacher-hero__circulation, .teacher-hero__circulation-item, .teacher-hero__divider { text-align: left; justify-content: flex-start; } /* Condition preview */ .condition-preview, .condition-preview h3, .condition-preview p { text-align: left; } /* Inversion and circulation cards */ .inversion-card, .circulation-card, .inversion-card h3, .circulation-card h3, .inversion-card p, .circulation-card p { text-align: left; } /* Quote blocks */ .quote-block, .quote-block p { text-align: left; } /* More flex container alignments */ .teacher-hero__circulation, .hero-strapline, .deepself-banner__features { justify-content: flex-start; flex-wrap: wrap; } /* Hero adjustments */ .hero { min-height: auto; padding: var(--spacing-lg) var(--spacing-md); padding-top: calc(var(--spacing-lg) + 70px); text-align: left; } .hero-content { text-align: left; } .hero__marker, .hero-marker { letter-spacing: var(--tracking-ultra); text-align: left; } h1, h2 { /* Sizes handled by fluid scale — just ensure left alignment */ text-align: left; } .subtitle { text-align: left; } .hero-thesis { line-height: var(--leading-relaxed); text-align: left; } .hero-invitation { text-align: left; } /* Welcome hero elements */ .hero-recognition { padding: var(--spacing-sm) var(--spacing-md); } .hero-pathways { gap: 0.4rem; } .hero-pathway { padding: 0.3rem 0.5rem; } .hero__conditions, .hero-conditions { justify-content: flex-start; gap: var(--spacing-xs); margin-top: var(--spacing-md); flex-wrap: wrap; } .condition-tag, .hero-condition { padding: 0.5rem 0.75rem; } .hero-strapline { justify-content: flex-start; text-align: left; } .pressure-headline, .pressure-statement { text-align: left; } /* Cards - Full width, left-aligned content */ .proof-card, .evidence-card, .requirement-card, .channel-card, .elimination-era, .teacher-card, .definition-card, .key-insight { text-align: left; width: 100%; } /* Grids - Single column on mobile */ .triple-proof__grid, .triple-proof__grid--four, .evidence-grid, .requirements-grid, .channel-grid, .urgency-grid, .elimination-timeline { grid-template-columns: 1fr; gap: var(--spacing-md); } /* Key Insight cards */ .key-insight { padding: var(--spacing-md); margin-left: 0; margin-right: 0; } /* Definition cards */ .definition-card { padding: var(--spacing-md); } /* Urgency stats - stack vertically */ .urgency-grid { max-width: 100%; } .urgency-stat { padding: var(--spacing-md); } .urgency-stat__number { font-size: var(--text-3xl); } .urgency-quotes { grid-template-columns: 1fr; } .urgency-conclusion { text-align: left; } /* Requirements section */ .requirements-grid { max-width: 100%; } .requirements-coda { text-align: left; font-size: var(--text-md); } /* Deep Self banner */ .deepself-banner__content { text-align: left; } .deepself-banner__features { justify-content: flex-start; flex-wrap: wrap; } /* Page heroes */ .page-hero { text-align: left; } .page-hero__title { text-align: left; } .page-hero__subtitle { text-align: left; } } /* Mobile: 600px and below — still generous, not cramped */ @media (max-width: 600px) { :root { --spacing-lg: 3rem; /* Increased from 2.5rem */ --spacing-xl: 5rem; /* Increased from 3.5rem — sections still breathe */ --spacing-xxl: 6rem; /* Increased from 4.5rem — heroes still breathe */ --grid-gap: 1.5rem; /* Comfortable gap on mobile */ } html { font-size: 16px; } .container { margin: 0 auto; padding: 0 var(--spacing-md); } .nav { padding: var(--spacing-xs) var(--spacing-md); } .nav__logo, .nav-logo { font-size: var(--text-base); letter-spacing: var(--tracking-wider); } .hero { padding: var(--spacing-md) var(--spacing-md); padding-top: calc(var(--spacing-md) + 65px); } h1 { font-size: clamp(1.5rem, 7vw, 2rem); } .hero-thesis { font-size: var(--text-base); } .hero__conditions, .hero-conditions { flex-direction: column; align-items: stretch; gap: var(--spacing-xs); } .condition-tag, .hero-condition { width: 100%; /* text-align removed for left justification */ } /* Proof cards full width */ .proof-card { padding: var(--spacing-md); } .proof-card__number { font-size: var(--text-2xl); position: static; margin-bottom: var(--spacing-xs); } .proof-card__text { font-size: var(--text-sm); } /* Evidence cards */ .evidence-card { padding: var(--spacing-md); } .evidence-stat { font-size: var(--text-2xl); } } /* Small Mobile: 480px and below */ @media (max-width: 480px) { :root { --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-xxl: 4rem; } /* Typography scales fluidly via clamp() — no overrides needed. At 480px viewport, sizes automatically reach their minimum values. */ body { line-height: var(--leading-relaxed); } .container { margin: 0 auto; padding: 0 var(--spacing-sm); } .hero { padding: var(--spacing-sm) var(--spacing-sm); padding-top: calc(var(--spacing-sm) + 60px); } .footer { padding: var(--spacing-md) var(--spacing-sm); } .condition-tag, .hero-condition { padding: 0.5rem 0.75rem; } /* Cards - more compact */ .proof-card, .evidence-card, .requirement-card, .key-insight { padding: 1.25rem; } /* Requirement cards */ .requirement-card__title { font-size: var(--text-md); } .requirement-card__lost { font-size: var(--text-2xs); } /* Urgency stats */ .urgency-stat__number { font-size: var(--text-2xl); } .urgency-stat__label { font-size: var(--text-2xs); } /* Elimination timeline */ .elimination-era { padding: 1.25rem; } .elimination-date { font-size: var(--text-2xs); } .elimination-era h3 { font-size: var(--text-md); } .elimination-era p { font-size: var(--text-sm); } /* Channel cards */ .channel-card { padding: 1.25rem; } /* Deep Self banner */ .deepself-banner__headline { font-size: clamp(1.1rem, 5vw, 1.5rem); letter-spacing: var(--tracking-wider); } .deepself-banner__text { font-size: var(--text-sm); } .deepself-banner__feature-text { font-size: var(--text-2xs); } .deepself-banner__cta { padding: 0.75rem 1.25rem; font-size: var(--text-2xs); width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════ TOP BANNER ═══════════════════════════════════════════════════════════════ */ .top-banner { background: linear-gradient(135deg, rgba(196, 169, 98, 0.15) 0%, rgba(114, 47, 55, 0.08) 100%); border-bottom: 1px solid rgba(196, 169, 98, 0.3); padding: 14px var(--page-padding); /* text-align removed for left justification */ margin-top: 70px; } .top-banner__text { margin: 0 auto; font-size: var(--text-sm); color: var(--deep-earth); font-family: var(--font-display); max-width: var(--max-width); } .top-banner__label { color: var(--burgundy); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); font-size: var(--text-2xs); font-family: var(--font-body); } .top-banner__message { margin-left: 6px; } .top-banner__link { color: var(--gold-deep); font-weight: var(--weight-semibold); margin-left: 12px; text-decoration: none; border-bottom: 1px solid var(--gold); transition: var(--transition); } .top-banner__link:hover { color: var(--gold); } /* ═══════════════════════════════════════════════════════════════ PROCLAMATION BANNER ═══════════════════════════════════════════════════════════════ */ .proclamation-banner { background: linear-gradient(180deg, #5a2a30 0%, var(--burgundy) 50%, #5a2a30 100%); padding: var(--spacing-xl) var(--spacing-lg); /* text-align removed for left justification */ position: relative; overflow: hidden; } .proclamation-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.06; pointer-events: none; } .proclamation-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .proclamation-banner__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .proclamation-banner__headline { font-family: var(--font-important); font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: var(--weight-semibold); color: var(--gold); line-height: var(--leading-normal); margin-bottom: var(--spacing-md); letter-spacing: var(--tracking-widest); text-transform: uppercase; animation: proc-headline 1s ease-out 0.2s both; } @keyframes proc-headline { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .proclamation-banner__body { font-family: var(--font-body); font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: var(--weight-normal); color: rgba(255, 253, 245, 0.9); line-height: var(--leading-relaxed); max-width: 680px; margin: 0 auto var(--spacing-lg); animation: proc-body 1s ease-out 0.4s both; } @keyframes proc-body { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .proclamation-banner__body strong { font-weight: var(--weight-semibold); color: var(--cream); } .proclamation-banner__kicker { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); padding: 0.6rem 1.4rem; border: 1px solid rgba(196, 169, 98, 0.4); background: rgba(196, 169, 98, 0.08); display: inline-block; animation: proc-kicker 1s ease-out 0.6s both; } @keyframes proc-kicker { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ HERO STAKES ═══════════════════════════════════════════════════════════════ */ .hero-stakes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xl); max-width: 720px; margin-left: auto; margin-right: auto; padding: var(--spacing-lg) var(--spacing-lg); background: var(--cream); border-left: 4px solid var(--burgundy); position: relative; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .hero-stakes__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-bottom: 0.75rem; font-family: var(--font-important); } .hero-stakes__stat-row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); width: 100%; animation: stakes-stat-reveal 1s ease-out 0.3s both; } @keyframes stakes-stat-reveal { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .hero-stakes__stat { display: flex; flex-direction: column; align-items: center; } .hero-stakes__number { font-family: var(--font-important); font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: var(--weight-light); color: var(--burgundy); line-height: 1; letter-spacing: var(--tracking-tighter); } .hero-stakes__number--zero { color: var(--black); } .hero-stakes__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--earth); margin-top: 0.3rem; } .hero-stakes__divider { width: 1px; height: 50px; background: linear-gradient(to bottom, transparent, var(--burgundy), transparent); opacity: 0.3; } .hero-stakes__thesis { font-family: var(--font-body); font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: var(--weight-normal); color: var(--black); font-style: normal; text-align: left; margin: 0; padding: 0; animation: stakes-thesis-reveal 1s ease-out 0.8s both; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-tight); } @keyframes stakes-thesis-reveal { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .hero-stakes__thesis em { font-style: normal; font-weight: var(--weight-semibold); color: var(--burgundy); } @media (max-width: 600px) { .hero-stakes { padding: var(--spacing-sm); } .hero-stakes__stat-row { flex-direction: column; gap: var(--spacing-sm); } .hero-stakes__divider { width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--burgundy), transparent); } .hero-stakes__number { font-size: clamp(2rem, 10vw, 2.8rem); } } /* ═══════════════════════════════════════════════════════════════ HERO STRAPLINE ═══════════════════════════════════════════════════════════════ */ .hero-strapline { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-top: 0; margin-bottom: 0; display: flex; justify-content: flex-start; gap: var(--spacing-md); flex-wrap: wrap; } .hero-strapline span { padding: 0.5rem 1rem; border: 1px solid var(--burgundy); background: rgba(114, 47, 55, 0.08); } /* ═══════════════════════════════════════════════════════════════ HERO INVITATION ═══════════════════════════════════════════════════════════════ */ .hero-invitation { font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--gold-deep); max-width: 620px; margin: var(--spacing-lg) auto var(--spacing-md); /* text-align removed for left justification */ font-style: normal; padding: var(--spacing-md); background: linear-gradient(135deg, rgba(196, 169, 98, 0.08), rgba(196, 169, 98, 0.03)); border-radius: var(--radius-md); border: 1px solid rgba(196, 169, 98, 0.15); } .hero-offer { font-family: var(--font-important); font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: var(--weight-semibold); font-style: normal; text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--gold); margin: var(--spacing-md) 0; text-align: left; } /* Hero Welcome — Warm opening */ .hero-welcome { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--teal); margin-bottom: var(--spacing-md); } /* Hero Tagline — Below title */ .hero-tagline { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--earth); margin-bottom: var(--spacing-lg); letter-spacing: var(--tracking-tight); } /* Hero Recognition — Speaking to their journey */ .hero-recognition { max-width: 640px; margin-bottom: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); background: rgba(196, 169, 98, 0.06); border-left: 3px solid var(--gold); } .hero-recognition p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0 0 var(--spacing-sm) 0; } .hero-recognition p:last-child { margin-bottom: 0; } /* Hero Kicker — Brand mark */ .hero-kicker { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--gold); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin: 0 0 var(--spacing-md) 0; } /* Hero Headline — The hook */ .hero-headline { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--weight-normal); color: var(--black); line-height: 1.2; letter-spacing: var(--tracking-tight); margin: 0 0 var(--spacing-xl) 0; max-width: 700px; } /* Hero Body — The explanation */ .hero-body { max-width: 580px; margin-bottom: var(--spacing-xl); padding-left: var(--spacing-md); border-left: 2px solid var(--gold); } .hero-body p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } /* Hero Insight — The conclusion */ .hero-insight { max-width: 580px; padding: var(--spacing-lg); background: var(--ivory); border-top: 3px solid var(--gold); } /* Hero Thesis — The reframe */ .hero-thesis { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--earth); line-height: var(--leading-loose); margin: 0 0 var(--spacing-sm) 0; } /* Hero Pivot — The promise */ .hero-pivot { font-family: var(--font-important); font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: var(--weight-semibold); color: var(--charcoal); line-height: var(--leading-snug); margin: 0; } /* Mobile adjustments */ @media (max-width: 600px) { .hero-headline { font-size: clamp(1.75rem, 7vw, 2.5rem); } .hero-body { padding-left: var(--spacing-sm); } .hero-insight { padding: var(--spacing-md); } } /* ═══════════════════════════════════════════════════════════════ WELCOME SECTION — Condition recognition ═══════════════════════════════════════════════════════════════ */ .site-welcome { background: var(--cream-warm); padding: var(--spacing-xl) 0; } .welcome-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--charcoal); margin-bottom: var(--spacing-lg); letter-spacing: var(--tracking-wide); } .welcome-conditions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .welcome-condition { background: var(--ivory); padding: var(--spacing-md); border-left: 3px solid var(--gold); transition: all 0.3s ease; } .welcome-condition:hover { background: var(--cream); transform: translateY(-2px); } .condition-name { display: block; font-family: var(--font-important); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--charcoal); margin-bottom: var(--spacing-xs); letter-spacing: var(--tracking-tight); } .condition-desc { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); } .welcome-affirmation { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--charcoal); max-width: var(--max-width-narrow); } @media (max-width: 900px) { .welcome-conditions { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .site-welcome { padding: var(--spacing-xxl) 0; } .site-welcome .container { padding: 0 var(--spacing-md); max-width: 100%; } .welcome-title { padding: 0 var(--spacing-xs); } .welcome-affirmation { padding: 0 var(--spacing-xs); } } @media (max-width: 500px) { .site-welcome .container { padding: 0 var(--spacing-sm); } .welcome-conditions { grid-template-columns: 1fr; } .welcome-condition { max-width: 320px; margin: 0 auto; } } /* ═══════════════════════════════════════════════════════════════ MOBILE CENTERING — Cards and flow diagrams centered, text left ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Center card grids on mobile */ .welcome-conditions, .failed-environments, .wound-poles, .citadel-progression, .allies-grid, .teachers-grid, .tf-grid--7, .tf-grid--4, .tf-grid--3, .tf-grid--2 { justify-items: center; } /* Center individual cards */ .welcome-condition, .failed-env, .wound-pole, .citadel-stage, .tf-card { max-width: 360px; width: 100%; } /* Keep text left-aligned within centered cards */ .welcome-condition, .failed-env, .wound-pole, .citadel-stage, .tf-card { text-align: left; } /* Stack flow diagrams vertically with operators between */ .accumulation-formula { flex-direction: column; align-items: center; gap: 0; max-width: 280px; margin: 0 auto var(--spacing-md); } .formula-term, .formula-result { width: 100%; text-align: center; padding: var(--spacing-sm); } .formula-operator { padding: var(--spacing-xs) 0; font-size: var(--text-xl); } /* Stack scale flow vertically */ .scale-flow { flex-direction: column; max-width: 280px; margin: 0 auto var(--spacing-lg); } .scale-level { text-align: center; border-right: none; border-bottom: 1px solid rgba(196, 169, 98, 0.15); } .scale-level:last-of-type { border-bottom: none; } /* Stack wound poles vertically centered */ .wound-poles { flex-direction: column; align-items: center; max-width: 320px; margin: 0 auto; } .wound-pole { max-width: 100%; } .wound-between { transform: rotate(90deg); padding: var(--spacing-sm) 0; } /* Stack citadel progression vertically centered */ .citadel-progression { flex-direction: column; align-items: center; max-width: 320px; margin: 0 auto var(--spacing-md); } .citadel-stage { width: 100%; max-width: 100%; text-align: center; border-right: none; border-bottom: 1px solid rgba(196, 169, 98, 0.2); } .citadel-stage:last-of-type { border-bottom: none; } .citadel-arrow { display: block; transform: rotate(90deg); padding: var(--spacing-xs) 0; } } /* ═══════════════════════════════════════════════════════════════ METHOD SECTION — Bridge to teachers ═══════════════════════════════════════════════════════════════ */ .site-method { background: var(--charcoal); padding: var(--spacing-xl) 0; } .site-method .section-label { color: var(--gold); } .site-method .section-title { color: var(--cream); } .method-intro { font-family: var(--font-body); font-size: var(--text-base); color: var(--stone); line-height: var(--leading-relaxed); max-width: var(--max-width-narrow); margin-bottom: var(--spacing-md); } .site-method .section-link { color: var(--gold); border-color: var(--gold); } .site-method .section-link:hover { color: var(--cream); } /* ═══════════════════════════════════════════════════════════════ HOMEPAGE ARCHITECTURE SECTIONS ═══════════════════════════════════════════════════════════════ */ /* Consistent spacing for all homepage sections */ .site-problem .section-title, .site-why-everyone .section-title, .site-wound .section-title, .site-scale .section-title, .site-citadel .section-title, .site-allies .section-title, .site-phase-coming .section-title { margin-bottom: var(--spacing-lg); } /* 2. THE PROBLEM — All elements share same left edge */ .site-problem { background: var(--ivory); padding: var(--spacing-xl) 0; } .site-problem .container { max-width: var(--max-width-narrow); } .site-problem .section-label, .site-problem .section-title, .site-problem .problem-content, .site-problem .section-link { text-align: left; } .problem-content p { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); margin-bottom: var(--spacing-sm); } .problem-content p:last-child { margin-bottom: 0; } /* 3. WHY EVERYONE — Shares left edge with all sections */ .site-why-everyone { background: var(--cream-warm); padding: var(--spacing-xl) 0; } .site-why-everyone .container { max-width: var(--max-width-narrow); } /* Accumulation Formula — Visual equation with clear hierarchy */ .accumulation-formula { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-xs); flex-wrap: wrap; margin-bottom: var(--spacing-md); padding: var(--spacing-md) 0; } .formula-term { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--earth); padding: var(--spacing-xs) var(--spacing-sm); background: var(--ivory); border-left: 2px solid var(--burgundy); } .formula-operator { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--gold); padding: 0 var(--spacing-xs); } .formula-result { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ivory); padding: var(--spacing-xs) var(--spacing-sm); background: var(--burgundy); border-left: 3px solid var(--gold); } .accumulation-text { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); } /* Failed Environments — Grid of contexts that failed to install regulation */ .failed-environments { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .failed-env { padding: var(--spacing-sm) var(--spacing-md); background: rgba(245, 241, 234, 0.6); border-left: 2px solid var(--gold); } .env-name { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--black); margin-bottom: 0.25rem; } .env-desc { display: block; font-family: var(--font-body); font-size: var(--text-2xs); color: var(--earth); line-height: var(--leading-normal); } @media (max-width: 768px) { .failed-environments { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .failed-environments { grid-template-columns: 1fr; } } /* 4. THE WOUND — Shares left edge with all sections */ .site-wound { background: var(--cream-deep); padding: var(--spacing-xl) 0; } .site-wound .container { max-width: var(--max-width-narrow); } .wound-intro { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); margin-bottom: var(--spacing-md); } .wound-poles { display: flex; align-items: stretch; justify-content: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .wound-pole { flex: 1; max-width: 320px; padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--burgundy); } .pole-label { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); } .wound-pole p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .wound-between { display: flex; align-items: center; font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-light); color: var(--gold); } .wound-synthesis { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); } @media (max-width: 768px) { .wound-poles { flex-direction: column; align-items: flex-start; } .wound-between { transform: rotate(90deg); align-self: center; } } /* 5. THE SCALE — Shares left edge with all sections */ .site-scale { background: var(--ivory); padding: var(--spacing-xl) 0; } .site-scale .container { max-width: var(--max-width-narrow); } /* Scale Flow — Elegant horizontal progression */ .scale-flow { display: flex; align-items: stretch; margin-bottom: var(--spacing-lg); border: 1px solid rgba(196, 169, 98, 0.2); background: var(--cream); overflow: hidden; } .scale-level { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--earth); padding: var(--spacing-sm) var(--spacing-md); flex: 1; /* text-align removed for left justification */ border-right: 1px solid rgba(196, 169, 98, 0.15); position: relative; } .scale-level:last-of-type { border-right: none; background: var(--gold); color: var(--black); font-weight: var(--weight-bold); } .scale-arrow { display: none; } @media (max-width: 600px) { .scale-flow { flex-direction: column; } .scale-level { border-right: none; border-bottom: 1px solid rgba(196, 169, 98, 0.15); } .scale-level:last-of-type { border-bottom: none; } } .scale-text { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); } /* Scale on teal banner */ .site-scale.banner--teal { background: var(--banner-teal); } .site-scale.banner--teal .scale-flow { background: rgba(0, 0, 0, 0.15); border-color: rgba(196, 169, 98, 0.3); } .site-scale.banner--teal .scale-level { color: var(--ivory); border-color: rgba(196, 169, 98, 0.2); } .site-scale.banner--teal .scale-text { color: rgba(245, 241, 234, 0.9); } /* 6. THE CITADEL — Shares left edge with all sections */ .site-citadel { background: var(--cream-warm); padding: var(--spacing-xl) 0; } .site-citadel .container { max-width: var(--max-width-narrow); } /* Citadel on burgundy banner — dramatic crisis moment */ .site-citadel.banner--burgundy { background: var(--banner-burgundy); } .site-citadel.banner--burgundy .section-label { color: var(--gold-pale); } .site-citadel.banner--burgundy .section-title { color: var(--cream); } .site-citadel.banner--burgundy .citadel-stage { background: rgba(255, 255, 255, 0.08); border-top-color: var(--gold); } .site-citadel.banner--burgundy .stage-name { color: var(--gold); } .site-citadel.banner--burgundy .stage-desc { color: rgba(245, 241, 234, 0.85); } .site-citadel.banner--burgundy .citadel-arrow { color: var(--gold-pale); } .site-citadel.banner--burgundy .citadel-text { color: rgba(245, 241, 234, 0.9); } .site-citadel.banner--burgundy .section-link { color: var(--gold); border-color: var(--gold-pale); } .site-citadel.banner--burgundy .section-link:hover { color: var(--cream); border-color: var(--cream); } /* Citadel on purple banner — mystical threshold */ .site-citadel.banner--purple { background: var(--banner-purple); } .site-citadel.banner--purple .section-label { color: var(--gold-pale); } .site-citadel.banner--purple .section-title { color: var(--cream); } .site-citadel.banner--purple .citadel-stage { background: rgba(255, 255, 255, 0.08); border-top-color: var(--gold); } .site-citadel.banner--purple .stage-name { color: var(--gold); } .site-citadel.banner--purple .stage-desc { color: rgba(245, 241, 234, 0.85); } .site-citadel.banner--purple .citadel-arrow { color: var(--gold-pale); } .site-citadel.banner--purple .citadel-text { color: rgba(245, 241, 234, 0.9); } .site-citadel.banner--purple .section-link { color: var(--gold); border-color: var(--gold-pale); } .site-citadel.banner--purple .section-link:hover { color: var(--cream); border-color: var(--cream); } /* Citadel Progression — Elegant horizontal bar (matches scale-flow) */ .citadel-progression { display: flex; align-items: stretch; margin-bottom: var(--spacing-lg); border: 1px solid rgba(196, 169, 98, 0.3); background: rgba(0, 0, 0, 0.2); overflow: hidden; } .citadel-stage { flex: 1; padding: var(--spacing-md) var(--spacing-sm); /* text-align removed for left justification */ border-right: 1px solid rgba(196, 169, 98, 0.2); background: transparent; position: relative; } .citadel-stage:last-of-type { border-right: none; background: var(--burgundy); } .citadel-stage:last-of-type .stage-name, .citadel-stage:last-of-type .stage-desc { color: var(--ivory); } /* Ensure purple banner stages have legible light text */ .site-citadel.banner--purple .citadel-stage .stage-name { color: var(--gold); } .site-citadel.banner--purple .citadel-stage .stage-desc { color: var(--ivory); } /* Last stage on purple banner has burgundy bg with white text */ .site-citadel.banner--purple .citadel-stage:last-of-type .stage-name, .site-citadel.banner--purple .citadel-stage:last-of-type .stage-desc { color: var(--ivory); } .stage-name { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--cream); display: block; margin-bottom: var(--spacing-2xs); } .stage-desc { font-family: var(--font-body); font-size: var(--text-2xs); color: rgba(245, 241, 234, 0.9); } .stage-explain { display: block; font-family: var(--font-body); font-size: var(--text-2xs); color: rgba(245, 241, 234, 0.85); margin-top: var(--spacing-xs); line-height: var(--leading-relaxed); } .citadel-arrow { display: none; } .citadel-intro { font-family: var(--font-body); font-size: var(--text-md); color: var(--ivory); line-height: var(--leading-relaxed); max-width: 600px; margin-bottom: var(--spacing-lg); } .citadel-text { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); } @media (max-width: 900px) { .citadel-progression { flex-direction: column; } .citadel-stage { border-right: none; border-bottom: 1px solid rgba(196, 169, 98, 0.2); width: 100%; } .citadel-stage:last-of-type { border-bottom: none; } } /* 7. THE BRIDGE — Transition from problem to solution */ .site-bridge { background: var(--cream); padding: var(--spacing-xxl) 0; } .bridge-content { max-width: 680px; margin: 0 auto; padding: 0 var(--spacing-md); } .bridge-text { font-family: var(--font-accent); font-size: var(--text-lg); color: var(--charcoal); line-height: var(--leading-loose); text-align: left; } /* 8. PHASE 1: THE TEACHERS — Shares left edge with all sections */ .site-allies { background: linear-gradient(180deg, var(--black) 0%, rgba(26, 24, 22, 0.95) 100%); padding: var(--spacing-xl) 0; } .site-allies .container { max-width: var(--max-width-narrow); } .site-allies .section-label { color: var(--gold); } .site-allies .section-title { color: var(--ivory); } .allies-intro { font-family: var(--font-body); font-size: var(--text-md); color: rgba(255, 254, 249, 0.85); margin-bottom: var(--spacing-lg); line-height: var(--leading-loose); } .allies-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } @media (max-width: 800px) { .allies-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .allies-grid { grid-template-columns: 1fr; } } .ally-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-md); background: rgba(255, 254, 249, 0.03); border: 1px solid rgba(196, 169, 98, 0.2); border-left: 3px solid var(--gold); text-decoration: none; transition: all 0.3s ease; } .ally-card:hover { background: rgba(196, 169, 98, 0.1); border-color: var(--gold); transform: translateY(-2px); } .ally-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--gold); margin-bottom: var(--spacing-xs); } .ally-action { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ivory); font-style: normal; text-align: left; } .allies-onramp { margin-top: var(--spacing-xl); padding: 2.5rem; background: rgba(255, 254, 249, 0.05); border: 1px solid rgba(196, 169, 98, 0.15); } .allies-onramp h3 { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .onramp-steps { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: 1.5rem; } .onramp-step { display: flex; gap: 1.25rem; text-align: left; padding: 1.25rem 1.5rem; background: rgba(255, 254, 249, 0.03); } .step-time { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold); min-width: 80px; flex-shrink: 0; padding-top: 0.1rem; } .step-action { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 254, 249, 0.85); line-height: var(--leading-relaxed); } .onramp-coda { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ivory); margin: 0; line-height: var(--leading-relaxed); } .onramp-coda a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .onramp-coda a:hover { color: var(--ivory); } /* Teachers on teal banner — purple cards on teal creates contrast */ .site-allies.banner--teal { background: var(--banner-teal); } .site-allies.banner--teal .allies-onramp { background: rgba(0, 0, 0, 0.15); border-color: rgba(196, 169, 98, 0.3); } .site-allies.banner--teal .onramp-step { background: rgba(0, 0, 0, 0.1); } /* Teachers on dark charcoal banner — laden with gold */ .site-allies.banner--dark { background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); } .site-allies.banner--dark .section-label { color: var(--gold); } .site-allies.banner--dark .section-title { color: var(--gold); } .site-allies.banner--dark .allies-intro { color: rgba(245, 241, 234, 0.85); } .site-allies.banner--dark .allies-onramp { background: rgba(196, 169, 98, 0.08); border-color: var(--gold); } .site-allies.banner--dark .allies-onramp h3 { color: var(--gold); } .site-allies.banner--dark .onramp-step { background: rgba(196, 169, 98, 0.05); border-left: 2px solid var(--gold); } .site-allies.banner--dark .step-time { color: var(--gold); } .site-allies.banner--dark .onramp-coda { color: var(--ivory); } .site-allies.banner--dark .onramp-coda a { color: var(--gold); } /* Pathway guidance section */ .pathways-section { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid rgba(196, 169, 98, 0.3); } .pathways-section h3 { font-family: var(--font-accent); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--gold); margin-bottom: var(--spacing-xs); } .pathways-intro { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(245, 241, 234, 0.8); margin-bottom: var(--spacing-md); } .pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } @media (max-width: 768px) { .pathway-grid { grid-template-columns: 1fr; } } .pathway-card { background: rgba(196, 169, 98, 0.08); border: 1px solid rgba(196, 169, 98, 0.25); border-radius: var(--radius-sm); padding: var(--spacing-sm); } .pathway-card h4 { font-family: var(--font-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gold); margin-bottom: var(--spacing-xs); } .pathway-card p { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(245, 241, 234, 0.85); line-height: var(--leading-relaxed); margin: 0; } .pathway-card a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .pathway-card a:hover { color: var(--ivory); } /* 8 & 9. PHASE COMING — Shares left edge with all sections */ .site-phase-coming { background: var(--cream-deep); padding: var(--spacing-lg) 0; } .site-phase-coming .container { max-width: var(--max-width-narrow); } .site-phase-coming--alt { background: var(--cream-warm); } /* Phase coming on purple banner */ .site-phase-coming.banner--purple { background: var(--banner-purple); } .site-phase-coming.banner--purple .section-label { color: var(--gold-pale); } .site-phase-coming.banner--purple .section-title { color: var(--cream); } .site-phase-coming.banner--purple .phase-preview { color: rgba(245, 241, 234, 0.9); } .site-phase-coming.banner--purple .phase-status { color: var(--gold); border-color: var(--gold); } .phase-preview { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); margin-bottom: var(--spacing-sm); line-height: var(--leading-loose); } .phase-status { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); padding: 0.5rem 1rem; border: 1px solid var(--gold); display: inline-block; } /* ═══════════════════════════════════════════════════════════════ TRIPLE PROOF / IDENTITY SECTION ═══════════════════════════════════════════════════════════════ */ .triple-proof { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); position: relative; margin: 0; } .triple-proof__header { /* text-align removed for left justification */ margin-bottom: var(--spacing-lg); } .triple-proof__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); display: block; margin-bottom: 0.75rem; } .triple-proof__title { font-family: var(--font-important); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: var(--weight-medium); color: var(--black); margin: 0 0 1rem; } .triple-proof__intro { font-size: var(--text-md); color: var(--earth); max-width: 600px; margin: 0 auto; line-height: var(--leading-relaxed); } .triple-proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } .triple-proof__grid--four { grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .triple-proof__grid, .triple-proof__grid--four { grid-template-columns: 1fr; } } .proof-card { background: var(--ivory); border: none; border-top: 2px solid var(--gold); padding: 3rem 2.5rem; position: relative; transition: all 0.35s ease; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); } .proof-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .proof-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); } .proof-card:hover::before { transform: translateX(100%); } .proof-card__number { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--gold); text-shadow: 0 0 20px rgba(196, 169, 98, 0.3); position: absolute; top: var(--spacing-xs); right: var(--spacing-sm); } .proof-card__title { font-family: var(--font-important); font-size: clamp(1.15rem, 2vw, 1.563rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } .proof-card__text { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; text-align: left; } /* ═══════════════════════════════════════════════════════════════ THEORY MAP ═══════════════════════════════════════════════════════════════ */ .theory-map { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .theory-map__header { /* text-align removed for left justification */ max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .theory-map__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.75rem; } .theory-map__title { font-family: var(--font-important); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: var(--weight-medium); color: var(--black); margin: 0 0 1rem; } .theory-map__subtitle { font-size: var(--text-base); color: var(--earth); margin: 0; line-height: var(--leading-relaxed); } .theory-map__visual { max-width: var(--max-width-narrow); margin: 0 auto; } .theory-map__flow { display: flex; flex-direction: column; gap: 0; align-items: center; } .theory-map__node { background: var(--cream); border: 1px solid rgba(196, 169, 98, 0.2); padding: var(--spacing-md); width: 100%; max-width: 500px; text-align: left; position: relative; } .theory-map__node--problem { border-left: 4px solid var(--burgundy); } .theory-map__node--method { border-left: 4px solid var(--gold); } .theory-map__node--practice { border-left: 4px solid var(--earth); } .theory-map__node-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .theory-map__node-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); } .theory-map__node-text { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .theory-map__connector { width: 2px; height: 40px; background: linear-gradient(to bottom, var(--gold-pale), var(--gold)); } .theory-map__branch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); width: 100%; max-width: 600px; } .theory-map__branch-item { background: var(--cream-warm); padding: var(--spacing-md); text-align: left; border-top: 3px solid var(--gold); } .theory-map__branch-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-bottom: var(--spacing-xs); } .theory-map__branch-title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-xs); } .theory-map__branch-text { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-normal); margin: 0; } @media (max-width: 600px) { .theory-map__branch { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ IDENTITY CONTRAST (What Is / Is Not) ═══════════════════════════════════════════════════════════════ */ .identity-contrast { background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); padding: var(--spacing-xxl) var(--spacing-md); } .identity-contrast__header { /* text-align removed for left justification */ margin-bottom: var(--spacing-lg); } .identity-contrast__label { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-bottom: 0.75rem; display: block; } .identity-contrast__title { font-family: var(--font-important); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: var(--weight-medium); color: var(--black); margin: 0; } .identity-contrast__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); max-width: 1000px; margin: 0 auto; } @media (max-width: 768px) { .identity-contrast__grid { grid-template-columns: 1fr; } } .identity-contrast__column { padding: var(--spacing-md); } .identity-contrast__column--not { background: rgba(114, 47, 55, 0.05); border-left: 4px solid var(--burgundy); } .identity-contrast__column--is { background: rgba(196, 169, 98, 0.08); border-left: 4px solid var(--gold); } .identity-contrast__column-title { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--black); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 1px solid rgba(0,0,0,0.1); } .identity-contrast__item { margin-bottom: var(--spacing-md); } .identity-contrast__item:last-child { margin-bottom: 0; } .identity-contrast__item-title { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--black); margin-bottom: var(--spacing-xs); } .identity-contrast__item-text { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* ═══════════════════════════════════════════════════════════════ ELIMINATION SECTION / TIMELINE ═══════════════════════════════════════════════════════════════ */ .elimination-section { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); position: relative; } .elimination-section__header { /* text-align removed for left justification */ max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .elimination-section__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); display: block; margin-bottom: 0.75rem; } .elimination-section__title { font-family: var(--font-important); font-size: clamp(0.85rem, 2vw, 1rem); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--black); margin: 0 0 1rem; } .elimination-section__intro { font-size: var(--text-md); color: var(--earth); font-style: normal; margin: 0; line-height: var(--leading-relaxed); } .elimination-timeline { max-width: var(--max-width-narrow); margin: 0 auto; position: relative; } .elimination-timeline::before { content: ''; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--burgundy), var(--gold)); } @media (max-width: 600px) { .elimination-timeline::before { left: 80px; } } .elimination-item { display: grid; grid-template-columns: 100px 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); position: relative; } @media (max-width: 600px) { .elimination-item { grid-template-columns: 80px 1fr; } } .elimination-item::after { content: ''; position: absolute; left: 94px; top: 8px; width: 14px; height: 14px; background: var(--burgundy); border: 3px solid var(--cream-deep); border-radius: var(--radius-full); } @media (max-width: 600px) { .elimination-item::after { left: 74px; } } .elimination-item--now::after { background: var(--gold); box-shadow: 0 0 20px rgba(196, 169, 98, 0.5); } .elimination-item__date { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--burgundy); text-align: right; padding-right: var(--spacing-sm); } .elimination-item--now .elimination-item__date { color: var(--gold); } .elimination-item__content { background: var(--ivory); padding: var(--spacing-md); border-left: 3px solid var(--burgundy); } .elimination-item--now .elimination-item__content { border-left-color: var(--gold); background: linear-gradient(135deg, rgba(196, 169, 98, 0.1), var(--ivory)); } .elimination-item__title { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: 0.35rem; } .elimination-item__text { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* ═══════════════════════════════════════════════════════════════ KEY INSIGHT CALLOUTS ═══════════════════════════════════════════════════════════════ */ .key-insight-wrapper { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .key-insight { max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto 0; padding: var(--spacing-md) var(--spacing-lg); background: var(--ivory); border: none; border-left: 3px solid var(--gold); position: relative; box-sizing: border-box; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.04); } .key-insight::before { content: ''; position: absolute; top: -1px; left: -5px; right: -1px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-pale), transparent); } .key-insight::after { content: ''; display: none; } .key-insight p { font-family: var(--font-body); font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: var(--weight-normal); font-style: normal; color: var(--earth); line-height: var(--leading-relaxed); margin: 0; text-align: left; max-width: none; } .key-insight strong { color: var(--gold-deep); font-weight: var(--weight-semibold); font-style: normal; } .key-insight-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--gold); margin-bottom: var(--spacing-sm); display: inline-block; font-style: normal; font-family: var(--font-body); background: rgba(196, 169, 98, 0.15); padding: 0.3rem 0.8rem; } /* ═══════════════════════════════════════════════════════════════ HERO UPDATED STYLES ═══════════════════════════════════════════════════════════════ */ .hero h1 .subtitle { display: block; font-style: normal; font-size: var(--text-xs); font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); margin-top: var(--spacing-sm); margin-bottom: 0; padding: 0.75rem 0; border-top: 1px solid rgba(196, 169, 98, 0.2); } .section-symbol { color: var(--gold); text-shadow: 0 0 60px rgba(196, 169, 98, 0.8), 0 0 120px rgba(196, 169, 98, 0.4); animation: symbol-glow 3s ease-in-out infinite, gentle-float 4s ease-in-out infinite; display: inline-block; } /* ═══════════════════════════════════════════════════════════════ TEACHERS INDEX PAGE ═══════════════════════════════════════════════════════════════ */ /* Teachers Principle — Full-width teal banner with centered card */ .teachers-principle { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); /* text-align removed for left justification */ } .teachers-principle.banner--teal { background: var(--banner-teal); padding: var(--spacing-xxl) var(--spacing-md); } .teachers-principle .section-title { margin-bottom: var(--spacing-md); } /* Principle Card — Elegant card on teal banner */ .principle-card { max-width: 800px; margin: 0 auto; padding: 3rem 4rem; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(196, 169, 98, 0.4); border-top: 4px solid var(--gold); /* text-align removed for left justification */ } .principle-card__label { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); margin-bottom: var(--spacing-sm); } .principle-card__term { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--weight-normal); color: var(--ivory); margin-bottom: var(--spacing-md); letter-spacing: var(--tracking-normal); } .principle-card__text { font-family: var(--font-body); font-size: var(--text-md); color: rgba(245, 241, 234, 0.9); line-height: var(--leading-loose); margin: 0; } .principle-card__text strong { color: var(--gold); font-weight: var(--weight-semibold); } @media (max-width: 768px) { .principle-card { padding: 2rem 1.5rem; } } .teachers-why { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .teachers-why .section-title { margin-bottom: var(--spacing-lg); } .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .why-card { background: var(--ivory); padding: 2.75rem 3rem; border: none; border-left: 3px solid var(--gold); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .why-card:hover { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .why-card h3 { font-family: var(--font-important); font-size: clamp(1.15rem, 2vw, 1.563rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } .why-card p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } .teachers-grid-section { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } /* ═══════════════════════════════════════════════════════════════ TEACHER CARDS — Museum-Quality Display Cards Each teacher card is a mini design environment: - Commanding icon in gilded frame - Clear typographic hierarchy - Layered visual depth - Elegant proportions ═══════════════════════════════════════════════════════════════ */ /* Teachers Grid — Responsive grid for teacher cards */ .teachers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } /* Teacher Card — Simple card for displaying teacher/tradition info */ .teacher-card { background: var(--ivory); padding: var(--spacing-md); border-top: 3px solid var(--gold); position: relative; } .teacher-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--weight-medium); color: var(--charcoal); margin-bottom: 0.25rem; } .teacher-card__tradition { font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--weight-medium); color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: block; } .teacher-card p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); } /* Teachers Full Grid — 2-column for spacious, readable cards */ .teachers-full-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); } @media (max-width: 800px) { .teachers-full-grid { grid-template-columns: 1fr; } } /* Teacher Full Card — Horizontal layout with icon left, content right */ /* Teacher Full Card — Dark charcoal with gold, elegant and impactful */ .teacher-full-card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); text-decoration: none; border: 1px solid var(--gold); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .teacher-full-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); } .teacher-full-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(196, 169, 98, 0.25); border-color: var(--gold-pale); } /* Icon — Large centered gold letter */ .teacher-full-card__icon { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem 1.5rem; font-family: var(--font-display); font-size: 3.5rem; font-weight: var(--weight-normal); color: var(--gold); position: relative; } .teacher-full-card__icon::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* Content Area */ .teacher-full-card__content { padding: 1.5rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; /* text-align removed for left justification */ } /* Card Name — Gold and prominent */ .teacher-full-card__name, .teacher-full-card .teacher-full-card__name, .teacher-full-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-normal); color: #C4A855 !important; /* gold - explicit for dark bg */ margin: 0 0 0.25rem; letter-spacing: var(--tracking-wide); } /* Essence Tag — Gold accent */ .teacher-full-card__essence, .teacher-full-card .teacher-full-card__essence { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: #C4A855 !important; /* gold - explicit for dark bg */ margin-bottom: 1.25rem; } /* Description — Readable on dark */ .teacher-full-card__desc, .teacher-full-card .teacher-full-card__desc, .teacher-full-card p { font-family: var(--font-body); font-size: var(--text-sm); color: #FAF8F3 !important; /* ivory - explicit for dark bg */ line-height: var(--leading-relaxed); margin-bottom: 1.25rem; flex: 1; text-align: left; } /* Refusing Line — Visible on dark */ .teacher-full-card__refusing, .teacher-full-card .teacher-full-card__refusing { font-family: var(--font-body); font-size: var(--text-sm); color: #FAF8F3 !important; /* ivory - explicit for dark bg */ margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: rgba(114, 47, 55, 0.2); border-left: 2px solid var(--burgundy); text-align: left; } /* Explore Link — Gold call to action */ .teacher-full-card__link, .teacher-full-card .teacher-full-card__link { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: #C4A855 !important; /* gold - explicit for dark bg */ text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(196, 169, 98, 0.3); transition: color 0.3s ease; } .teacher-full-card:hover .teacher-full-card__link { color: #E8DDB8 !important; /* gold-pale */ } @media (max-width: 600px) { .teacher-full-card__icon { font-size: 2.5rem; padding: 2rem 1rem 1rem; } .teacher-full-card__content { padding: 1.25rem 1.5rem 1.5rem; } .teacher-full-card__name { font-size: var(--text-md); } } /* ───────────────────────────────────────────────────────────────── TEACHER CARD COLOR VARIANTS Each teacher has a signature color for their icon ───────────────────────────────────────────────────────────────── */ /* Floor — warm terracotta, bright enough for dark bg */ .teacher-full-card--floor .teacher-full-card__icon { color: #CFA68A; } .teacher-full-card--floor .teacher-full-card__icon::before { border-color: #CFA68A; } /* Cold — bright ice blue for visibility */ .teacher-full-card--cold .teacher-full-card__icon { color: #9BB8C9; } .teacher-full-card--cold .teacher-full-card__icon::before { border-color: #9BB8C9; } /* Heat — bright coral/salmon */ .teacher-full-card--heat .teacher-full-card__icon { color: #E08A7A; } .teacher-full-card--heat .teacher-full-card__icon::before { border-color: #E08A7A; } /* Dark — silver-blue for visibility on dark bg */ .teacher-full-card--dark .teacher-full-card__icon { color: #8A9BB0; } .teacher-full-card--dark .teacher-full-card__icon::before { border-color: #8A9BB0; } /* Sun — bright amber */ .teacher-full-card--sun .teacher-full-card__icon { color: #EAA855; } .teacher-full-card--sun .teacher-full-card__icon::before { border-color: #EAA855; } /* Silence — light steel for visibility */ .teacher-full-card--silence .teacher-full-card__icon { color: #A8B8C4; } .teacher-full-card--silence .teacher-full-card__icon::before { border-color: #A8B8C4; } /* Hunger — bright gold */ .teacher-full-card--hunger .teacher-full-card__icon { color: #E8D9A8; } .teacher-full-card--hunger .teacher-full-card__icon::before { border-color: #E8D9A8; } .teachers-paradox { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .eighth-teaser { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .eighth-teaser--final { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%); } .eighth-teaser-content { max-width: var(--max-width-narrow); margin: 0 auto; } .eighth-teaser-content p { font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); margin-bottom: var(--spacing-md); } .eighth-teaser-conclusion { font-family: var(--font-body); font-size: 1.15rem !important; font-style: normal; text-align: left; margin-top: var(--spacing-lg) !important; } .eighth-teaser-conclusion em { font-style: normal; color: var(--gold-deep); } .eighth-teaser-conclusion strong { color: var(--black); } .teachers-begin { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } /* Begin Grid — Horizontal step cards */ .begin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } @media (max-width: 768px) { .begin-grid { grid-template-columns: 1fr; } } /* Begin Card — Horizontal layout with number left */ .begin-card { display: grid; grid-template-columns: 60px 1fr; background: var(--cream); border: 1px solid rgba(196, 169, 98, 0.15); border-top: 3px solid var(--stone); position: relative; } .begin-card--primary { border-top-color: var(--gold); } .begin-card__number { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-normal); color: var(--gold); display: flex; align-items: flex-start; justify-content: center; padding-top: 1.75rem; background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%); border-right: 1px solid rgba(196, 169, 98, 0.15); } .begin-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--weight-normal); color: var(--black); margin-bottom: 0.75rem; letter-spacing: var(--tracking-tight); } .begin-card p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin-bottom: var(--spacing-sm); grid-column: 2; padding: 0 1.5rem 0 0; } .begin-card__content { padding: 1.5rem; display: flex; flex-direction: column; } .begin-card__link { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--gold-deep); text-decoration: none; text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(196, 169, 98, 0.15); } .begin-card__link:hover { color: var(--gold); } @media (max-width: 500px) { .begin-card { grid-template-columns: 50px 1fr; } .begin-card__number { font-size: 1.5rem; padding-top: 1.25rem; } } /* ═══════════════════════════════════════════════════════════════ EVIDENCE INDEX PAGE ═══════════════════════════════════════════════════════════════ */ /* Urgency Stats Section */ .urgency-stats { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%); padding: var(--spacing-xl) var(--spacing-md); position: relative; } .urgency-stats::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .urgency-stats .section-label { color: var(--gold); } .urgency-stats .section-title { color: var(--ivory); margin-bottom: var(--spacing-lg); } .urgency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: 900px; margin: 0 auto var(--spacing-lg); } .urgency-stat { /* text-align removed for left justification */ padding: var(--spacing-lg) var(--spacing-md); background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(196, 169, 98, 0.3); } .urgency-stat__number { display: block; font-family: var(--font-important); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: var(--weight-light); color: var(--gold); line-height: 1; } .urgency-stat__label { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--cream); margin-top: var(--spacing-sm); line-height: var(--leading-normal); } .urgency-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: 900px; margin: 0 auto var(--spacing-lg); } .urgency-quote { background: rgba(0, 0, 0, 0.15); border-left: 3px solid var(--gold); padding: var(--spacing-md); margin: 0; } .urgency-quote p { font-family: var(--font-body); font-size: var(--text-md); font-style: normal; color: var(--cream); line-height: var(--leading-relaxed); margin: 0 0 var(--spacing-xs); } .urgency-quote cite { font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold); } .urgency-conclusion { font-family: var(--font-body); font-size: var(--text-md); color: var(--cream); text-align: left; max-width: var(--max-width-narrow); margin: 0 auto; } .urgency-conclusion strong { color: var(--gold); } @media (max-width: 768px) { .urgency-grid { grid-template-columns: 1fr; max-width: 300px; } .urgency-quotes { grid-template-columns: 1fr; } } .evidence-stats { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .evidence-stats .section-title { margin-bottom: var(--spacing-lg); } /* Note: .evidence-card and related styles are defined earlier in the file */ .evidence-takeaway { max-width: var(--max-width-narrow); margin: var(--spacing-xl) auto 0; text-align: left; padding: var(--spacing-lg); background: rgba(196, 169, 98, 0.1); border-left: 4px solid var(--gold); } .evidence-takeaway p { font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .verification-section { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .verification-table-wrapper { max-width: var(--max-width); margin: var(--spacing-lg) auto 0; overflow-x: auto; } .verification-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .verification-table th, .verification-table td { padding: var(--spacing-sm) var(--spacing-md); text-align: left; border-bottom: 1px solid var(--cream-deep); } .verification-table th { font-weight: var(--weight-semibold); color: var(--black); background: var(--cream); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); } .verification-table td { color: var(--earth); } .verification-table .verified { color: var(--gold-deep); font-weight: var(--weight-semibold); } .novel-synthesis { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .research-categories { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .research-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: var(--spacing-lg) auto 0; } @media (max-width: 900px) { .research-grid { grid-template-columns: 1fr; } } .research-category { background: var(--ivory); padding: var(--spacing-lg); border-top: 4px solid var(--gold); } .research-category h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-xs); } .research-category__intro { font-size: var(--text-md); font-style: normal; color: var(--earth); margin-bottom: var(--spacing-md); } .research-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); } .research-list li { font-size: var(--text-sm); color: var(--earth); padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--cream-deep); } .research-list li:last-child { border-bottom: none; } .research-list strong { color: var(--black); } .research-finding { background: rgba(196, 169, 98, 0.1); padding: var(--spacing-sm); border-left: 3px solid var(--gold); } .research-finding p { font-size: var(--text-sm); color: var(--earth); margin: 0; } .ace-evidence { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .ace-content { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); text-align: left; } .ace-content p { font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); } .ace-stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-xl); } .ace-stat { text-align: left; padding: 2.5rem 3rem; background: var(--cream); border-top: 3px solid var(--burgundy); } .ace-stat__number { font-family: var(--font-important); font-size: 3rem; font-weight: var(--weight-light); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); } .ace-stat__text { font-size: var(--text-base); color: var(--earth); margin: 0 0 1rem 0; line-height: var(--leading-relaxed); } .ace-stat__source { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin: 0; } .ace-meaning { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; } .ace-meaning h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); } .ace-meaning p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); } .intervention-evidence { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .intervention-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto 0; } .intervention-card { background: var(--ivory); padding: 2.5rem 3rem; border-left: 4px solid var(--gold); } .intervention-card h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-sm); } .intervention-study { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .intervention-finding { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* Reversal Principle Card - spacing and scale */ .intervention-evidence .key-insight { margin-top: var(--spacing-xl); padding: 3.5rem 4.5rem; background: var(--ivory); border-left: 4px solid var(--gold); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06); } .intervention-evidence .key-insight p { font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: var(--leading-relaxed); } .intervention-evidence .key-insight-label { font-size: var(--text-xs); padding: 0.4rem 1rem; margin-bottom: var(--spacing-md); } @media (max-width: 768px) { .intervention-evidence .key-insight { margin-top: var(--spacing-lg); padding: var(--spacing-lg); } } .evidence-limitations { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .limitations-content { max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto 0; display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } .limitation-item { background: var(--cream); padding: 2rem 2.5rem; border-left: 3px solid var(--burgundy); } .limitation-item h3 { font-family: var(--font-important); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-xs); } .limitation-item p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* Limitations Positioning Statement */ .limitations-positioning { margin-top: var(--spacing-xl); padding: var(--spacing-lg); background: var(--cream); border-left: 3px solid var(--gold); } .limitations-positioning p { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* Definition Card (used on Teachers and Evidence pages) */ .definition-card { background: var(--ivory); border: 1px solid rgba(196, 168, 85, 0.25); border-top: 4px solid var(--gold); border-left: 4px solid var(--gold); padding: 4rem 4.5rem; max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto; position: relative; box-shadow: var(--card-shadow-rest); transition: var(--card-transition); } .definition-card::before { content: '§'; position: absolute; top: 1rem; right: 1.5rem; font-family: var(--font-display); font-size: 2rem; color: var(--gold); opacity: 0.25; } .definition-card:hover { box-shadow: 0 8px 32px rgba(196, 169, 98, 0.2); transform: translateY(var(--card-lift)); border-color: var(--gold); } .definition-card__label { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); margin-bottom: var(--spacing-sm); display: block; /* text-align removed for left justification */ } .definition-card__term { font-family: var(--font-important); font-size: clamp(1.4rem, 3vw, 1.953rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-md); line-height: var(--leading-snug); /* text-align removed for left justification */ } .definition-card__text { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); /* text-align removed for left justification */ } .definition-card__text strong { color: var(--gold-deep); } /* ═══════════════════════════════════════════════════════════════ THESIS PAGE ═══════════════════════════════════════════════════════════════ */ .thesis-core { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .thesis-core .section-title { margin-bottom: var(--spacing-md); } .thesis-failure { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .thesis-failure .section-title { margin-bottom: var(--spacing-md); } /* Twin Terrors Section */ .thesis-twin-terrors { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .twin-terrors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 900px) { .twin-terrors-grid { grid-template-columns: 1fr; } } .terror-domain { background: var(--ivory); padding: 2rem 2.5rem; border-left: 3px solid var(--burgundy); } .terror-domain h3 { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--burgundy); margin-bottom: 1.25rem; } .terror-poles { display: flex; flex-direction: column; gap: 1.25rem; } .terror-pole { padding-left: 1rem; border-left: 2px solid rgba(200, 169, 126, 0.3); } .terror-label { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); display: block; margin-bottom: var(--spacing-xs); } .terror-pole p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .terror-pole p strong { color: var(--black); } .thesis-synthesis { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; padding-top: var(--spacing-md); border-top: 1px solid rgba(200, 169, 126, 0.2); } .thesis-synthesis p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin-bottom: var(--spacing-sm); } .thesis-synthesis p:last-child { margin-bottom: 0; } .thesis-synthesis p strong { color: var(--black); } .thesis-content { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); text-align: left; } .thesis-content p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin-bottom: var(--spacing-sm); } .thesis-content p:last-child { margin-bottom: 0; } .failure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .failure-grid { grid-template-columns: 1fr; } } .failure-card { background: var(--ivory); padding: 2.75rem 3rem; border: none; border-left: 3px solid var(--burgundy); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .failure-card:hover { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .failure-card h3 { font-family: var(--font-important); font-size: clamp(1.15rem, 2vw, 1.563rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); line-height: var(--leading-normal); } .failure-why { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-bottom: var(--spacing-sm); } .failure-card p:last-child { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } .thesis-mechanism { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .mechanism-explanation { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .encoding-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .encoding-details { grid-template-columns: 1fr; } } .encoding-item { background: var(--ivory); padding: var(--spacing-md); border-top: 3px solid var(--gold); } .encoding-item h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .encoding-item p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .thesis-insight { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .thesis-solution { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .solution-content { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); text-align: left; } .solution-content p { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); font-style: normal; } .solution-explanation { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .solution-grid { grid-template-columns: 1fr; } } .solution-card { background: var(--ivory); padding: 2.75rem 3rem; border: none; border-left: 3px solid var(--gold); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .solution-card:hover { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .solution-card h3 { font-family: var(--font-important); font-size: clamp(1.15rem, 2vw, 1.563rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } .solution-card p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } .thesis-teachers { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .teachers-preview-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-sm); max-width: var(--max-width); margin: var(--spacing-lg) auto; } @media (max-width: 900px) { .teachers-preview-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .teachers-preview-grid { grid-template-columns: repeat(2, 1fr); } } .teacher-preview-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: var(--spacing-md); background: var(--cream); text-decoration: none; border: 1px solid rgba(196, 169, 98, 0.2); border-left: 3px solid var(--gold); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .teacher-preview-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(196, 169, 98, 0.15); border-color: var(--gold); } .teacher-preview-card__icon { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--gold); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); margin-bottom: var(--spacing-xs); } .teacher-preview-card__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--black); } .teacher-preview-card__essence { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); } .teachers-cta, .conditions-cta { /* text-align removed for left justification */ margin-top: var(--spacing-lg); } .cta-button { display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--ivory); background: var(--black); padding: var(--spacing-sm) var(--spacing-lg); min-height: 48px; /* Mobile touch target */ text-decoration: none; border: 2px solid var(--black); transition: all 0.3s ease; -webkit-tap-highlight-color: rgba(196, 169, 98, 0.3); } .cta-button:hover { background: var(--gold); border-color: var(--gold); color: var(--black); } .thesis-scale { background: var(--cream-deep); padding: var(--spacing-xl) var(--spacing-md); } .thesis-conditions { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .conditions-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: var(--spacing-lg) auto; } @media (max-width: 768px) { .conditions-preview-grid { grid-template-columns: 1fr; } } .condition-preview { background: var(--ivory); padding: var(--spacing-lg); border-left: 4px solid var(--burgundy); position: relative; } .condition-preview__number { font-family: var(--font-important); font-size: var(--text-xl); font-weight: var(--weight-light); color: var(--gold); position: absolute; top: var(--spacing-sm); right: var(--spacing-md); } .condition-preview h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-sm); } .condition-preview p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .thesis-final { background: var(--black); padding: var(--spacing-xxl) var(--spacing-md); } .final-statement { text-align: left; max-width: var(--max-width-narrow); margin: 0 auto; } .final-statement__text { font-family: var(--font-body); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: var(--weight-normal); color: var(--cream); line-height: var(--leading-normal); margin: 0; } .final-statement__text strong { color: var(--gold); } /* Intelligence Inversion Section */ .thesis-inversion { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .inversion-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto 0; } .inversion-card { background: var(--cream); padding: 2rem 2.5rem; text-align: left; border: 1px solid var(--cream-deep); transition: all 0.3s ease; position: relative; } .inversion-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--burgundy); transition: width 0.3s ease; } .inversion-card:hover { background: var(--ivory); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); } .inversion-card--new { background: var(--ivory); border-color: rgba(196, 169, 98, 0.25); } .inversion-card--new::before { background: var(--gold); } .inversion-old, .inversion-new { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-bottom: var(--spacing-xs); display: block; } .inversion-old { color: var(--burgundy); } .inversion-new { color: var(--gold-deep); } .inversion-card p { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin: 0; line-height: var(--leading-normal); } /* Circulation Thesis Section */ .thesis-circulation { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } .circulation-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: var(--spacing-lg) auto; } .circulation-card { background: var(--cream); padding: 2rem 2.5rem; border: 1px solid var(--cream-deep); border-top: 3px solid var(--gold); transition: var(--transition); } .circulation-card:hover { background: var(--cream-warm); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(196, 169, 98, 0.15); } .circulation-card h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: 0.75rem; } .circulation-card p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* Ramification Box (used across pages) */ .ramification-box { background: linear-gradient(135deg, rgba(196, 169, 98, 0.1), rgba(196, 169, 98, 0.03)); border: 1px solid rgba(196, 169, 98, 0.25); border-left: 4px solid var(--gold); padding: var(--spacing-lg); margin: var(--spacing-md) 0; } .ramification-box__label { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); margin-bottom: var(--spacing-sm); } .ramification-box p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .ramification-box strong { color: var(--gold-deep); } /* ═══════════════════════════════════════════════════════════════ GLOBAL ALIGNMENT & SPACING HARMONIZATION ═══════════════════════════════════════════════════════════════ */ /* Consistent section label spacing across all pages */ [class*="__label"] { margin-bottom: 0.75rem; } /* Body text sections - left aligned for readability */ .ace-content, .solution-content, .eighth-teaser-content { text-align: left; max-width: var(--max-width-narrow); margin-left: auto; margin-right: auto; } .ace-content p, .solution-content p, .eighth-teaser-content p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); margin-bottom: var(--spacing-sm); } /* Page heroes - titles centered, descriptions left */ .page-hero { /* text-align removed for left justification */ } .page-hero__subtitle { text-align: left; max-width: var(--max-width-narrow); margin-left: auto; margin-right: auto; } .section-intro { text-align: left; max-width: var(--max-width-narrow); margin-left: auto; margin-right: auto; } /* Card text should be left-aligned for readability */ [class*="-card"] p:not(.section-intro):not(.page-hero__subtitle), [class*="__card"] p:not(.section-intro) { text-align: left; } /* Consistent spacing after h2 when followed by grids */ h2 + [class*="-grid"], .section-title + [class*="-grid"] { margin-top: var(--spacing-lg); } /* Remove double margins when elements follow each other */ .section-label + .section-title, [class*="__label"] + [class*="__title"], [class*="__label"] + h2, [class*="__label"] + h3 { margin-top: 0; } /* Ensure good vertical rhythm for nested content */ section > .container > .section-label:first-child, section > .container > .section-title:first-child, section > .container > h2:first-child { margin-top: 0; } /* Last paragraph in any context should not have bottom margin */ p:last-child, [class*="-text"]:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════ CONDITIONS PAGE SPECIFIC ═══════════════════════════════════════════════════════════════ */ .conditions-pattern { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .pattern-block { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .pattern-block h2 { margin-bottom: var(--spacing-sm); /* text-align removed for left justification */ } .pattern-block p { font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); text-align: left; } .shared-markers { max-width: var(--max-width); margin: 0 auto; } .shared-markers h3 { /* text-align removed for left justification */ margin-bottom: var(--spacing-lg); color: var(--black); } .markers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); } @media (max-width: 768px) { .markers-grid { grid-template-columns: 1fr; } } .marker { background: var(--ivory); padding: var(--spacing-lg); border-top: 4px solid var(--gold); } .marker h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); } .marker p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .conditions-list { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .conditions-list .section-title { margin-bottom: var(--spacing-xl); } .conditions-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } /* Condition Cards — Elegant condition display */ .condition-full { background: var(--cream); border: 1px solid rgba(196, 169, 98, 0.2); border-top: 4px solid var(--burgundy); overflow: hidden; margin-bottom: var(--spacing-md); } .condition-full .condition-header { background: linear-gradient(180deg, var(--cream-warm), var(--cream)); padding: 2rem 2.5rem; border-bottom: 1px solid rgba(196, 169, 98, 0.15); } .condition-full .condition-number { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); color: var(--burgundy); opacity: 0.7; margin-bottom: var(--spacing-xs); } .condition-full .condition-header h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-normal); color: var(--black); margin: 0 0 1rem 0; letter-spacing: var(--tracking-normal); } .condition-full .condition-stat { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); } @media (max-width: 768px) { .condition-full .condition-header { padding: 1.5rem; } .condition-full .condition-header h3 { font-size: 1.5rem; } } .condition-full .condition-body { padding: var(--spacing-xl) var(--spacing-lg); } .condition-full .condition-body > p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin-bottom: var(--spacing-lg); } .condition-mechanism, .condition-evidence { background: var(--ivory); padding: var(--spacing-lg); margin-top: var(--spacing-md); border-left: 4px solid var(--gold); } .condition-mechanism + .condition-evidence { margin-top: var(--spacing-md); } .condition-mechanism h4, .condition-evidence h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--gold-deep); margin-bottom: var(--spacing-sm); } .condition-mechanism p, .condition-evidence p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .condition-link { display: inline-block; margin-top: var(--spacing-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--burgundy); text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; border: none; } .condition-link:hover { color: var(--gold); } .ace-section { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .ace-section .section-title { margin-bottom: var(--spacing-lg); } .ace-content { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-xl); text-align: left; } .ace-content p { font-size: var(--text-md); color: var(--earth); line-height: var(--leading-loose); } /* .ace-research is defined earlier - simple box style */ .ace-finding { text-align: left; padding: var(--spacing-lg); background: var(--ivory); border-left: 4px solid var(--burgundy); } .finding-stat { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); } .ace-finding p { font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } .ace-meaning { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; padding: var(--spacing-lg); background: var(--ivory); border-left: 3px solid var(--gold); } .ace-meaning h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); } .ace-meaning p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); } .unifying-section { background: var(--black); padding: var(--spacing-xxl) var(--spacing-md); } .unifying-block { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; } .unifying-statement { font-family: var(--font-body); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: var(--weight-normal); color: var(--cream); line-height: var(--leading-normal); margin: 0; } /* Conditions page Teachers CTA */ /* Teachers CTA — Dark charcoal at bottom of pages */ .tf-section--teachers-cta { background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); padding: var(--spacing-xl) var(--spacing-md); } .tf-section--teachers-cta .section-title { color: var(--gold); margin-bottom: var(--spacing-md); } .tf-section--teachers-cta .section-intro { color: rgba(245, 241, 234, 0.85); } .teachers-cta { background: var(--cream-warm); padding: var(--spacing-xl) var(--spacing-md); } .teachers-cta .section-title { margin-bottom: var(--spacing-md); } /* ═══════════════════════════════════════════════════════════════ INDIVIDUAL TEACHER PAGES Museum-quality presentation for each of the Seven Teachers ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── TEACHER HERO ───────────────────────────────────────────────────────────────── */ .teacher-hero { min-height: 70vh; padding: calc(100px + var(--spacing-xxl)) var(--spacing-md) var(--spacing-xxl); display: flex; align-items: center; justify-content: center; /* text-align removed for left justification */ position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 50%, var(--ivory) 100%); } .teacher-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(196, 169, 98, 0.08), transparent); pointer-events: none; } .teacher-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .teacher-hero .container { position: relative; z-index: 1; } .teacher-hero__icon { font-family: var(--font-body); font-size: clamp(5rem, 15vw, 10rem); font-weight: var(--weight-light); font-style: normal; color: var(--gold); line-height: 1; margin-bottom: var(--spacing-md); text-shadow: 0 0 80px rgba(196, 169, 98, 0.4), 0 0 120px rgba(196, 169, 98, 0.2); animation: teacher-icon-glow 4s ease-in-out infinite; } @keyframes teacher-icon-glow { 0%, 100% { text-shadow: 0 0 60px rgba(196, 169, 98, 0.3), 0 0 100px rgba(196, 169, 98, 0.15); } 50% { text-shadow: 0 0 80px rgba(196, 169, 98, 0.5), 0 0 140px rgba(196, 169, 98, 0.25); } } .teacher-hero__title { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: var(--weight-light); color: var(--black); margin-bottom: var(--spacing-sm); letter-spacing: var(--tracking-tighter); } .teacher-hero__descriptor { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-lg); } .teacher-hero__tagline { font-family: var(--font-body); font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: var(--weight-normal); color: var(--earth); max-width: 600px; margin: 0 auto; line-height: var(--leading-relaxed); } /* Enhanced Teacher Hero Elements — Mystical/Luxurious */ /* Icon Frame — Geometric container for the letter */ .teacher-hero__icon-frame { position: relative; display: inline-block; margin-bottom: var(--spacing-lg); } .teacher-hero__icon-frame::before, .teacher-hero__icon-frame::after { content: ''; position: absolute; pointer-events: none; } /* Outer ring */ .teacher-hero__icon-frame::before { top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); border: 1px solid rgba(196, 169, 98, 0.3); border-radius: var(--radius-full); animation: ring-rotate 30s linear infinite; } /* Inner diamond */ .teacher-hero__icon-frame::after { top: 50%; left: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid rgba(196, 169, 98, 0.2); animation: ring-rotate 20s linear infinite reverse; } @keyframes ring-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Decorative corner marks around icon */ .teacher-hero__sigil { position: absolute; width: 20px; height: 20px; border-color: var(--gold); border-style: solid; opacity: 0.4; } .teacher-hero__sigil--tl { top: -30px; left: -30px; border-width: 2px 0 0 2px; } .teacher-hero__sigil--tr { top: -30px; right: -30px; border-width: 2px 2px 0 0; } .teacher-hero__sigil--bl { bottom: -30px; left: -30px; border-width: 0 0 2px 2px; } .teacher-hero__sigil--br { bottom: -30px; right: -30px; border-width: 0 2px 2px 0; } /* Teacher Meta Tags */ .teacher-hero__meta { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-md); } .teacher-hero__tag { font-family: var(--font-important); font-size: var(--text-2xs); letter-spacing: var(--tracking-ultra); text-transform: uppercase; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(196, 169, 98, 0.25); color: var(--earth); backdrop-filter: blur(4px); } .teacher-hero__tag--primary { background: rgba(196, 169, 98, 0.15); border-color: rgba(196, 169, 98, 0.4); color: var(--gold-deep); } /* Circulation Type Indicator */ .teacher-hero__circulation { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid rgba(196, 169, 98, 0.2); } .teacher-hero__circulation-item { /* text-align removed for left justification */ } .teacher-hero__circulation-label { font-family: var(--font-important); font-size: var(--text-2xs); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.25rem; } .teacher-hero__circulation-value { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--earth); } /* Decorative separator line with symbol */ .teacher-hero__divider { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); margin: var(--spacing-md) 0; } .teacher-hero__divider::before, .teacher-hero__divider::after { content: ''; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .teacher-hero__divider-symbol { font-family: var(--font-body); font-size: var(--text-base); color: var(--gold); opacity: 0.8; } /* Enhanced essence subtitle */ .teacher-hero__essence { font-family: var(--font-body); font-size: var(--text-md); font-style: normal; color: var(--earth); margin-bottom: var(--spacing-sm); opacity: 0.9; } /* Order indicator */ .teacher-hero__order { font-family: var(--font-important); font-size: var(--text-2xs); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); margin-bottom: var(--spacing-sm); opacity: 0.8; } /* Teacher-specific hero variations */ /* ───────────────────────────────────────────────────────────────── TEACHER HERO VARIANTS — Using the Seven Teachers Color Logic Each hero reflects the essence of its teacher through color. ───────────────────────────────────────────────────────────────── */ /* FLOOR — Terracotta earth tones */ .teacher-hero--floor { background: linear-gradient(180deg, #F2E6DC 0%, /* Pale terracotta */ #E8D5C5 40%, /* Warm clay */ #DCC4B0 100%); /* Deep earth */ } .teacher-hero--floor::before { background: radial-gradient(ellipse 80% 60% at 50% 35%, var(--floor-glow), transparent); } .teacher-hero--floor .teacher-hero__icon { color: var(--floor-primary); text-shadow: 0 0 80px var(--floor-glow); } .teacher-hero--floor .teacher-hero__descriptor { color: var(--floor-deep); } /* COLD — Steel blue, ice tones */ .teacher-hero--cold { background: linear-gradient(180deg, #EEF2F5 0%, /* Pale ice */ #E4EAEF 40%, /* Cold mist */ #D8E2EA 100%); /* Deep frost */ } .teacher-hero--cold::before { background: radial-gradient(ellipse 60% 40% at 50% 35%, var(--cold-glow), transparent); } .teacher-hero--cold .teacher-hero__icon { color: var(--cold-primary); text-shadow: 0 0 60px var(--cold-glow); } .teacher-hero--cold .teacher-hero__descriptor { color: var(--cold-deep); } /* HEAT — Ember warmth, surrendering red */ .teacher-hero--heat { background: linear-gradient(180deg, #F5EBE4 0%, /* Warm cream */ #F0E4DA 40%, /* Flushed */ #E8DAD0 100%); /* Deep warmth */ } .teacher-hero--heat::before { background: radial-gradient(ellipse 70% 50% at 50% 30%, var(--heat-glow), transparent); } .teacher-hero--heat .teacher-hero__icon { color: var(--heat-primary); text-shadow: 0 0 60px var(--heat-glow); } .teacher-hero--heat .teacher-hero__descriptor { color: var(--heat-deep); } /* DARK — Deep indigo-black, interiority */ .teacher-hero--dark { background: linear-gradient(180deg, var(--dark-primary) 0%, /* Deep indigo */ #252B3A 50%, /* Blue-black */ var(--dark-deep) 100%); /* Deepest night */ } .teacher-hero--dark::before { background: radial-gradient(ellipse 60% 40% at 50% 40%, var(--dark-glow), transparent); } .teacher-hero--dark .teacher-hero__icon { color: var(--dark-pale); text-shadow: 0 0 80px rgba(90, 100, 130, 0.4); } .teacher-hero--dark .teacher-hero__title { color: var(--cream); } .teacher-hero--dark .teacher-hero__descriptor { color: var(--silence-pale); } .teacher-hero--dark .teacher-hero__tagline { color: var(--stone); } /* SUN — Amber orange, vital fire */ .teacher-hero--sun { background: linear-gradient(180deg, #FFF8ED 0%, /* Dawn light */ #FFF2DC 40%, /* Golden hour */ #FFEACC 100%); /* Amber glow */ } .teacher-hero--sun::before { background: radial-gradient(ellipse 80% 60% at 50% 30%, var(--sun-glow), transparent); } .teacher-hero--sun .teacher-hero__icon { color: var(--sun-primary); text-shadow: 0 0 80px var(--sun-glow); } .teacher-hero--sun .teacher-hero__descriptor { color: var(--sun-deep); } /* SILENCE — Steel blue, presence */ .teacher-hero--silence { background: linear-gradient(180deg, #E8EEF2 0%, /* Pale steel */ #D8E2EA 40%, /* Cool mist */ #C8D6E0 100%); /* Deep steel */ } .teacher-hero--silence::before { background: radial-gradient(ellipse 70% 50% at 50% 35%, var(--silence-glow), transparent); } .teacher-hero--silence .teacher-hero__icon { color: var(--silence-primary); text-shadow: 0 0 80px var(--silence-glow); } .teacher-hero--silence .teacher-hero__descriptor { color: var(--silence-deep); } /* HUNGER — Pale gold clarity */ .teacher-hero--hunger { background: linear-gradient(180deg, var(--ivory) 0%, /* Pure clarity */ #FAF7EF 40%, /* Light gold mist */ var(--cream) 100%); } .teacher-hero--hunger::before { background: radial-gradient(ellipse 60% 40% at 50% 40%, var(--hunger-glow), transparent); } .teacher-hero--hunger .teacher-hero__icon { color: var(--hunger-deep); text-shadow: 0 0 60px var(--hunger-glow); } .teacher-hero--hunger .teacher-hero__descriptor { color: var(--hunger-deep); } /* EIGHTH/WITNESS — Deep violet, integration tones */ .teacher-hero--eighth { background: linear-gradient(180deg, #F5F2F8 0%, /* Pale violet mist */ #EDE8F2 40%, /* Soft lavender */ #E5DEF0 100%); /* Deep integration */ } .teacher-hero--eighth::before { background: radial-gradient(ellipse 70% 50% at 50% 40%, var(--eighth-glow), transparent); } .teacher-hero--eighth .teacher-hero__icon { color: var(--eighth-primary); text-shadow: 0 0 80px var(--eighth-glow); } .teacher-hero--eighth .teacher-hero__descriptor { color: var(--eighth-deep); } /* ───────────────────────────────────────────────────────────────── TEACHER PRINCIPLE ───────────────────────────────────────────────────────────────── */ .teacher-principle { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); position: relative; } .teacher-principle::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: linear-gradient(to bottom, var(--gold), transparent); } .principle-block { max-width: 800px; margin: 0 auto; } .principle-statement { font-family: var(--font-body); font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: var(--weight-normal); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; text-align: left; } /* ───────────────────────────────────────────────────────────────── TEACHER TEACHING ───────────────────────────────────────────────────────────────── */ .teacher-teaching { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-teaching .container { max-width: var(--max-width-narrow); } .teacher-teaching .section-title { margin-bottom: var(--spacing-xl); } .teaching-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 900px) { .teaching-grid { grid-template-columns: 1fr; } } .teaching-card { background: var(--ivory); padding: 3rem; position: relative; border: none; border-top: 2px solid var(--gold); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); transition: all 0.35s ease; } .teaching-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07); border-color: rgba(196, 169, 98, 0.25); } .teaching-card h3 { font-family: var(--font-important); font-size: clamp(1.15rem, 2vw, 1.563rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-snug); } .teaching-card p { font-family: var(--font-body); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin-bottom: var(--spacing-sm); text-align: left; } .teaching-card p:last-child { margin-bottom: 0; } .teaching-insight { font-family: var(--font-body); font-size: 1.1rem !important; font-style: normal; font-weight: var(--weight-normal); color: var(--gold-deep) !important; padding-top: 1.5rem; border-top: 1px solid rgba(196, 169, 98, 0.15); margin-top: 1.75rem !important; line-height: var(--leading-normal); } /* ───────────────────────────────────────────────────────────────── TEACHER EVIDENCE ───────────────────────────────────────────────────────────────── */ .teacher-evidence { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-evidence .container { max-width: var(--max-width-narrow); } .teacher-evidence .section-title { margin-bottom: var(--spacing-xl); } .teacher-evidence .evidence-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-xl); } .teacher-evidence .evidence-card { background: var(--ivory); padding: 2.5rem 3rem; border: 1px solid rgba(196, 169, 98, 0.15); border-top: 3px solid var(--gold); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease; } .teacher-evidence .evidence-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(196, 169, 98, 0.12); border-color: var(--gold); } .teacher-evidence .evidence-stat { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--burgundy); display: block; margin-bottom: var(--spacing-sm); line-height: var(--leading-tight); } .teacher-evidence .evidence-card-content { /* Content flows naturally */ } .teacher-evidence .evidence-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--black); display: block; margin-bottom: 0.75rem; line-height: var(--leading-normal); } .teacher-evidence .evidence-desc { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); margin-bottom: var(--spacing-sm); } .teacher-evidence .evidence-card cite { font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-deep); } /* Alternative: If no wrapper div, use flexbox fallback */ .teacher-evidence .evidence-card:not(:has(.evidence-card-content)) { display: flex; flex-direction: column; grid-template-columns: none; text-align: left; padding: var(--spacing-lg); } .teacher-evidence .evidence-card:not(:has(.evidence-card-content)) .evidence-stat { font-size: var(--text-2xl); padding: 0; background: none; border: none; justify-content: flex-start; margin-bottom: 0.75rem; } .evidence-highlight { padding: 2.5rem 3rem; background: linear-gradient(135deg, rgba(196, 169, 98, 0.08), rgba(196, 169, 98, 0.02)); border-left: 4px solid var(--gold); margin-bottom: var(--spacing-lg); } .evidence-highlight h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--gold-deep); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } .evidence-highlight p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } /* ───────────────────────────────────────────────────────────────── TEACHER MECHANISM ───────────────────────────────────────────────────────────────── */ .teacher-mechanism { background: var(--ivory); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-mechanism .container { max-width: var(--max-width-narrow); } .teacher-mechanism .section-title { margin-bottom: var(--spacing-xl); } .mechanism-content { margin-bottom: var(--spacing-xl); padding: 2.5rem 3rem; background: var(--cream); border-left: 4px solid var(--gold); position: relative; } .mechanism-content:last-child { margin-bottom: 0; } .mechanism-content h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: 1.25rem; line-height: var(--leading-snug); } .mechanism-content p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin-bottom: 1.25rem; } .mechanism-content p:last-child { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────── TEACHER PRACTICE ───────────────────────────────────────────────────────────────── */ .teacher-practice { background: var(--cream-warm); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-practice .container { max-width: var(--max-width-narrow); } .teacher-practice .section-title { margin-bottom: var(--spacing-xl); } .practice-protocol { background: var(--ivory); padding: 2.5rem 3rem; border: 1px solid rgba(196, 169, 98, 0.15); position: relative; margin-bottom: var(--spacing-lg); } .practice-protocol::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--gold), var(--gold-pale)); } .practice-protocol:last-child { margin-bottom: 0; } .practice-protocol h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: 1.5rem; padding-left: 1rem; line-height: var(--leading-snug); } .protocol-list { list-style: none; padding: 0; margin: 0; padding-left: 1rem; } .protocol-list li { position: relative; padding-left: 1.75rem; margin-bottom: var(--spacing-sm); font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); } .protocol-list li:last-child { margin-bottom: 0; } .protocol-list li::before { content: '→'; position: absolute; left: 0; color: var(--gold); font-weight: var(--weight-semibold); } /* ───────────────────────────────────────────────────────────────── PRACTICES PAGE — Category and Method Styling ───────────────────────────────────────────────────────────────── */ .practices-intro { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .practices-intro .intro-block { max-width: var(--max-width-narrow); margin: 0 auto; text-align: left; } .practices-intro .intro-block h2 { font-family: var(--font-important); font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-md); } .practices-intro .intro-block p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--earth); margin: 0; } .practice-categories { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream); } .practice-category { max-width: var(--max-width); margin: 0 auto var(--spacing-xl); background: var(--ivory); border: 1px solid var(--cream-deep); } .practice-category:last-child { margin-bottom: 0; } .practice-category__header { padding: var(--spacing-md) var(--spacing-lg); background: var(--black); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); } .practice-category__header h2 { font-family: var(--font-important); font-size: clamp(1.3rem, 2.5vw, 1.5rem); font-weight: var(--weight-medium); color: var(--ivory); margin: 0; } .mechanism-tag { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); padding: 0.4rem 0.8rem; background: rgba(196, 169, 98, 0.15); } .practice-category__content { padding: var(--spacing-lg); } .practice-intro { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--earth); margin-bottom: var(--spacing-lg); text-align: left; max-width: none; } .practice-methods { display: grid; gap: var(--spacing-md); } .practice-method { padding: 1.5rem; background: var(--cream); border-left: 3px solid var(--gold); } .practice-method h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; text-align: left; line-height: var(--leading-snug); } .practice-method p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin-bottom: 0; text-align: left; } .practice-method .practice-protocol-mini { margin-top: 0.75rem; } .practice-protocol-mini { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); padding: 0.75rem 1rem; background: var(--ivory); border-left: 2px solid var(--gold-pale); } .practice-protocol-mini strong { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-deep); } .practice-evidence { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--cream-deep); } .practice-evidence h4 { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-sm); } .practice-evidence p { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); font-style: normal; margin: 0; } /* Daily Schedule Section */ .daily-schedule { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .daily-schedule .container { max-width: var(--max-width); } /* Schedule Grid — 2-column layout for spacious daily timing cards */ .schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } @media (max-width: 600px) { .schedule-grid { grid-template-columns: 1fr; } } /* Schedule Item — Spacious card with gold accent */ .schedule-item { background: var(--ivory); padding: 1.75rem 2rem; border-left: 4px solid var(--gold); border-top: 1px solid rgba(196, 169, 98, 0.15); border-right: 1px solid rgba(196, 169, 98, 0.15); border-bottom: 1px solid rgba(196, 169, 98, 0.15); text-align: left; } .schedule-time { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.75rem; } .schedule-item h4 { font-family: var(--font-important); font-size: 1.1rem; font-weight: var(--weight-semibold); color: var(--black); margin-bottom: 0.75rem; line-height: var(--leading-snug); } .schedule-item p { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .schedule-note { margin-top: var(--spacing-md); padding: var(--spacing-md); background: rgba(114, 47, 55, 0.05); border-left: 3px solid var(--burgundy); text-align: left; } .schedule-note p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .schedule-note strong { color: var(--burgundy); } /* ───────────────────────────────────────────────────────────────── TEACHER INTEGRATION ───────────────────────────────────────────────────────────────── */ .teacher-integration { background: var(--cream-deep); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-integration .section-title { margin-bottom: var(--spacing-xl); } .integration-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 768px) { .integration-grid { grid-template-columns: 1fr; } } .integration-card { background: var(--ivory); padding: 3rem; text-align: left; border: 1px solid rgba(196, 169, 98, 0.15); border-left: 3px solid var(--gold); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .integration-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(196, 169, 98, 0.1); border-color: var(--gold); } .integration-icon { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-light); font-style: normal; color: var(--gold); display: block; margin-bottom: 1.25rem; letter-spacing: var(--tracking-ultra); } .integration-card h4 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-normal); } .integration-card p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-relaxed); margin: 0; } /* ───────────────────────────────────────────────────────────────── TEACHER CAUTIONS ───────────────────────────────────────────────────────────────── */ .teacher-cautions { background: linear-gradient(135deg, rgba(114, 47, 55, 0.03), var(--ivory)); padding: var(--spacing-xxl) var(--spacing-md); position: relative; } .teacher-cautions::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--burgundy); } .teacher-cautions .container { max-width: var(--max-width-narrow); } .teacher-cautions .section-title { margin-bottom: var(--spacing-xl); } .caution { background: var(--cream); padding: 2rem 2.5rem; margin-bottom: var(--spacing-md); border-left: 4px solid var(--burgundy); } .caution:last-child { margin-bottom: 0; } .caution h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--burgundy); margin-bottom: 0.75rem; line-height: var(--leading-normal); } .caution p { font-size: var(--text-base); color: var(--earth); line-height: var(--leading-loose); margin: 0; } /* ───────────────────────────────────────────────────────────────── TEACHER QUOTE ───────────────────────────────────────────────────────────────── */ .teacher-quote { background: var(--black); padding: var(--spacing-xxl) var(--spacing-md); position: relative; } .teacher-quote .container { max-width: var(--max-width-narrow); } .teacher-quote::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .quote-block { max-width: var(--max-width-narrow); text-align: left; position: relative; } .quote-block::before { content: ''; display: none; left: 50%; transform: translateX(-50%); line-height: 1; } .quote-block p { font-family: var(--font-body); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: var(--weight-normal); color: var(--cream); line-height: var(--leading-relaxed); margin: 0; position: relative; z-index: 1; letter-spacing: var(--tracking-tight); } /* ───────────────────────────────────────────────────────────────── TEACHER NAV SECTION — Dark charcoal cards with gold accents ───────────────────────────────────────────────────────────────── */ .teacher-nav-section { background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); padding: var(--spacing-xxl) var(--spacing-md); } .teacher-nav-section .section-title { color: var(--gold); margin-bottom: var(--spacing-xl); } /* Override the earlier .teachers-icons-grid for nav section */ .teacher-nav-section .teachers-icons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--spacing-sm); max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; } @media (max-width: 768px) { .teacher-nav-section .teachers-icons-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } .teacher-nav-section .teacher-icon { display: flex; flex-direction: column; align-items: center; /* text-align removed for left justification */ padding: 1.75rem 1.25rem; background: rgba(255, 254, 249, 0.03); text-decoration: none; border: 1px solid rgba(196, 169, 98, 0.25); border-top: 3px solid var(--gold); transition: all 0.3s ease; } .teacher-nav-section .teacher-icon:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(196, 169, 98, 0.2); border-color: var(--gold); background: rgba(196, 169, 98, 0.08); } .teacher-nav-section .teacher-icon--active { background: var(--gold); border-color: var(--gold); } .teacher-nav-section .teacher-icon--active .icon-letter, .teacher-nav-section .teacher-icon--active .icon-name { color: var(--black); } .teacher-nav-section .teacher-icon--active .icon-descriptor { color: rgba(0, 0, 0, 0.85); } .teacher-nav-section .icon-letter { font-family: var(--font-display); font-size: 2rem; font-weight: var(--weight-normal); color: var(--gold); line-height: 1; margin-bottom: 0.75rem; } .teacher-nav-section .icon-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--ivory); margin-bottom: 0.35rem; letter-spacing: var(--tracking-normal); } .teacher-nav-section .icon-descriptor { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); } /* Keep earlier definition for other contexts */ .icon-letter { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-light); font-style: normal; color: var(--gold); line-height: 1; margin-bottom: var(--spacing-xs); } .icon-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.25rem; } .icon-descriptor { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold-deep); } /* Teacher icon color variants — subtle background tints */ .teacher-icon--floor { background: linear-gradient(135deg, rgba(160, 115, 92, 0.08), var(--ivory)); border-top: 3px solid var(--floor-primary); } .teacher-icon--floor .icon-letter { color: var(--floor-primary); } .teacher-icon--floor:hover { background: rgba(160, 115, 92, 0.12); } .teacher-icon--floor.teacher-icon--active { background: var(--floor-primary); border-color: var(--floor-primary); } .teacher-icon--cold { background: linear-gradient(135deg, rgba(92, 122, 140, 0.08), var(--ivory)); border-top: 3px solid var(--cold-primary); } .teacher-icon--cold .icon-letter { color: var(--cold-primary); } .teacher-icon--cold:hover { background: rgba(92, 122, 140, 0.12); } .teacher-icon--cold.teacher-icon--active { background: var(--cold-primary); border-color: var(--cold-primary); } .teacher-icon--heat { background: linear-gradient(135deg, rgba(181, 90, 74, 0.08), var(--ivory)); border-top: 3px solid var(--heat-primary); } .teacher-icon--heat .icon-letter { color: var(--heat-primary); } .teacher-icon--heat:hover { background: rgba(181, 90, 74, 0.12); } .teacher-icon--heat.teacher-icon--active { background: var(--heat-primary); border-color: var(--heat-primary); } .teacher-icon--dark { background: linear-gradient(135deg, rgba(30, 36, 51, 0.12), var(--ivory)); border-top: 3px solid var(--dark-primary); } .teacher-icon--dark .icon-letter { color: var(--dark-pale); } .teacher-icon--dark:hover { background: rgba(30, 36, 51, 0.18); } .teacher-icon--dark.teacher-icon--active { background: var(--dark-primary); border-color: var(--dark-primary); } .teacher-icon--dark.teacher-icon--active .icon-letter, .teacher-icon--dark.teacher-icon--active .icon-name { color: var(--cream); } .teacher-icon--dark.teacher-icon--active .icon-descriptor { color: var(--stone); } .teacher-icon--sun { background: linear-gradient(135deg, rgba(212, 133, 58, 0.1), var(--ivory)); border-top: 3px solid var(--sun-primary); } .teacher-icon--sun .icon-letter { color: var(--sun-primary); } .teacher-icon--sun:hover { background: rgba(212, 133, 58, 0.15); } .teacher-icon--sun.teacher-icon--active { background: var(--sun-primary); border-color: var(--sun-primary); } .teacher-icon--silence { background: linear-gradient(135deg, rgba(107, 125, 138, 0.1), var(--ivory)); border-top: 3px solid var(--silence-primary); } .teacher-icon--silence .icon-letter { color: var(--silence-primary); } .teacher-icon--silence:hover { background: rgba(107, 125, 138, 0.15); } .teacher-icon--silence.teacher-icon--active { background: var(--silence-primary); border-color: var(--silence-primary); } .teacher-icon--hunger { background: linear-gradient(135deg, rgba(217, 201, 150, 0.15), var(--ivory)); border-top: 3px solid var(--hunger-deep); } .teacher-icon--hunger .icon-letter { color: var(--hunger-deep); } .teacher-icon--hunger:hover { background: rgba(217, 201, 150, 0.25); } .teacher-icon--hunger.teacher-icon--active { background: var(--hunger-primary); border-color: var(--hunger-primary); } .teacher-icon--eighth { background: linear-gradient(135deg, rgba(123, 107, 138, 0.08), var(--ivory)); border-top: 3px solid var(--eighth-primary); } .teacher-icon--eighth .icon-letter { color: var(--eighth-primary); } .teacher-icon--eighth:hover { background: rgba(123, 107, 138, 0.12); } .teacher-icon--eighth.teacher-icon--active { background: var(--eighth-primary); border-color: var(--eighth-primary); } /* ═══════════════════════════════════════════════════════════════ COMPREHENSIVE MOBILE OPTIMIZATION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Base Typography - Larger for Mobile */ body { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* Container — Centered with comfortable padding on mobile */ .container { margin: 0 auto; padding: 0 var(--spacing-md); } /* Hero Section */ .hero { padding-top: calc(80px + var(--spacing-lg)); padding-left: 0; padding-right: 0; } .hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); letter-spacing: var(--tracking-wide); } .hero h1 .subtitle { font-size: var(--text-sm); letter-spacing: var(--tracking-ultra); margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: 0.75rem 1rem; } .hero-thesis { font-size: var(--text-md); line-height: var(--leading-relaxed); text-align: left; } .hero-invitation { font-size: var(--text-base); text-align: left; } .hero-stakes { margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-md); max-width: 100%; } .hero-stakes__thesis { font-size: var(--text-base); line-height: var(--leading-relaxed); } .hero-conditions { gap: var(--spacing-xs); } .hero-condition { font-size: var(--text-2xs); padding: 0.4rem 0.6rem; } .hero-strapline { flex-direction: column; gap: var(--spacing-xs); font-size: var(--text-2xs); } /* Proclamation Banner */ .proclamation-banner { padding: var(--spacing-md); } .proclamation-banner__headline { font-size: var(--text-md); line-height: var(--leading-normal); } .proclamation-banner__body { font-size: var(--text-base); line-height: var(--leading-relaxed); } .proclamation-banner__kicker { font-size: var(--text-2xs); } /* Top Banner */ .top-banner { padding: var(--spacing-xs) var(--spacing-sm); } .top-banner__text { font-size: var(--text-2xs); flex-direction: column; gap: 0.25rem; text-align: left; } /* Section Titles */ .section-title { font-size: clamp(1.5rem, 6vw, 2rem); line-height: var(--leading-snug); text-align: left; } .section-label { font-size: var(--text-2xs); } .section-intro { font-size: var(--text-base); text-align: left; } /* Page Hero */ .page-hero { padding-top: calc(80px + var(--spacing-lg)); padding-left: var(--spacing-md); padding-right: var(--spacing-md); min-height: auto; } .page-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); } .page-hero__subtitle { font-size: var(--text-base); line-height: var(--leading-relaxed); text-align: left; } /* Cards */ .proof-card, .why-card, .failure-card, .solution-card, .teaching-card { padding: var(--spacing-md); } .proof-card__title, .why-card h3, .failure-card h3, .solution-card h3 { font-size: var(--text-md); } .proof-card__text, .why-card p, .failure-card p, .solution-card p { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* Definition Cards */ .definition-card { padding: var(--spacing-md); } .definition-card__term { font-size: var(--text-md); } .definition-card__text { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* Key Insights */ .key-insight { padding: var(--spacing-md); } .key-insight p { font-size: var(--text-md); line-height: var(--leading-relaxed); } /* Grids - Single Column */ .triple-proof__grid, .triple-proof__grid--four, .why-grid, .failure-grid, .solution-grid, .teaching-grid, .evidence-grid, .teachers-full-grid, .conditions-grid, .conditions-preview-grid, .begin-grid, .integration-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } /* Teacher Cards */ .teacher-full-card { padding: var(--spacing-md); } .teacher-full-card__icon { font-size: var(--text-2xl); width: 60px; height: 60px; } .teacher-full-card__name { font-size: var(--text-md); } .teacher-full-card__desc { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* Teacher Hero */ .teacher-hero { min-height: 50vh; padding: calc(80px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg); } .teacher-hero__icon { font-size: var(--text-5xl); } .teacher-hero__title { font-size: var(--text-3xl); } .teacher-hero__tagline { font-size: var(--text-base); text-align: left; } /* Teachers Icons Grid */ .teachers-icons-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } .teacher-icon { padding: var(--spacing-sm); } .icon-letter { font-size: var(--text-xl); } .icon-name { font-size: var(--text-sm); } /* Teachers Preview Grid */ .teachers-preview-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } /* Evidence Cards */ .evidence-card { padding: var(--spacing-sm); } .evidence-stat { font-size: var(--text-xl); } /* Elimination Timeline */ .elimination-timeline { gap: var(--spacing-sm); } .elimination-item { padding: var(--spacing-sm); } /* Footer */ .footer { padding: var(--spacing-lg) var(--spacing-md); } .footer__nav { flex-direction: column; gap: var(--spacing-md); text-align: left; } .footer__links { flex-wrap: wrap; justify-content: flex-start; gap: var(--spacing-sm); } .footer__teachers { text-align: left; } .footer__teacher-links { flex-wrap: wrap; justify-content: flex-start; gap: var(--spacing-sm); } .footer__credit { text-align: left; } /* Ramification Box */ .ramification-box { padding: var(--spacing-md); } .ramification-box p { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* Condition Cards */ .condition-full .condition-header { padding: var(--spacing-md); gap: var(--spacing-sm); } .condition-full .condition-number { font-size: var(--text-xl); } .condition-full .condition-header h3 { font-size: var(--text-md); } .condition-full .condition-body { padding: var(--spacing-md); } .condition-full .condition-body > p { font-size: var(--text-base); line-height: var(--leading-relaxed); } .condition-mechanism, .condition-evidence { padding: var(--spacing-md); } /* Card Padding Adjustments */ .teaching-card, .begin-card, .integration-card, .concept, .term-card { padding: var(--spacing-md); } .evidence-card { padding: var(--spacing-md); } .marker, .why-card, .ace-finding, .caution { padding: var(--spacing-md); } .ace-meaning { padding: var(--spacing-md); } .condition-preview { padding: var(--spacing-md); } } @media (max-width: 480px) { /* Extra Small Screens — Comfortable edge spacing */ .container { margin: 0 auto; padding: 0 var(--spacing-sm); } .hero h1 { font-size: var(--text-xl); } .page-hero__title { font-size: var(--text-xl); } .section-title { font-size: var(--text-lg); } .teachers-icons-grid, .teachers-preview-grid { grid-template-columns: 1fr 1fr; } .hero-stakes { padding: var(--spacing-sm); } .proclamation-banner__headline { font-size: var(--text-md); } } /* ═══════════════════════════════════════════════════════════════ BOOK CHAPTER STYLES ═══════════════════════════════════════════════════════════════ */ .chapter-hero { padding: calc(var(--spacing-xxl) + 70px) var(--spacing-md) var(--spacing-xl); border-bottom: 1px solid var(--cream-deep); background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%); /* text-align removed for left justification */ } .chapter-hero__part { font-family: var(--font-important); font-size: var(--text-xs); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--burgundy); margin-bottom: 0.75rem; } .chapter-hero__number { font-family: var(--font-display); font-size: var(--text-base); color: var(--gold); margin-bottom: 1.25rem; } .chapter-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--weight-light); line-height: var(--leading-snug); margin-bottom: 1.75rem; color: var(--black); } .chapter-hero__epigraph { font-family: var(--font-body); font-style: normal; font-size: var(--text-md); color: var(--earth); line-height: var(--leading-relaxed); } .chapter-content { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .chapter-content .container { max-width: var(--max-width-narrow); } .chapter-content h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-normal); margin: 3.5rem 0 1.75rem; color: var(--black); line-height: var(--leading-snug); } .chapter-content h2:first-child { margin-top: 0; } .chapter-content p { font-size: var(--text-base); line-height: var(--leading-loose); margin-bottom: 1.75rem; color: var(--earth); } .chapter-content p strong { color: var(--black); font-weight: var(--weight-medium); } .chapter-content blockquote { margin: 2.5rem 0; padding: 2rem 2.5rem; background: var(--cream-warm); border-left: 4px solid var(--gold); font-family: var(--font-display); font-size: var(--text-md); font-style: normal; color: var(--earth); line-height: var(--leading-relaxed); } .chapter-content blockquote p { margin-bottom: var(--spacing-sm); color: var(--earth); } .chapter-content blockquote p:last-child { margin-bottom: 0; } .chapter-content blockquote cite { display: block; margin-top: var(--spacing-sm); font-style: normal; font-size: var(--text-sm); color: var(--gold-deep); } /* Insight Table — For reframe comparisons (Intelligence Inversion chapter) */ .insight-table { display: flex; flex-direction: column; gap: var(--spacing-sm); margin: 2.5rem 0; } .insight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; background: var(--cream); border: 1px solid var(--cream-deep); transition: var(--transition); } .insight-row:hover { background: var(--ivory); border-color: rgba(196, 169, 98, 0.3); } .insight-old { color: var(--earth); padding-right: 1.5rem; border-right: 1px solid var(--cream-deep); } .insight-new { color: var(--black); padding-left: 0.5rem; } .insight-old strong, .insight-new strong { display: block; font-family: var(--font-important); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--spacing-xs); } .insight-old strong { color: var(--burgundy); } .insight-new strong { color: var(--gold-deep); } @media (max-width: 600px) { .insight-row { grid-template-columns: 1fr; gap: var(--spacing-sm); } .insight-old { border-right: none; border-bottom: 1px solid var(--cream-deep); padding-right: 0; padding-bottom: 1rem; } .insight-new { padding-left: 0; } } .chapter-nav { padding: var(--spacing-lg) var(--spacing-md); background: var(--cream); border-top: 1px solid var(--cream-deep); } .chapter-nav__links { display: flex; justify-content: space-between; max-width: var(--max-width-narrow); margin: 0 auto; } .chapter-nav__link { font-family: var(--font-important); font-size: var(--text-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-deep); text-decoration: none; border: none; transition: color 0.3s ease; } .chapter-nav__link:hover { color: var(--gold); } .chapter-nav__link--disabled { opacity: 0.4; pointer-events: none; } @media (max-width: 768px) { .chapter-hero { padding: calc(80px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg); } .chapter-content { padding: var(--spacing-lg) var(--spacing-md); } .chapter-content blockquote { padding: var(--spacing-md); margin: var(--spacing-md) 0; } } /* ═══════════════════════════════════════════════════════════════════════════ BOOK SECTION — ELEGANT ENHANCEMENTS Museum-quality typography and layout for long-form reading ═══════════════════════════════════════════════════════════════════════════ */ /* Chapter Meta Card — Reading time, themes, related chapters */ .chapter-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2.5rem 0 3rem; padding: var(--spacing-md); background: linear-gradient(135deg, var(--cream) 0%, var(--cream-warm) 100%); border: 1px solid rgba(196, 169, 98, 0.2); border-top: 3px solid var(--gold); } .chapter-meta__item { /* text-align removed for left justification */ padding: 0.75rem; } .chapter-meta__label { display: block; font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .chapter-meta__value { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); } /* Key Concept Callout */ .key-concept { margin: 2.5rem 0; padding: 2rem 2.5rem; background: linear-gradient(135deg, rgba(30, 95, 95, 0.08) 0%, rgba(30, 95, 95, 0.03) 100%); border-left: 4px solid var(--teal); position: relative; } .key-concept::before { content: 'Key Concept'; position: absolute; top: -0.75rem; left: 2rem; font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--teal); background: var(--ivory); padding: 0.25rem 0.75rem; } .key-concept p { margin: 0; font-size: 1.05rem; line-height: var(--leading-relaxed); color: var(--earth); } .key-concept p strong { color: var(--teal-deep); } /* Pull Quote — Dramatic extracted text */ .pull-quote { margin: 3rem -2rem; padding: 2.5rem 3rem; background: var(--cream-warm); border-top: 1px solid rgba(196, 169, 98, 0.2); border-bottom: 1px solid rgba(196, 169, 98, 0.2); /* text-align removed for left justification */ } .pull-quote p { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-normal); line-height: var(--leading-relaxed); color: var(--black); margin: 0; } .pull-quote p::before { content: '"'; color: var(--gold); } .pull-quote p::after { content: '"'; color: var(--gold); } /* Drop Cap for Chapter Opening */ .chapter-content > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 4rem; line-height: 0.8; padding-right: 0.75rem; padding-top: 0.25rem; color: var(--burgundy); } /* Chapter Lists — Elegant styling */ .chapter-content ul, .chapter-content ol { margin: 1.5rem 0 2rem; padding-left: 1.5rem; } .chapter-content li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin-bottom: 0.75rem; padding-left: 0.5rem; } .chapter-content li::marker { color: var(--gold); } /* Section Divider */ .section-divider { display: flex; align-items: center; justify-content: center; margin: 3rem 0; gap: 1.5rem; } .section-divider::before, .section-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-pale), transparent); } .section-divider span { font-family: var(--font-display); font-size: var(--text-md); color: var(--gold); } /* Chapter Footer Navigation */ .chapter-footer { margin-top: var(--spacing-lg); padding-top: 2.5rem; border-top: 1px solid rgba(196, 169, 98, 0.2); } .chapter-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .chapter-footer__link { padding: 1.5rem; background: var(--cream); border: 1px solid rgba(196, 169, 98, 0.15); text-decoration: none; transition: all 0.3s ease; } .chapter-footer__link:hover { background: var(--cream-warm); border-color: var(--gold); transform: translateY(-2px); } .chapter-footer__link--prev { text-align: left; } .chapter-footer__link--next { text-align: right; } .chapter-footer__direction { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .chapter-footer__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--black); } /* Book Table of Contents Styling */ .book-toc { padding: var(--spacing-xl) 0; background: var(--ivory); } .book-toc .container { max-width: var(--max-width); } .toc-part { margin-bottom: 3rem; } .toc-part__header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(196, 169, 98, 0.2); } .toc-part__number { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--burgundy); } .toc-part__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-normal); color: var(--black); letter-spacing: var(--tracking-normal); } /* TOC Part Variants */ .toc-part--eighth { border-top: 3px solid var(--eighth-primary); } .toc-part--eighth .toc-part__number { color: var(--eighth-primary); } /* TOC Part Description */ .toc-part__description { margin-top: var(--spacing-sm); padding: 0 var(--spacing-sm); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); } /* TOC Chapter Cards — Progressive Disclosure */ .toc-chapters { display: flex; flex-direction: column; gap: var(--spacing-xs); } .toc-chapter { display: grid; grid-template-columns: 3.5rem 1fr auto; grid-template-rows: auto auto; gap: 0 1.25rem; align-items: start; padding: 1.25rem 1.5rem; background: var(--cream); border: 1px solid transparent; border-radius: 0.25rem; text-decoration: none; transition: all 0.3s ease; } .toc-chapter:hover, .toc-chapter:focus { background: var(--cream-warm); border-color: rgba(196, 169, 98, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .toc-chapter__number { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--weight-normal); color: var(--gold); grid-row: 1; padding-top: 0.1rem; } .toc-chapter__info { display: flex; flex-direction: column; gap: 0; grid-column: 2; grid-row: 1 / 3; } .toc-chapter__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--weight-normal); color: var(--black); letter-spacing: var(--tracking-tight); transition: color 0.3s ease; } .toc-chapter:hover .toc-chapter__title { color: var(--gold-deep); } /* Preview — hidden by default, revealed on hover */ .toc-chapter__preview { font-family: var(--font-body); font-size: 0.9rem; color: var(--earth); line-height: 1.6; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; margin-top: 0; } .toc-chapter:hover .toc-chapter__preview, .toc-chapter:focus .toc-chapter__preview { max-height: 4rem; opacity: 1; margin-top: 0.5rem; } .toc-chapter__meta { display: flex; gap: var(--spacing-sm); align-items: center; grid-column: 3; grid-row: 1; } .toc-chapter__reading-time { font-family: var(--font-important); font-size: 0.65rem; font-weight: var(--weight-medium); letter-spacing: 0.08em; color: var(--clay-readable); padding: 0.3rem 0.6rem; background: rgba(196, 169, 98, 0.12); border-radius: 0.2rem; white-space: nowrap; } .toc-chapter__status { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 0.35rem 0.75rem; } .toc-chapter__status--live { background: rgba(30, 95, 95, 0.12); color: var(--teal); } .toc-chapter__status--draft { background: rgba(196, 169, 98, 0.15); color: var(--gold-deep); } /* Touch devices & mobile: always show full preview */ @media (hover: none), (max-width: 768px) { .toc-chapter__preview { max-height: none; opacity: 1; margin-top: 0.4rem; overflow: visible; } } @media (max-width: 768px) { .chapter-meta { grid-template-columns: 1fr 1fr; padding: 1.5rem; } .pull-quote { margin: 2rem -1rem; padding: 2rem 1.5rem; } .pull-quote p { font-size: var(--text-md); } .chapter-footer__nav { grid-template-columns: 1fr; } .toc-chapter { grid-template-columns: 2.5rem 1fr; gap: 0.75rem; padding: var(--spacing-sm); } .toc-chapter__info { grid-row: 1; } .toc-chapter__meta { grid-column: 2; grid-row: 2; margin-top: 0.75rem; } .toc-chapter__preview { font-size: 0.85rem; margin-top: 0.5rem; } .toc-chapter__reading-time { font-size: 0.6rem; padding: 0.25rem 0.5rem; } } /* ═══════════════════════════════════════════════════════════════ BOOK COVER — Fitzcarraldo meets the Bible Full-viewport title page with gold flourishes on dark binding ═══════════════════════════════════════════════════════════════ */ .book-cover { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-xl) var(--spacing-md); background: var(--black); position: relative; overflow: hidden; } /* Subtle texture overlay */ .book-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 168, 85, 0.03), transparent), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(196, 168, 85, 0.02), transparent); pointer-events: none; } .book-cover__inner { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 0; } /* Gold flourish — top ornament */ .book-cover__flourish { color: var(--gold); font-size: 1.5rem; margin-bottom: var(--spacing-lg); opacity: 0.7; letter-spacing: 1rem; } /* Edition marker */ .book-cover__edition { font-family: var(--font-important); font-size: var(--text-xs); letter-spacing: var(--tracking-extreme); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-md); } /* Decorative rule — gold line */ .book-cover__rule { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: var(--spacing-md) 0; opacity: 0.6; } .book-cover__rule--long { width: 120px; } /* Main title */ .book-cover__title { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: var(--weight-normal); line-height: 1; color: var(--gold); letter-spacing: var(--tracking-widest); margin: var(--spacing-sm) 0; text-shadow: 0 0 60px rgba(196, 168, 85, 0.3); } /* Section symbol inline with title */ .book-cover__section { color: var(--gold); text-shadow: 0 0 20px rgba(196, 169, 98, 0.4); } /* Section symbol as devotional mark (legacy) */ .book-cover__symbol { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 6rem); color: var(--gold); opacity: 0.4; margin: var(--spacing-md) 0; line-height: 1; } /* Subtitle */ .book-cover__subtitle { font-family: var(--font-body); font-size: clamp(0.9rem, 2.5vw, 1.1rem); font-weight: var(--weight-light); color: var(--cream-warm); letter-spacing: var(--tracking-wide); line-height: var(--leading-relaxed); max-width: 400px; margin-top: var(--spacing-md); opacity: 0.85; } /* Scroll indicator */ .book-cover__scroll { position: absolute; bottom: var(--spacing-lg); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); color: var(--gold-deep); opacity: 0.5; font-family: var(--font-important); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; animation: pulse-subtle 3s ease-in-out infinite; } .book-cover__scroll-arrow { font-size: 1.25rem; animation: bounce-subtle 2s ease-in-out infinite; } @keyframes pulse-subtle { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Staggered fade-in animations for cover elements */ .book-cover__flourish { animation: fade-in-up 1.2s ease-out 0.2s both; } .book-cover__edition { animation: fade-in-up 1s ease-out 0.5s both; } .book-cover__rule { animation: fade-in-scale 1s ease-out 0.7s both; } .book-cover__title { animation: fade-in-up 1.2s ease-out 0.9s both; } .book-cover__symbol { animation: fade-in-up 1.5s ease-out 1.2s both; } .book-cover__rule--long { animation: fade-in-scale 1s ease-out 1.5s both; } .book-cover__subtitle { animation: fade-in-up 1s ease-out 1.7s both; } .book-cover__scroll { animation: fade-in-up 1s ease-out 2.2s both; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-scale { from { opacity: 0; transform: scaleX(0); } to { opacity: 0.6; transform: scaleX(1); } } /* Mobile adjustments */ @media (max-width: 768px) { .book-cover { padding: calc(var(--spacing-xl) + 60px) var(--spacing-sm) var(--spacing-lg); } .book-cover__flourish { letter-spacing: 0.5rem; font-size: 1.25rem; margin-top: var(--spacing-md); } .book-cover__scroll { bottom: var(--spacing-md); } } /* Book Index Hero (now secondary, below cover) */ .book-hero { padding: var(--spacing-xl) var(--spacing-md); /* text-align removed for left justification */ border-bottom: 1px solid var(--cream-deep); background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%); } .book-hero__edition { font-family: var(--font-important); font-size: var(--text-xs); letter-spacing: var(--tracking-extreme); text-transform: uppercase; color: var(--burgundy); margin-bottom: 1.25rem; } .book-hero__title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: var(--weight-light); line-height: var(--leading-tight); margin-bottom: 0.75rem; color: var(--black); letter-spacing: var(--tracking-wide); } .book-hero__subtitle { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: var(--weight-normal); color: var(--earth); margin-bottom: 2.5rem; } .book-hero__note { font-size: var(--text-sm); color: var(--earth); max-width: 600px; margin: 0 auto; line-height: var(--leading-loose); } /* Book Table of Contents */ .toc { padding: var(--spacing-xl) 0; background: var(--ivory); } .toc-preface { max-width: 700px; margin: 0 auto var(--spacing-xl); padding: 2.5rem 3rem; background: var(--cream-warm); border-left: 4px solid var(--gold); } .toc-preface h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-medium); margin-bottom: 1.25rem; color: var(--black); } .toc-preface p { color: var(--earth); line-height: var(--leading-loose); margin-bottom: 1.25rem; } .toc-preface p:last-child { margin-bottom: 0; } /* TOC Appendix */ .toc-appendix { margin-top: var(--spacing-lg); padding-top: 2.5rem; border-top: 1px solid var(--cream-deep); } .toc-appendix__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-normal); margin-bottom: 1.5rem; color: var(--black); } /* ═══════════════════════════════════════════════════════════════ APPENDIX PAGE ═══════════════════════════════════════════════════════════════ */ .appendix-hero { background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); padding: calc(100px + var(--spacing-xl)) var(--spacing-md) var(--spacing-xl); /* text-align removed for left justification */ } .appendix-hero__title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--weight-normal); color: var(--black); margin-bottom: var(--spacing-sm); line-height: var(--leading-snug); } .appendix-hero__subtitle { font-family: var(--font-body); font-size: var(--text-md); color: var(--earth); max-width: 500px; margin: 0 auto; } .appendix-content { background: var(--ivory); padding: var(--spacing-xl) var(--spacing-md); } /* Protocol Sections */ .protocol-section { max-width: 700px; margin: 0 auto var(--spacing-xl); background: var(--cream); border: 1px solid var(--cream-deep); overflow: hidden; } .protocol-section__header { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); border-bottom: 3px solid var(--gold); } .protocol-section__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--gold); border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); flex-shrink: 0; } .protocol-section__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-normal); color: var(--cream); margin: 0; flex-grow: 1; } .protocol-section__type { font-family: var(--font-important); font-size: var(--text-2xs); letter-spacing: var(--tracking-ultra); text-transform: uppercase; color: var(--gold); background: rgba(196, 169, 98, 0.15); padding: 0.35rem 0.75rem; border: 1px solid rgba(196, 169, 98, 0.3); } .protocol-card { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--cream-deep); } .protocol-card:last-child { border-bottom: none; } .protocol-card h4 { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--black); margin-bottom: var(--spacing-sm); } .protocol-card ul { margin: 0; padding-left: 1.25rem; } .protocol-card li { font-family: var(--font-body); font-size: var(--text-sm); color: var(--earth); line-height: var(--leading-relaxed); margin-bottom: var(--spacing-xs); } .protocol-card li:last-child { margin-bottom: 0; } @media (max-width: 768px) { .protocol-section__header { flex-wrap: wrap; padding: var(--spacing-md); } .protocol-section__type { width: 100%; /* text-align removed for left justification */ margin-top: var(--spacing-xs); } } /* Book Meta Footer */ .book-meta { padding: var(--spacing-lg) 0; border-top: 1px solid var(--cream-deep); /* text-align removed for left justification */ background: var(--cream); } .book-meta p { color: var(--earth); font-size: var(--text-sm); margin-bottom: var(--spacing-xs); line-height: var(--leading-relaxed); } /* TOC Unavailable State */ .toc-chapter--unavailable { opacity: 0.5; pointer-events: none; } @media (max-width: 768px) { .book-hero { padding: calc(80px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg); } .toc-preface { padding: var(--spacing-md); } .toc-part__header { flex-direction: column; gap: var(--spacing-xs); } } /* ═══════════════════════════════════════════════════════════════════════════ EVIDENCE PAGE — ENHANCED SECTIONS Unified Conditions, Channel Evidence, Procedural Memory ═══════════════════════════════════════════════════════════════════════════ */ /* Unified Conditions Section */ .unified-conditions { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .unified-conditions .container { max-width: var(--max-width-narrow); } .unified-intro { margin-bottom: var(--spacing-lg); text-align: left; } .unified-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .condition-signatures { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .condition-signature { background: var(--cream); padding: 2.5rem 3rem; border: 1px solid var(--cream-deep); transition: border-color 0.3s ease; } .condition-signature:hover { border-color: var(--gold-muted); } .condition-signature h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-sm); padding-bottom: 0.75rem; border-bottom: 1px solid var(--cream-deep); } .condition-signature ul { list-style: none; padding: 0; margin: 0; } .condition-signature li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); padding: 0.35rem 0; } .condition-signature li strong { color: var(--black); font-family: var(--font-important); font-weight: var(--weight-medium); } .signature-source { font-family: var(--font-important); font-size: var(--text-xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: var(--spacing-sm); padding-top: 0.75rem; border-top: 1px solid var(--cream-deep); } /* ACE Section Enhancements */ .ace-stat__source { font-family: var(--font-important); font-size: var(--text-2xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: 0.75rem; } .ace-pathway { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--cream-deep); } .ace-pathway h3 { font-family: var(--font-important); font-size: var(--text-lg); color: var(--black); margin-bottom: var(--spacing-md); } .pathway-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); max-width: var(--max-width-narrow); margin: 0 auto; } .pathway-item { background: var(--ivory); padding: 2rem 2.5rem; border-left: 3px solid var(--gold); } .pathway-condition { display: block; font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 0.75rem; } .pathway-item p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Channel Evidence Section */ .channel-intro { margin-bottom: var(--spacing-lg); text-align: left; } .channel-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .channel-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .channel-card { background: var(--cream); border: 1px solid var(--cream-deep); transition: all 0.3s ease; } .channel-card:hover { border-color: var(--gold-muted); transform: translateY(-2px); } .channel-header { background: var(--black); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .channel-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ivory); } .channel-teacher { font-family: var(--font-important); font-size: var(--text-2xs); color: var(--gold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); } .channel-research { padding: 1.5rem; } .research-item { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cream-deep); } .research-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .research-citation { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--spacing-xs); } .research-finding { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .channel-mechanism { background: var(--ivory); padding: var(--spacing-sm); margin-top: var(--spacing-sm); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); } .channel-mechanism strong { color: var(--black); } /* Procedural Memory Section */ .procedural-memory { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .procedural-memory .container { max-width: var(--max-width-narrow); } .memory-intro { margin-bottom: var(--spacing-lg); text-align: left; } .memory-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .memory-systems { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .memory-system { background: var(--cream); padding: 2.5rem 3rem; border: 1px solid var(--cream-deep); } .memory-system h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; } .memory-description { font-size: var(--text-sm); color: var(--gold-deep); margin-bottom: var(--spacing-sm); padding-bottom: 0.75rem; border-bottom: 1px solid var(--cream-deep); } .memory-system ul { list-style: none; padding: 0; margin: 0 0 1rem 0; } .memory-system li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); padding: 0.25rem 0; padding-left: 1rem; position: relative; } .memory-system li::before { content: "—"; position: absolute; left: 0; color: var(--gold); } .memory-access { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--cream-deep); font-size: var(--text-sm); } .memory-access strong { color: var(--gold-deep); } /* Encoding Problem */ .encoding-problem { max-width: var(--max-width); margin: 0 auto; } .encoding-problem h3 { font-family: var(--font-important); font-size: var(--text-lg); color: var(--black); margin-bottom: var(--spacing-md); } .encoding-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 1000px) { .encoding-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .encoding-grid { grid-template-columns: 1fr; } } .encoding-item { background: var(--cream); padding: 1.5rem; border-top: 3px solid var(--gold); } .encoding-label { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 0.75rem; } .encoding-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Verification Table Section Header */ .table-section-header td { background: var(--cream-deep) !important; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--black); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: 0.75rem 1rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ HPA AXIS COLLAPSE SECTION ═══════════════════════════════════════════════════════════════════════════ */ .hpa-collapse { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .hpa-collapse .container { max-width: var(--max-width-narrow); } .hpa-intro { margin-bottom: var(--spacing-lg); text-align: left; } .hpa-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .phase-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-xl); } .phase-card { background: var(--cream); padding: 2.5rem 3rem; border: 1px solid var(--cream-deep); position: relative; } .phase-card--1 { border-top: 4px solid var(--burgundy); } .phase-card--2 { border-top: 4px solid var(--copper); } .phase-card--3 { border-top: 4px solid var(--earth); } .phase-number { font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-ultra); color: var(--gold-deep); margin-bottom: 0.75rem; } .phase-card h3 { font-family: var(--font-important); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 1.25rem; } .phase-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .phase-card li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); padding: 0.4rem 0; } .phase-description { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); padding-top: 1.25rem; border-top: 1px solid var(--cream-deep); margin: 0; } .hpa-research { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .hpa-finding { background: var(--cream); padding: 1.5rem; border-left: 3px solid var(--gold); } .hpa-finding h4 { font-family: var(--font-display); font-size: var(--text-md); color: var(--black); margin-bottom: 0.75rem; } .hpa-finding p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .research-source { font-family: var(--font-important); font-size: var(--text-2xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: 0.75rem; } /* ═══════════════════════════════════════════════════════════════════════════ CELL DANGER RESPONSE SECTION ═══════════════════════════════════════════════════════════════════════════ */ .cell-danger { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .cell-danger .container { max-width: var(--max-width-narrow); } .cdr-intro { margin-bottom: var(--spacing-lg); text-align: left; } .cdr-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .cdr-content { max-width: var(--max-width); margin: 0 auto; } .cdr-hypothesis, .cdr-reframe, .cdr-validation { background: var(--cream); padding: var(--spacing-md); margin-bottom: 1.5rem; border: 1px solid var(--cream-deep); } .cdr-hypothesis h3, .cdr-reframe h3, .cdr-validation h3 { font-family: var(--font-important); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-sm); } .cdr-hypothesis p, .cdr-validation p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .reframe-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); } .reframe-item { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--ivory); border-left: 3px solid var(--gold); } .reframe-concept { font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .reframe-old { font-size: var(--text-sm); color: var(--clay-readable); text-decoration: line-through; opacity: 0.9; } .reframe-old::before { content: "Was: "; font-weight: var(--weight-medium); text-decoration: none; display: inline; } .reframe-new { font-size: var(--text-base); color: var(--black); font-weight: var(--weight-medium); line-height: var(--leading-relaxed); } .reframe-new::before { content: "Now: "; color: var(--gold-deep); font-weight: var(--weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════════ BRAIN CHANGES SECTION ═══════════════════════════════════════════════════════════════════════════ */ .brain-changes { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream); } .brain-changes .container { max-width: var(--max-width-narrow); } .brain-intro { margin-bottom: var(--spacing-lg); text-align: left; } .brain-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .brain-studies { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .brain-study { background: var(--ivory); padding: 2.5rem 3rem; border: 1px solid var(--cream-deep); } .brain-study h3 { font-family: var(--font-important); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-xs); } .study-type { font-family: var(--font-important); font-size: var(--text-2xs); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--spacing-sm); } .brain-study p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .brain-study ul { list-style: none; padding: 0; margin: 0.75rem 0 0 0; } .brain-study li { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); padding: 0.2rem 0; padding-left: 1rem; position: relative; } .brain-study li::before { content: "+"; position: absolute; left: 0; color: var(--gold); font-weight: var(--weight-semibold); } .practice-timeline { max-width: var(--max-width); margin: 0 auto; } .practice-timeline h3 { font-family: var(--font-important); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-md); } .timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .timeline-grid { grid-template-columns: 1fr; } } .timeline-item { /* text-align removed for left justification */ padding: 1.5rem; background: var(--ivory); border-top: 3px solid var(--gold); } .timeline-duration { display: block; font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--gold-deep); margin-bottom: var(--spacing-xs); } .timeline-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ INTEROCEPTION SECTION ═══════════════════════════════════════════════════════════════════════════ */ .interoception-section { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .interoception-section .container { max-width: var(--max-width-narrow); } .interoception-intro { margin-bottom: var(--spacing-lg); text-align: left; } .interoception-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .interoception-content { max-width: var(--max-width); margin: 0 auto; } .interoception-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .interoception-item { background: var(--cream); padding: 2rem 2.5rem; border: 1px solid var(--cream-deep); } .interoception-item h4 { font-family: var(--font-display); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-xs); } .interoception-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .interoception-finding, .interoception-evidence { background: var(--cream); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--cream-deep); } .interoception-finding h4, .interoception-evidence h4 { font-family: var(--font-display); font-size: var(--text-md); color: var(--black); margin-bottom: 0.75rem; } .interoception-finding p, .interoception-evidence p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0 0 0.5rem 0; } .evidence-mechanism { padding-top: 0.75rem; border-top: 1px solid var(--cream-deep); margin-top: 0.75rem; font-style: normal; } /* ═══════════════════════════════════════════════════════════════════════════ INTELLIGENCE INVERSION SECTION ═══════════════════════════════════════════════════════════════════════════ */ .intelligence-inversion { padding: var(--spacing-xl) var(--spacing-md); background: var(--black); color: var(--ivory); } .intelligence-inversion .container { max-width: var(--max-width-narrow); } .intelligence-inversion .section-label { color: var(--gold); } .intelligence-inversion .section-title { color: var(--ivory); } .inversion-intro { margin-bottom: var(--spacing-lg); text-align: left; } .inversion-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ivory); } .inversion-intro p strong { color: var(--gold); font-weight: var(--weight-semibold); } .intelligence-inversion .inversion-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .intelligence-inversion .inversion-item { background: rgba(255, 254, 249, 0.05); padding: 2rem 2.5rem; border: 1px solid rgba(196, 169, 98, 0.2); } .intelligence-inversion .inversion-item h4 { font-family: var(--font-display); font-size: var(--text-md); color: var(--gold); margin-bottom: var(--spacing-xs); } .intelligence-inversion .inversion-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ivory); margin: 0; } .inversion-synthesis { margin-bottom: var(--spacing-lg); text-align: left; } .inversion-synthesis p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ivory); font-style: normal; } .intelligence-inversion .key-insight { background: rgba(196, 169, 98, 0.1); border-color: rgba(196, 169, 98, 0.3); } .intelligence-inversion .key-insight p { color: rgba(255, 254, 249, 0.9); } /* ═══════════════════════════════════════════════════════════════════════════ EPIGENETIC MECHANISM SECTION ═══════════════════════════════════════════════════════════════════════════ */ .epigenetic-mechanism { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--cream-deep); } .epigenetic-mechanism h3 { font-family: var(--font-important); font-size: var(--text-md); color: var(--black); margin-bottom: var(--spacing-md); } .mechanism-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto; } .mechanism-item { background: var(--ivory); padding: 2rem 2.5rem; border-left: 3px solid var(--gold); } .mechanism-item h4 { font-family: var(--font-important); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gold-deep); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--spacing-xs); } .mechanism-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ THESIS PAGE — NEW SECTIONS Carnival, DMN, Peaks, Psoas ═══════════════════════════════════════════════════════════════════════════ */ /* Carnival / Historical Elimination */ .thesis-carnival { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .thesis-carnival .elimination-timeline { max-width: var(--max-width-narrow); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } .elimination-era { background: var(--cream); padding: 2.5rem 3rem; border: 1px solid var(--cream-deep); position: relative; } .elimination-date { display: block; font-family: var(--font-important); font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--burgundy); text-transform: uppercase; letter-spacing: var(--tracking-ultra); margin-bottom: var(--spacing-xs); } .elimination-era h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; } .elimination-era p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } .elimination-era--now { background: var(--black); border-color: var(--burgundy); } .elimination-era--now .elimination-date { color: var(--burgundy); } .elimination-era--now h3 { color: var(--ivory); } .elimination-era--now p { color: rgba(255, 254, 249, 0.8); } /* DMN Section */ .thesis-dmn { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .dmn-convergence { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .convergence-item { background: var(--cream); padding: 2rem 2.5rem; border: 1px solid var(--cream-deep); border-left: 3px solid var(--gold); } .convergence-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .convergence-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Peaks / State-Dependent Memory */ .thesis-peaks { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream); } .peaks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 768px) { .peaks-grid { grid-template-columns: 1fr; } } .peaks-item { background: var(--ivory); padding: var(--spacing-md); border: 1px solid var(--cream-deep); } .peaks-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; } .peaks-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Psoas Section */ .thesis-psoas { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .psoas-insight { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 900px) { .psoas-insight { grid-template-columns: 1fr; } } .psoas-item { background: var(--cream); padding: 1.5rem; border: 1px solid var(--cream-deep); } .psoas-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .psoas-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ EVIDENCE PAGE — MATHEMATICS & BOREDOM SECTIONS ═══════════════════════════════════════════════════════════════════════════ */ /* Mathematics Section */ .mathematics-section { padding: var(--spacing-xl) var(--spacing-md); background: var(--black); color: var(--ivory); } .mathematics-section .section-label { color: var(--gold); } .mathematics-section .section-title { color: var(--ivory); } .math-comparison { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 900px) { .math-comparison { flex-direction: column; gap: var(--spacing-md); } } .math-item { flex: 1; max-width: 320px; padding: var(--spacing-md); text-align: left; } .math-item--gym { background: rgba(255, 254, 249, 0.05); border: 1px solid rgba(255, 254, 249, 0.1); } .math-item--floor { background: rgba(196, 169, 98, 0.1); border: 1px solid rgba(196, 169, 98, 0.3); } .math-number { display: block; font-family: var(--font-important); font-size: var(--text-4xl); font-weight: var(--weight-light); color: var(--gold); line-height: 1; margin-bottom: 0.25rem; } .math-unit { display: block; font-family: var(--font-important); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ivory); text-transform: uppercase; letter-spacing: var(--tracking-ultra); margin-bottom: var(--spacing-sm); opacity: 0.8; } .math-description { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ivory); margin-bottom: var(--spacing-sm); } .math-qualities { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255, 254, 249, 0.1); padding-top: 1rem; } .math-qualities li { font-size: var(--text-sm); color: var(--ivory); padding: 0.2rem 0; } .math-vs { font-family: var(--font-important); font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--gold); } @media (max-width: 900px) { .math-vs { transform: rotate(90deg); } } .mathematics-section .key-insight { background: rgba(196, 169, 98, 0.1); border-color: rgba(196, 169, 98, 0.3); } .mathematics-section .key-insight p { color: rgba(255, 254, 249, 0.9); } /* Boredom Section */ .boredom-section { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .boredom-intro { max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); text-align: left; } .boredom-intro p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--earth); } .boredom-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto; } @media (max-width: 900px) { .boredom-data { grid-template-columns: 1fr; } } .boredom-finding { background: var(--cream); padding: var(--spacing-md); border: 1px solid var(--cream-deep); } .boredom-finding h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; } .boredom-finding p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0 0 0.5rem 0; } .boredom-finding p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ THESIS PAGE — ADDITIONAL SECTIONS Vagal Master, Threshold Fear, Ambient Trauma, Watched Self ═══════════════════════════════════════════════════════════════════════════ */ /* Vagal Tone as Master Variable */ .thesis-vagal-master { padding: var(--spacing-xl) var(--spacing-md); background: var(--black); color: var(--ivory); } .thesis-vagal-master .section-label { color: var(--gold); } .thesis-vagal-master .section-title { color: var(--ivory); } .vagal-definition { font-family: var(--font-body); font-size: var(--text-md); color: rgba(255, 254, 249, 0.85); line-height: var(--leading-loose); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); /* text-align removed for left justification */ } .vagal-contrast { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--max-width-narrow); margin: 0 auto var(--spacing-lg); } .vagal-state { padding: 2.5rem 3rem; } .vagal-state--high { background: rgba(196, 169, 98, 0.1); border: 1px solid rgba(196, 169, 98, 0.3); } .vagal-state--low { background: rgba(255, 254, 249, 0.05); border: 1px solid rgba(255, 254, 249, 0.1); } .vagal-state h3 { font-family: var(--font-important); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ivory); margin-bottom: var(--spacing-sm); } .vagal-state ul { list-style: none; padding: 0; margin: 0; } .vagal-state li { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255, 254, 249, 0.8); padding: 0.3rem 0; padding-left: 1.25rem; position: relative; } .vagal-state--high li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); } .vagal-state--low li::before { content: "×"; position: absolute; left: 0; color: var(--ivory); } .thesis-vagal-master .ramification-box { background: rgba(196, 169, 98, 0.1); border-color: rgba(196, 169, 98, 0.3); } .thesis-vagal-master .ramification-box__label { color: var(--gold); } .thesis-vagal-master .ramification-box p { color: var(--ivory); } .thesis-vagal-master .key-insight { background: rgba(196, 169, 98, 0.1); border-color: rgba(196, 169, 98, 0.3); } .thesis-vagal-master .key-insight p { color: rgba(255, 254, 249, 0.9); } /* Threshold Fear Section */ .thesis-threshold { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream-warm); } .threshold-emergence { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 900px) { .threshold-emergence { grid-template-columns: 1fr; } } .threshold-item { background: var(--cream); padding: 1.5rem; border: 1px solid var(--cream-deep); } .threshold-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .threshold-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Ambient Trauma Section */ .thesis-ambient { padding: var(--spacing-xl) var(--spacing-md); background: var(--ivory); } .ambient-mechanism { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 900px) { .ambient-mechanism { grid-template-columns: 1fr; } } .ambient-item { background: var(--cream); padding: 1.5rem; border: 1px solid var(--cream-deep); } .ambient-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: var(--spacing-xs); } .ambient-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* Watched Self Section */ .thesis-watched { padding: var(--spacing-xl) var(--spacing-md); background: var(--cream); } .watched-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: var(--max-width); margin: 0 auto var(--spacing-lg); } @media (max-width: 768px) { .watched-grid { grid-template-columns: 1fr; } } .watched-item { background: var(--ivory); padding: var(--spacing-md); border: 1px solid var(--cream-deep); } .watched-item h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--black); margin-bottom: 0.75rem; } .watched-item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--earth); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PRACTICE POPUP SYSTEM Interactive tags that expand to show how-to guidance ═══════════════════════════════════════════════════════════════════════════ */ /* Practice Tag — Inline clickable element */ .practice-tag { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.6em; background: rgba(117, 51, 63, 0.1); border: 1px solid rgba(117, 51, 63, 0.25); border-radius: 0.35em; font-size: 0.9em; font-weight: 500; color: #75333F; cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .practice-tag::before { content: '◈'; font-size: 0.75em; opacity: 0.7; } .practice-tag:hover { background: rgba(117, 51, 63, 0.15); border-color: rgba(117, 51, 63, 0.4); transform: translateY(-1px); } .practice-tag:active { transform: translateY(0); } /* Practice Tag Variants — Colors for light backgrounds */ .practice-tag--floor { background: rgba(120, 113, 108, 0.1); border-color: rgba(120, 113, 108, 0.25); color: #57534e; } .practice-tag--floor::before { content: '⬡'; } .practice-tag--floor:hover { background: rgba(120, 113, 108, 0.15); border-color: rgba(120, 113, 108, 0.4); } .practice-tag--cold { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.25); color: #1d4ed8; } .practice-tag--cold::before { content: '❄'; } .practice-tag--cold:hover { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.4); } .practice-tag--heat { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.25); color: #b91c1c; } .practice-tag--heat::before { content: '♨'; } .practice-tag--heat:hover { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.4); } .practice-tag--sun { background: rgba(180, 120, 20, 0.1); border-color: rgba(180, 120, 20, 0.25); color: #92610a; } .practice-tag--sun::before { content: '☀'; } .practice-tag--sun:hover { background: rgba(180, 120, 20, 0.15); border-color: rgba(180, 120, 20, 0.4); } .practice-tag--dark { background: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.25); color: #4338ca; } .practice-tag--dark::before { content: '●'; } .practice-tag--dark:hover { background: rgba(79, 70, 229, 0.15); border-color: rgba(79, 70, 229, 0.4); } .practice-tag--silence { background: rgba(107, 114, 128, 0.12); border-color: rgba(107, 114, 128, 0.25); color: #4b5563; } .practice-tag--silence::before { content: '◌'; } .practice-tag--silence:hover { background: rgba(107, 114, 128, 0.2); border-color: rgba(107, 114, 128, 0.4); } .practice-tag--hunger { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); color: #047857; } .practice-tag--hunger::before { content: '∅'; } .practice-tag--hunger:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); } .practice-tag--breath { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.25); color: #0d9488; } .practice-tag--breath::before { content: '◎'; } .practice-tag--breath:hover { background: rgba(20, 184, 166, 0.2); border-color: rgba(20, 184, 166, 0.4); } /* Practice Modal Overlay */ .practice-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 1rem; } .practice-modal-overlay.active { opacity: 1; visibility: visible; } /* Practice Modal */ .practice-modal { background: linear-gradient(180deg, #1a1a24 0%, #12121a 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; transform: translateY(20px) scale(0.95); transition: all 0.3s ease; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .practice-modal-overlay.active .practice-modal { transform: translateY(0) scale(1); } .practice-modal__header { padding: 1.75rem 1.75rem 0; display: flex; align-items: flex-start; gap: 1rem; } .practice-modal__icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-size: 1.25rem; flex-shrink: 0; } .practice-modal__icon--cold { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); color: #93c5fd; } .practice-modal__icon--floor { background: linear-gradient(135deg, rgba(168, 162, 158, 0.2) 0%, rgba(168, 162, 158, 0.1) 100%); color: #d6d3d1; } .practice-modal__icon--heat { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); color: #fca5a5; } .practice-modal__icon--breath { background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(20, 184, 166, 0.1) 100%); color: #5eead4; } .practice-modal__icon--sun { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); color: #fcd34d; } .practice-modal__icon--dark { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%); color: #a5b4fc; } .practice-modal__icon--silence { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%); color: #d1d5db; } .practice-modal__icon--hunger { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); color: #6ee7b7; } .practice-modal__title-group { flex: 1; } .practice-modal__close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(245, 241, 234, 0.85); transition: all 0.2s ease; font-size: 1.25rem; line-height: 1; margin-left: auto; } .practice-modal__close:hover { background: rgba(255, 255, 255, 0.1); color: #F5F1EA; } .practice-modal__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: #C4A962; margin-bottom: 0.25rem; } .practice-modal__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: #F5F1EA; margin: 0; } .practice-modal__body { padding: 1.5rem 1.75rem; } .practice-modal__intro { font-size: 0.9375rem; line-height: 1.7; color: rgba(245, 241, 234, 0.85); margin-bottom: 1.5rem; } .practice-modal__section { margin-bottom: 1.5rem; } .practice-modal__section:last-child { margin-bottom: 0; } .practice-modal__section-title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245, 241, 234, 0.9); margin-bottom: 0.75rem; } .practice-modal__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .practice-modal__step { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: rgba(245, 241, 234, 0.85); line-height: 1.6; } .practice-modal__step-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: rgba(196, 169, 98, 0.2); border-radius: 50%; font-size: 0.75rem; font-weight: 600; color: #C4A962; } .practice-modal__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .practice-modal__meta-item { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.5rem; padding: 0.875rem; } .practice-modal__meta-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 241, 234, 0.85); margin-bottom: 0.25rem; } .practice-modal__meta-value { font-size: 0.9375rem; font-weight: 500; color: #F5F1EA; } .practice-modal__tip { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 0.5rem; padding: 1rem; } .practice-modal__tip-title { font-size: 0.75rem; font-weight: 600; color: #f59e0b; margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.375rem; } .practice-modal__tip-text { font-size: 0.8125rem; line-height: 1.6; color: rgba(245, 241, 234, 0.85); } .practice-modal__footer { padding: 0 1.75rem 1.75rem; } .practice-modal__link { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; background: rgba(196, 169, 98, 0.1); border: 1px solid rgba(196, 169, 98, 0.25); border-radius: 0.5rem; color: #C4A962; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; } .practice-modal__link:hover { background: rgba(196, 169, 98, 0.2); border-color: rgba(196, 169, 98, 0.4); color: #F5F1EA; } .practice-modal__link span { transition: transform 0.2s ease; } .practice-modal__link:hover span { transform: translateX(4px); }