/* ============================================================ Site-wide overrides — loaded on every page. ============================================================ */ /* The "Made in Webflow" badge is not in the exported markup; Webflow's JS bundle appends straight to at runtime, so it can only be removed with a rule, not by editing HTML. !important because the badge carries heavy inline styles. */ .w-webflow-badge { display: none !important; } /* ------------------------------------------------------------ Case study pull-quote — restore the word spaces The highlighter-sweep effect wraps each word of .highlight-title in a .highlight-marker-line, and its embed styles force `display: inline-block !important` with `margin: -0.055em 0px`. Two consequences: - the trailing space that IS present in each piece's text is trimmed, because trailing whitespace inside an inline-block is discarded; - the shorthand margin zeroes the horizontal margin. So wherever two words land on the same visual row they collide - "CREATIVEVISION." on /work/go. It only shows at widths where a row holds more than one word, which is why it looks intermittent. Fixed with margin, deliberately not padding: .highlight-marker-bar is absolutely positioned to `inset: -0.055em 0px`, so padding would stretch the highlighter stroke across the gap. Margin sits outside the box and leaves the stroke tight to the word. 0.21em is the measured width of a space in Die Grotesk D at weight 700 - matching real text rather than an eyeballed value. Applies to all five case studies, which share this component. ------------------------------------------------------------ */ [data-highlight-marker-reveal] .highlight-marker-line:not(:last-child) { margin-right: 0.21em; } /* ------------------------------------------------------------ Case study pull-quote — make the reveal wipe invisible The highlighter-sweep effect animates .highlight-marker-bar across each line to reveal the text, but the embed script sets its colour inline as `background-color: grey` - an unchanged default. The result is a grey block visibly sweeping over the red type instead of the type simply being wiped on. Matching it to the page background makes the bar itself invisible, so only the reveal reads. Uses the same token that paints the page, so it follows if that ever changes. !important is required: the colour is an inline style on the element, set by the script, and inline beats any selector. ------------------------------------------------------------ */ .highlight-marker-bar { background-color: var(--color--white, #fff) !important; }