/* Mainstage V1 — Bug Out hero (artifact composition). LEFT: large dark-green-backed photo, 16px radius, offset shadow. RIGHT: cream content card overlapping the photo's right portion, with the "PESTS OUT. / PEACE IN." headline + lime swash behind "PEACE IN.". Bottom-right: mosquito + lime swatch sticker overlapping below the card. Framework-first; only semantic tokens; px->rem = px / 18. Scoped to .mstg.v1. */ .mstg.v1 { /* -- Spacing overrides (via mainstage tools) ------ */ --mstg-tls-pd-v-tp: 64; --mstg-tls-pd-v-tp-mbl: 40; --mstg-tls-pd-v-bt: 96; --mstg-tls-pd-v-bt-mbl: 48; /* -- Local sizing tokens (artifact, px / 18) ------ */ /* EXACT artifact values (Figma export, content frame 1672px, px ÷18): photo 1386×784, card 1000 wide, card 672 from left (right-aligned), card top 32, photo top 82 (50 below card), card-over-photo overlap 714. */ --mstg-v1-rds: var(--bdr-rds); /* 16px — photo + card (.bg child clips to this) */ --mstg-v1-photo-h: 43.56rem; /* 784px tall left photo */ --mstg-v1-card-w: 55.56rem; /* 1000px card (artifact exact) */ --mstg-v1-card-ov: 39.67rem; /* 714px — photo extends this far UNDER the card */ --mstg-v1-photo-drop: 2.778rem; /* 50px — photo top sits below the card top (card on top-right) */ --mstg-v1-stage-pt: 4rem; /* top padding of the stage (hero top spacing) */ --mstg-v1-card-pd-tp: 2.222rem; /* 40px card padding top (artifact) */ --mstg-v1-card-pd-bt: 3.556rem; /* 64px card padding bottom (artifact) */ --mstg-v1-card-pd-h: 3.556rem; /* 64px card padding sides (artifact) */ --mstg-v1-gap: 0.889rem; /* 16px gap between card items (artifact) */ --mstg-v1-sticker-w: 13.41rem; /* 241px sticker width */ /* -- Stage: positioned ancestor for the overlap ---- */ .mstg-stage { position: relative; padding-top: var(--mstg-v1-stage-pt); } /* -- LEFT photo: dark-green backing, rounded, offset shadow -------------- */ .mstg-photo { position: relative; z-index: 1; background-color: var(--callout); /* var(--lt-callout) dark green */ border-color: var(--text-color); /* .bdr_a supplies 2px solid; pin the ink (radius/shadow via .bdr-rds/.bx-sdw classes) */ overflow: hidden; } /* The fills .mstg-photo; clip to the rounded corners. */ .mstg-photo .bg { border-radius: var(--mstg-v1-rds); } /* The hero photo is a .png; global.css forces PNGs to object-fit:contain (letterboxing → the green backing leaks). It's a full-bleed content photo, so force cover to fully fill the frame (artifact = object-cover, no green). */ .mstg-photo .bg img { object-fit: cover; } /* -- RIGHT cream card: overlaps the photo's right portion --------------- */ .mstg-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--mstg-v1-gap); /* 16px between items (artifact) */ /* Surface via .bg-bx: paints --inner-theme by default (cream on light, == the old --main-bg), or the palette's --background when a data-colors flip is set on the placement (innerColors). No hardcoded surface here. */ border-color: var(--text-color); /* .bdr_a supplies 2px solid; pin the ink — palette-following, flips with the card */ padding: var(--mstg-v1-card-pd-tp) var(--mstg-v1-card-pd-h) var(--mstg-v1-card-pd-bt); } /* Flex gap owns spacing; neutralize the ad-hoc margin utilities in the markup. */ .mstg-card > * { margin-top: 0; margin-bottom: 0; } /* -- Headline: PESTS OUT. / PEACE IN. ----------------------------------- */ /* Artifact: Archivo Black 132px, tracking -2.64px, line-height 1.1. Fixed size (not the fnt_t-big hero ramp) so each line fits the wide card. */ /* "OUT." picks up the rust link color */ .mstg-ttl-accent { color: var(--link-color); } /* Lime swash sitting BEHIND "PEACE IN." (slightly rotated) */ .mstg-ttl-hl { position: relative; display: inline-block; isolation: isolate; } /* -- Flair under the headline, before the lede -------------------------- */ /* Brand flair (FlairLeft theme element) — sized centrally by .flr-lft in theme.css. */ /* Subhead — artifact: SUSE bold 32px (mobile rides fnt_t-5; desktop size set at 1280 below) */ .mstg-lede { display: block; line-height: 1.2; } /* Body paragraph — mobile rides fnt_pl already on the element */ /* -- Button combo: lime primary + outlined secondary -------------------- */ .btn-con { flex-wrap: wrap; gap: 0.889rem; /* 16px */ } /* -- Mosquito + lime swatch sticker, bottom-right overlap --------------- */ .mstg-sticker { position: absolute; z-index: 3; right: 1.5rem; bottom: calc(var(--mstg-v1-sticker-w) * -0.42); width: var(--mstg-v1-sticker-w); pointer-events: none; } .mstg-sticker svg { display: block; width: 100%; height: auto; } /* ── Mobile / small first: stacked, card below the photo ──────────────── */ .mstg-photo { height: 18rem; margin-bottom: 1.333rem; } /* ── Desktop: photo left + overlapping card right ─────────────────────── */ @media screen and (min-width: 1280px) { /* Stage holds the dropped photo + the card that sticks up above it. */ .mstg-stage { min-height: calc(var(--mstg-v1-photo-h) + var(--mstg-v1-photo-drop)); } /* Artifact headline: 132px. The wide card + nowrap keep "PESTS OUT." and "PEACE IN." each on one line (2-line lockup, as the artifact). */ /* Subhead — artifact: SUSE bold 32px */ .mstg-lede { font-size: 1.778rem; /* 32px ÷18 */ } /* Photo drops below the card top so the card reads as a top-right panel overlapping the photo (artifact). */ .mstg-photo { height: var(--mstg-v1-photo-h); width: calc(100% - var(--mstg-v1-card-w) + var(--mstg-v1-card-ov)); margin-top: var(--mstg-v1-photo-drop); margin-bottom: 0; } .mstg-card { position: absolute; top: var(--mstg-v1-stage-pt); /* sits inside the stage top padding, above the (dropped) photo */ right: 0; width: var(--mstg-v1-card-w); } /* Bug sticker: artifact places its TOP edge exactly at the card bottom (sticker top 667.5px ≈ card bottom 667px), right edge 19px inside the card right. As a card child, top:100% = card bottom — exact + robust. */ .mstg-sticker { top: 100%; bottom: auto; right: 1.07rem; /* 19px from the card's right edge */ } } }