/* ============================================================
master-common.css — Pleomatic design system
Single source of truth for site-wide styles. Vanilla CSS for
now; Tailwind compile step (_scripts/build_tailwind.py) stays
a no-op until pages > ~20 (see CHANGELOG roadmap).
Design vocabulary documented in DECISIONS.md D-W005.
============================================================ */
/* -----------------------------
1 · Design tokens
----------------------------- */
:root {
--pleo-ink: #0b0d12;
--pleo-ink-soft: #1a1d26;
--pleo-paper: #fafafa;
--pleo-white: #ffffff;
--pleo-muted: #6b7280;
--pleo-text: #4b5563;
--pleo-line: #e5e7eb;
/* Palette re-anchored to the Pleomatic logo (D-W017).
Logo is orange/cream/dark-grey — so primary is orange, accents are warm.
Purple and rose stay only as deep gradient anchors (Unbound pattern),
never as standalone brand colors. */
--pleo-primary: #C2410C; /* deep brand orange, matches logo sphere */
--pleo-primary-dark: #9A3412; /* darker orange for hover / depth */
--pleo-orange: #F97316; /* brighter orange for accents + buttons */
--pleo-amber: #F59E0B; /* warm amber for highlights */
--pleo-cream: #FED7AA; /* light cream — logo highlight family */
--pleo-rose: #BE185D; /* warm magenta — gradient mid-stop only */
--pleo-purple: #5B21B6; /* deep purple — gradient anchor only */
--pleo-accent: #22c55e; /* green — kept for SLA / "live" badges only */
--grad-hero: linear-gradient(135deg, #1A0822 0%, #5B21B6 25%, #BE185D 55%, #F97316 100%);
/* Method-card variants — all warm-anchored, harmonious with the logo */
--grad-card-1: linear-gradient(135deg, #9A3412 0%, #F97316 100%); /* deep → bright orange */
--grad-card-2: linear-gradient(135deg, #BE185D 0%, #F59E0B 100%); /* rose → amber */
--grad-card-3: linear-gradient(135deg, #5B21B6 0%, #C2410C 100%); /* purple → brand orange */
--grad-card-4: linear-gradient(135deg, #F59E0B 0%, #BE185D 100%); /* amber → rose */
--grad-cta-bg: linear-gradient(135deg, #0B0D12 0%, #5B21B6 45%, #F97316 100%);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-xl: 32px;
--shadow-sm: 0 1px 2px rgba(11,13,18,0.04);
--shadow-md: 0 8px 24px rgba(11,13,18,0.08);
--shadow-lg: 0 20px 60px rgba(11,13,18,0.12);
--space-section: 6rem;
}
/* -----------------------------
2 · Base
----------------------------- */
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Fixed nav (~120px tall after logo went 2×) — anchor jumps must offset
it so target h2s aren't hidden under the nav. */
scroll-padding-top: 130px;
}
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
color: var(--pleo-ink);
background: var(--pleo-white);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { letter-spacing: -0.025em; }
/* -----------------------------
3 · Layout
----------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
section.block { padding: var(--space-section) 0; }
.bg-paper { background: var(--pleo-paper); }
/* -----------------------------
4 · Navigation — transparent, blends with hero (Unbound pattern · D-W012)
-----------------------------
The nav is `position: absolute` at the very top of the page so it overlays
the hero gradient seamlessly. Two logo variants ship via the chrome SSI
fragment (`nav-logo-dark` + `nav-logo-light`); CSS uses `:has()` on the
to show the right one based on whether the first section is the
dark `.hero` (homepage) or the light `.hero-slim` (other pages).
----------------------------- */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
background: transparent;
border: none;
transition: background-color .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out;
}
/* Scrolled state — solid white blur backdrop with subtle shadow + border.
Toggled by the inline JS in the nav SSI fragment when scrollY > 80px.
The :has() switches below still control text/logo colors per-page; this
only adds the surface, not the foreground. */
.nav.nav--scrolled {
/* Higher opacity (0.94) reduces the color bleed from the hero gradient
that the backdrop-filter would otherwise pick up during the scroll
transition (visible as a pastel band right after the hero scrolls
under the nav). Saturate kept modest (130%) for the same reason. */
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(130%) blur(18px);
-webkit-backdrop-filter: saturate(130%) blur(18px);
border-bottom: 1px solid var(--pleo-line);
box-shadow: 0 4px 24px rgba(11, 13, 18, 0.06);
}
/* On dark-hero pages, when scrolled past the hero, the page below is white
too — so the same scrolled style works visually. But the logo + nav-links
need to flip back to DARK because the white backdrop won't read with the
white text from the dark-hero theming. Override the :has() switches: */
body:has(.hero) .nav.nav--scrolled .nav-logo-light { display: none; }
body:has(.hero) .nav.nav--scrolled .nav-logo-dark { display: block; }
body:has(.hero) .nav.nav--scrolled .nav-links {
color: var(--pleo-ink);
}
body:has(.hero) .nav.nav--scrolled .nav-links a:hover {
color: var(--pleo-primary);
}
body:has(.hero) .nav.nav--scrolled .nav-cta {
background: var(--pleo-ink);
color: var(--pleo-white);
}
body:has(.hero) .nav.nav--scrolled .nav-cta:hover {
background: var(--pleo-primary);
}
body:has(.hero) .nav.nav--scrolled .nav-hamburger {
color: var(--pleo-ink);
}
@media (prefers-reduced-motion: reduce) {
.nav { transition: none; }
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
max-width: 1280px; margin: 0 auto;
}
.nav-logo {
display: inline-flex; align-items: center;
text-decoration: none;
}
/* Image-based logo (replaces the old text+dot wordmark).
2× the previous size (was 36px) per user direction 2026-05-24 — the logo
is the strongest brand carrier we have and deserves visual weight in the
nav. Nav vertical padding stays the same; the bar grows taller. */
.nav-logo-img {
height: 72px; width: auto;
display: block;
}
/* Both ![]()
variants point at the SAME transparent logo file. CSS picks
which one is visible per page, and applies a brightness-invert filter to
the dark-hero variant so the multicolor real logo reads on the gradient
without needing a separate white-wordmark asset. The `hue-rotate(180deg)`
after `invert(1)` is the classic trick — invert flips lightness AND
spins hue; rotating hue 180° back leaves orange as orange, but dark text
becomes light text. */
.nav-logo-light { display: none; }
.nav-logo-dark { display: block; }
body:has(.hero) .nav-logo-light {
display: block;
filter: invert(1) hue-rotate(180deg) brightness(1.05) drop-shadow(0 1px 4px rgba(0,0,0,0.25));
}
body:has(.hero) .nav-logo-dark { display: none; }
/* When the dark-hero nav scrolls into its solid white state, we want the
normal (non-inverted) logo back so the wordmark reads dark on white. */
body:has(.hero) .nav.nav--scrolled .nav-logo-light { display: none; filter: none; }
body:has(.hero) .nav.nav--scrolled .nav-logo-dark { display: block; }
/* Pill-button nav links (Unbound-style). Each link is a rounded pill
with a subtle outline — clickable affordance + adds visual rhythm.
Typeface: Lexend Deca (D-W019) — geometric humanist sans-serif that
matches Unbound's nav exactly. Weight 300 = airy, weight 400 on hover
adds subtle authority feedback. */
.nav-links {
display: flex; gap: 0.5rem;
font-family: 'Lexend Deca', 'Inter', system-ui, sans-serif;
font-size: 0.92rem; font-weight: 400;
letter-spacing: 0.01em;
color: var(--pleo-ink);
list-style: none; margin: 0; padding: 0;
}
.nav-links a {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid var(--pleo-line);
background: transparent;
color: inherit;
transition: background .15s, border-color .15s, color .15s;
}
.nav-links a:hover {
background: var(--pleo-ink);
color: var(--pleo-white);
border-color: var(--pleo-ink);
}
/* On dark hero: white-outlined pills, translucent fill on hover */
body:has(.hero) .nav-links { color: rgba(255, 255, 255, 0.92); }
body:has(.hero) .nav-links a {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(6px);
}
body:has(.hero) .nav-links a:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.45);
color: var(--pleo-white);
}
.nav-cta {
background: var(--pleo-ink); color: var(--pleo-white);
padding: 0.55rem 1.1rem; border-radius: 999px;
font-family: 'Lexend Deca', 'Inter', system-ui, sans-serif;
font-weight: 500; font-size: 0.92rem;
letter-spacing: 0.01em;
display: inline-flex; align-items: center; gap: 0.4rem;
transition: transform .15s, background .15s, color .15s, box-shadow .15s;
text-decoration: none;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--pleo-primary); }
/* Brand-orange pill CTA on the dark hero — Unbound's pattern of using the
same color family as the page gradient (their CTA is a dark purple
matching the hero). For us, orange anchors the CTA to the logo's orange
and feels native to the page, not stamped on top of it. */
body:has(.hero) .nav-cta {
background: var(--pleo-orange);
color: var(--pleo-white);
box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}
body:has(.hero) .nav-cta:hover {
background: var(--pleo-primary-dark);
color: var(--pleo-white);
box-shadow: 0 8px 24px rgba(154, 52, 18, 0.5);
}
@media (max-width: 800px) {
.nav-links { display: none; }
/* Mobile logo also 2× (was 30px). Stays readable on phones; balances
against the hamburger button which is 40px square. */
.nav-logo-img { height: 60px; }
.nav-inner { padding: 1rem 1.25rem; }
/* The desktop CTA pill hides on mobile — its job moves to the drawer */
.nav-inner > .nav-cta { display: none; }
}
/* -----------------------------
4b · Mobile nav drawer (D-W013)
-----------------------------
Hamburger button visible only on phones; tapping it slides in a full-
screen dark panel from the right with all nav links + the CTA. Body gets
a `data-mobile-nav-open` attribute via the inline JS in the nav SSI
fragment. CSS handles all motion + the icon morph; JS only toggles state.
----------------------------- */
.nav-hamburger {
display: none; /* desktop hidden — see media query below */
background: transparent;
border: 0;
padding: 0;
width: 40px; height: 40px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
color: var(--pleo-ink);
}
body:has(.hero) .nav-hamburger { color: var(--pleo-white); }
.nav-hamburger span {
display: block;
width: 22px; height: 2px;
background: currentColor;
border-radius: 1px;
transition: transform .25s cubic-bezier(.22, 1, .36, 1),
opacity .15s ease-out;
}
@media (max-width: 800px) {
.nav-hamburger { display: inline-flex; }
}
/* Animated icon morph: 3 lines → X */
body[data-mobile-nav-open] .nav-hamburger {
color: var(--pleo-white); /* always white on the dark drawer */
}
body[data-mobile-nav-open] .nav-hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body[data-mobile-nav-open] .nav-hamburger span:nth-child(2) { opacity: 0; }
body[data-mobile-nav-open] .nav-hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Slide-in drawer */
.nav-mobile-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 100%;
max-width: 480px;
background: linear-gradient(160deg, #0b0d12 0%, #5B21B6 50%, #F97316 100%);
color: var(--pleo-white);
z-index: 60;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear .35s;
visibility: hidden;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
}
body[data-mobile-nav-open] .nav-mobile-panel {
transform: translateX(0);
visibility: visible;
transition: transform .35s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear 0s;
}
.nav-mobile-panel nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1.5rem;
padding: 5rem 2.5rem 3rem;
}
.nav-mobile-panel a {
color: var(--pleo-white);
text-decoration: none;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
opacity: 0.9;
transition: opacity .15s ease-out;
}
.nav-mobile-panel a:hover,
.nav-mobile-panel a:focus { opacity: 1; }
.nav-mobile-panel .nav-cta {
display: inline-flex; /* override the .nav-inner > .nav-cta { display: none } */
margin-top: 1rem;
background: var(--pleo-white);
color: var(--pleo-ink);
font-size: 1rem;
padding: 0.85rem 1.4rem;
opacity: 1;
}
.nav-mobile-panel .nav-cta:hover {
background: var(--pleo-ink);
color: var(--pleo-white);
}
/* Dim backdrop behind the drawer — real