/* Post-export fixes for the Framer build.
Loaded after Framer's own styles on every page. Kept in one file so a re-export
only needs this re-added, not the individual patches re-found.
Framer's hashed class names (.framer-xxxxxx) change on every re-export, so these
rules lean on [data-framer-name] and structural position instead wherever possible.
The two :nth-child rules are the exception and are called out below. */
/* ---------------------------------------------------------------------------
1. The nav is just the wordmark, for now.
The nav has always carried a "Receipts" link; it used to point at the retired
Playground and is now repointed at the build log at /receipts (the href is
edited directly in the markup of index.html and subpages/works.html, three
responsive copies each - it survives hydration, so no rule is needed for it).
The page is live and reachable, but it is not being announced in the nav yet.
So both side links stay hidden, exactly as before.
Each nav link sits in its own wrapper div inside a centred flex row, and the
wrapper keeps its width when only the is hidden - so the wrappers have to
go too, or the wordmark sits off centre. They come back together or not at
all; see rule 5.
TO LAUNCH THE NAV: delete this rule and rule 5. Nothing else. Both are in this
file, which is no-cache, so it is a one-file deploy.
--------------------------------------------------------------------------- */
nav div:has(> a[href="/receipts"]) {
display: none !important;
}
/* ---------------------------------------------------------------------------
2. Phone layout fixes (Framer's phone breakpoint is max-width: 809px).
--------------------------------------------------------------------------- */
@media (max-width: 809px) {
/* 2a. The hero headline and standfirst were laid out edge to edge - text ran
into both screen bezels. Give the hero column a real gutter. */
[data-framer-name="Hero Content"] {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* 2b. "This is Michelle" is an SVG arc positioned for the desktop headline.
On a phone the headline wraps to two lines and grows upward into it, so the
arc printed straight through the words. Lift the arc clear. */
[data-framer-name="Arc text"] {
transform: translateY(-58px) !important;
}
/* 2c. The two upper collage photos overlapped the first line of the headline
at phone widths (they clear it on desktop). Nudge them up.
`translate` is used rather than `transform` on purpose: these elements carry
a rotation matrix in `transform`, and the shorthand would wipe the rotation.
Children 2 and 5 of the hero are the upper-left and upper-right photos;
3 and 4 are the lower pair, which already sit clear. */
section[data-framer-name="Hero"] > :nth-child(2),
section[data-framer-name="Hero"] > :nth-child(5) {
translate: 0 -38px !important;
}
}
/* ---------------------------------------------------------------------------
3. Case-study body grids: stack on narrow screens.
The case-study rich text ships its own stylesheet, which already intends to
stack these at <=860px:
@media(max-width:860px){ .strip,.four,.chan,.chan.two,.nums{grid-template-columns:1fr} }
...but the .chan elements also carry an INLINE style="grid-template-columns:repeat(3,1fr)",
and an inline declaration outranks any stylesheet rule. So the three-up card
rows stayed three-up on a phone.
Two visible symptoms, one cause: the cards were squeezed into ~110px columns
AND, because the grid's min-content floor (375px) exceeded the viewport, the
whole .wrap was pushed wider than the screen - which is why headings and body
copy on those pages looked off-centre and clipped on the right.
!important is what actually beats the inline style here.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
.chan, .strip, .four, .nums,
.pair, .two, .cols2, .smallpair {
grid-template-columns: 1fr !important;
}
}
/* ---------------------------------------------------------------------------
4. Phone-only layout, part two.
--------------------------------------------------------------------------- */
@media (max-width: 809px) {
/* 4a. Centre the opening frame. The hero is a fixed 333px composition pinned
208px down the page, so on a tall phone it sat high with a large dead gap
beneath it. Push it down by whatever it takes to centre the visible
composition (which starts at the photos, ~136px, and ends at the Winnow
callout, ~583px - midpoint 360px) in the viewport. max() keeps it at 0 on
short screens so it can never be pushed off the top.
The vh line is a fallback for browsers without svh. */
section[data-framer-name="Hero"] { margin-top: max(0px, calc(50vh - 360px)) !important; }
section[data-framer-name="Hero"] { margin-top: max(0px, calc(50svh - 360px)) !important; }
/* 4b. Testimonials were laid out as fixed 536px cards inside a 1048px ticker
window, both wider than the screen, so every quote was cut off at both
edges. Size the card, its wrapper, the track and the ticker window to the
viewport so one testimonial reads full width with a comfortable margin. */
[data-framer-name="Testimonial Card"],
div:has(> [data-framer-name="Testimonial Card"]) {
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
}
li:has([data-framer-name="Testimonial Card"]),
li:has([data-framer-name="Testimonial Card"]) > div,
li:has([data-framer-name="Testimonial Card"]) > div > div {
width: max-content !important;
}
section[data-framer-name="Sneak peak"] { overflow: hidden !important; }
section[data-framer-name="Sneak peak"] > div,
section[data-framer-name="Sneak peak"] > div > section,
section[data-framer-name="Sneak peak"] ul:has([data-framer-name="Testimonial Card"]) {
width: 100% !important;
}
/* 4c. Narrowing the cards makes the quotes wrap to more lines, so the cards
grow taller than the ticker's fixed desktop height (346px window, 293px row).
The row bottom-aligns its cards and clips overflow, so the top of every
quote was cut off. Let the whole chain size to the tallest card. */
section[data-framer-name="Sneak peak"] > div,
section[data-framer-name="Sneak peak"] > div > section,
section[data-framer-name="Sneak peak"] ul:has([data-framer-name="Testimonial Card"]),
li:has([data-framer-name="Testimonial Card"]),
li:has([data-framer-name="Testimonial Card"]) > div,
li:has([data-framer-name="Testimonial Card"]) > div > div {
height: auto !important;
}
/* 4d. Swipeable testimonials instead of the auto-scrolling ticker.
Framer's Ticker loops the with a Web Animations API transform and
appends copies of the card row to fill the loop. An !important author rule
outranks a running animation, so `transform: none` parks it. The copies
(every - after the first) are hidden, and the ticker window becomes a
native horizontal scroller that snaps one card at a time.
The card row ("Variant 1") ships with overflow: hidden, which would make it
the scroll container the cards snap to, so it is opened up here. */
section[data-framer-name="Sneak peak"] > div > section {
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-webkit-mask-image: none !important;
mask-image: none !important;
}
section[data-framer-name="Sneak peak"] > div > section::-webkit-scrollbar {
display: none;
}
section[data-framer-name="Sneak peak"] ul:has([data-framer-name="Testimonial Card"]) {
transform: none !important;
will-change: auto !important;
width: max-content !important;
flex-shrink: 0 !important;
}
li:has([data-framer-name="Testimonial Card"]) ~ li {
display: none !important;
}
li:has([data-framer-name="Testimonial Card"]) > div > div {
overflow: visible !important;
}
div:has(> [data-framer-name="Testimonial Card"]) {
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
/* ---------------------------------------------------------------------------
5. The other half of rule 1: the "Work" link ("./works" on Home and Work,
"../works" on case studies). Scoped to