/* Mobile tap-highlight: the blue flash reported on redesigns.html's case cards isn't from any rule on that page — no stylesheet there ever sets a color on that card's :active/:hover/:focus state. Checking site-wide turned up the real scope of it: even a plain tag computes a non-transparent -webkit-tap-highlight-color, meaning this was never addressed anywhere on the site, on any element — Webflow's own hosted output resets this globally, but that reset lives in webflow.js (removed this session) or Webflow's own runtime, not in the exported CSS, so the static mirror lost it. Most elements mask the resulting flash by immediately navigating or transitioning away; the case cards just make it obvious because they sit still while their modal opens. Resetting it on fixes it everywhere at once instead of chasing each element it happens to be visible on. */ html { -webkit-tap-highlight-color: transparent; } /* redesigns.html case modals (.rd-modal_media): a third-party Webflow app (rdmodal-6.1.0.js) sets a flat background-color, rgb(25,79,136) — a generic blue, identical across every one of the 6 cases, not a per-image placeholder — behind the case's own background-image. It's only ever visible for however long that image takes to paint in (reveal.js already preloads them on page load to shrink that window), so on a slow connection, a cold cache, or just unlucky timing it still flashes blue before the real image appears. Matching it to the modal's own background instead makes that flash imperceptible regardless of timing — the actual fix, rather than continuing to race the image load. */ .rd-modal_media { background-color: var(--main-background) !important; } /* "More Projects" section (case study pages), 768-991px: .padding-section-large is shared by several sections on this page (feedback, CTA, this one), so it can't just be turned down globally — scoped to this section's own id. Its own 6rem top/bottom here (992px+ uses 8rem/0, <=767px already drops to 4rem) stacks with this section's internal spacer-large (before the grid) and spacer-xhuge (after it), compounding into a much bigger gap than either mobile or desktop actually has. Matching the <=767px value here too closes that gap instead of treating 768-991px as its own wider tier. */ @media screen and (min-width: 768px) and (max-width: 991px) { #section-cases-projects .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; } } /* Case study CTA block ("From Idea to Launch — Let's Talk"), <=767px: Webflow's own .hide-mobile-landscape hides Anja's photo entirely below this width, leaving just badge/heading/subtext/buttons — reads as a generic, forgettable block without the personal photo that makes it work on wider screens. Un-hiding it needs two different treatments though, since Webflow's own single "<=767px" rule assumed that width always means portrait: in PORTRAIT it's right to stack to one column, so the photo is just reordered after the text/buttons (same content-then-photo order as the homepage hero) instead of its natural DOM position before them. In LANDSCAPE, that same one-column stack is the bug the portrait fix would otherwise also apply — a landscape phone at this width has the same side-by-side room as a tablet just above this breakpoint, so it gets that 2-column layout instead (photo/content stay in their natural DOM order — left/right — same as every wider breakpoint). */ @media screen and (max-width: 767px) and (orientation: portrait) { .cta-media-wrapper.hide-mobile-landscape { display: block !important; } .cases_cta-content-wrapper { order: 1; } .cta-media-wrapper { order: 2; } .cta_media { max-width: 100%; } } @media screen and (max-width: 767px) and (orientation: landscape) { .cta-media-wrapper.hide-mobile-landscape { display: block !important; } .case-cta-grid { grid-template-columns: 50% 50% !important; /* Matches the >=768px layout's own small left padding (2rem, vs 5rem on the text side) instead of the <=767px rule's 5rem — shifts the photo back toward the card's left edge instead of sitting as far right as the text column. */ padding-left: 2rem !important; /* Smaller bottom breathing room for the buttons than the 4rem the portrait stack uses — this cramped landscape height doesn't have room to spare. Kept in sync with the photo's own margin-bottom below it, which bleeds through exactly this much padding. */ padding-bottom: 24px !important; } .cta-media-wrapper { margin-bottom: -24px !important; } /* Buttons: always one row instead of Webflow's own auto-fit collapsing to a stack once two 9.8rem-minimum buttons don't fit the (narrow, at this width) text column — then widened and pulled left so the row spills a bit onto the photo instead of being squeezed to fit inside the text column alone. z-index:2 + position:relative already came from Webflow's own <=991px rule, so it renders over the photo without needing its own stacking-context fix. */ .buttons-wrapper { grid-template-columns: 1fr 1fr !important; width: 130% !important; margin-left: -18% !important; } } /* Flush-to-edge photo at every width the photo is shown at (matching the >=768px layout's own padding-bottom:0 — the whole point of the media wrapper's align-self:end there): Webflow's own <=767px/<=479px rules put the bottom padding back (4rem/2rem), presumably harmless while the photo was hidden. Rather than zeroing that padding on the whole grid — which also pulls the buttons flush to the card's bottom edge whenever the text column ends up the taller one (as it does in the cramped landscape layout above) — only the photo gets a matching negative margin-bottom, bleeding it through the padding on its own while the text column keeps its normal breathing room. */ @media screen and (max-width: 767px) { .cta-media-wrapper { margin-bottom: -4rem; } } @media screen and (max-width: 479px) { .cta-media-wrapper { margin-bottom: -2rem; } } /* "More Projects" cross-link cards: .is-lumora never had an aspect-ratio at all (stuck at the default "auto"), and .is-rd only got one inside the narrowest (≤479px) media query — everywhere else both collapse to whatever height their flex/grid siblings dictate, cropping almost all of the background montage image down to a thin strip. Give both a real ratio at every width. */ .project-placeholder.is-lumora, .project-placeholder.is-rd { aspect-ratio: 16 / 9; } /* "More Projects" grid (.projects-grid): a plain grid-template-columns:1fr 1fr doesn't actually force equal columns — each 1fr track has an implicit minmax(auto,1fr), so a grid item whose content has a wide min-content size (here, XenoPatch's video-preview card, .more-project_wrapper) can still claim more than its fair half, leaving its "1fr" sibling narrower. minmax(0,1fr) removes that auto floor so both tracks actually split the row evenly. Scoped to >=768px (where Webflow's own "1fr 1fr" already applies) since its own narrower rule — grid-template-columns:repeat(auto-fit,minmax(16.2rem,1fr)) — doesn't have this bug (an explicit minmax floor, not "auto") and deliberately collapses to one column once two would be too cramped to read; overriding it unscoped would force two columns there too. */ @media screen and (min-width: 768px) { .projects-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } } /* XenoPatch's "More Projects" video-preview card (.more-project_wrapper): has no aspect-ratio of its own (unlike its sibling .project-placeholder, fixed above), so its box is sized from the