on a public page must carry one of: .pb-aurora (hero only), .pb-tint, .pb-tint-b, .pb-light-mesh, or .pb-dark-panel. Plain white (falling through to body{background:#fff}) is never acceptable for a full-width section. ========================================================================= */ /* ---- Solid dark content panel (non-hero): for FAQ/proof/dense-content sections that don't need hero-weight animated blobs -- same navy family as .pb-aurora, but static and cheap for long scrolling pages. ---- */ .pb-dark-panel{ background:linear-gradient(175deg,var(--pb-navy) 0%,var(--pb-charcoal) 100%); color:var(--pb-aurora-text); } .pb-dark-panel *{color:inherit} .pb-dark-panel .section-copy,.pb-dark-panel p{color:var(--pb-aurora-muted)} .pb-dark-panel .section-kicker,.pb-dark-panel .eyebrow{color:var(--pb-glow-blue-soft)} .pb-dark-panel a:not(.btn){color:var(--pb-glow-blue-soft)} .pb-dark-panel .card,.pb-dark-panel .panel,.pb-dark-panel .evidence-item, .pb-dark-panel details{ background:rgba(20,32,52,.55); border:1px solid rgba(150,180,220,.18); border-radius:16px; } .pb-dark-panel .note-block{ background:rgba(20,32,52,.55); border-left:4px solid var(--pb-glow-blue-soft); } .pb-dark-panel .note-block h3{color:var(--pb-aurora-text)} .pb-dark-panel .process-list li{color:var(--pb-aurora-muted)} .pb-dark-panel .process-list strong{color:var(--pb-aurora-text)} .pb-dark-panel .process-list li:before{background:var(--pb-glow-blue-soft);color:var(--pb-navy-deep)} .pb-dark-panel h1,.pb-dark-panel h2,.pb-dark-panel h3{color:var(--pb-aurora-text)} .pb-dark-panel .btn{background:rgba(255,255,255,.06);border-color:rgba(150,180,220,.35);color:var(--pb-aurora-text)} .pb-dark-panel .btn.primary{background:var(--pb-glow-blue-soft);border-color:var(--pb-glow-blue-soft);color:var(--pb-navy-deep);font-weight:800} .pb-dark-panel .btn.primary:hover{background:#7cc8ff} .pb-dark-panel .micro{color:#8ea3c2} .pb-dark-panel details{border-top:none;border-bottom:none;padding:18px 22px;margin:10px 0} .pb-dark-panel details:last-child{border-bottom:1px solid rgba(150,180,220,.18)} .pb-dark-panel summary{color:var(--pb-aurora-text)} .pb-dark-panel .proof-label{background:rgba(240,180,94,.16);color:var(--pb-glow-amber)} /* ========================================================================= V3 additions -- owner rejected the v2 light/dark "rhythm" as still reading like a white document: .pb-tint / .pb-tint-b / .pb-light-mesh and several page-local classes (.offer, .founder, .card, .panel) were near-white (#eef3fb / #f6f4ef / #f4f7fb / #f7faff) and visually failed even though none of them were literally #fff. Variation must now come from different DARK tones/textures, never from returning to a light background. The classes below are the only sanctioned full-width section backgrounds going forward; .pb-tint/.pb-tint-b/.pb-light-mesh remain defined (harmless) but must not be applied to a new section. ========================================================================= */ .pb-dark-base,.pb-dark-elevated,.pb-dark-grid,.pb-dark-editorial,.pb-dark-pricing,.pb-dark-form{ color:var(--pb-text); } .pb-dark-base *,.pb-dark-elevated *,.pb-dark-grid *,.pb-dark-editorial *,.pb-dark-pricing *,.pb-dark-form *{color:inherit} .pb-dark-base .section-copy,.pb-dark-base p, .pb-dark-elevated .section-copy,.pb-dark-elevated p, .pb-dark-grid .section-copy,.pb-dark-grid p, .pb-dark-editorial .section-copy,.pb-dark-editorial p, .pb-dark-pricing .section-copy,.pb-dark-pricing p, .pb-dark-form .section-copy,.pb-dark-form p{color:var(--pb-text-muted)} .pb-dark-base .section-kicker,.pb-dark-base .eyebrow, .pb-dark-elevated .section-kicker,.pb-dark-elevated .eyebrow, .pb-dark-grid .section-kicker,.pb-dark-grid .eyebrow, .pb-dark-editorial .section-kicker,.pb-dark-editorial .eyebrow, .pb-dark-pricing .section-kicker,.pb-dark-pricing .eyebrow, .pb-dark-form .section-kicker,.pb-dark-form .eyebrow{color:var(--pb-cyan)} .pb-dark-base h1,.pb-dark-base h2,.pb-dark-base h3, .pb-dark-elevated h1,.pb-dark-elevated h2,.pb-dark-elevated h3, .pb-dark-grid h1,.pb-dark-grid h2,.pb-dark-grid h3, .pb-dark-editorial h1,.pb-dark-editorial h2,.pb-dark-editorial h3, .pb-dark-pricing h1,.pb-dark-pricing h2,.pb-dark-pricing h3, .pb-dark-form h1,.pb-dark-form h2,.pb-dark-form h3{color:var(--pb-text)} .pb-dark-base .micro,.pb-dark-elevated .micro,.pb-dark-grid .micro,.pb-dark-editorial .micro,.pb-dark-pricing .micro,.pb-dark-form .micro{color:var(--pb-text-soft)} .pb-dark-base a:not(.btn),.pb-dark-elevated a:not(.btn),.pb-dark-grid a:not(.btn),.pb-dark-editorial a:not(.btn),.pb-dark-pricing a:not(.btn),.pb-dark-form a:not(.btn){color:var(--pb-cyan)} .pb-dark-base .btn,.pb-dark-elevated .btn,.pb-dark-grid .btn,.pb-dark-editorial .btn,.pb-dark-pricing .btn,.pb-dark-form .btn{background:var(--pb-btn-bg);border-color:var(--pb-btn-border);color:var(--pb-btn-text)} .pb-dark-base .btn.primary,.pb-dark-elevated .btn.primary,.pb-dark-grid .btn.primary,.pb-dark-editorial .btn.primary,.pb-dark-pricing .btn.primary,.pb-dark-form .btn.primary{background:var(--pb-cta-bg);border-color:var(--pb-cta-bg);color:var(--pb-cta-text);font-weight:800} .pb-dark-base .btn.primary:hover,.pb-dark-elevated .btn.primary:hover,.pb-dark-grid .btn.primary:hover,.pb-dark-editorial .btn.primary:hover,.pb-dark-pricing .btn.primary:hover,.pb-dark-form .btn.primary:hover{filter:brightness(1.12)} /* pb-dark-base: flattest, cheapest themed slab */ .pb-dark-base{background:var(--pb-sec-grad-c)} /* pb-dark-elevated: "raised" surface relative to a base/panel neighbor */ .pb-dark-elevated{ background:var(--pb-sec-grad-b); box-shadow:inset 0 1px 0 rgba(150,180,220,.12); } /* pb-dark-grid: base + a restrained, static grid texture (no motion, no blobs) -- for content-dense sections that want a bit of atmosphere without hero-weight animation cost */ .pb-dark-grid{position:relative;overflow:hidden;isolation:isolate;background:var(--pb-sec-grad-a)} .pb-dark-grid:before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--pb-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--pb-grid-line) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse 85% 75% at 50% 15%,rgba(0,0,0,.85),transparent 80%); -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 15%,rgba(0,0,0,.85),transparent 80%); } .pb-dark-grid>.wrap{position:relative;z-index:1} /* pb-dark-editorial: founder/story sections -- deepest tone, gold quote rule */ .pb-dark-editorial{background:var(--pb-sec-grad-d)} .pb-dark-editorial .quote{border-left:3px solid var(--pb-gold);padding-left:22px} /* pb-dark-pricing: tuned for an offer/pricing layout; gold-accented kicker, gold price emphasis, gold top rule on the price panel */ .pb-dark-pricing{background:var(--pb-sec-grad-b)} .pb-dark-pricing .section-kicker{color:var(--pb-gold-text)} .pb-dark-pricing .price,.pb-dark-elevated .price{color:var(--pb-gold-text)} .pb-dark-pricing .panel,.pb-dark-elevated .panel{border-top:2px solid var(--pb-gold)} /* pb-dark-form: contact/lead forms -- inputs get an !important override because page-level inline style="" attributes otherwise always win */ .pb-dark-form{background:var(--pb-sec-grad-c)} .pb-dark-form label{color:var(--pb-text-muted);font-weight:600} .pb-dark-form label span{color:var(--pb-text)} .pb-dark-form input,.pb-dark-form textarea{ background:var(--pb-input) !important; border:1px solid var(--pb-input-border) !important; color:var(--pb-text) !important; border-radius:10px !important; } .pb-dark-form input::placeholder,.pb-dark-form textarea::placeholder{color:var(--pb-text-soft)} .pb-dark-form input:focus,.pb-dark-form textarea:focus{outline:2px solid var(--pb-focus);outline-offset:2px} /* pb-glass-card: general-purpose elevated card inside any themed section */ .pb-glass-card{ background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:14px; padding:26px; } .pb-glass-card h3{color:var(--pb-text);margin:10px 0} .pb-glass-card p,.pb-glass-card li,.pb-glass-card span{color:var(--pb-text-muted)} .pb-glass-card strong{color:var(--pb-text)} /* pb-illuminated-card: featured/highlighted card with a glowing accent border and a thin gold top rule -- one per section at most */ .pb-illuminated-card{ background:var(--pb-surface-elevated); border:1px solid var(--pb-border-glow); border-top:2px solid var(--pb-gold); border-radius:16px; padding:30px; box-shadow:0 0 0 1px rgba(96,191,255,.08),var(--pb-shadow); } .pb-illuminated-card h3{color:var(--pb-text)} .pb-illuminated-card p,.pb-illuminated-card li{color:var(--pb-text-muted)} /* ---- Secondary light tint (warm-neutral) for alternating rhythm against the cooler .pb-light-mesh, so consecutive light sections don't look identical. ---- */ .pb-tint-b{ background: radial-gradient(ellipse 55% 45% at 90% 0%, rgba(240,180,94,.08), transparent 60%), radial-gradient(ellipse 45% 40% at 0% 100%, rgba(8,118,217,.05), transparent 60%), #f6f4ef; } /* ---- Plain flat tint, cheapest option, for short/simple sections ---- */ .pb-tint{background:#eef3fb} /* ---- Elevated card usable on any light tint section ---- */ .pb-card{ background:#fff; border:1px solid var(--line,#dfe6ef); border-radius:14px; box-shadow:0 16px 45px -38px rgba(17,26,45,.45); } /* ========================================================================= Premium product card component (reusable for digital products / future product area). Supports: cover image, name, outcome line, type, availability badge, price/coming-soon, included list, license summary, platform requirements, preview + purchase/notify buttons, membership status, update status, support-limitation note. ========================================================================= */ .pb-product-card{ display:flex;flex-direction:column; background:rgba(20,32,52,.55); border:1px solid rgba(150,180,220,.18); border-radius:18px; overflow:hidden; } .pb-product-card .pb-product-cover{ aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:#0f1d34; } .pb-product-card .pb-product-body{padding:22px 24px 24px} .pb-product-card .pb-product-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .pb-product-card .pb-product-badge{ font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.08); color:#c7d3e6;border:1px solid rgba(150,180,220,.28); } .pb-product-card .pb-product-badge.live{background:rgba(46,204,113,.14);color:#7be2a4;border-color:rgba(46,204,113,.35)} .pb-product-card .pb-product-badge.soon{background:rgba(240,180,94,.16);color:#f0b45e;border-color:rgba(240,180,94,.35)} .pb-product-card h3{margin:0 0 6px;font-size:20px;color:var(--pb-aurora-text,#eef3fb)} .pb-product-card .pb-product-outcome{font-size:15px;color:var(--pb-aurora-muted,#aab8cc);margin:0 0 14px} .pb-product-card .pb-product-price{font-size:22px;font-weight:800;color:#fff;margin:0 0 14px} .pb-product-card .pb-product-price small{font-size:12px;font-weight:400;color:var(--pb-aurora-muted,#aab8cc)} .pb-product-card .pb-product-meta{list-style:none;margin:0 0 16px;padding:0;font-size:13px;color:var(--pb-aurora-muted,#aab8cc);display:grid;gap:6px} .pb-product-card .pb-product-meta li{display:flex;gap:8px} .pb-product-card .pb-product-meta b{color:#dbe4f2;font-weight:700;min-width:118px;display:inline-block} .pb-product-card .pb-product-actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap} .pb-product-card .pb-product-note{font-size:11.5px;color:#8ea3c2;margin-top:12px} /* ---- Consistent button hierarchy (extends the base .btn already used site-wide): primary = filled brand blue, secondary = outline, ghost = text-only, all with a single hover language. ---- */ .btn.ghost{background:transparent;border-color:transparent;text-decoration:underline;padding-left:4px;padding-right:4px} .pb-aurora .btn.ghost,.pb-dark-panel .btn.ghost{color:var(--pb-glow-blue-soft)} /* ---- Type-scale tokens for consistent hierarchy across new components ---- */ :root{ --pb-h1:clamp(34px,4.4vw,50px); --pb-h2:clamp(24px,3vw,34px); --pb-h3:19px; --pb-body:15.5px; --pb-micro:12.5px; } /* ---- Global footer: every page's footer previously fell through to the plain white body background. A slim dark closing band reads as an intentional part of the system rather than a leftover white strip. ---- */ footer{ background:var(--pb-footer-bg) !important; color:var(--pb-footer-text) !important; border-top:none !important; } footer a{color:var(--pb-glow-blue-soft) !important} footer strong{color:var(--pb-aurora-text,#eef3fb) !important} /* ---- Global nav: every page's sticky nav previously fell through to a plain white bar sitting on top of the dark hero -- the same white-region problem as the old footer, just at the top of the page instead. ---- */ nav{ background:var(--pb-nav-bg) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; border-bottom:1px solid var(--pb-border) !important; } nav .brand,nav .brand span{color:var(--pb-text) !important} nav svg text{fill:var(--pb-text) !important} nav a{color:var(--pb-nav-link) !important} .nav-links a{color:var(--pb-nav-link) !important} .nav-links a:hover{color:var(--pb-nav-link-hover) !important} .nav-links a.nav-cta{ color:var(--pb-cta-text) !important; background:var(--pb-cta-bg) !important; padding:9px 16px !important; border-radius:8px !important; font-weight:700 !important; } .skip{background:var(--pb-page-deep) !important;color:var(--pb-text) !important} /* ========================================================================= V4: theme switcher control + light-mode component overrides + legal-page editorial treatment. The html[data-pb-theme="light"] attribute selector adds specificity, so these rules beat each page's own equal-specificity inline-