/* ============================================================
Positive Earth Growth Hub — Site Shell
Rev B · 2026-05-14
----------------------------------------------------------------
Adds:
· Per-page identity (accent colour, page chip, active nav state)
· Cross-document view transitions (1.5s crossfade)
· Logo refresh (forest-green leaf + per-page accent on "Growth Hub")
· Mobile swipe hint
Supports BOTH markup patterns used across the site:
· New pattern (case-studies.html): .site-header__brand · .site-header__nav
· Legacy pattern (index/scope/pricing/tender): .brand · .nav
(Legacy "Growth Hub" line styled via .brand-line-2 added in HTML edit.)
Usage:
…
============================================================ */
/* ---- Brand colour anchor (memory: forest green styling) ---- */
:root {
--brand-green: #2d5a2d;
--brand-green-ink: #1f3f1f;
--brand-green-soft: #d8e4d6;
}
/* ---- Per-page palette ---- */
body[data-page="home"] {
--accent: #2d5a2d; /* forest green — anchor */
--accent-ink: #1f3f1f;
--page-tint: transparent; /* let hero gradient lead */
--page-label: "Home";
}
body[data-page="scope"] {
--accent: #2a6f7a; /* teal — measurement / drawings */
--accent-ink: #1d525a;
--page-tint: transparent;
--page-label: "Scope & BOM";
}
body[data-page="pricing"] {
--accent: #b4471d; /* terracotta — audit / fire */
--accent-ink: #8a3614;
--page-tint: transparent;
--page-label: "Pricing Audit";
}
body[data-page="tender"] {
--accent: #8a5a2a; /* burnt amber — high stakes */
--accent-ink: #6a4520;
--page-tint: transparent;
--page-label: "Tender Review";
}
body[data-page="case-studies"] {
--accent: #4a5d3a; /* olive — proof / archive */
--accent-ink: #364528;
--page-tint: #e9ebde;
--page-label: "Case Studies";
}
/* Optional page background tint (only used where set above) */
body[data-page] { background-color: var(--page-tint, transparent); }
/* ============ Header: logo refresh ============ */
/* New pattern — case-studies.html uses .site-header__brand */
.site-header__brand {
display: inline-flex !important;
align-items: center !important;
gap: 0.55rem !important;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--ink, #1c1a17);
}
.site-header__brand::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50% 0 50% 0; /* leaf shape */
background: var(--brand-green);
transform: rotate(-12deg);
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--brand-green-soft);
}
.site-header__brand span {
font-family: var(--display, 'Fraunces', Georgia, serif) !important;
font-size: 1.05rem !important;
font-weight: 500 !important;
color: var(--accent) !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
padding-left: 0.4rem;
border-left: 1px solid var(--rule, #d4cdbf);
margin-left: 0.15rem;
font-style: italic;
}
/* Legacy pattern — .brand already has an ![]()
logo, so no leaf needed.
We split the wordmark into .brand-line-1 / .brand-line-2 in the HTML
and colour the second line per page. */
.brand .brand-line-1,
.brand .brand-line-2 {
display: block;
}
.brand .brand-line-1 {
color: inherit;
font-weight: 700;
letter-spacing: 0.06em;
font-size: 0.78rem;
text-transform: uppercase;
}
.brand .brand-line-2 {
color: var(--accent, #c7a25a) !important;
font-weight: 800;
letter-spacing: 0.02em;
font-size: 1.05rem;
text-transform: none;
font-style: italic;
margin-top: 1px;
}
/* In dark heroes (where .brand sits on a green/gradient background),
keep "Positive Earth" white so it stays readable. */
.hero .brand .brand-line-1 {
color: rgba(255,255,255,0.92);
}
/* ============ Header: page chip ============ */
/* Auto-injected chip via ::after — works on both .site-header__brand and the
wrapper around .brand (legacy nav puts .brand inside an anchor). */
body[data-page] .site-header__brand::after,
body[data-page] .nav > a:first-child::after {
content: var(--page-label);
margin-left: 0.6rem;
padding: 0.28rem 0.6rem;
background: var(--accent);
color: #fff;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
position: relative;
top: -2px;
}
/* If a manual .page-chip is present, suppress the auto fallback */
.site-header:has(.page-chip) .site-header__brand::after,
.nav:has(.page-chip) > a:first-child::after { content: none; }
/* ============ Header: current-page nav marker ============ */
.site-header__nav a[aria-current="page"],
.nav a[aria-current="page"] {
font-weight: 700;
position: relative;
border-color: var(--accent) !important;
background: var(--accent) !important;
color: #fff !important;
}
/* ============ View transitions (1.5s crossfade) ============ */
/* Cross-document MPA transitions (Chrome/Edge 126+) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 1500ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: page-fade-out; }
::view-transition-new(root) { animation-name: page-fade-in; }
@keyframes page-fade-out {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes page-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fallback for browsers without View Transitions: fade body in on load */
@supports not (view-transition-name: none) {
body[data-page] {
animation: shell-fade-in 1500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes shell-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* JS-driven transition when swipe nav fires (also 1.5s) */
body.is-leaving {
animation: shell-fade-out 1500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes shell-fade-out {
to { opacity: 0; transform: translateY(-6px); }
}
/* ============ Swipe hint (mobile / tablet only) ============ */
.swipe-hint {
display: none;
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 50;
padding: 0.55rem 0.9rem;
background: rgba(28, 26, 23, 0.88);
color: #f7f3eb;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
border-radius: 999px;
pointer-events: none;
opacity: 0;
transition: opacity 400ms ease;
}
@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
.swipe-hint { display: inline-flex; align-items: center; gap: 0.5rem; }
.swipe-hint.is-visible { opacity: 1; }
.swipe-hint::before { content: "←"; }
.swipe-hint::after { content: "→"; }
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
body[data-page],
body.is-leaving { animation: none !important; }
}
/* ============ Small screens ============ */
@media (max-width: 640px) {
.site-header__brand { font-size: 1.1rem !important; }
.site-header__brand span { font-size: 0.95rem !important; }
.brand .brand-line-2 { font-size: 0.95rem; }
.nav,
.site-header__nav {
display: flex;
flex-wrap: nowrap;
gap: 0.45rem;
overflow-x: auto;
padding-bottom: 0.15rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar,
.site-header__nav::-webkit-scrollbar {
display: none;
}
.nav a,
.site-header__nav a,
.btn,
.btn-primary,
.btn-secondary,
.btn--primary,
.btn--secondary,
.nav-btn,
.nav-cta,
.site-header__cta {
flex: 0 0 auto;
min-height: 44px;
white-space: nowrap;
}
body[data-page] .site-header__brand::after,
body[data-page] .nav > a:first-child::after {
font-size: 0.58rem;
padding: 0.2rem 0.5rem;
}
}
/* ============ Destination-aware major actions ============ */
:root {
--target-main: #c49b4d;
--target-growth: #d2a84f;
--target-lighting: #e28a42;
--target-systems: #65c4b3;
--target-drafting: #9fb66f;
--target-realm: var(--accent, var(--target-growth));
--target-text: #17140d;
--pattern-growth:
linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.22) 46% 47%, transparent 47%),
linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
--pattern-lighting:
radial-gradient(ellipse at 82% 20%, rgba(255,255,255,0.28), transparent 3.8rem),
repeating-linear-gradient(132deg, transparent 0 13px, rgba(255,255,255,0.14) 13px 14px);
--pattern-systems:
linear-gradient(90deg, transparent 0 20px, rgba(255,255,255,0.15) 20px 21px),
linear-gradient(transparent 0 20px, rgba(255,255,255,0.15) 20px 21px);
--pattern-drafting:
linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px),
linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,0.18) 45% 46%, transparent 46%);
}
a[href="index.html"],
a[href="/index.html"] { --target-realm: var(--target-main); --button-pattern: var(--pattern-growth); }
a:is([href*="growth-hub.html"],[href="/growth-hub"],[href^="/growth-hub#"],[href^="/growth-hub?"]),
a[href*="Growth%20Hub"] { --target-realm: var(--target-growth); --button-pattern: var(--pattern-growth); }
a:is([href*="lighting.html"],[href="/lighting"],[href^="/lighting#"],[href^="/lighting?"]),
a[href*="Lighting%20Brief"] { --target-realm: var(--target-lighting); --button-pattern: var(--pattern-lighting); }
a:is([href*="systems-projects.html"],[href="/systems-projects"],[href^="/systems-projects#"],[href^="/systems-projects?"]),
a[href*="Systems%20Project"] { --target-realm: var(--target-systems); --button-pattern: var(--pattern-systems); }
a:is([href*="engineering-drafting-design.html"],[href="/engineering-drafting-design"],[href^="/engineering-drafting-design#"],[href^="/engineering-drafting-design?"]),
a[href*="Engineering%20Design"] { --target-realm: var(--target-drafting); --button-pattern: var(--pattern-drafting); }
.btn,
.btn-primary,
.btn-secondary,
.btn--primary,
.btn--secondary,
.nav-btn,
.nav-cta,
.site-header__cta {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
transform: translateZ(0);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease !important;
}
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn--primary::before,
.btn--secondary::before,
.nav-btn::before,
.nav-cta::before,
.site-header__cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0;
pointer-events: none;
background:
var(--button-pattern, linear-gradient(135deg, rgba(255,255,255,0.18), transparent 52%)),
color-mix(in srgb, var(--target-realm) 92%, transparent);
background-size: auto, 34px 34px;
transition: opacity 220ms ease, transform 220ms ease;
}
.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn--primary:hover::before,
.btn--secondary:hover::before,
.nav-btn:hover::before,
.nav-cta:hover::before,
.site-header__cta:hover::before,
.btn:focus-visible::before,
.btn-primary:focus-visible::before,
.btn-secondary:focus-visible::before,
.btn--primary:focus-visible::before,
.btn--secondary:focus-visible::before,
.nav-btn:focus-visible::before,
.nav-cta:focus-visible::before,
.site-header__cta:focus-visible::before {
opacity: 1;
transform: scale(1.08);
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn--primary:hover,
.btn--secondary:hover,
.nav-btn:hover,
.nav-cta:hover,
.site-header__cta:hover,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.nav-btn:focus-visible,
.nav-cta:focus-visible,
.site-header__cta:focus-visible {
transform: translateY(-3px) !important;
border-color: color-mix(in srgb, var(--target-realm) 84%, white 16%) !important;
box-shadow:
0 18px 42px rgba(22,32,27,0.18),
0 0 0 5px color-mix(in srgb, var(--target-realm) 12%, transparent) !important;
}
a:is([href*="lighting.html"],[href="/lighting"],[href^="/lighting#"],[href^="/lighting?"]):hover,
a[href*="Lighting%20Brief"]:hover { transform: translateY(-3px) rotate(0.5deg) !important; }
a:is([href*="systems-projects.html"],[href="/systems-projects"],[href^="/systems-projects#"],[href^="/systems-projects?"]):hover,
a[href*="Systems%20Project"]:hover { transform: translateY(-3px) scale(1.025) !important; }
a:is([href*="engineering-drafting-design.html"],[href="/engineering-drafting-design"],[href^="/engineering-drafting-design#"],[href^="/engineering-drafting-design?"]):hover,
a[href*="Engineering%20Design"]:hover { transform: translateY(-3px) rotate(-0.35deg) !important; }