/** * ParentWise Design System * Single source of truth for all pages. * Theme is driven by data-mode="dark" on . */ /* ========================================================================== 1. TOKENS — LIGHT MODE (warm cream / purple brand palette) ========================================================================== */ :root { /* --- Brand Purple --- */ --purple: #6B4CA3; --purple-deep: #5A3D8F; --purple-mid: rgba(107, 76, 163, 0.18); --purple-light: #9B7ED4; --purple-pale: #EDE7F8; --purple-tint: rgba(107, 76, 163, 0.04); --purple-ghost: #EDE8F5; --purple-glow: rgba(107, 76, 163, 0.25); /* --- Brand Gold --- */ --gold: #C9A96E; --gold-honey: #D4B97E; --gold-mid: #C9A96E; --gold-deep: #B8943A; --gold-light: #D4B97E; --accent-gold: #C9A96E; --accent-gold-light: #D4B97E; /* --- Backgrounds --- */ --bg-page: #C9C3B4; /* outer greige wrapper */ --bg-primary: #F5F1E8; /* main warm-cream bg */ --bg-secondary: #FDFCF9; /* contrast / card sections */ --bg-tint: #EAE4D4; /* subtle warm tint */ --bg-card: #FFFFFF; --bg-footer: #1A1A1A; --bg-nav: rgba(245, 241, 232, 0.95); /* --- Text --- */ --text-primary: #1A1A1A; --text-secondary: rgba(26, 26, 26, 0.65); --text-muted: rgba(26, 26, 26, 0.38); --text-on-dark: #F5F1E8; /* NEVER flips — on hero/dark sections */ --text-on-dark-sub: rgba(245, 241, 232, 0.82); /* --- Text aliases --- */ --ink: #1A1A1A; --ink-mid: rgba(26, 26, 26, 0.65); --ink-soft: rgba(26, 26, 26, 0.38); /* --- Legacy cream aliases --- */ --cream: #F5F1E8; --cream-warm: #EAE4D4; --cream-dark: #EAE4D4; --white: #FDFCF9; --black: #1A1A1A; /* --- Cards --- */ --card-bg: #FFFFFF; --card-border: rgba(107, 76, 163, 0.14); --card-shadow: 0 4px 24px rgba(61, 41, 112, 0.08); --bd-gold: #D4B97E; /* --- Borders / dividers / shadows --- */ --border: rgba(107, 76, 163, 0.14); --border-light: #EDE8F5; --divider: #EAE4D4; --shadow: rgba(107, 76, 163, 0.18); --shadow-purple: rgba(107, 76, 163, 0.18); /* --- Gradients --- */ --gradient-hero: linear-gradient(155deg, #7B5AB5 0%, #5A3D8F 60%, #3D2970 100%); --gradient-gold: linear-gradient(135deg, #D4B97E 0%, #B8943A 100%); --gradient-tint: linear-gradient(135deg, #EDE8F5 0%, #F5F0FF 100%); /* --- Nav --- */ --nav-bg: rgba(245, 241, 232, 0.95); --nav-border: rgba(201, 195, 180, 0.40); --nav-text: #1A1A1A; --nav-link-hover: #5A3D8F; /* --- UI --- */ --focus-ring: #C9A96E; --icon-color: #6B4CA3; /* --- Buttons: Purple --- */ --btn-pur-bg: #5A3D8F; --btn-pur-hbg: #3D2970; --btn-pur-text: #FFFFFF; /* --- Buttons: Outline Purple --- */ --btn-ol-bd: #7B5AB5; --btn-ol-text: #5A3D8F; --btn-ol-hbg: rgba(123, 90, 181, 0.08); --btn-ol-hbd: #5A3D8F; /* --- Buttons: Gold --- */ --btn-gol-bg: linear-gradient(135deg, #D4B97E 0%, #B8943A 100%); --btn-gol-bd: #B8943A; --btn-gol-tx: #1A1000; --btn-gol-hbg: linear-gradient(135deg, #C9A96E 0%, #A07B2A 100%); --btn-gol-hbd: #9A7028; /* --- Card CTA button --- */ --cbtn-ol-hbg: rgba(212, 185, 126, 0.10); --cbtn-ol-htx: #B8943A; /* --- Badges --- */ --badge-sci-bg: rgba(90, 61, 143, 0.10); --badge-sci-text: #5A3D8F; --badge-sci-bd: rgba(90, 61, 143, 0.20); --badge-sci-hbg: rgba(90, 61, 143, 0.18); --badge-ol-text: #5A3D8F; --badge-ol-bd: #7B5AB5; --badge-ol-hbg: rgba(123, 90, 181, 0.10); } /* ========================================================================== 2. TOKENS — DARK MODE ========================================================================== */ [data-mode="dark"] { /* --- Backgrounds --- */ --bg-page: #111118; --bg-primary: #1C1C26; --bg-secondary: #22222E; --bg-tint: #201E2B; --bg-card: #26263A; --bg-footer: #0E0E18; --bg-nav: rgba(26, 26, 46, 0.97); /* --- Text --- */ --text-primary: #EDE7D8; --text-secondary: rgba(237, 231, 216, 0.68); --text-muted: rgba(237, 231, 216, 0.38); --text-on-dark: #EDE7D8; --text-on-dark-sub: rgba(237, 231, 216, 0.78); /* --- Text aliases --- */ --ink: #EDE7D8; --ink-mid: rgba(237, 231, 216, 0.68); --ink-soft: rgba(237, 231, 216, 0.38); /* --- Cream aliases --- */ --cream: #1C1C26; --cream-warm: #201E2B; --cream-dark: rgba(237, 231, 216, 0.10); --white: #22222E; --black: #0E0E18; /* --- Purple --- */ --purple: #9B7ED4; --purple-deep: #7B5AB5; --purple-light: #BBA2E8; --purple-pale: rgba(107, 76, 163, 0.22); --purple-mid: rgba(155, 126, 212, 0.22); --purple-glow: rgba(155, 126, 212, 0.20); --purple-tint: rgba(107, 76, 163, 0.08); --purple-ghost: rgba(107, 76, 163, 0.22); /* --- Cards --- */ --card-bg: #26263A; --card-border: rgba(155, 126, 212, 0.18); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.30); /* --- Borders / dividers / shadows --- */ --border: rgba(155, 126, 212, 0.18); --border-light: rgba(196, 174, 232, 0.20); --divider: rgba(237, 231, 216, 0.10); --shadow: rgba(0, 0, 0, 0.40); --shadow-purple: rgba(0, 0, 0, 0.40); /* --- Gradients --- */ --gradient-tint: linear-gradient(135deg, #2D2547 0%, #221B3A 100%); /* --- Nav --- */ --nav-bg: rgba(26, 26, 46, 0.97); --nav-border: rgba(155, 126, 212, 0.20); --nav-text: #F0EAF8; --nav-link-hover: #C4AEE8; /* --- UI --- */ --focus-ring: #D4B97E; --icon-color: #D4B97E; /* --- Buttons: Purple --- */ --btn-pur-bg: #7B5AB5; --btn-pur-hbg: #9B7ED4; /* --- Buttons: Outline Purple --- */ --btn-ol-bd: #9B7ED4; --btn-ol-text: #C4AEE8; --btn-ol-hbg: rgba(155, 126, 212, 0.15); --btn-ol-hbd: #C4AEE8; /* --- Card CTA button --- */ --cbtn-ol-hbg: rgba(212, 185, 126, 0.15); --cbtn-ol-htx: #D4B97E; /* --- Badges --- */ --badge-sci-bg: rgba(155, 126, 212, 0.15); --badge-sci-text: #C4AEE8; --badge-sci-bd: rgba(155, 126, 212, 0.30); --badge-sci-hbg: rgba(155, 126, 212, 0.25); --badge-ol-text: #C4AEE8; --badge-ol-bd: #9B7ED4; --badge-ol-hbg: rgba(155, 126, 212, 0.15); } /* ========================================================================== 3. BASE RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } /* ========================================================================== 4. FOCUS RING ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* ========================================================================== 5. THEME TOGGLE BUTTON (.theme-toggle or .pw-theme-toggle) ========================================================================== */ .theme-toggle, .pw-theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(201, 169, 110, 0.35); background: var(--bg-card); color: var(--gold); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; padding: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; } .theme-toggle:hover, .pw-theme-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); border-color: var(--accent-gold); } /* Light mode: show moon (click to go dark), hide sun */ .theme-toggle .icon-sun, .pw-theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon, .pw-theme-toggle .icon-moon { display: block; } /* Dark mode: show sun (click to go light), hide moon */ [data-mode="dark"] .theme-toggle .icon-sun, [data-mode="dark"] .pw-theme-toggle .icon-sun { display: block; } [data-mode="dark"] .theme-toggle .icon-moon, [data-mode="dark"] .pw-theme-toggle .icon-moon { display: none; } /* ========================================================================== 6. BUTTONS ========================================================================== */ .pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: 50px; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; } .pw-btn:active { transform: translateY(0) !important; box-shadow: none !important; } .pw-btn-purple { background: var(--btn-pur-bg); color: var(--btn-pur-text); border-color: transparent; } .pw-btn-purple:hover { background: var(--btn-pur-hbg); color: var(--btn-pur-text); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(61, 41, 112, 0.35); } .pw-btn-gold { background: var(--gradient-gold); color: var(--btn-gol-tx); border-color: var(--btn-gol-bd); animation: pw-goldPulse 3s infinite; } .pw-btn-gold::after { content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transform: skewX(-20deg); animation: pw-shineSwipe 3s infinite 1.5s; } .pw-btn-gold:hover { background: var(--btn-gol-hbg); color: var(--btn-gol-tx); border-color: var(--btn-gol-hbd); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(184, 148, 58, 0.40); animation-play-state: paused; } .pw-btn-gold:hover::after { animation-play-state: paused; } .pw-btn-outline { background: transparent; color: var(--btn-ol-text); border-color: var(--btn-ol-bd); } .pw-btn-outline:hover { background: var(--btn-ol-hbg); color: var(--btn-ol-text); border-color: var(--btn-ol-hbd); transform: translateY(-2px); } .pw-btn-gold-outline { background: transparent; color: var(--gold-honey); border-color: var(--btn-gol-bd); } .pw-btn-gold-outline:hover { background: rgba(212, 185, 126, 0.12); color: var(--gold-honey); border-color: var(--gold-honey); transform: translateY(-2px); } /* ========================================================================== 7. BADGES ========================================================================== */ .pw-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.85rem; border-radius: 50px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; cursor: default; } .pw-badge-sci { background: var(--badge-sci-bg); color: var(--badge-sci-text); border-color: var(--badge-sci-bd); } .pw-badge-sci:hover { background: var(--badge-sci-hbg); } .pw-badge-outline { background: transparent; color: var(--badge-ol-text); border-color: var(--badge-ol-bd); } .pw-badge-outline:hover { background: var(--badge-ol-hbg); } /* ========================================================================== 8. CARDS ========================================================================== */ .pw-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); padding: 2rem; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease; } .pw-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(61, 41, 112, 0.15); } [data-mode="dark"] .pw-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40); } .pw-card-gold { border-top: 3px solid var(--bd-gold); } .pw-cbtn-outline { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.6rem 1.25rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; background: transparent; color: var(--gold-honey); border: 1.5px solid var(--bd-gold); cursor: pointer; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pw-cbtn-outline:hover { background: var(--cbtn-ol-hbg); color: var(--cbtn-ol-htx); border-color: var(--cbtn-ol-htx); } /* ========================================================================== 9. NAVIGATION ========================================================================== */ .pw-nav { background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s ease, border-color 0.3s ease; } .pw-nav a { color: var(--nav-text); transition: color 0.2s ease; } .pw-nav a:hover { color: var(--nav-link-hover); } /* ========================================================================== 10. DIVIDERS ========================================================================== */ .pw-divider { border: none; border-top: 1px solid var(--divider); margin: 2rem 0; transition: border-color 0.3s ease; } /* ========================================================================== 11. FORM ELEMENTS ========================================================================== */ .pw-input, .pw-select, .pw-textarea { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; color: var(--text-primary); padding: 0.75rem 1rem; font-size: 1rem; width: 100%; transition: border-color 0.2s ease, background 0.3s ease; -webkit-appearance: none; appearance: none; } .pw-input::placeholder, .pw-textarea::placeholder { color: var(--text-muted); } .pw-input:focus, .pw-select:focus, .pw-textarea:focus { border-color: var(--gold-mid); outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ========================================================================== 12. SECTION HELPERS ========================================================================== */ .pw-section-dark { background: var(--gradient-hero); color: var(--text-on-dark); } .pw-section-dark a, .pw-section-dark p, .pw-section-dark h1, .pw-section-dark h2, .pw-section-dark h3 { color: var(--text-on-dark); } .pw-section-tint { background: var(--bg-tint); transition: background 0.3s ease; } /* ========================================================================== 13. ICON COLOR ========================================================================== */ .pw-icon { color: var(--icon-color); fill: currentColor; transition: color 0.3s ease; } /* ========================================================================== 14. ANIMATIONS ========================================================================== */ @keyframes pw-goldPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 185, 126, 0.40); } 50% { box-shadow: 0 0 0 8px rgba(212, 185, 126, 0); } } @keyframes pw-floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes pw-fadeSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pw-shineSwipe { 0% { left: -80%; } 100% { left: 130%; } } @keyframes pw-orbDrift { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(20px, -15px) scale(1.05); } 50% { transform: translate(10px, 20px) scale(0.97); } 75% { transform: translate(-15px, 5px) scale(1.03); } 100% { transform: translate(0, 0) scale(1); } } .pw-animate-float { animation: pw-floatY 4s ease-in-out infinite; } .pw-animate-fade-in { animation: pw-fadeSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .pw-animate-gold-pulse { animation: pw-goldPulse 3s infinite; } .pw-animate-orb { animation: pw-orbDrift 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pw-animate-float, .pw-animate-fade-in, .pw-animate-gold-pulse, .pw-animate-orb, .pw-btn-gold, .pw-btn-gold::after { animation: none !important; } body, .pw-btn, .pw-badge, .pw-card { transition: none !important; } } /* ========================================================================== 15. BASE ELEMENT DEFAULTS Everything here is low-specificity — page-specific class rules always win. The goal: unstyled HTML still looks on-brand. ========================================================================== */ h1, h2, h3, h4 { font-family: 'DM Sans', sans-serif; font-weight: 600; color: var(--text-primary); transition: color 0.3s ease; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.5rem; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--purple); margin-bottom: 1.25rem; } h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 1rem; } h4 { font-size: 1rem; line-height: 1.4; margin-bottom: 0.75rem; } p { font-size: 1rem; line-height: 1.8; color: var(--text-primary); margin-bottom: 1.25rem; } p:last-child { margin-bottom: 0; } a { color: var(--purple); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--purple-deep); } strong { font-weight: 600; } em { font-style: italic; } ul, ol { padding-left: 1.5rem; } li { line-height: 1.75; margin-bottom: 0.4rem; color: var(--text-primary); } hr { border: none; border-top: 1px solid var(--divider); margin: 2rem 0; transition: border-color 0.3s ease; } img { max-width: 100%; height: auto; display: block; } /* ========================================================================== 16. CONTAINERS ========================================================================== */ .pw-container { max-width: 900px; margin: 0 auto; padding: 0 2rem; } .pw-container-wide { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .pw-container-narrow { max-width: 680px; margin: 0 auto; padding: 0 2rem; } /* ========================================================================== 17. TOP BAR ========================================================================== */ .pw-top-bar { background: var(--purple-deep); color: var(--accent-gold-light); text-align: center; padding: 11px 20px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; transition: background 0.3s ease; } [data-mode="dark"] .pw-top-bar { background: #0E0E18; } .pw-top-bar::before, .pw-top-bar::after { content: '✦'; margin: 0 10px; font-size: 9px; opacity: 0.7; } /* ========================================================================== 18. NAVIGATION ========================================================================== */ .pw-nav-bar { background: var(--bg-nav); border-bottom: 1px solid var(--nav-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 100; transition: background 0.3s ease, border-color 0.3s ease; } .pw-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; max-width: 1100px; margin: 0 auto; } .pw-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; font-style: italic; color: var(--ink); letter-spacing: 0.04em; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: color 0.2s ease; } .pw-logo span { color: var(--purple); } [data-mode="dark"] .pw-logo { color: var(--text-on-dark); } .pw-nav-cta { display: inline-block; padding: 10px 24px; background: var(--purple); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; border-radius: 6px; border: none; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 16px var(--purple-glow); } .pw-nav-cta:hover { background: var(--purple-deep); transform: translateY(-1px); box-shadow: 0 6px 20px var(--purple-glow); color: #fff; } /* ========================================================================== 19. HERO ========================================================================== */ .pw-hero { background: var(--gradient-hero); color: var(--text-on-dark); position: relative; overflow: hidden; padding: 7rem 2rem 8rem; } [data-mode="dark"] .pw-hero { background: linear-gradient(155deg, #3D2C6B 0%, #2A1F52 60%, #1A1230 100%); } /* Multi-radial glow overlay */ .pw-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 10%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(0,0,0,0.15) 0%, transparent 45%), radial-gradient(ellipse at 60% 40%, rgba(201,169,110,0.06) 0%, transparent 55%); pointer-events: none; } .pw-hero > * { position: relative; z-index: 1; } /* Optional wave cut into next section */ .pw-hero--wave::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 56px; background: var(--bg-primary); clip-path: ellipse(55% 100% at 50% 100%); transition: background 0.3s ease; } /* Centered hero inner */ .pw-hero-inner { max-width: 740px; margin: 0 auto; text-align: center; } /* Hero headings always on dark */ .pw-hero h1, .pw-hero-inner h1 { color: var(--text-on-dark); text-shadow: 0 2px 16px rgba(0,0,0,0.2); } /* ========================================================================== 20. SECTION LAYOUTS ========================================================================== */ .pw-section { background: var(--bg-primary); padding: 5rem 2rem; transition: background 0.3s ease; } .pw-section-alt { background: var(--bg-tint); padding: 5rem 2rem; transition: background 0.3s ease; } .pw-section-white { background: var(--bg-secondary); padding: 5rem 2rem; transition: background 0.3s ease; } .pw-section-purple { background: linear-gradient(155deg, #6B4CA3 0%, #5A3D8F 100%); color: var(--text-on-dark); padding: 5rem 2rem; position: relative; overflow: hidden; } [data-mode="dark"] .pw-section-purple { background: linear-gradient(155deg, #3D2C6B 0%, #2A1F52 100%); } .pw-section-dark { background: linear-gradient(160deg, #1A1A2E 0%, #2C2C2C 100%); color: var(--text-on-dark); padding: 5rem 2rem; position: relative; overflow: hidden; } [data-mode="dark"] .pw-section-dark { background: linear-gradient(160deg, #0E0E18 0%, #1A1A26 100%); } /* Final CTA — centred, purple bg */ .pw-cta-section { background: var(--purple); color: var(--text-on-dark); text-align: center; padding: 6rem 2rem; } [data-mode="dark"] .pw-cta-section { background: linear-gradient(155deg, #3D2C6B 0%, #2A1F52 100%); } /* Text colour resets inside dark sections */ .pw-section-purple h1, .pw-section-purple h2, .pw-section-purple h3, .pw-section-purple p, .pw-section-dark h1, .pw-section-dark h2, .pw-section-dark h3, .pw-section-dark p, .pw-cta-section h1, .pw-cta-section h2, .pw-cta-section h3, .pw-cta-section p { color: var(--text-on-dark); } /* Inner width shims */ .pw-section-inner { max-width: 740px; margin: 0 auto; } .pw-section-inner--wide { max-width: 1100px; margin: 0 auto; } .pw-section-inner--narrow { max-width: 640px; margin: 0 auto; } /* ========================================================================== 21. TYPOGRAPHY UTILITIES ========================================================================== */ /* Eyebrow pill — above a heading, light bg */ .pw-eyebrow { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); background: var(--purple-pale); padding: 6px 16px; border-radius: 20px; margin-bottom: 1.5rem; } /* Eyebrow on dark / hero backgrounds */ .pw-eyebrow--dark { color: var(--accent-gold-light); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); } /* Section heading (h2 level, brand purple) */ .pw-heading { font-family: 'DM Sans', sans-serif; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; color: var(--purple); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 1.5rem; } .pw-heading--on-dark { color: var(--text-on-dark); } /* Lead paragraph */ .pw-lead { font-size: 1.05rem; line-height: 1.8; color: var(--ink-mid); margin-bottom: 2rem; } .pw-lead--on-dark { color: var(--text-on-dark-sub); } /* Serif italic pull-quote */ .pw-pull { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; font-style: italic; line-height: 1.55; color: var(--purple); } .pw-pull--on-dark { color: var(--text-on-dark); } /* Micro section label (above eyebrow, tracked caps) */ .pw-label { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 1.5rem; } .pw-label--light { color: var(--accent-gold-light); opacity: 0.8; } /* Gold accent rule */ .pw-rule-gold { display: block; width: 48px; height: 3px; background: linear-gradient(90deg, var(--accent-gold), var(--purple-light)); border: none; margin-bottom: 2.5rem; border-radius: 2px; } .pw-rule-gold--center { margin-left: auto; margin-right: auto; } /* Full-width subtle divider */ .pw-rule-full { display: block; width: 100%; height: 1px; background: var(--purple-mid); border: none; } /* ========================================================================== 22. FOOTER ========================================================================== */ .pw-footer { background: var(--bg-footer); text-align: center; padding: 44px 24px 56px; transition: background 0.3s ease; } .pw-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; } .pw-footer-name { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; font-style: italic; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.04em; } .pw-footer-name span { color: var(--accent-gold-light); } .pw-footer-tagline { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); line-height: 1.8; max-width: 460px; margin: 0 auto 0.8rem; letter-spacing: 0.04em; } .pw-footer-copy { font-size: 0.68rem; color: rgba(255, 255, 255, 0.2); letter-spacing: 0.06em; } .pw-footer a { color: var(--accent-gold); text-decoration: none; opacity: 0.7; transition: opacity 0.2s ease; } .pw-footer a:hover { opacity: 1; } /* ========================================================================== 23. FAQ ACCORDION ========================================================================== */ .pw-faq { display: flex; flex-direction: column; gap: 2px; margin-top: 2rem; } .pw-faq-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s ease; } .pw-faq-item.open { border-color: rgba(107, 76, 163, 0.3); } [data-mode="dark"] .pw-faq-item.open { border-color: rgba(155, 126, 212, 0.4); } .pw-faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 24px; background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 500; color: var(--ink); gap: 12px; text-align: left; user-select: none; transition: color 0.2s ease; } .pw-faq-q:hover { color: var(--purple); } .pw-faq-chevron { flex-shrink: 0; width: 22px; height: 22px; background: var(--purple-pale); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--purple); font-size: 0.7rem; font-style: normal; transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease; line-height: 1; } .pw-faq-item.open .pw-faq-chevron { transform: rotate(180deg); background: var(--purple); color: #fff; } .pw-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s ease; font-size: 0.88rem; line-height: 1.75; color: var(--ink-mid); padding: 0 24px; } .pw-faq-item.open .pw-faq-a { max-height: 600px; padding: 0 24px 18px; } /* ========================================================================== 24. SCROLL REVEAL ========================================================================== */ .pw-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .pw-reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered entry for grid children */ .pw-reveal:nth-child(2) { transition-delay: 0.08s; } .pw-reveal:nth-child(3) { transition-delay: 0.16s; } .pw-reveal:nth-child(4) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .pw-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 25. RESPONSIVE ========================================================================== */ @media (max-width: 768px) { .pw-container, .pw-container-narrow { padding: 0 1.25rem; } .pw-container-wide { padding: 0 1rem; } .pw-section, .pw-section-alt, .pw-section-white, .pw-section-purple, .pw-section-dark, .pw-cta-section { padding: 3.5rem 1.25rem; } .pw-hero { padding: 5rem 1.25rem 6rem; } .pw-nav-inner { padding: 16px 20px; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } }