/* ========================================================================== PRAISEBANKS STUDIOS — SHARED FOUNDATION Design tokens, reset, nav, footer, and reusable components. Loaded on every page. Page-specific styles live in their own file (membership.css, home.css, contact.css) so new pages can be added later without touching this file. THEME SYSTEM: two independent switches combine into four looks — data-palette = "gold" | "purple" (color family) data-mode = "dark" | "light" (light/dark) Set on , e.g. ========================================================================== */ :root{ /* fallback values (used only if attributes are somehow missing) */ --bg: #08070f; --panel: rgba(24,20,38,0.6); --panel-elevated: rgba(32,26,50,0.65); --gold: #a78bfa; --gold-bright: #c4b5fd; --amber: #7c3aed; --text: #ede9fe; --text-muted: #a39cc4; --border: rgba(167,139,250,0.16); --border-bright: rgba(196,181,253,0.5); --glow-rgb: 167,139,250; --nav-bg: rgba(8,7,15,0.7); --card-shadow: none; --card-shadow-elevated: none; --card-shadow-t6: none; --card-blur: blur(18px); } /* ---------- PURPLE · DARK (current Web3 look) ---------- */ [data-palette="purple"][data-mode="dark"]{ --bg: #08070f; --panel: rgba(24,20,38,0.6); --panel-elevated: rgba(32,26,50,0.65); --gold: #a78bfa; --gold-bright: #c4b5fd; --amber: #7c3aed; --text: #ede9fe; --text-muted: #a39cc4; --border: rgba(167,139,250,0.16); --border-bright: rgba(196,181,253,0.5); --glow-rgb: 167,139,250; --nav-bg: rgba(8,7,15,0.7); --card-shadow: none; --card-shadow-elevated: none; --card-shadow-t6: none; --card-blur: blur(18px); } /* ---------- PURPLE · LIGHT (current Web3 look, light) ---------- */ [data-palette="purple"][data-mode="light"]{ --bg: #f6f4ff; --panel: rgba(255,255,255,0.7); --panel-elevated: rgba(240,235,255,0.75); --gold: #7c3aed; --gold-bright: #8b5cf6; --amber: #5b21b6; --text: #1e1b30; --text-muted: #6b6483; --border: rgba(124,58,237,0.18); --border-bright: rgba(124,58,237,0.5); --glow-rgb: 124,58,237; --nav-bg: rgba(246,244,255,0.75); --card-shadow: 0 6px 28px rgba(91,33,182,0.10); --card-shadow-elevated: 0 14px 44px rgba(91,33,182,0.14); --card-shadow-t6: 0 18px 56px rgba(91,33,182,0.20); --card-blur: blur(18px); } /* ---------- GOLD · DARK (Web3 look, gold/amber) ---------- */ [data-palette="gold"][data-mode="dark"]{ --bg: #0b0a08; --panel: rgba(21,18,14,0.6); --panel-elevated: rgba(28,23,16,0.65); --gold: #e8b84b; --gold-bright: #f6d478; --amber: #b9772a; --text: #f3ecdd; --text-muted: #9c9384; --border: rgba(232,184,74,0.14); --border-bright: rgba(246,212,120,0.45); --glow-rgb: 232,184,74; --nav-bg: rgba(11,10,8,0.72); --card-shadow: none; --card-shadow-elevated: none; --card-shadow-t6: none; --card-blur: blur(18px); } /* ---------- GOLD · LIGHT (Web3 look, gold/amber) ---------- */ [data-palette="gold"][data-mode="light"]{ --bg: #fbf1de; --panel: rgba(255,250,240,0.7); --panel-elevated: rgba(255,241,210,0.75); --gold: #a8601c; --gold-bright: #c9791f; --amber: #8a4e18; --text: #2a1f10; --text-muted: #7d6c50; --border: rgba(168,96,28,0.18); --border-bright: rgba(168,96,28,0.5); --glow-rgb: 201,121,31; --nav-bg: rgba(251,241,222,0.78); --card-shadow: 0 6px 28px rgba(120,74,16,0.10); --card-shadow-elevated: 0 14px 44px rgba(120,74,16,0.16); --card-shadow-t6: 0 18px 56px rgba(120,74,16,0.22); --card-blur: blur(18px); } /* ---------- BACKGROUND: Web3 grid + gradient mesh — purple hues for purple, gold/amber hues for gold ---------- */ [data-palette="purple"] body{ background-color: var(--bg); background-image: linear-gradient(rgba(167,139,250,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(167,139,250,0.06) 1px, transparent 1px), radial-gradient(ellipse 800px 520px at 10% -8%, rgba(139,92,246,0.28), transparent 60%), radial-gradient(ellipse 650px 480px at 95% 8%, rgba(217,70,239,0.16), transparent 55%), radial-gradient(ellipse 900px 620px at 50% 105%, rgba(99,102,241,0.20), transparent 60%); background-size: 46px 46px, 46px 46px, auto, auto, auto; background-attachment: fixed; } [data-palette="purple"][data-mode="light"] body{ background-image: linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px), radial-gradient(ellipse 800px 520px at 10% -8%, rgba(139,92,246,0.14), transparent 60%), radial-gradient(ellipse 650px 480px at 95% 8%, rgba(217,70,239,0.10), transparent 55%), radial-gradient(ellipse 900px 620px at 50% 105%, rgba(99,102,241,0.10), transparent 60%); } [data-palette="gold"] body{ background-color: var(--bg); background-image: linear-gradient(rgba(232,184,74,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(232,184,74,0.06) 1px, transparent 1px), radial-gradient(ellipse 800px 520px at 10% -8%, rgba(246,190,90,0.26), transparent 60%), radial-gradient(ellipse 650px 480px at 95% 8%, rgba(217,119,6,0.16), transparent 55%), radial-gradient(ellipse 900px 620px at 50% 105%, rgba(180,120,25,0.20), transparent 60%); background-size: 46px 46px, 46px 46px, auto, auto, auto; background-attachment: fixed; } [data-palette="gold"][data-mode="light"] body{ background-image: linear-gradient(rgba(168,96,28,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(168,96,28,0.05) 1px, transparent 1px), radial-gradient(ellipse 800px 520px at 10% -8%, rgba(246,190,90,0.14), transparent 60%), radial-gradient(ellipse 650px 480px at 95% 8%, rgba(217,119,6,0.10), transparent 55%), radial-gradient(ellipse 900px 620px at 50% 105%, rgba(180,120,25,0.10), transparent 60%); } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; } body{ color: var(--text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; padding-top: 76px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } a{ color: inherit; text-decoration: none; } :focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; } section[id]{ scroll-margin-top: 96px; } .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- PAGE TRANSITION LOADER ---------- A slim SVG progress bar fixed to the very top of the viewport. Hidden by default (opacity 0, fill scaled to 0 width); JS drives it by toggling the "active" class and animating the fill rect's transform. Sits above everything else (nav, mobile overlay) via z-index. */ .page-loader{ position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .page-loader.active{ opacity: 1; } .page-loader-svg{ width: 100%; height: 100%; display: block; } .page-loader-track{ fill: rgba(var(--glow-rgb),0.15); } .page-loader-fill{ fill: var(--gold-bright); filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),0.85)); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.4,0,.2,1); } /* ---------- PAGE TRANSITION MASK + 3D ORBIT LOADER ---------- A full-screen dim mask with a centered 3D-style SVG loader (three orbiting rings around a glowing core). Runs in sync with the top bar above — same trigger points, driven from the same JS block. */ .page-loader-mask{ position: fixed; inset: 0; z-index: 1990; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; } .page-loader-mask.active{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; } .loader-3d{ position: relative; width: 108px; height: 108px; perspective: 320px; } /* Each ring is its OWN separate , stacked absolutely on top of each other, all as direct children of .loader-3d. This matters: CSS "perspective" on a parent only projects correctly onto direct child boxes — an element nested *inside* a shared SVG's internal coordinate system does not receive the parent's perspective correctly, which produces a distorted "swoosh" instead of a clean tilted ellipse. */ .loader-ring-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; } .loader-ring-a{ animation: loaderSpinA 1.5s linear infinite; } .loader-ring-b{ animation: loaderSpinB 2.1s linear infinite; } .loader-ring-c{ animation: loaderSpinC 2.7s linear infinite; } @keyframes loaderSpinA{ from{ transform: rotateX(64deg) rotateZ(0deg); } to{ transform: rotateX(64deg) rotateZ(360deg); } } @keyframes loaderSpinB{ from{ transform: rotateX(64deg) rotateY(60deg) rotateZ(0deg); } to{ transform: rotateX(64deg) rotateY(60deg) rotateZ(-360deg); } } @keyframes loaderSpinC{ from{ transform: rotateX(64deg) rotateY(120deg) rotateZ(0deg); } to{ transform: rotateX(64deg) rotateY(120deg) rotateZ(360deg); } } .loader-ring-stroke{ fill: none; stroke: url(#loaderGrad); stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(var(--glow-rgb),0.9)); } .loader-stop-a{ stop-color: var(--gold-bright); } .loader-stop-b{ stop-color: var(--amber); } .loader-dot{ fill: var(--gold-bright); filter: drop-shadow(0 0 5px rgba(var(--glow-rgb),0.95)); } .loader-dot-b{ fill: var(--gold); opacity: 0.85; } .loader-dot-c{ fill: var(--amber); opacity: 0.7; } .loader-core-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: loaderPulse 1.4s ease-in-out infinite; } .loader-core{ fill: url(#loaderGrad); filter: drop-shadow(0 0 8px rgba(var(--glow-rgb),0.95)); } @keyframes loaderPulse{ 0%, 100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.18); opacity: 0.75; } } /* ---------- NAV ---------- */ nav{ position: fixed; top:0; left:0; right:0; width: 100%; z-index: 100; backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--border); } nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; gap: 24px; } .brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:600; font-size: 1.15rem; letter-spacing: 0.01em; flex-shrink:0; } .brand .mark{ width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--amber) 70%); box-shadow: 0 0 18px rgba(var(--glow-rgb),0.55); flex-shrink: 0; } .nav-links{ list-style:none; display:flex; gap: 8px; margin: 0 auto; } .nav-link{ font-family:'JetBrains Mono', monospace; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; color: var(--text-muted); transition: all .2s ease; } .nav-link:hover{ color: var(--text); background: rgba(var(--glow-rgb),0.08); } .nav-link.active{ color: var(--gold-bright); background: rgba(var(--glow-rgb),0.12); } .nav-right{ display:flex; align-items:center; gap: 12px; flex-shrink:0; } .theme-toggle{ width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-bright); background: transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--gold); transition: all .25s ease; flex-shrink:0; } .theme-toggle:hover{ background: rgba(var(--glow-rgb),0.1); } .theme-toggle svg{ width: 18px; height: 18px; } .theme-toggle .icon-moon{ display:none; } [data-mode="light"] .theme-toggle .icon-sun{ display:none; } [data-mode="light"] .theme-toggle .icon-moon{ display:block; } .palette-toggle{ width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-bright); background: transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .25s ease; flex-shrink:0; } .palette-toggle:hover{ background: rgba(var(--glow-rgb),0.1); } .palette-toggle svg{ width: 18px; height: 18px; } .palette-toggle .icon-to-purple{ display:none; } [data-palette="gold"] .palette-toggle .icon-to-gold{ display:none; } [data-palette="gold"] .palette-toggle .icon-to-purple{ display:block; } .menu-toggle{ display:none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-bright); background: transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex-shrink:0; } .menu-toggle span{ display:block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .menu-toggle.open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); } .menu-toggle.open span:nth-child(2){ opacity: 0; } .menu-toggle.open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); } /* ---------- MOBILE MENU — full-screen overlay ---------- Deliberately NOT a dropdown panel. A fixed, full-viewport overlay has no height to calculate, nothing to clip, and no parent stacking-context quirks to fight — it just covers the whole screen. Simplest possible pattern, hardest to break. */ .mobile-overlay{ position: fixed; inset: 0; z-index: 999; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; } .mobile-overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; } .mobile-overlay-link{ font-family:'JetBrains Mono', monospace; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; color: #d9d9d9; padding: 10px 24px; } .mobile-overlay-link.active{ color: var(--gold-bright); } .mobile-overlay-link:hover{ color: #ffffff; } .mobile-overlay-close{ position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #ffffff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } @media (min-width: 881px){ .mobile-overlay{ display: none !important; } } /* ---------- SHARED HERO (centered) ---------- */ .hero{ position: relative; padding: 140px 0 120px; text-align: center; overflow: hidden; } .hero::before{ content:''; position:absolute; top: -10%; left:50%; transform: translateX(-50%); width: 900px; height: 900px; max-width: 200vw; background: radial-gradient(circle, rgba(var(--glow-rgb),0.20) 0%, rgba(var(--glow-rgb),0.06) 35%, transparent 68%); pointer-events:none; animation: breathe 8s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ opacity:0.85; } 50%{ opacity:1; } } .eyebrow{ position:relative; font-family:'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } h1{ position:relative; font-family:'Fraunces', serif; font-weight: 600; font-optical-sizing: auto; font-size: clamp(2.5rem, 6.5vw, 5rem); line-height: 1.05; letter-spacing: -0.01em; max-width: 820px; margin: 0 auto 24px; } h1 em{ font-style: italic; font-weight: 400; background: linear-gradient(120deg, var(--gold-bright), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p{ position:relative; max-width: 560px; margin: 0 auto 40px; color: var(--text-muted); font-size: 1.08rem; line-height: 1.65; } .hero-actions{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap: wrap; } /* ---------- BUTTONS ---------- */ .btn-primary, .btn-ghost{ font-family:'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing:0.03em; text-transform: uppercase; padding: 15px 30px; border-radius: 999px; transition: all .25s ease; display:inline-block; cursor:pointer; border: none; } .btn-primary{ background: linear-gradient(120deg, var(--gold-bright), var(--gold)); color:#100c06; font-weight:600; } .btn-primary:hover{ box-shadow: 0 0 32px rgba(var(--glow-rgb),0.5); transform: translateY(-2px); } .btn-ghost{ border: 1px solid var(--border-bright); background: transparent; color: var(--text); } .btn-ghost:hover{ background: rgba(var(--glow-rgb),0.08); } /* ---------- SECTION HEADS ---------- */ .section-head{ text-align:center; max-width: 640px; margin: 0 auto 64px; } .section-head .eyebrow{ margin-bottom: 16px; } .section-head h2{ font-family:'Fraunces', serif; font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.2; margin-bottom: 16px; } .section-head p{ color: var(--text-muted); font-size: 1rem; line-height: 1.6; } /* ---------- REUSABLE GLOW CTA (closing call-to-action band) ---------- */ .footer-cta{ padding: 100px 0 60px; text-align:center; position:relative; overflow: hidden; } .footer-cta::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:400px; max-width:180vw; background: radial-gradient(circle, rgba(var(--glow-rgb),0.14), transparent 70%); pointer-events:none; } .footer-cta h2{ font-family:'Fraunces', serif; font-size: clamp(1.9rem,4vw,2.8rem); font-weight:500; margin-bottom: 18px; position:relative; } .footer-cta p{ color: var(--text-muted); max-width: 480px; margin: 0 auto 34px; position:relative; } /* ---------- FOOTER ---------- */ footer{ border-top: 1px solid var(--border); padding: 40px 0; } footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .footer-brand{ font-family:'Fraunces', serif; font-size:1rem; color: var(--text-muted); } .footer-links{ display:flex; gap: 24px; flex-wrap: wrap; } .footer-links a{ font-size: 0.85rem; color: var(--text-muted); transition: color .2s ease; } .footer-links a:hover{ color: var(--gold); } /* ---------- SHARED RESPONSIVE ---------- */ @media (max-width: 880px){ .nav-links{ display:none; } .menu-toggle{ display:flex; } } @media (max-width: 620px){ .hero{ padding: 110px 0 80px; } nav .wrap{ height: 66px; } body{ padding-top: 66px; } .brand span.name{ font-size: 1rem; } .nav-right{ gap: 8px; } .theme-toggle, .palette-toggle, .menu-toggle{ width: 36px; height: 36px; } .theme-toggle svg, .palette-toggle svg{ width: 16px; height: 16px; } .hero-actions{ flex-direction: column; align-items: stretch; } footer .wrap{ flex-direction: column; text-align:center; } } @media (max-width: 400px){ .brand span.name{ display: none; } }