/* ============================================================ Team page — exact recreation glue CSS Supplies the bits the lifted files (team-panes.css, heading-bars.css, buttons.css) reference but that live in the source site's global styles.css: flip/scale keyframes, the drone-video hero, layout wrappers (replacing the source's Bootstrap rows), hero typography, the "150 people" bar text, and the Local Roots maps band. Brand vars (--jg-*) come from tokens.css. Scoped to .team-recreation so the showcase nav/footer chrome is untouched. ============================================================ */ :root { --photos-grid-gap: 8px; --team-side: clamp(28px, 7vw, 150px); } /* ---------- flip + scale-in animations (from source styles.css) ---------- */ @keyframes spin-out-kf { 100% { transform: rotateY(90deg); } } @keyframes spin-in-kf { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } } @keyframes scale-in-kf { from { transform: scale(0); } to { transform: scale(1); } } .jg-rotate-out { --double: calc(var(--jg-anim-duration) * 2); animation: spin-out-kf var(--double) ease-in forwards; } .jg-rotate-in { --double: calc(var(--jg-anim-duration) * 2); animation: spin-in-kf var(--double) ease-out forwards; } .jg-scale-in { transform-origin: center; animation: scale-in-kf var(--jg-anim-duration) ease-out forwards; } /* panes start invisible until the IntersectionObserver scales them in */ .team-recreation .jg-pane-grid-execs > div, .team-recreation .jg-pane-grid > div { background: transparent; } .team-recreation .jg-pane-box { cursor: pointer; background-color: var(--jg-dark-inlay); } /* ---------- drone-video hero ---------- */ /* #teamHero IS the .team-recreation element (not a descendant), so target it directly. overflow:hidden clips the drone video to the hero so it can't bleed behind the execs. */ #teamHero { position: relative; overflow: hidden; display: block; } .jg-drone-video-container { height: 100%; width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } /* object-fit cover, not min-width/min-height + translate: the old technique made the video a real 2000px-wide element (visually clipped, but wide enough to trip mobile shrink-to-fit, which zoomed the page out and pushed the nav toggle off-screen). cover keeps it container-sized, same crop. */ .jg-drone-video-container video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } #headerFade { position: absolute; top: 0; right: 0; width: 100%; height: 0; background: linear-gradient(to top, var(--jg-dark), rgba(var(--jg-dark-rgb), 0.7), rgba(var(--jg-dark-rgb), 0.7)); } /* Hero typography mirrors the live site exactly. The live loads fonts.css AFTER styles.css, so fonts.css wins the font sizes; styles.css supplies h1's line-height:1.7. h1 = calc(28px+3vw); h4 = calc(16px+1vw); p = calc(12px+0.4vw). */ /* full-viewport like every other hero; svh so the bottom-anchored content clears mobile toolbars (vh line = fallback for browsers without svh) */ #heroContent { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: 5vh var(--team-side); } #heroContent h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: calc(28px + 3vw); line-height: 1.7; color: var(--jg-light); margin: 0; } #heroContent h4 { font-family: var(--font-body); font-weight: 700; font-size: calc(16px + 1vw); line-height: 1.2; color: var(--jg-primary); margin: 4px 0 0; } #heroContent p { font-family: var(--font-body); font-weight: 300; font-size: max(17.5px, calc(12px + 0.4vw)); line-height: 1.4; margin: 12px 0 0; } #heroContent h6 { margin: 24px 0 0; } /* ---------- layout wrappers (replace source Bootstrap rows) ---------- */ .team-recreation { background: var(--jg-dark); } /* breathing room between the hero and the gallery */ main#mainContent.team-recreation { padding-top: clamp(48px, 7vh, 96px); } /* overflow-x: clip — the decorative textures translate ±35% past the row's edges; unclipped, that geometry made mobile Chrome shrink-to-fit the whole page (layout viewport grew to 493px at a 375px device, pushing the nav toggle off-screen). Clip here, at their positioned ancestor. */ .team-recreation .tr { padding-inline: var(--team-side); position: relative; overflow-x: clip; } .team-recreation .tr + .tr { margin-top: var(--photos-grid-gap); } @media (min-width: 475px) { .team-recreation .tr + .tr { margin-top: calc(var(--photos-grid-gap) * 2); } } .jg-spacer { display: block; width: 100%; height: var(--spacer-sm); } @media (min-width: 992px) { .jg-spacer { height: var(--spacer-lg); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* background textures behind the main grid */ .jg-texture-right, .jg-texture-left { position: absolute; height: auto; z-index: 0; opacity: 0.5; pointer-events: none; } .jg-texture-right { top: 0; right: 0; } .jg-texture-left { top: 50%; left: 0; } /* dense — the 2x2/3x3 culture panes sit at fixed slots, so whenever the 1x1 count in front of a span doesn't fill the row, default flow leaves a hole. dense backfills holes with later tiles; the grid is shuffled every load anyway, so the reorder is invisible and the outline tiles still land last. */ .team-recreation .jg-pane-grid { position: relative; z-index: 1; grid-auto-flow: dense; } /* exec caption keeps its cyan underline; tighten title color */ .team-recreation p.jg-pane-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; } .team-recreation p.jg-pane-desc { font-family: var(--mono, "JetBrains Mono", monospace); text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- "We are 150 people…" bar text + teal stripes ---------- */ .team-recreation .jg-bar-inner-text { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--jg-light); font-size: clamp(22px, 3.4vw, 52px); position: relative; z-index: 1; } /* the lifted bars use z-index:-1, which hides them behind our dark container bg; lift them above the bg but keep them behind the heading text */ .team-recreation .jg-bar-inner-bottom-left, .team-recreation .jg-bar-inner-top-right { z-index: 0; } /* this heading band is full-bleed on the live page (mx-0 px-0) */ .team-recreation .tr-full { padding-inline: 0; position: relative; } /* ---------- Local Roots, Global Power ---------- */ .jg-roots { position: relative; padding-inline: var(--team-side); } .jg-roots .roots-inner { position: relative; max-width: 1100px; margin: 0 auto; } .jg-roots img { width: 100%; height: auto; display: block; } .jg-roots .roots-text { position: absolute; top: 50%; right: 0; transform: translateY(-50%); max-width: 46%; } .jg-roots .roots-text h4 { font-family: var(--font-body); font-weight: 700; font-size: clamp(20px, 2.2vw, 34px); color: var(--jg-primary); margin: 0 0 14px; } .jg-roots .roots-text p { font-family: var(--font-body); font-weight: 300; line-height: 1.6; } @media (max-width: 760px) { .jg-roots .roots-text { position: static; transform: none; max-width: none; padding: 18px 4px 0; } } /* hero CTA button spacing inside h6 */ .team-recreation #heroContent .jg-btn-contact { min-width: 200px; text-align: center; }