/**
* Public Page Stylesheet
* ===========================================================================
* Shared styles for long-form, content-first public pages — about-us,
* privacy, terms, credits, powered-by-depolarization-engine, etc.
*
* Activation:
* 1. (after the
* base CSS bundle, before the mobile bundle so mobile can still
* override it).
* 2. — add wn-public-page alongside
* any page-specific class (e.g. "wn-public-page about-us").
*
* Page background image:
* - Each page picks a random background image from a manifest and sets
* --wn-page-bg-image on . It renders on a viewport-pinned fixed
* pseudo-element (body.wn-public-page::after) so `cover` scales to the
* viewport — same scale as index.html — rather than to the full page
* height. See about-us.html for the canonical fetch-and-set script.
*
* Class vocabulary (used in HTML):
* .main-content — full-bleed content region (mirrors index)
* .content-container — centered max-width 780 wrapper
* .content-section — dark translucent card for the body copy
* .wn-lede — larger opening paragraph
* .wn-pullquote — accented pull quote
* .pullquote-small — footnote/caveat inside a pull quote
* .wn-principle — title + body block for a stand-on idea
* .principle-title, .principle-body
* .wn-chapter — titled block with a top divider
* .chapter-meta, .chapter-title
* .wn-close — quiet closing invitation / CTA block
* .wn-credentials — smaller, denser bio/evidence section
* .wn-contact-info — email / phone / address card
* .contact-item, .contact-label, .contact-value
* .wn-related-page — bottom-of-page pointer to a companion page
* .wn-white-label-demos — optional white-label demo entry (about-us only)
* .wn-demo-pills, .wn-demo-pill, .wn-demo-note
* .wn-last-updated — small centered italic "Last updated: DATE" line
* .wn-callout — filled blue-tinted callout box (emphatic note
* inside body copy, e.g. "Quick Summary")
* .wn-callout-warn — add alongside .wn-callout for amber/warning
* variant (compliance, TCPA, "important" blocks)
* ===========================================================================
*/
/* ---------- Shared CSS variables ---------- */
/* frontend.css already defines --wn-text, --wn-text-muted, --wn-background. */
:root {
--wn-accent: #e94560;
--wn-blue: #64b5f6;
--wn-blue-rgb: 100, 181, 246;
}
/* ---------- Base layout ---------- */
html { height: 100%; }
body.wn-public-page {
font-family: 'Titillium Web', sans-serif;
color: var(--wn-text);
min-height: 100%;
display: flex;
flex-direction: column;
margin: 0 !important;
padding: 0;
overflow-x: auto;
background: transparent !important;
max-width: 100% !important;
}
/* Fixed dark backdrop — covers full viewport including Safari safe areas so
the body's transparent background never reveals a white flash when the
iOS chrome collapses on scroll. */
body.wn-public-page::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background: #0b0d1a;
pointer-events: none;
}
@media (max-width: 768px) {
body.wn-public-page::before { background: #000000; }
}
/* Fixed section-background image layer — pinned to the viewport (not the
full page height) so `cover` scales to viewport dimensions, matching the
look of index.html's .description-section::before. Stacks on top of the
dark backdrop because ::after renders after ::before at the same z-index.
--wn-page-bg-image is set on by each page's fetch script. */
body.wn-public-page::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image: var(--wn-page-bg-image, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.1;
pointer-events: none;
}
@media (max-width: 768px) {
body.wn-public-page::after { opacity: 0.3; }
}
/* LU (Live Updater?) injects a root element some browsers render in-flow.
Kill it everywhere on public pages. */
body.wn-public-page #LU__root_ele {
display: none !important;
position: absolute !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* Public pages have no scenario context, so hide any mobile scenario/auth
overlays that other parts of the app load globally. */
@media (min-width: 769px) {
body.wn-public-page .mobile-overlay,
body.wn-public-page #mobile-scenario-overlay,
body.wn-public-page .mobile-auth-container,
body.wn-public-page .mobile-scenario-container,
body.wn-public-page .mobile-menu-overlay {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
z-index: -9999 !important;
}
}
/* ---------- Single content section (mirrors index .description-section) ---------- */
.wn-public-page .main-content {
flex: 1 0 auto;
position: relative;
z-index: 1;
/* Body carries the real top clearance via header.css padding-top rules
(desktop 204px / iPad portrait 204px / mobile handled below). Only a
small visual buffer is needed here. */
padding: 0.5rem 0 1rem 0;
min-height: calc(100vh - 200px);
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.wn-public-page .main-content > * {
position: relative;
z-index: 1;
}
/* Desktop baseline gap between breadcrumbs bar and the top of the content
card — creates breathing room so the card doesn't sit tight against the
breadcrumbs. The breadcrumb-line ladder below adds more on top of this
when extra breadcrumb rows (terminal greeting, account nudge) are present. */
@media (min-width: 769px) {
.wn-public-page .main-content { padding-top: 75px; }
}
/* Breadcrumb-line ladder — each extra breadcrumb row pushes the top of the
content card down a little more to avoid collision with the fixed
breadcrumbs bar. Body classes (breadcrumbs-2-lines / -3-lines / -4-lines)
are set by the breadcrumbs component at load time. Values are composed
from the 75px desktop baseline above. */
@media (min-width: 769px) {
body.wn-public-page.breadcrumbs-2-lines .main-content { padding-top: calc(75px + 1.25rem); }
body.wn-public-page.breadcrumbs-3-lines .main-content { padding-top: calc(75px + 2.25rem); }
body.wn-public-page.breadcrumbs-4-lines .main-content { padding-top: calc(75px + 3.25rem); }
}
@media (max-width: 768px) {
/* mobile.css sets .main-content { padding-top: 0 !important } for all non-dashboard
pages — restore public-page clearance below fixed breadcrumbs. */
body.wn-public-page:not(.dashboard-style) .main-content { padding-top: 48px !important; }
body.wn-public-page.breadcrumbs-2-lines:not(.dashboard-style) .main-content { padding-top: 105px !important; }
body.wn-public-page.breadcrumbs-3-lines:not(.dashboard-style) .main-content { padding-top: 120px !important; }
body.wn-public-page.breadcrumbs-4-lines:not(.dashboard-style) .main-content { padding-top: 135px !important; }
}
/* Keep component containers tight — they're pure mount points. */
.wn-public-page .component-container {
margin: 0 !important;
padding: 0 !important;
}
.wn-public-page #header-container,
.wn-public-page #main-menu-container {
margin-bottom: 0;
}
/* Footer sticks to the bottom of the viewport when content is short. */
.wn-public-page .app-footer {
position: sticky;
bottom: 0;
z-index: 100;
}
/* ---------- Content container + card typography ---------- */
.wn-public-page .content-container {
max-width: 780px;
padding: 0 15px;
margin: 0 auto;
}
/* Project Jupiter report + guide + fuel cells: a bit wider than default public pages (780px) */
body.project-jupiter-report .content-container,
body.project-jupiter-guide .content-container,
body.project-jupiter-fuel-cells .content-container {
max-width: 900px;
padding-left: clamp(1rem, 3vw, 1.5rem);
padding-right: clamp(1rem, 3vw, 1.5rem);
}
.wn-public-page .content-section {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 40px 48px;
margin: 0 0 20px 0;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.wn-public-page .content-section h1 {
font-size: 2.75rem;
line-height: 1.15;
margin-bottom: 1.5rem;
color: var(--wn-text);
font-weight: 700;
letter-spacing: -0.01em;
}
.wn-public-page .content-section h2 {
font-size: 1.65rem;
line-height: 1.25;
margin-bottom: 1rem;
margin-top: 3rem;
color: var(--wn-text);
font-weight: 600;
}
.wn-public-page .content-section h3 {
font-size: 1.2rem;
line-height: 1.3;
margin-bottom: 0.5rem;
margin-top: 2rem;
color: var(--wn-text);
font-weight: 600;
}
.wn-public-page .content-section h4 {
font-size: 1.05rem;
line-height: 1.35;
margin-bottom: 0.4rem;
margin-top: 1.25rem;
color: var(--wn-text);
font-weight: 600;
}
.wn-public-page .content-section p {
font-size: 1.08rem;
line-height: 1.75;
color: var(--wn-text-muted);
margin-bottom: 1.25rem;
}
.wn-public-page .content-section p:last-child { margin-bottom: 0; }
.wn-public-page .content-section em { color: var(--wn-text); font-style: italic; }
.wn-public-page .content-section strong { color: var(--wn-text); font-weight: 600; }
.wn-public-page .content-section a {
color: #60a5fa;
text-decoration: underline;
}
.wn-public-page .content-section a:hover { color: #93c5fd; }
/* Lists inside the content card — legal/policy pages lean on these heavily. */
.wn-public-page .content-section ul,
.wn-public-page .content-section ol {
margin: 0 0 1.25rem 0;
padding-left: 1.5rem;
color: var(--wn-text-muted);
}
.wn-public-page .content-section li {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 0.5rem;
}
.wn-public-page .content-section li:last-child { margin-bottom: 0; }
.wn-public-page .content-section li strong { color: var(--wn-text); }
/* ---------- Long-form semantic patterns ---------- */
/* Last-updated line — small centered italic metadata line just under an h1.
Typical usage: Last updated: January 21, 2026
*/
.wn-last-updated {
text-align: center;
color: var(--wn-text-muted);
font-style: italic;
font-size: 0.95rem;
margin-top: -0.5rem;
margin-bottom: 2rem;
}
/* Callout — emphatic block for "at a glance" / "TL;DR" / "note" boxes
inside body copy. Stronger visual weight than .wn-principle (which is
understated). Default is blue-tinted; combine with .wn-callout-warn for
an amber variant (compliance/warning emphasis). */
.wn-callout {
background: rgba(var(--wn-blue-rgb), 0.1);
border-left: 3px solid var(--wn-blue);
border-radius: 4px;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
color: var(--wn-text);
}
.wn-callout > :first-child { margin-top: 0; }
.wn-callout > :last-child { margin-bottom: 0; }
.wn-callout strong { color: var(--wn-text); }
/* Nested headings inside a callout — suppress the generous top margins the
content-section defaults would otherwise give them. */
.wn-callout h3,
.wn-callout h4 {
margin-top: 0.75rem;
color: var(--wn-text);
}
.wn-callout > h3:first-child,
.wn-callout > h4:first-child { margin-top: 0; }
/* Warning / compliance variant — amber accent for TCPA, 10DLC, regulatory,
or "important notice" blocks. Usage: */
.wn-callout-warn {
background: rgba(255, 193, 7, 0.08);
border-left-color: #ffc107;
}
.wn-callout-warn h3,
.wn-callout-warn h4 { color: #ffc107; }
/* Intro lede — use on the first paragraph for a slightly larger opening. */
.wn-lede {
font-size: 1.25rem !important;
line-height: 1.65 !important;
color: var(--wn-text) !important;
margin-bottom: 2rem !important;
}
/* Pull quote — emphatic quote with accent-left border. Use .pullquote-small
inside for a caveat / footnote row beneath the quote. */
.wn-pullquote {
border-left: 3px solid var(--wn-accent);
padding: 0.5rem 0 0.5rem 1.5rem;
margin: 2.5rem 0;
font-size: 1.35rem;
line-height: 1.5;
color: var(--wn-text);
font-weight: 300;
font-style: normal;
}
.wn-pullquote .pullquote-small {
display: block;
margin-top: 0.75rem;
font-size: 0.9rem;
color: var(--wn-text-muted);
font-weight: 400;
}
/* Principle block — titled mini-section with a subtle blue left border. */
.wn-principle {
margin: 1.75rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(var(--wn-blue-rgb), 0.45);
}
.wn-principle .principle-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--wn-text);
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.wn-principle .principle-body {
font-size: 1.05rem;
line-height: 1.7;
color: var(--wn-text-muted);
}
/* Chapter block — titled narrative block with a top divider between chapters.
The first chapter suppresses its own divider. */
.wn-chapter {
margin: 2.5rem 0;
padding: 1.5rem 0 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.wn-chapter:first-of-type {
border-top: none;
padding-top: 0;
}
.wn-chapter .chapter-meta {
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wn-text-muted);
margin-bottom: 0.5rem;
}
.wn-chapter .chapter-title {
font-size: 1.35rem;
font-weight: 600;
color: var(--wn-text);
margin-bottom: 1rem;
line-height: 1.3;
}
/* White-label demo entry — about-us only; low-profile prospect entry point. */
.wn-white-label-demos {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.95rem;
line-height: 1.65;
color: var(--wn-text-muted);
}
.wn-white-label-demos h2 {
font-size: 1.35rem;
font-weight: 600;
color: var(--wn-text);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.wn-white-label-demos p {
font-size: 0.95rem !important;
line-height: 1.65 !important;
margin-bottom: 0.75rem !important;
}
.wn-white-label-demos .wn-demo-note {
font-size: 0.85rem !important;
color: var(--wn-text-muted);
margin-bottom: 0 !important;
}
.wn-demo-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.65rem;
margin-top: 1.25rem;
}
.wn-demo-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 14px;
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: var(--wn-blue);
background: transparent;
border: 1px solid rgba(var(--wn-blue-rgb), 0.45);
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wn-demo-pill:hover,
.wn-demo-pill:focus-visible {
color: #90caf9;
background: rgba(var(--wn-blue-rgb), 0.12);
border-color: rgba(var(--wn-blue-rgb), 0.7);
outline: none;
}
@media (max-width: 768px) {
.wn-demo-pills {
flex-direction: column;
align-items: stretch;
}
.wn-demo-pill {
width: 100%;
min-height: 40px;
}
}
/* Closing invitation — quiet CTA block, separated from body by a faint rule. */
.wn-close {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 1.15rem;
line-height: 1.7;
color: var(--wn-text);
}
.wn-close a {
color: var(--wn-blue);
text-decoration: none;
border-bottom: 1px solid rgba(var(--wn-blue-rgb), 0.4);
transition: color 0.2s ease, border-color 0.2s ease;
}
.wn-close a:hover {
color: #90caf9;
border-bottom-color: #90caf9;
}
/* Credentials / Background — smaller, denser block for bio/evidence content. */
.wn-credentials {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.95rem;
line-height: 1.65;
color: var(--wn-text-muted);
}
.wn-credentials h3 {
font-size: 1rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wn-text-muted);
margin-bottom: 0.75rem !important;
margin-top: 0 !important;
font-weight: 600;
}
.wn-credentials p {
font-size: 0.95rem !important;
line-height: 1.65 !important;
margin-bottom: 0.75rem !important;
}
/* Contact information card — email / phone / address rows. */
.wn-contact-info {
background: rgba(15, 52, 96, 0.3);
border-left: 4px solid var(--wn-blue);
padding: 20px;
margin-top: 2rem;
border-radius: 6px;
}
.wn-contact-info h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--wn-text);
font-weight: 600;
}
.wn-contact-info p { margin-bottom: 0.75rem; font-size: 1rem; }
.wn-contact-info a {
color: var(--wn-blue);
text-decoration: none;
transition: color 0.2s ease;
}
.wn-contact-info a:hover {
color: #90caf9;
text-decoration: underline;
}
.wn-contact-info .contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.wn-contact-info .contact-item:last-child { margin-bottom: 0; }
.wn-contact-info .contact-label {
font-weight: 600;
color: var(--wn-text);
min-width: 80px;
margin-right: 10px;
}
.wn-contact-info .contact-value {
color: var(--wn-text-muted);
flex: 1;
}
/* Related-page link — bottom-of-page pointer to a companion page. */
.wn-related-page {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
text-align: center;
font-size: 1.05rem;
line-height: 1.6;
color: var(--wn-text-muted);
}
.wn-related-page a {
color: var(--wn-blue);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.wn-related-page a:hover {
color: #90caf9;
text-decoration: underline;
}
/* ---------- Mobile typography tweaks ---------- */
@media (max-width: 768px) {
.wn-public-page .content-section { padding: 28px 22px; }
.wn-public-page .content-section h1 { font-size: 2rem; }
body.project-jupiter-report .content-section h1 {
font-size: 1.65rem;
line-height: 1.28;
margin-top: 0.35rem;
hyphens: auto;
}
body.project-jupiter-guide .content-section h1 {
font-size: 1.65rem;
line-height: 1.28;
margin-top: 0.35rem;
hyphens: auto;
}
body.project-jupiter-fuel-cells .content-section h1 {
font-size: 1.65rem;
line-height: 1.28;
margin-top: 0.35rem;
hyphens: auto;
}
.wn-public-page .content-section h2 { font-size: 1.4rem; }
.wn-lede { font-size: 1.12rem !important; }
.wn-pullquote {
font-size: 1.15rem;
padding-left: 1rem;
}
}