/* ========================================================================== Brett Red — theme overrides Layered on top of Framer's generated CSS. ========================================================================== */ /* ---- Text Chip: frosted-glass pill ---- */ [data-framer-name="Text Chip"] { /* Soft white glass fill — visible over image cards, near-invisible over white cards */ background-color: rgba(255, 255, 255, 0.55) !important; /* Backdrop blur for the glass effect (Safari + Chromium) */ -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); /* Brighten the existing 1px border so the pill reads as a single object */ --border-color: rgba(255, 255, 255, 0.85) !important; /* Subtle outer + inner shadow so the pill lifts off image backgrounds */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* ---- Large-display masonry: cards must fill their column ---- Framer's export gives every masonry card a `width:100%` override at each breakpoint EXCEPT the >=2633px "ultra-wide" variant, where a few cards (e.g. Arya Works `framer-pcj8k8`, Navdy `framer-7mwsty`) fall back to their 200px component default. That gap was invisible while the ultra-wide layout hid most cards; the 4-column layout (theme.js, >=2560px) now renders that range fully and exposes it. Restore the missing override so every column child fills its track. No-op below 2560px and in 2560–2632px, where cards are already 100%. Threshold matches theme.js FOUR_COL_MIN. */ @media (min-width: 2560px) { [data-framer-name="Column 1"] > *, [data-framer-name="Column 2"] > *, [data-framer-name="Column 3"] > *, [data-framer-name="Column 4"] > * { width: 100% !important; } } /* ---- Large-display: inner content of embed/mockup cards must scale ---- Framer's >=2633px variant sizes some cards' INNER content with fixed pixels authored for a wider layout. In the 4-column layout (narrower cards) that fixed content over-zooms and clips. Restore the fluid, card-relative sizing the desktop variant uses so the content scales with the column. */ /* Arya Works — the phone mockup is a fixed 1086px wide in BOTH the 3-col and >=2633 variants, so it over-zooms once the card is narrower than ~826px, which the 4-col layout always is. Fix across the whole 4-col range. */ @media (min-width: 2560px) { /* Pin the card's height (537px at every desktop+ breakpoint). The >=2633 variant gives the card no explicit height — it borrows it from the in-flow clip frame below, so taking that frame out of flow would collapse the card to zero. */ [data-framer-name="Arya Works"] { height: 537px !important; } /* Clip frame: fill the card (the >=2633 base freezes it at 535px). */ [data-framer-name="Arya Works"] .framer-1aquolq { position: absolute !important; inset: 0 -3px !important; width: unset !important; height: unset !important; } /* Phone: scale to the card width, capped at its natural 1086px, keeping the mockup's aspect ratio and centring it (matches the desktop composition). */ [data-framer-name="Arya Works"] .framer-1r2ath3 { width: min(1086px, 131%) !important; aspect-ratio: 1086 / 684 !important; height: auto !important; left: 50% !important; right: auto !important; top: 14.1% !important; bottom: auto !important; transform: translateX(-50%) !important; } /* Inner image fills the (now fluid) mockup frame. */ [data-framer-name="Arya Works"] .framer-1r2ath3 > * { width: 100% !important; height: 100% !important; } } /* Anchor Maps — the >=2633 base freezes the card at height:395px and the embed at 406px, so the map renders as a clipped thin strip that gets ever wider and shorter as the viewport grows. Restore the desktop variant's fluid sizing: card height tracks width via aspect-ratio, embed fills it with bleed. The 2560–2632 sub-range already uses the desktop rules, so only patch >=2633. */ @media (min-width: 2633px) { [data-framer-name="Anchor Player"] { aspect-ratio: 0.98125 !important; height: auto !important; } [data-framer-name="Anchor Player"] .framer-19gyy1y-container { position: absolute !important; top: -15px !important; bottom: -16px !important; left: -2.63876% !important; width: 105% !important; height: unset !important; } } /* ========================================================================== Text cards — shared, card-responsive, left-aligned typography -------------------------------------------------------------------------- The Framer export gives each text card a FIXED font-size that never changes with the card's width (16/20/21/22px across cards) and centres every line. Goal: one shared body size that SCALES with the card it sits in, left aligned, so a wide 4-col card reads larger than a narrow 2-col one. Mechanism: make each text card a container (`container-type: inline-size`) and size body text in `cqi` (1cqi = 1% of the card's inline size). The clamp lands ~18px on a ~615px card and grows toward ~22px on a ~920px card, with a 15–24px safety range for tiny mobile / ultra-wide cards. We override size + alignment + line-height but deliberately LEAVE font-weight alone, so Framer's existing weights survive: quote bodies stay regular (400) and attribution names stay bold (800) — including "Scott Snibbe", who shares a text container with his quote. Chips ("Hello"/"Reference"/"Stats") are excluded via :not() so the frosted pills are untouched. Two explicit exceptions follow: the Brett intro drops 800 -> 400 to match the quote bodies, and the big stat figures (22.8m / 1%) keep their hero scale. ========================================================================== */ [data-framer-name="Text Card"], [data-framer-name="Reference Card"], [data-framer-name="Stats Card"], [data-framer-name="Stats w/ Dark Stars"], [data-framer-name="Ranked Designer"] { container-type: inline-size; } [data-framer-name="Text Card"] .framer-text:not(:is([data-framer-name="Text Chip"] *)), [data-framer-name="Reference Card"] .framer-text:not(:is([data-framer-name="Text Chip"] *)), [data-framer-name="Stats Card"] .framer-text:not(:is([data-framer-name="Text Chip"] *)), [data-framer-name="Stats w/ Dark Stars"] .framer-text:not(:is([data-framer-name="Text Chip"] *)), [data-framer-name="Ranked Designer"] .framer-text:not(:is([data-framer-name="Text Chip"] *)) { font-size: clamp(15px, calc(10px + 1.3cqi), 24px) !important; line-height: 1.35 !important; text-align: center !important; } /* Brett intro: drop the lone bold (800) to regular so it matches the quote bodies the user pointed at. Scoped to Text Card; the chip is already 400. */ [data-framer-name="Text Card"] .framer-text:not(:is([data-framer-name="Text Chip"] *)) { font-weight: 400 !important; } /* Big stat figures keep a hero scale (still card-responsive). Two-attribute selectors match the blanket's (0,3,0) specificity and win on source order. */ [data-framer-name="Stats Card"] [data-framer-name="50+ m"] .framer-text, [data-framer-name="Stats w/ Dark Stars"] [data-framer-name="50+ m"] .framer-text, [data-framer-name="Ranked Designer"] [data-framer-name="1%"] .framer-text { font-size: clamp(40px, calc(12px + 8cqi), 76px) !important; line-height: 1.1 !important; text-align: center !important; } /* Block-level centering. `text-align:center` aligns lines within each text block; this rule centres the blocks themselves. Flip every flex container in these text cards to `center` so the whole content column — chip, name, number, body — sits horizontally centred. align-items is a no-op on non-flex/grid elements, so the universal selector only affects the relevant column wrappers. */ [data-framer-name="Text Card"], [data-framer-name="Reference Card"], [data-framer-name="Stats Card"], [data-framer-name="Stats w/ Dark Stars"], [data-framer-name="Ranked Designer"], [data-framer-name="Text Card"] *, [data-framer-name="Reference Card"] *, [data-framer-name="Stats Card"] *, [data-framer-name="Stats w/ Dark Stars"] *, [data-framer-name="Ranked Designer"] * { align-items: center !important; }