/*! ============================================================================
* Idea Factory — SHARED SITE STYLES (v1.2.0)
* DO NOT EDIT IN WEBFLOW. Source of truth = GitHub repo idea-factory-umd/idea-factory-site.
* Loaded site-wide via jsDelivr in Project Settings > Custom Code (Head).
* Layers (cascade order): v1 base (logo, stages, audience, proof, manifesto, news,
* events, hero base) -> content-grow -> nav/dropdown/hero-word/footer -> CSE modal.
* ========================================================================== */
/* ===== base layer (logo hover, stages, find-your-way-in, proof, manifesto, news, events) ===== */
/* ============================================================
Idea Factory — custom motion & styling for Webflow
------------------------------------------------------------
Host this file (e.g. GitHub + jsDelivr) and load it in Webflow
site/page custom code (head):
Every rule keys off a CLASS you assign in the Webflow Designer.
Swapping an image/photo through Webflow's "Replace image" keeps
the class, so the motion carries over automatically.
============================================================ */
/* ---- shared easing tokens ---- */
:root {
--if-ease-glide: cubic-bezier(0.16, 1, 0.3, 1); /* smooth decelerate (news/date zoom) */
--if-ease-spring: cubic-bezier(0.34, 1.7, 0.5, 1); /* overshoot spring (glyphs, audience) */
--if-ease-window: cubic-bezier(0.34, 1.56, 0.64, 1); /* window twinkle overshoot */
--if-dur-zoom: 720ms;
}
/* ============================================================
0. TYPOGRAPHY — one supplemental safety line only (2026-07-01)
Design system = two faces: Interstate (sans) + Georgia (serif); Arial
must never render. The tagline (.if-tag-p -> Georgia) and the hero lead
(.if-hero-lead -> Interstate) are now set NATIVELY in the Webflow
Designer — they are intentionally NOT in this file anymore.
The single line below is the only exception: Webflow's built-in
body{Arial} default has no MCP style handle ("body" not found), so this
guarantees nothing falls back to Arial suite-wide. TO GO FULLY NATIVE:
set the Body (All Pages) tag font to Interstate in the Designer, then
delete this line.
============================================================ */
/* ---- FONT: Interstate + weight-matched Overpass fallback (Polish/CE support) — 2026-07-02 ----
Adobe's Interstate web cut lacks the Polish nasal/accented glyphs (Ą Ę Ż Ć Ń Ś Ź). This adds a
self-hosted Overpass (open-source, same Highway-Gothic DNA) as a PER-CHARACTER fallback: English/
Latin still renders in Interstate (first in the stack); only the glyphs Interstate lacks fall
through to Overpass — instead of a mismatched Arial. Fully invisible: no UI control, no Designer
change, nothing to publish per page — it just lives here in the shared file, suite-wide.
WEIGHT-MATCHED so a swapped-in Polish letter matches its Interstate neighbours (measured ink-mass):
OverpassFB 400 -> Overpass wght 330 (= Interstate 400, ratio 1.00)
OverpassFB 500 -> Overpass wght 520 (= Interstate 500 Medium, ratio 1.00)
OverpassFB 700 -> Overpass wght 780 (= Interstate 700, ratio 1.00)
OverpassFB 800 -> Overpass wght 900, then outline-emboldened (dilated ~20u/2000em) to reach
Interstate 800 (ratio 1.00). Overpass's native max (900) only got 0.89; the
overpass-pl-800.woff2 file has genuinely thickened outlines to close the gap.
The Adobe kit now ships 400/500/700/800 (500 = the Medium added for the Georgia-adjacent link text).
A 300 request has no Interstate face -> renders Interstate 400; OverpassFB likewise has no 300, so
its 300 falls to the 400 face too — matched behaviour at every weight.
size-adjust:102.7% matches Overpass's x-height to Interstate. Dial a weight: re-instance the file. */
@font-face{font-family:'OverpassFB';src:url('overpass-pl-400.woff2') format('woff2');font-weight:400;font-display:swap;size-adjust:102.7%;}
@font-face{font-family:'OverpassFB';src:url('overpass-pl-500.woff2') format('woff2');font-weight:500;font-display:swap;size-adjust:102.7%;}
@font-face{font-family:'OverpassFB';src:url('overpass-pl-700.woff2') format('woff2');font-weight:700;font-display:swap;size-adjust:102.7%;}
@font-face{font-family:'OverpassFB';src:url('overpass-pl-800.woff2') format('woff2');font-weight:800;font-display:swap;size-adjust:102.7%;}
:root{--if-sans:Interstate,'OverpassFB',"Helvetica Neue",Arial,sans-serif;--if-serif:Georgia,"Times New Roman",serif;}
/* ⭐ FUTURE-PROOF (2026-07-02): every custom class is `if-`-prefixed (project convention, §3), so we
apply the sans + Overpass-fallback stack to ALL if- classes — present AND any newly created one —
plus body. A brand-new class therefore CANNOT miss the Polish fallback (it no longer depends on a
hand-maintained list). The 6 Georgia (serif) classes are the only exceptions; they are
restored on the next line (declared AFTER, same specificity, so serif wins). Non-if selectors are
untouched: webflow-icons (`.w-icon-` classes), the Google-CSE `.gs-` and `.gsc-` result text, forms.
To ADD a serif class in future, append it to the exception line; sans needs no maintenance. */
body,[class^="if-"],[class*=" if-"]{font-family:var(--if-sans)!important;}
.if-aud-intro,.if-event-row-meta,.if-input,.if-mani-p,.if-prog-desc,.if-tag-p{font-family:var(--if-serif)!important;}
/* BOLD inside serif (Georgia) body copy -> weight-matched Interstate that melds with Georgia
(weight 700 + letter-spacing -0.4px, the if-inline-link tuning from §20). Color INHERITS (stays
black) because this is emphasis, not a link. Fires automatically on any / the user
bolds in the Designer inside these serif classes — no per-element class needed. A direct rule on
the child beats the parent's inherited Georgia; the broad if- sans rule already agrees on family.
To cover a NEW serif class, append its `b,strong` pair here. (Non-if serif: premise-lead,
syn-loop-txt, move-desc, cta-fine are the native-Georgia body classes.) */
.if-aud-intro b,.if-aud-intro strong,.if-event-row-meta b,.if-event-row-meta strong,
.if-mani-p b,.if-mani-p strong,.if-prog-desc b,.if-prog-desc strong,.if-tag-p b,.if-tag-p strong,
.premise-lead b,.premise-lead strong,.syn-loop-txt b,.syn-loop-txt strong,
.move-desc b,.move-desc strong,.cta-fine b,.cta-fine strong{
font-family:var(--if-sans);font-weight:700;letter-spacing:-0.4px;
}
/* Nav dropdown caret is a Webflow icon glyph (.w-icon-dropdown-toggle) that also carries an if- class
(.if-toggle-caret) — the broad if- rule above would force Interstate onto it and render tofu, so keep
the icon font. Any future icon element that also has an if- class must be added here too. */
.if-toggle-caret{font-family:"webflow-icons"!important;}
/* ============================================================
1. HERO reading highlight (JS drives .if-hero-word opacity)
============================================================ */
.if-hero-word { transition: opacity 0.28s ease-out; }
.if-hero-h1.is-settling .if-hero-word { transition-duration: 0.95s; } /* gentle final fade-up */
.if-hero-h1.font-pending { visibility: hidden; } /* font-load gate */
/* ============================================================
2. MANIFESTO sentence lift (JS toggles classes)
============================================================
The real .if-manifesto-line rules live further down, in the big "nav / dropdowns /
hero-word / footer hovers" block - found 2026-09-09 that THIS section used to
redeclare the exact same selectors with DIFFERENT values (0.55s/var(--if-ease-glide)
here vs the live 0.37s/cubic-bezier further down), and since equal-specificity CSS
ties resolve by source order, this earlier copy NEVER actually applied - it was
provably dead weight the whole time, confirmed via a real browser measurement, not
assumed. Removed rather than left to confuse a future reader (or a future edit that
"fixes" this copy again without knowing it's inert). The live copy's own will-change
bug is fixed at its actual location - see that block for the note. */
/* Manifesto: "where ideas get built." starts black and turns red only when its line is
highlighted by the grow, then HOLDS red (if-lit-red added by the JS on lift, never removed).
color:inherit keeps it black at rest even before the native red is republished. */
.if-mani-red{color:inherit;transition:color .45s ease;}
.if-mani-red.if-lit-red{color:#e21833;}
/* Read-line: footer-CTA-style word-by-word read on any .if-readline heading. Words dim then
brighten one-by-one; the wrapped accent (.if-mani-red child) reddens as it is reached and holds.
Only opacity here — the accent color transition lives on .if-mani-red above. */
.if-rl-word{transition:opacity 0.28s cubic-bezier(0.22,1,0.36,1);}
.rl-settling .if-rl-word{transition-duration:2.4s;transition-timing-function:ease-out;}
/* Walk-the-Factory wayfinding bar (About): parent-hover-child reveal — box turns white
(native :hover), the greyscale glyph goes full-colour and the label darkens. Can't be a
native Designer style (parent hover targeting a child), so it lives here. */
.if-walk-item:hover .if-walk-glyph,.if-walk-item.is-current .if-walk-glyph{filter:none;}
.if-walk-item:hover .if-walk-num,.if-walk-item.is-current .if-walk-num{color:#e21833;}
.if-walk-item:hover .if-walk-name,.if-walk-item.is-current .if-walk-name{color:#111111;}
/* "Current" state (walk-spy JS adds .is-current to the button whose linked stage is scrolled into
view): full colour (via the combinators above) PLUS a red left bar that stays on regardless of
hover. A hovered-but-not-current item is full colour too (native :hover, background only) but
has NO bar — the bar is what marks the current item; hovering it just keeps the bar.
NOTE: .if-walk-item.is-current's OWN background/box-shadow/border-left is a NATIVE Designer
combo class (create_style, parent if-walk-item) — same element, so Webflow CAN represent it
directly (matches the if-backtotop.is-visible precedent). Only the cross-element cascade above
(parent class recolouring the child glyph/num/name) has to live here — Webflow has no way to
make one element's class restyle a *different* element. */
/* Walk bar is one slim row (matches the red nav height); on narrow widths it scrolls
horizontally instead of wrapping — hide the scrollbar so the pinned bar stays clean. */
.if-walk-row{scrollbar-width:none;-ms-overflow-style:none;}
.if-walk-row::-webkit-scrollbar{display:none;}
/* Walk bar STACKS once the one-row buttons can't shrink further (~880px, measured with real
Interstate): the label goes inline ("WALK THE FACTORY | Jump to a stage ›") on its own full-width
row, then the four buttons become two full-width rows of two (2x2). Custom breakpoint (Webflow only
offers 991/767/479) + the "|" pseudo-element → this must live in the shared file, not the Designer.
Full-bleed BOTH edges here (base already bleeds right; add left) so the button rows span edge-to-edge. */
@media (max-width:880px){
.if-walk-row{flex-wrap:wrap;margin-left:calc(50% - 50vw);}
.if-walk-label{flex-basis:100%;flex-direction:row;align-items:baseline;justify-content:flex-start;padding:8px 24px;}
.if-walk-label-sub{margin-top:0;}
.if-walk-label-sub::before{content:"|";margin:0 .55em;color:#c9c9c9;font-weight:400;}
.if-walk-item{flex-basis:50%;border-top:1px solid #e6e6e6;padding-left:12px;padding-right:12px;justify-content:center;}
.if-walk-glyph{width:28px;height:28px;}
.if-walk-name{font-size:12px;}
}
/* Walk-the-Factory bar DUPLICATE (MIPS-Apply, program-page-mips-apply-walkcopy-*): every class
renamed so this copy can be restyled independently of the About-page original above. Same
parent-hover-child reveal + custom-breakpoint stacking, ported verbatim under the new names. */
.program-page-mips-apply-walkcopy-item:hover .program-page-mips-apply-walkcopy-glyph,.program-page-mips-apply-walkcopy-item.program-page-mips-apply-walkcopy-current .program-page-mips-apply-walkcopy-glyph{filter:none;}
.program-page-mips-apply-walkcopy-item:hover .program-page-mips-apply-walkcopy-num,.program-page-mips-apply-walkcopy-item.program-page-mips-apply-walkcopy-current .program-page-mips-apply-walkcopy-num{color:#e21833;}
.program-page-mips-apply-walkcopy-item:hover .program-page-mips-apply-walkcopy-name,.program-page-mips-apply-walkcopy-item.program-page-mips-apply-walkcopy-current .program-page-mips-apply-walkcopy-name{color:#111111;}
/* The small dot marker before each walkcopy item is grey at rest AND on hover — it lights up
red ONLY for the current item, making it its own distinct "you are here" cue (separate from
the hover-brightens-everything behavior above). Scoped to inside a walkcopy-item so the base
.program-page-mips-apply-tl-dot-page-nav class's own color stays untouched anywhere else it's used. */
.program-page-mips-apply-walkcopy-item .program-page-mips-apply-tl-dot-page-nav{background-color:#9a9a9a;}
.program-page-mips-apply-walkcopy-item.program-page-mips-apply-walkcopy-current .program-page-mips-apply-tl-dot-page-nav{background-color:#e21833;}
.program-page-mips-apply-walkcopy-row{scrollbar-width:none;-ms-overflow-style:none;}
.program-page-mips-apply-walkcopy-row::-webkit-scrollbar{display:none;}
/* Responsive stacking (3-col Tablet, 2-col Phone-Horizontal) is now handled by NATIVE Designer
medium/small breakpoint overrides on program-page-mips-apply-walkcopy-item, per HARD RULE #2 —
the old custom @media(880px) block that used to live here (mirroring the About-page original
above) has been removed; it would otherwise conflict with the native breakpoints in the
767-880px range. */
/* Hides the gold "Apply" CTA (.if-give-btn-solid) from the MIPS mobile/hamburger dropdown ONLY —
desktop and every other spinoff's identical button are untouched (the combo class below is
MIPS-only). A plain native display:none on the combo can't win here: the in-site st0 layout
embed carries `.if-navmenu .if-give-btn-solid{display:block!important}` (same (0,2,0)
specificity, but !important — which beats a non-important rule regardless of specificity, and
Webflow's Designer style panel has no way to mark a property !important). Fix = the same
out-specify technique already used against this embed elsewhere in this file (see the nav
current-marker rules, §13 in CLAUDE.md): one class higher specificity (0,3,0) + !important of
our own beats the embed's (0,2,0) + !important outright, regardless of source order. */
@media screen and (max-width:991px){
.if-navmenu .if-give-btn-solid.program-page-mips-navbtn-hidemobile{display:none!important;}
}
/* ============================================================
3. STAGE photo + headline (JS sets transform/opacity inline)
============================================================ */
.if-stage-photo { transform-origin: 38% 36%; backface-visibility: hidden; }
.if-stage-text { }
/* .if-stage-photo/.if-stage-text: NOT the "will-change managed by JS" fix this project already
shipped for the CURRENT stage-parallax generation (.if-stage-photo-pos, in the later consolidated
block below) - these are the LEGACY selectors, kept only as an alias per this file's own "never
delete a class name, alias it" rule (a spinoff could still carry the old markup). Found here 2026-
09-09 with a genuine, still-live, permanent will-change on .if-stage-text (the legacy class exists
here in the CSS but .if-stage-photo currently matches nothing on any live page - .if-stage-text,
however, is NOT namespaced the same way and this exact selector is shared with the aliased current
effect's own target, so it was silently pinning a compositor layer on Home's stage headline this
whole time, even after the B3 fix was believed complete). Removed; the JS module already manages
will-change dynamically for whichever image/text elements it actually finds. */
/* ============================================================
4. NEWS photo hover-zoom (CSS only — image-agnostic)
In Webflow use normal Image elements: put overflow:hidden on the
image's WRAPPER and class the wrapper `.if-news-photo`.
============================================================ */
.if-news-photo { overflow: hidden; }
.if-news-photo img {
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform var(--if-dur-zoom) var(--if-ease-glide);
}
.if-news-card:hover .if-news-photo img { transform: scale(1.11); will-change: transform; }
/* ============================================================
5. EVENT date hover-zoom (CSS only)
============================================================ */
.if-event-date {
transition: transform var(--if-dur-zoom) var(--if-ease-glide); transform-origin: center center;
}
.if-event-feat:hover .if-event-date { transform: scale(1.11); } /* featured: big day+month */
.if-event-datetext {
display: inline-flex; flex-direction: column; align-items: center;
transition: transform var(--if-dur-zoom) var(--if-ease-glide); transform-origin: center center;
}
.if-event-row:hover .if-event-datetext { transform: scale(1.12); } /* agenda: text only, box still */
/* ============================================================
6. GLYPH spring-up hover
The four colored stage boxes stay fixed; only the glyph inside
each springs up and scales with an overshoot curve.
Assign .if-stage-cell to the wrapper and .if-stage-glyph
to the glyph or