/** Shopify CDN: Minification failed Line 2276:11 Expected identifier but found whitespace Line 2276:20 Unexpected ";" Line 5837:0 Unexpected "}" **/ /* lcg2-lander.css — the L-Carnitine/GLP-1 **v2** lander's stylesheet. Copy of lcg-lander.css taken 2026-09-09 when page.lcarnitine-glp1-2 was created. It is a separate file on purpose: v2 exists to diverge, and a shared sheet would push every v2 style change onto the live v1 lander. Both scope under #fonLcg and only one ever loads per page (see the template.suffix case in snippets/fon-scripts-header.liquid). Original header follows. lcg-lander.css — the L-Carnitine/GLP-1 lander's stylesheet. BUILT BY HAND FROM THE SECTION, and it lives here for one reason: Shopify rejects any template over 256KB, and the section had reached 267.5KB with this 146KB of CSS inline. That rejection is silent from git's side - the push succeeds, the theme simply keeps serving the previous version - so if the lander ever stops updating, check the size before anything else. The font and icon URLs were `asset_url` filters when this was inline. A stylesheet served out of assets/ resolves relative url() against its own folder, which is where all of these files are, so the bare filenames below are equivalent. Do not "fix" them into absolute CDN paths: those go stale when the theme changes. Loaded from snippets/fon-scripts-header.liquid for template.suffix lcarnitine-glp1, in the head, so the page never paints unstyled. */ /* ========================================================================== FON — "L-CARNITINE IS THE NEW GLP-1" CAMPAIGN LANDING PAGE Tokens: type, palette, surfaces, components. EVERY VALUE IN THIS FILE IS READ OUT OF THE LIVE FON THEME EXPORT (theme_export__usefon-com-fon-shopify-theme-main__27JUL2026-1051pm). Nothing here is a new brand decision. Sources are cited per token. Tomato Grotesk assets/font-tomato.css — FON's licensed brand face, nine cuts. Served from usefon.com's own CDN rather than committed here; the live site already serves these exact files publicly. #0171E3 THE action colour. It is the button fill in fon-index-2026.css, onefit-all-jan-2026.css (.fon-button-dark), fon-conquesting*.css (.pre-heading) and the "sachets" badge in product-info-onefit-all-jan-2026.liquid. Every CTA on this page is this blue and nothing else is. #3E3E3E body/heading grey, fon-index-2026.css h2 + .fon-button-light #FFFFFC #F9F8F7 the homepage's WARM neutral family, from the #F5F3F1 #F2F1EE design-d sections that templates/index.json renders #DAD9D5 (index-design-d-hero, design-d-faqs, design-d-complete-the-quiz). See SURFACES below. 1300px settings_data.json page_width radius 2-4px .fon-button 2px, .fon-button-dark 4px. The theme's global block_border_radius is 0; campaign sections soften to 4-10px. This page stays in that band. THE PAGE IS WARM, NOT GREY. FON's homepage runs cream and bone — #FFFFFC through #DAD9D5 — and the ad creative for this campaign is shot on the same pale warm ground. The first build of this file used #FAFAFA / #F6F6F8, the cool greys from the other half of the theme, and the result read subtly wrong: cool grey panels sitting on warm photography, with blue-black hairlines over cream. Every surface, rule and edge below is now warm-tinted to match. THE BAND IS A SURFACE, NOT A SECOND ACCENT. --sand carries the ad creative's tone into the page so the visitor recognises where they landed. But a second ACCENT colour alongside FON blue would give the page two competing things that look clickable and blunt the CTA — so --sand is only ever a band the page sits on, and #0171E3 stays the only thing on the page that means "click". ========================================================================== */ /* -------------------------------------------------------------------------- 0. TYPE — Tomato Grotesk, registered as ONE family with real weights. The theme declares nine separate font-families ("Tomato Grotesk Medium" as its own family name, etc). That works in Liquid where each rule names its cut, but it makes `font-weight: 500` a no-op. Registered properly here so the weight axis behaves and there is one family name on the page. -------------------------------------------------------------------------- */@font-face { font-family:"Tomato Grotesk"; src:url("Tomato-Grotesk-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }@font-face { font-family:"Tomato Grotesk"; src:url("Tomato-Grotesk-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }@font-face { font-family:"Tomato Grotesk"; src:url("Tomato-Grotesk-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }@font-face { font-family:"Tomato Grotesk"; src:url("Tomato-Grotesk-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }@font-face { font-family:"Tomato Grotesk"; src:url("Tomato-Grotesk-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }#fonLcg { --font: "Tomato Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* --- Ink scale, straight from the theme --- */ --ink: #131210; /* settings text_color is #000000, warmed and softened so large display type sits in the cream rather than on it. */ --ink-900: #1A1A1A; /* settings product_card_text_color / checkout_button_color */ --grey-700: #3E3E3E; /* fon-index-2026.css h2, .fon-button-light label */ --grey-500: #707170; /* fon-section-onefit-all-jan-26.liquid */ --grey-400: #8D8B8B; /* onefit-all-reviews.liquid secondary label */ --grey-300: #AFAFAF; /* fon-index-2026.css .pre-heading */ /* --- Surfaces: THE HOMEPAGE'S WARM NEUTRALS --- The first pass built these out of #FAFAFA / #F6F6F8, the cool greys in fon-index-2026.css. That was the wrong half of the theme. The homepage template (templates/index.json) also renders index-design-d-hero, design-d-faqs and design-d-complete-the-quiz, and those sections run an entirely warm family — which is what the site actually looks like, and what the ad creative for this campaign is shot on. Cool grey next to warm cream is the specific thing that made the page feel slightly "off". Every value below is lifted from those sections verbatim, except --sand, which is noted. */ /* EVERY LIGHT BAND IS WHITE, ON REQUEST. These were the theme's four warm neutrals — #FFFFFC, #F9F8F7, #F2F1EE and the sand band below — and the page alternated between them so each section read as its own surface. On a phone that reads as beige-on-beige: the steps between them are two or three points of luminance, which is not enough to separate a section but is more than enough to make the whole page look slightly dirty next to a bright reference lander. All four collapse to white. The page keeps its structure from the CARD edges instead of from the bands: every panel, option and tile already carries a hairline and most carry a shadow, and against white those finally do visible work. --stone stays warm — it is only ever a rule or an edge, never a fill, and a warm hairline on white reads as part of the design where a grey one reads as a border. */ --paper: #FFFFFF; --mist: #FFFFFF; --fog: #FFFFFF; --stone: #DAD9D5; /* design-d — the warm mid-grey, used for rules/edges */ /* THE CAMPAIGN BAND. Sits between --fog (#F2F1EE) and --stone (#DAD9D5) on the theme's own warm line, so it is a step of the homepage palette rather than a new colour. It is what carries the ad creative's pale sage-cream into the page. NOT an accent — see the header note. */ --sand: #FFFFFF; /* Still warm, and still only a backing plate: this sits BEHIND the hero photograph, where it is never seen except as the letterbox around an image that has not painted yet. White there would flash white-on-white. */ --sand-deep: #F2F0EC; /* --- THE action colour --- #EAF6AB, sampled off the RENDERED usefon.com homepage, where it is the announcement bar and the "Get Started" button — the site's only CTA fill. The first build used #0171E3 here, taken from fon-index-2026.css and onefit-all-jan-2026.css. Those files are real, but they are older campaign sections; blue is not what the site currently ships. Measured on the live page: bg rgb(234,246,171), label rgb(51,51,51) / rgb(63,63,63), Tomato Grotesk SemiBold 13-14px, radius 3px in the header and 100px on the larger pill buttons. LIME IS A HIGHLIGHT, NOT THE ACTION COLOUR, AND NOT TEXT. A pass that put lime on the buttons AND the ticks AND the step discs AND the numerals AND the marquee AND a full section band left the page with no hierarchy — eight things shouting the same colour reads as mess, not as branding. Lime now appears in exactly four places, and all four are the same idea, 'this is the number that matters': the promo strip the brand signature, as on usefon.com the 1,000 figure the page's single loudest fact the L-Carnitine chip the same fact, on the product the 'Best value' tag the one choice being recommended Everything else — buttons, ticks, discs, rules, numerals — is ink. At 1.2:1 on white lime can never carry text anyway; it only works as a fill behind something near-black, or reversed out on ink at 15:1. */ --blue: #0171E3; /* live PDP body CTA */ --blue-dk: #0159B4; --lime: #EAF6AB; --lime-dk: #DFEE93; /* hover. The live site hovers with a lift and a shadow only; a tone step is added so the change does not depend on motion alone. */ --lime-ink: #333333; /* the live label colour, 11.6:1 on lime */ /* Rating stars. Ink stars read as glyphs; a rating reads as a rating when it is gold, which is the convention every review platform uses. This is the theme's own gold (#F0C417 in the design-d sections), not a new colour. */ --star: #F0C417; --star-dk: #C79F0F; /* the same hue darkened for small 12px star rows, where the light gold alone is too faint on cream */ /* --- Geometry: the theme's own button radii --- */ --r-sm: 2px; /* .fon-button */ --r: 4px; /* .fon-button-dark, .fon-button-light */ --r-md: 10px; /* campaign card radius band */ --r-lg: 16px; --r-pill: 999px; /* --- Space --- */ /* THE MOBILE FLOORS WERE SET BY A DESKTOP EYE. At 390px a 64px band top and bottom put 128px of nothing between every section, and over eleven bands that is a screen and a half of empty page — which is most of why the phone rendering read as "too tall" beside the reference lander, which runs ~40px at this width. Only the floors move; the clamp ceilings are untouched, so desktop is exactly as it was. */ --sect-y: clamp(48px, 5.4vw, 84px); --sect-y-lg: clamp(44px, 6.8vw, 106px); --sect-y-sm: clamp(34px, 4vw, 60px); --gutter: clamp(20px, 5vw, 56px); --shell: 1300px; /* settings page_width */ --shell-narrow: 940px; /* --- Elevation, from .fon-button / .fon-button-light --- */ --shadow-btn: 0 4px 4px 0 rgba(0, 0, 0, .10); --lcg-shadow-sm: 0 2px 8px rgba(16, 16, 16, .06); --lcg-shadow: 0 5px 15px 0 rgba(76, 76, 76, .14); --shadow-lg: 0 18px 44px -16px rgba(16, 16, 16, .22); /* --- Motion. The brief says no unnecessary animation: one easing, short durations, and reveals only. Nothing loops, nothing bounces. --- */ --ease: cubic-bezier(.22, 1, .36, 1); --d-fast: .22s; --d: .5s; } /* -------------------------------------------------------------------------- 1. SURFACES Each band sets the same variable names so components never need to know what they are sitting on — one .btn, one .card, one .rule for the whole page. -------------------------------------------------------------------------- */ /* All rules and edges are warm-tinted (a brown-black, not a blue-black) so a hairline over cream reads as part of the surface rather than a grey line pasted on top of it. */#fonLcg, #fonLcg .s-paper { --surface: var(--paper); --fg: var(--ink); --fg-mut: var(--grey-700); --fg-soft: var(--grey-500); --rule: rgba(32, 28, 20, .13); --rule-str: rgba(32, 28, 20, .27); --card: #FFFFFF; --card-edge: rgba(32, 28, 20, .11); --chip: var(--fog); }#fonLcg .s-mist { --surface: var(--mist); --fg: var(--ink); --fg-mut: var(--grey-700); --fg-soft: var(--grey-500); --rule: rgba(32,28,20,.13); --rule-str: rgba(32,28,20,.27); --card: #FFFFFC; --card-edge: rgba(32,28,20,.11); --chip: #FFFFFC; }#fonLcg .s-fog { --surface: var(--fog); --fg: var(--ink); --fg-mut: var(--grey-700); --fg-soft: var(--grey-500); --rule: rgba(32,28,20,.14); --rule-str: rgba(32,28,20,.28); --card: #FFFFFC; --card-edge: rgba(32,28,20,.12); --chip: #FFFFFC; } /* SAND — the campaign band. Carries the ad creative into the page. */#fonLcg .s-sage { --surface: var(--sand); --fg: var(--ink); --fg-mut: #423C31; /* 9.1:1 on sand — the body grey warmed to the band so copy doesn't read cold against it */ --fg-soft: #665F51; /* 5.2:1 */ --rule: rgba(38, 32, 20, .15); --rule-str: rgba(38, 32, 20, .3); --card: #FFFFFC; --card-edge: rgba(38, 32, 20, .13); --chip: rgba(255, 255, 252, .66); } /* INK — the two dark bands: "Why it matters" and the closing CTA. The CTA stays blue on ink: #0171E3 is 3.5:1 on #101010 as a fill, and it carries a white label at 4.9:1, so the button is legible and the page never has to invent a second action colour for dark. */#fonLcg .s-ink { --surface: #17150F; --fg: #FFFFFF; --fg-mut: rgba(255, 255, 255, .82); --fg-soft: rgba(255, 255, 255, .60); --rule: rgba(255, 255, 255, .18); --rule-str: rgba(255, 255, 255, .40); --card: #1A1A1A; --card-edge: rgba(255, 255, 255, .16); --chip: rgba(255, 255, 255, .08); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */#fonLcg *, #fonLcg *::before, #fonLcg *::after { box-sizing: border-box; }html { scroll-behavior: smooth; /* promo bar + sticky header + air */ scroll-padding-top: 108px; -webkit-text-size-adjust: 100%; }#fonLcg { margin: 0; /* THE WASH BELONGS TO THE PAGE, NOT TO ONE SECTION. It used to be painted on .hero, centred at 92% of that section’s own height with a 42% radius — so the ellipse was still around 40% alpha when the hero’s box ended, and the section boundary sliced it into a hard horizontal line directly under the CTA. Painting it on the wrapper instead makes it ONE continuous fill across the hero and the top of the listicle: there is no boundary left for it to be cut against. Sized in vh/vw, not %, so the glow always belongs to the first screenful rather than to whatever height the hero happens to be, and the ellipse is inscribed (centre 62vh, radius 62vh) so it reaches zero alpha at the top edge as well. It bleeds off the left and right of the viewport, where there is no adjacent surface to draw an edge against. */ background: radial-gradient(126vw 62vh at 0% 62vh, rgba(234, 246, 171, .62) 0%, rgba(234, 246, 171, .34) 34%, rgba(234, 246, 171, .12) 63%, rgba(234, 246, 171, 0) 100%), var(--paper); background-repeat: no-repeat; color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Room for the sticky mobile buy bar so the footer is never trapped under it. */ padding-bottom: env(safe-area-inset-bottom); }#fonLcg img, #fonLcg svg, #fonLcg video { display: block; max-width: 100%; }#fonLcg a { color: inherit; text-decoration: none; }#fonLcg button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }#fonLcg table { border-collapse: collapse; width: 100%; }#fonLcg .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }#fonLcg .shell--narrow { max-width: var(--shell-narrow); }#fonLcg .section { position: relative; padding-block: var(--sect-y); background: var(--surface); color: var(--fg); }#fonLcg .section--tall { padding-block: var(--sect-y-lg); }#fonLcg .section--tight { padding-block: var(--sect-y-sm); }#fonLcg .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }#fonLcg :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }#fonLcg .s-ink :focus-visible { outline-color: #FFFFFF; } /* -------------------------------------------------------------------------- 3. TYPE SCALE Seven sizes, no one-offs. The theme's own scale is Liquid-driven (--text-h0..h6 in css-variables.liquid) and lands at 2.5rem/3.25rem/4rem for h0 across its three breakpoints; these clamps track that curve continuously instead of stepping at 700/1400px. -------------------------------------------------------------------------- */ /* Kickers were 600 in the soft grey, which put them a whisker away from invisible on cream. Bold and one step darker: a kicker is a signpost, and a signpost nobody reads is just noise above a heading. */#fonLcg .eyebrow, #fonLcg .micro { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mut); margin: 0; }#fonLcg h1, #fonLcg h2, #fonLcg h3, #fonLcg h4, #fonLcg .d1, #fonLcg .h2, #fonLcg .h3, #fonLcg .h4, #fonLcg .stmt { margin: 0; text-wrap: balance; } /* HEADINGS ARE BOLD, NOT MEDIUM. Every heading on the page ran at 500 — Tomato Grotesk Medium, which is the weight the theme's own desktop hero uses. On a 1440px screen with a 70px headline that is plenty. At 390px, where this page actually gets read, a 30px heading in Medium sitting over 15.5px body copy in Regular is barely a step at all: two greys of type, one slightly larger, and no sense anywhere of arriving at something. Bold (700) is a licensed cut of the same family and is already being loaded. It costs nothing, and it is what makes a heading land on a phone. Tracking is pulled tighter at the same time — heavier letterforms need less air between them or the word starts to spread. */#fonLcg .d1 { font-size: clamp(38px, 7.4vw, 82px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }#fonLcg .h2 { font-size: clamp(28px, 3.7vw, 46px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; } /* THE OFFER HEADLINE IS THE ONE THAT OPENS THE SELL, so it is set above the section rule rather than level with it - Akaash asked for three to five steps and this is four on the same 1.15 scale the page already uses: 46 -> 53 -> 61 -> 70 on desktop, 28 -> 38 on the phone. The line is broken by a
in the markup, so a bigger size costs no extra wrapping. Tracking tightens as it grows, which is the rule the d1 above already follows. */#fonLcg .h2--xl { font-size: clamp(38px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -.035em; }#fonLcg .head--center .h2--xl { max-width: 16ch; } /* "L-Carnitine" and "GLP-1" carry hyphens, and a browser will happily break a line at one — which produced "Nobody should buy L- / Carnitine on its own." in a centred headline. Every occurrence inside a heading is wrapped in this. */#fonLcg .nb { white-space: nowrap; }#fonLcg .h3 { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.022em; }#fonLcg .h4 { font-size: clamp(16px, 1.2vw, 18px); font-weight: 700; line-height: 1.32; letter-spacing: -.015em; } /* The one statement line a section may lead with. */#fonLcg .stmt { font-size: clamp(21px, 2.4vw, 32px); font-weight: 500; line-height: 1.24; letter-spacing: -.022em; }#fonLcg .body { margin: 0; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.62; color: var(--fg-mut); text-wrap: pretty; }#fonLcg .body--lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.56; }#fonLcg .body--sm { font-size: 15px; line-height: 1.58; }#fonLcg .body + .body { margin-top: 1em; }#fonLcg .num { font-weight: 600; letter-spacing: -.04em; line-height: .94; font-variant-numeric: tabular-nums; }#fonLcg .num--xl { font-size: clamp(46px, 6.4vw, 92px); }#fonLcg .num--lg { font-size: clamp(30px, 3.4vw, 48px); } /* Section head: eyebrow + heading + one supporting line. Two measures, not one. A heading set to the same width as its body copy wraps into a paragraph-shaped block and stops reading as a headline, so the heading gets ~24ch and the supporting line ~50ch. Centred heads are narrower again — a centred line longer than ~26ch has no fixed left edge for the eye to return to. */#fonLcg .head { margin-bottom: clamp(30px, 3.4vw, 52px); }#fonLcg .head .eyebrow { margin-bottom: 13px; color: var(--fg-soft); }#fonLcg .s-ink .head .eyebrow { color: rgba(255, 255, 255, .6); } /* 6.8:1 on ink; #0171E3 is 3.5:1 and fails as text */#fonLcg .head .h2 { max-width: 24ch; }#fonLcg .head .h2 + .body { margin-top: 16px; max-width: 50ch; }#fonLcg .head--center { margin-inline: auto; text-align: center; max-width: 780px; }#fonLcg .head--center .h2 { max-width: 22ch; margin-inline: auto; }#fonLcg .head--center .body { margin-inline: auto; max-width: 54ch; } /* -------------------------------------------------------------------------- 4. BUTTONS — the theme's .fon-button family 49px tall, 4px radius, Medium label, soft drop shadow, lift on hover. -------------------------------------------------------------------------- */#fonLcg .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center; white-space: nowrap; transition: background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } /* PRIMARY — .fon-button-dark. The only thing on the page that is this blue. */#fonLcg .btn--primary { background: var(--blue); border: 1px solid var(--blue); color: #FFFFFF; box-shadow: 0 4px 14px -4px rgba(1, 113, 227, .4); }#fonLcg .btn--primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(1, 113, 227, .48); } /* SECONDARY — .fon-button / .fon-button-light: white card with a hairline. */#fonLcg .btn--ghost { background: var(--card); border: 1px solid var(--rule-str); color: var(--fg); box-shadow: var(--shadow-btn); }#fonLcg .btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, .16); }#fonLcg .s-ink .btn--ghost { background: transparent; border-color: var(--rule-str); color: #FFFFFF; box-shadow: none; }#fonLcg .s-ink .btn--ghost:hover { background: rgba(255, 255, 255, .08); }#fonLcg .btn--wide { width: 100%; }#fonLcg .btn--lg { min-height: 58px; font-size: 15px; padding-inline: 38px; } /* THE HERO CTA WAS THE PAGE'S ONLY HORIZONTAL OVERFLOW, at 320px. `.btn` is `white-space: nowrap`, which is right for a pill, and the hero CTA carries the longest label on the page ("Shop OneFit® · 1,000mg per serve") inside 38px of padding either side. On a 320px screen that is wider than the column, so the label pushed the document 24px wide and the whole page could be dragged sideways. It has been there since before the campaign copy landed on the button. Below 380px the large buttons give back some padding and are allowed to take a second line. A CTA on two lines is ordinary; a page that scrolls sideways on the smallest phones in the traffic is not. */@media (max-width: 379.98px) {#fonLcg .btn--lg { padding-inline: 16px; white-space: normal; } } /* Text link with a rule that extends on hover. */#fonLcg .link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }#fonLcg .link:hover { gap: 13px; }#fonLcg .s-ink .link { color: #FFFFFF; } /* -------------------------------------------------------------------------- 5. PARTS — chip, card, rule, plate -------------------------------------------------------------------------- */#fonLcg .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--chip); border: 1px solid var(--card-edge); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-mut); white-space: nowrap; }#fonLcg .card { position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); }#fonLcg .hr { height: 1px; background: var(--rule); border: 0; margin: 0; } /* One photo treatment for the whole page. Ratio is set per use; the image is absolutely positioned so an intrinsic size can never drive layout height. */#fonLcg .plate { display: block; position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--fog); aspect-ratio: var(--ar, 3 / 4); }#fonLcg .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }#fonLcg .plate--env { --ar: 16 / 9; }#fonLcg .plate--sq { --ar: 1 / 1; }#fonLcg .plate--tall { --ar: 3 / 4; }#fonLcg .plate--contain { background: none; }#fonLcg .plate--contain img { object-fit: contain; } /* -------------------------------------------------------------------------- 6. REVEAL — the page's only motion, plus a fail-safe. Content starts hidden ONLY once page.js has confirmed it is running and has set .anim on . If the script never runs, everything renders visible. -------------------------------------------------------------------------- */.anim .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d-i, 0ms); }.anim .rv.in { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }#fonLcg *, #fonLcg *::before, #fonLcg *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }.anim .rv { opacity: 1 !important; transform: none !important; }#fonLcg .btn:hover { transform: none; } } /* ========================================================================== FON — L-CARNITINE / GLP-1 CAMPAIGN LANDING PAGE Section styles. Tokens and components live in tokens.css. MOBILE FIRST, AND NOT AS A SLOGAN. Traffic arrives from paid social, so the 390px rendering is the real design and the desktop grid is the enhancement. Every layout below starts as one column and only earns a second at a breakpoint where the content genuinely needs it. THE PAGE FOLLOWS THE REFERENCE'S INFORMATION ARCHITECTURE, NOT ITS LOOK: hero with audience badge + proof metrics → one numbered listicle carrying the whole education load with the CTA re-injected between beats → aggregate rating + UGC gallery + "what to expect" timeline → product configurator + pricing + value stack + trust badges → collapsed reference stack → FAQ → close. The visual system is FON's throughout. ========================================================================== */#fonLcg .skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px; background: var(--ink); color: #fff; font-weight: 600; }#fonLcg .skip:focus { left: 8px; top: 8px; } /* -------------------------------------------------------------------------- PROMO BAR + HEADER -------------------------------------------------------------------------- */ /* ---- THE PROMO STRIP ------------------------------------------------------- IT MOVES AT EVERY WIDTH NOW, AND IT LOOPS WITHOUT A SEAM. The old strip ran `padding-left: 100%` and translated by -100%, which is the "slide in from the right, exit left" trick: the content crosses the screen, then the bar is empty for a beat before it starts again. It also stopped moving entirely above 760px and simply centred, so on the widest screens the one animated element on the page was static. Two identical halves and a -50% translate is the seamless version. The moment the first half has fully left, the second is exactly where the first started, so there is no gap and no jump. Each half repeats the four promises three times so a half is ~2000px — wider than the viewport at any size this is seen at, which is the condition for the loop never showing its own end. Each promise now carries the icon FON uses for it on its own PDP, so the bar reads as four guarantees rather than as one long sentence of grey text. */#fonLcg .promo { background: var(--lime); color: var(--lime-ink); overflow: hidden; display: flex; align-items: center; height: 38px; border-bottom: 1px solid rgba(38, 32, 20, .1); }#fonLcg .promo__track { display: flex; width: max-content; animation: promo-scroll 60s linear infinite; will-change: transform; }#fonLcg .promo__half { display: flex; align-items: center; }#fonLcg .promo__i { display: inline-flex; align-items: center; gap: 7px; padding-inline: 18px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; } /* The separator is drawn rather than typed: a "·" between items is one more thing to keep in the markup twenty-four times, and a border cannot fall out of sync with the repeat count. */#fonLcg .promo__i + .promo__i { border-left: 1px solid rgba(38, 32, 20, .22); }#fonLcg .promo__half + .promo__half .promo__i:first-child { border-left: 1px solid rgba(38, 32, 20, .22); }#fonLcg .promo__i img { width: 15px; height: 15px; flex: none; opacity: .8; }@keyframes promo-scroll {from { transform: translateX(0); }to { transform: translateX(-50%); } } /* Pause on hover so the bar can actually be read, and stop it entirely for anyone who has asked for less motion — a permanently moving strip pinned to the top of the page is exactly what that setting exists for. */#fonLcg .promo:hover .promo__track { animation-play-state: paused; }@media (prefers-reduced-motion: reduce) {#fonLcg .promo__track { animation: none; }#fonLcg .promo__half + .promo__half { display: none; }#fonLcg .promo { justify-content: center; } }#fonLcg .hdr { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 252, .93); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid rgba(32, 28, 20, .1); }#fonLcg .hdr__in { display: flex; align-items: center; gap: 20px; min-height: 62px; }#fonLcg .hdr__logo { flex: none; }#fonLcg .hdr__logo img { width: 112px; height: auto; }#fonLcg .hdr__proof { display: none; margin: 0 auto 0 0; align-items: center; gap: 7px; font-size: 13px; color: var(--grey-700); white-space: nowrap; }#fonLcg .hdr__proof b { font-weight: 600; color: var(--ink); }#fonLcg .hdr__stars { letter-spacing: .08em; color: var(--star-dk); font-size: 12px; }#fonLcg .hdr__sep { color: var(--rule-str); }#fonLcg .hdr__nav { display: none; gap: 24px; font-size: 14px; font-weight: 500; }#fonLcg .hdr__nav a { color: var(--grey-700); padding-block: 6px; border-bottom: 1px solid transparent; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }#fonLcg .hdr__nav a:hover { color: var(--ink); border-color: var(--ink); }#fonLcg .hdr__cta { margin-left: auto; min-height: 40px; padding: 9px 18px; font-size: 13px; background: var(--lime); border-color: var(--lime); color: var(--lime-ink); box-shadow: none; }#fonLcg .hdr__cta:hover { background: var(--lime-dk); border-color: var(--lime-dk); }@media (min-width: 900px) {#fonLcg .hdr__in { min-height: 70px; }#fonLcg .hdr__logo img { width: 132px; }#fonLcg .hdr__nav { display: flex; margin-left: auto; }#fonLcg .hdr__cta { margin-left: 0; min-height: 44px; padding: 11px 22px; } } /* The proof line only appears where all four items fit without crowding. Below 1180px the nav and the CTA are the priority — proof is still in the hero. */@media (min-width: 1180px) {#fonLcg .hdr__proof { display: flex; margin-left: 26px; }#fonLcg .hdr__nav { margin-left: auto; margin-right: 26px; } } /* -------------------------------------------------------------------------- THE GRADIENT WASH Taking every band to white fixed the "dirty beige" problem and created a new one: eleven sections of identical #FFFFFF with no edge between any of them, so the page reads as one continuous sheet and nothing announces that a new argument has started. The reference lander solves this without any beige at all — its hero is white with a barely-there tint of its own brand green washing in from one corner, so the surface has a direction and a temperature while still reading as white. This is that, in lime instead of green. The strongest stop is rgba(234,246,171,.42), which resolves to about #FAFCEF: roughly two points of luminance off white, well under where it starts to look coloured, and enough to give the fold a warm corner and a cool one. ONLY THE SECTIONS THAT OPEN AND CLOSE THE SALE GET IT. A wash on every band would be the beige problem again with an extra step. The hero takes the strongest, the offer block a lighter one from the opposite corner, and everything between stays flat white — so the two that are tinted read as the page's two big moments rather than as a texture. -------------------------------------------------------------------------- */ /* ONE SOFT CIRCLE, NOT A WASH ACROSS THE WHOLE BAND. First attempt layered a radial over a full-width linear on the hero, put a second on the offer block and a third on the footer — which is a tinted page with white in the middle, the exact beige problem in a different colour. The reference does one thing: a single soft glow bleeding out of one corner of the fold, and flat white everywhere else. So: one circle, hero only. It sits off the bottom-left, fades to nothing well inside the section, and never touches an edge — a gradient that reaches a border draws the border, which is what made the first version read as a panel rather than as light. The circle itself now lives on #fonLcg so it can cross the section seam — see the wrapper rule. The hero and the listicle go transparent to let it through; both surfaces are #FFFFFF, so dropping the fill costs nothing anywhere the wash has already faded. */ #fonLcg .hero { background: transparent; } /* -------------------------------------------------------------------------- 1 · HERO On mobile the artwork sits UNDER the CTA, not above it: the headline, the correction and the button are what must be in the first screenful, and a portrait photograph above them would push the button below the fold. -------------------------------------------------------------------------- */ /* WITH THE BANDS ALL WHITE, PADDING IS THE ONLY THING BETWEEN SECTIONS — AND TWO SETS OF IT STACK. The hero's bottom padding met the listicle's top padding and then beat 01's own, which was ~98px of empty white between the risk line and the first numeral. That gap existed to separate two DIFFERENT coloured bands; with both white it is just a hole in the page, and on a phone it reads as the content having ended. Halved here, and the listicle's own top padding does the rest. */#fonLcg .hero { padding-top: clamp(26px, 3.6vw, 46px); padding-bottom: clamp(18px, 2.6vw, 40px); }#fonLcg .hero__in { display: grid; gap: clamp(34px, 4vw, 60px); } /* Audience badge — the reference page's "FOR GLP-1 USERS" slot. */#fonLcg .badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 clamp(16px, 1.8vw, 22px); padding: 7px 14px 7px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 252, .7); border: 1px solid rgba(38, 32, 20, .16); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }#fonLcg .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }#fonLcg .hero__h1 { margin: 0; display: grid; gap: clamp(12px, 1.4vw, 20px); } /* The ad line, struck through. Drawn with text-decoration rather than a background gradient: a background line is positioned once for the whole block, so on a two-line quote it fell between the lines and read as an underline of the first. line-through is resolved per line box, always at that line's own centre. skip-ink is off so the rule stays continuous through descenders instead of breaking up. */#fonLcg .hero__quote { display: block; /* THE AD LINE STAYS ON ONE LINE. It was capped at 15ch, which broke it as "L-Carnitine is / the new GLP-1." The line is a verbatim quote of the ad, and its whole job is to be recognised in a glance by someone who just tapped that ad; split across two lines with a rule through both, it reads as two struck fragments rather than one quoted sentence. Measured before removing the cap: the sentence needs 259px at the 22px floor and 447px at the 38px ceiling, against 320px available at 360px wide and 583px at 1440. It fits unaided at every width. `nowrap` then guarantees it, and the scale is 3.5vw rather than 3.7vw because the tightest point is around 1024px, where the column is 455px and 3.7vw left only 10px spare. With nowrap a miss would overflow rather than wrap, so the headroom is the point. */ white-space: nowrap; font-size: clamp(20px, 5.6vw, 34px); font-weight: 300; line-height: 1.14; letter-spacing: -.024em; color: var(--fg-soft); text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(38, 32, 20, .4); text-decoration-skip-ink: none; }#fonLcg .hero__turn { display: block; font-size: clamp(37px, 7vw, 74px); font-weight: 700; line-height: .98; letter-spacing: -.04em; color: var(--fg); }#fonLcg .hero__sub { margin-top: clamp(20px, 2.2vw, 28px); max-width: 46ch; }#fonLcg .hero__sub b { color: var(--fg); font-weight: 600; }#fonLcg .hero__cta { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(24px, 2.6vw, 32px); }#fonLcg .hero__cta .btn { width: 100%; }@media (min-width: 560px) {#fonLcg .hero__cta { flex-direction: row; flex-wrap: wrap; gap: 12px; }#fonLcg .hero__cta .btn { width: auto; } } /* ARTWORK — the photograph with the real packshot on a card overlapping its bottom-left corner. The card is positioned INSIDE the figure and inset from both edges, so it can never hang off the image or be clipped by it. */#fonLcg .hero__art { position: relative; }#fonLcg .hero__figure { position: relative; margin: 0; border-radius: var(--r-lg); /* THE HERO PHOTO IS COVER, NOT CONTAIN. #fonLcg .hero__figure > img below is shared by every page on this sheet (lcarnitine-glp1-2, its limited-offer copy, onefit-subscription), and all of them put the portrait cam-hero.jpg in it. Setting it to `contain` here letterboxes that photo with sand bars at both sides. A lander that needs contain scopes it to its own section class - the four OneFit angle landers do exactly that, at the END of this sheet. Leave this default alone. */ aspect-ratio: 5 / 4; background: var(--sand-deep); overflow: hidden; }#fonLcg .hero__figure > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 12%; } /* THE PHOTOGRAPH LEADS ON MOBILE, AND IT RUNS EDGE TO EDGE. It used to sit under the CTA, inset inside the gutter with a 16px radius, so the first thing a visitor saw after tapping the ad was a wall of type and the picture arrived as a footnote. The reference lander opens on a full-bleed frame with the audience badge floating in it, and that is what makes the top of the page read as a campaign rather than an article: you know in one glance who it is for and what the product is. The gutter is cancelled with a negative margin rather than pulling the figure out of .shell, so nothing above or below it moves. THE COST IS REAL AND IS BOUGHT BACK: an image above the headline pushes the CTA down. The hero's own top padding comes off and the gaps between the proof pill, the quote, the headline and the sub are each trimmed. ONE THING FLOATS IN THE FRAME, NOT TWO. The packshot card ran the full width of the photograph's bottom edge and said "OneFit® / 1,000mg L-Carnitine per serve" — which is, word for word, the label on the CTA button 300px below it and the line inside the sticky bar that is on screen for the rest of the scroll. It was the third time the same sentence appeared in one screenful, and it covered the half of the frame the product is actually in. Gone on the phone; on desktop the figure is a tall column with room for it and it stays. With the card gone the band can be square rather than 4:3 and still cost less height than it did, so the photograph gets bigger and the screen gets quieter at the same time. */@media (max-width: 899.98px) {#fonLcg .hero { padding-top: 0; }#fonLcg .hero__in { gap: clamp(18px, 4vw, 30px); }#fonLcg .hero__art { order: -1; margin-inline: calc(var(--gutter) * -1); }#fonLcg .hero__figure { border-radius: 0; aspect-ratio: 1 / 1; }#fonLcg .hero__figure > img { object-position: 56% 18%; }#fonLcg .hero__aud { top: 14px; left: 14px; padding: 8px 14px; font-size: 11px; } /* .proofpill and .hero__risk are overridden at the foot of the HERO PROOF section instead of here — their base rules are declared below this point in the file, so a same-specificity override up here loses to them on source order and silently does nothing. */ /* TYPE HIERARCHY, REBUILT AROUND THE ONE LINE THAT MATTERS. The struck ad line was running at 21.8px Light against a 37px headline — 1.7x apart, so the two read as a pair of headlines rather than a quote and its correction, and the eye had to work out which one to believe. It is a callback, not a heading: at 16px it sits above the headline the way a kicker does, and the ratio to the headline goes to 2.5x. Nothing else on the page competes with the correction now. */#fonLcg .hero__quote { font-size: 16px; font-weight: 400; letter-spacing: -.01em; text-decoration-thickness: 1.5px; }#fonLcg .hero__turn { font-size: 40px; line-height: .99; letter-spacing: -.036em; }#fonLcg .hero__h1 { gap: 10px; }#fonLcg .hero__sub { margin-top: 14px; font-size: 15.5px; line-height: 1.5; }#fonLcg .hero__cta { margin-top: 20px; } }@media (min-width: 900px) { /* Two columns from here, so the quote is measured against the COLUMN, not the viewport. 5.6vw would be 50px at 900px wide against a 400px column. */#fonLcg .hero__quote { font-size: clamp(24px, 3.4vw, 38px); }#fonLcg .hero__in { grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(44px, 4.6vw, 80px); }#fonLcg .hero__figure { aspect-ratio: 4 / 5; } } /* -------------------------------------------------------------------------- COMPARISON TABLE (inside listicle entry 01) On mobile it linearises into stacked cards. A horizontally scrolling table would hide half the comparison — which is the entire content. -------------------------------------------------------------------------- */#fonLcg .cmp { margin-top: clamp(18px, 2vw, 24px); }#fonLcg .cmp__t { border: 1px solid var(--card-edge); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }#fonLcg .cmp__col { padding: 14px 16px; text-align: left; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; background: var(--chip); border-bottom: 1px solid var(--card-edge); }#fonLcg .cmp__col--a { color: var(--grey-700); }#fonLcg .cmp__col--b { color: var(--blue); }#fonLcg .cmp__rowhead { background: var(--chip); border-bottom: 1px solid var(--card-edge); }#fonLcg .cmp__t th[scope="row"] { text-align: left; vertical-align: top; padding: 14px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--fg-soft); width: 21%; border-top: 1px solid var(--card-edge); }#fonLcg .cmp__t td { padding: 14px 16px; vertical-align: top; font-size: 14.5px; line-height: 1.5; color: var(--fg-mut); border-top: 1px solid var(--card-edge); width: 39.5%; } /* No zebra striping on the row-header column. Tinting only the first cell of alternating rows read as a rendering fault rather than a reading aid — the stripe stopped at a column edge instead of running across the row. */#fonLcg .cmp__no { color: var(--fg) !important; }#fonLcg .cmp__no b { display: block; margin-bottom: 3px; }@media (max-width: 780px) {#fonLcg .cmp__t, #fonLcg .cmp__t tbody, #fonLcg .cmp__t tr, #fonLcg .cmp__t td, #fonLcg .cmp__t th { display: block; width: auto; }#fonLcg .cmp__t thead { display: none; }#fonLcg .cmp__t { border: 0; background: none; }#fonLcg .cmp__t tbody tr { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-md); padding: 2px 15px 13px; margin-bottom: 10px; }#fonLcg .cmp__t th[scope="row"] { width: auto; padding: 13px 0 7px; border-top: 0; background: none !important; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }#fonLcg .cmp__t td { width: auto; padding: 9px 0 0; border-top: 1px solid var(--rule); }#fonLcg .cmp__t td::before { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }#fonLcg .cmp__t td:nth-of-type(1)::before { content: "GLP-1 medications"; color: var(--grey-500); }#fonLcg .cmp__t td:nth-of-type(2)::before { content: "L-Carnitine"; color: var(--ink); } }#fonLcg .foot { margin: clamp(14px, 1.6vw, 20px) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-soft); }#fonLcg .foot--center { text-align: center; max-width: 68ch; margin-inline: auto; } /* -------------------------------------------------------------------------- 3 · REVIEWS — rating block, UGC rail, timeline -------------------------------------------------------------------------- */#fonLcg .rating { display: grid; gap: clamp(20px, 2.4vw, 32px); align-items: center; padding: clamp(22px, 2.6vw, 34px); background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-lg); }@media (min-width: 780px) {#fonLcg .rating { grid-template-columns: auto 1fr; gap: clamp(28px, 3.4vw, 52px); } }#fonLcg .rating__score { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }#fonLcg .rating__score .num { color: var(--fg); }#fonLcg .rating__stars { font-size: 14px; letter-spacing: .14em; color: var(--ink); }#fonLcg .rating__src { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-soft); }#fonLcg .rating__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }@media (min-width: 1000px) {#fonLcg .rating__facts { grid-template-columns: repeat(4, 1fr); } }#fonLcg .rating__facts li { display: flex; flex-direction: column; gap: 2px; }#fonLcg .rating__facts b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--fg); }#fonLcg .rating__facts span { font-size: 13px; line-height: 1.4; color: var(--fg-soft); } /* THE SCORE LIES DOWN ON A PHONE. Stacked and centred — 4.8 over its stars over "Trustpilot rating" — the score alone was ~110px of card, and it landed directly under the study block, which has just finished reporting four percentages. Nine figures in a row, each given a full display treatment, and none of them reads as more important than any other. On one baseline the score is a single line the eye takes in at once, and the card comes down by about a third. Nothing is dropped: every figure that was here is still here, just at the size of supporting evidence rather than the size of a headline. */@media (max-width: 779.98px) {#fonLcg .rating { padding: 18px 17px; gap: 15px; }#fonLcg .rating__score { flex-direction: row; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 4px 9px; text-align: left; }#fonLcg .rating__score .num--lg { font-size: 27px; }#fonLcg .rating__stars { font-size: 12px; }#fonLcg .rating__src { font-size: 11.5px; margin-left: auto; }#fonLcg .rating__facts { gap: 12px 16px; }#fonLcg .rating__facts b { font-size: 14.5px; }#fonLcg .rating__facts span { font-size: 12px; line-height: 1.35; } } /* UGC rail — real member review videos. Scrolls horizontally with snap on mobile, which is how this content is consumed everywhere else. */ /* THE VIDEO WALL GETS REAL SEPARATION AND A HEAD OF ITS OWN. It was 14px below the written reviews — closer to them than the review cards are to each other — so two different kinds of proof ran together as one block, and the only thing naming the videos was a caption underneath, after the reader had already scrolled past them. A rule and a heading turn it into the section it always was. */#fonLcg .ugc { margin-top: clamp(34px, 4.4vw, 60px); padding-top: clamp(26px, 3.2vw, 40px); border-top: 1px solid var(--rule); }#fonLcg .ugc__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: clamp(16px, 2vw, 24px); }#fonLcg .ugc__head .h3 { max-width: 22ch; }#fonLcg .ugc__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; /* Bleed to the viewport edges so the rail reads as continuing off-screen rather than stopping dead inside the gutter. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }@media (min-width: 700px) {#fonLcg .ugc__rail { grid-auto-columns: 22%; gap: 14px; } }@media (min-width: 1100px) {#fonLcg .ugc__rail { grid-auto-columns: 1fr; grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }#fonLcg .ugc__i { position: relative; display: block; scroll-snap-align: start; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 9 / 16; background: var(--stone); border: 1px solid var(--card-edge); }#fonLcg .ugc__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }#fonLcg .ugc__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 252, .9); box-shadow: 0 4px 14px rgba(23, 21, 15, .3); }#fonLcg .ugc__play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 13px solid var(--ink); border-block: 8px solid transparent; } /* NO BLACK FILL, AND THE SWAP WAITS FOR A FRAME. The video carried background:#000 and the poster was faded out the moment the element was attached - so between the tap and HLS opening its buffer the tile went black, which is the one thing a wall of faces should never do. The fill is gone and the video starts transparent; the poster holds until "playing" fires, and only then do the two cross-fade. Nothing is ever black. .is-playing is the latch, .is-live is frames on screen. Everything visual hangs off the second one. */#fonLcg .ugc__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity var(--d-fast) var(--ease); }#fonLcg .ugc__i.is-live .ugc__v { opacity: 1; }#fonLcg .ugc__i.is-live .ugc__play, #fonLcg .ugc__i.is-live img { opacity: 0; } /* Paused, the mark comes back OVER the frame the visitor stopped on - above the video, not under it - so the tile says "tap to resume" without throwing the poster back over a picture they chose to stop at. */ #fonLcg .ugc__i.is-paused .ugc__play { opacity: 1; z-index: 3; }#fonLcg .ugc__i .ugc__play, #fonLcg .ugc__i img { transition: opacity var(--d-fast) var(--ease); } /* The tiles are