. If any ancestor forms a stacking context the modal's z-index is scoped to it, so the fixed header (z-index 100 at the root) can paint over the panel and swallow the close button. Hiding the header while the modal is open is independent of stacking order, and hands the form the whole viewport. */ body.modal-open .site-header { display: none; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(20, 27, 56, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-panel { position: relative; z-index: 1; width: min(720px, 100%); /* fill the space actually available rather than a flat 88svh, which overflowed a short phone viewport and pushed the panel top off-screen */ max-height: calc(100svh - 2 * clamp(12px, 3vh, 40px)); overflow-y: auto; background: var(--white); color: var(--navy); border-radius: clamp(18px, 2vw, 26px); padding: clamp(28px, 3.4vw, 52px); box-shadow: 0 30px 90px rgba(20, 27, 56, .34); } .modal-close { /* sticky, not absolute: the panel is the scroll container, so the close stays pinned at the top-right through a long form instead of scrolling away with the content */ position: sticky; top: 0; float: right; margin: -6px -6px 0 12px; z-index: 3; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(35, 47, 95, .07); color: var(--navy); font-size: 24px; line-height: 1; cursor: pointer; transition: background .18s; } .modal-close:hover { background: rgba(35, 47, 95, .14); } .modal-panel .form-grid { margin-top: 26px; } .modal-panel .form-field input[type="file"] { border: 1px dashed rgba(35, 47, 95, .3); background: rgba(35, 47, 95, .03); cursor: pointer; } .form-hint { font-size: 12px; opacity: .7; line-height: 1.5; } body.modal-open { overflow: hidden; } /* Six cards in a four-column grid leaves an orphaned pair — centre the second row so Khaled and Luca sit under Anuj and Keith rather than hugging the left edge. */ .team-grid--experts > .tcard:nth-child(5) { grid-column: 2; } @media (max-width: 1100px) { .team-grid--experts > .tcard:nth-child(5) { grid-column: auto; } } /* ── Legal pages (privacy) ── */ /* Inherits .article-body's centred 820px measure — pinning it left stranded a wide empty column on the right. */ .legal-body { max-width: 820px; } .legal-updated { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .55; } .legal-body h2 { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.25; margin: clamp(38px, 3.6vw, 54px) 0 14px; color: var(--navy); } .legal-body h2:first-of-type { margin-top: clamp(28px, 2.6vw, 38px); } .legal-body code { font-size: .92em; background: rgba(35, 47, 95, .06); padding: 2px 6px; border-radius: 5px; } .legal-body a { color: var(--teal); font-weight: 500; } /* Unconfirmed details are highlighted so they can't be published by accident. */ .legal-body mark { background: #FFF1B8; color: var(--navy); padding: 1px 5px; border-radius: 4px; font-weight: 500; } .legal-todo { border-left: 4px solid var(--orange); background: rgba(252, 176, 60, .1); padding: 18px 22px; border-radius: 0 12px 12px 0; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.65; margin-bottom: 8px; } /* Blog excerpts come from Wix and vary wildly in length; the design assumed short hand-written ones. Clamp card copy to 3 lines so the grid stays even. */ .res-card p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Wix auto-excerpts are long; the design's standfirst is ~2 lines. Clamp so the article hero keeps its proportions. */ .page-hero--post .page-hero-sub { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Author avatars: the design used initials; real member photos slot into the same circle. */ .res-avatar--img { padding: 0; overflow: hidden; object-fit: cover; } /* ── Form anti-spam + result message ── The honeypot is a real, focusable input kept out of the visual and accessibility trees. People never see it; bots that fill every field give themselves away, and the server discards those submissions. `display: none` is avoided deliberately — some bots skip hidden inputs, which would defeat the trap. */ .hp-field { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .form-success { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(0, 166, 158, .12); color: var(--navy); font-weight: 500; line-height: 1.5; } .panel--navy .form-success, .panel--teal .form-success, .df-book .form-success { background: rgba(254, 254, 254, .16); color: var(--white); } /* CV picker validation feedback */ .form-hint.cv-hint-error { color: #C0392B; font-weight: 500; } /* ── Collage on mobile ── The desktop layout is a 12-column grid with explicit row spans. There was no mobile override, so on a phone tiles like .cl-5 (2 of 12 columns, 3 rows tall) collapsed to roughly 65px wide by 250px tall — a 0.26 ratio. Every source photo is 4:3 landscape (1.33), so `object-fit: cover` was discarding ~80% of the width and cropping the people out entirely; several tiles showed only ceiling or sky. On mobile we drop the mosaic and give each photo its native 4:3 box, so nothing is cropped: two full-width features and a 2x2 of the rest. */ @media (max-width: 700px) { .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px; } .collage .cl { grid-column: auto; grid-row: auto; height: auto; aspect-ratio: 4 / 3; /* matches the source images, so cover has nothing to trim */ } /* the two strongest group shots get the full width */ .collage .cl-1, .collage .cl-7 { grid-column: 1 / -1; } } /* ── Dreamforce happy hour, pulled live from Wix Events ── */ .event-card { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; background: var(--white); border-radius: clamp(16px, 2vw, 24px); padding: clamp(18px, 2vw, 28px); box-shadow: 0 18px 50px rgba(35, 47, 95, .10); } /* No forced ratio. The client's banner is 1827x1023 (1.79); a 4/3 box cropped 26% off the width and sliced the first and last letters of the title. Letting the image keep its own shape also means any future upload displays uncropped. */ .event-cover { width: 100%; display: block; border-radius: 14px; height: auto; } .event-meta { display: flex; flex-direction: column; gap: 18px; } .event-fact dt { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; } .event-fact dd { margin: 0; font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; line-height: 1.5; } .event-addr { font-weight: 400; opacity: .75; font-size: .92em; } .event-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; } /* The RSVP is the primary action on this card — give it real presence next to the three ghost links rather than letting it shrink to its four characters. */ .event-actions .btn-cta { min-width: 190px; padding: 0 2.2rem; } @media (max-width: 700px) { .event-actions { gap: 10px; } .event-actions .btn-cta { width: 100%; min-width: 0; } } @media (max-width: 900px) { .event-card { grid-template-columns: 1fr; } } /* RSVP block under the event card */ /* The RSVP sat as bare fields directly on the panel, visually detached from the event it belongs to. Card treatment ties it to the event and gives the fields room. */ .rsvp-form { margin-top: clamp(18px, 2vw, 26px); max-width: none; background: rgba(35, 47, 95, .04); border: 1px solid rgba(35, 47, 95, .10); border-radius: clamp(16px, 2vw, 24px); padding: clamp(20px, 2.4vw, 34px); gap: clamp(14px, 1.4vw, 20px); } .rsvp-title { grid-column: 1 / -1; margin: 0; color: var(--navy); font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; line-height: 1.25; } .rsvp-sub { grid-column: 1 / -1; margin: -6px 0 2px; font-size: 14.5px; opacity: .75; line-height: 1.5; } .rsvp-actions { /* this element also carries .form-field, which sets flex-direction: column — without an explicit row the two responses stacked no matter what else was set */ display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid rgba(35, 47, 95, .10); } @media (max-width: 700px) { .rsvp-form { grid-template-columns: 1fr; } /* Side by side is a desktop layout. On a phone the pair stacks, primary first, each full width — squeezing both onto one line left two cramped tap targets. */ .rsvp-actions { flex-direction: column; align-items: stretch; gap: 10px; } .rsvp-actions > * { width: 100%; text-align: center; justify-content: center; } } .rsvp-form select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(35, 47, 95, .22); background: var(--white); font: inherit; color: var(--navy); } .event-closed { font-weight: 500; opacity: .7; } .form-hint-inline { font-weight: 400; opacity: .7; font-size: .85em; } /* Standalone /event-details/ page — the event and its RSVP, nothing else. No width cap: a 900px cap left ~230px of dead space on the right of a 1113px container, and made the card look narrow beside a 999px heading. Both blocks now fill the panel, so the right edge lines up with the heading. */ .event-page .event-card, .event-page .rsvp-form { max-width: none; width: 100%; } .event-page .event-closed { margin-top: 24px; display: inline-block; } @media (max-width: 700px) { /* Gutters were nesting: .page-hero 24 + .panel-inner 24 + .event-card 18 pushed the cover image to 66px from the edge and left it 239px of a 371px screen. The outer pair is doing the same job twice on a phone, so the panel keeps the page gutter and the inner wrapper drops to zero. */ .event-page { padding-left: 16px; padding-right: 16px; } .event-page .panel-inner { padding-left: 0; padding-right: 0; } .event-page .event-card { padding: 14px; gap: 16px; } .event-page .rsvp-form { padding: 16px; } }