/* =========================================================================== STEMsaic Research Impacts - shared site CSS. Base styling carried by inline styles on each page (faithful to the design handoff); this file adds the reset, hover/focus states, responsive nav, and small-screen type overrides that the prototype handled in React. =========================================================================== */ * { box-sizing: border-box; } body { margin: 0; } img { max-width: 100%; display: block; } /* --- Buttons / link hovers (was inline JS in the prototype) --- */ /* Render every button as a self-contained box so long labels + the arrow stay inside the fill and don't wrap raggedly on narrow screens. */ .btn-gold, .btn-outline, .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; } /* Button style (Travis ruling 2026-09-22, ported from the BTD button change): pale blue, not gold. Gold stays for the cross-brand data-dot signature, captions, and other non-button accents (DESIGN-stemsaic.md). !important on both base and hover because most button elements still carry an inline #d4a843 background/border that the class must win over; the inline gold is being stripped from elements as they're touched, but the !important is the backstop for the ones this pass has not reached yet. */ .btn-gold { transition: background-color .15s, color .15s, border-color .15s; background: #dbe8f7 !important; border-color: #2d5a9e !important; color: #1a2744 !important; } .btn-gold:hover { background: #2d5a9e !important; border-color: #2d5a9e !important; color: #ffffff !important; } .btn-outline { transition: background-color .15s, color .15s; } .btn-outline:hover { background: #1a2744 !important; color: #ffffff !important; } .btn-dark { transition: background-color .15s, border-color .15s; } .btn-dark:hover { background: #0f1830 !important; border-color: #0f1830 !important; } .link-arrow { transition: color .15s; } .link-arrow:hover { color: #4a90d9 !important; } .card-lift { transition: transform .18s ease, box-shadow .18s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,39,68,0.16); } /* Team Guide cards ("monopoly card" treatment: mosaic header band, strong border, distinct-card shadow, gold hover lift). Hover/transform live here because inline styles can't express :hover or prefers-reduced-motion. */ .tg-card { border: 2px solid #dfe5ee; border-radius: 8px; box-shadow: 0 2px 10px rgba(26,39,68,0.08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .tg-card:hover { border-color: #d4a843; box-shadow: 0 16px 34px rgba(26,39,68,0.18); transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .tg-card { transition: box-shadow .15s ease, border-color .15s ease; } .tg-card:hover { transform: none; } } /* Facet card accent (Travis ruling 2026-09-25, option C; bead claude-code-qvaux). Replaces the thick one-side accent bar + colored glow pattern that used to mark callout boxes and cards on this site: hairline border all round, one small gold shard at the upper-left edge, neutral elevation shadow instead of a glow. Reference: skills-global/design/facet-accent/facet-accent.css. Line here is solid #82aedd rather than the reference's rgba(130,174,221,0.5): every card this pass touched sits on a light #fff/#f5f7fa surface, where the translucent line read as faint next to the page's existing pale #e6eaf1 borders. Flagged for Travis in the rollout report (bead claude-code-qvaux). */ .fa-card { border: 1px solid #82aedd; border-radius: 10px; } .fa-pos { position: relative; } .fa-shard::after { content: ""; position: absolute; top: 14px; left: -6px; width: 11px; height: 11px; background: #d4a843; clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 86%, 0 30%); pointer-events: none; } .fa-flat { box-shadow: 0 1px 6px rgba(26, 39, 68, 0.12); } a:focus-visible, button:focus-visible { outline: 3px solid #4a90d9; outline-offset: 2px; } /* --- Responsive navigation (CSS replaces the React isMobile/menuOpen state) --- Round-2 gauntlet fix (claude-code-n8xdg, 2026-09-23): the desktop nav overlapped the wordmark at 820-1100px ("Use the Guides" wrapping to two or three lines, the wordmark touching "Newsletter"). Measured overflow, not eyeballed: the fix is gap plus never letting the wordmark or a link wrap, and it closes the gap at every width from 820px up, so the breakpoint itself does not need to move here (unlike the BTD twin, whose five links plus wordmark plus cart icon do not fit until 1150px). */ .nav-desktop { display: flex; gap: 8px !important; margin-left: 8px; } .nav-mobile-btn { display: none; } .nav-mobile-panel { display: none; } .nav-mobile-panel.open { display: block; } @media (max-width: 819px) { .nav-desktop { display: none; } .nav-mobile-btn { display: inline-flex; } } /* Scoped to the desktop breakpoint only (see BTD's twin rule for why: an unscoped nowrap here caused a real 390px overflow regression on that brand's longer wordmark the first time this landed). */ @media (min-width: 820px) { nav > div > a:first-child { white-space: nowrap; flex-shrink: 0; } .nav-desktop > a { white-space: nowrap; } } /* Nav subscribe CTA: "Online Newsletter: Subscribe Free" must never wrap in the desktop pill (2026-09-22 Travis fix round, twin of the BTD rule). Two text spans let the label shorten to "Newsletter: Subscribe Free" in the 820-1100px band, where the nav links leave the least room. */ .nav-cta-subscribe { white-space: nowrap; } .nav-cta-short { display: none; } @media (min-width: 820px) and (max-width: 1100px) { .nav-cta-full { display: none; } .nav-cta-short { display: inline; } } /* --- Project-tile badge (shared, legible across every data-ramp palette) --- A frosted dark-glass chip over the colored mosaic so white text always reads. The ramp color shows through the glass to differentiate tiles; the colon is a light-gold accent matching the Design:Build mark. Used on /work tiles and the home work teasers so the treatment is identical everywhere. */ .wbadge { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-block; border-radius: 9px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.92); box-shadow: 0 6px 18px rgba(20,32,58,0.45); } .wbadge > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .wbadge::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15,24,46,0.46); } .wbadge > span { position: relative; z-index: 2; display: block; padding: 8px 15px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.62); white-space: nowrap; } .wbadge > span > i { font-style: normal; color: #f1cd76; } /* Product logo chip: white pill carrying the real product mark + name, for tiles whose project has its own logo (microPlastics DJ, Portal, SciBuilder). White so the colorful/navy marks read on the dark mosaic tile. Sits in the same top-left slot. */ .wlogo { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; background: #ffffff; border-radius: 9px; padding: 7px 14px 7px 10px; box-shadow: 0 6px 18px rgba(20,32,58,0.45); } .wlogo img { display: block; height: 26px; width: auto; } .wlogo span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.01em; color: #1a2744; white-space: nowrap; } /* Product logo mark badge moved to assets/facet.css as the canonical .facet-mark component (cross-brand, promoted July 2026). See facet.css for the rule. */ /* --- Small-screen type / spacing overrides (prototype used fixed px) --- */ @media (max-width: 640px) { .h-display { font-size: 40px !important; } .h-hero { font-size: 38px !important; } .h-section { font-size: 28px !important; } .h-statement { font-size: 25px !important; } .proof-num { font-size: 34px !important; } .pad-block { padding-left: 20px !important; padding-right: 20px !important; } .stack-sm { flex-direction: column !important; align-items: flex-start !important; } } /* Footer columns: brand + Explore + Connect side by side on desktop, stacked on phones */ @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; } } /* Skip navigation. Every page repeats an 8-stop nav, so a keyboard user was tabbing through the whole thing on every load. Visually hidden until focused. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; color: #1a2744; background: #d4a843; padding: 12px 20px; border-radius: 0 0 2px 0; text-decoration: none; } .skip-link:focus { left: 0; outline: 3px solid #1a2744; outline-offset: -3px; } [id="main"]:focus { outline: none; } /* gauntlet r4 (prose-style rule 10): centered text never ends on a one- or two-word last line. Headings, centered blocks (inline text-align:center) and button labels balance their lines. */ main h1, main h2, main h3, [style*="text-align:center"], .btn-gold, .btn-outline, .btn-dark, .btn-subscribe { text-wrap: balance; } /* type scale + grid, site cohesion 2026-10-08 (bead claude-code-0gc1w) */ :root { --fs-eyebrow: 12px; --lh-eyebrow: 1.3; --fs-display: 60px; --lh-display: 1.06; --fs-h1: 44px; --lh-h1: 1.1; --fs-h2: 28px; --lh-h2: 1.2; --fs-h3: 20px; --lh-h3: 1.3; --fs-lead: 20px; --lh-lead: 1.55; --fs-body: 17px; --lh-body: 1.7; --fs-small: 14px; --lh-small: 1.55; --fs-legal: 13px; --lh-legal: 1.5; --section-y: 88px; } @media (max-width: 760px) { :root { --fs-display: 38px; --lh-display: 1.1; --fs-h1: 32px; --lh-h1: 1.15; --fs-h2: 24px; --lh-h2: 1.25; --fs-h3: 19px; --fs-lead: 18px; --fs-body: 16px; --lh-body: 1.65; --section-y: 56px; } } .t-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: .12em; text-transform: uppercase; } .t-display { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); } .t-h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); } .t-h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); } .t-h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); } .t-lead { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); } .t-body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); } .t-small { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); } .t-legal { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--fs-legal); line-height: var(--lh-legal); } .t-display, .t-h1, .t-h2, .t-h3, .t-lead { text-wrap: balance; } /* content grid: a prose block spans the grid, sits in .row-2 beside media or a heading, or sits in one centred .measure column. A flush-left narrow block with nothing beside it is a defect. */ .wrap { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .measure { max-width: 68ch; } .measure--center { margin-left: auto; margin-right: auto; } .row-2 { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; } .row-2--split { grid-template-columns: 5fr 7fr; align-items: start; } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); } @media (max-width: 760px) { .wrap { padding-left: 20px; padding-right: 20px; } .measure { max-width: 100%; } .row-2, .row-2--split { grid-template-columns: 1fr; gap: 28px; } } /* --- Mosaic bullet (Travis ruling 2026-10-08; bead claude-code-0gc1w) --- Replaces the 7px gold circle beside list text. A small clipped shard in the STEMsaic navy-to-sky ramp with the single gold data dot inside the tile. Use as in a flex row, or