/* ============================================================ Sathyamangalam Atlas — institutional design system Site-wide as of 2026-08-14 (second pass). Originally built home-page-only as home-institutional.css; promoted to cover all 11 pages, renamed institutional.css. Tokens extracted from a real public forestry corporation's site (colors, type, spacing measured via computed styles) but the layout, copy, and logo mark below are original — not a literal copy of their brand identity. Source Sans Pro is free (Google Fonts); no proprietary assets used. Loaded on every page after shared.css, under body.inst — shared.css still supplies the CSS reset, custom-property base and a few components (.reveal, palette overlay) that this file's selectors build on top of or override. ============================================================ */ /* Institutional pages are light-only by design, matching the reference site (it has no dark mode). shared.css components reused here (.bib/.bi, .tag, .tblwrap, filter pills, etc.) read shared.css's --bg2/--ink/--line/ --faint tokens, which flip to dark values under :root[data-theme="dark"] or prefers-color-scheme — that combination was breaking those components (dark card backgrounds with dark text) whenever a visitor had dark mode saved from browsing the non-institutional pages. Re-pinning the light values here, scoped to body.inst, makes every inherited component dark-mode-immune without having to rewrite each one. */ /* ---- design tokens ---- Radius, spacing and button-shape tokens added 2026-08-14, extracted the same way the six "pulled live from weyerhaeuser.com" comments elsewhere in this file were: getComputedStyle() against the live reference site, not eyeballed. Full scan of every element on weyerhaeuser.com found border-radius:4px on exactly one thing (a dropdown menu) and 0px on every button, card and content block on the page — there is no pill/rounded button anywhere in the reference. That's the source of truth for --r-btn below: it exists so every button-shaped selector reads the same variable instead of each one hand-writing its own radius, which is how .inst-tile-cta ended up shipped as border-radius:100px (a pill) while every other button on the site is square — same bug class as the body.inst h1/a specificity bugs fixed earlier, different mechanism (no shared token instead of no shared selector). --r-badge is verified separate: icon badges (.inst-mark, .inst-hero-ic) are not buttons and reference-site scanning didn't touch them; both now read --r-badge(3px) so the two badges share one value instead of each hand-writing its own (.inst-hero-ic was 4px, a 1px difference from .inst-mark's pre-existing 3px that had no documented reason to differ). --r-card likewise now covers .inst-quoteblock, the one pre-existing 4px "card" radius in the file. Avatars and stat-circles (border-radius:50%) and the plain 6px scrollbar-thumb radius are genuinely their own shapes, not part of this badge/card/button vocabulary — left as literals. */ body.inst{ --bg:#fffefb!important; --bg2:#ffffff!important; --bg3:#f7f9fc!important; --panel:rgba(23,45,32,.035)!important; --line:#dcdcdc!important; --ink:#1f252c!important; --dim:#4b5560!important; --faint:#7c8794!important; --acc:#016a3a!important; --acc-dk:#014d2a!important; --acc2:#849732!important; --i-green:#016a3a; --i-green-dk:#014d2a; --i-teal:#015779; --i-ink:#444444; --i-dim:#767676; --i-line:#dcdcdc; --i-footer:#323232; --i-bg:#ffffff; /* radius scale: --r-btn is the only radius real buttons/CTAs may use. */ --r-btn:0; --r-badge:3px; --r-card:4px; /* shared.css's own --r:14px (added 2026-08-15) — re-pinned here for the same reason --bg/--line/--ink above are: shared.css components (.card, .chartbox, .tblwrap, .pagenext, etc.) get reused directly on institutional pages (record.html alone mixes 23 shared.css components with 17 inst- ones), and without this override a 14px-rounded .card sits next to a 0px-square .inst-icontile on the same screen — the single sharpest "why do these look different" mismatch found in a full design-consistency audit. --r-card(4px) isn't used here on purpose: shared.css's heavily-rounded 14px reads as a completely different design language than this genre's near-square weyerhaeuser reference, so this snaps all the way to 0 (matching --r-btn) rather than to the smaller-but-still-visibly-rounded 4px card token. */ --r:0!important; /* button padding/type scale — originally matched to weyerhaeuser.com's own a.button (5px 13px / 11px), but explicitly overridden 15 Aug 2026 at the owner's request to make the larger .inst-btn-lg size (used on the home hero and heritage band) the sitewide default instead, superseding the earlier pixel-fidelity match. .inst-btn-lg itself is now redundant with the base size but left defined below rather than removed, in case a future request wants the two sizes to diverge again. */ --btn-pad:14px 26px; --btn-fs:15px; /* ---- spacing & type scale (added 2026-08-14) ---- NOT extracted from weyerhaeuser.com — checked first, and its content pages don't hold a consistent scale to extract (H2 was 27px/700 on one page, 24px/600 on another; vertical rhythm was 10px-dominant on one, 3px-dominant on the other — real inconsistency in their own templates, not measurement error here). The one number that WAS confirmed twice, identically, is the H1: 40px/600/44px line-height/uppercase — already what .inst-hero-body h1 uses below, so that's independent confirmation of an earlier extraction, not new data. Everything else here is instead named from Atlas's OWN already-in-use values: tallied every font-size/margin/padding/gap in this file, kept the numbers that already recur (this is real, load-bearing repetition, not coincidence — e.g. 26px is .inst-release-wrap's page gutter and shows up 7+ times across header/hero/newsstrip/split-copy). Half-pixel one-offs (12.5px, 14.5px, 16.5px — mostly clamp()/viewport-relative leftovers) were left alone rather than forced onto this scale; this names the pattern that was already there, it doesn't re-lay the page. */ --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px; --sp-5:30px; --sp-6:44px; --sp-7:64px; --gutter:26px; /* --sp-mid (added 2026-08-15): a second, smaller "heading/section to content below it" rhythm value sitting between --sp-5(30px) and --sp-6(44px). Found as 34px/36px/38px independently at 5 different selectors (.inst-eyebrow, .inst-stripe-h, .inst-timeline-band h2, .inst-timeline, .inst-quoteblock, .inst-statcircle-row) — close enough to read as one intended rhythm, not five unrelated numbers, but genuinely smaller than --sp-6 in most of those contexts (forcing them up to 44px would visibly loosen several home-page bands at once, a real change nobody asked for). Named and pinned at 36px, the middle of the observed cluster, so the drift stops rather than silently reappearing next time one of these gets touched. */ --sp-mid:36px; --fs-h1:40px; --lh-h1:44px; --fs-h2:27px; --lh-h2:1.3; --fs-h3:19px; --lh-h3:1.4; --fs-body:18px; --lh-body:1.6; --fs-label:13px; font-family:'Source Sans Pro',var(--sans); background:var(--i-bg); color:var(--i-ink); } body.inst .grid-bg, body.inst::before{display:none} body.inst .inst-theme{display:none} /* Page-wide defaults. Scoped with :where(body.inst) so they contribute ZERO specificity — they are meant to be a baseline that any component rule can override with a plain class selector. Written as `body.inst h1` these were (0,1,2) and silently beat every component rule below: the video-hero headings rendered #2a2a2a, and `body.inst a{color:inherit}` overrode both .inst-nav a and .inst-btn to #444, so nav links and buttons went dark. */ :where(body.inst) h1,:where(body.inst) h2,:where(body.inst) h3,:where(body.inst) h4{font-family:'Source Sans Pro',sans-serif;color:#2a2a2a} :where(body.inst) a{color:inherit} /* ---- header ---- Logo, nav, search and the theme/menu buttons all live in one row now (previously split into .inst-topbar + .inst-navrow, which pushed the nav onto its own line below the logo — merged into a single flex row once the Explore/Reserve dropdown grouping made the nav short enough to fit alongside the logo and search). */ .inst-header{position:relative;z-index:50;background:var(--i-green);border-bottom:1px solid var(--i-green-dk);overflow:visible} .inst-topbar{max-width:1800px;margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:20px;overflow:visible} .inst-brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:#fff;font-family:'Source Sans Pro',sans-serif;flex-shrink:0} .inst-brand em{font-style:normal;font-weight:400;color:rgba(255,255,255,.78)} .inst-mark{display:inline-grid;place-items:center;width:30px;height:30px;background:#fff;color:var(--i-green);font-size:15px;border-radius:var(--r-badge)} .inst-logo{height:44px;width:auto;display:block;filter:brightness(0) invert(1)} .inst-footer-top .inst-logo{filter:brightness(0) invert(1);height:46px} @media(max-width:640px){.inst-logo{height:34px}.inst-footer-brand .inst-logo{height:46px}} .inst-search{display:flex;align-items:center;border:1px solid rgba(255,255,255,.35);border-radius:0;overflow:hidden;align-self:center;flex-shrink:0;background:#fff;height:44px} .inst-search input{border:none;padding:0 14px;font-family:'Source Sans Pro',sans-serif;font-size:15px;width:210px;height:100%;cursor:pointer;background:#fff;color:var(--i-dim)} .inst-search button{border:none;background:var(--i-green-dk);color:#fff;width:44px;height:44px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1} /* Nav bar height (44px), link font-size (16px), font-weight (600), letter-spacing (normal — not tracked out) and uppercase transform are exact getComputedStyle() measurements pulled live from weyerhaeuser.com's own nav (re-verified this session at the owner's request for pixel-level fidelity, not approximated). */ /* height:auto needed to cancel shared.css's generic `nav{height:66px}` (written for the non-institutional pages) — the bare-element selector matches this