/* ═══════════════════════════════════════════════════════════════ haven.lgbt — FLORAL LIGHT THEME Loaded last in so it overrides each page's inline styles. Edit palette tokens here to re-tune the whole site at once. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap'); /* ─── Palette tokens (these flip the token-driven components) ─── */ :root { /* Backgrounds / surfaces */ --deep: #fff8fc; /* page base (was near-black) */ --surface: rgba(255, 255, 255, 0.72); /* card glass on light */ --border: rgba(157, 123, 232, 0.16); /* soft lavender hairline */ /* Ink */ --text: #4a2c52; /* deep plum ink */ --muted: rgba(74, 44, 82, 0.66); /* soft mauve body text */ /* Accents — deepened just enough to read on a light wash */ --pink: #ff7eb6; --lavender: #9d7be8; --mint: #2fb89a; --sky: #4aa8e0; --peach: #ff9e6b; --gold: #e0a93b; --ink-strong: #3a1f42; --petal-shadow: 0 10px 30px -12px rgba(157, 123, 232, 0.45); } /* ─── Base page: airy floral wash, no dark canvas ─── */ #bg-canvas, .noise { display: none !important; } html { scroll-behavior: smooth; } body { background: radial-gradient(1100px 700px at 12% -8%, rgba(255, 198, 226, 0.55), transparent 60%), radial-gradient(1000px 720px at 92% 4%, rgba(199, 179, 255, 0.50), transparent 62%), radial-gradient(1200px 800px at 78% 96%, rgba(180, 240, 214, 0.45), transparent 60%), radial-gradient(900px 640px at 4% 88%, rgba(180, 222, 255, 0.45), transparent 60%), linear-gradient(180deg, #fff8fc 0%, #fdf4ff 38%, #f4fbff 72%, #f6fff8 100%) !important; background-attachment: fixed !important; color: var(--text) !important; } /* Floating blossoms behind everything — soft 5-petal flowers */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; opacity: 0.4; will-change: transform; } body::before { animation: havenDriftA 26s ease-in-out infinite alternate; } body::after { animation: havenDriftB 32s ease-in-out infinite alternate; } @keyframes havenDriftA { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(14px, -18px, 0) rotate(3deg); } 100% { transform: translate3d(-10px, 10px, 0) rotate(-2deg); } } @keyframes havenDriftB { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-16px, 12px, 0) rotate(-3deg); } 100% { transform: translate3d(12px, -14px, 0) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 100 100'%3E%3Cg fill='%23ff7eb6'%3E%3Cellipse cx='50' cy='27' rx='13' ry='21'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='10' fill='%23ffd166'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%239d7be8'%3E%3Cellipse cx='50' cy='27' rx='13' ry='21'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='10' fill='%23ff9e6b'/%3E%3C/svg%3E"); background-position: -30px 70px, calc(100% + 28px) 230px; } body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cg fill='%232fb89a'%3E%3Cellipse cx='50' cy='27' rx='13' ry='21'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='10' fill='%239d7be8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 100 100'%3E%3Cg fill='%234aa8e0'%3E%3Cellipse cx='50' cy='27' rx='13' ry='21'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='13' ry='21' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='10' fill='%23ffd166'/%3E%3C/svg%3E"); background-position: -24px calc(100% - 50px), calc(100% + 20px) calc(100% - 110px); } /* Keep real content above the floral wash */ .page-wrap, .mobile-menu, .site-footer, #haven-header, #haven-footer, main, footer { position: relative; z-index: 2; } /* ─── Typography ─── */ h1, h2, h3, h4, h5 { color: var(--ink-strong); } p { color: var(--muted); } a { color: var(--lavender); } a:hover { color: var(--pink); } /* Floating sparkles (JS-injected pastel glyphs) — pop on light */ body > span[aria-hidden="true"] { filter: saturate(1.5) brightness(0.82) drop-shadow(0 1px 2px rgba(74,44,82,0.18)); mix-blend-mode: multiply; } /* ═══════════════════════════════════════════════════════════════ CRISIS BANNER ═══════════════════════════════════════════════════════════════ */ .crisis-bar { background: linear-gradient(90deg, rgba(255,198,226,0.85), rgba(199,179,255,0.85)) !important; border-bottom: 1px solid rgba(157,123,232,0.28) !important; color: var(--ink-strong) !important; font-weight: 700 !important; } .crisis-bar a { color: #c43f86 !important; border-bottom: 1px solid rgba(196,63,134,0.4) !important; } .crisis-bar a:hover { color: var(--ink-strong) !important; } .crisis-bar strong { color: var(--ink-strong); } /* ═══════════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════════ */ /* Placeholder must not box-constrain the sticky header, or it scrolls away */ #haven-header { display: contents; } .sticky-header { position: sticky; top: 0; z-index: 100; } .site-nav { background: rgba(255, 248, 252, 0.82) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid rgba(157, 123, 232, 0.18) !important; box-shadow: 0 6px 24px -18px rgba(157, 123, 232, 0.7); } .nav-wordmark { background: linear-gradient(135deg, var(--pink), var(--lavender), var(--sky)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .nav-links a { color: var(--muted) !important; font-weight: 600; } .nav-links a:hover { color: var(--ink-strong) !important; background: rgba(157, 123, 232, 0.12) !important; } .nav-links a[aria-current="page"] { color: #c43f86 !important; background: rgba(255, 126, 182, 0.12) !important; } .nav-hamburger span { background: var(--ink-strong) !important; } /* ─── Buttons ─── */ .btn-primary { background: linear-gradient(135deg, var(--pink), var(--lavender)) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 22px -8px rgba(157, 123, 232, 0.7); } .btn-primary:hover { color: #fff !important; box-shadow: 0 12px 28px -8px rgba(255, 126, 182, 0.7); transform: translateY(-1px); } .btn-secondary, .btn-ghost-mint { background: rgba(255, 255, 255, 0.7) !important; color: var(--ink-strong) !important; border: 1px solid rgba(157, 123, 232, 0.35) !important; } .btn-secondary:hover, .btn-ghost-mint:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: var(--lavender) !important; color: var(--ink-strong) !important; } /* ─── Mobile menu ─── */ .mobile-menu { background: rgba(255, 248, 252, 0.97) !important; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .mobile-link { color: var(--ink-strong) !important; } .mobile-link:hover { color: var(--pink) !important; } .mobile-close { color: var(--ink-strong) !important; } /* ═══════════════════════════════════════════════════════════════ GENERIC SURFACES — lift the dark-mode glass panels onto light. Broad, low-risk: gives every card/panel a soft floral glass look. ═══════════════════════════════════════════════════════════════ */ .offer-card, .nd-card, .helpline-card, .essence-card, .audience-card, .anatomy-card, .content-card, .card, .card-flat, .card-glow, .info-box, .cta-box, .value-pill, .region-panel, .mission-card, .feature-card, .step-card, .stat-card, .quote-card, .el-section { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--petal-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Containers must stay transparent (no box around their contents) */ .community-features, .helplines-inner, .helplines-grid, .nd-grid, .offer-grid, .mission-grid, .region-tabs, .footer-inner, .footer-top { background: transparent !important; border: none !important; box-shadow: none !important; } /* Dark section wrappers → soft floral light */ .helplines-section { background: linear-gradient(180deg, rgba(199,179,255,0.16), rgba(180,240,214,0.16)) !important; border-top: 1px solid rgba(157,123,232,0.18) !important; border-bottom: 1px solid rgba(157,123,232,0.18) !important; } /* Discord "join a community" card keeps its own light pastel gradient */ .discord-card { background: linear-gradient(135deg, rgba(255,126,182,0.12) 0%, rgba(157,123,232,0.12) 50%, rgba(74,168,224,0.12) 100%) !important; border: 1px solid rgba(157,123,232,0.28) !important; box-shadow: var(--petal-shadow); } /* Remove the "scroll" cue and the "Press Esc twice to exit" hint */ .scroll-hint, .quick-exit-hint { display: none !important; } /* Section accents / banners get a soft pastel fill */ .emergency-banner { background: linear-gradient(135deg, rgba(255,198,226,0.55), rgba(255,209,102,0.4)) !important; border: 1px solid rgba(255, 126, 182, 0.3) !important; color: var(--ink-strong) !important; } .emergency-banner-text, .emergency-banner-text * { color: var(--ink-strong) !important; } /* Region tabs */ .region-tab { color: var(--muted) !important; border: 1px solid var(--border) !important; background: rgba(255,255,255,0.5) !important; } .region-tab:hover { color: var(--ink-strong) !important; border-color: var(--lavender) !important; } .region-tab.active { background: linear-gradient(135deg, var(--pink), var(--lavender)) !important; color: #fff !important; border-color: transparent !important; } /* Pills / tags / badges keep colour but read on light */ .htag, .audience-tag, .helpline-tags span, .domain-badge, .card-label, .section-tag { background: rgba(157, 123, 232, 0.12) !important; color: var(--ink-strong) !important; border: 1px solid rgba(157, 123, 232, 0.25) !important; } /* Dividers */ .rainbow-divider, .rainbow-bar { opacity: 0.9; } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .site-footer { background: linear-gradient(180deg, rgba(199,179,255,0.18), rgba(255,198,226,0.28)) !important; border-top: 1px solid rgba(157, 123, 232, 0.22) !important; color: var(--muted) !important; } .site-footer h5 { color: var(--ink-strong) !important; } .footer-links a, .footer-brand-text, .footer-bottom span { color: var(--muted) !important; } .footer-links a:hover { color: var(--pink) !important; } .footer-crisis-reminder { color: var(--ink-strong) !important; } .footer-crisis-reminder a { color: #c43f86 !important; } .footer-bottom { border-top: 1px solid rgba(157,123,232,0.18) !important; } /* ═══════════════════════════════════════════════════════════════ QUICK EXIT (safety) — keep it visible & friendly on light ═══════════════════════════════════════════════════════════════ */ .quick-exit { background: linear-gradient(135deg, var(--mint), var(--sky)) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(47, 184, 154, 0.7) !important; border: none !important; } .quick-exit-hint { background: rgba(255,255,255,0.95) !important; color: var(--ink-strong) !important; border: 1px solid var(--border) !important; } /* ═══════════════════════════════════════════════════════════════ Whimsical hand-script accent available via .script-accent ═══════════════════════════════════════════════════════════════ */ .script-accent { font-family: 'Caveat', cursive; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { body::before, body::after { opacity: 0.35; } .btn-primary:hover { transform: none; } }