/* ================================================================ NAVY THEME OVERLAY Applied to any page whose carries class="navy". Loads AFTER site.css / page.css / home-a.css — overrides paper-and-ink pages so they pick up the Direction C palette (deep navy + cream serif + gold italics) plus the chart-grid pseudo-elements. Depends on body.navy token overrides in assets/home-c.css. ================================================================ */ /* ---- top classification strip ---- */ body.navy .gc-classbar { background: var(--c-bg); border-bottom-color: var(--c-rule); color: var(--c-mute); } body.navy .gc-classbar__mid { color: var(--c-gold); } body.navy .gc-classbar__right .dot { background: #1F8A5B; box-shadow: 0 0 6px rgba(31,138,91,0.7); } /* ---- nav band ---- */ body.navy .gc-nav { background: var(--c-bg); border-bottom-color: var(--c-rule); } body.navy .gc-nav__brand .name { color: var(--c-text); } body.navy .gc-nav__brand .sub { color: var(--c-mute); } body.navy .gc-nav__links { color: var(--c-soft); } body.navy .gc-nav__links a.is-active { color: var(--c-text); } body.navy .gc-nav__links a.is-active::after { background: var(--c-gold); } body.navy .gc-nav__links a:hover { color: var(--c-gold); } body.navy .gc-nav__cta { color: var(--c-text); border-color: var(--c-rule-2); } body.navy .gc-nav__cta:hover { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); } /* ---- bands: grid + chart marks ---- */ body.navy .gc-band { position: relative; overflow: hidden; background: var(--c-bg); border-top-color: var(--c-rule); } body.navy .gc-band--deep { background: var(--c-bg-2); } body.navy .gc-band--ink { background: var(--c-bg-3); color: var(--c-text); } body.navy .gc-band--navy { background: var(--c-bg-3); color: var(--c-text); } body.navy .gc-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-size: 800px 600px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); z-index: 0; } body.navy .gc-band::after { display: none; } body.navy .gc-band > *, body.navy .gc-band > section { position: relative; z-index: 1; } /* hero (variation A) also gets the chart grid behind the lede */ body.navy .hero { position: relative; background: var(--c-bg); border-bottom-color: var(--c-rule); overflow: hidden; } body.navy .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-size: 800px 600px; -webkit-mask-image: radial-gradient(120% 80% at 20% 50%, transparent 18%, #000 65%); mask-image: radial-gradient(120% 80% at 20% 50%, transparent 18%, #000 65%); z-index: 0; } body.navy .hero > * { position: relative; z-index: 1; } /* sub-page hero too */ body.navy .page-hero { position: relative; background: var(--c-bg); border-bottom-color: var(--c-rule); overflow: hidden; } body.navy .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-size: 800px 600px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); z-index: 0; } body.navy .page-hero > * { position: relative; z-index: 1; } /* ---- typography: gold italics ---- */ body.navy .display em, body.navy .display-italic { color: var(--c-gold); } body.navy .lede, body.navy .body-l { color: var(--c-soft); } body.navy .body-l strong { color: var(--c-text); } /* hero / manifesto / pullquote em already covered, but section markers in dark bands need explicit cream-on-dark */ body.navy .gc-band--ink .gc-band__marker, body.navy .gc-band--navy .gc-band__marker { color: rgba(236,226,206,0.55); } body.navy .gc-band--ink .display, body.navy .gc-band--navy .display { color: var(--c-text); } body.navy .gc-band--ink .body-l, body.navy .gc-band--navy .body-l { color: rgba(236,226,206,0.7); } body.navy .gc-band--ink p, body.navy .gc-band--navy p { color: rgba(236,226,206,0.7); } /* pullquote on ink band */ body.navy .pullquote__q, body.navy .gc-band--ink .pullquote__q { color: var(--c-text); } body.navy .pullquote__q::before, body.navy .pullquote__q::after { color: var(--c-gold); } body.navy .pullquote__q em { color: rgba(236,226,206,0.55); } /* eyebrow / amber chrome already gold via token override */ /* ---- buttons ---- */ body.navy .btn { border-color: var(--c-rule-2); color: var(--c-text); background: transparent; } body.navy .btn:hover { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); } body.navy .btn--solid { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); } body.navy .btn--solid:hover { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); } body.navy .btn--amber, body.navy .btn.btn--amber, body.navy .engage__cta { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); } body.navy .btn--amber:hover, body.navy .engage__cta:hover { background: #D8BC7B; border-color: #D8BC7B; color: var(--c-bg); } body.navy .btn--ghost { color: var(--c-soft); } body.navy .btn--ghost:hover { background: transparent; color: var(--c-gold); } /* ---- capabilities (home_a) ---- */ body.navy .cap { border-color: var(--c-rule); } body.navy .cap__title { color: var(--c-text); } body.navy .cap__title em { color: var(--c-gold); } body.navy .cap__lines li { border-color: var(--c-rule); } body.navy .cap__lines b { color: var(--c-text); } /* ---- service lines (subpages) ---- */ body.navy .svc { border-color: var(--c-rule); } body.navy .svc__title { color: var(--c-text); } body.navy .svc__tags span { border-color: var(--c-rule-2); color: var(--c-mute); } body.navy .svc-list { border-color: var(--c-rule); } /* ---- threat-grid (maritime) ---- */ body.navy .threat { border-color: var(--c-rule); } body.navy .threat h3 { color: var(--c-text); } /* ---- leadership page ---- */ body.navy .leader__lines li { border-color: var(--c-rule); } body.navy .leader__lines b { color: var(--c-mute); } body.navy .leader__lines span { color: var(--c-text); } body.navy .leader__lede p:first-child { color: var(--c-text); } body.navy .portrait-tools { background: var(--c-bg-2); border-color: var(--c-rule); } body.navy .portrait-tools__row button { background: transparent; color: var(--c-text); border-color: var(--c-rule-2); } body.navy .portrait-tools__row button:hover { border-color: var(--c-gold); } body.navy .portrait-tools__row button.is-active { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); } body.navy .portrait-tools__width input[type="range"] { accent-color: var(--c-gold); } body.navy .portrait-tools__width-v { color: var(--c-text); } body.navy .portrait-tools__hint { color: var(--c-mute); } body.navy .leader__portrait--blind .blind { background: repeating-linear-gradient(45deg, var(--c-bg-2) 0 12px, var(--c-bg-3) 12px 24px); border-color: var(--c-rule-2); color: var(--c-mute); } /* ---- engage cards (contact) ---- */ body.navy .engage-cards { border-color: var(--c-rule); } body.navy .engage-card { background: transparent; border-color: var(--c-rule); } body.navy a.engage-card:hover { background: rgba(236,226,206,0.04); } body.navy .engage-card h3 { color: var(--c-text); } body.navy .engage-card p { color: var(--c-soft); } body.navy .engage-card__addr { color: var(--c-text); } body.navy .engage-card__addr .arrow { color: var(--c-gold); } body.navy .not-list li { border-color: rgba(236,226,206,0.15); color: var(--c-text); } body.navy .not-list li::before { color: var(--c-gold); } /* ---- engage section ---- */ body.navy .engage__h em { color: var(--c-gold); } body.navy .engage__meta { border-top-color: var(--c-rule); color: var(--c-mute); } /* ---- image-slot ---- */ body.navy image-slot { background: var(--c-bg-2); border-color: var(--c-rule-2); } /* ---- footer ---- */ body.navy .gc-foot { background: var(--c-bg-3); border-top-color: var(--c-rule); } body.navy .gc-foot__brand .display { color: var(--c-text); } body.navy .gc-foot p { color: var(--c-mute); } body.navy .gc-foot h4 { color: var(--c-mute); } body.navy .gc-foot a { color: var(--c-text); } body.navy .gc-foot a:hover { color: var(--c-gold); } body.navy .gc-foot__base { border-top-color: var(--c-rule); color: var(--c-mute); } body.navy .gc-foot__base .mid { color: var(--c-gold); } /* ---- hero radar (home_a hero gets a small sonar accent) ---- */ body.navy .hero { /* extra room for the radar trace on the right */ } body.navy .hero__radar { position: absolute; top: 0; right: -6%; bottom: 0; width: 65%; pointer-events: none; opacity: 0.9; z-index: 0; }