/* =================================== THEME SYSTEM =================================== Two layers of variables: 1) Semantic tokens --color-primary, --color-bg, ... These are the "names" every rule in the rest of the file uses. 2) Palette tokens --c-primary, --c-accent, --c-bg, ... These are the actual hex values for the current theme. Themes live in [data-theme="..."] blocks below. JS flips the attribute and the whole site repaints. =================================== */ :root, [data-theme="hope-blue"] { /* PALETTE — Hope Blue (default / recommended) Trustworthy medical blue + sky, calm + hopeful */ --c-primary: #0e7cc2; --c-primary-deep: #075d96; --c-accent: #4dabf7; --c-accent-soft: #bae6fd; --c-bg: #ffffff; --c-bg-soft: #f0f9ff; --c-bg-mid: #e0f2fe; --c-text: #0c1e3e; --c-text-soft: #4a5a78; --c-text-muted: #6b7a93; --c-footer-bg: #0c1e3e; --c-footer-text: #bae6fd; --c-shadow: rgba(14, 124, 194, 0.18); --c-shadow-strong: rgba(14, 124, 194, 0.35); --c-glow: rgba(14, 124, 194, 0.45); --c-glow-soft: rgba(186, 230, 253, 0.55); --c-btn-grad-1: #0e7cc2; --c-btn-grad-2: #4dabf7; --c-icon-grad-1: #4dabf7; --c-icon-grad-2: #0e7cc2; --c-contact-grad-1: #0c4a6e; --c-contact-grad-2: #075d96; --c-contact-grad-3: #4dabf7; --c-divider: rgba(186, 230, 253, 0.6); --c-tagline: #4a5a78; --c-secondary-btn: #ffffff; --c-secondary-text: #0e7cc2; --c-secondary-border:#4dabf7; } [data-theme="living-green"] { /* PALETTE — Living Green Healing, renewal, the official ribbon color for organ donation */ --c-primary: #1f9d55; --c-primary-deep: #0f6b3a; --c-accent: #5cc98a; --c-accent-soft: #c6f6d5; --c-bg: #ffffff; --c-bg-soft: #f0fdf4; --c-bg-mid: #dcfce7; --c-text: #0f2e1c; --c-text-soft: #3a5a48; --c-text-muted: #5b7868; --c-footer-bg: #0f2e1c; --c-footer-text: #c6f6d5; --c-shadow: rgba(31, 157, 85, 0.18); --c-shadow-strong: rgba(31, 157, 85, 0.35); --c-glow: rgba(31, 157, 85, 0.40); --c-glow-soft: rgba(198, 246, 213, 0.55); --c-btn-grad-1: #1f9d55; --c-btn-grad-2: #5cc98a; --c-icon-grad-1: #5cc98a; --c-icon-grad-2: #1f9d55; --c-contact-grad-1: #14532d; --c-contact-grad-2: #0f6b3a; --c-contact-grad-3: #5cc98a; --c-divider: rgba(198, 246, 213, 0.6); --c-tagline: #3a5a48; --c-secondary-btn: #ffffff; --c-secondary-text: #1f9d55; --c-secondary-border:#5cc98a; } [data-theme="warm-sunrise"] { /* PALETTE — Warm Sunrise Golden amber + soft rose, faith, hope, new beginnings */ --c-primary: #d97706; --c-primary-deep: #b45309; --c-accent: #f59e0b; --c-accent-soft: #fde68a; --c-bg: #fffdf7; --c-bg-soft: #fffbeb; --c-bg-mid: #fef3c7; --c-text: #451a03; --c-text-soft: #78350f; --c-text-muted: #92532a; --c-footer-bg: #451a03; --c-footer-text: #fde68a; --c-shadow: rgba(217, 119, 6, 0.18); --c-shadow-strong: rgba(217, 119, 6, 0.35); --c-glow: rgba(245, 158, 11, 0.40); --c-glow-soft: rgba(253, 230, 138, 0.55); --c-btn-grad-1: #d97706; --c-btn-grad-2: #f59e0b; --c-icon-grad-1: #fbbf24; --c-icon-grad-2: #d97706; --c-contact-grad-1: #78350f; --c-contact-grad-2: #b45309; --c-contact-grad-3: #f59e0b; --c-divider: rgba(253, 230, 138, 0.6); --c-tagline: #78350f; --c-secondary-btn: #fffdf7; --c-secondary-text: #b45309; --c-secondary-border:#d97706; } [data-theme="healing-sage"] { /* PALETTE — Healing Sage Calm, restorative, medical-warm without being clinical */ --c-primary: #4d7c5f; --c-primary-deep: #2f5742; --c-accent: #8eb89a; --c-accent-soft: #d4e7d8; --c-bg: #fcfdfb; --c-bg-soft: #f3f7f2; --c-bg-mid: #e7f0e6; --c-text: #1f2e25; --c-text-soft: #4a5b4f; --c-text-muted: #6a7a6e; --c-footer-bg: #1f2e25; --c-footer-text: #d4e7d8; --c-shadow: rgba(77, 124, 95, 0.18); --c-shadow-strong: rgba(77, 124, 95, 0.32); --c-glow: rgba(142, 184, 154, 0.40); --c-glow-soft: rgba(212, 231, 216, 0.55); --c-btn-grad-1: #4d7c5f; --c-btn-grad-2: #8eb89a; --c-icon-grad-1: #8eb89a; --c-icon-grad-2: #4d7c5f; --c-contact-grad-1: #2f5742; --c-contact-grad-2: #4d7c5f; --c-contact-grad-3: #8eb89a; --c-divider: rgba(212, 231, 216, 0.7); --c-tagline: #4a5b4f; --c-secondary-btn: #ffffff; --c-secondary-text: #2f5742; --c-secondary-border:#4d7c5f; } [data-theme="sacred-rose"] { /* PALETTE — Sacred Rose Soft pink + dusty rose, love, family, tenderness */ --c-primary: #c4566f; --c-primary-deep: #933349; --c-accent: #e58ca0; --c-accent-soft: #fbd5dd; --c-bg: #fffbfc; --c-bg-soft: #fdf2f5; --c-bg-mid: #fce7ec; --c-text: #3a1a23; --c-text-soft: #6b3849; --c-text-muted: #8a5a6a; --c-footer-bg: #3a1a23; --c-footer-text: #fbd5dd; --c-shadow: rgba(196, 86, 111, 0.18); --c-shadow-strong: rgba(196, 86, 111, 0.32); --c-glow: rgba(229, 140, 160, 0.40); --c-glow-soft: rgba(251, 213, 221, 0.55); --c-btn-grad-1: #c4566f; --c-btn-grad-2: #e58ca0; --c-icon-grad-1: #e58ca0; --c-icon-grad-2: #c4566f; --c-contact-grad-1: #5d1f30; --c-contact-grad-2: #933349; --c-contact-grad-3: #e58ca0; --c-divider: rgba(251, 213, 221, 0.7); --c-tagline: #6b3849; --c-secondary-btn: #fffbfc; --c-secondary-text: #933349; --c-secondary-border:#c4566f; } [data-theme="deep-compassion"] { /* PALETTE — Deep Compassion Burgundy + gold, dignity, gravity, urgent appeal */ --c-primary: #9b1c2c; --c-primary-deep: #6b121e; --c-accent: #c8a44a; --c-accent-soft: #f1dca0; --c-bg: #ffffff; --c-bg-soft: #fbf6ee; --c-bg-mid: #f4ead2; --c-text: #2a0a0f; --c-text-soft: #5a1c25; --c-text-muted: #7a3036; --c-footer-bg: #2a0a0f; --c-footer-text: #f1dca0; --c-shadow: rgba(155, 28, 44, 0.20); --c-shadow-strong: rgba(155, 28, 44, 0.38); --c-glow: rgba(200, 164, 74, 0.40); --c-glow-soft: rgba(241, 220, 160, 0.55); --c-btn-grad-1: #9b1c2c; --c-btn-grad-2: #c8a44a; --c-icon-grad-1: #c8a44a; --c-icon-grad-2: #9b1c2c; --c-contact-grad-1: #2a0a0f; --c-contact-grad-2: #6b121e; --c-contact-grad-3: #c8a44a; --c-divider: rgba(241, 220, 160, 0.7); --c-tagline: #5a1c25; --c-secondary-btn: #ffffff; --c-secondary-text: #6b121e; --c-secondary-border:#9b1c2c; } [data-theme="quiet-dawn"] { /* PALETTE — Quiet Dawn Soft lavender + sky, spiritual, peaceful, gentle */ --c-primary: #7c6fbf; --c-primary-deep: #564a96; --c-accent: #a8a0e0; --c-accent-soft: #dad5f3; --c-bg: #fdfcff; --c-bg-soft: #f6f4fc; --c-bg-mid: #ece8f7; --c-text: #1f1a3a; --c-text-soft: #4a4470; --c-text-muted: #6a6489; --c-footer-bg: #1f1a3a; --c-footer-text: #dad5f3; --c-shadow: rgba(124, 111, 191, 0.18); --c-shadow-strong: rgba(124, 111, 191, 0.32); --c-glow: rgba(168, 160, 224, 0.40); --c-glow-soft: rgba(218, 213, 243, 0.55); --c-btn-grad-1: #7c6fbf; --c-btn-grad-2: #a8a0e0; --c-icon-grad-1: #a8a0e0; --c-icon-grad-2: #7c6fbf; --c-contact-grad-1: #2a244f; --c-contact-grad-2: #564a96; --c-contact-grad-3: #a8a0e0; --c-divider: rgba(218, 213, 243, 0.7); --c-tagline: #4a4470; --c-secondary-btn: #fdfcff; --c-secondary-text: #564a96; --c-secondary-border:#7c6fbf; } /* ============================================================= DARK / BOLD THEMES These flip --c-bg from white to a near-black shade, so the semantic --color-bg / --color-text / --color-bg-soft / etc. downstream go dark too. Text auto-inverts via --color-text. Light surfaces (cards, contact card) become deep slate so they read as elevated panels against the darker page. ============================================================= */ [data-theme="midnight-sapphire"] { /* MIDNIGHT SAPPHIRE — deep navy + electric blue glow */ --c-primary: #4d8bff; --c-primary-deep: #2a5fcc; --c-accent: #00d4ff; --c-accent-soft: #6ba3ff; --c-bg: #0e1b3d; --c-bg-soft: #142752; --c-bg-mid: #1c3470; --c-surface: #1f3a82; --c-text: #f5f8ff; --c-text-soft: #c4d0ee; --c-text-muted: #8a9bbf; --c-footer-bg: #08122a; --c-footer-text: #6ba3ff; --c-shadow: rgba(77, 139, 255, 0.30); --c-shadow-strong: rgba(77, 139, 255, 0.55); --c-glow: rgba(0, 212, 255, 0.45); --c-glow-soft: rgba(77, 139, 255, 0.35); --c-btn-grad-1: #2a5fcc; --c-btn-grad-2: #00d4ff; --c-icon-grad-1: #4d8bff; --c-icon-grad-2: #00d4ff; --c-contact-grad-1: #0e1b3d; --c-contact-grad-2: #0a1230; --c-contact-grad-3: #2a5fcc; --c-divider: rgba(107, 163, 255, 0.25); --c-tagline: #b8c5e6; --c-secondary-btn: #0f1a45; --c-secondary-text: #f1f5ff; --c-secondary-border:#4d8bff; } [data-theme="obsidian-ember"] { /* OBSIDIAN & EMBER — warm dark plum-brown + burning red/orange */ --c-primary: #ff5e1a; --c-primary-deep: #cc3a00; --c-accent: #ffb347; --c-accent-soft: #ff8a3d; --c-bg: #2a1612; --c-bg-soft: #3a1f1a; --c-bg-mid: #4a2a24; --c-surface: #553430; --c-text: #fff5e8; --c-text-soft: #e0c4b0; --c-text-muted: #a88a78; --c-footer-bg: #1f0e0a; --c-footer-text: #ff8a3d; --c-shadow: rgba(255, 94, 26, 0.30); --c-shadow-strong: rgba(255, 94, 26, 0.55); --c-glow: rgba(255, 179, 71, 0.45); --c-glow-soft: rgba(255, 94, 26, 0.35); --c-btn-grad-1: #cc3a00; --c-btn-grad-2: #ffb347; --c-icon-grad-1: #ff5e1a; --c-icon-grad-2: #ffb347; --c-contact-grad-1: #2a1612; --c-contact-grad-2: #1f1110; --c-contact-grad-3: #cc3a00; --c-divider: rgba(255, 138, 61, 0.25); --c-tagline: #d4b8a8; --c-secondary-btn: #1f1110; --c-secondary-text: #fff4e8; --c-secondary-border:#ff5e1a; } [data-theme="royal-burgundy"] { /* ROYAL BURGUNDY — deep wine + gold */ --c-primary: #d4a04a; --c-primary-deep: #a37a2e; --c-accent: #c44569; --c-accent-soft: #e8b878; --c-bg: #2a0e1c; --c-bg-soft: #3a142a; --c-bg-mid: #4a1c36; --c-surface: #5a2442; --c-text: #fdf6e3; --c-text-soft: #e0d4b8; --c-text-muted: #a89880; --c-footer-bg: #1a0810; --c-footer-text: #e8b878; --c-shadow: rgba(196, 69, 105, 0.30); --c-shadow-strong: rgba(212, 160, 74, 0.55); --c-glow: rgba(212, 160, 74, 0.40); --c-glow-soft: rgba(196, 69, 105, 0.30); --c-btn-grad-1: #8a1c3d; --c-btn-grad-2: #d4a04a; --c-icon-grad-1: #c44569; --c-icon-grad-2: #d4a04a; --c-contact-grad-1: #2a0e1c; --c-contact-grad-2: #1a0810; --c-contact-grad-3: #8a1c3d; --c-divider: rgba(212, 160, 74, 0.30); --c-tagline: #d4c4a8; --c-secondary-btn: #1a0810; --c-secondary-text: #fdf6e3; --c-secondary-border:#d4a04a; } [data-theme="forest-noir"] { /* FOREST NOIR — deep emerald-black + mint */ --c-primary: #2dd4a4; --c-primary-deep: #0fa078; --c-accent: #6ee7b7; --c-accent-soft: #5cc98a; --c-bg: #0e2620; --c-bg-soft: #143a32; --c-bg-mid: #1a4a40; --c-surface: #235c50; --c-text: #ecfff5; --c-text-soft: #b8d4c5; --c-text-muted: #7e9a8a; --c-footer-bg: #06120e; --c-footer-text: #5cc98a; --c-shadow: rgba(45, 212, 164, 0.30); --c-shadow-strong: rgba(45, 212, 164, 0.55); --c-glow: rgba(110, 231, 183, 0.40); --c-glow-soft: rgba(45, 212, 164, 0.30); --c-btn-grad-1: #0fa078; --c-btn-grad-2: #6ee7b7; --c-icon-grad-1: #2dd4a4; --c-icon-grad-2: #6ee7b7; --c-contact-grad-1: #0e2620; --c-contact-grad-2: #0a1e16; --c-contact-grad-3: #0fa078; --c-divider: rgba(110, 231, 183, 0.25); --c-tagline: #a8c4b5; --c-secondary-btn: #0a1e16; --c-secondary-text: #ecfff5; --c-secondary-border:#2dd4a4; } [data-theme="velvet-plum"] { /* VELVET PLUM — deep violet + magenta */ --c-primary: #d946ef; --c-primary-deep: #a21caf; --c-accent: #f0abfc; --c-accent-soft: #e879f9; --c-bg: #221033; --c-bg-soft: #2f1849; --c-bg-mid: #3d215a; --c-surface: #4a2a6e; --c-text: #fdf4ff; --c-text-soft: #dcc4e6; --c-text-muted: #a485b8; --c-footer-bg: #160828; --c-footer-text: #e879f9; --c-shadow: rgba(217, 70, 239, 0.30); --c-shadow-strong: rgba(217, 70, 239, 0.55); --c-glow: rgba(240, 171, 252, 0.40); --c-glow-soft: rgba(217, 70, 239, 0.30); --c-btn-grad-1: #a21caf; --c-btn-grad-2: #f0abfc; --c-icon-grad-1: #d946ef; --c-icon-grad-2: #f0abfc; --c-contact-grad-1: #221033; --c-contact-grad-2: #1a0830; --c-contact-grad-3: #a21caf; --c-divider: rgba(232, 121, 249, 0.25); --c-tagline: #d4b8e0; --c-secondary-btn: #1a0830; --c-secondary-text: #fdf4ff; --c-secondary-border:#d946ef; } [data-theme="storm-charcoal"] { /* STORM CHARCOAL — deep slate blue + steel + crimson accent */ --c-primary: #94a3b8; --c-primary-deep: #64748b; --c-accent: #ef4444; --c-accent-soft: #f87171; --c-bg: #1d2330; --c-bg-soft: #262d3d; --c-bg-mid: #2f3848; --c-surface: #384256; --c-text: #f5f8fc; --c-text-soft: #d4dde6; --c-text-muted: #a0aebe; --c-footer-bg: #14181f; --c-footer-text: #cbd5e1; --c-shadow: rgba(148, 163, 184, 0.25); --c-shadow-strong: rgba(239, 68, 68, 0.45); --c-glow: rgba(239, 68, 68, 0.40); --c-glow-soft: rgba(148, 163, 184, 0.30); --c-btn-grad-1: #475569; --c-btn-grad-2: #ef4444; --c-icon-grad-1: #94a3b8; --c-icon-grad-2: #ef4444; --c-contact-grad-1: #1d2330; --c-contact-grad-2: #11161e; --c-contact-grad-3: #475569; --c-divider: rgba(148, 163, 184, 0.25); --c-tagline: #cbd5e1; --c-secondary-btn: #1a2028; --c-secondary-text: #f1f5f9; --c-secondary-border:#94a3b8; } [data-theme="deep-crimson"] { /* DEEP CRIMSON — deep wine-red + bright crimson */ --c-primary: #f43f5e; --c-primary-deep: #be123c; --c-accent: #fb7185; --c-accent-soft: #fda4af; --c-bg: #2c0e1e; --c-bg-soft: #3a142a; --c-bg-mid: #481c36; --c-surface: #582443; --c-text: #fff1f2; --c-text-soft: #ffd6db; --c-text-muted: #d09098; --c-footer-bg: #1a0810; --c-footer-text: #fda4af; --c-shadow: rgba(244, 63, 94, 0.30); --c-shadow-strong: rgba(244, 63, 94, 0.55); --c-glow: rgba(251, 113, 133, 0.45); --c-glow-soft: rgba(244, 63, 94, 0.30); --c-btn-grad-1: #be123c; --c-btn-grad-2: #fb7185; --c-icon-grad-1: #f43f5e; --c-icon-grad-2: #fb7185; --c-contact-grad-1: #2c0e1e; --c-contact-grad-2: #1f0814; --c-contact-grad-3: #be123c; --c-divider: rgba(253, 164, 175, 0.25); --c-tagline: #fecdd3; --c-secondary-btn: #1f0814; --c-secondary-text: #fff1f2; --c-secondary-border:#f43f5e; } /* SEMANTIC TOKENS — these never change between themes. The rest of the stylesheet only uses these names. */ :root { --color-primary: var(--c-primary); --color-primary-deep: var(--c-primary-deep); --color-accent: var(--c-accent); --color-accent-soft: var(--c-accent-soft); --color-bg: var(--c-bg); --color-bg-soft: var(--c-bg-soft); --color-bg-mid: var(--c-bg-mid); --color-surface: var(--c-surface, var(--c-bg)); --color-text: var(--c-text); --color-text-soft: var(--c-text-soft); --color-text-muted: var(--c-text-muted); --color-footer-bg: var(--c-footer-bg); --color-footer-text: var(--c-footer-text); --color-shadow: var(--c-shadow); --color-shadow-strong: var(--c-shadow-strong); --color-glow: var(--c-glow); --color-glow-soft: var(--c-glow-soft); --color-divider: var(--c-divider); --color-tagline: var(--c-tagline); --gradient-btn: linear-gradient(135deg, var(--c-btn-grad-1), var(--c-btn-grad-2)); --gradient-icon: linear-gradient(135deg, var(--c-icon-grad-1), var(--c-icon-grad-2)); --gradient-text: linear-gradient(135deg, var(--c-primary), var(--c-accent)); --gradient-contact: linear-gradient(135deg, var(--c-contact-grad-1), var(--c-contact-grad-2), var(--c-contact-grad-3)); --gradient-hero: linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg-mid) 50%, var(--c-accent-soft) 100%); --gradient-section-a: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%); --gradient-section-b: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg-mid) 50%, var(--c-bg) 100%); --gradient-section-c: linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg-mid) 50%, var(--c-accent-soft) 100%); /* Backwards-compat aliases for any rule that still uses the old blue-* names. */ --blue-light: var(--c-accent-soft); --blue-mid: var(--c-accent); --blue-primary: var(--c-primary); --blue-dark: var(--c-text); --blue-deep: var(--c-primary-deep); --blue-navy: var(--c-text); --gradient-start: var(--c-bg); --gradient-mid: var(--c-bg-mid); --gradient-end: var(--c-accent-soft); } /* =================================== Reset & Base Styles =================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Arial', sans-serif; color: var(--color-text); line-height: 1.6; overflow-x: hidden; background: var(--color-bg); transition: background 0.4s ease, color 0.4s ease; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* =================================== Navigation =================================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 30px var(--color-shadow); transition: all 0.3s ease; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.3rem; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .heart-icon { width: 28px; height: 28px; color: var(--color-primary); animation: heartbeat 1.5s ease-in-out infinite; transition: color 0.4s ease; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.15); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } } .nav-menu { display: flex; list-style: none; gap: 35px; } .nav-menu a { text-decoration: none; color: var(--color-text); font-weight: 700; font-size: 1.1rem; position: relative; transition: color 0.3s ease; } .nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gradient-text); transition: width 0.3s ease; } .nav-menu a:hover { color: var(--color-primary); } .nav-menu a:hover::after { width: 100%; } .nav-cta { background: var(--gradient-btn); color: white; border: none; padding: 12px 24px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--color-shadow-strong); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--color-shadow-strong); } .hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; } .hamburger span { width: 25px; height: 3px; background: var(--color-text); border-radius: 3px; transition: 0.3s; } /* =================================== Hero Section =================================== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: var(--gradient-hero); padding: 100px 20px 60px; overflow: hidden; transition: background 0.5s ease; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .floating-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; animation: float 20s ease-in-out infinite; } .shape-1 { width: 400px; height: 400px; background: radial-gradient(circle, var(--color-primary), transparent); top: -100px; left: -100px; animation-delay: 0s; } .shape-2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--color-accent), transparent); bottom: -150px; right: -150px; animation-delay: 5s; } .shape-3 { width: 300px; height: 300px; background: radial-gradient(circle, var(--color-accent-soft), transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(0.9); } } .hero-content { text-align: center; position: relative; z-index: 2; max-width: 1000px; } .hero-subtitle { font-size: 0.95rem; font-weight: 600; letter-spacing: 6px; color: var(--color-primary); margin-bottom: 20px; text-transform: uppercase; } .hero-title-wrapper { position: relative; display: inline-block; margin-bottom: 30px; } .hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130%; height: 200%; background: radial-gradient( ellipse at center, var(--color-glow-soft) 0%, var(--color-glow) 30%, var(--color-glow-soft) 60%, transparent 90% ); filter: blur(50px); z-index: 0; animation: glow-pulse 4s ease-in-out infinite; } .hero-title { font-family: 'Montserrat', sans-serif; font-size: clamp(4rem, 15vw, 12rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; display: inline-flex; align-items: flex-start; justify-content: center; position: relative; z-index: 2; } .word-blessing { color: var(--color-text); display: inline-block; font-weight: 900; letter-spacing: -0.05em; transition: color 0.4s ease; } .hero-exclamation { color: var(--color-text); font-size: 0.7em; line-height: 0.9; margin-left: 5px; display: inline-block; font-weight: 900; transition: color 0.4s ease; } @keyframes glow-pulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); } } .hero-tagline { font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 2.5vw, 1.8rem); color: var(--color-tagline); font-weight: 400; font-style: italic; margin-bottom: 25px; transition: color 0.4s ease; } .hero-description { font-size: clamp(1rem, 1.9vw, 1.2rem); color: var(--color-text); max-width: 700px; margin: 0 auto 40px; line-height: 1.7; font-weight: 500; } .hero-buttons { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } .btn { padding: 14px 32px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; cursor: pointer; display: inline-block; letter-spacing: 0.5px; border: 0px solid transparent; line-height: 1.2; } .btn-primary { background: var(--gradient-btn); color: #ffffff; border: 0.5px solid var(--c-secondary-border, var(--color-primary)); box-shadow: 0 8px 25px var(--color-shadow-strong); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px var(--color-shadow-strong); } .btn-secondary { /* Theme-aware background so it stays visible against any section color. Light themes get white, dark themes get their dark surface tone. */ background: var(--c-secondary-btn, #ffffff); color: var(--c-secondary-text, var(--color-primary-deep)); border: 2px solid var(--c-secondary-border, var(--color-primary)); box-shadow: 0 6px 18px var(--color-shadow); backdrop-filter: blur(10px); } .btn-secondary:hover { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 12px 28px var(--color-shadow-strong); } .btn-outline { background: transparent; color: var(--color-primary-deep); border: 2px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: white; } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--color-primary); width: 30px; height: 30px; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } /* =================================== Section Headers =================================== */ .section-header { text-align: center; margin-bottom: 60px; } .section-label { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 4px; color: var(--color-primary); margin-bottom: 15px; text-transform: uppercase; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 15px; } .section-subtitle { font-size: 1.1rem; color: var(--color-text-soft); font-style: italic; } /* =================================== Story Section =================================== */ .story-section { padding: 100px 20px; background: var(--gradient-section-a); transition: background 0.5s ease; } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .story-text { font-size: 1.18rem; color: var(--color-text); line-height: 1.9; margin-bottom: 20px; } .story-text.highlight { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--color-primary-deep); font-style: italic; text-align: center; padding: 25px 0; border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); margin: 30px 0; } .story-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .stat-item { text-align: center; padding: 20px; background: var(--color-surface); border-radius: 15px; box-shadow: 0 5px 20px var(--color-shadow); transition: transform 0.3s ease; } .stat-item:hover { transform: translateY(-5px); } .stat-number { font-size: 2.5rem; font-weight: 900; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 0.85rem; color: var(--color-text-soft); font-weight: 600; margin-top: 5px; } .story-image { position: relative; } .image-frame { position: relative; padding: 20px; background: var(--color-surface); border-radius: 20px; box-shadow: 0 20px 60px var(--color-shadow); transform: rotate(-2deg); transition: transform 0.3s ease; } .image-frame:hover { transform: rotate(0deg); } .image-frame::before { content: ''; position: absolute; inset: -10px; background: var(--gradient-btn); border-radius: 25px; z-index: -1; opacity: 0.3; } .image-placeholder { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--color-bg-mid), var(--color-accent-soft)); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-primary-deep); gap: 15px; } .image-placeholder svg { width: 80px; height: 80px; opacity: 0.5; } .image-placeholder span { font-weight: 600; font-size: 1.1rem; opacity: 0.7; } /* =================================== Family Section =================================== */ .family-section { padding: 100px 20px; background: var(--gradient-section-b); transition: background 0.5s ease; } .family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .family-photo { transition: transform 0.3s ease; } .family-photo:hover { transform: translateY(-10px); } .photo-frame { background: var(--color-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px var(--color-shadow); transition: all 0.3s ease; position: relative; } .photo-frame:hover { box-shadow: 0 20px 60px var(--color-shadow-strong); } .photo-placeholder { aspect-ratio: 1; background: linear-gradient(135deg, var(--color-bg-mid), var(--color-accent-soft)); display: flex; align-items: center; justify-content: center; color: var(--color-primary-deep); position: relative; overflow: hidden; } .photo-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .photo-frame:hover .photo-placeholder::before { transform: translateX(100%); } .photo-placeholder svg { width: 60px; height: 60px; opacity: 0.5; } .photo-caption { padding: 20px; text-align: center; background: var(--color-surface); } .photo-caption h4 { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 5px; } .photo-caption p { font-size: 0.9rem; color: var(--color-text-soft); font-style: italic; } /* =================================== Donate Section =================================== */ .donate-section { padding: 100px 20px; background: var(--gradient-section-c); position: relative; overflow: hidden; transition: background 0.5s ease; } .donate-section::before { content: ''; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, var(--color-accent), transparent); border-radius: 50%; opacity: 0.3; } .donate-content { position: relative; z-index: 2; } .donate-text { max-width: 1000px; margin: 0 auto; } .donate-text .section-header { text-align: center; margin-bottom: 60px; } .donate-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .point { display: flex; gap: 20px; padding: 30px; background: var(--color-surface); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid var(--color-divider); transition: all 0.3s ease; } .point:hover { background: var(--color-surface); transform: translateY(-5px); box-shadow: 0 15px 40px var(--color-shadow); } .point-icon { flex-shrink: 0; width: 50px; height: 50px; background: var(--gradient-icon); border-radius: 15px; display: flex; align-items: center; justify-content: center; color: white; } .point-icon svg { width: 28px; height: 28px; } .point-content h4 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; } .point-content p { color: var(--color-text-soft); line-height: 1.6; } /* =================================== Contact Section =================================== */ .contact-section { padding: 100px 20px; background: var(--gradient-contact); position: relative; overflow: hidden; transition: background 0.5s ease; } .contact-section::before { content: ''; position: absolute; top: -50%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, var(--color-glow-soft), transparent); border-radius: 50%; filter: blur(80px); } .contact-section::after { content: ''; position: absolute; bottom: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, var(--color-glow-soft), transparent); border-radius: 50%; filter: blur(80px); } .contact-card { position: relative; z-index: 2; background: color-mix(in srgb, var(--color-surface) 96%, transparent); backdrop-filter: blur(20px); border-radius: 30px; padding: 60px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2); text-align: center; max-width: 800px; margin: 0 auto; } .contact-content .section-label { color: var(--color-primary); } .contact-content .section-title { color: var(--color-text); margin-bottom: 25px; } .contact-text { font-size: 1.1rem; color: var(--color-text); line-height: 1.8; margin-bottom: 35px; } .contact-info { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 35px; } .info-item { display: flex; align-items: center; gap: 10px; color: var(--color-primary-deep); font-weight: 600; } .info-item svg { width: 24px; height: 24px; color: var(--color-primary); } .contact-buttons { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } /* =================================== Footer =================================== */ .footer { background: var(--color-footer-bg); color: white; padding: 60px 20px 30px; transition: background 0.5s ease; } .footer-content { text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; font-size: 1.5rem; margin-bottom: 25px; color: white; } .footer-brand .heart-icon { color: var(--color-accent); } .footer-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--color-footer-text); max-width: 600px; margin: 0 auto 30px; line-height: 1.7; } .footer-links { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; } .footer-links a { color: var(--color-footer-text); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .footer-links a:hover { color: white; } .footer-copyright { color: var(--color-accent-soft); font-size: 0.9rem; padding-top: 30px; border-top: 1px solid var(--color-divider); } /* =================================== Responsive Design =================================== */ @media (max-width: 968px) { .nav-menu { display: none; } .nav-cta { display: none; } .hamburger { display: flex; } .story-grid { grid-template-columns: 1fr; gap: 40px; } .family-grid { grid-template-columns: repeat(2, 1fr); } .donate-points { grid-template-columns: 1fr; } .contact-card { padding: 40px 25px; } } @media (max-width: 640px) { .hero { padding: 90px 20px 40px; min-height: 100svh; min-height: -webkit-fill-available; align-items: flex-start; } .hero-content { width: 100%; max-width: 100%; } .hero-subtitle { font-size: 0.75rem; letter-spacing: 4px; margin-bottom: 14px; } .hero-title-wrapper { display: block; width: 100%; max-width: 100%; margin-bottom: 20px; } .hero-glow { width: 100%; height: 140%; } .hero-title { font-size: clamp(2rem, 11.5vw, 3.8rem); line-height: 0.95; letter-spacing: -0.02em; display: block; word-break: break-word; overflow-wrap: anywhere; text-align: center; max-width: 100%; } .word-blessing { display: inline-block; letter-spacing: -0.03em; max-width: 100%; } .hero-exclamation { font-size: 0.75em; margin-left: 2px; } .hero-tagline { font-size: 1.05rem; line-height: 1.4; margin-bottom: 16px; } .hero-description { font-size: 0.92rem; line-height: 1.65; margin: 0 auto 28px; } .hero-buttons { flex-direction: column; align-items: center; width: 100%; gap: 10px; } .hero-buttons .btn { width: 100%; max-width: 320px; /* cap so they don't touch the screen edges */ padding: 13px 18px; font-size: 0.92rem; } .scroll-indicator { bottom: 16px; width: 24px; height: 24px; } .shape-1 { width: 220px; height: 220px; top: -60px; left: -60px; } .shape-2 { width: 260px; height: 260px; bottom: -80px; right: -80px; } .shape-3 { width: 180px; height: 180px; } .nav-container { padding: 14px 16px; } .nav-logo { font-size: 1.1rem; } .heart-icon { width: 24px; height: 24px; } .family-grid { grid-template-columns: 1fr; } .story-stats { grid-template-columns: 1fr; } .contact-info { flex-direction: column; gap: 20px; } .section-title { font-size: 1.65rem; } } @media (max-width: 380px) { .hero { padding: 80px 14px 36px; } .hero-title { font-size: clamp(1.75rem, 11vw, 3.2rem); letter-spacing: -0.02em; } .hero-subtitle { font-size: 0.7rem; letter-spacing: 3px; } .hero-tagline { font-size: 0.95rem; } .hero-description { font-size: 0.88rem; } .container { padding: 0 16px; } } @media (max-width: 640px) { html, body { overflow-x: hidden; width: 100%; } .hero-title, .word-blessing, .hero-tagline, .hero-description { max-width: 100%; overflow-wrap: break-word; } } /* =================================== Animations on Scroll =================================== */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* =================================== THEME SWITCHER WIDGET (LEGACY RAIL) The vertical rail wheel is hidden — the navbar button is the only picker on every screen size. The swatches stay in the DOM so the JS can sync their aria-pressed state with the active theme. =================================== */ .theme-switcher, .theme-switcher--rail, .theme-switcher__swatches, .theme-switcher__label, .theme-switcher__trigger { display: none !important; } .theme-swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-surface) 70%, transparent); cursor: pointer; padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); background-clip: padding-box; overflow: hidden; } .theme-swatch:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .theme-swatch[aria-pressed="true"] { transform: scale(1.15); box-shadow: 0 0 0 2px var(--color-primary), 0 4px 14px rgba(0, 0, 0, 0.22); } .theme-swatch::after { content: attr(data-name); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--color-footer-bg); color: var(--color-footer-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.15); } .theme-swatch:hover::after, .theme-swatch:focus-visible::after { opacity: 1; } /* Each swatch shows a 3-color mini gradient so the user instantly sees what the theme will look like */ .theme-swatch[data-theme="hope-blue"] { background: linear-gradient(135deg, #ffffff 35%, #0e7cc2 35% 65%, #4dabf7 65%); } .theme-swatch[data-theme="living-green"] { background: linear-gradient(135deg, #ffffff 35%, #1f9d55 35% 65%, #5cc98a 65%); } .theme-swatch[data-theme="warm-sunrise"] { background: linear-gradient(135deg, #fffbeb 35%, #d97706 35% 65%, #f59e0b 65%); } .theme-swatch[data-theme="healing-sage"] { background: linear-gradient(135deg, #f3f7f2 35%, #4d7c5f 35% 65%, #8eb89a 65%); } .theme-swatch[data-theme="sacred-rose"] { background: linear-gradient(135deg, #fdf2f5 35%, #c4566f 35% 65%, #e58ca0 65%); } .theme-swatch[data-theme="deep-compassion"] { background: linear-gradient(135deg, #fbf6ee 35%, #9b1c2c 35% 65%, #c8a44a 65%); } .theme-swatch[data-theme="quiet-dawn"] { background: linear-gradient(135deg, #f6f4fc 35%, #7c6fbf 35% 65%, #a8a0e0 65%); } /* Dark theme swatches — show a 3-stop gradient that hints at the page-bg + surface + primary of each theme */ .theme-switcher__divider { width: 22px; height: 1px; background: var(--color-divider); margin: 4px 0; } .theme-swatch--dark { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .theme-swatch--dark:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .theme-swatch[data-theme="midnight-sapphire"] { background: linear-gradient(135deg, #0e1b3d 35%, #4d8bff 35% 65%, #00d4ff 65%); } .theme-swatch[data-theme="obsidian-ember"] { background: linear-gradient(135deg, #2a1612 35%, #ff5e1a 35% 65%, #ffb347 65%); } .theme-swatch[data-theme="royal-burgundy"] { background: linear-gradient(135deg, #2a0e1c 35%, #c44569 35% 65%, #d4a04a 65%); } .theme-swatch[data-theme="forest-noir"] { background: linear-gradient(135deg, #0e2620 35%, #2dd4a4 35% 65%, #6ee7b7 65%); } .theme-swatch[data-theme="velvet-plum"] { background: linear-gradient(135deg, #221033 35%, #d946ef 35% 65%, #f0abfc 65%); } .theme-swatch[data-theme="storm-charcoal"] { background: linear-gradient(135deg, #1d2330 35%, #94a3b8 35% 65%, #ef4444 65%); } .theme-swatch[data-theme="deep-crimson"] { background: linear-gradient(135deg, #2c0e1e 35%, #f43f5e 35% 65%, #fb7185 65%); } @media (max-width: 900px) { /* On mobile/tablet the floating rail-wheel would cover content, so we hide it and rely on the navbar button instead. */ .theme-switcher--rail { display: none !important; } } /* Prayer line — high-contrast pill so it always pops on any theme. Uses the theme primary as the accent (left bar + text) but with a white card background for legibility on light themes. */ .prayer-line-wrap { display: flex; justify-content: center; margin: 8px 0 4px; } .prayer-line { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; background: rgba(255, 255, 255, 0.96); color: #0c1e3e; /* always dark — readable on the white pill */ border: 1px solid var(--color-divider); border-left: 4px solid var(--color-primary); border-radius: 999px; font-weight: 800; font-size: clamp(0.95rem, 1.4vw, 1.05rem); letter-spacing: 0.5px; box-shadow: 0 8px 24px var(--color-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; max-width: 100%; } .prayer-line::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent); flex: 0 0 auto; animation: prayer-pulse 2s ease-in-out infinite; } @keyframes prayer-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 0%, transparent); } } /* Phone number link inside the prayer line */ .prayer-line a, .prayer-line a:visited { color: var(--color-primary); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--color-primary) 40%, transparent); padding-bottom: 1px; transition: border-color 0.15s ease; } .prayer-line a:hover { border-bottom-color: var(--color-primary); } /* =================================== LANGUAGE SWITCHER (in navbar) =================================== */ .lang-switcher { position: relative; display: flex; align-items: center; } .lang-switcher__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: color-mix(in srgb, var(--color-surface) 85%, transparent); border: 1px solid var(--color-divider); border-radius: 999px; cursor: pointer; color: var(--color-text); font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lang-switcher__toggle:hover { background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface)); border-color: var(--color-primary); transform: translateY(-1px); } .lang-switcher__flag { font-size: 1.05rem; line-height: 1; } .lang-switcher__code { font-size: 0.78rem; letter-spacing: 1px; } .lang-switcher__caret { width: 14px; height: 14px; color: var(--color-text-soft); transition: transform 0.25s ease; } .lang-switcher.is-open .lang-switcher__caret { transform: rotate(180deg); } .lang-switcher__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px; background: color-mix(in srgb, var(--color-surface) 98%, transparent); border: 1px solid var(--color-divider); border-radius: 14px; box-shadow: 0 16px 48px var(--color-shadow-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96); transform-origin: top right; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 1100; } .lang-switcher.is-open .lang-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lang-switcher__menu li { list-style: none; margin: 0; padding: 0; } .lang-switcher__menu button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--color-text); font-family: inherit; font-size: 0.9rem; text-align: left; transition: background 0.15s ease, color 0.15s ease; } .lang-switcher__menu button:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); } .lang-switcher__menu button[aria-selected="true"] { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); font-weight: 700; } .lang-switcher__menu button[aria-selected="true"]::after { content: '✓'; grid-column: 3; color: var(--color-primary); font-weight: 800; } .lang-flag { font-size: 1.15rem; line-height: 1; text-align: center; } .lang-name { font-size: 0.9rem; font-weight: 600; } .lang-native { font-size: 0.78rem; color: var(--color-text-soft); font-style: italic; } @media (max-width: 968px) { .lang-switcher { display: none; /* mobile menu handles it if needed; compact toggle in nav */ } } @media (max-width: 640px) { .lang-switcher__toggle { padding: 6px 10px; font-size: 0.78rem; } .lang-switcher__code { display: none; /* show only the flag on small screens */ } } /* =================================== NAVBAR THEME BUTTON + PICKER PANEL Sits in the navbar (between lang-switcher and hamburger) and works on every screen size — it's the primary way to switch themes on mobile, and an alternative to the rail wheel on desktop. The rail wheel itself lives in the markup for screens wide enough to fit it. =================================== */ .nav-theme { position: relative; display: flex; align-items: center; } .nav-theme__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: color-mix(in srgb, var(--color-surface) 60%, transparent); border: 1px solid var(--color-divider); border-radius: 999px; cursor: pointer; color: var(--color-text); font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-theme__toggle:hover { background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface)); border-color: var(--color-primary); transform: translateY(-1px); } .nav-theme__dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.15); transition: background 0.3s ease; } .nav-theme__icon { display: inline-flex; color: var(--color-text-soft); transition: color 0.2s ease, transform 0.25s ease; } .nav-theme__icon svg { width: 18px; height: 18px; } .nav-theme.is-open .nav-theme__icon { color: var(--color-primary); transform: rotate(180deg); } /* The picker panel that drops down from the button. Uses position:fixed so it's anchored to the viewport (not the button), which keeps it on-screen even on narrow phones. */ .nav-theme__panel { position: fixed; top: 70px; /* just below the fixed navbar */ right: 16px; min-width: 280px; max-width: calc(100vw - 24px); background: color-mix(in srgb, var(--color-surface) 98%, transparent); border: 1px solid var(--color-divider); border-radius: 16px; box-shadow: 0 20px 60px var(--color-shadow-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 14px; z-index: 1100; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .nav-theme.is-open .nav-theme__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nav-theme__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; border-bottom: 1px solid var(--color-divider); margin-bottom: 10px; } .nav-theme__title { font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-soft); } .nav-theme__close { width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--color-text-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .nav-theme__close:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); } /* 7-column grid (light + dark both fit in one row on most screens) */ .nav-theme__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .nav-theme__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; color: var(--color-text); font-family: inherit; font-size: 0.86rem; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .nav-theme__option:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); } .nav-theme__option[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 18%, transparent); border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; } .nav-theme__option[aria-pressed="true"]::after { content: '✓'; margin-left: auto; color: var(--color-primary); font-weight: 800; } .nav-theme__sw { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15); } .nav-theme__lbl { line-height: 1.2; } /* Per-theme mini-swatches (3-stop gradient like the rail swatches) */ .nav-theme__sw[data-mini="hope-blue"] { background: linear-gradient(135deg, #ffffff 35%, #0e7cc2 35% 65%, #4dabf7 65%); } .nav-theme__sw[data-mini="living-green"] { background: linear-gradient(135deg, #ffffff 35%, #1f9d55 35% 65%, #5cc98a 65%); } .nav-theme__sw[data-mini="warm-sunrise"] { background: linear-gradient(135deg, #fffbeb 35%, #d97706 35% 65%, #f59e0b 65%); } .nav-theme__sw[data-mini="healing-sage"] { background: linear-gradient(135deg, #f3f7f2 35%, #4d7c5f 35% 65%, #8eb89a 65%); } .nav-theme__sw[data-mini="sacred-rose"] { background: linear-gradient(135deg, #fdf2f5 35%, #c4566f 35% 65%, #e58ca0 65%); } .nav-theme__sw[data-mini="deep-compassion"] { background: linear-gradient(135deg, #fbf6ee 35%, #9b1c2c 35% 65%, #c8a44a 65%); } .nav-theme__sw[data-mini="quiet-dawn"] { background: linear-gradient(135deg, #f6f4fc 35%, #7c6fbf 35% 65%, #a8a0e0 65%); } .nav-theme__sw[data-mini="midnight-sapphire"] { background: linear-gradient(135deg, #0e1b3d 35%, #4d8bff 35% 65%, #00d4ff 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="obsidian-ember"] { background: linear-gradient(135deg, #2a1612 35%, #ff5e1a 35% 65%, #ffb347 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="royal-burgundy"] { background: linear-gradient(135deg, #2a0e1c 35%, #c44569 35% 65%, #d4a04a 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="forest-noir"] { background: linear-gradient(135deg, #0e2620 35%, #2dd4a4 35% 65%, #6ee7b7 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="velvet-plum"] { background: linear-gradient(135deg, #221033 35%, #d946ef 35% 65%, #f0abfc 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="storm-charcoal"] { background: linear-gradient(135deg, #1d2330 35%, #94a3b8 35% 65%, #ef4444 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } .nav-theme__sw[data-mini="deep-crimson"] { background: linear-gradient(135deg, #2c0e1e 35%, #f43f5e 35% 65%, #fb7185 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.35); } @media (max-width: 900px) { .nav-theme__panel { /* On narrow screens let the panel take up most of the viewport, but keep an 8px gutter on each side */ right: 8px; left: 8px; width: auto; min-width: 0; max-width: none; } } @media (max-width: 480px) { .nav-theme__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 380px) { .nav-theme__option { padding: 6px 8px; font-size: 0.8rem; } .nav-theme__sw { width: 22px; height: 22px; } } /* =================================== BACK TO TOP BUTTON =================================== */ .back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 1090; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--gradient-btn); color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px var(--color-shadow-strong); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.85); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease, background 0.4s ease, color 0.4s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .back-to-top:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 32px var(--color-shadow-strong); } .back-to-top:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: 3px; } .back-to-top svg { width: 22px; height: 22px; transition: transform 0.3s ease; } .back-to-top:hover svg { transform: translateY(-2px); } /* Keep the back-to-top above the theme switcher on small screens, and move it out of the swatch wheel's way */ @media (max-width: 640px) { .back-to-top { right: 12px; bottom: 12px; width: 44px; height: 44px; } .back-to-top svg { width: 18px; height: 18px; } }