/**
* Wake the Nation — Phase 1 product chrome
* DRAFT · HOLD LIVE $ · HOLD LIVE bots · Core Four LOCK
* Branding wave 2026-09-25: Faith & Reason / Wake Nation patriotic navy-white-red
*/
@import url("./paywall.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@400;500;600&display=swap");
:root {
/* Patriotic Wake Nation: navy · white · red (replaces cream-gold brown) */
color-scheme: dark;
--wn-bg: #0a1628;
--wn-bg-elev: #102038;
--wn-bg-3: #152a45;
--wn-panel: #132844;
--wn-panel-elev: #1a3558;
--wn-border: rgba(170, 200, 255, 0.22);
--wn-border-strong: rgba(200, 16, 46, 0.48);
--wn-cream: #f4f7fc;
--wn-cream-dim: #a8b8d0;
--wn-gold: #c8102e;
--wn-gold-bright: #5b9fd4;
--wn-gold-soft: rgba(91, 159, 212, 0.14);
--wn-red: #ba0c2f;
--wn-ink: #0a1628;
--wn-font: "Poppins", system-ui, sans-serif;
--wn-display: "Montserrat", system-ui, sans-serif;
--wn-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
--wn-radius: 12px;
--wn-max: 960px;
--wn-nav-h: 52px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background:
radial-gradient(ellipse 90% 50% at 50% -8%, rgba(91, 159, 212, 0.12), transparent 55%),
var(--wn-bg);
-webkit-font-smoothing: antialiased;
color: var(--wn-cream);
font-family: var(--wn-font);
line-height: 1.55;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
width: min(100% - 2rem, var(--wn-max));
margin: 0 auto;
padding: 1.5rem 0 2.75rem;
flex: 1;
}
h1, h2, h3 { font-family: var(--wn-display); letter-spacing: -0.01em; }
h1 {
margin: 0;
font-size: clamp(1.7rem, 6.5vw, 2.65rem);
line-height: 1.05;
font-weight: 800;
background: linear-gradient(180deg, #ffffff 0%, var(--wn-cream) 55%, #c5d4ea 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
h1 { color: var(--wn-cream); background: none; }
}
h2 { margin: 0 0 .45rem; font-size: 1.12rem; color: var(--wn-gold-bright); font-weight: 700; }
h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--wn-gold-bright); font-weight: 700; }
a.inline { color: var(--wn-gold-bright); text-underline-offset: 2px; }
/* Hero brand lockup */
.wn-hero-lockup {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0 0 1rem;
}
.wn-hero-mark {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.15rem;
}
.wn-hero-mark img {
height: 2.1rem;
width: auto;
display: block;
}
.wn-hero-product {
font-family: var(--wn-display);
font-size: clamp(0.95rem, 3vw, 1.15rem);
font-weight: 800;
letter-spacing: 0.04em;
color: var(--wn-gold-bright);
text-transform: uppercase;
}
.wn-hero-promise {
font-family: var(--wn-display);
font-size: clamp(1.35rem, 5vw, 2rem);
font-weight: 800;
letter-spacing: 0.02em;
color: var(--wn-cream);
margin: 0.15rem 0 0;
}
.wn-hero-pac {
color: var(--wn-cream-dim);
font-size: 0.88rem;
margin: 0.2rem 0 0;
}
.wn-eyebrow {
color: var(--wn-gold-bright);
font-family: var(--wn-display);
font-size: .68rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 .55rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.wn-eyebrow::before {
content: "";
display: inline-block;
width: 1.1rem;
height: 2px;
background: linear-gradient(90deg, var(--wn-gold), transparent);
}
.wn-lede {
color: var(--wn-cream-dim);
font-size: 1.05rem;
margin: .85rem 0;
max-width: 42rem;
line-height: 1.6;
}
.wn-purpose {
margin: 0.35rem 0 0.75rem;
color: #e8dcc8;
font-size: 0.92rem;
line-height: 1.45;
max-width: 42rem;
}
.wn-purpose strong { color: #f2c13d; }
.wn-sub {
color: var(--wn-cream-dim);
font-size: .94rem;
margin: 0 0 1.1rem;
max-width: 42rem;
}
.wn-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: .28rem .65rem;
border: 1px solid rgba(91, 159, 212, 0.38);
border-radius: 999px;
color: var(--wn-gold-bright);
font-size: .64rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
background: var(--wn-gold-soft);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.wn-hold {
margin: 1rem 0;
padding: .9rem 1.05rem;
border: 1px dashed rgba(186,12,47,.55);
border-radius: var(--wn-radius);
color: var(--wn-cream-dim);
font-size: .82rem;
background: rgba(186,12,47,.07);
}
.wn-hold strong { color: var(--wn-cream); }
.wn-brand-hold {
color: var(--wn-cream-dim);
font-size: .75rem;
font-weight: 600;
letter-spacing: .03em;
margin: .55rem 0 0;
max-width: 40rem;
padding: 0.45rem 0.65rem;
border-left: 2px solid rgba(186,12,47,.55);
background: rgba(186,12,47,.04);
}
.wn-panel {
background: linear-gradient(165deg, var(--wn-panel-elev) 0%, var(--wn-panel) 100%);
border: 1px solid var(--wn-border);
border-radius: var(--wn-radius);
padding: 1.1rem 1.15rem;
margin: 1rem 0;
box-shadow: var(--wn-shadow);
position: relative;
}
.wn-panel::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(242,193,61,.35), transparent);
border-radius: var(--wn-radius) var(--wn-radius) 0 0;
pointer-events: none;
}
.wn-cta-row {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: 1.25rem 0 1.5rem;
}
.wn-cta-row .fp-btn {
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wn-cta-row .fp-btn-primary {
box-shadow: 0 4px 16px rgba(217, 164, 65, 0.28);
}
.wn-grid { display: grid; gap: .85rem; margin: 1rem 0; }
@media (min-width: 700px) {
.wn-grid-2 { grid-template-columns: 1fr 1fr; }
.wn-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Product nav — Core Four first */
.wn-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem .5rem;
padding: .7rem 1rem;
background: rgba(11, 9, 7, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wn-border);
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
font-family: var(--wn-display);
font-size: .7rem;
letter-spacing: .07em;
text-transform: uppercase;
position: sticky;
top: 0;
z-index: 50;
}
.wn-nav .wn-brand {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--wn-gold-bright);
font-weight: 800;
text-decoration: none;
margin-right: .45rem;
letter-spacing: .03em;
text-transform: none;
font-size: .88rem;
padding: 0.15rem 0.25rem 0.15rem 0;
}
.wn-nav .wn-brand img {
height: 1.55rem;
width: auto;
display: block;
flex-shrink: 0;
}
.wn-nav .wn-brand .wn-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
gap: 0.08rem;
}
.wn-nav .wn-brand .wn-brand-name {
font-size: 0.82rem;
font-weight: 800;
color: var(--wn-gold-bright);
}
.wn-nav .wn-brand .wn-brand-tag {
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wn-cream-dim);
}
.wn-nav a {
color: var(--wn-cream-dim);
text-decoration: none;
padding: .35rem .55rem;
border-radius: 999px;
border: 1px solid transparent;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.wn-nav a:hover, .wn-nav a:focus {
color: var(--wn-gold-bright);
border-color: var(--wn-border);
outline: none;
}
.wn-nav a.is-current {
color: var(--wn-gold-bright);
border-color: var(--wn-gold);
background: var(--wn-gold-soft);
}
.wn-nav .wn-sep { opacity: .35; user-select: none; }
.wn-nav .wn-core {
color: var(--wn-cream);
border: 1px solid rgba(242,193,61,.22);
}
.wn-nav .wn-core.is-current {
border-color: var(--wn-gold);
background: rgba(242,193,61,.1);
}
.wn-nav .wn-donate {
color: var(--wn-cream);
border: 1px solid var(--wn-border);
}
.wn-nav .wn-subscribe {
background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
color: var(--wn-ink);
font-weight: 700;
border: 1px solid var(--wn-gold);
}
.wn-nav .wn-subscribe:hover, .wn-nav .wn-subscribe:focus {
background: var(--wn-gold);
color: #fff;
filter: brightness(1.05);
}
.wn-nav .wn-draft {
margin-left: auto;
font-size: .62rem;
letter-spacing: .12em;
color: var(--wn-red);
border: 1px solid rgba(186,12,47,.55);
padding: .2rem .45rem;
border-radius: 4px;
background: rgba(186,12,47,.08);
}
.wn-nav .wn-session {
font-size: .62rem;
letter-spacing: .04em;
text-transform: none;
color: var(--wn-gold-bright);
opacity: .9;
}
/* Secondary family → compact site switcher (Pass 24) */
.wn-family-secondary {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: .35rem .55rem;
padding: .28rem 0.85rem;
background: var(--wn-bg-elev);
border-bottom: 1px solid rgba(213,196,168,.12);
font-family: var(--wn-display);
font-size: .62rem;
letter-spacing: .04em;
text-transform: none;
color: var(--wn-cream-dim);
}
.wn-family-secondary a { display: none; }
.wn-family-secondary .label { display: none; }
.wn-site-switch-label {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wn-cream-dim);
opacity: 0.75;
white-space: nowrap;
}
.wn-site-switch {
flex: 0 1 auto;
max-width: min(18rem, 72vw);
min-height: 2rem;
padding: 0.25rem 0.55rem;
border-radius: 8px;
border: 1px solid rgba(91,159,212,.35);
background: rgba(11, 9, 7, 0.92);
color: var(--wn-cream);
font-family: var(--wn-display);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
cursor: pointer;
}
.wn-site-switch:focus {
outline: 2px solid var(--wn-gold-bright);
outline-offset: 1px;
}
/* Fold cards */
.wn-fold-grid { display: grid; gap: .8rem; margin: 1.35rem 0; }
@media (min-width: 700px) { .wn-fold-grid { grid-template-columns: 1fr 1fr; } }
.wn-fold {
background: linear-gradient(165deg, var(--wn-panel-elev), var(--wn-panel));
border: 1px solid var(--wn-border-strong);
border-radius: var(--wn-radius);
padding: 1.15rem;
box-shadow: var(--wn-shadow);
position: relative;
overflow: hidden;
}
.wn-fold::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 4.5rem; height: 4.5rem;
background: radial-gradient(circle at top right, rgba(242,193,61,.14), transparent 70%);
pointer-events: none;
}
.wn-fold .ratio {
font-family: var(--wn-display);
font-size: clamp(1.7rem, 5vw, 2.35rem);
font-weight: 800;
margin: .25rem 0;
color: var(--wn-gold-bright);
letter-spacing: -0.02em;
}
.wn-fold .meta { color: var(--wn-cream-dim); font-size: .84rem; margin: 0; }
.wn-fold .cite { color: rgba(213,196,168,.72); font-size: .72rem; margin: .55rem 0 0; }
.wn-calc label { display: block; color: var(--wn-cream-dim); font-size: .8rem; margin: .4rem 0 .15rem; }
.wn-calc input, .wn-calc select {
width: 100%;
max-width: 16rem;
padding: .5rem .65rem;
border-radius: 8px;
border: 1px solid rgba(213,196,168,.35);
background: var(--wn-bg);
color: var(--wn-cream);
font-size: .95rem;
}
.wn-calc input:focus, .wn-calc select:focus {
outline: none;
border-color: var(--wn-gold);
box-shadow: 0 0 0 2px rgba(91,159,212,.22);
}
.wn-calc-out {
margin-top: .75rem;
color: var(--wn-gold-bright);
font-weight: 700;
font-size: .95rem;
min-height: 1.4rem;
}
.wn-sample-tag {
display: inline-block;
background: var(--wn-gold);
color: #fff;
font-size: .65rem;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: .06em;
vertical-align: middle;
}
.wn-out {
margin-top: .75rem;
padding: .75rem;
border-radius: 8px;
background: var(--wn-bg);
border: 1px solid rgba(242,193,61,.3);
color: var(--wn-cream-dim);
font-size: .88rem;
white-space: pre-wrap;
min-height: 4rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fp-btn[disabled], button.fp-btn:disabled {
cursor: not-allowed;
opacity: .55;
}
/* Dashboard cards + customize panel */
.wn-dash-grid {
display: grid;
gap: 0.85rem;
margin: 1rem 0 1.5rem;
}
@media (min-width: 640px) {
.wn-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.wn-dash-grid { grid-template-columns: repeat(3, 1fr); }
}
.wn-dash-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
background: linear-gradient(165deg, var(--wn-panel-elev), var(--wn-panel));
border: 1px solid var(--wn-border);
border-radius: var(--wn-radius);
padding: 1rem 1.05rem;
text-decoration: none;
color: inherit;
box-shadow: var(--wn-shadow);
transition: border-color .15s ease, transform .15s ease;
min-height: 6.5rem;
}
.wn-dash-card:hover, .wn-dash-card:focus {
border-color: var(--wn-gold);
outline: none;
transform: translateY(-1px);
}
.wn-dash-card .wn-dash-label {
font-family: var(--wn-display);
font-weight: 800;
font-size: 0.98rem;
color: var(--wn-gold-bright);
}
.wn-dash-card .wn-dash-blurb {
color: var(--wn-cream-dim);
font-size: 0.8rem;
margin: 0;
flex: 1;
}
.wn-dash-card .wn-dash-group {
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(213,196,168,.7);
font-weight: 700;
}
.wn-dash-empty {
color: var(--wn-cream-dim);
font-size: 0.9rem;
padding: 1rem;
border: 1px dashed var(--wn-border);
border-radius: var(--wn-radius);
}
.wn-toggle-list {
display: grid;
gap: 0.45rem;
margin: 0.75rem 0 1rem;
}
@media (min-width: 700px) {
.wn-toggle-list { grid-template-columns: 1fr 1fr; }
}
.wn-toggle-row {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--wn-border);
border-radius: 10px;
background: var(--wn-bg);
cursor: pointer;
user-select: none;
}
.wn-toggle-row:hover { border-color: rgba(242,193,61,.4); }
.wn-toggle-row input {
width: 1.05rem;
height: 1.05rem;
accent-color: var(--wn-gold);
flex-shrink: 0;
}
.wn-toggle-row .wn-toggle-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.wn-toggle-row .wn-toggle-label {
font-weight: 700;
font-size: 0.88rem;
color: var(--wn-cream);
}
.wn-toggle-row .wn-toggle-hint {
font-size: 0.72rem;
color: var(--wn-cream-dim);
}
.wn-rail-note {
margin: 0.75rem 0 0;
font-size: 0.8rem;
color: var(--wn-cream-dim);
padding: 0.65rem 0.8rem;
border-left: 3px solid var(--wn-gold);
background: var(--wn-gold-soft);
border-radius: 0 8px 8px 0;
}
@media (max-width: 640px) {
.wn-nav { font-size: .6rem; gap: .2rem .3rem; }
.wn-nav .wn-brand { width: 100%; margin-bottom: .15rem; }
.wn-nav .wn-draft { margin-left: 0; }
}
.wn-nav a.wn-soon {
opacity: 0.55;
border-style: dashed;
font-size: 0.62rem;
}
.wn-nav a.wn-soon::after {
content: "soon";
margin-left: 0.25rem;
font-size: 0.55rem;
color: var(--wn-red);
letter-spacing: 0.06em;
}
.wn-sticky-weekly {
position: sticky;
bottom: 0;
z-index: 40;
background: rgba(22, 18, 12, 0.97);
border-top: 1px solid rgba(91, 159, 212, 0.35);
padding: 0.65rem 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
justify-content: center;
font-size: 0.82rem;
color: var(--wn-cream-dim);
backdrop-filter: blur(8px);
}
.wn-sticky-weekly strong { color: var(--wn-gold-bright); }
/* —— Orgs / Reps / Geo / Taxes Soft (2026-09-25) —— */
.wn-geo-crumb { display:flex; flex-wrap:wrap; gap:.35rem .55rem; align-items:center; margin:.75rem 0 1rem; font-size:.82rem; color:var(--wn-cream-dim); }
.wn-geo-crumb a { color:var(--wn-gold-bright); }
.wn-geo-sep { opacity:.55; }
.wn-geo-grain { color:var(--wn-gold); font-weight:600; }
.wn-geo-band { border:1px solid var(--wn-border); border-radius:12px; padding:.85rem 1rem; margin:.55rem 0; background:var(--wn-panel); }
.wn-geo-band.is-active { border-color:var(--wn-border-strong); box-shadow:0 0 0 1px rgba(242,193,61,.15); }
.wn-geo-note { margin:.15rem 0 .55rem; color:var(--wn-cream-dim); font-size:.82rem; }
.wn-geo-links { display:flex; flex-wrap:wrap; gap:.45rem; }
.wn-layer-band { margin:1.25rem 0; }
.wn-layer-band h2 { display:flex; align-items:baseline; gap:.5rem; }
.wn-count { font-size:.75rem; color:var(--wn-cream-dim); font-weight:600; }
.wn-rep-grid, .wn-tax-grid { display:grid; gap:.75rem; }
@media (min-width:800px) {
.wn-rep-grid, .wn-tax-grid { grid-template-columns:1fr 1fr; }
}
.wn-rep-card, .wn-tax-card, .wn-org-row {
background:var(--wn-bg); border:1px solid var(--wn-border); border-radius:12px; padding:.9rem 1rem;
}
.wn-rep-head, .wn-org-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.35rem; }
.wn-layer-badge, .wn-office-label, .wn-status {
font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
border-radius:999px; padding:.2rem .5rem; border:1px solid var(--wn-border);
}
.wn-layer-badge.layer-federal { border-color:rgba(100,149,237,.5); color:#9ec1ff; }
.wn-layer-badge.layer-state { border-color:rgba(91,159,212,.45); color:var(--wn-gold-bright); }
.wn-layer-badge.layer-county { border-color:rgba(120,200,140,.45); color:#9ed9a8; }
.wn-layer-badge.layer-city { border-color:rgba(220,160,120,.5); color:#f0c2a0; }
.wn-layer-badge.layer-district { border-color:rgba(180,160,220,.45); color:#d2c4f0; }
.wn-layer-badge.layer-elected { border-color:rgba(91,159,212,.45); color:var(--wn-gold-bright); }
.wn-layer-badge.layer-appointed { border-color:rgba(120,180,220,.45); color:#9ec8e8; }
.wn-layer-badge.layer-staff { border-color:rgba(160,160,160,.45); color:#c8c8c8; }
.wn-vote-block, .wn-pay-cell { margin-top:.55rem; }
.wn-vote-empty, .wn-pay-empty, .wn-tax-empty {
border:1px dashed rgba(213,196,168,.35); border-radius:8px; padding:.65rem .75rem; background:rgba(0,0,0,.2);
}
.wn-vote-cite, .wn-pay-cite, .wn-tax-cite {
border:1px solid rgba(242,193,61,.35); border-radius:8px; padding:.65rem .75rem; background:rgba(91,159,212,.08);
}
.wn-cite-asof, .wn-tiny-note { font-size:.72rem; color:var(--wn-cream-dim); }
.wn-cta-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem; }
.wn-cite-paste, .wn-cite-paste details, details.wn-cite-paste {
margin-top:.55rem; font-size:.82rem; color:var(--wn-cream-dim);
}
details.wn-cite-paste summary, .wn-cite-paste summary { cursor:pointer; color:var(--wn-gold-bright); }
details.wn-cite-paste label, .wn-cite-paste label {
display:block; margin:.4rem 0; font-size:.78rem;
}
details.wn-cite-paste input, .wn-cite-paste input, .wn-panel input[type="search"], .wn-panel input[type="text"], .wn-panel input[type="url"], .wn-panel select {
width:100%; margin-top:.2rem; padding:.45rem .55rem; border-radius:8px;
border:1px solid var(--wn-border); background:var(--wn-bg); color:var(--wn-cream);
}
.wn-org-band { margin:1.25rem 0; padding:0; }
.wn-org-band-h { margin-bottom:.55rem; }
.wn-org-band .wn-org-row { margin:.5rem 0; }
.wn-office-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 1rem; }
.wn-tab {
display:inline-block; padding:.35rem .65rem; border-radius:999px; font-size:.75rem; font-weight:600;
border:1px solid var(--wn-border); color:var(--wn-cream-dim); text-decoration:none;
}
.wn-tab.is-current { border-color:var(--wn-gold); color:var(--wn-gold-bright); background:rgba(91,159,212,.10); }
.wn-muted { color:var(--wn-cream-dim); font-size:.85rem; }
.wn-tiny, .wn-tiny-note { font-size:.72rem; }
.wn-eyebrow { /* already in chrome */ }
.fp-btn.wn-tiny { font-size:.7rem; padding:.3rem .55rem; }
/* —— DESIGN-WAVE1 / Pass1 chrome —— */
/* Grouped primary nav · Wake-family lockup · ≤640px disclosure */
.wn-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
min-height: var(--wn-nav-h);
padding: 0.55rem 1rem;
background: rgba(13, 11, 9, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wn-border);
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
font-family: var(--wn-display);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
position: sticky;
top: 0;
z-index: 50;
}
.wn-nav .wn-brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
margin-right: 0.35rem;
text-transform: none;
letter-spacing: 0.03em;
padding: 0.1rem 0.2rem 0.1rem 0;
}
.wn-nav .wn-brand-flag {
width: 28px; height: 28px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--wn-gold);
flex-shrink: 0;
}
.wn-nav .wn-brand-text { display: flex; flex-direction: column; line-height: 1.1; gap: 0.1rem; }
.wn-nav .wn-brand-wm {
font-size: 0.92rem; font-weight: 800; color: var(--wn-cream);
letter-spacing: 0.05em; text-transform: uppercase;
}
.wn-nav .wn-brand-tag {
font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--wn-cream-dim);
}
/* Banner Soft — fixed WAKE.the.NATION wordmark + separate theater switch */
.wn-nav .wn-brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
margin-right: 0.35rem;
text-transform: none;
letter-spacing: 0.03em;
padding: 0.1rem 0.2rem 0.1rem 0;
position: relative;
}
.wn-nav .wn-brand-flag-link {
display: inline-flex;
flex-shrink: 0;
padding: 0;
border: none;
border-radius: 50%;
line-height: 0;
}
.wn-nav .wn-brand-flag-link:hover,
.wn-nav .wn-brand-flag-link:focus {
outline: 2px solid var(--wn-gold-bright);
outline-offset: 2px;
}
.wn-nav .wn-brand-wake {
color: var(--wn-cream);
text-decoration: none;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0;
border: none;
border-radius: 0;
}
.wn-nav .wn-brand-wake:hover,
.wn-nav .wn-brand-wake:focus {
color: var(--wn-gold-bright);
border: none;
outline: none;
}
/* Fixed product wordmark NATION Soft — always Wake the Nation home */
.wn-nav .wn-brand-nation {
color: var(--wn-gold-bright);
text-decoration: none;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0;
border: none;
border-radius: 0;
}
.wn-nav .wn-brand-nation:hover,
.wn-nav .wn-brand-nation:focus {
color: var(--wn-cream);
border: none;
outline: none;
}
.wn-nav .wn-brand-back-nation {
display: inline-flex;
align-items: center;
margin-left: 0.15rem;
padding: 0.15rem 0.45rem;
border-radius: 999px;
border: 1px solid rgba(91,159,212,.35);
color: var(--wn-cream);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: none;
white-space: nowrap;
}
.wn-nav .wn-brand-back-nation:hover,
.wn-nav .wn-brand-back-nation:focus {
color: var(--wn-gold-bright);
border-color: var(--wn-gold-bright);
background: var(--wn-gold-soft);
outline: none;
}
.wn-nav .wn-brand-wm {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.2rem 0.35rem;
}
.wn-wake-switch {
position: relative;
display: inline-block;
text-transform: none;
letter-spacing: 0.04em;
margin-left: 0.1rem;
}
.wn-wake-switch > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.1rem 0.4rem;
border-radius: 6px;
border: 1px solid rgba(91,159,212,.28);
color: var(--wn-cream-dim);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: none;
}
.wn-wake-theater-sum {
color: var(--wn-cream-dim);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: none;
white-space: nowrap;
}
.wn-wake-switch > summary::-webkit-details-marker { display: none; }
.wn-wake-switch > summary:hover,
.wn-wake-switch > summary:focus {
border-color: var(--wn-gold-bright);
outline: none;
background: var(--wn-gold-soft);
}
.wn-wake-switch[open] > summary {
border-color: var(--wn-gold-bright);
background: var(--wn-gold-soft);
}
.wn-wake-noun { color: var(--wn-gold-bright); }
.wn-wake-chev {
font-size: 0.7rem;
color: var(--wn-cream-dim);
line-height: 1;
}
.wn-wake-switch-panel {
position: absolute;
left: 0;
top: calc(100% + 0.4rem);
z-index: 70;
min-width: 14rem;
max-width: min(22rem, 92vw);
max-height: 70vh;
overflow: auto;
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.55rem;
background: var(--wn-bg-elev);
border: 1px solid var(--wn-gold-bright);
border-radius: 10px;
box-shadow: var(--wn-shadow);
text-transform: none;
letter-spacing: 0.02em;
}
.wn-wake-switch-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
width: 100%;
text-align: left;
cursor: pointer;
font-family: var(--wn-display);
background: transparent;
color: var(--wn-cream);
border: 1px solid transparent;
border-radius: 8px;
padding: 0.45rem 0.55rem;
}
.wn-wake-switch-item:hover,
.wn-wake-switch-item:focus {
border-color: var(--wn-border);
background: var(--wn-gold-soft);
color: var(--wn-gold-bright);
outline: none;
}
.wn-wake-switch-item.is-current,
.wn-wake-switch-item[aria-current="true"] {
border-color: var(--wn-gold-bright);
background: var(--wn-gold-soft);
}
.wn-wake-switch-noun {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wn-gold-bright);
}
.wn-wake-switch-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--wn-cream-dim);
letter-spacing: 0.02em;
text-transform: none;
}
.wn-theater-dash-panel {
margin-bottom: 1rem;
}
.wn-theater-dash-panel h3 {
margin: 0 0 0.35rem;
}
@media (max-width: 640px) {
.wn-nav .wn-brand { width: 100%; margin-bottom: 0.15rem; }
.wn-nav .wn-brand-wm {
gap: 0.2rem 0.3rem;
}
.wn-wake-switch > summary {
font-size: 0.62rem;
padding: 0.08rem 0.32rem;
}
.wn-nav .wn-brand-back-nation {
font-size: 0.62rem;
padding: 0.12rem 0.4rem;
}
.wn-wake-switch-panel {
left: 0;
right: auto;
width: min(18rem, 92vw);
max-width: none;
min-width: 0;
}
}
.wn-nav-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; }
.wn-nav-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: 0.25rem; }
.wn-nav a {
color: var(--wn-cream-dim); text-decoration: none;
padding: 0.4rem 0.55rem; border-radius: 999px; border: 1px solid transparent;
font-weight: 600;
}
.wn-nav a:hover, .wn-nav a:focus { color: var(--wn-gold-bright); border-color: var(--wn-border); outline: none; }
.wn-nav a.is-current, .wn-nav a[aria-current="page"] {
color: var(--wn-gold-bright); border-color: var(--wn-gold); background: var(--wn-gold-soft);
}
.wn-nav .wn-core { color: var(--wn-cream); border: 1px solid rgba(91,159,212,.22); }
.wn-nav .wn-nav-reps.is-current, .wn-nav .wn-nav-reps[aria-current="page"] {
background: rgba(242,193,61,.16);
}
.wn-nav .wn-subscribe {
background: linear-gradient(180deg, #e02040, var(--wn-gold));
color: #fff; font-weight: 800; border: 1px solid var(--wn-gold);
}
.wn-nav .wn-subscribe:hover, .wn-nav .wn-subscribe:focus {
background: #e02040; color: #fff; filter: brightness(1.05);
}
.wn-nav .wn-donate {
color: var(--wn-cream); border: 1px solid var(--wn-border);
background: transparent;
}
.wn-nav .wn-donate:hover { border-color: var(--wn-gold); color: var(--wn-gold-bright); }
.wn-nav .wn-draft {
margin-left: auto; font-size: 0.62rem; letter-spacing: 0.12em; color: var(--wn-red);
border: 1px solid rgba(186,12,47,.55); padding: 0.2rem 0.45rem; border-radius: 4px;
background: rgba(186,12,47,.08);
}
.wn-nav-more { position: relative; }
.wn-nav-more > summary {
list-style: none; cursor: pointer; color: var(--wn-cream-dim);
padding: 0.4rem 0.55rem; border-radius: 999px; border: 1px solid var(--wn-border);
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem;
}
.wn-nav-more > summary::-webkit-details-marker { display: none; }
.wn-nav-more[open] > summary { color: var(--wn-gold-bright); border-color: var(--wn-gold); }
.wn-nav-more-panel {
position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 60;
min-width: 12rem; max-width: 18rem; max-height: 70vh; overflow: auto;
display: flex; flex-direction: column; gap: 0.15rem;
padding: 0.55rem; background: var(--wn-bg-elev); border: 1px solid var(--wn-border);
border-radius: 10px; box-shadow: var(--wn-shadow); text-transform: none; letter-spacing: 0.02em;
}
.wn-nav-more-panel a {
border-radius: 8px; font-size: 0.78rem; text-transform: none; letter-spacing: 0.02em;
}
.wn-nav-toggle {
display: none; font-family: var(--wn-display); font-weight: 800; font-size: 0.78rem;
letter-spacing: 0.08em; text-transform: uppercase;
background: transparent; color: var(--wn-cream); border: 1px solid var(--wn-border);
border-radius: 999px; padding: 0.45rem 0.85rem; cursor: pointer; margin-left: auto;
}
.wn-nav-toggle:hover, .wn-nav-toggle:focus { border-color: var(--wn-gold); color: var(--wn-gold-bright); }
.wn-nav-drawer {
width: 100%; margin-top: 0.35rem; padding: 0.65rem 0.25rem 0.85rem;
border-top: 1px solid var(--wn-border); display: flex; flex-direction: column; gap: 0.75rem;
}
.wn-nav-drawer[hidden] { display: none !important; }
.wn-nav-drawer-h {
margin: 0 0 0.35rem; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--wn-gold-bright);
}
.wn-nav-drawer-section { display: flex; flex-direction: column; gap: 0.2rem; }
.wn-nav-drawer-section a {
font-size: 0.95rem; padding: 0.65rem 0.75rem; border-radius: 10px;
text-transform: none; letter-spacing: 0.02em; border: 1px solid transparent;
}
.wn-nav-drawer-section a.is-current { border-color: var(--wn-gold); background: var(--wn-gold-soft); }
@media (max-width: 640px) {
.wn-nav { font-size: 0.85rem; gap: 0.35rem; }
.wn-nav .wn-brand { width: auto; margin-bottom: 0; }
.wn-nav-primary, .wn-nav-rail, .wn-nav-more, .wn-nav .wn-draft { display: none; }
.wn-nav-toggle { display: inline-flex; align-items: center; }
.wn-nav.is-open .wn-nav-drawer { display: flex; }
}
.wn-header-crumb {
background: var(--wn-bg-elev); border-bottom: 1px solid rgba(213,196,168,.12);
padding: 0.35rem 1rem; font-size: 0.78rem; color: var(--wn-cream-dim);
}
.wn-header-crumb-inner { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; max-width: var(--wn-max); margin: 0 auto; }
.wn-header-crumb a { color: var(--wn-gold-bright); text-decoration: none; }
.wn-header-crumb strong { color: var(--wn-cream); font-weight: 600; }
.wn-family-secondary {
background: var(--wn-bg-elev);
}
/* Dashboard Wake-family card rhythm */
.wn-dash-section { margin: 0 0 1.25rem; }
.wn-dash-section-h, .wn-toggle-group-h {
font-family: var(--wn-display); font-size: 0.78rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--wn-gold-bright);
border-left: 3px solid var(--wn-gold); padding-left: 0.55rem; margin: 0.85rem 0 0.55rem;
}
.wn-dash-card {
min-height: 5.75rem; border-radius: 8px; padding: 0.85rem 1rem;
background: var(--wn-bg-elev); border: 1px solid var(--wn-border);
}
.wn-dash-card:hover, .wn-dash-card:focus { background: var(--wn-bg-3); border-color: var(--wn-gold); }
.wn-dash-card-primary { border-color: var(--wn-border-strong); box-shadow: inset 0 0 0 1px rgba(242,193,61,.12); }
.wn-dash-label { color: var(--wn-cream); font-size: 1rem; }
.wn-dash-group { color: rgba(213,196,168,.65); }
/* Dense rep/org/tax cards */
.wn-rep-grid, .wn-tax-grid { gap: 0.55rem; }
.wn-rep-card-dense, .wn-org-row-dense, .wn-tax-card-dense {
padding: 0.7rem 0.85rem; border-radius: 8px; background: var(--wn-bg-elev);
}
.wn-rep-who h3, .wn-tax-card-dense h3 { margin: 0 0 0.15rem; font-size: 1rem; color: var(--wn-cream); }
.wn-rep-role { margin: 0; font-size: 0.78rem; }
.wn-rep-eyebrow { margin: 0.45rem 0 0.3rem !important; font-size: 0.62rem; }
.wn-rep-secondary {
display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; align-items: center;
margin-top: 0.55rem; padding-top: 0.45rem; border-top: 1px dashed rgba(213,196,168,.2);
font-size: 0.72rem; color: var(--wn-cream-dim);
}
.wn-pay-secondary { margin-top: 0.35rem; }
.wn-cite-empty { min-height: 5.5rem; }
.wn-portal-row { gap: 0.35rem; }
.wn-slot-empty {
min-height: 6.5rem; display: flex; align-items: stretch;
}
.wn-slot-empty > * { flex: 1; }
/* Pass 18: shared cite-empty chrome — Address primary above empty slots */
.wn-cite-empty-chrome {
margin: 0.85rem 0 1rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(91,159,212,.35);
border-radius: 12px;
background: rgba(91,159,212,.07);
}
.wn-cite-empty-chrome .wn-cta-row { margin: 0; }
/* Parallel money doors */
.wn-door-grid { display: grid; gap: 0.85rem; margin: 1rem 0; }
@media (min-width: 700px) { .wn-door-grid { grid-template-columns: 1fr 1fr; } }
.wn-door {
background: var(--wn-bg-elev); border: 1px solid var(--wn-border); border-radius: 12px;
padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem;
}
/* Pass 18: bump product vs PAC contrast (esp. phone <700) */
.wn-door-product {
border: 2px solid rgba(91,159,212,.72);
box-shadow: inset 0 0 0 1px rgba(91,159,212,.18), 0 0 0 1px rgba(91,159,212,.12);
background: linear-gradient(180deg, rgba(91,159,212,.1) 0%, var(--wn-bg-elev) 42%);
}
.wn-door-pac {
border: 2px solid rgba(186,12,47,.55);
box-shadow: inset 0 0 0 1px rgba(186,12,47,.12), 0 0 0 1px rgba(186,12,47,.08);
background: linear-gradient(180deg, rgba(186,12,47,.09) 0%, var(--wn-bg-elev) 42%);
}
.wn-door .wn-door-kicker {
font-family: var(--wn-display); font-size: 0.62rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wn-gold-bright); font-weight: 800; margin: 0;
}
.wn-door-product .wn-door-kicker {
color: #7eb8e8;
letter-spacing: 0.16em;
font-size: 0.68rem;
}
.wn-door-pac .wn-door-kicker {
color: #e07088;
letter-spacing: 0.16em;
font-size: 0.68rem;
}
.wn-door h2 { margin: 0; color: var(--wn-cream); font-size: 1.15rem; }
/* Phone stack order + unequal weight */
@media (max-width: 699px) {
.wn-door-grid { display: flex; flex-direction: column; }
body[data-wn-page="subscribe"] .wn-door-product { order: -1; }
body[data-wn-page="donate"] .wn-door-pac { order: -1; }
body[data-wn-page="donate"] .wn-door-product {
border-width: 1px;
border-color: rgba(91,159,212,.4);
box-shadow: none;
background: var(--wn-bg-elev);
opacity: 0.92;
}
body[data-wn-page="subscribe"] .wn-door-pac {
border-width: 1px;
border-color: rgba(186,12,47,.35);
box-shadow: none;
background: var(--wn-bg-elev);
opacity: 0.92;
}
.wn-door-product .wn-door-kicker,
.wn-door-pac .wn-door-kicker { font-size: 0.72rem; }
}
/* Pass 18 Subscribe density helpers */
.wn-subscribe-above { margin: 1rem 0 0.75rem; }
.wn-subscribe-above .wn-door { margin: 0; }
.wn-door-secondary-line {
margin: 0.85rem 0 1rem;
padding: 0.55rem 0.75rem;
border-top: 1px dashed rgba(170,200,255,.22);
border-bottom: 1px dashed rgba(170,200,255,.22);
color: var(--wn-cream-dim);
font-size: 0.82rem;
line-height: 1.45;
}
.wn-door-secondary-line a.inline { color: var(--wn-gold-bright); }
.wn-amplify-map-fold {
margin: 0.75rem 0 1rem;
padding: 0.55rem 0.75rem 0.75rem;
border: 1px dashed rgba(170,200,255,.28);
border-radius: 12px;
background: rgba(13,11,9,.25);
}
.wn-amplify-map-fold > summary {
cursor: pointer;
list-style: none;
font-family: var(--wn-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wn-cream-dim);
margin-bottom: 0.45rem;
}
.wn-amplify-map-fold > summary::-webkit-details-marker { display: none; }
.wn-amplify-map-fold .wn-amplify-map { margin: 0.35rem 0 0; }
.wn-status-secondary {
margin: 1rem 0; padding: 0.75rem 0.9rem; border-radius: 8px;
border: 1px dashed rgba(186,12,47,.45); background: rgba(186,12,47,.06);
color: var(--wn-cream-dim); font-size: 0.82rem;
}
.wn-status-secondary strong { color: var(--wn-cream); }
/* Explore Soft secondary strip (home Pass 2) */
.wn-explore-soft {
margin: 1.25rem 0;
padding: 0.85rem 1rem;
border: 1px dashed rgba(213,196,168,.35);
border-radius: 12px;
background: rgba(13,11,9,.35);
}
.wn-explore-soft > summary {
cursor: pointer;
list-style: none;
font-family: var(--wn-display);
font-weight: 700;
font-size: 0.92rem;
color: var(--wn-gold-bright);
letter-spacing: 0.02em;
}
.wn-explore-soft > summary::-webkit-details-marker { display: none; }
.wn-explore-soft > summary::before {
content: "▸ ";
color: var(--wn-gold);
font-weight: 800;
}
.wn-explore-soft[open] > summary::before { content: "▾ "; }
.wn-explore-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.35rem 0 0.25rem;
}
.wn-explore-links .fp-btn {
font-size: 0.78rem;
padding: 0.4rem 0.7rem;
}
/* Opposition Soft */
.wn-opp-grid { display: grid; gap: 0.55rem; }
@media (min-width: 800px) { .wn-opp-grid { grid-template-columns: 1fr 1fr; } }
.wn-opp-card {
background: var(--wn-bg-elev); border: 1px solid var(--wn-border); border-radius: 8px;
padding: 0.85rem 1rem;
}
.wn-opp-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0; }
.wn-opp-tag {
font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--wn-border);
color: var(--wn-cream-dim);
}
.wn-opp-tag.strength-strong { border-color: rgba(74,222,128,.45); color: #86efac; }
.wn-opp-tag.strength-thin { border-color: rgba(251,191,36,.45); color: #fbbf24; }
.wn-opp-tag.strength-hold { border-color: rgba(186,12,47,.45); color: #fca5a5; }
.wn-publish-hold {
border: 1px dashed rgba(186,12,47,.55); border-radius: 10px; padding: 0.9rem 1rem;
background: rgba(186,12,47,.07); color: var(--wn-cream-dim); font-size: 0.85rem;
}
/* ============================================================
Welcome surface ONLY (home /) — CureRays layout patterns
Wake civic palette: white · navy · red pills (patriotic)
Does NOT restyle app chrome on other Soft pages.
============================================================ */
body.wn-page-welcome {
background: #f5f7fb;
}
body.wn-page-welcome .wn-family-secondary {
background: #e8eef6;
border-bottom-color: rgba(10, 22, 40, 0.1);
color: #3a4a62;
}
body.wn-page-welcome .wn-family-secondary a { color: #1a3558; }
body.wn-page-welcome .wn-family-secondary a:hover {
color: #0a1628;
background: rgba(200, 16, 46, 0.08);
}
/* Remote-view / announce — red sticky on top (Pass 24) */
.wn-announce,
.wn-remote-view {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.25rem 0.75rem;
padding: 0.28rem 0.85rem;
background: #c8102e;
color: #fff;
font-family: var(--wn-display);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.3;
position: sticky;
top: 0;
z-index: 80;
}
.wn-announce-link {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 700;
white-space: nowrap;
}
.wn-announce-link:hover { opacity: 0.92; }
/* Light welcome band (below full-bleed hero) */
.wn-welcome {
--wn-w-bg: #f5f7fb;
--wn-w-bg-card: #ffffff;
--wn-w-indigo: #0a1628;
--wn-w-indigo-soft: #1a3558;
--wn-w-muted: #4a5a72;
--wn-w-orange: #c8102e;
--wn-w-orange-deep: #9e0c24;
--wn-w-peach: rgba(200, 16, 46, 0.1);
--wn-w-border: rgba(10, 22, 40, 0.12);
--wn-w-shadow: 0 10px 32px rgba(10, 22, 40, 0.12);
--wn-w-radius: 16px;
width: min(100% - 2rem, 1080px);
margin: 0 auto;
padding: 0 0 3rem;
color: var(--wn-w-indigo);
}
.wn-welcome h1,
.wn-welcome h2,
.wn-welcome h3 {
color: var(--wn-w-indigo);
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
.wn-welcome .wn-section-label {
margin: 0 0 0.55rem;
font-family: var(--wn-display);
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--wn-w-indigo);
}
.wn-welcome .wn-section-lede {
margin: 0 0 1.15rem;
max-width: 40rem;
color: var(--wn-w-muted);
font-size: 0.98rem;
line-height: 1.55;
}
.wn-welcome .wn-eyebrow {
color: var(--wn-w-orange);
margin-bottom: 0.65rem;
}
.wn-welcome .wn-eyebrow::before {
background: linear-gradient(90deg, var(--wn-w-orange), transparent);
}
.wn-welcome .wn-muted { color: var(--wn-w-muted); }
/* Full-bleed Bear-style welcome hero (bg photo + darkened scrim) */
.wn-welcome-hero {
/* Chrome above hero on welcome: announce + secondary family + sticky nav */
--wn-announce-h: 1.65rem;
--wn-secondary-h: 2.15rem;
--wn-hero-chrome: calc(var(--wn-announce-h) + var(--wn-secondary-h) + var(--wn-nav-h));
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
/* Break out of .wn-welcome max-width so photo is edge-to-edge */
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: 2.25rem;
/* First screen: viewport minus announce + secondary + nav (Bear 100vh feel) */
min-height: calc(100vh - var(--wn-hero-chrome));
min-height: calc(100dvh - var(--wn-hero-chrome));
padding: 2.75rem 1.25rem 3rem;
color: #f4f7fc;
}
.wn-welcome-hero::before {
content: "";
position: absolute;
inset: 0;
/* CSS-relative fallback; index may set --wn-hero-bg with root-absolute /assets/... */
background-image: var(--wn-hero-bg, url("../assets/imagine/wake-nation-hero-liberty-goldengate-flag.png"));
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: brightness(0.42);
z-index: 0;
}
/* Extra navy scrim for patriotic contrast over photo */
.wn-welcome-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 22, 40, 0.35) 0%, rgba(10, 22, 40, 0.55) 55%, rgba(10, 22, 40, 0.72) 100%),
radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, rgba(10, 22, 40, 0.45) 100%);
z-index: 1;
pointer-events: none;
}
/* Clay 2026-09-25 Soft — real ![]()
hero band so phones can't miss Liberty/GG
* (CSS ::before alone was invisible under stale SW / some mobile WebViews).
* Desktop keeps full-bleed ::before cover; mobile shows the ![]()
band above copy.
*/
.wn-hero-band {
display: none;
}
@media (max-width: 640px) {
.wn-hero-band {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100%;
height: auto;
aspect-ratio: 1280 / 720;
min-height: 11rem;
object-fit: fill;
object-position: center center;
margin: 0;
padding: 0;
border: 0;
flex: 0 0 auto;
order: -1;
z-index: 1;
filter: brightness(0.88);
}
/* Prefer real ![]()
on phone — avoid double-stacking with ::before band */
.wn-welcome-hero::before {
display: none !important;
}
}
.wn-hero-flag {
position: relative;
z-index: 2;
display: block;
width: 3rem;
height: 3rem;
margin: 0 auto 0.75rem;
border-radius: 0.35rem;
box-shadow: 0 4px 18px rgba(0,0,0,.55);
object-fit: cover;
/* Never strip flag chip — Clay lock: American flag visible on all viewports */
}
.wn-hero-copy {
position: relative;
z-index: 2;
width: min(100%, 44rem);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.wn-welcome-hero .wn-eyebrow {
color: #ffb4c0;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.wn-welcome-hero .wn-eyebrow::before {
background: linear-gradient(90deg, #c8102e, transparent);
margin-left: auto;
margin-right: auto;
}
.wn-hero-supra {
margin: 0 0 0.65rem;
max-width: 32rem;
font-family: var(--wn-display);
font-size: clamp(0.82rem, 2.2vw, 0.95rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.01em;
color: rgba(244, 247, 252, 0.88);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1);
}
.wn-welcome-hero h1 {
margin: 0 0 0.35rem;
font-size: clamp(2.35rem, 8vw, 3.85rem);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.02em;
color: #f4f7fc;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 1);
}
.wn-welcome-hero h1 em {
font-style: normal;
color: #ffb4c0;
}
.wn-hero-support {
margin: 0 0 0.35rem;
font-family: var(--wn-display);
font-size: clamp(1.15rem, 3.5vw, 1.45rem);
font-weight: 700;
color: #f4f7fc;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 1);
}
.wn-hero-tagline {
margin: 0 0 1.25rem;
font-size: clamp(1.02rem, 2.8vw, 1.2rem);
font-weight: 600;
color: #ffb4c0;
letter-spacing: 0.01em;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.wn-welcome-hero .wn-hero-ctas {
width: 100%;
max-width: 40rem;
margin: 0 0 1.25rem;
}
/* Frosted glass over darkened photo */
.wn-welcome-hero .wn-glass-card {
margin: 0 0 1rem;
padding: 1.05rem 1.15rem;
max-width: 34rem;
width: 100%;
background: rgba(10, 22, 40, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(244, 247, 252, 0.22);
border-radius: var(--wn-w-radius);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
border-left: 3px solid #c8102e;
text-align: left;
}
.wn-welcome-hero .wn-glass-kicker {
margin: 0 0 0.35rem;
font-family: var(--wn-display);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffb4c0;
}
.wn-welcome-hero .wn-glass-body {
margin: 0;
color: rgba(244, 247, 252, 0.88);
font-size: 0.92rem;
line-height: 1.55;
}
.wn-welcome-hero .wn-glass-body strong { color: #fff; }
.wn-welcome-hero .wn-status-welcome {
border-color: rgba(255, 180, 192, 0.45);
color: #ffd6dc;
background: rgba(200, 16, 46, 0.28);
letter-spacing: 0.08em;
}
/* Retired split-column visual (kept inert if markup reappears) */
.wn-hero-visual { display: none !important; }
/* Primary path CTAs — orange pills, labeled */
.wn-welcome .wn-cta-row-primary {
display: grid;
gap: 0.75rem;
margin: 0.75rem 0 0;
}
@media (min-width: 700px) {
.wn-welcome .wn-cta-row-primary {
grid-template-columns: repeat(3, 1fr);
}
}
.wn-welcome .wn-path-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
padding: 0.95rem 1.15rem;
border-radius: 999px;
border: none;
background: linear-gradient(180deg, #ff6a3a, var(--wn-w-orange));
color: #fff !important;
text-decoration: none;
box-shadow: 0 6px 18px rgba(200, 16, 46, 0.35);
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
min-height: 4.25rem;
justify-content: center;
}
.wn-welcome .wn-path-cta:hover,
.wn-welcome .wn-path-cta:focus {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(200, 16, 46, 0.42);
outline: none;
}
.wn-path-cta-title {
font-family: var(--wn-display);
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.02em;
}
.wn-path-cta-help {
font-size: 0.72rem;
font-weight: 500;
opacity: 0.92;
line-height: 1.3;
text-transform: none;
letter-spacing: 0;
}
.wn-welcome-paths,
.wn-welcome-help,
.wn-triad,
.wn-loop,
.wn-fold-band {
margin: 2.35rem 0;
}
.wn-welcome-paths {
margin-top: 1.75rem;
padding-top: 0.25rem;
}
/* Path cards — How can this Soft help you? */
.wn-path-grid {
display: grid;
gap: 0.9rem;
margin: 0;
}
@media (min-width: 640px) {
.wn-path-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.wn-path-grid { grid-template-columns: repeat(3, 1fr); }
}
.wn-path-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.15rem 1.2rem;
background: var(--wn-w-bg-card);
border: 1px solid var(--wn-w-border);
border-radius: var(--wn-w-radius);
box-shadow: 0 4px 18px rgba(26, 32, 74, 0.06);
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
min-height: 9.5rem;
}
.wn-path-card:hover,
.wn-path-card:focus {
border-color: rgba(200, 16, 46, 0.45);
transform: translateY(-2px);
box-shadow: var(--wn-w-shadow);
outline: none;
}
.wn-path-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 10px;
background: var(--wn-w-peach);
color: var(--wn-w-orange);
font-size: 0.95rem;
margin-bottom: 0.15rem;
}
.wn-path-card h3 {
margin: 0;
font-size: 1.02rem;
color: var(--wn-w-indigo);
}
.wn-path-card p {
margin: 0;
flex: 1;
color: var(--wn-w-muted);
font-size: 0.86rem;
line-height: 1.5;
}
.wn-path-card-go {
margin-top: 0.45rem;
font-family: var(--wn-display);
font-size: 0.78rem;
font-weight: 700;
color: var(--wn-w-orange);
letter-spacing: 0.02em;
}
.wn-chip-hold {
display: inline-block;
margin-left: 0.25rem;
padding: 0.1rem 0.4rem;
border-radius: 999px;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.08em;
vertical-align: middle;
background: rgba(186, 12, 47, 0.1);
color: #ba0c2f;
border: 1px solid rgba(186, 12, 47, 0.35);
}
/* Belief / Purpose / Promise triad */
.wn-triad-grid {
display: grid;
gap: 0.9rem;
}
@media (min-width: 700px) {
.wn-triad-grid { grid-template-columns: repeat(3, 1fr); }
}
.wn-triad-card {
background: var(--wn-w-bg-card);
border: 1px solid var(--wn-w-border);
border-radius: var(--wn-w-radius);
padding: 1.25rem 1.2rem;
box-shadow: 0 4px 18px rgba(26, 32, 74, 0.06);
}
.wn-triad-kicker {
margin: 0 0 0.45rem;
font-family: var(--wn-display);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wn-w-orange);
}
.wn-triad-card h3 {
margin: 0 0 0.45rem;
font-size: 1.05rem;
color: var(--wn-w-indigo);
}
.wn-triad-card p:last-child {
margin: 0;
color: var(--wn-w-muted);
font-size: 0.88rem;
line-height: 1.55;
}
/* Soft loop */
.wn-loop-steps {
list-style: none;
margin: 0.85rem 0 1rem;
padding: 1.1rem 1rem;
display: grid;
gap: 0.75rem;
background: var(--wn-w-bg-card);
border: 1px solid var(--wn-w-border);
border-radius: var(--wn-w-radius);
box-shadow: 0 4px 18px rgba(26, 32, 74, 0.05);
}
@media (min-width: 800px) {
.wn-loop-steps {
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
}
.wn-loop-steps li {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.35rem 0.4rem;
position: relative;
}
.wn-loop-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 999px;
background: var(--wn-w-orange);
color: #fff;
font-family: var(--wn-display);
font-size: 0.75rem;
font-weight: 800;
margin-bottom: 0.2rem;
}
.wn-loop-t {
font-family: var(--wn-display);
font-weight: 800;
font-size: 0.88rem;
color: var(--wn-w-indigo);
}
.wn-loop-d {
font-size: 0.75rem;
color: var(--wn-w-muted);
line-height: 1.35;
}
.wn-loop-doors {
margin: 0;
font-size: 0.82rem;
color: var(--wn-w-muted);
max-width: 48rem;
}
.wn-loop-doors strong { color: var(--wn-w-indigo); }
/* Fold band polish on light surface */
.wn-welcome .wn-fold-grid { margin: 0.85rem 0 0; }
.wn-welcome .wn-fold {
background: var(--wn-w-bg-card);
border: 1px solid var(--wn-w-border);
box-shadow: 0 4px 18px rgba(26, 32, 74, 0.06);
}
.wn-welcome .wn-fold h2 { color: var(--wn-w-indigo); }
.wn-welcome .wn-fold .ratio { color: var(--wn-w-orange); }
.wn-welcome .wn-fold .meta { color: var(--wn-w-muted); }
.wn-welcome .wn-fold .cite { color: rgba(90, 84, 112, 0.85); }
.wn-welcome .wn-fold::after {
background: radial-gradient(circle at top right, rgba(200, 16, 46, 0.14), transparent 70%);
}
/* Explore Soft on light */
.wn-welcome .wn-explore-soft {
background: rgba(255, 255, 255, 0.65);
border: 1px dashed rgba(26, 32, 74, 0.22);
}
.wn-welcome .wn-explore-soft > summary { color: var(--wn-w-indigo); }
.wn-welcome .wn-explore-soft > summary::before { color: var(--wn-w-orange); }
.wn-welcome .wn-panel {
background: var(--wn-w-bg-card);
border-color: var(--wn-w-border);
color: var(--wn-w-indigo);
box-shadow: 0 4px 14px rgba(26, 32, 74, 0.05);
}
.wn-welcome .wn-panel h2,
.wn-welcome .wn-panel h3 { color: var(--wn-w-indigo); }
.wn-welcome .wn-calc input {
background: #f5f7fb;
border-color: rgba(10, 22, 40, 0.2);
color: var(--wn-w-indigo);
}
.wn-welcome .wn-calc-out { color: var(--wn-w-orange-deep); }
.wn-welcome .wn-explore-links .fp-btn {
background: #fff;
border: 1px solid var(--wn-w-border);
color: var(--wn-w-indigo);
border-radius: 999px;
}
.wn-welcome .wn-explore-links .fp-btn:hover {
border-color: var(--wn-w-orange);
color: var(--wn-w-orange-deep);
}
.wn-welcome .wn-brand-hold {
color: var(--wn-w-muted);
border-left-color: rgba(200, 16, 46, 0.55);
background: rgba(200, 16, 46, 0.06);
}
/* Dense indigo legal band (footer feel) */
.wn-welcome-legal {
margin: 1.75rem 0 1rem;
padding: 1.5rem 1.25rem;
background: #1a204a;
color: #e8e6f0;
border-radius: var(--wn-w-radius);
box-shadow: var(--wn-w-shadow);
}
.wn-welcome-legal-grid {
display: grid;
gap: 1.15rem;
}
@media (min-width: 700px) {
.wn-welcome-legal-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.wn-legal-kicker {
margin: 0 0 0.45rem;
font-family: var(--wn-display);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ff8a5c;
}
.wn-welcome-legal p {
margin: 0 0 0.35rem;
font-size: 0.82rem;
line-height: 1.45;
color: rgba(232, 230, 240, 0.88);
}
.wn-welcome-legal strong { color: #fff; }
.wn-welcome .wn-hold {
border-color: rgba(186, 12, 47, 0.45);
background: rgba(186, 12, 47, 0.06);
color: var(--wn-w-muted);
}
.wn-welcome .wn-hold strong { color: var(--wn-w-indigo); }
/* Sticky weekly on welcome: keep readable over light */
body.wn-page-welcome .wn-sticky-weekly {
background: #1a204a;
color: #e8e6f0;
border-top: 2px solid var(--wn-w-orange, #c8102e);
}
body.wn-page-welcome .wn-sticky-weekly a { color: #ff8a5c; }
@media (max-width: 640px) {
.wn-welcome { padding: 0 0 2.5rem; }
/*
* Clay GO 2026-09-25 ~13:08 PT (via Domain) — phone must show Liberty + Golden Gate
* like desktop. Cover+crop (even 28%/42%) still hides one landmark on ≤390.
* Soft fix: ::before becomes a 16:9 full-width band with background-size 100% 100%
* so the entire composite (Liberty | GG | flag) stays readable. Flag chip kept.
* Do NOT swap to flag-only grok JPG.
*/
.wn-welcome-hero {
--wn-announce-h: 1.9rem;
--wn-secondary-h: 2.15rem;
--wn-hero-chrome: calc(var(--wn-announce-h) + var(--wn-secondary-h) + var(--wn-nav-h));
margin-bottom: 1.15rem;
min-height: 0;
padding: 0 0 1.5rem;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
text-align: center;
}
.wn-welcome-hero::before {
position: relative;
inset: auto;
display: block;
width: 100%;
flex: 0 0 auto;
aspect-ratio: 1280 / 720;
height: auto;
min-height: 11rem;
background-image: var(--wn-hero-bg, url("../assets/imagine/wake-nation-hero-liberty-goldengate-flag.png"));
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
filter: brightness(0.85);
/* Full composite visible: Liberty (L) + Golden Gate (C-R) + flag (UR) — no cover-crop */
}
/* Scrim only under copy (not over landmarks band) */
.wn-welcome-hero::after {
display: none;
}
.wn-hero-flag {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 4.5rem;
height: 4.5rem;
margin: 0.85rem auto 0.65rem;
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 0.4rem;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
object-fit: cover;
flex-shrink: 0;
z-index: 2;
}
.wn-hero-copy {
width: 100%;
max-width: 100%;
align-items: center;
box-sizing: border-box;
padding: 0.35rem 1rem 0.25rem;
background: linear-gradient(180deg, rgba(10, 22, 40, 0.94) 0%, rgba(10, 22, 40, 0.98) 100%);
}
.wn-welcome-hero h1 {
font-size: clamp(1.85rem, 9vw, 2.55rem);
}
.wn-hero-supra { max-width: 100%; }
.wn-welcome-hero .wn-hero-ctas {
width: 100%;
max-width: 100%;
margin: 0 0 0.85rem;
}
.wn-welcome .wn-cta-row-primary {
display: grid;
grid-template-columns: 1fr;
gap: 0.55rem;
width: 100%;
margin: 0.55rem 0 0;
}
.wn-welcome .wn-path-cta {
border-radius: 8px;
align-items: flex-start;
width: 100%;
min-height: 3.35rem;
padding: 0.85rem 1rem;
box-sizing: border-box;
}
.wn-path-cta-title { font-size: 0.95rem; }
.wn-path-cta-help { font-size: 0.7rem; }
.wn-welcome-hero .wn-glass-card {
padding: 0.7rem 0.85rem;
margin: 0 0 0.65rem;
max-width: 100%;
}
.wn-welcome-hero .wn-glass-body { font-size: 0.8rem; line-height: 1.45; }
.wn-welcome-hero .wn-status-welcome {
margin-top: 0.15rem;
font-size: 0.58rem;
}
.wn-announce { font-size: 0.62rem; }
}
/* —— Desktop dashboard navigability Soft (Clay GO 2026-09-25) —— */
.wn-left-jump {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem;
margin: 0.15rem 0 0.35rem;
}
.wn-left-jump a {
display: block;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: var(--wn-cream, #f7f1e6);
border: 1px solid rgba(242, 193, 61, 0.35);
border-radius: 8px;
padding: 0.4rem 0.35rem;
background: rgba(242, 193, 61, 0.08);
}
.wn-left-jump a:hover,
.wn-left-jump a:focus {
color: var(--wn-gold-bright, #f2c13d);
border-color: var(--wn-gold, #d4a84b);
background: rgba(242, 193, 61, 0.16);
}
.wn-dash-shell-nav {
border-color: rgba(242, 193, 61, 0.4);
}
.wn-dash-shell-nav .wn-dash-jump {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.65rem 0 0;
}
.wn-dash-shell-nav .wn-dash-jump a {
text-decoration: none;
}
@media (min-width: 900px) {
/* Keep Action console open + readable on desktop dashboard shell */
body.wn-shell-dash .wn-action-console {
border-width: 2px;
scroll-margin-top: 5rem;
}
body.wn-shell-dash .wn-action-console:not(.is-collapsed) {
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}
body.wn-shell-dash .wn-left-dash-inner {
padding-top: 1rem;
}
body.wn-shell-dash .wn-left-brand {
font-size: 0.98rem;
margin-bottom: 0.15rem;
}
}
/* ——— Disclose / Watch Soft ——— */
.wn-watch-hub { margin-top: 1rem; }
.wn-watch-loading { color: var(--wn-muted, #9b8d78); font-size: .9rem; }
.wn-watch-framing { margin: .75rem 0 1rem; }
.wn-watch-section { margin-top: 1rem; scroll-margin-top: 5rem; }
.wn-watch-theme { color: var(--wn-muted, #d5c4a8); font-size: .88rem; margin: .35rem 0 .5rem; }
.wn-watch-meta { color: var(--wn-muted, #9b8d78); font-size: .8rem; margin: 0 0 .75rem; }
.wn-watch-route { font-size: .85rem; margin: 0 0 .75rem; }
.wn-watch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .75rem;
}
.wn-watch-creator {
border: 1px solid var(--wn-border, rgba(255,255,255,.12));
border-radius: 10px;
padding: .75rem .85rem;
background: rgba(0,0,0,.18);
}
.wn-watch-creator.is-ramin-lead {
border-color: rgba(212, 168, 75, .55);
box-shadow: 0 0 0 1px rgba(212, 168, 75, .2);
}
.wn-watch-lead-tag {
margin: 0 0 .35rem;
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--wn-gold-bright, #e8c56a);
}
.wn-watch-creator h4 {
margin: 0 0 .35rem;
font-size: .95rem;
color: var(--wn-cream, #f3ead7);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
}
.wn-watch-yt-badge {
display: inline-block;
font-size: .65rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
padding: .12rem .4rem;
border-radius: 4px;
border: 1px solid rgba(255, 80, 80, .45);
color: #ffb4b4;
background: rgba(180, 40, 40, .25);
}
.wn-watch-channel { margin: 0 0 .35rem; font-size: .82rem; }
.wn-watch-why { margin: 0 0 .5rem; font-size: .8rem; color: var(--wn-muted, #d5c4a8); }
.wn-watch-sample {
display: flex;
gap: .55rem;
align-items: flex-start;
margin: .35rem 0;
}
.wn-watch-thumb {
flex: 0 0 auto;
display: block;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.15);
line-height: 0;
}
.wn-watch-thumb img { display: block; width: 120px; height: auto; }
.wn-watch-sample-body { font-size: .8rem; min-width: 0; }
.wn-watch-sample-label {
display: inline-block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--wn-gold-bright, #e8c56a);
margin-right: .25rem;
}
.wn-watch-alts {
margin: .35rem 0 0;
padding-left: 1.05rem;
font-size: .78rem;
color: var(--wn-muted, #d5c4a8);
}
.wn-watch-alts li { margin: .2rem 0; }
.wn-watch-link {
color: var(--wn-gold-bright, #9ec1ff);
text-decoration: underline;
text-underline-offset: 2px;
word-break: break-word;
}
.wn-watch-link:hover { color: var(--wn-cream, #fff); }
.wn-watch-ext { font-size: .75em; opacity: .75; margin-left: .1rem; }
.wn-watch-flag { margin: .4rem 0 0; font-size: .75rem; color: var(--wn-muted, #9b8d78); }
.wn-watch-more { margin: .65rem 0 0; font-size: .85rem; }
.wn-watch-thin { margin-top: 1rem; }
.wn-watch-anchor { border-color: rgba(212, 168, 75, .4); }
.wn-watch-rejected code { font-size: .85em; }
/* —— LIVE shell Soft-encode 2026-09-25: location bar + left dashboard —— */
.wn-hero-wm {
font-family: var(--wn-display, inherit);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wn-hero-wm .wn-dot { color: var(--wn-gold-bright, #f2c13d); }
.wn-draft-live,
.wn-nav .wn-draft-live {
color: var(--wn-gold-bright, #f2c13d);
border-color: rgba(242, 193, 61, 0.55);
background: rgba(242, 193, 61, 0.08);
}
.wn-location-bar {
background: rgba(13, 27, 58, 0.96);
border-bottom: 1px solid rgba(242, 193, 61, 0.28);
padding: 0.65rem 1rem;
color: var(--wn-cream, #f7f1e6);
}
.wn-location-bar-home {
position: relative;
z-index: 5;
margin: 0;
width: 100%;
}
.wn-loc-form { max-width: 72rem; margin: 0 auto; }
.wn-loc-label {
margin: 0 0 0.35rem;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wn-gold-bright, #f2c13d);
font-weight: 700;
}
.wn-loc-fields {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
align-items: end;
}
@media (min-width: 640px) {
.wn-loc-fields {
grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
}
@media (min-width: 960px) {
.wn-loc-fields {
grid-template-columns: minmax(6rem, 8rem) minmax(7rem, 10rem) minmax(7rem, 10rem) minmax(10rem, 1fr) auto;
}
}
.wn-loc-field {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(247, 241, 230, 0.78);
}
.wn-loc-field select,
.wn-loc-field input {
font: inherit;
text-transform: none;
letter-spacing: 0.01em;
font-size: 0.92rem;
padding: 0.55rem 0.65rem;
border-radius: 8px;
border: 1px solid rgba(242, 193, 61, 0.35);
background: rgba(255, 255, 255, 0.96);
color: #0d1b3a;
min-height: 2.75rem;
width: 100%;
}
.wn-loc-go {
min-height: 2.75rem;
white-space: nowrap;
font-weight: 800;
}
.wn-loc-status {
margin: 0.4rem 0 0;
font-size: 0.78rem;
color: rgba(247, 241, 230, 0.7);
}
/* Left dashboard rail */
.wn-left-toggle {
display: inline-flex;
align-items: center;
font-family: var(--wn-display, inherit);
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
color: var(--wn-cream, #f7f1e6);
border: 1px solid var(--wn-border, rgba(242,193,61,.35));
border-radius: 999px;
padding: 0.4rem 0.75rem;
cursor: pointer;
margin-left: auto;
}
.wn-left-toggle:hover,
.wn-left-toggle:focus {
border-color: var(--wn-gold, #d4a84b);
color: var(--wn-gold-bright, #f2c13d);
}
.wn-left-dash {
display: none;
background: rgba(11, 9, 7, 0.98);
border-right: 1px solid rgba(242, 193, 61, 0.22);
color: var(--wn-cream, #f7f1e6);
z-index: 60;
}
.wn-left-dash-inner {
padding: 0.85rem 0.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.wn-left-brand {
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wn-cream, #f7f1e6);
text-decoration: none;
font-size: 0.92rem;
}
.wn-left-brand .wn-dot { color: var(--wn-gold-bright, #f2c13d); }
.wn-left-h {
margin: 0.65rem 0 0.25rem;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wn-gold-bright, #f2c13d);
font-weight: 700;
}
.wn-left-crumb { margin: 0; font-size: 0.85rem; color: var(--wn-cream, #f7f1e6); }
.wn-left-address { margin: 0.2rem 0 0; font-size: 0.78rem; color: rgba(247,241,230,.7); }
.wn-left-local-links,
.wn-left-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0.35rem 0 0;
padding: 0;
list-style: none;
}
.wn-left-local-links a,
.wn-left-link,
.wn-left-cta {
color: var(--wn-cream-dim, #d5c4a8);
text-decoration: none;
padding: 0.4rem 0.55rem;
border-radius: 8px;
border: 1px solid transparent;
font-size: 0.88rem;
}
.wn-left-local-links a:hover,
.wn-left-link:hover,
.wn-left-cta:hover {
color: var(--wn-gold-bright, #f2c13d);
border-color: rgba(242, 193, 61, 0.35);
}
.wn-left-link.is-current,
.wn-left-link[aria-current="page"] {
color: var(--wn-gold-bright, #f2c13d);
border-color: var(--wn-gold, #d4a84b);
background: rgba(242, 193, 61, 0.1);
}
.wn-left-foot {
margin-top: auto;
padding-top: 0.75rem;
font-size: 0.68rem;
color: rgba(247, 241, 230, 0.55);
letter-spacing: 0.04em;
}
.wn-left-close {
align-self: flex-end;
background: transparent;
border: 1px solid rgba(242, 193, 61, 0.35);
color: var(--wn-cream, #f7f1e6);
border-radius: 999px;
padding: 0.3rem 0.7rem;
font-size: 0.72rem;
cursor: pointer;
}
/* Phone: drawer overlay */
@media (max-width: 899px) {
.wn-left-dash {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(18.5rem, 88vw);
transform: translateX(-105%);
transition: transform 0.2s ease;
box-shadow: 16px 0 40px rgba(0, 0, 0, 0.45);
}
body.wn-left-open .wn-left-dash {
display: block;
transform: translateX(0);
}
body.wn-left-open::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 55;
}
}
/* Desktop: sticky left rail — Clay Soft GO navigable dashboard shell */
@media (min-width: 900px) {
.wn-left-toggle { display: none; }
.wn-left-close { display: none; }
body.wn-shell-dash {
display: grid;
grid-template-columns: 17rem minmax(0, 1fr);
grid-template-rows: auto auto auto auto 1fr auto;
}
body.wn-shell-dash .wn-announce { grid-column: 1 / -1; }
body.wn-shell-dash .wn-nav { grid-column: 1 / -1; }
body.wn-shell-dash .wn-family-secondary { grid-column: 1 / -1; }
body.wn-shell-dash .wn-header-crumb { grid-column: 1 / -1; }
body.wn-shell-dash .wn-location-bar { grid-column: 1 / -1; }
body.wn-shell-dash .wn-left-dash {
display: block;
grid-column: 1;
grid-row: 5;
position: sticky;
top: var(--wn-nav-h, 64px);
height: calc(100dvh - var(--wn-nav-h, 64px));
align-self: start;
}
body.wn-shell-dash main {
grid-column: 2;
grid-row: 5;
min-width: 0;
}
body.wn-shell-dash .fp-fppc-footer,
body.wn-shell-dash footer,
body.wn-shell-dash .wn-sticky-weekly {
grid-column: 1 / -1;
}
/* Welcome hero stays full-bleed above the shell row: location bar already full width */
body.wn-page-welcome.wn-shell-dash main.wn-welcome {
grid-column: 2;
}
}
/* —— Multi-bot Soft-encode 2026-09-25: progressive locality + cite HARD wall —— */
.wn-loc-field.is-gated {
opacity: 0.45;
pointer-events: none;
}
.wn-loc-field.is-gated select,
.wn-loc-field.is-gated input {
background: rgba(255, 255, 255, 0.55);
color: #5a6578;
}
.wn-loc-progressive-hint {
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(247, 241, 230, 0.55);
font-size: 0.72rem;
}
.wn-left-prog-note {
margin: 0 0 0.75rem;
padding: 0.55rem 0.65rem;
font-size: 0.78rem;
color: rgba(247, 241, 230, 0.78);
border: 1px dashed rgba(242, 193, 61, 0.35);
border-radius: 8px;
background: rgba(242, 193, 61, 0.06);
}
.wn-cite-hard-wall {
margin: 0.85rem 0 1rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(186, 12, 47, 0.65);
border-radius: 10px;
background: rgba(186, 12, 47, 0.1);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-cite-hard-wall strong {
display: block;
color: #ffb4b4;
margin-bottom: 0.25rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.72rem;
}
.wn-cite-hard-wall .wn-muted { margin: 0; color: inherit; }
.wn-cite-hard-wall .wn-tiny-note {
margin: 0.45rem 0 0;
font-size: 0.75rem;
color: rgba(247, 241, 230, 0.65);
}
.wn-bot-doors {
display: grid;
gap: 0.75rem;
margin: 1.1rem 0;
}
@media (min-width: 700px) {
.wn-bot-doors { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.wn-bot-doors { grid-template-columns: repeat(3, 1fr); }
}
.wn-bot-door {
background: var(--wn-panel, #1a120a);
border: 1px solid var(--wn-border, rgba(213,196,168,.28));
border-radius: 12px;
padding: 1rem;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 0.35rem;
transition: border-color 0.15s;
}
.wn-bot-door:hover,
.wn-bot-door:focus-visible {
border-color: var(--wn-gold, #d4a84b);
outline: none;
}
.wn-bot-door .mode-label {
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wn-bot-door h3 { margin: 0; font-size: 1.05rem; }
.wn-bot-door p { margin: 0; color: var(--wn-cream-dim, #d5c4a8); font-size: 0.86rem; flex: 1; }
.wn-bot-shell-steps {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(247, 241, 230, 0.7);
}
.wn-bot-shell-steps li {
border: 1px solid rgba(242, 193, 61, 0.28);
border-radius: 999px;
padding: 0.25rem 0.55rem;
background: rgba(242, 193, 61, 0.06);
}
.wn-live-depth-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0.35rem 0.35rem 0 0;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(242, 193, 61, 0.45);
background: rgba(242, 193, 61, 0.1);
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
}
.wn-live-depth-chip:hover { border-color: var(--wn-gold-bright, #f2c13d); }
/* —— Bot + Action console Soft shell 2026-09-25 —— */
.wn-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Center Action console */
.wn-action-console {
margin: 0.85rem 0 1.1rem;
border: 1px solid rgba(242, 193, 61, 0.38);
border-radius: 14px;
background: rgba(13, 27, 58, 0.55);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.wn-action-console-inner { padding: 0.85rem 1rem 1rem; }
.wn-action-head {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.65rem;
}
.wn-action-title {
margin: 0.15rem 0 0.25rem;
font-size: 1.15rem;
color: var(--wn-cream, #f7f1e6);
}
.wn-action-sub {
margin: 0;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.84rem;
max-width: 46rem;
}
.wn-action-toggle {
background: transparent;
border: 1px solid rgba(242, 193, 61, 0.4);
color: var(--wn-cream, #f7f1e6);
border-radius: 999px;
padding: 0.35rem 0.75rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
font-weight: 700;
}
.wn-action-console.is-collapsed .wn-action-tabs,
.wn-action-console.is-collapsed .wn-action-panes,
.wn-action-console.is-collapsed .wn-action-foot {
display: none;
}
.wn-action-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0 0 0.65rem;
}
.wn-action-tab {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(242, 193, 61, 0.28);
color: var(--wn-cream-dim, #d5c4a8);
border-radius: 999px;
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.wn-action-tab.is-active,
.wn-action-tab[aria-selected="true"] {
color: var(--wn-gold-bright, #f2c13d);
border-color: var(--wn-gold, #d4a84b);
background: rgba(242, 193, 61, 0.12);
}
.wn-action-pane h3 {
margin: 0 0 0.45rem;
font-size: 1rem;
color: var(--wn-cream, #f7f1e6);
}
.wn-action-lede {
margin: 0 0 0.65rem;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.88rem;
}
.wn-action-hold {
margin: 0 0 0.75rem;
padding: 0.65rem 0.8rem;
border: 1px solid rgba(186, 12, 47, 0.7);
border-radius: 10px;
background: rgba(186, 12, 47, 0.12);
color: #ffb4b4;
font-size: 0.82rem;
}
.wn-action-hold strong { color: #ffd0d0; }
.wn-action-kit-list {
margin: 0;
padding-left: 1.15rem;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.88rem;
}
.wn-action-kit-list a { color: var(--wn-gold-bright, #f2c13d); }
.wn-action-label {
display: block;
margin: 0.45rem 0 0.25rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wn-gold-bright, #f2c13d);
font-weight: 700;
}
.wn-action-input,
.wn-action-textarea {
width: 100%;
max-width: 40rem;
font: inherit;
font-size: 0.92rem;
padding: 0.55rem 0.7rem;
border-radius: 8px;
border: 1px solid rgba(242, 193, 61, 0.35);
background: rgba(255, 255, 255, 0.96);
color: #0d1b3a;
box-sizing: border-box;
}
.wn-action-textarea { resize: vertical; min-height: 6rem; }
.wn-action-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.wn-action-foot {
margin: 0.85rem 0 0;
font-size: 0.72rem;
color: rgba(247, 241, 230, 0.55);
letter-spacing: 0.03em;
}
/* Right-rail Wake the Bot */
.wn-bot-rail {
display: none;
background: rgba(11, 9, 7, 0.99);
border-left: 1px solid rgba(242, 193, 61, 0.28);
color: var(--wn-cream, #f7f1e6);
z-index: 65;
}
.wn-bot-rail-inner {
display: flex;
flex-direction: column;
gap: 0.55rem;
height: 100%;
padding: 0.75rem 0.7rem 1rem;
overflow: hidden;
}
.wn-bot-rail-head {
display: flex;
gap: 0.55rem;
align-items: flex-start;
}
.wn-bot-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 2px solid var(--wn-gold, #d4a84b);
background: linear-gradient(145deg, #2a1c0e, #1a120a);
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.78rem;
color: var(--wn-gold-bright, #f2c13d);
flex-shrink: 0;
}
.wn-bot-rail-title {
margin: 0;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.wn-bot-rail-sub {
margin: 0.1rem 0 0;
font-size: 0.72rem;
color: rgba(247, 241, 230, 0.65);
}
.wn-bot-rail-close {
margin-left: auto;
background: transparent;
border: 1px solid rgba(242, 193, 61, 0.35);
color: var(--wn-cream, #f7f1e6);
border-radius: 999px;
padding: 0.25rem 0.6rem;
font-size: 0.7rem;
cursor: pointer;
}
.wn-bot-hold {
padding: 0.55rem 0.65rem;
border: 1px solid rgba(186, 12, 47, 0.65);
border-radius: 10px;
background: rgba(186, 12, 47, 0.1);
color: #ffb4b4;
font-size: 0.72rem;
line-height: 1.35;
}
.wn-bot-chips {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.wn-bot-chip {
background: rgba(242, 193, 61, 0.08);
border: 1px solid rgba(242, 193, 61, 0.32);
color: var(--wn-cream-dim, #d5c4a8);
border-radius: 999px;
padding: 0.28rem 0.55rem;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
}
.wn-bot-chip:hover {
color: var(--wn-gold-bright, #f2c13d);
border-color: var(--wn-gold, #d4a84b);
}
.wn-bot-log {
flex: 1;
min-height: 10rem;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.35rem 0.15rem;
border-top: 1px solid rgba(242, 193, 61, 0.15);
border-bottom: 1px solid rgba(242, 193, 61, 0.15);
}
.wn-bot-msg {
border-radius: 10px;
padding: 0.45rem 0.55rem;
font-size: 0.8rem;
line-height: 1.4;
}
.wn-bot-msg--bot {
background: rgba(242, 193, 61, 0.08);
border: 1px solid rgba(242, 193, 61, 0.22);
}
.wn-bot-msg--user {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
align-self: flex-end;
max-width: 95%;
}
.wn-bot-msg-role {
display: block;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wn-gold-bright, #f2c13d);
font-weight: 700;
margin-bottom: 0.15rem;
}
.wn-bot-msg-body { color: var(--wn-cream, #f7f1e6); }
.wn-bot-msg-body strong { color: var(--wn-gold-bright, #f2c13d); }
.wn-bot-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.35rem;
align-items: center;
}
.wn-bot-input {
width: 100%;
font: inherit;
font-size: 0.85rem;
padding: 0.5rem 0.6rem;
border-radius: 8px;
border: 1px solid rgba(242, 193, 61, 0.35);
background: rgba(255, 255, 255, 0.96);
color: #0d1b3a;
min-height: 2.5rem;
box-sizing: border-box;
}
.wn-bot-send {
min-height: 2.5rem;
white-space: nowrap;
font-size: 0.78rem !important;
padding: 0.45rem 0.7rem !important;
}
.wn-bot-rail-foot {
margin: 0;
font-size: 0.65rem;
color: rgba(247, 241, 230, 0.5);
letter-spacing: 0.03em;
}
/* Phone FAB + bottom sheet */
.wn-bot-fab {
display: none;
position: fixed;
right: 1rem;
bottom: 4.75rem;
z-index: 70;
align-items: center;
gap: 0.4rem;
border-radius: 999px;
border: 2px solid var(--wn-gold, #d4a84b);
background: linear-gradient(145deg, #1a2744, #0d1b3a);
color: var(--wn-gold-bright, #f2c13d);
padding: 0.55rem 0.9rem 0.55rem 0.55rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.72rem;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.wn-bot-fab-mark {
width: 1.85rem;
height: 1.85rem;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(242, 193, 61, 0.15);
border: 1px solid rgba(242, 193, 61, 0.45);
font-size: 0.68rem;
}
@media (max-width: 1099px) {
.wn-bot-fab { display: inline-flex; }
.wn-bot-rail {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
height: min(78dvh, 34rem);
width: 100%;
border-left: none;
border-top: 1px solid rgba(242, 193, 61, 0.35);
border-radius: 16px 16px 0 0;
transform: translateY(110%);
transition: transform 0.22s ease;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
body.wn-bot-open .wn-bot-rail {
display: block;
transform: translateY(0);
}
body.wn-bot-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 64;
}
/* Prefer bot sheet above left-dash overlay when both open */
body.wn-bot-open.wn-left-open::after { z-index: 55; }
}
/* Desktop: 3-column shell — left | main | right bot */
@media (min-width: 1100px) {
.wn-bot-fab { display: none; }
.wn-bot-rail-close { display: none; }
body.wn-shell-dash.wn-shell-bot {
grid-template-columns: 15rem minmax(0, 1fr) 19.5rem;
}
body.wn-shell-bot .wn-bot-rail {
display: block;
grid-column: 3;
grid-row: 5;
position: sticky;
top: var(--wn-nav-h, 64px);
height: calc(100dvh - var(--wn-nav-h, 64px));
align-self: start;
}
body.wn-shell-dash.wn-shell-bot main {
grid-column: 2;
grid-row: 5;
}
body.wn-shell-dash.wn-shell-bot .wn-left-dash {
grid-column: 1;
grid-row: 5;
}
body.wn-page-welcome.wn-shell-dash.wn-shell-bot main.wn-welcome {
grid-column: 2;
}
/* Shell without left dash still gets right rail */
body.wn-shell-bot:not(.wn-shell-dash) {
display: grid;
grid-template-columns: minmax(0, 1fr) 19.5rem;
grid-template-rows: auto auto auto auto 1fr auto;
}
body.wn-shell-bot:not(.wn-shell-dash) .wn-announce,
body.wn-shell-bot:not(.wn-shell-dash) .wn-nav,
body.wn-shell-bot:not(.wn-shell-dash) .wn-family-secondary,
body.wn-shell-bot:not(.wn-shell-dash) .wn-header-crumb,
body.wn-shell-bot:not(.wn-shell-dash) .wn-location-bar {
grid-column: 1 / -1;
}
body.wn-shell-bot:not(.wn-shell-dash) main {
grid-column: 1;
grid-row: 5;
min-width: 0;
}
body.wn-shell-bot:not(.wn-shell-dash) .wn-bot-rail {
grid-column: 2;
grid-row: 5;
}
body.wn-shell-bot:not(.wn-shell-dash) .fp-fppc-footer,
body.wn-shell-bot:not(.wn-shell-dash) footer,
body.wn-shell-bot:not(.wn-shell-dash) .wn-sticky-weekly {
grid-column: 1 / -1;
}
}
/* Soft shell aliases 2026-09-25 — bot FAB label + collapsed console panes */
.wn-bot-fab-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.wn-action-console.is-collapsed .wn-action-tabs,
.wn-action-console.is-collapsed .wn-action-panes,
.wn-action-console.is-collapsed .wn-action-foot { display: none; }
/* Clay HARD Soft-encode 2026-09-25 — keepers live Soft; non-keepers Coming soon / Forthcoming */
.wn-forthcoming-badge {
display: inline-block;
margin-left: .35rem;
padding: .12rem .45rem;
border-radius: 999px;
border: 1px solid rgba(122,138,163,.55);
background: rgba(122,138,163,.18);
color: #9aa8bc;
font-size: .62rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
vertical-align: middle;
}
.wn-forthcoming-chip,
.wn-wake-switch-item.is-forthcoming,
.wn-dash-card.is-forthcoming,
.wn-left-link.is-forthcoming,
.fp-btn.is-forthcoming,
.wn-panel.is-forthcoming {
opacity: .48;
filter: grayscale(.55);
cursor: not-allowed;
pointer-events: none;
color: #8a97ab !important;
text-decoration: none !important;
}
.wn-forthcoming-chip {
display: inline-flex;
align-items: baseline;
gap: .3rem;
padding: .15rem .4rem;
border-radius: 6px;
border: 1px dashed rgba(122,138,163,.45);
font-size: .78rem;
pointer-events: none;
}
.wn-forthcoming-chip em,
.wn-left-link.is-forthcoming em {
font-style: normal;
font-size: .62rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: #9aa8bc;
}
.wn-wake-switch-item.is-forthcoming:hover,
.wn-wake-switch-item.is-forthcoming:focus {
background: transparent !important;
color: #8a97ab !important;
}
.wn-family-secondary .wn-forthcoming-chip {
opacity: .55;
filter: grayscale(.4);
}
body.wn-page-welcome .wn-forthcoming-chip {
color: #5a6478 !important;
border-color: rgba(90,100,120,.4);
}
/* ===== Growth-0 Soft · Invite strip + phone Coming soon / tap targets ===== */
.wn-invite-doors {
margin: 0.85rem 1rem 0.35rem;
padding: 0.85rem 1rem;
border-radius: 12px;
border: 1px solid rgba(242, 193, 61, 0.35);
background: rgba(26, 18, 10, 0.06);
max-width: 48rem;
}
body.wn-page-welcome .wn-invite-doors {
margin-left: auto;
margin-right: auto;
background: rgba(255, 252, 245, 0.92);
border-color: rgba(176, 140, 48, 0.45);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.wn-invite-kicker {
margin: 0 0 0.45rem;
color: #8a6a18;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wn-invite-lines {
margin: 0;
padding-left: 1.15rem;
color: #3a3348;
font-size: 0.88rem;
line-height: 1.45;
}
.wn-invite-lines li { margin: 0.28rem 0; }
.wn-invite-lines strong { color: #1a120a; }
.wn-invite-lines a { color: #8a5a12; }
/* Forthcoming chips: intentional Coming soon (not dead links) */
.wn-forthcoming-chip {
min-height: 2.75rem;
min-width: 2.75rem;
align-items: center;
padding: 0.35rem 0.55rem;
}
.wn-forthcoming-chip::after {
content: none;
}
.wn-forthcoming-chip[aria-disabled="true"] {
cursor: default;
}
/* Phone ~390 Soft: keepers help-grid + family strip tap ≥44px */
@media (max-width: 430px) {
.wn-family-secondary a,
.wn-family-secondary .wn-forthcoming-chip {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
padding: 0.35rem 0.5rem;
}
.wn-path-card {
min-height: 7.5rem;
padding: 0.95rem 1rem;
}
.wn-path-card-go {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.wn-invite-doors {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.wn-invite-lines { font-size: 0.84rem; }
}
/* ===== Pass 16 + Amplify Soft · ask→reveal Soft console ===== */
.wn-amplify-empty {
margin: 0.65rem 0 0.85rem;
padding: 0.9rem 1rem;
border: 1px dashed rgba(242, 193, 61, 0.45);
border-radius: 10px;
background: rgba(242, 193, 61, 0.06);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.92rem;
}
.wn-amplify-empty strong { color: var(--wn-gold-bright, #f2c13d); }
.wn-amplify-fieldset {
border: 1px solid var(--wn-border, rgba(217,164,65,.35));
border-radius: 8px;
padding: 0.55rem 0.75rem;
margin: 0.5rem 0 0.75rem;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-amplify-fieldset legend {
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 0.35rem;
}
.wn-amplify-fieldset label { margin-right: 0.75rem; cursor: pointer; }
.wn-amplify-lock {
margin: 0 0 0.65rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
border: 1px solid rgba(217,164,65,.4);
background: rgba(217,164,65,.08);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.84rem;
}
.wn-amplify-reveal {
margin-top: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(242,193,61,.45);
border-radius: 10px;
background: rgba(0,0,0,.22);
}
.wn-amplify-reveal h4 {
margin: 0 0 0.5rem;
font-size: 0.98rem;
color: var(--wn-gold-bright, #f2c13d);
}
.wn-amplify-pre {
white-space: pre-wrap;
word-break: break-word;
margin: 0;
padding: 0.75rem;
border-radius: 8px;
background: rgba(0,0,0,.35);
border: 1px solid rgba(217,164,65,.25);
color: var(--wn-cream, #f0ece4);
font-size: 0.82rem;
line-height: 1.45;
max-height: 18rem;
overflow: auto;
}
.wn-amplify-share {
margin: 0;
padding-left: 1.15rem;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.88rem;
}
.wn-amplify-share li { margin: 0.35rem 0; }
.wn-amplify-next { margin: 0.65rem 0 0; color: var(--wn-cream, #f0ece4); font-size: 0.88rem; }
.wn-amplify-out { margin-top: 0.5rem; }
.wn-cause-fund-rail {
margin-top: 0.85rem;
padding: 0.8rem 0.9rem;
border: 1px solid rgba(242,193,61,.5);
border-radius: 10px;
background: rgba(242,193,61,.08);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-cause-fund-rail h5 { margin: 0 0 0.45rem; color: var(--wn-gold-bright, #f2c13d); font-size: 0.96rem; }
.wn-cause-fund-rail p { margin: 0.4rem 0; }
.wn-cause-fund-rail ol { margin: 0.45rem 0; padding-left: 1.2rem; }
.wn-cause-fund-rail li { margin: 0.3rem 0; }
body.wn-page-welcome .wn-home-dense-demote {
margin: 0.85rem 0;
}
/* ===== Amplify expand · work-to-reveal · monetize (2026-09-25) ===== */
.wn-amplify-groups { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.65rem 0 0.5rem; }
.wn-amplify-group {
border: 1px solid rgba(217,164,65,.45);
background: rgba(0,0,0,.22);
color: var(--wn-cream, #f0ece4);
border-radius: 999px;
padding: 0.4rem 0.85rem;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
}
.wn-amplify-group.is-active,
.wn-amplify-group[aria-selected="true"] {
background: rgba(242,193,61,.18);
border-color: var(--wn-gold-bright, #f2c13d);
color: var(--wn-gold-bright, #f2c13d);
}
.wn-amplify-job-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.55rem; }
.wn-amplify-job {
border: 1px solid rgba(217,164,65,.35);
background: rgba(42,28,14,.55);
color: var(--wn-cream-dim, #d5c4a8);
border-radius: 8px;
padding: 0.45rem 0.7rem;
font-size: 0.82rem;
cursor: pointer;
}
.wn-amplify-job.is-active {
border-color: var(--wn-gold-bright, #f2c13d);
color: var(--wn-gold-bright, #f2c13d);
background: rgba(242,193,61,.12);
}
.wn-amplify-more { margin: 0.25rem 0 0.75rem; }
.wn-amplify-more > summary {
cursor: pointer;
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.84rem;
font-weight: 700;
}
.wn-amplify-step { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed rgba(217,164,65,.3); }
.wn-amplify-step h3 { margin: 0.75rem 0 0.4rem; font-size: 0.98rem; color: var(--wn-gold-bright, #f2c13d); }
.wn-amplify-fieldset {
border: 1px solid rgba(217,164,65,.35);
border-radius: 8px;
padding: 0.55rem 0.75rem;
margin: 0.45rem 0 0.65rem;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-amplify-fieldset legend {
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0 0.3rem;
}
.wn-amplify-confirm {
display: block;
margin: 0.75rem 0;
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-amplify-empty {
margin: 0.65rem 0;
padding: 0.85rem 1rem;
border: 1px dashed rgba(242,193,61,.45);
border-radius: 10px;
background: rgba(242,193,61,.06);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.92rem;
}
.wn-amplify-empty strong { color: var(--wn-gold-bright, #f2c13d); }
.wn-amplify-lock {
margin: 0 0 0.55rem;
padding: 0.5rem 0.7rem;
border-radius: 8px;
border: 1px solid rgba(217,164,65,.4);
background: rgba(217,164,65,.08);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.84rem;
}
.wn-amplify-reveal {
margin-top: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(242,193,61,.45);
border-radius: 10px;
background: rgba(0,0,0,.22);
}
.wn-amplify-reveal h4 { margin: 0 0 0.5rem; font-size: 0.98rem; color: var(--wn-gold-bright, #f2c13d); }
.wn-amplify-pre {
white-space: pre-wrap;
word-break: break-word;
margin: 0;
padding: 0.75rem;
border-radius: 8px;
background: rgba(0,0,0,.35);
border: 1px solid rgba(217,164,65,.25);
color: var(--wn-cream, #f0ece4);
font-size: 0.82rem;
line-height: 1.45;
max-height: 18rem;
overflow: auto;
}
.wn-amplify-share { margin: 0; padding-left: 1.15rem; color: var(--wn-cream-dim, #d5c4a8); font-size: 0.88rem; }
.wn-amplify-share li { margin: 0.35rem 0; }
.wn-amplify-legal {
margin: 0 0 0.65rem;
padding: 0.65rem 0.8rem;
border-radius: 8px;
border: 1px solid rgba(186,12,47,.55);
background: rgba(186,12,47,.1);
color: #ffd0d0;
font-size: 0.84rem;
}
.wn-amplify-upsell {
margin-top: 0.85rem;
padding: 0.75rem 0.9rem;
border-radius: 10px;
border: 1px solid rgba(242,193,61,.4);
background: rgba(242,193,61,.07);
color: var(--wn-cream-dim, #d5c4a8);
font-size: 0.86rem;
}
.wn-amplify-upsell p { margin: 0.35rem 0; }
.wn-amplify-checkout { color: var(--wn-cream, #f0ece4); }
.wn-amplify-map {
display: grid;
gap: 0.75rem;
grid-template-columns: 1fr;
margin: 1rem 0;
}
@media (min-width: 720px) {
.wn-amplify-map { grid-template-columns: 1fr 1fr; }
}
.wn-amplify-map-card {
border: 1px solid rgba(217,164,65,.35);
border-radius: 10px;
padding: 0.9rem 1rem;
background: rgba(0,0,0,.2);
}
.wn-amplify-map-card h3 { margin: 0 0 0.45rem; color: var(--wn-gold-bright, #f2c13d); font-size: 1rem; }
.wn-amplify-map-card ul { margin: 0; padding-left: 1.1rem; color: var(--wn-cream-dim, #d5c4a8); font-size: 0.88rem; }
.wn-amplify-map-card li { margin: 0.3rem 0; }
.wn-money-rail-note {
margin: 0.75rem 0 0;
font-size: 0.82rem;
color: #a89878;
}
/* ===== Growth-1 Soft · phone ~390 invite first paint ===== */
.wn-invite-doors-phone {
order: 0;
}
@media (max-width: 430px) {
.wn-invite-doors-phone {
margin-top: 0.55rem;
padding: 0.95rem 0.9rem;
border-width: 2px;
border-color: rgba(176, 140, 48, 0.65);
background: #fffdf6;
}
.wn-invite-doors-phone .wn-invite-kicker {
font-size: 0.72rem;
color: #6a5010;
}
.wn-invite-doors-phone .wn-invite-lines {
font-size: 0.9rem;
line-height: 1.4;
}
.wn-invite-doors-phone .wn-invite-lines li {
margin: 0.4rem 0;
}
/* Demote keeper density below fold on phone */
details.wn-home-keepers-demote {
margin: 0.75rem 0.75rem 0.5rem;
padding: 0.55rem 0.75rem;
border-radius: 10px;
border: 1px solid rgba(90,100,120,.25);
background: rgba(255,255,255,.55);
}
details.wn-home-keepers-demote > summary {
cursor: pointer;
list-style: none;
font-weight: 700;
color: #3a3348;
font-size: 0.92rem;
min-height: 44px;
display: flex;
align-items: center;
}
details.wn-home-keepers-demote > summary::-webkit-details-marker { display: none; }
details.wn-home-keepers-demote:not([open]) .wn-path-grid {
display: none;
}
details.wn-home-keepers-demote[open] .wn-path-grid {
margin-top: 0.65rem;
}
}
@media (min-width: 431px) {
details.wn-home-keepers-demote > summary {
cursor: pointer;
list-style: none;
font-weight: 700;
}
details.wn-home-keepers-demote > summary::-webkit-details-marker { display: none; }
}
/* ===== Pass 24 Soft Soft-encode chrome · 2026-09-26 ===== */
.wn-nav {
padding: 0.35rem 0.75rem !important;
gap: 0.25rem 0.35rem !important;
font-size: 0.68rem !important;
}
.wn-nav a { padding: 0.28rem 0.45rem !important; }
.wn-nav .wn-brand-wm { font-size: 0.78rem !important; }
.wn-nav .wn-brand-tag { font-size: 0.5rem !important; }
.wn-nav-ctrls {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.25rem;
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.wn-nav-ctrls .wn-left-toggle,
.wn-nav-ctrls .wn-nav-toggle {
margin-left: 0 !important;
min-height: 2.4rem;
min-width: 2.75rem;
padding: 0.28rem 0.55rem !important;
font-size: 0.62rem !important;
letter-spacing: 0.06em;
}
@media (max-width: 640px) {
.wn-nav { flex-wrap: nowrap !important; align-items: center; }
.wn-nav .wn-brand { flex: 1 1 auto; min-width: 0; margin-right: 0.2rem; margin-bottom: 0 !important; }
.wn-nav-ctrls { flex: 0 0 auto; }
.wn-nav-ctrls .wn-left-toggle,
.wn-nav-ctrls .wn-nav-toggle {
min-height: 2.5rem;
padding: 0.25rem 0.5rem !important;
font-size: 0.6rem !important;
}
}
.wn-hero-supra-line { display: block; width: 100%; margin-top: 0.35rem; }
.wn-header-crumb { padding: 0.22rem 0.85rem !important; font-size: 0.7rem !important; }
.wn-location-bar { padding: 0.4rem 0.85rem !important; }
body.wn-page-welcome .wn-family-secondary { justify-content: flex-start; }
body.wn-page-welcome .wn-site-switch {
background: #fff; color: #0a1628; border-color: rgba(10,22,40,0.22);
}
body.wn-page-welcome .wn-site-switch-label { color: #1a3558; }
/* ===== Pass 25 Soft Soft-encode Amplify my Voice · address gate · topics · 2026-09-26 ===== */
.wn-amplify-addr-gate {
margin: 0.65rem 0 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(217, 164, 65, 0.45);
border-radius: 12px;
background: rgba(0, 0, 0, 0.22);
}
.wn-amplify-addr-fields {
display: grid;
gap: 0.35rem 0.75rem;
margin: 0.65rem 0 0.5rem;
}
@media (min-width: 720px) {
.wn-amplify-addr-fields {
grid-template-columns: 1fr 1fr;
}
.wn-amplify-addr-fields .wn-action-label:nth-of-type(7),
.wn-amplify-addr-fields [data-wn-amp-addr-street] {
grid-column: 1 / -1;
}
}
.wn-amplify-topics {
display: grid;
gap: 0.55rem;
margin: 0.75rem 0 0.35rem;
}
@media (min-width: 640px) {
.wn-amplify-topics { grid-template-columns: 1fr 1fr; }
}
.wn-amplify-topic {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
text-align: left;
padding: 0.7rem 0.85rem;
border-radius: 10px;
border: 1px solid rgba(217, 164, 65, 0.4);
background: rgba(26, 18, 10, 0.65);
color: var(--wn-cream, #f0ece4);
cursor: pointer;
font: inherit;
}
.wn-amplify-topic strong {
color: var(--wn-gold-bright, #f2c13d);
font-size: 0.95rem;
}
.wn-amplify-topic-blurb {
font-size: 0.78rem;
color: var(--wn-cream-dim, #d5c4a8);
line-height: 1.35;
}
.wn-amplify-topic.is-keeper {
border-color: rgba(242, 193, 61, 0.7);
}
.wn-amplify-topic.is-forthcoming,
.wn-amplify-topic:disabled {
opacity: 0.55;
cursor: not-allowed;
border-style: dashed;
}
.wn-amplify-topic:not(:disabled):hover {
border-color: var(--wn-gold-bright, #f2c13d);
background: rgba(42, 28, 14, 0.85);
}
.wn-text-btn {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--wn-gold-bright, #f2c13d);
text-decoration: underline;
cursor: pointer;
font: inherit;
font-size: inherit;
}
.wn-text-btn:hover { color: #fff; }
/* ===== Pass 26 Soft Soft-encode voice · purpose · History · under-banner switcher · 2026-09-26 ===== */
.wn-under-banner.wn-family-secondary,
.wn-family-secondary.wn-under-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.75rem;
padding: 0.45rem 0.95rem;
border-bottom: 1px solid rgba(10, 22, 40, 0.12);
background: #eef2f8;
}
body:not(.wn-page-welcome) .wn-under-banner.wn-family-secondary {
background: rgba(0, 0, 0, 0.28);
border-bottom-color: rgba(217, 164, 65, 0.28);
}
.wn-site-switch option:disabled {
color: #8a8498;
font-style: italic;
}
.wn-hero-mission {
margin: 0.35rem 0 0.55rem;
max-width: 38rem;
font-family: var(--wn-display);
font-size: clamp(0.92rem, 2.3vw, 1.05rem);
font-weight: 600;
line-height: 1.45;
color: #f2c13d;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1);
}
.wn-hero-mission strong { color: #ffd6dc; }
.wn-hero-purpose {
margin: 0.45rem 0 0.55rem;
max-width: 40rem;
color: #f4f7fc;
font-size: clamp(0.95rem, 2.4vw, 1.08rem);
line-height: 1.5;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.wn-hero-purpose strong { color: #ffd6dc; }
.wn-hero-vocal {
margin: 0 0 0.45rem;
max-width: 38rem;
color: #f0e6d2;
font-size: 0.95rem;
line-height: 1.45;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.wn-hero-vocal strong { color: #ffb4c0; }
.wn-hero-frame {
margin: 0 0 0.65rem;
display: inline-block;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(242, 193, 61, 0.55);
background: rgba(10, 22, 40, 0.45);
color: #f2c13d;
font-family: var(--wn-display);
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.02em;
text-shadow: none;
}
.wn-welcome-hero .wn-purpose {
color: rgba(244, 247, 252, 0.9);
font-size: 0.86rem;
}
.wn-history-band {
margin: 0.85rem 0.95rem 0.35rem;
padding: 0.95rem 1.05rem;
border-radius: 12px;
border: 1px solid rgba(26, 53, 88, 0.18);
background: #fff;
box-shadow: 0 6px 18px rgba(10, 22, 40, 0.06);
}
.wn-history-band .wn-section-label {
margin: 0 0 0.45rem;
color: #1a3558;
}
.wn-history-frame {
margin: 0 0 0.55rem;
color: #0a1628;
font-size: 1.05rem;
font-weight: 700;
}
.wn-history-cite-empty {
margin: 0;
color: #5a5470;
font-size: 0.88rem;
line-height: 1.45;
}
body.wn-page-welcome .wn-under-banner .wn-site-switch {
min-width: min(20rem, 92vw);
background: #fff;
color: #0a1628;
}
/* ===== Pass 27 Soft Soft-encode mobile chrome · #25–27 · 2026-09-26 =====
* #25 dropdown-only (no thick white chip/list strip)
* #26 tight WAKE.the.NATION brand on mobile
* #27 site