/* ============================================================================ Farmer Bill's — Ad Factory · brand tokens + ad layout primitives Brand system replicated from deliverables/ad-mockups-v1/design.md. Two consumers: render.html (one ad at native px) + index.html (scaled board). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Inter:wght@500;600;700;800&display=swap'); :root { /* — palette — */ --paper: #F2E7D3; /* warm cream butcher-paper bg */ --ink: #23201B; /* espresso-brown primary text */ --brick: #B23A2B; /* meat-red accent (the ONE red word) */ --pasture:#4F6138; /* olive pasture green */ --wheat: #BE9A4E; /* gold/wheat — stars, fine rules */ --char: #1A1714; /* near-black char (dark/cinematic bg) */ --bone: #F7F1E6; /* light type on dark scenes */ /* — flavor accents (mirror design.md) — */ --acc-original: #2F5A7A; --acc-spicy: #B23A2B; --acc-garlic: #4F6138; --acc-smokehouse:#1A1714; /* — type — */ --display: "Playfair Display", Georgia, serif; --sans: "Inter", system-ui, sans-serif; /* per-ad accent, overridden inline from JSON */ --accent: var(--brick); /* warm shadow tint (HSL parts) — never pure black. One light: top-left. */ --shadow-color: 28 38% 9%; } * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================================ THE AD — fixed native px per format. The board scales this down via transform. ========================================================================== */ .ad { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-optical-sizing: auto; isolation: isolate; } .ad[data-format="4:5"] { width: 1080px; height: 1350px; } .ad[data-format="1:1"] { width: 1080px; height: 1080px; } .ad[data-format="9:16"] { width: 1080px; height: 1920px; } .ad[data-format="carousel"] { width: 1080px; height: 1920px; } /* default frame ratio */ /* ---- LAYER 1: background (AI render / scene plate) ---- */ .ad__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, center); /* per-ad reframe */ } /* dark scene → light type; cream/no-bg → ink type */ .ad[data-scene="dark"] { color: var(--bone); background: var(--char); } .ad[data-scene="paper"] { background: var(--paper); } /* subtle warm vignette on dark/cinematic scenes — felt, not seen (z below type) */ .ad[data-scene="dark"]::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(135% 115% at 50% 42%, transparent 52%, rgba(18,11,5,.42) 100%); } /* baked analog grain (never the Canva slider) */ .ad::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; opacity: .85; /* exposure-aware: concentrate grain at the edges, pull it from the bright center */ -webkit-mask-image: radial-gradient(120% 120% at 50% 38%, rgba(0,0,0,.35), #000 72%); mask-image: radial-gradient(120% 120% at 50% 38%, rgba(0,0,0,.35), #000 72%); } /* ---- LAYER 2: product cutout (locked layer, off-axis, real contact shadow) ---- */ .ad__product { position: absolute; z-index: 2; /* default placement: upper-right hero; per-ad overridable inline */ top: 8%; right: -4%; width: 62%; transform: rotate(var(--prod-rot, -5deg)); /* multi-layer warm-tinted shadow, one light direction (top-left → down-right) */ filter: drop-shadow(3px 5px 5px hsl(var(--shadow-color) / .45)) drop-shadow(8px 22px 34px hsl(var(--shadow-color) / .28)); } /* ---- LAYER 3: legibility scrim (gradient, never a flat box) ---- */ .ad__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; } /* warm-tinted (not pure black), eased 4-stop, fades by ~55% */ .ad__scrim--bottom { background: linear-gradient(to top, rgba(26,17,10,.80) 0%, rgba(26,17,10,.42) 24%, rgba(26,17,10,.12) 42%, transparent 56%); } .ad__scrim--top { background: linear-gradient(to bottom, rgba(26,17,10,.66) 0%, transparent 40%); } .ad[data-scene="paper"] .ad__scrim { display: none; } /* ---- LAYER 4: type ---- */ .ad__type { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; padding: var(--type-pad-t, 8%) 7% var(--type-pad-b, 8%); /* per-ad vertical nudge */ /* anchor copy block bottom-left by default (left-flush, ragged right) */ justify-content: flex-end; align-items: flex-start; gap: 28px; } .ad__type--top { justify-content: flex-start; } .ad__kicker { font-family: var(--sans); font-weight: 700; font-size: 30px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); } .ad[data-scene="dark"] .ad__kicker { color: var(--wheat); } .ad__tag { font-family: var(--display); font-weight: 900; line-height: 1.03; font-size: 122px; letter-spacing: -.015em; max-width: 92%; text-wrap: balance; } .ad[data-format="1:1"] .ad__tag { font-size: 104px; } .ad[data-format="9:16"] .ad__tag, .ad[data-format="carousel"] .ad__tag { font-size: 132px; } /* auto-fit: longer headlines step down so multi-line tags never collide */ .ad[data-tag="mid"] .ad__tag { font-size: 92px; line-height: 1.05; } .ad[data-tag="long"] .ad__tag { font-size: 70px; line-height: 1.08; max-width: 96%; } .ad[data-format="9:16"][data-tag="mid"] .ad__tag, .ad[data-format="carousel"][data-tag="mid"] .ad__tag { font-size: 104px; } .ad[data-format="9:16"][data-tag="long"] .ad__tag, .ad[data-format="carousel"][data-tag="long"] .ad__tag { font-size: 80px; line-height: 1.07; } .ad__tag .accent { color: var(--accent); } /* per-ad accent (brick or wheat) renders on every scene */ .ad__tag em { font-style: italic; } .ad__tag .dim { font-size: .58em; } /* de-emphasized word (e.g. smaller TO-GO) */ /* ladder: each line steps down in size (de-escalate); span sizes set inline by factory.js */ .ad__tag--ladder { line-height: .98; } .ad__tag--ladder .ad__tag-line { display: block; } .ad__tag .ul { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 8px; } /* tagFit: keep a multi-word headline on ONE line (sized to fit width) */ .ad.ad--tagfit .ad__tag { white-space: nowrap; } .ad.ad--tagfit[data-format="1:1"] .ad__tag { font-size: 80px; } .ad.ad--tagfit[data-format="4:5"] .ad__tag { font-size: 80px; } .ad.ad--tagfit[data-format="9:16"] .ad__tag, .ad.ad--tagfit[data-format="carousel"] .ad__tag { font-size: 92px; } .ad__sub { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1.12; max-width: 80%; opacity: .92; text-wrap: pretty; } /* roman sub with selective italic emphasis (per-ad opt-in) */ .ad__sub--roman { font-style: normal; line-height: 1.34; } .ad__sub--roman em { font-style: italic; font-size: 1.16em; } /* shadow-vignette behind copy to separate it from a busy photo (per-ad opt-in: textPlate) */ .ad__type--plate::before { content: ""; position: absolute; left: 0; right: 0; z-index: -1; height: 74%; pointer-events: none; } .ad__type--plate:not(.ad__type--top)::before { bottom: 0; background: linear-gradient(to top, rgba(16,10,4,.86) 0%, rgba(16,10,4,.55) 30%, rgba(16,10,4,.18) 55%, transparent 78%); } .ad__type--plate.ad__type--top::before { top: 0; background: linear-gradient(to bottom, rgba(16,10,4,.86) 0%, rgba(16,10,4,.55) 30%, rgba(16,10,4,.18) 55%, transparent 78%); } .ad__type--plate .ad__tag, .ad__type--plate .ad__sub, .ad__type--plate .ad__kicker { text-shadow: 0 2px 18px hsl(var(--shadow-color) / .7), 0 1px 4px hsl(var(--shadow-color) / .55); } /* right-aligned copy block (per-ad opt-in: typeAlign:"right") + matching right-side vignette */ .ad__type--right { align-items: flex-end; text-align: right; } .ad__type--right .ad__tag, .ad__type--right .ad__sub { max-width: 100%; } .ad__type--plate.ad__type--right::before { left: auto; right: 0; top: 0; bottom: 0; height: 100%; width: 76%; background: linear-gradient(to left, rgba(16,10,4,.88) 0%, rgba(16,10,4,.55) 34%, rgba(16,10,4,.16) 64%, transparent 82%); } /* "punch out" — pull the bg subject back: contained + smaller, dark scene shows around it */ .ad__bg--inset { inset: auto; left: 14%; top: 7%; width: 72%; height: 62%; object-fit: contain; } /* nutrition / stat chips, bottom-right by default */ .ad__chips { position: absolute; z-index: 4; right: 9%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; } /* text-only nutrition labels styled like the sub (Playfair italic), no pill — sized +40% per Jose */ .ad__chip { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 88px; line-height: 1.05; color: var(--bone); text-shadow: 0 2px 16px hsl(var(--shadow-color) / .75), 0 1px 4px hsl(var(--shadow-color) / .6); } .ad__chip .accent { color: var(--accent); font-style: normal; margin-right: .22em; } /* caption dissolve for video ads (segment text crossfades on the cut) — ~220ms per research */ .ad__kicker, .ad__tag, .ad__sub { transition: opacity .22s ease; } .ad__body { font-family: var(--sans); font-weight: 500; font-size: 30px; line-height: 1.4; max-width: 74%; opacity: .9; } .ad__cta { font-family: var(--sans); font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: .04em; color: var(--bone); background: var(--accent); padding: 22px 38px; border-radius: 4px; align-self: flex-start; } /* ---- logo + trust badge ---- */ .ad__logo { position: absolute; z-index: 6; top: 6%; left: 7%; width: 26%; height: auto; opacity: .96; } .ad__badge { position: absolute; z-index: 6; top: 6%; right: 7%; font-family: var(--sans); font-weight: 800; font-size: 26px; color: var(--ink); background: var(--wheat); padding: 12px 20px; border-radius: 999px; } /* ---- missing-asset placeholder (folder-agnostic: render with whatever's present) ---- */ .ad__bg.is-missing, .ad__product.is-missing { background: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 22px, rgba(0,0,0,.10) 22px 44px); } .ad__bg.is-missing::before, .ad__product.is-missing::before { content: attr(data-missing); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 700; font-size: 34px; color: rgba(0,0,0,.42); text-align: center; padding: 12%; } /* ============================================================================ INSPIRATION-DRIVEN LAYOUTS (v.layout) — testimonial · facts · versus · repeat · offer All sized for the 1080px native canvas (board scales the whole .ad down). ========================================================================== */ /* ---- TESTIMONIAL (LMNT-style: big pull-quote + stars + attribution + trust) ---- */ .ad__scrim--testi { background: linear-gradient(to right, rgba(18,11,5,.88) 0%, rgba(18,11,5,.66) 46%, rgba(18,11,5,.18) 78%, transparent 100%); } .ad__testi { gap: 34px; padding: 9% 7%; justify-content: center; max-width: 78%; } .ad__quote { font-family: var(--display); font-weight: 900; font-style: normal; font-size: 92px; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 2px 22px hsl(var(--shadow-color) / .6), 0 1px 4px hsl(var(--shadow-color) / .5); } .ad[data-format="4:5"] .ad__quote { font-size: 84px; } .ad[data-format="1:1"] .ad__quote { font-size: 76px; } .ad__quote .accent { color: var(--accent); } /* ONE accent (brick), not gold */ .ad__quote em { font-style: italic; } /* gold stars are the universal review convention — kept, but everything else demotes off gold */ .ad__stars { color: var(--wheat); font-size: 54px; letter-spacing: .06em; line-height: 1; } .ad__by { font-family: var(--sans); font-weight: 800; font-size: 32px; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 8px hsl(var(--shadow-color) / .5); } .ad__by span { font-weight: 600; opacity: .62; text-transform: none; letter-spacing: .01em; } .ad__trust { font-family: var(--sans); font-weight: 800; font-size: 32px; color: var(--bone); letter-spacing: .02em; opacity: .92; } /* ---- FACTS (Chomps-style: header + arrow-pointed stat callouts over the hero) ---- */ /* darken TOP (header) + RIGHT (the fact stack) so white type reads over a light pack/board */ .ad__scrim--facts { background: linear-gradient(to right, transparent 28%, rgba(14,9,4,.42) 60%, rgba(14,9,4,.86) 100%), linear-gradient(to bottom, rgba(14,9,4,.82) 0%, rgba(14,9,4,.16) 24%, transparent 40%); } .ad__facts-hd { position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: 8% 7% 0; } .ad__facts-hd .ad__tag { font-size: 104px; text-shadow: 0 2px 20px hsl(var(--shadow-color) / .6); } .ad[data-format="4:5"] .ad__facts-hd .ad__tag { font-size: 92px; } /* #26: whole headline on one line (sized to fit 9:16 width) per Jose */ .ad[data-format="9:16"] .ad__facts-hd .ad__tag { font-size: 56px; line-height: 1.05; white-space: nowrap; } .ad[data-layout="facts"] .ad__kicker { color: rgba(247,241,230,.6); } /* hairline eyebrow, off gold */ .ad__facts { position: absolute; z-index: 4; right: 6%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 62px; align-items: flex-end; } .ad__fact { display: flex; align-items: center; gap: 18px; } .ad__fact-arrow { color: var(--accent); font-size: 44px; line-height: 1; opacity: .85; order: 2; } .ad__fact-txt { text-align: right; order: 1; text-shadow: 0 2px 18px hsl(var(--shadow-color) / .65); } .ad__fact-txt b { display: block; font-family: var(--display); font-weight: 900; font-size: 104px; line-height: .9; color: var(--bone); } .ad__fact-txt i { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 29px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; } /* ---- VERSUS (Force-of-Nature two-sided: win card vs muted "other option") ---- */ .ad[data-layout="versus"] { background: var(--char); color: var(--bone); } .ad__vs-hd { position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: 7% 6% 0; text-align: center; } .ad__vs-hd .ad__tag { font-size: 84px; max-width: 100%; text-align: center; } .ad[data-tag="long"] .ad__vs-hd .ad__tag { font-size: 66px; } .ad__vs { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; gap: 0; padding: 30% 5% 7%; } /* asymmetry: the hero (win) side dominates; the villain side recedes — kills the "perfect mirror" tell */ .ad__vs-col { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 34px 26px; border-radius: 22px; } .ad__vs-col--win { flex: 1.18; background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px hsl(var(--shadow-color) / .55); z-index: 2; } .ad__vs-col--lose { flex: .9; opacity: .66; transform: scale(.95); } .ad__vs-label { font-family: var(--sans); font-weight: 800; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 18px; border-radius: 6px; } .ad__vs-col--win .ad__vs-label { background: var(--brick); color: var(--bone); } .ad__vs-col--lose .ad__vs-label { background: rgba(247,241,230,.12); color: rgba(247,241,230,.7); } .ad__vs-media { width: 100%; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 -40px 60px rgba(0,0,0,.30); } .ad__vs-img { width: 100%; height: 100%; object-fit: cover; } .ad__vs-col--win .ad__vs-media { background: var(--char); } .ad__vs-col--lose .ad__vs-media { background: #1f1b16; } .ad__vs-ghost { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1.04; text-align: center; color: rgba(247,241,230,.4); text-transform: lowercase; } .ad__vs-rows { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 14px; } .ad__vs-rows li { font-family: var(--sans); font-weight: 600; font-size: 27px; line-height: 1.2; padding-left: 44px; position: relative; } .ad__vs-rows li::before { position: absolute; left: 0; top: -2px; font-size: 30px; font-weight: 800; } .ad__vs-rows li.ok::before { content: "\2713"; color: var(--pasture); } .ad__vs-rows li.no::before { content: "\2715"; color: var(--brick); opacity: .75; } .ad__vs-col--win .ad__vs-rows li { color: var(--ink); } .ad__vs-col--lose .ad__vs-rows li { color: var(--bone); opacity: .8; } .ad__vs-gt { flex: none; align-self: center; font-family: var(--display); font-weight: 900; font-size: 120px; color: var(--brick); padding: 0 4px; line-height: 1; text-shadow: 0 2px 16px hsl(var(--shadow-color) / .5); } /* ---- REPEAT (Force-of-Nature subscription box: tab + header + oval seal + benefit strip) ---- */ /* stronger top gradient so the header reads over the (light) box photo */ .ad[data-layout="repeat"] .ad__scrim--top { background: linear-gradient(to bottom, rgba(20,13,6,.88) 0%, rgba(20,13,6,.4) 28%, transparent 48%); } .ad__rep-hd { gap: 22px; padding-top: 7%; align-items: center; text-align: center; left: 0; right: 0; } .ad__rep-tab { font-family: var(--sans); font-weight: 800; font-size: 27px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); background: rgba(247,241,230,.14); border: 1px solid rgba(247,241,230,.3); padding: 9px 22px; border-radius: 6px; } .ad__rep-hd .ad__tag { text-align: center; max-width: 96%; text-shadow: 0 3px 26px hsl(var(--shadow-color) / .75), 0 1px 4px hsl(var(--shadow-color) / .6); } .ad__rep-seal { position: absolute; z-index: 6; left: 7%; bottom: 16%; display: grid; place-items: center; text-align: center; width: 320px; height: 320px; border-radius: 999px; background: var(--brick); color: var(--bone); font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1.05; padding: 30px; transform: rotate(-8deg); box-shadow: 0 16px 40px hsl(var(--shadow-color) / .55); } .ad__rep-seal .accent { color: var(--bone); display: block; font-size: 72px; } .ad__rep-strip { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background: var(--char); color: var(--bone); text-align: center; font-family: var(--sans); font-weight: 800; font-size: 32px; letter-spacing: .04em; text-transform: uppercase; padding: 28px 20px; } /* ---- OFFER (ButcherBox-style promo: value stack + steak hero + CTA pill) — PLACEHOLDER for Mark ---- */ .ad[data-layout="offer"] { background: var(--paper); color: var(--ink); } .ad__offer-hd { position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: 6% 6% 0; text-align: center; } .ad__offer-brand { font-family: var(--sans); font-weight: 800; font-size: 30px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; margin-bottom: 14px; } .ad__offer-hd .ad__tag { color: var(--brick); text-align: center; max-width: 100%; font-size: 96px; } .ad__offer-hd .ad__tag .accent { color: var(--ink); } .ad__offer-body { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; gap: 24px; padding: 30% 6% 12%; } .ad__offer-stack { flex: 0 0 38%; display: flex; flex-direction: column; gap: 30px; } .ad__offer-item b { display: block; font-family: var(--display); font-weight: 900; font-size: 86px; line-height: .9; color: var(--brick); } .ad__offer-item i { display: block; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 30px; letter-spacing: .02em; } .ad__offer-cta { margin-top: 10px; align-self: flex-start; font-family: var(--sans); font-weight: 800; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; color: var(--bone); background: var(--brick); padding: 20px 30px; border-radius: 999px; } .ad__offer-hero { flex: 1; align-self: stretch; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px hsl(var(--shadow-color) / .35); } .ad__offer-img { width: 100%; height: 100%; object-fit: cover; } .ad__offer-note { position: absolute; z-index: 5; left: 0; right: 0; bottom: 4%; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 22px; opacity: .55; } /* ============================================================================ FIDELITY — storyboard (flat, fast) strips the cinematic treatment ========================================================================== */ .ad[data-fidelity="storyboard"] .ad__product { filter: none; transform: none; } .ad[data-fidelity="storyboard"]::after { display: none; } /* no grain */ .ad[data-fidelity="storyboard"] .ad__scrim { opacity: .5; } /* ============================================================================ CAROUSEL — frames laid out as a strip inside one .ad (export splits them) ========================================================================== */ .ad--carousel { display: flex; flex-direction: column; } /* ============================================================================ BOARD (index.html) — grid of uniform scaled tiles + caption chips ========================================================================== */ body.board { background: #0e0d0b; color: var(--bone); font-family: var(--sans); padding: 0 0 110px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* sticky, translucent header bar — modern editorial */ .board__head { position: sticky; top: 0; z-index: 30; padding: 26px 44px 20px; background: rgba(14,13,11,.78); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(247,241,230,.07); } .board__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .board__brand { display: flex; align-items: baseline; gap: 14px; } .board__mark { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.01em; } .board__tag { font-weight: 600; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--wheat); opacity: .75; padding-left: 14px; border-left: 1px solid rgba(247,241,230,.16); } .board__head .sub { opacity: .4; margin-top: 11px; font-size: 12px; letter-spacing: .015em; font-variant-numeric: tabular-nums; } /* minimalist toggle switch */ .board__toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); opacity: .75; cursor: pointer; user-select: none; } .board__toggle input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: #211c16; border: 1px solid #3a3228; position: relative; cursor: pointer; transition: background .18s, border-color .18s; flex: none; } .board__toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--bone); transition: transform .18s; } .board__toggle input:checked { background: var(--pasture); border-color: var(--pasture); } .board__toggle input:checked::after { transform: translateX(18px); } .board__filters { display: flex; gap: 4px; padding: 22px 44px 28px; flex-wrap: wrap; } .board__filters button { font-family: var(--sans); font-weight: 500; font-size: 12.5px; letter-spacing: .015em; color: var(--bone); opacity: .5; background: transparent; border: 1px solid transparent; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: opacity .15s, background .15s, border-color .15s; } .board__filters button:hover { opacity: .85; background: rgba(247,241,230,.05); } .board__filters button[aria-pressed="true"] { opacity: 1; background: rgba(247,241,230,.09); border-color: rgba(247,241,230,.14); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(372px, 1fr)); gap: 44px 34px; align-items: start; padding: 0 44px; } /* creative-only view — toggle hides the simulated ad frame, leaving just the creative */ body.creative-only .adcard__hd, body.creative-only .adcard__primary, body.creative-only .adcard__link { display: none; } body.creative-only .adcard { background: transparent; box-shadow: none; border-radius: 14px; } body.creative-only .adcard__creative { border-radius: 14px; } /* ---- Meta-style ad UNIT card (creative + primary copy + link card + CTA) ---- */ .adcard { background: #fff; color: #1c1e21; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-family: var(--sans); } .adcard__hd { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; } /* number + ref label OUTSIDE the ad card */ .cell { display: flex; flex-direction: column; } .cell__label { font: 600 13px/1.3 var(--sans); color: var(--bone); opacity: .82; letter-spacing: .01em; margin: 0 2px 9px; } .cell__num { font-family: var(--display); font-weight: 900; font-size: 16px; color: var(--brick); margin-right: 6px; } .adcard__avatar { width: 40px; height: 40px; border-radius: 999px; flex: none; background: var(--char); color: var(--bone); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 19px; } .adcard__brand { font-weight: 700; font-size: 14px; } .adcard__spon { font-size: 12px; color: #65676b; } .adcard__primary { padding: 0 14px 12px; font-size: 14px; line-height: 1.45; } .adcard__primary .accent { color: var(--brick); font-weight: 600; } .adcard__creative { position: relative; width: 100%; background: #000; overflow: hidden; } /* scalers MUST be block — transform: scale() is ignored on inline elements (the "creative doesn't fit" bug) */ .adcard__scaler, .cara__scaler { display: block; transform-origin: top left; } a.adcard__scaler { color: inherit; text-decoration: none; } /* link card below the creative */ .adcard__link { display: flex; align-items: center; gap: 12px; background: #f0f2f5; padding: 12px 14px; } .adcard__linktext { min-width: 0; flex: 1; } .adcard__domain { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #65676b; } .adcard__headline { font-weight: 700; font-size: 15px; line-height: 1.25; } .adcard__cta { flex: none; font-weight: 700; font-size: 13px; cursor: default; background: #e4e6eb; color: #1c1e21; border: none; border-radius: 6px; padding: 10px 15px; white-space: nowrap; } /* internal review meta (NOT part of the ad) */ .adcard__meta { display: flex; align-items: center; gap: 8px; padding: 10px 14px 14px; font-size: 11px; color: #8a8d91; border-top: 1px solid #e4e6eb; } .adcard__meta .chip { width: 8px; height: 8px; border-radius: 999px; flex: none; } .adcard__meta .fmt { margin-left: auto; font-variant-numeric: tabular-nums; } .adcard__meta b { color: #444; font-weight: 700; } /* ---- carousel: real swipeable scroll-snap strip ---- */ .cara { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .cara::-webkit-scrollbar { display: none; } .cara__frame { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; } .cara__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 2; pointer-events: none; } .cara__dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: 0 0 5px rgba(0,0,0,.6); } .cara__dots i.on { background: #fff; } .cara__hint { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,.42); color: #fff; border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; font-size: 16px; pointer-events: none; } /* clickable carousel arrows */ .cara__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border: none; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .cara__nav:hover { background: rgba(0,0,0,.72); } .cara__nav.prev { left: 10px; } .cara__nav.next { right: 10px; } .cara__nav[disabled] { opacity: 0; pointer-events: none; } /* ---- video creative (a real