#lmh-hero, #lmh-hero *, .lmh-somodal, .lmh-somodal * { box-sizing: border-box; margin: 0; padding: 0; } /* Tokens + type live on BOTH scopes: the sold-out modal is appended to so it can paint above the site's sticky header, which puts it outside #lmh-hero's `isolation: isolate` stacking context - and therefore outside its variable scope. */ #lmh-hero, .lmh-somodal { --lmh-ink: #0e3642; /* v2 aqua-world ink, on the light card */ --lmh-card-muted: rgba(14, 54, 66, .8); /* >=.78 = AA 4.5:1 over the glass (measured) */ --lmh-white: #ffffff; --lmh-white-muted: rgba(255, 255, 255, .85); --lmh-gold: #c8951a; --lmh-gold-deep: #8a6410; --lmh-gold-light: #ffe49a; /* accents on the dark teal water */ --lmh-line: rgba(200, 149, 26, .45); --lmh-pad: clamp(20px, 5vw, 64px); font-family: 'Barlow', system-ui, -apple-system, sans-serif; } #lmh-hero { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; justify-content: center; min-height: clamp(520px, calc(100svh - 170px), 700px); padding: clamp(18px, 2.4vh, 30px) var(--lmh-pad) clamp(26px, 3.4vh, 44px); background: #0d3d4d; color: var(--lmh-white); font-family: 'Barlow', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; } /* ---- plate: "Velka kolonizacia", capsules + microbe streams live on the right ---- */ #lmh-hero .lmh-bg { position: absolute; inset: 0; z-index: 0; } #lmh-hero .lmh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* legibility scrim: darkens the left text zone, leaves the right scene clean. The <=980px override below is DEEPER than the usual mobile scrim on purpose: between 701-980px the landscape plate still serves (portrait source is <=700) and its bright right half would sit under centered copy - measured WCAG fail in review, so the vertical scrim carries .60/.48/.34 stops. */ /* Measured, not guessed: the copy column ends at 41-45 % of the hero width and the plume's bright core runs 45-58 % (p95 luminance 104 -> 215). The scrim therefore has to still be carrying at 45 % and be gone by 64 %, so the copy sits safe AND the plume keeps its core. */ #lmh-hero .lmh-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 26, 36, .55) 0%, rgba(4, 26, 36, .42) 30%, rgba(4, 26, 36, .24) 46%, rgba(4, 26, 36, 0) 64%); } /* ⚠️ NO white bottom fade any more. It existed to blend the bright turquoise plate into the white media-logo strip below; over a near-black plate the same gradient reads as haze AND was what put the old mobile proof line on a white-on-white ground. A dark hero ending on a crisp section edge against the white strip is the cleaner boundary. */ #lmh-hero .lmh-grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); } #lmh-hero .lmh-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 56px); align-items: center; } /* ---- left: the argument ---- */ #lmh-hero .lmh-copy { display: flex; flex-direction: column; align-items: flex-start; } #lmh-hero .lmh-eyebrow { font-size: clamp(10.5px, 1.05vw, 12px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--lmh-gold-light); margin-bottom: clamp(10px, 1.6vh, 16px); text-shadow: 0 1px 8px rgba(3, 20, 28, .85), 0 1px 2px rgba(3, 20, 28, .6); } #lmh-hero .lmh-h1 { font-size: clamp(27px, 3.1vw, 41px); font-weight: 800; line-height: 1.09; letter-spacing: -.02em; color: var(--lmh-white); margin-bottom: clamp(10px, 1.6vh, 14px); text-wrap: balance; max-width: 19ch; /* glyph-level protection: the copy column's right edge grazes the plume's left flank, and how much it does depends on viewport width (full-bleed hero vs 1180px container). A shadow guards the glyphs at ANY width, where a scrim tuned to one width does not. */ text-shadow: 0 2px 18px rgba(3, 20, 28, .75), 0 1px 3px rgba(3, 20, 28, .55); } #lmh-hero .lmh-h1 .lmh-gold { color: var(--lmh-gold-light); } #lmh-hero .lmh-sub { font-size: clamp(14.5px, 1.35vw, 16.5px); font-weight: 400; color: var(--lmh-white-muted); line-height: 1.55; max-width: 52ch; margin-bottom: clamp(8px, 1.2vh, 12px); text-shadow: 0 1px 10px rgba(3, 20, 28, .8), 0 1px 2px rgba(3, 20, 28, .5); } #lmh-hero .lmh-sub strong { color: var(--lmh-white); font-weight: 600; } #lmh-hero .lmh-sub.lmh-axis { font-weight: 600; color: var(--lmh-white); margin-bottom: 2px; } #lmh-hero .lmh-join { font-size: clamp(14.5px, 1.35vw, 16.5px); color: var(--lmh-white-muted); line-height: 1.55; max-width: 46ch; margin-bottom: clamp(14px, 2.2vh, 22px); text-shadow: 0 1px 10px rgba(3, 20, 28, .8), 0 1px 2px rgba(3, 20, 28, .5); } #lmh-hero .lmh-join b { color: var(--lmh-white); font-weight: 700; } /* ---- proof badge PAIR - the product-site pattern ported onto the dark hero. Source of truth: theme snippet `snippets/iprobio-proof-badges.liquid` (.ipb-* ladder, also live as .pb-* on hit / ladybiom / cardiobiom). Same geometry: 52px seal, five glyphs, pct line + source line, light card. The LIGHT card is kept on purpose - on a near-black plate it is what makes the pair legible, and it is what every product page already shows. Deviations from the snippet, both deliberate: (a) a third line "Pozrieť recenzie ›" - a badge-looking card does not read as clickable, and these two are the only outbound proof links in the hero; (b) the Heureka source line drops the trailing "na Heureka.sk" (the gold seal sits 11px away and says it) - it saves one wrapped line per card at hero widths. ---- */ #lmh-hero .lmh-proof { display: grid; gap: 8px; width: 100%; max-width: 430px; } @media (min-width: 1180px) { #lmh-hero .lmh-proof { grid-template-columns: 1fr 1fr; max-width: 100%; gap: 10px; } } #lmh-hero .lmh-proof-item { display: flex; align-items: center; gap: 11px; padding: 9px 13px 9px 9px; border-radius: 16px; text-decoration: none; text-align: left; box-sizing: border-box; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } #lmh-hero .lmh-proof-item:hover { transform: translateY(-1px); } #lmh-hero .lmh-proof-item:focus-visible { transform: translateY(-1px); outline: 2px solid var(--lmh-gold-light); outline-offset: 2px; } #lmh-hero .lmh-proof-item.hk { background: linear-gradient(180deg, #ffffff, #fffdf6); border: 1px solid #ecd9a4; box-shadow: 0 16px 32px -18px rgba(3, 20, 28, .85); } #lmh-hero .lmh-proof-item.hk:hover { box-shadow: 0 20px 38px -16px rgba(3, 20, 28, .95); } #lmh-hero .lmh-proof-item.fb { background: linear-gradient(180deg, #ffffff, #f6f9ff); border: 1px solid #cfe0fb; box-shadow: 0 16px 32px -18px rgba(3, 20, 28, .85); } #lmh-hero .lmh-proof-item.fb:hover { border-color: #1877F2; box-shadow: 0 20px 38px -16px rgba(3, 20, 28, .95); } #lmh-hero .lmh-proof-seal { flex-shrink: 0; width: 52px; height: 52px; display: block; } #lmh-hero .lmh-proof-fb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: #1877F2; display: grid; place-items: center; box-shadow: 0 5px 12px -6px rgba(24, 119, 242, .7); } #lmh-hero .lmh-proof-fb svg { width: 29px; height: 29px; fill: #fff; display: block; } #lmh-hero .lmh-proof-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; } #lmh-hero .lmh-proof-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } #lmh-hero .lmh-stars { color: #d19a1e; font-size: 14px; letter-spacing: .05em; white-space: nowrap; } #lmh-hero .lmh-stars i { display: inline-block; font-style: normal; } #lmh-hero .lmh-recs { display: inline-flex; align-items: center; gap: 2px; line-height: 0; white-space: nowrap; } #lmh-hero .lmh-recs i { display: inline-flex; line-height: 0; } #lmh-hero .lmh-recs svg { width: 16px; height: 16px; display: block; } /* five glyphs, staggered pop-in - same rhythm as the PDP pair */ #lmh-hero .lmh-stars i, #lmh-hero .lmh-recs i { transform: scale(.4); opacity: 0; animation: lmhStar .45s cubic-bezier(.34, 1.56, .64, 1) forwards; } #lmh-hero .lmh-stars i:nth-child(1), #lmh-hero .lmh-recs i:nth-child(1) { animation-delay: .06s; } #lmh-hero .lmh-stars i:nth-child(2), #lmh-hero .lmh-recs i:nth-child(2) { animation-delay: .14s; } #lmh-hero .lmh-stars i:nth-child(3), #lmh-hero .lmh-recs i:nth-child(3) { animation-delay: .22s; } #lmh-hero .lmh-stars i:nth-child(4), #lmh-hero .lmh-recs i:nth-child(4) { animation-delay: .30s; } #lmh-hero .lmh-stars i:nth-child(5), #lmh-hero .lmh-recs i:nth-child(5) { animation-delay: .38s; } @keyframes lmhStar { to { transform: none; opacity: 1; } } #lmh-hero .lmh-proof-pct { font-size: 13.5px; font-weight: 700; color: #1b1d1f; white-space: nowrap; } #lmh-hero .lmh-proof-item.hk .lmh-proof-pct b { color: #8a6410; font-weight: 800; } #lmh-hero .lmh-proof-item.fb .lmh-proof-pct { color: #155fbe; } #lmh-hero .lmh-proof-item.fb .lmh-proof-pct b { font-weight: 800; } #lmh-hero .lmh-proof-sub { font-size: 11.5px; color: #4a5568; font-weight: 500; } #lmh-hero .lmh-proof-sub b { color: #1b1d1f; font-weight: 700; } #lmh-hero .lmh-proof-link { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .01em; } #lmh-hero .lmh-proof-item.hk .lmh-proof-link { color: #8a6410; } #lmh-hero .lmh-proof-item.fb .lmh-proof-link { color: #155fbe; } #lmh-hero .lmh-proof-link i { font-style: normal; transition: transform .2s ease; } #lmh-hero .lmh-proof-item:hover .lmh-proof-link { text-decoration: underline; text-underline-offset: 2px; } #lmh-hero .lmh-proof-item:hover .lmh-proof-link i { transform: translateX(2px); } /* ---- right: the wave-1 selector card, framed ---- Markup + copy = the imunobiompromo /v3 lim-option, selected state, presented as the single framed offer. Glass over the water, gold frame. */ #lmh-hero .lmh-card { position: relative; width: 100%; max-width: 420px; justify-self: end; background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid var(--lmh-line); border-radius: 18px; padding: clamp(16px, 2vh, 22px) clamp(16px, 1.8vw, 24px) clamp(14px, 1.8vh, 20px); box-shadow: 0 24px 60px -24px rgba(4, 26, 34, .55), 0 0 0 6px rgba(255, 255, 255, .08); color: var(--lmh-ink); text-align: left; } #lmh-hero .lmh-badges, .lmh-somodal .lmh-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; } #lmh-hero .lmh-badge, .lmh-somodal .lmh-badge { font-size: clamp(10.5px, 1vw, 12px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; line-height: 1.2; background: var(--lmh-gold); color: #1c1405; } #lmh-hero .lmh-badge.save, .lmh-somodal .lmh-badge.save { background: rgba(200, 149, 26, .12); color: var(--lmh-gold-deep); border: 1px solid rgba(200, 149, 26, .4); } #lmh-hero .lmh-title-row, .lmh-somodal .lmh-title-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } #lmh-hero .lmh-radio, .lmh-somodal .lmh-radio { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--lmh-gold); display: grid; place-items: center; } /* The dot marks the CHOSEN wave only. Unselected radios keep the ring and an empty centre; .selected fills it. Selection is guaranteed non-empty while anything is orderable - select() transfers it on every sell-out - so a lone live wave always carries the dot. */ #lmh-hero .lmh-radio::before, .lmh-somodal .lmh-radio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; } #lmh-hero .lmh-wave.selected .lmh-radio::before { background: var(--lmh-gold); } #lmh-hero .lmh-card h2, .lmh-somodal h2 { font-size: clamp(18px, 1.8vw, 21px); font-weight: 800; letter-spacing: -.01em; color: var(--lmh-ink); line-height: 1.2; } #lmh-hero .lmh-member, .lmh-somodal .lmh-member { font-size: clamp(12px, 1.15vw, 13.5px); color: var(--lmh-card-muted); line-height: 1.45; margin-bottom: 9px; } #lmh-hero .lmh-price-row, .lmh-somodal .lmh-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 10px; } #lmh-hero .lmh-price, .lmh-somodal .lmh-price { font-size: clamp(28px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--lmh-ink); line-height: 1; } /* The 820 EUR anchor. Stefan 2026-08-30 confirmed BOTH the price and that showing the total is fine: it is the arithmetic sum of the CURRENT individual selling prices of products we actually sell - 12 x 49 EUR + 8 x 29 EUR = 820 EUR (wave 2: 9 x 49 + 6 x 29 = 615 EUR). That basis is what makes the number safe to display, and it is a comparison with a differently-composed offer, not a price-reduction announcement on this bundle. ⚠️ Because the basis is "cena pri kúpe jednotlivo", the LABEL is the only part that has to keep saying so. "Pôvodná cena" is Stefan's wording; if it is ever read as a former price of the BUNDLE it pulls in 98/6/ES cl. 6a (prior-30-day-lowest disclosure), which has no answer for a bundle that was never sold on its own. One word fixes it if that ever comes up - "Cena jednotlivo" / "Samostatne". Alpha .72 = AA for its size (measured). */ #lmh-hero .lmh-orig, .lmh-somodal .lmh-orig { font-size: clamp(12px, 1.15vw, 13.5px); font-weight: 600; color: rgba(14, 54, 66, .72); } #lmh-hero .lmh-orig s, .lmh-somodal .lmh-orig s { font-size: clamp(15px, 1.4vw, 17px); text-decoration: line-through; text-decoration-thickness: 2px; } #lmh-hero .lmh-perperson, .lmh-somodal .lmh-perperson { margin-left: auto; font-size: clamp(12px, 1.15vw, 13.5px); font-weight: 700; color: var(--lmh-gold-deep); } #lmh-hero .lmh-stock, .lmh-somodal .lmh-stock { margin-bottom: 0; } #lmh-hero .lmh-stock-line, .lmh-somodal .lmh-stock-line { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(11.5px, 1.1vw, 13px); margin-bottom: 5px; } #lmh-hero .lmh-stock-line b, .lmh-somodal .lmh-stock-line b { font-weight: 800; color: var(--lmh-ink); } #lmh-hero .lmh-stock-line span, .lmh-somodal .lmh-stock-line span { color: var(--lmh-card-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; font-size: clamp(10px, 1vw, 11px); } #lmh-hero .lmh-meter, .lmh-somodal .lmh-meter { display: block; height: 7px; border-radius: 999px; background: rgba(14, 54, 66, .12); overflow: hidden; } #lmh-hero .lmh-meter i, .lmh-somodal .lmh-meter i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #e0b34a, var(--lmh-gold)); } /* single-purpose button: the guarantee and the statutory notice live in the trust row, never in the button's benefit slot (UCPD priloha I bod 10) */ #lmh-hero .lmh-cta { display: block; width: 100%; margin-top: clamp(16px, 2.2vh, 22px); font-family: inherit; text-decoration: none; cursor: pointer; text-align: center; color: #1c1405; background: var(--lmh-gold); border: 0; border-radius: 999px; padding: 15px 24px; font-size: clamp(16.5px, 1.6vw, 18.5px); font-weight: 800; line-height: 1.2; box-shadow: 0 10px 26px -10px rgba(138, 100, 16, .55); transition: filter .2s ease, transform .15s ease; } #lmh-hero .lmh-cta:hover { filter: brightness(1.1); } #lmh-hero .lmh-cta:active { transform: scale(.98); } /* ---- trust row under the CTA: icons + motion ported from ladybiom.barcoolapp.com (.trust-row / .trust-item--ship; keyframes shipPulse / shipTruck / shipShimmer). Two deliberate changes: (a) ladybiom pulls its glyphs from the Phosphor webfont on unpkg - neither this mirror nor iprobio.sk loads it, so the same three glyphs are inlined as SVG and Blueweb inherits no external dependency; (b) the accent is the limitka gold, not ladybiom's maroon. Reduced motion is already killed globally at the bottom of this stylesheet. ---- */ #lmh-hero .lmh-trust { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px 13px; } #lmh-hero .lmh-trust-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: clamp(11px, 1.05vw, 12.5px); font-weight: 500; line-height: 1.4; color: var(--lmh-card-muted); } #lmh-hero .lmh-trust-item svg { width: 15px; height: 15px; flex-shrink: 0; display: block; fill: none; stroke: var(--lmh-gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* The shipping pill is the SITE's component, not a lookalike: same message („Odosielame do 24 hodín"), same tooltip copy, same hover/focus/tap behaviour as .trust-item--ship in assets/iprobio-pdp.css + .js (live on the HIT and CARDIObiom PDPs). Two deliberate differences: the accent is the limitka gold instead of the theme teal (the whole card is gold), and the tooltip ground is the card's ink. ⚠️ NO overflow:hidden here - it would clip the tooltip. The shimmer is already clipped by its own border-radius:inherit, exactly as the theme does it. */ #lmh-hero .lmh-trust-item--ship { position: relative; padding: 4px 11px 4px 9px; border-radius: 999px; font-weight: 600; color: var(--lmh-gold-deep); background: rgba(200, 149, 26, .12); animation: lmhShipPulse 2.4s ease-in-out infinite; cursor: help; } #lmh-hero .lmh-ship-truck { animation: lmhShipTruck 2.4s ease-in-out infinite; transform-origin: center; } #lmh-hero .lmh-trust-item--ship .lmh-ship-info { width: 13px; height: 13px; opacity: .6; transition: opacity .2s ease; margin-left: 1px; } #lmh-hero .lmh-trust-item--ship:hover .lmh-ship-info, #lmh-hero .lmh-trust-item--ship.open .lmh-ship-info { opacity: 1; } #lmh-hero .lmh-ship-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); width: max-content; max-width: min(280px, 74vw); padding: 10px 14px; border-radius: 10px; background: var(--lmh-ink); color: var(--lmh-white); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; z-index: 10; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } #lmh-hero .lmh-ship-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--lmh-ink); } #lmh-hero .lmh-trust-item--ship:hover .lmh-ship-tip, #lmh-hero .lmh-trust-item--ship:focus-visible .lmh-ship-tip, #lmh-hero .lmh-trust-item--ship.open .lmh-ship-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s; } #lmh-hero .lmh-trust-item--ship::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); background-size: 200% 100%; background-position: 200% 0; animation: lmhShipShimmer 3.6s ease-in-out infinite; } @keyframes lmhShipPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 149, 26, .45); background-color: rgba(200, 149, 26, .12); } 50% { box-shadow: 0 0 0 8px rgba(200, 149, 26, 0); background-color: rgba(200, 149, 26, .2); } } @keyframes lmhShipTruck { 0%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(3px); } } @keyframes lmhShipShimmer { 0% { background-position: 200% 0; } 55%, 100% { background-position: -100% 0; } } /* ---- the two waves. Contract = imunobiompromo /v3 .lim-option: wave 1 selected, wave 2 `hidden` until wave 1 sells out, then revealed and auto-selected. Sold-out = frosted veil + "Vypredané" badge, ported from /v3 .lim-soldout. ---- */ #lmh-hero .lmh-wave { position: relative; border: 1.5px solid rgba(200, 149, 26, .35); border-radius: 14px; padding: clamp(11px, 1.5vh, 15px) clamp(12px, 1.2vw, 16px); background: rgba(255, 255, 255, .5); transition: border-color .2s ease, background .2s ease, opacity .2s ease; } #lmh-hero .lmh-wave + .lmh-wave { margin-top: 8px; } /* wave 2 is ABSENT from the live hero, not merely dimmed - see the header note */ #lmh-hero .lmh-wave[hidden] { display: none; } #lmh-hero .lmh-wave.selected { border-color: var(--lmh-gold); background: rgba(255, 249, 234, .8); box-shadow: 0 0 0 3px rgba(200, 149, 26, .13); } #lmh-hero .lmh-wave:not(.selected):not(.lmh-soldout) { cursor: pointer; } #lmh-hero .lmh-wave:not(.selected):not(.lmh-soldout):hover { border-color: rgba(200, 149, 26, .7); } #lmh-hero .lmh-wave:focus-visible { outline: 2px solid var(--lmh-gold-deep); outline-offset: 2px; } /* ---- SOLD OUT = the card COLLAPSES to one line (Stefan 2026-08-30: "compact the sold out offerings and communicate this instead"). A veiled full-height card kept ~300px of the hero busy saying "you cannot have this"; one line still proves the wave went, and hands the space to whatever IS orderable. ---- */ #lmh-hero .lmh-wave.lmh-soldout { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-style: dashed; border-color: rgba(14, 54, 66, .22); background: rgba(255, 255, 255, .32); cursor: default; animation: lmhSoFade .3s ease; } #lmh-hero .lmh-wave.lmh-soldout > *:not(.lmh-so-line) { display: none; } #lmh-hero .lmh-so-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } #lmh-hero .lmh-so-name { font-size: clamp(11.5px, 1.1vw, 13px); font-weight: 700; color: var(--lmh-card-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lmh-hero .lmh-so-count { font-size: clamp(11px, 1.05vw, 12px); color: var(--lmh-card-muted); margin-left: auto; } #lmh-hero .lmh-so-badge { background: #c8332a; color: #fff; font-weight: 800; font-size: clamp(9.5px, .95vw, 10.5px); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; line-height: 1.3; } @keyframes lmhSoFade { from { opacity: 0 } to { opacity: 1 } } /* the collapsed row is a doorway back to the offer that sold out */ #lmh-hero .lmh-wave.lmh-soldout { cursor: pointer; transition: border-color .2s ease, background .2s ease; } #lmh-hero .lmh-wave.lmh-soldout:hover, #lmh-hero .lmh-wave.lmh-soldout:focus-visible { border-color: rgba(200, 149, 26, .55); background: rgba(255, 255, 255, .5); } #lmh-hero .lmh-so-peek { font-size: clamp(10.5px, 1vw, 11.5px); font-weight: 700; color: var(--lmh-gold-deep); white-space: nowrap; } @media (max-width: 700px) { #lmh-hero .lmh-so-count { display: none; } } /* ---- sold-out modal: the original offer, greyed out ---- Appended to , not to #lmh-hero: the hero sets `isolation: isolate`, so a fixed child could never paint above the site's sticky header. Tokens/reset are shared above. */ .lmh-somodal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; } .lmh-somodal[hidden] { display: none; } .lmh-somodal-back { position: absolute; inset: 0; background: rgba(4, 26, 36, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: lmhSoFade .2s ease; } .lmh-somodal-panel { position: relative; width: min(430px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: rgba(255, 255, 255, .96); border: 1.5px solid rgba(14, 54, 66, .22); border-radius: 18px; padding: clamp(18px, 2.4vh, 24px) clamp(16px, 1.8vw, 24px); box-shadow: 0 30px 70px -20px rgba(4, 26, 34, .7); color: var(--lmh-ink); text-align: left; animation: lmhSoPop .22s cubic-bezier(.34, 1.2, .64, 1); } @keyframes lmhSoPop { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } } .lmh-somodal-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px dashed rgba(14, 54, 66, .2); } .lmh-somodal-head .lmh-so-badge { background: #c8332a; color: #fff; font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; line-height: 1.3; } .lmh-somodal-title { font-size: 13px; font-weight: 700; color: var(--lmh-card-muted); } .lmh-somodal-x { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(14, 54, 66, .2); background: none; cursor: pointer; font: 700 17px/1 system-ui, sans-serif; color: var(--lmh-card-muted); display: grid; place-items: center; transition: background .18s ease, color .18s ease; } .lmh-somodal-x:hover { background: rgba(14, 54, 66, .08); color: var(--lmh-ink); } /* the offer itself: shown, but unmistakably past tense */ .lmh-somodal-body { filter: grayscale(1); opacity: .62; pointer-events: none; } .lmh-somodal-note { margin-top: 13px; padding-top: 11px; border-top: 1px dashed rgba(14, 54, 66, .2); font-size: 12.5px; line-height: 1.5; color: var(--lmh-card-muted); } @media (prefers-reduced-motion: reduce) { .lmh-somodal-back, .lmh-somodal-panel { animation: none } } /* ---- 3. vlna = the standard offer with gifts, on a deadline ---- */ #lmh-hero .lmh-w3 { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(200, 149, 26, .4); } #lmh-hero .lmh-w3-label { display: block; font-size: clamp(10.5px, 1.02vw, 12px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lmh-gold-deep); margin-bottom: 6px; text-align: center; } #lmh-hero .lmh-cd { display: flex; justify-content: center; gap: 5px; margin-bottom: 8px; } #lmh-hero .lmh-cd span { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 4px 7px; border-radius: 10px; background: rgba(200, 149, 26, .14); border: 1px solid rgba(200, 149, 26, .3); } #lmh-hero .lmh-cd b { font-size: clamp(16px, 1.7vw, 20px); font-weight: 800; color: var(--lmh-ink); line-height: 1.1; font-variant-numeric: tabular-nums; } #lmh-hero .lmh-cd i { font-style: normal; font-size: clamp(8.5px, .85vw, 9.5px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lmh-gold-deep); } #lmh-hero .lmh-wave[data-package^="std"] { padding-top: clamp(9px, 1.2vh, 12px); padding-bottom: clamp(9px, 1.2vh, 12px); } #lmh-hero .lmh-wave[data-package^="std"] h2 { font-size: clamp(14.5px, 1.45vw, 16.5px); } #lmh-hero .lmh-wave[data-package^="std"] .lmh-pack img { height: 34px; } #lmh-hero .lmh-wave[data-package^="std"] .lmh-packs { margin: 5px 0 4px; } #lmh-hero .lmh-wave[data-package^="std"] .lmh-price { font-size: clamp(21px, 2vw, 26px); } #lmh-hero .lmh-wave[data-package^="std"] .lmh-price-row { margin-bottom: 0; } #lmh-hero .lmh-wave[data-package^="std"] .lmh-badges { margin-bottom: 7px; } #lmh-hero .lmh-wave[data-package^="std"] .lmh-title-row { margin-bottom: 4px; } #lmh-hero .lmh-cd.ended { display: block; text-align: center; font-size: clamp(11px, 1.05vw, 12.5px); font-weight: 700; color: var(--lmh-card-muted); } /* ---- packshots: "even a small one will illustrate what the customer gets" (Stefan). Trimmed to the alpha bbox from ~/Desktop/products/, so the height below IS the bottle height - no transparent padding to compensate for. ---- */ #lmh-hero .lmh-packs, .lmh-somodal .lmh-packs { display: flex; align-items: center; gap: 10px; margin: 7px 0 6px; flex-wrap: wrap; } #lmh-hero .lmh-pack, .lmh-somodal .lmh-pack { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(12px, 1.15vw, 13.5px); line-height: 1.25; color: var(--lmh-ink); } #lmh-hero .lmh-pack img, .lmh-somodal .lmh-pack img { height: 48px; width: auto; display: block; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(14, 54, 66, .22)); } #lmh-hero .lmh-pack b, .lmh-somodal .lmh-pack b { font-weight: 800; } #lmh-hero .lmh-pack .gp, .lmh-somodal .lmh-pack .gp { display: block; font-size: .86em; font-weight: 700; color: var(--lmh-gold-deep); } /* keeps the site's floating "Objednať HIT" pill on its original scroll trigger (hit-launch-homepage.js observes .hl-cta .hl-btn-p; without a target it would pin the pill open from the first paint) */ #lmh-hero .hl-cta { display: block !important; width: 2px !important; height: 2px !important; margin: -2px auto 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden; } #lmh-hero .hl-cta .hl-btn-p { display: block !important; width: 2px !important; height: 2px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 0 !important; background: none !important; } /* ---- short desktop ---- */ @media (min-width: 981px) and (max-height: 820px) { #lmh-hero { min-height: 0; } #lmh-hero .lmh-h1 { font-size: clamp(26px, 2.9vw, 36px); } #lmh-hero .lmh-card { max-width: 396px; } #lmh-hero .lmh-member, .lmh-somodal .lmh-member { margin-bottom: 9px; } #lmh-hero .lmh-price-row, .lmh-somodal .lmh-price-row { margin-bottom: 9px; } #lmh-hero .lmh-stock, .lmh-somodal .lmh-stock { margin-bottom: 10px; } } /* ---- mobile / tablet: single column, copy then card ---- */ @media (max-width: 980px) { #lmh-hero { min-height: 0; padding-top: clamp(18px, 3vh, 30px); text-align: center; } /* Measured: on mobile the copy band occupies 3-45 % of the hero height and the card covers from 46 % down, so the scrim carries hardest exactly where the copy sits and releases below, where only the card and the edge capsules are. */ #lmh-hero .lmh-scrim { background: linear-gradient(180deg, rgba(4, 26, 36, .58) 0%, rgba(4, 26, 36, .46) 30%, rgba(4, 26, 36, .34) 50%, rgba(4, 26, 36, .12) 100%); } /* the eyebrow gained the product name in the review pass; at phone width it wrapped to two lines and cost fold height, so tracking and size tighten to keep it one line */ #lmh-hero .lmh-eyebrow { font-size: 9.5px; letter-spacing: .12em; } #lmh-hero .lmh-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; } #lmh-hero .lmh-copy { align-items: center; } #lmh-hero .lmh-h1 { font-size: clamp(25px, 6.4vw, 34px); max-width: 18ch; } #lmh-hero .lmh-sub { font-size: 14.5px; max-width: 38ch; } #lmh-hero .lmh-join { font-size: 14.5px; max-width: 36ch; margin-bottom: 10px; } /* proof stays in the copy column, above the card - the duplicate block under the card sat inside the bottom white fade and went white-on-white (review blocker) */ /* the pair is a grid now, not a flex row - center the block, keep the cards left-read */ #lmh-hero .lmh-proof { justify-self: center; margin-inline: auto; } #lmh-hero .lmh-card { justify-self: center; max-width: 420px; } } /* phone tier of the badge ladder (product site uses 640; the hero goes single-column at 980, so the compact tier starts where the copy column actually narrows) */ @media (max-width: 700px) { /* Fold economics at 390x844. Measured: with wave 2 hidden the CTA landed at 812-862, i.e. 18px under the fold. Every value below is spacing, not content - the whole offer (packshots, price, stock, CTA) now clears 844. */ #lmh-hero .lmh-wave { padding: 10px 12px; } #lmh-hero .lmh-packs, .lmh-somodal .lmh-packs { margin: 5px 0 4px; } #lmh-hero .lmh-member, .lmh-somodal .lmh-member { margin-bottom: 7px; } #lmh-hero .lmh-price-row, .lmh-somodal .lmh-price-row { margin-bottom: 8px; } #lmh-hero .lmh-badges, .lmh-somodal .lmh-badges { margin-bottom: 9px; } #lmh-hero .lmh-proof { gap: 6px; } /* the tooltip is centred on the pill; at 390px a 280px bubble put its left edge at -1px (measured). 236px keeps it inside the viewport for any pill position the centred, wrapping trust row can produce. */ #lmh-hero .lmh-ship-tip { max-width: 236px; } #lmh-hero .lmh-pack img, .lmh-somodal .lmh-pack img { height: 44px; } #lmh-hero .lmh-packs, .lmh-somodal .lmh-packs { gap: 9px; } #lmh-hero .lmh-proof-item { gap: 9px; padding: 7px 11px 7px 7px; } #lmh-hero .lmh-proof-seal, #lmh-hero .lmh-proof-fb { width: 44px; height: 44px; } #lmh-hero .lmh-proof-fb svg { width: 25px; height: 25px; } #lmh-hero .lmh-proof-pct { font-size: 12.5px; } #lmh-hero .lmh-proof-sub { font-size: 11px; } #lmh-hero .lmh-proof-link { font-size: 10.5px; } #lmh-hero .lmh-stars { font-size: 13px; } #lmh-hero .lmh-recs svg { width: 14px; height: 14px; } } @media (max-width: 700px) and (max-height: 760px) { #lmh-hero { padding-top: 18px; padding-bottom: 30px; } #lmh-hero .lmh-sub { margin-bottom: 6px; } #lmh-hero .lmh-member, .lmh-somodal .lmh-member { margin-bottom: 9px; } } @media (prefers-reduced-motion: reduce) { #lmh-hero *, #lmh-hero *::after, #lmh-hero *::before { transition: none !important; animation: none !important; } }