/* ============================================================ BEINC — Projects Grid Section Sits ABOVE projects-hero in z-index and rises over it as the user scrolls. Sticky white-cream bar at the top with "All Projects" label + rotating asterisk. Cards laid out in a 2-col grid (desktop/tablet) → 1-col (mobile). ============================================================ */ .projects-grid { --bar-h: clamp(72px, 8vh, 110px); --bar-blur-h: 10vh; --bar-pad-x: var(--pad-x); --bar-fill: var(--color-white); --bar-blur-fill: rgba(255, 251, 240, 0.10); --bar-blur-amount: 40px; position: relative; background: var(--color-black2); color: var(--color-white); z-index: 2; /* sits above .projects-hero (z:1) so it covers it on scroll within the parallax wrapper */ } /* Marquee + ASI + footer sit OUTSIDE the parallax wrapper, so the hero's sticky behaviour can no longer reach them. Their natural document flow resumes here — no z-index trickery needed below this point. */ /* iOS / Android status-bar tinting is handled by the in projects.html's . No DOM overlay — that would add height/border to the page itself, pushing the nav's perceived gap down. The meta tag tints the browser's system UI directly with zero impact on page layout. */ /* ============================================================ STICKY BAR — mirrors services-cards bar behaviour ============================================================ */ .projects-grid__bar { position: sticky; top: var(--bar-blur-h); z-index: var(--z-elevated); height: var(--bar-h); } .projects-grid__bar-blur { position: absolute; left: 0; right: 0; bottom: 100%; height: var(--bar-blur-h); background: var(--bar-blur-fill); backdrop-filter: blur(var(--bar-blur-amount)); -webkit-backdrop-filter: blur(var(--bar-blur-amount)); opacity: 0; pointer-events: none; } .projects-grid__bar.is-sticky .projects-grid__bar-blur { opacity: 1; pointer-events: auto; } .projects-grid__bar-inner { position: relative; height: 100%; padding: 0 var(--bar-pad-x); background: var(--bar-fill); color: var(--color-black2); display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .projects-grid__bar-title { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); font-size: clamp(20px, 2vw, 28px); line-height: 1; color: var(--color-black2); } .projects-grid__bar-asterisk { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: var(--color-black2); flex-shrink: 0; will-change: transform; } .projects-grid__bar-asterisk svg { display: block; width: 100%; height: 100%; } .projects-grid__bar-asterisk svg path { fill: currentColor; } /* ============================================================ GRID ============================================================ */ .projects-grid__list { display: grid; grid-template-columns: 1fr 1fr; /* All four edges of the grid + the gaps between cells use the same value as the global --pad-x token so the grid feels visually unified with the rest of the page's left/right gutters. Why --grid-gap instead of var(--pad-x): --pad-x is `2%`, which works fine for left/right padding (resolves against parent width) and for column-gap (resolves against grid's inline-size). But for row-gap, browsers resolve `%` against the block-axis — and on an auto-height grid the block-size is indefinite, so `row-gap: 2%` collapses to nearly 0. Using vw makes row, column, and padding resolve to identical pixel values. */ --grid-gap: 2vw; gap: var(--grid-gap); padding: var(--grid-gap); } /* Tablet + phone: --pad-x widens to 4%, mirror that for the grid. */ @media (max-width: 1023px) { .projects-grid__list { --grid-gap: 4vw; } } @media (max-width: 767px) { .projects-grid__list { grid-template-columns: 1fr; /* Mobile only: more breathing room between stacked cards and generous top/bottom padding on the overall grid. Side gutters stay at --grid-gap so the cards keep aligning with the page-wide left/right padding. */ row-gap: 8vw; padding-top: 8vw; padding-bottom: 8vw; } } /* ============================================================ PROJECT CARD MEDIA — image + video share the same class so the existing project-card.css rules apply identically. ============================================================ */ .projects-grid .project-card__media { background: var(--color-black); }