/* =========================================================== Purpose 417 — Design System Palette derived from the confirmed official logo; extended with tints/shades of the same hues for depth (no new brand colors introduced pending Vera's formal standards). System font stack — zero external font requests, fast load. =========================================================== */ :root{ /* Color tokens — core */ --p417-orange: #FE4C06; --p417-orange-dark: #B83400; --p417-orange-deep: #8F2800; --p417-orange-tint: #FFF1E9; --p417-orange-tint-2: #FFE2D1; --p417-black: #1A1A1A; --p417-black-soft: #232323; --p417-ink: #2B2B2B; --p417-gray-700: #4A4A4A; --p417-gray-500: #6D6D6D; --p417-gray-400: #8A8A8A; --p417-gray-200: #E5E2DD; --p417-gray-100: #F4F2EE; --p417-cream: #FDFCFA; --p417-white: #FFFFFF; --p417-border: #E5E2DD; /* Semantic tokens */ --p417-bg: var(--p417-cream); --p417-surface: var(--p417-white); --p417-text: var(--p417-ink); --p417-text-muted: var(--p417-gray-700); /* Type scale */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-body); --step-1: clamp(2.25rem, 1.85rem + 1.9vw, 3.5rem); --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.05rem); --step-3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --step-lede: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); --step-meta: 0.8125rem; /* Spacing scale — fluid where it helps mobile density */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: clamp(2.5rem, 2rem + 2.2vw, 4rem); --sp-6: clamp(3rem, 2.2rem + 3.6vw, 6rem); /* Radius scale */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-full: 999px; /* Shadow scale */ --shadow-xs: 0 1px 2px rgba(26,26,26,0.06); --shadow-sm: 0 2px 8px rgba(26,26,26,0.07); --shadow-md: 0 8px 24px rgba(26,26,26,0.12); --shadow-lg: 0 16px 40px rgba(26,26,26,0.16); /* Motion */ --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: .15s; --dur-base: .25s; --measure: 62ch; } /* ---------- Display face (headings only) ---------- Single self-hosted weight (Libre Franklin 800, Latin subset, ~16KB) — body copy stays on the system stack, so this adds exactly one extra request instead of a whole typeface family. Chosen for a grounded, civic/trade character distinct from the OS default UI font, not a trendy display face. font-display:swap avoids invisible-text flash; the system stack is the fallback for the swap period and for any browser that fails the request. */ @font-face{ font-family:'P417 Display'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/libre-franklin-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122; } /* ---------- Base ---------- */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } body{ background:var(--p417-bg); font-family:var(--font-body); color:var(--p417-text); line-height:1.65; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--p417-black); line-height:1.15; font-weight:750; letter-spacing:-0.01em; text-wrap:balance; } /* h1/h2 carry the display face; h3/h4 stay on the system stack — card and section-heading density reads better in the plainer face at that size. */ h1,h2{ font-family:'P417 Display', var(--font-display); font-weight:800; } h1{ font-size:var(--step-1); } h2{ font-size:var(--step-2); margin-bottom:var(--sp-2); } h3{ font-size:var(--step-3); } p{ max-width:var(--measure); } a{ color:var(--p417-orange-dark); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; } a:hover{ color:var(--p417-black); } /* Skip link */ .p417-skip-link{ position:absolute; left:-9999px; top:0; background:var(--p417-black); color:#fff; padding:0.75rem 1.25rem; z-index:10000; border-radius:0 0 var(--radius-md) 0; font-weight:600; } .p417-skip-link:focus{ left:0; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .wp-block-button__link:focus-visible, .nv-nav-toggle:focus-visible, .hamburger:focus-visible{ outline: 3px solid var(--p417-orange); outline-offset: 2px; border-radius: 2px; } /* ---------- Header ---------- */ .site-header, .nv-navigation{ border-bottom: 1px solid var(--p417-border); background: var(--p417-white); } #nv-header-inner-wrap .site-header .nv-nav-item > a{ font-weight:600; letter-spacing:0.01em; transition:color var(--dur-fast) var(--ease); } /* Persistent header — stays visible while scrolling. Wraps both the desktop and mobile nav rows, so the hamburger stays reachable too. Uses `fixed`, not `sticky`: Neve sets `overflow-x:hidden` on (required for its off-canvas mobile menu), and any ancestor overflow other than visible breaks `position:sticky` in most browsers. Fixed positioning isn't affected by ancestor overflow, so it sidesteps that without touching Neve's own reset. --p417-header-h is measured and kept in sync by JS in site-enhancements.php (actual height varies by breakpoint/logo size, not worth hardcoding) and used to reserve space below the header and to offset anchor-link scroll targets. !important on body's padding-top: Neve emits its own dynamic `body{padding-top:0px;...}` inline stylesheet (its "container padding" customizer setting, id="neve-style-inline-css") after this stylesheet in . Same selector, same specificity — without !important its 0px silently wins on source order and the fixed header covers the page. */ :root{ --p417-header-h: 59px; } .header{ position:fixed; top:0; left:0; right:0; z-index:999; background:var(--p417-white); box-shadow:var(--shadow-sm); transition:background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease); } body{ padding-top:var(--p417-header-h) !important; } html{ scroll-padding-top:var(--p417-header-h); } /* Mostly-transparent header past the first bit of scroll — opaque at the very top of the page (where it reads as a normal header over the hero), then fades toward see-through once scrolling starts, so it stops competing with the page below it. .is-scrolled is toggled by JS in site-enhancements.php past a small scroll threshold. backdrop-filter keeps the nav links legible over whatever content is scrolling underneath; the @supports fallback raises the opacity for the small number of browsers without blur support, since unblurred text behind a 15%-opacity bar is unreadable. */ .header.is-scrolled{ background:rgba(255,255,255,0.15); box-shadow:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .header.is-scrolled{ background:rgba(255,255,255,0.85); } } /* Header height is driven entirely by the logo (Neve sizes it via --maxwidth on .builder-item--logo, in its own dynamic inline stylesheet — same !important-override situation as body's padding-top above, since that inline CSS loads after ours). History, for whoever reads this next: shrunk to ~59px (56px logo, 4px padding), squeezed to a 60px logo same session, then doubled to 120px logo / 10px padding (~140px header). Next request kept the 120px logo fixed but asked for the header shorter again — with logo size now off the table as a lever, padding is the only room left. Trimmed to 4px (matches the same "least padding that still keeps the logo off the header's own edge/shadow" floor found during the first shrink), landing around ~118px — a real ~15% cut from 140px, not dramatic, because the 120px logo itself is now the height floor. */ .builder-item--logo{ --maxwidth: 120px !important; --padding: 4px 0 !important; } /* Neve renders a redundant page-title bar above our custom hero on every page; disabled globally via theme_mod filter in site-enhancements.php, this rule is a defensive fallback in case that filter is ever removed. */ .nv-page-title-wrap{ display:none; } /* ---------- Layout sections ---------- */ .p417-section{ padding:var(--sp-6) var(--sp-3); } .p417-section-tight{ padding:var(--sp-5) var(--sp-3); } .p417-container{ max-width:1180px; margin:0 auto; } .p417-section-alt{ background:var(--p417-gray-100); } .p417-section-tint{ background:var(--p417-orange-tint); } .p417-section-dark{ background:var(--p417-black); color:#fff; } .p417-section-dark h2, .p417-section-dark h3{ color:#fff; } .p417-eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; text-transform:uppercase; letter-spacing:0.08em; font-size:var(--step-meta); font-weight:700; color:var(--p417-orange-dark); margin-bottom:var(--sp-1); } .p417-eyebrow::before{ content:""; display:inline-block; width:1.25rem; height:2px; background:var(--p417-orange); } .p417-section-dark .p417-eyebrow{ color:var(--p417-orange); } .p417-center{ text-align:center; } .p417-center .p417-eyebrow{ justify-content:center; } .p417-lede{ font-size:var(--step-lede); color:var(--p417-text-muted); max-width:var(--measure); } .p417-center .p417-lede{ margin-left:auto; margin-right:auto; } /* ---------- Hero ---------- */ .p417-hero{ position:relative; background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(254,76,6,0.22), transparent 60%), linear-gradient(165deg, var(--p417-black-soft), var(--p417-black) 60%); color:#fff; padding:var(--sp-6) var(--sp-3); text-align:center; overflow:hidden; } .p417-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--p417-orange), var(--p417-orange-dark)); } .p417-hero h1{ color:#fff; margin:0 0 var(--sp-2); position:relative; } .p417-hero p{ color:#EDEAE6; max-width:44rem; margin:0 auto var(--sp-3); font-size:var(--step-lede); position:relative; } .p417-hero-ctas{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; position:relative; } /* ---------- Buttons ---------- */ .p417-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; padding:0.85rem 1.75rem; border-radius:var(--radius-full); text-decoration:none; min-height:44px; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); border:2px solid transparent; } .p417-btn-primary{ background:var(--p417-orange); color:var(--p417-black); } .p417-btn-primary:hover{ background:var(--p417-orange-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md); } .p417-btn-primary:active{ transform:translateY(0); box-shadow:var(--shadow-xs); } .p417-btn-outline{ border-color:#fff; color:#fff; } .p417-btn-outline:hover{ background:#fff; color:var(--p417-black); } .p417-btn-outline-dark{ border-color:var(--p417-black); color:var(--p417-black); } .p417-btn-outline-dark:hover{ background:var(--p417-black); color:#fff; } /* ---------- Grid & Cards ---------- */ .p417-grid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); margin-top:var(--sp-3); } .p417-grid-2{ grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); } .p417-card{ position:relative; background:var(--p417-surface); border:1px solid var(--p417-border); border-radius:var(--radius-md); padding:var(--sp-3); box-shadow:var(--shadow-xs); transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); overflow:hidden; } .p417-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--p417-orange); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease); } .p417-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--p417-gray-200); } .p417-card:hover::before{ transform:scaleX(1); } .p417-card h3{ margin-top:0; } .p417-card a.p417-card-link{ font-weight:600; display:inline-flex; align-items:center; gap:0.3em; } .p417-card a.p417-card-link:hover{ gap:0.5em; } /* Numbered step badge (process/how-it-works cards) */ .p417-step-num{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:var(--radius-full); background:var(--p417-orange-tint-2); color:var(--p417-orange-deep); font-weight:800; font-size:1.05rem; margin-bottom:var(--sp-1); } /* ---------- Stats ---------- */ .p417-stat{ text-align:center; padding:var(--sp-2); } .p417-stat-num{ display:block; font-size:2.5rem; font-weight:800; color:var(--p417-orange); line-height:1; letter-spacing:-0.02em; } .p417-stat-num.is-placeholder{ color:var(--p417-gray-400); font-size:1.75rem; font-weight:700; } .p417-stat-label{ color:var(--p417-text-muted); font-size:0.95rem; margin-top:0.5rem; } .p417-stat:has(.p417-stat-num.is-placeholder) .p417-stat-label::after{ content:"Data pending"; display:block; margin-top:0.3rem; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--p417-orange-dark); background:var(--p417-orange-tint); padding:0.15rem 0.6rem; border-radius:var(--radius-full); width:fit-content; margin-inline:auto; } /* ---------- Image placeholders (no fabricated photography) ---------- */ .p417-img-placeholder{ border:2px dashed var(--p417-gray-400); border-radius:var(--radius-md); background:var(--p417-gray-100); color:var(--p417-text-muted); display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--sp-3); min-height:220px; font-size:0.95rem; } .p417-img-placeholder strong{ display:block; color:var(--p417-black); margin-bottom:0.35rem; } /* ---------- Team headshots (Leadership & Board cards) ---------- */ .p417-team-card{ text-align:center; } .p417-headshot{ width:100px; height:100px; border-radius:var(--radius-full); object-fit:cover; margin:0 auto var(--sp-2); display:block; border:3px solid var(--p417-white); box-shadow:var(--shadow-sm); } /* Monogram, not a dashed "missing" box — a bio card sitting next to a real headshot shouldn't visually announce "unfinished." The name is already in the card's

; the initials read as a deliberate avatar style. */ .p417-headshot-placeholder{ width:100px; height:100px; border-radius:var(--radius-full); margin:0 auto var(--sp-2); background:linear-gradient(135deg, var(--p417-gray-200), var(--p417-orange-tint-2)); color:var(--p417-orange-deep); display:flex; align-items:center; justify-content:center; font-family:'P417 Display', var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:0.02em; box-shadow:var(--shadow-xs); } /* ---------- Empty states ---------- */ .p417-empty-state{ border-style:dashed; border-color:var(--p417-gray-200); box-shadow:none; } .p417-empty-state::before{ background:var(--p417-gray-400); } .p417-empty-state:hover{ transform:none; box-shadow:none; } /* ---------- Reveal-on-scroll (progressive enhancement) ---------- */ .p417-reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; } .p417-reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .p417-reveal{ opacity:1; transform:none; } } /* ---------- Footer ---------- */ .p417-footer{ background:var(--p417-black); color:#D8D8D8; padding:var(--sp-5) var(--sp-3) var(--sp-3); } .p417-footer a{ color:#fff; text-decoration-color:rgba(255,255,255,0.4); transition:color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } .p417-footer a:hover, .p417-footer a:focus-visible{ color:var(--p417-orange); text-decoration-color:var(--p417-orange); } .p417-footer h4{ color:#fff; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--sp-1); } .p417-footer-grid{ display:grid; gap:var(--sp-3); grid-template-columns:2fr 1fr 1fr 1fr; max-width:1180px; margin:0 auto; } .p417-footer-bottom{ max-width:1180px; margin:var(--sp-3) auto 0; padding-top:var(--sp-2); border-top:1px solid #333; font-size:0.85rem; color:#999; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-1); } @media (max-width:820px){ .p417-footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .p417-footer-grid{ grid-template-columns:1fr; } } /* ---------- Utility ---------- */ .p417-mt-0{ margin-top:0; } .p417-note{ font-size:0.9rem; color:var(--p417-text-muted); font-style:italic; } /* ---------- Responsive polish ---------- */ @media (max-width:600px){ .p417-hero{ text-align:left; } .p417-hero-ctas{ justify-content:flex-start; } .p417-hero p{ margin-left:0; } .p417-center .p417-lede{ margin-left:0; margin-right:0; text-align:left; } } /* ---------- Suppress Neve's default footer builder ---------- Neve still renders its own