/* Generated by tools/build-embedded-assets.py. Do not edit. */ /* styles/tokens.css */ /* Design tokens + the guide's own reset. Brand values live here so the guide stays consistent. EVERYTHING here is scoped to #sh-guide, the guide's root element. The guide is embedded into a live WordPress page (Flatsome theme) that brings its own reset, so a rule of ours on `body`, `html`, `:root` or a bare element would either leak onto the shop or be fought over by the theme. Page-level rules that a standalone page still needs live in styles/standalone.css, which only index.html loads. */ /* Open Runde is the body font in Figma; it's not on Google Fonts, so it's self-hosted here (assets/fonts, Fontsource latin subset — full Czech glyph coverage). local() is kept first so a designer's installed copy wins; everyone else gets the bundled woff2 (no more Nunito Sans fallback). */ @font-face{font-family:'SH Guide Open Runde';font-weight:400;font-display:swap;src:local('Open Runde Regular'),local('Open Runde'),url('../assets/fonts/open-runde-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'SH Guide Open Runde';font-weight:500;font-display:swap;src:local('Open Runde Medium'),url('../assets/fonts/open-runde-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'SH Guide Open Runde';font-weight:600;font-display:swap;src:local('Open Runde Semibold'),url('../assets/fonts/open-runde-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'SH Guide Open Runde';font-weight:700;font-display:swap;src:local('Open Runde Bold'),url('../assets/fonts/open-runde-latin-700-normal.woff2') format('woff2');} /* Heading font must be self-hosted too. It is split the same way Google Fonts serves it: a Czech/Latin Extended subset plus a basic Latin subset. Loading only the first half makes missing base glyphs fall back to a system font and produces visibly broken diacritics. */ @font-face{font-family:'SH Guide Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'SH Guide Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* Inter is used only by the WordPress insertion's heading token. Self-host it so the same glyphs and metrics render on every platform. */ @font-face{font-family:'SH Guide Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'SH Guide Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} #sh-guide{ --bg:#f8f5f2; --bg2:#f1ebe4; --card:#ffffff; --ink:#2e0015; --muted:#533744; --tertiary:#7c6a72; --line:#e5dcd2; --input-border:#cdbead; --green:#618a0f; --green-bg:#edf1e1; --amber:#f68f28; --amber-bg:#fdeedd; --green-16:rgba(97,138,15,.16); /* --green @16% — tint behind green marks (eyebrow, step/journey dots) */ --red:#cb102d; --red-bg:#fbe3e6; --primary:#910018; --primary-2:#aa132c; --accent:#ed1a3b; --brand-8:rgba(145,0,24,.08); --primary-32:rgba(145,0,24,.32); --overlay:rgba(46,0,21,.48); /* DS token Interaction/Overlay = --ink @ Brand-muted-48% */ /* Per-category (pillar) accents. energy=amber, digest=green reuse brand tokens; sleep/mind/immune/vitality round out a 6-hue set, tuned to sit calmly next to the beige/burgundy palette (muted, earthy, never neon). vitality (life- style) is a muted earthy gold/ochre — the one warm-grounded hue the set lacked, sitting far from the purple/teal it neighbours on the grid. */ --sleep:#5566a8; --sleep-bg:#ebedf7; --energy:#e07d12; --energy-bg:#fdeedd; --mind:#9c5a93; --mind-bg:#f4e9f2; --digest:#5f8a0f; --digest-bg:#edf1e1; --immune:#2f8f86; --immune-bg:#e1efed; --vitality:#b08b3e; --vitality-bg:#f6eed7; --shadow:0 0 2px rgba(46,0,21,.04),0 2px 8px rgba(46,0,21,.04),0 4px 16px rgba(46,0,21,.04),0 8px 32px rgba(46,0,21,.04); --r:16px; --heading-font:'SH Guide Nunito',-apple-system,system-ui,sans-serif; --sans:'SH Guide Open Runde','SH Guide Nunito',-apple-system,system-ui,sans-serif; /* Full-height screens (questionnaire, loading) sized off the VIEWPORT work on a page the guide owns. Inside the shop page they would add a whole viewport on top of the theme's header and footer, so the host overrides these two to fit its own content flow (wordpress-plugin/.../guide-shell.css). */ --sh-screen-min-h:100vh; --sh-quiz-top-pad:12vh; /* Heading scale. The WordPress host may replace only these values for Inter; standalone Nunito keeps this original scale unchanged. */ --title-xl-size:48px; --title-xl-line:52px; --title-lg-size:40px; --title-lg-line:44px; --title-md-size:32px; --title-md-line:36px; --title-sm-size:24px; --title-sm-line:28px; --title-xs-size:20px; --title-xs-line:24px; --title-2xs-size:16px; --title-2xs-line:20px; --title-xl-mobile-size:32px; --title-xl-mobile-line:36px; --title-lg-mobile-size:28px; --title-lg-mobile-line:32px; --title-md-mobile-size:24px; --title-md-mobile-line:28px; --title-sm-mobile-size:20px; --title-sm-mobile-line:24px; --title-xs-mobile-size:18px; --title-xs-mobile-line:20px; --title-2xs-mobile-size:16px; --title-2xs-mobile-line:20px; /* Was on `body`. The wrapper carries its own typography and white page ground so it blends into the host page; --bg remains the local beige surface. */ width:100%; background:var(--card); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* dvh matches the visible area on iOS; kept as a progressive upgrade so the vh fallback above still applies on engines without it. */ @supports (height:100dvh){ #sh-guide{--sh-screen-min-h:100dvh} } /* Scoped, never a global `*`: the host page already has its own box-sizing rule and must keep it. */ #sh-guide, #sh-guide *{box-sizing:border-box} /* Flatsome uses a global `.box` utility that puts auto horizontal margins on every matching element. `.box` is an internal guide control, so neutralize the host utility inside the wrapper before component-specific rules apply. */ #sh-guide .box{margin:0} #sh-guide h1, #sh-guide h2, #sh-guide h3{font-family:var(--heading-font);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance} /* Form-control reset. Every value here IS the browser default, so this changes nothing on a page of our own — it exists to stop a host theme's control styling from reaching in. Flatsome, for one, puts `margin-bottom:1em` on every button and input (which would break every flex `gap` in the guide) plus uppercase, letter-spacing, a 2.4em line-height, a 2.5em min-height and an inset shadow on text fields. Component rules in the other files are class-based, so they still win over this. */ #sh-guide button, #sh-guide input, #sh-guide select, #sh-guide textarea{ font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; margin:0; min-height:0; min-width:0; max-width:none; height:auto; box-shadow:none; text-shadow:none; text-transform:none; } #sh-guide button{cursor:pointer;text-align:center} /* `backwards`, NOT `both`. With `both` the animation stays in effect forever, so Chrome never removes it and the element keeps an "active accelerated opacity animation" long after the half second is over. Measured on the loading screen at 2560x1400@2: a 5120x2800 offscreen surface drawn and blitted on EVERY frame of the ten-second wait, about 860 Mpx/s of fill, plus 14.4 MB of tiles, for an entrance that finished ten seconds earlier. Cost scales with window size, which is why small probe windows missed it. `backwards` keeps the opacity-0 start and drops the animation once it ends; the end state is the default computed style anyway, so nothing changes visually. Every screen wears this class, so this is not only about the loader. */ #sh-guide .fade{animation:sh-guide-fade .45s ease backwards} /* Keyframe names are global to the document however deeply the rule using them is scoped, so this one carries the guide's prefix. */ @keyframes sh-guide-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #sh-guide .wrap{max-width:760px;margin:0 auto;padding:0 20px} #sh-guide .app{min-height:var(--sh-screen-min-h);display:flex;flex-direction:column} /* styles/base.css */ /* Questionnaire card design, scoped to the guide. */ /* Screen: top-anchors the card on the beige page. We align to the TOP (not center) so the header — progress bar + question title — lands on the same Y on every step; centering re-centred a variable-height box and made the title jump between questions (worse on mobile). Content grows downward; a question taller than the viewport simply scrolls (min-height allows the page to grow). Desktop sits the card in the upper third (12vh); mobile hugs near the top. Both measures are tokens (styles/tokens.css) because they only make sense on a page the guide owns: embedded in the shop page, a viewport-tall screen would sit on top of the site's own header and footer, so the host collapses them. */ #sh-guide .quiz-screen{min-height:var(--sh-screen-min-h);display:flex;align-items:flex-start;justify-content:center;padding:var(--sh-quiz-top-pad) 20px 48px} /* Card (Dialog): 580 max, 40 padding, radius 16, subtle outline. The box stays put across questions; only .card-inner swaps (fades in). */ #sh-guide .card{width:100%;max-width:580px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:40px} #sh-guide .card-inner{display:flex;flex-direction:column;gap:40px} /* Progress (gap 8). */ #sh-guide .progress{display:flex;flex-direction:column;gap:12px} #sh-guide .bar{display:flex;gap:4px} #sh-guide .seg{flex:1;height:4px;border-radius:999px;background:var(--line)} #sh-guide .seg.on{background:var(--green)} #sh-guide .labels{display:flex;justify-content:space-between;align-items:center;gap:16px} #sh-guide .eyebrow{display:inline-flex;align-items:center;background:var(--green-16);color:var(--green);border-radius:12px 0 12px 0;padding:4px 8px;font-size:14px;line-height:16px;letter-spacing:-0.0025em;font-weight:400} #sh-guide .count{font-size:14px;line-height:16px;letter-spacing:-0.0025em;font-weight:400;color:var(--muted)} /* Question text (gap 8). */ #sh-guide .text{display:flex;flex-direction:column;gap:8px} #sh-guide .q{font-family:var(--heading-font);font-weight:700;font-size:var(--title-md-size);line-height:var(--title-md-line);letter-spacing:-0.02em;color:var(--ink);text-wrap:balance} #sh-guide .sub{font-size:16px;line-height:26px;letter-spacing:-0.005em;color:var(--ink);margin:0} /* Options (gap 8). */ #sh-guide .opts{display:flex;flex-direction:column;gap:8px} #sh-guide .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px;border-radius:8px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--input-border);color:var(--ink);transition:box-shadow .12s,background .12s} #sh-guide .opt.sel{background:var(--brand-8);box-shadow:inset 0 0 0 2px var(--primary)} @media (hover:hover){#sh-guide .opt:hover{box-shadow:inset 0 0 0 2px var(--primary)}} #sh-guide .opt.sm{padding:12px} #sh-guide .opt .box{width:20px;height:20px;flex:none;border-radius:4px;background:var(--card);box-shadow:inset 0 0 0 1px var(--input-border);display:grid;place-items:center} #sh-guide .opt.sel .box{background:var(--primary);box-shadow:none} #sh-guide .tick{display:block} /* Radio control (single-select): 20px circle, selected = brand fill + 8px white dot. */ #sh-guide .opt .radio{width:20px;height:20px;flex:none;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--input-border);display:grid;place-items:center;transition:background .12s,box-shadow .12s} #sh-guide .opt.sel .radio{background:var(--primary);box-shadow:none} #sh-guide .opt .radio .dot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transition:opacity .12s} #sh-guide .opt.sel .radio .dot{opacity:1} #sh-guide .opt-name{font-size:16px;line-height:20px;letter-spacing:-0.005em;font-weight:600;color:var(--ink)} /* Reveal group (beige), holds nested options + text input. */ #sh-guide .reveal{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:8px;padding:16px;margin-top:0} #sh-guide .reveal-hint{font-size:14px;line-height:18px;color:var(--muted);margin:0 0 4px} /* Text input + textarea states (Figma Textfield/Textarea): default 1px #cdbead · hover 1px ink · focus 2px ink · filled text→ink. Focus = 1px border + 1px inset shadow (same ink) = 2px, no layout shift. */ #sh-guide .input{font-family:var(--sans);font-size:16px;line-height:20px;letter-spacing:-0.005em;color:var(--ink);background:var(--card);border:1px solid var(--input-border);border-radius:8px;padding:12px;width:100%;transition:border-color .12s,box-shadow .12s} #sh-guide .input::placeholder, #sh-guide textarea::placeholder{color:var(--tertiary)} @media (hover:hover){#sh-guide .input:hover, #sh-guide textarea:hover{border-color:var(--ink)}} #sh-guide .input:focus, #sh-guide textarea:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} /* Validation error (Figma node 5922:214135): field border → --red, 12px red helper text below. Checkbox box border tinted the same red. */ #sh-guide .field.invalid .input, #sh-guide .field.invalid textarea{border-color:var(--red)} #sh-guide .field.invalid .input:focus, #sh-guide .field.invalid textarea:focus{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)} #sh-guide .field-error{margin:0;font-size:12px;line-height:16px;letter-spacing:-0.0025em;color:var(--red);padding:0 4px} /* Invalid consent: emphasise the CONTROL (not the long legal label). 2px red border reads clearly heavier than a normal 1px box, and a light red fill makes the empty box unmistakable as "needs action". The label text stays default — redding a whole GDPR paragraph hurts readability and misdirects the error. */ #sh-guide .consent.invalid .box{box-shadow:inset 0 0 0 2px var(--red);background:var(--red-bg)} /* Consent error attaches to the consent above it (6px, matching the field pattern) while keeping the group's 16px rhythm to the marketing row below. Indent 32px (box 20 + gap 12) so it left-aligns with the checkbox label. */ #sh-guide .consents .field-error{margin-top:-10px;margin-left:32px;padding-left:0} /* Buttons (gap 12). */ #sh-guide .buttons{display:flex;flex-direction:column;gap:12px} #sh-guide .btn-primary{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:16px 24px;border:0;border-radius:999px;background:var(--primary);color:#fff;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-0.005em;transition:background .12s} @media (hover:hover){#sh-guide .btn-primary:hover{background:var(--primary-2)}} #sh-guide .btn-primary:active{background:var(--primary-2)} #sh-guide .btn-primary:disabled{background:var(--brand-8);color:var(--primary-32);cursor:not-allowed} #sh-guide .btn-back{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:14px;line-height:16px;letter-spacing:-0.0025em;transition:background .12s} @media (hover:hover){#sh-guide .btn-back:hover{background:var(--bg2)}} #sh-guide .btn-back:active{background:var(--bg2)} /* Safe failure state: no recommendation, products or cart action exists here. */ #sh-guide .guide-unavailable{max-width:580px;margin:0 auto;padding:48px 20px 64px;text-align:center} #sh-guide .guide-unavailable h1{font-family:var(--heading-font);font-size:var(--title-md-size);line-height:var(--title-md-line);letter-spacing:-.02em;color:var(--ink);margin:0 0 16px} #sh-guide .guide-unavailable p{max-width:460px;margin:0 auto;color:var(--muted);font-size:16px;line-height:26px} #sh-guide .guide-unavailable-actions{display:flex;flex-direction:column;gap:12px;margin:32px auto 0;max-width:360px} /* Chevrons: inline Figma SVGs, fill=currentColor → recolor per button state (white on primary, ink on back, brand-red @32% when disabled — per Figma 238:8349). */ #sh-guide .chev{display:block;flex:none} /* Final step form. Labeled fields 1:1 with Figma node 737:152206: label (16/20, ink, 4px gutter) + required red asterisk, field 6px below. */ #sh-guide .formcol{display:flex;flex-direction:column;gap:24px} #sh-guide .field{display:flex;flex-direction:column;gap:6px} #sh-guide .field-label{display:flex;align-items:center;gap:4px;padding:0 4px;font-family:var(--sans);font-weight:400;font-size:16px;line-height:20px;letter-spacing:-0.005em;color:var(--ink)} #sh-guide .field-label .req{color:var(--red)} #sh-guide .field-label .optional{color:var(--tertiary)} #sh-guide textarea{font-family:var(--sans);font-size:16px;line-height:24px;letter-spacing:-0.005em;padding:12px;border:1px solid var(--input-border);border-radius:8px;width:100%;background:var(--card);color:var(--ink);resize:vertical;transition:border-color .12s,box-shadow .12s} /* Consent — clickable checkbox row (toggles S.consent). */ #sh-guide .consent{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;padding:0;font-family:var(--sans);font-size:14px;line-height:20px;color:var(--ink);cursor:pointer} #sh-guide .consent .box{width:20px;height:20px;flex:none;border-radius:4px;background:var(--card);box-shadow:inset 0 0 0 1px var(--input-border);display:grid;place-items:center;transition:background .12s,box-shadow .12s} #sh-guide .consent.on .box{background:var(--primary);box-shadow:none} /* Two consent rows (+ expandable detail) grouped at a tighter 16px rhythm. */ #sh-guide .consents{display:flex;flex-direction:column;gap:16px} #sh-guide .consent a{color:var(--primary);text-decoration:underline} #sh-guide .consent .optional{color:var(--tertiary)} /* Layered privacy notice (čl. 13) — inline link inside the consent that expands the full detail below it (no separate always-open box). */ #sh-guide .privacy-link{color:var(--muted);text-decoration:underline;cursor:pointer} /* Figma Typography-secondary = Brand-muted-50 #533744 */ @media (hover:hover){#sh-guide .privacy-link:hover{text-decoration:none}} #sh-guide .consent-detail{font-family:var(--sans);font-size:14px;line-height:20px;color:var(--ink);margin-left:32px;margin-top:-8px;padding:10px 14px;background:var(--bg);border-radius:10px} /* 14/20 matches the checkbox label. indent 32px = box(20)+gap(12) → left-aligns with consent text. margin-top:-8 pulls it to 8px below the consent (vs the group's 16px). bg = Figma Surface-beige */ #sh-guide .consent-detail p{margin:0} #sh-guide .consent-detail a{color:var(--muted);text-decoration:underline} @media (hover:hover){#sh-guide .consent-detail a:hover{text-decoration:none}} /* Responsive (Figma: desktop 1560 · tablet 768 · mobile 390). ≤1024 = Mobile text styles + reduced spacing (tablet & mobile share these): headlines drop a step, vertical 64→40, block gap 40→24, gutter 32→24. Body unchanged. ≤560 = gutter →16. */ @media(max-width:1024px){ #sh-guide .q{font-size:var(--title-md-mobile-size);line-height:var(--title-md-mobile-line)} /* Headline/H3 | Mobile */ #sh-guide .card{padding:32px} /* 40→32 */ #sh-guide .card-inner{gap:24px} /* 40→24 (container gap) */ #sh-guide .quiz-screen{padding:32px 24px 48px} /* tablet/mobile: hug near the top (no 12vh offset) */ } @media(max-width:560px){ #sh-guide .quiz-screen{padding:16px 16px 40px} /* gutter 16, near top */ #sh-guide .card{padding:24px} } /* styles/loading-v2.css */ /* Loading v2: ring progress + product window. Every value below is read off the Figma node, mapped onto the existing design tokens where the layer is bound to one: page bg Surface/Surface-beige #f8f5f2 -> var(--bg) ring base Neutral-soft/Neutral-soft-20 #f1ebe4 -> var(--bg2) ring fill Brand-vibrant/Brand-vibrant-50 #ed1a3b -> var(--accent) card bg Surface/Surface-white #ffffff -> var(--card) text Typography/Typography-primary #2e0015 -> var(--ink) card radius XL (16) -> var(--r) card shadow 4x drop shadow @2% -> var(--shadow) Geometry is derived from ONE variable: --s = ring diameter (320 in Figma), declared once on .l2-wrap and inherited by everything below it. The wrapper is not given a width of its own -- it IS the ring width, so the status line can never be wider than the circle it sits under. (Figma reports the wrapper as 326: that is the ring's stroke overhang in its bounding box, not a design value.) --s also absorbs narrow screens on its own, so there is no breakpoint: everything below scales as a unit instead of reflowing. ring 320 = --s card 160 x 160 = --s / 2 gap 16 = --s / 20 (token M) strip 320 x 160 = --s wide, --s/2 tall slot step 176 = card + gap edge fade 80 = --s / 4 ring stroke 8 = --s / 40 */ #sh-guide .l2-screen{ /* Token, not a bare 100vh: see --sh-screen-min-h in styles/tokens.css. It resolves to the viewport standalone and to the content's height when the guide is embedded in the shop page. */ min-height:var(--sh-screen-min-h); display:flex; align-items:center; justify-content:center; padding:64px 32px; /* Figma page padding: 7XL vertical, 3XL horizontal */ background:var(--card); overflow:hidden; /* Makes 100cqw below mean "the space actually left after this padding", so the padding value lives here only and is never restated as a number. */ container-type:inline-size; } #sh-guide .l2-wrap{ /* Figma "Wrapper": vertical, gap 40 (4XL), items centered. Width = the ring, never a number of its own. */ --s:320px; /* Figma ring diameter; fallback where cqw is unsupported */ --s:min(320px,100cqw); /* narrow screens: shrink to the padded content width */ width:var(--s); display:flex; flex-direction:column; align-items:center; gap:40px; } /* ── ring + window ─────────────────────────────────────────────────────── */ #sh-guide .l2-ring{ --cw:calc(var(--s) / 2); /* 160 = card width/height */ --gap:calc(var(--s) / 20); /* 16 */ --step:calc(var(--cw) + var(--gap)); /* 176 = card + gap, i.e. one belt stride */ --fade:calc(var(--s) / 4); /* 80 */ position:relative; width:var(--s); height:var(--s); flex:none; } /* The circular "window" the product strip lives in. Figma: frame 320x320, radius 999, clips content, no fill (the page beige shows through). */ #sh-guide .l2-window{ position:absolute; inset:0; border-radius:999px; overflow:hidden; } #sh-guide .l2-strip{ /* Figma "Images": 320 x 160, vertically centered in the circle (y = 80) */ position:absolute; top:50%; left:0; width:var(--s); height:var(--cw); margin-top:calc(var(--cw) / -2); /* No overflow clip here on purpose. Horizontally it would be redundant (the circular window is the tighter clip at every height but the exact centre line), and vertically it is harmful: the cards fill the strip edge to edge, so clipping would cut their box-shadow off flat. */ } #sh-guide .l2-card{ /* Laid out by the belt's flex row. The card itself never moves and never transitions: the belt is the only animated element on this screen, so the cards must not hold compositing layers of their own. Thirty promoted elements that never animate is GPU memory for nothing. Every card sits at full strength: no centre highlight, so nothing has to be phased against the belt and no card is ever dimmer than its neighbour. */ flex:none; width:var(--cw); height:var(--cw); margin-right:var(--gap); /* the gap lives here, not on the flex container — see @keyframes sh-guide-l2-belt */ display:grid; place-items:center; border-radius:var(--r); background:var(--card); /* Surface-white */ box-shadow:var(--shadow); overflow:hidden; } #sh-guide .l2-card img{ width:100%; height:100%; box-sizing:border-box; /* Air inside the card. The e-shop photo library frames every pack low in a portrait 516x605 canvas, with roughly 14% empty above it and 5.5% below, so `contain` alone fits the height and leaves the pack touching the card's bottom edge while a visible gap sits above it. That reads as spilling out of the card. Padding keeps the pack off every edge whatever an individual photo does, and the transform takes out the remaining top-heavy bias. Both are relative, so they hold when the card scales on narrow screens. */ padding:8%; object-fit:contain; display:block; transform:translateY(-4%); } /* The brand emblem is drawn centred already, and its tile carries its own bleed, so it opts out of both corrections. */ #sh-guide .l2-card img.is-placeholder{padding:0;transform:none} /* Edge fades. Figma: 80 x 160 rectangles pinned to the strip edges, white opaque across the outer half, then fading out towards the middle. The stops follow a smoothstep curve (3t^2 - 2t^3), not a straight ramp. A linear fade arrives at transparent with its slope still steep, and the eye reads that kink as a hard vertical edge running down the product card (Mach banding) even though the maths says the alpha is 0 there. Smoothstep flattens the curve at BOTH ends, so the fade has no detectable start and no detectable finish. Each stop's alpha is mixed off the token, so the white is never retyped as a literal. Note the percentage is required: color-mix(var(--card), transparent) without one is a 50/50 mix, i.e. alpha 0.5, which is what put the edge there in the first place. The name of each variable IS its alpha. */ #sh-guide .l2-strip::before, #sh-guide .l2-strip::after{ --f96:color-mix(in srgb,var(--card) 96%,transparent); --f84:color-mix(in srgb,var(--card) 84%,transparent); --f68:color-mix(in srgb,var(--card) 68%,transparent); --f50:color-mix(in srgb,var(--card) 50%,transparent); --f32:color-mix(in srgb,var(--card) 32%,transparent); --f16:color-mix(in srgb,var(--card) 16%,transparent); --f04:color-mix(in srgb,var(--card) 4%,transparent); --f00:color-mix(in srgb,var(--card) 0%,transparent); content:''; position:absolute; top:0; width:var(--fade); height:100%; z-index:3; pointer-events:none; } /* First declaration = plain linear ramp for engines without color-mix (pre-2023). Still token-only: `transparent` interpolates premultiplied, so it fades to nothing rather than through grey. */ #sh-guide .l2-strip::before{ left:0; background:linear-gradient(to right,var(--card) 0%,var(--card) 50%,transparent 100%); background:linear-gradient(to right, var(--card) 0%, var(--card) 50%, var(--f96) 56.25%, var(--f84) 62.5%, var(--f68) 68.75%, var(--f50) 75%, var(--f32) 81.25%, var(--f16) 87.5%, var(--f04) 93.75%, var(--f00) 100%); } #sh-guide .l2-strip::after{ right:0; background:linear-gradient(to left,var(--card) 0%,var(--card) 50%,transparent 100%); background:linear-gradient(to left, var(--card) 0%, var(--card) 50%, var(--f96) 56.25%, var(--f84) 62.5%, var(--f68) 68.75%, var(--f50) 75%, var(--f32) 81.25%, var(--f16) 87.5%, var(--f04) 93.75%, var(--f00) 100%); } /* ── the belt ───────────────────────────────────────────────────────────── The products drift through the window at a constant speed and never stop. One CSS animation owns it end to end, so there is no JS in the loop at all: no second clock to drift against, nothing to interrupt, and a hidden tab parks and resumes on its own. `linear` is the correct easing here rather than a compromise, because the motion has no start and no end to soften. THE KEYFRAMES MUST NOT CONTAIN var(). A custom property inside an animated value drops the animation off the compositor and onto the main thread, where it is repainted at whole-pixel positions every frame. At 75 px/s that is about one pixel per frame, so the rounding is the whole movement and the drift visibly steps. This is the one case where "it is a transform, so it is composited" is not enough. So the gap lives in the cards' own margin instead of the flex container's `gap`. One copy then measures exactly ten times --step, and the travel is a plain percentage of the belt: seamless, and expressible without a single variable. Leaving the gap out of that stride is what puts a seam at the wrap. TWO copies, and the belt starts HALF a copy to the left of the window. Starting at the first card leaves nothing behind it, so the opening frames show bare beige to the left of the leading card and the belt reads as a strip with an end rather than a loop. Half a copy of lead-in covers the window at the start (belt 800..1120 of 0..3520) and still covers it at the end of the lap (2560..2880). An earlier version used three copies, which also worked but held ten more cards that are never on screen, for 3.5 MB of GPU tiles. THE 50% AND THE COPY COUNT ARE ONE NUMBER. The travel is 1/L2_BELT_COPIES of the belt, so if src/loading-v2.js ever renders a different number of copies this has to change with it, or the wrap lands mid-copy and jumps. */ #sh-guide .l2-belt{ position:absolute; top:0; /* Start one whole copy to the left, so the window is full from the first frame and there is always product behind the leading card. --belt-lead is the product count, set by the JS that renders the copies. A static property, not a keyframe, so it costs the animation nothing. */ left:calc((var(--s) - var(--cw)) / 2 - var(--step) * var(--belt-lead, 10)); height:var(--cw); display:flex; /* 19.5s for ten products is 90 px/s: a card crosses the window in about 3.7s, so a typical ten-second wait shows five products without feeling hurried. A previous version worked this out at runtime, snapping the duration so the belt advanced a whole number of device pixels per frame and the photos were never resampled. Measured afterwards, it did not do that: macOS vsync time jitters about a millisecond, the compositor evaluates the animation at the frame's real time, and the belt landed on a whole device pixel on 4.2% of frames instead of all of them. The same spread shows on a bare control page, so it is the platform, not this screen, and nothing here can fix it. A constant it is. The constant is the SPEED, not the lap: with more products the lap has to get longer, not the belt faster, or the character of the motion changes. */ --belt-duration:19.5s; /* Prefixed name: keyframes are global to the document no matter how deeply the rule using them is scoped, so this is the one identifier the wrapper cannot isolate on its own. */ animation:sh-guide-l2-belt var(--belt-duration) linear infinite; will-change:transform; } @keyframes sh-guide-l2-belt{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } /* one copy of two — see note above */ } @media(prefers-reduced-motion:reduce){ #sh-guide .l2-belt{animation:none} } /* Progress ring sits ABOVE the window, as in Figma (Base + Current are the last two children of the Loading frame). */ #sh-guide .l2-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:4; transform:rotate(-90deg); /* start the arc at 12 o'clock, run clockwise */ pointer-events:none; /* Own compositing layer. stroke-* is a paint property, and this element sits across the whole area the cards travel through, so without a layer of its own every progress update invalidates the cards underneath it too. */ will-change:transform; } #sh-guide .l2-track-base{ stroke:var(--bg2); } #sh-guide .l2-track-fill{ stroke:var(--accent); stroke-linecap:round; /* Figma arc cornerRadius 100. The overhang SVG adds is compensated in JS. */ } /* ── status line ───────────────────────────────────────────────────────── */ #sh-guide .l2-status{ /* Compact status style for the loading message. */ width:100%; margin:0; font-family:var(--sans); font-weight:600; font-size:16px; line-height:20px; letter-spacing:-.005em; color:var(--ink); text-align:center; opacity:1; /* Matches L2_STATUS_FADE_WAIT_MS in src/loading-v2.js, for equal fade-out and fade-in durations. */ transition:opacity .52s ease; } /* No width breakpoint: --s is already min(320px, content width), so below 384px (iPhone SE is 375) the ring, card, gap, slot step and fade all shrink as one unit and the SVG follows its viewBox. Padding, spacing and type stay at the Figma values on every width. */ @media(prefers-reduced-motion:reduce){ #sh-guide .l2-status{transition:none} } /* styles/result.css */ /* Result page — pixel-ported from Figma (node 5866:212547). Content column 780, hero banner 1220, section rhythm 128. Cards use the 1px outline, except advisory (red) and premium (amber). */ /* ---------- layout / rhythm ---------- */ #sh-guide .res{width:100%;margin:0 auto;padding:64px 32px 80px;display:flex;flex-direction:column;align-items:center} #sh-guide .res>section{width:100%;max-width:780px;margin-bottom:128px} #sh-guide .res>.hero{max-width:1280px} /* hero banner: fluid up to 1280, then capped (looks bad full-width on wide monitors) */ #sh-guide .res>section:last-of-type{margin-bottom:48px} #sh-guide .dico{display:inline-flex;line-height:0;flex:none} #sh-guide .dico svg{width:1em;height:1em;display:block} /* ---------- HERO ---------- */ #sh-guide .hero{background:var(--ink);border-radius:16px;padding:64px;display:flex;flex-direction:column;align-items:center;text-align:center} #sh-guide .hero-av{display:flex;align-items:center} #sh-guide .hero-av img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);margin-left:-12px;background:#3a1226} #sh-guide .hero-av img:first-child{margin-left:0} #sh-guide .hero-av img:nth-child(2){width:80px;height:80px;border-width:2.5px;position:relative;z-index:1} #sh-guide .hero-badge{display:inline-flex;align-items:center;gap:8px;margin-top:-2px;background:var(--green);color:#fff;border-radius:12px 0 12px 0;padding:8px 12px;font-family:var(--sans);font-weight:400;font-size:16px;line-height:20px;letter-spacing:-.005em} #sh-guide .hero-badge svg{width:20px;height:20px} /* inner content column capped at 580 (Figma "Container" maxWidth:580) */ #sh-guide .hero h1{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xl-size);line-height:var(--title-xl-line);letter-spacing:-.03em;color:#fff;margin:40px auto 0;width:100%;max-width:580px} #sh-guide .hero-lead{font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-.005em;color:#fff;margin:24px auto 0;width:100%;max-width:580px} #sh-guide .hero-mail{font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-.005em;color:#fff;opacity:.7;margin:24px auto 0;width:100%;max-width:580px} #sh-guide .hero-mail b{font-weight:600} /* ---------- section head ---------- */ #sh-guide .sec{display:flex;flex-direction:column;gap:40px} #sh-guide .sec-head{display:flex;flex-direction:column;gap:16px} #sh-guide .sec-head h2{font-family:var(--heading-font);font-weight:700;font-size:var(--title-lg-size);line-height:var(--title-lg-line);letter-spacing:-.025em;color:var(--ink);margin:0} #sh-guide .sec-lead{font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-.005em;color:var(--ink);margin:0} #sh-guide .sec-body{display:flex;flex-direction:column;gap:16px} /* ---------- advisory (Q12) ---------- */ #sh-guide .advisory{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;background:#fdedef;border:1px solid var(--red);border-radius:16px;padding:24px} #sh-guide .adv-txt{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px} #sh-guide .advisory h3{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xs-size);line-height:var(--title-xs-line);letter-spacing:-.01em;color:var(--ink);margin:0} #sh-guide .advisory p{font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.0025em;color:var(--ink);margin:0} /* ---------- pillar tiles ---------- */ #sh-guide .ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #sh-guide .ptile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px} #sh-guide .ptile-top{display:flex;align-items:center;gap:8px} /* flex + line-height:0 → the span is exactly 36px tall; as a plain inline box it would inherit the body line-height and render ~58px, padding the tile. */ #sh-guide .pico{display:flex;line-height:0;font-size:36px;color:var(--c)} #sh-guide .ptx{min-width:0} #sh-guide .pname{font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;color:var(--ink)} /* full state summary — no line-clamp; engine keeps displayText short (1 line) */ #sh-guide .pstate{font-family:var(--sans);font-weight:400;font-size:14px;line-height:18px;letter-spacing:-.0025em;color:var(--tertiary);margin-top:4px} /* Grid stretches every tile to the tallest in its row, so a one-line state text would leave the bar floating mid-card while its neighbour's sits lower. auto margin eats the leftover space above it and lines all the bars up on the row's baseline; the 16px gap still applies as the minimum. */ #sh-guide .pbar{margin-top:auto;height:4px;border-radius:999px;background:var(--line);overflow:hidden} #sh-guide .pbar i{display:block;height:100%;border-radius:999px;background:var(--c)} /* ---------- package card ---------- */ #sh-guide .pkgcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px} #sh-guide .divider{height:1px;background:var(--bg2);border-radius:999px} #sh-guide .prow{display:flex;gap:16px} #sh-guide .pimg{width:88px;height:88px;flex:none} #sh-guide .pimg img{width:100%;height:100%;object-fit:contain} /* Brand placeholder (Superionherbs emblem) — rounded beige tile; the webp already carries the beige background, so it just needs clipped corners. */ #sh-guide .pimg.ph{border-radius:12px;overflow:hidden} #sh-guide .pbody{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px} #sh-guide .pbody-text{display:flex;flex-direction:column;gap:4px} #sh-guide .pname-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px} #sh-guide .pname{font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;color:var(--ink)} /* Clickable product title → e-shop. Looks identical to plain text (inherits color, no underline); underline appears only on hover. */ #sh-guide .pname-link{color:inherit;text-decoration:none} @media (hover:hover){#sh-guide .pname-link:hover{text-decoration:underline}} #sh-guide .pprice{font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap} #sh-guide .pmeta{font-family:var(--sans);font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.0025em;color:var(--tertiary)} #sh-guide .pdesc{font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.0025em;color:var(--ink)} #sh-guide .pwhy{background:var(--bg);border-radius:0 16px 0 16px;padding:16px;font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.0025em;color:var(--ink)} #sh-guide .pwhy b{font-weight:600} /* summary (price + buy) */ #sh-guide .summary{display:flex;flex-direction:column;gap:24px} #sh-guide .sum-prices{display:flex;flex-direction:column;gap:4px} #sh-guide .sum-strike{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xs-size);line-height:var(--title-xs-line);letter-spacing:-.01em;color:var(--tertiary);text-decoration:line-through;text-align:right} #sh-guide .sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px} #sh-guide .sum-title{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xs-size);line-height:var(--title-xs-line);letter-spacing:-.01em;color:var(--ink);text-wrap:balance} #sh-guide .sum-big{font-family:var(--heading-font);font-weight:700;font-size:var(--title-sm-size);line-height:var(--title-sm-line);letter-spacing:-.015em;color:var(--ink)} #sh-guide .sum-note{font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.003em;color:var(--tertiary)} #sh-guide .sum-save{font-family:var(--sans);font-weight:600;font-size:14px;line-height:22px;letter-spacing:-.003em;color:var(--green)} #sh-guide .btn-buy{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:56px;border:none;border-radius:999px;background:var(--primary);color:#fff;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;padding:0 24px} @media (hover:hover){#sh-guide .btn-buy:hover{background:var(--primary-2)}} #sh-guide .btn-buy svg{width:24px;height:24px;flex:none} /* ---------- premium ---------- */ #sh-guide .premium{background:var(--card);border:1px solid var(--amber);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;align-items:stretch} #sh-guide .prem-tag{align-self:flex-start;background:linear-gradient(90deg,#f68f28,#b96a1d);color:#fff;border-radius:12px 0 12px 0;padding:4px 10px;font-family:var(--sans);font-weight:400;font-size:16px;line-height:20px;letter-spacing:-.005em} #sh-guide .prem-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} #sh-guide .prem-h{display:flex;flex-direction:column;gap:6px} #sh-guide .prem-h h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:28px;letter-spacing:-.015em;color:var(--ink);margin:0} #sh-guide .prem-sub{font-family:var(--sans);font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.0025em;color:var(--tertiary);margin:0;max-width:338px} #sh-guide .premium.is-expanded .prem-sub{max-width:none} #sh-guide .prem-price{text-align:right;flex:none} #sh-guide .prem-price .pt-big{font-family:var(--heading-font);font-weight:700;font-size:var(--title-sm-size);line-height:var(--title-sm-line);letter-spacing:-.015em;color:var(--ink)} #sh-guide .prem-body{border-top:1px solid var(--bg2);padding-top:16px;display:flex;flex-direction:column;gap:16px} #sh-guide .prem-body[hidden]{display:none} #sh-guide .prem-extra-label{font-family:var(--sans);font-weight:600;font-size:14px;line-height:16px;letter-spacing:-.0025em;color:#f68f28} #sh-guide .prem-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:none;color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:20px;text-decoration:underline;text-underline-offset:4px} #sh-guide .prem-toggle svg{width:18px;height:18px} /* ---------- dosing ---------- */ /* cards fill the row by count: 1 → full, 2 → 50/50, 3 → thirds, 4+ → wrap & refill */ #sh-guide .doses{display:flex;flex-wrap:wrap;gap:8px} #sh-guide .dose{flex:1 1 220px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px} /* Figma 5866:212693 — Title: Open Runde Semibold 16/20 ls -0.5%, icon 36 */ #sh-guide .dose-h{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;color:var(--ink)} #sh-guide .dose-h .dico{font-size:36px;color:var(--c)} #sh-guide .dose-list{display:flex;flex-direction:column} /* name over dose (vertical), 8px gap to the divider above/below */ #sh-guide .dose-row{display:flex;flex-direction:column;gap:2px;padding:8px 0} #sh-guide .dose-row:first-child{padding-top:0} #sh-guide .dose-row+.dose-row{border-top:1px solid var(--bg2)} /* name: Semibold 14/16 ink · dose: Regular 14/22 ink (both -0.25% ls) */ #sh-guide .dose-row .dn{font-family:var(--sans);font-weight:600;font-size:14px;line-height:16px;letter-spacing:-.0025em;color:var(--ink);overflow-wrap:anywhere} #sh-guide .dose-row .dt{font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.0025em;color:var(--ink);overflow-wrap:anywhere} /* co čekat v čase */ #sh-guide .expect{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:24px} #sh-guide .expect-h{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;color:var(--ink)} #sh-guide .expect-h .dico{font-size:36px;color:var(--green)} #sh-guide .journey{display:flex;flex-direction:column;gap:24px} #sh-guide .jstep{display:flex;gap:16px;position:relative} #sh-guide .jstep::before{content:'';position:absolute;left:17px;top:36px;bottom:-24px;width:2px;background:var(--green-16)} #sh-guide .jstep:last-child::before{display:none} #sh-guide .jdot{width:36px;height:36px;flex:none;border-radius:50%;background:var(--green-16);color:var(--green);display:grid;place-items:center;font-family:var(--heading-font);font-weight:700;font-size:16px;position:relative;z-index:1} #sh-guide .jstep.single{display:block} #sh-guide .jstep.single::before{display:none} #sh-guide .jstep.single .jbody{padding-top:0} #sh-guide .jbody{padding-top:7px} #sh-guide .jh{font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;color:var(--ink);margin-bottom:4px} #sh-guide .jbody p{font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.003em;color:var(--muted);margin:0} /* ---------- coaching ---------- */ #sh-guide .coach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} /* odd count → last card spans full width (1→full, 3→third full, 2/4→clean rows) */ #sh-guide .coach:last-child:nth-child(odd){grid-column:1 / -1} #sh-guide .coach{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px} #sh-guide .coach-h{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;color:var(--ink)} #sh-guide .coach-h .cico{font-size:36px;color:var(--c)} #sh-guide .coach-list{display:flex;flex-direction:column} #sh-guide .coach .cli{margin:0;padding:8px 0;font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;letter-spacing:-.003em;color:var(--ink)} #sh-guide .coach .cli:first-child{padding-top:0} #sh-guide .coach .cli+.cli{border-top:1px solid var(--bg2)} /* ---------- callbox (CTA) ---------- */ #sh-guide .callbox{background:var(--ink);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center} /* Figma: the text block FILLs the box (780-48=732) and the centering comes from text-align, not from hugging. Hugging would wrap the lines at a different width. */ #sh-guide .callbox-text{display:flex;flex-direction:column;align-self:stretch;gap:16px} #sh-guide .callbox h3{font-family:var(--heading-font);font-weight:700;font-size:var(--title-md-size);line-height:var(--title-md-line);letter-spacing:-.02em;color:#fff;margin:0} #sh-guide .callbox p{font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-.005em;color:rgba(255,255,255,.7);margin:0} /* Figma: node opacity 0.7 */ /* ---------- buttons (dark / light) ---------- */ #sh-guide .btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:48px;border:none;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:14px;line-height:16px;letter-spacing:-.0025em;padding:0 20px;white-space:nowrap} @media (hover:hover){#sh-guide .btn-dark:hover{background:#43102a}} #sh-guide .btn-light{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:56px;border:none;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-.005em;padding:0 24px} @media (hover:hover){#sh-guide .btn-light:hover{background:#f1ebe4}} #sh-guide .btn-light svg{width:24px;height:24px} /* ---------- responsive (Figma: desktop 1560 · tablet 768 · mobile 390) ---------- Tablet & below use the Figma MOBILE text styles (Headline | Mobile): H1 48→32 · H2 40→28 · H3 32→24 · H4 24→20 · H5 20→18 · Highlight M 24→20. Body (16/14) stays unchanged. */ @media(max-width:1024px){ #sh-guide .res{padding:40px 24px 48px} /* vertical 64→40, gutter 32→24 */ #sh-guide .res>section{margin-bottom:96px} #sh-guide .sec{gap:24px} /* 40→24 (container gap) */ #sh-guide .hero{padding:48px 40px} #sh-guide .hero h1{font-size:var(--title-xl-mobile-size);line-height:var(--title-xl-mobile-line)} /* H1 mobile */ #sh-guide .sec-head h2{font-size:var(--title-lg-mobile-size);line-height:var(--title-lg-mobile-line)} /* H2 mobile */ #sh-guide .callbox h3{font-size:var(--title-md-mobile-size);line-height:var(--title-md-mobile-line)} /* H3 mobile */ #sh-guide .prem-h h3{font-size:20px;line-height:24px} /* Highlight/M mobile */ #sh-guide .advisory h3{font-size:var(--title-xs-mobile-size);line-height:var(--title-xs-mobile-line)} /* H5 mobile */ #sh-guide .sum-strike, #sh-guide .sum-title{font-size:var(--title-xs-mobile-size);line-height:var(--title-xs-mobile-line)} /* H5 mobile */ #sh-guide .sum-big, #sh-guide .pt-big{font-size:var(--title-sm-mobile-size);line-height:var(--title-sm-mobile-line)} /* H4 mobile */ #sh-guide .ptile, #sh-guide .pkgcard, #sh-guide .dose, #sh-guide .expect, #sh-guide .coach{padding:16px} /* box padding 24→16 on tablet/mobile */ } /* narrow tablet / large phone: stack the dosing cards full-width */ @media(max-width:760px){ #sh-guide .dose{flex-basis:100%} } /* mobile: layout (grids stack, gutters) + slightly tighter spacing */ @media(max-width:640px){ #sh-guide .res{padding-left:16px;padding-right:16px} /* gutter →16 */ #sh-guide .res>section{margin-bottom:64px} #sh-guide .hero{padding:36px 24px} #sh-guide .hero h1{margin-top:28px} #sh-guide .hero-lead, #sh-guide .hero-mail{margin-top:16px} #sh-guide .ptiles{grid-template-columns:repeat(2,1fr)} /* 2×3 on mobile */ /* two columns leave the text ~110px wide next to the icon → name wraps to 3 lines. Stack the icon above instead (same 36px), so the text gets the full tile width. */ #sh-guide .ptile-top{flex-direction:column;align-items:flex-start} #sh-guide .ptx{width:100%} #sh-guide .coach-grid{grid-template-columns:1fr} #sh-guide .pimg{width:64px;height:64px} #sh-guide .advisory{flex-direction:column;align-items:stretch;gap:16px} #sh-guide .advisory .btn-dark{width:100%} #sh-guide .prem-head{flex-direction:column;gap:14px} #sh-guide .prem-price{text-align:left} #sh-guide .callbox{padding:32px 20px} } @media(max-width:420px){ #sh-guide .hero-badge{font-size:14px;line-height:16px;padding:7px 11px} #sh-guide .hero-badge svg{width:17px;height:17px} #sh-guide .pname-row{flex-direction:column;gap:2px} } /* Supplement / SPŽI disclaimer in the result footer. */ #sh-guide .disclaimer{max-width:760px;margin:24px auto 8px;font-size:12px;line-height:20px;letter-spacing:0;color:var(--tertiary);text-align:center} #sh-guide .disclaimer b{font-weight:600} /* ---------- Ontraport konzultační popup („Nechte si od nás zavolat") ---------- */ /* Formulář je cross-origin iframe Ontraportu — uvnitř stylovat nejde (Option A). Stylujeme jen, co je v našem DOM: ztmavovací overlay (scrim) sladíme s naší --ink a na mobilu pojistíme, aby modal nikdy nepřetekl přes okraj obrazovky. */ /* scrim = design-system token Interaction/Overlay (var(--overlay)) */ .opf__overlay{background:var(--overlay,rgba(46,0,21,.48)) !important;} @media (max-width:520px){ .OPF__modal-form, .OPF__modal-form__wrapper, .OPF__modal-form__iframe{max-width:calc(100vw - 24px) !important;} } /* styles/landing.css */ /* Landing (entry screen) — 1:1 with Figma node 5949:218801. Four stacked sections: hero (beige) → how it works → what we look at → CTA. This file holds ONLY what the landing introduces. Everything the design shares with the result page is reused as-is: .hero-badge, .sec / .sec-head / .sec-lead, .callbox, .btn-light, .pico, .pname (result.css) and .btn-primary (base.css). Responsive values follow the same rules those components already use: typography + spacing switch to "Mobile" at ≤1024, side gutter steps 32 → 24 → 16. */ /* ---------- page / section shell ---------- */ /* The content sections are full-bleed and carry their own padding. The opening hero instead follows the result page's banner geometry. */ #sh-guide .lp-sec{display:flex;justify-content:center;padding:64px 32px;background:var(--card)} /* Same geometry as .res > .hero: a fluid banner, capped at 1280px, with the result-page spacing around it. The following landing section owns 64px of its own top padding, so the banner contributes the other 64px of the result's 128px section gap. Only the beige surface and its ink stay unique here. */ #sh-guide .lp-sec--hero{width:calc(100% - 64px);max-width:1280px;margin:64px auto 64px;padding:64px;background:var(--bg);border-radius:16px} #sh-guide .lp-sec__in{width:100%;max-width:780px} /* ---------- hero ---------- */ /* Avatars + badge stacked, badge tucked up 2px (Figma itemSpacing -2). */ #sh-guide .landing__col{width:100%;max-width:580px;display:flex;flex-direction:column;align-items:center;gap:40px} #sh-guide .landing__intro{display:flex;flex-direction:column;align-items:center} /* Three overlapping circular photos; middle is larger and sits on top. The beige border is baked into each PNG (exported from Figma), so the -12px overlap reads as a clean separation ring. */ #sh-guide .landing__avatars{display:flex;align-items:center} #sh-guide .landing__avatars img{display:block;position:relative;border-radius:50%} #sh-guide .landing__avatars .av--sm{width:64px;height:64px} #sh-guide .landing__avatars .av--lg{width:80px;height:80px} #sh-guide .landing__avatars img:nth-child(1){z-index:1} #sh-guide .landing__avatars img:nth-child(2){z-index:3;margin-left:-12px} #sh-guide .landing__avatars img:nth-child(3){z-index:2;margin-left:-12px} /* Heading + lede (16px gap), centered. */ #sh-guide .landing__head{display:flex;flex-direction:column;gap:16px;width:100%;text-align:center} #sh-guide .landing__title{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xl-size);line-height:var(--title-xl-line);letter-spacing:-0.03em;color:var(--ink)} #sh-guide .landing__title .accent{color:var(--primary)} #sh-guide .landing__lede{margin:0;font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-0.005em;color:var(--ink)} /* The hero CTA is a fixed 320×56 in Figma, not the full-width .btn-primary the quiz uses; max-width keeps it from overflowing the 16px gutter on small phones. */ #sh-guide .lp-start{width:320px;max-width:100%;height:56px} /* ---------- how it works (3 numbered steps) ---------- */ /* Same fill-the-row model as .doses (result.css): a flex basis lets the steps share the row evenly and wrap when the column narrows. basis 200 + column-gap 64 = 728 < 780, so all three fit the desktop container at the Figma width of 217px each. Row gap is the 24 container-gap value, used once they stack. */ #sh-guide .lp-steps{display:flex;flex-wrap:wrap;column-gap:64px;row-gap:24px} #sh-guide .lp-step{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:16px} #sh-guide .lp-num{width:40px;height:40px;flex:none;border-radius:999px;background:var(--green-16);color:var(--green);display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:16px;line-height:20px;letter-spacing:-0.005em} #sh-guide .lp-step-tx{display:flex;flex-direction:column;gap:8px} /* Headline/H5 — shared by the step titles and the safety note. */ #sh-guide .lp-step h3, #sh-guide .lp-note h3{font-family:var(--heading-font);font-weight:700;font-size:var(--title-xs-size);line-height:var(--title-xs-line);letter-spacing:-0.01em;color:var(--ink);margin:0} /* ---------- what we look at (6 pillar tiles) ---------- */ /* Same 3-column grid as .ptiles (result.css), so tile widths match the design exactly ((780-16)/3 = 255). This variant is outlined instead of shadowed and carries a description in place of the progress bar. Icon color comes from the --c custom property that cvar() sets, exactly like .ptile. */ #sh-guide .lp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} /* Outline via inset shadow, not border: the Figma stroke is INSIDE-aligned, so a real border would add 2px to the tile and steal 2px from the text column. */ #sh-guide .lp-tile{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px} #sh-guide .lp-tile .pico{align-self:flex-start} /* icon frame is 36×36, not a full-width row */ #sh-guide .lp-tile-tx{display:flex;flex-direction:column;gap:4px} #sh-guide .lp-tile p{margin:0;font-family:var(--sans);font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.0025em;color:var(--tertiary)} /* ---------- safety note ---------- */ /* Plain supporting content below the pillar tiles, not a second framed panel. */ #sh-guide .lp-note{padding:0} #sh-guide .lp-note-tx{display:flex;flex-direction:column;gap:8px;min-width:0} #sh-guide .lp-note p{margin:0;font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-0.005em;color:var(--muted)} /* ---------- responsive ---------- */ /* ≤1024 = Mobile text styles + reduced spacing (tablet and mobile share these). H1 48→32 · H5 20→18 · section padding 64/32 → 40/24. H2 (.sec-head h2), H3 (.callbox h3) and .sec gap already switch here via result.css. Body sizes (16/26, 14/20) stay put. */ @media(max-width:1024px){ #sh-guide .lp-sec{padding:40px 24px} #sh-guide .lp-sec--hero{width:calc(100% - 48px);margin:40px auto 56px;padding:48px 40px} #sh-guide .landing__col{gap:24px} /* container gap 40→24, same as .sec */ #sh-guide .landing__title{font-size:var(--title-xl-mobile-size);line-height:var(--title-xl-mobile-line)} #sh-guide .lp-step h3, #sh-guide .lp-note h3{font-size:var(--title-xs-mobile-size);line-height:var(--title-xs-mobile-line)} #sh-guide .lp-tile{padding:16px} } /* Force the steps to full width before the 64px column gap can squeeze them into a lopsided 2 + 1 row (same guard .dose uses at 760). */ @media(max-width:860px){ #sh-guide .lp-step{flex-basis:100%} } /* Tiles drop from 3 to 2 columns at 760, earlier than .ptiles does at 640: holding 3 columns down to 640 leaves the text 160px wide, narrower than the 2-column state right below it, so the ladder would work against itself. The 2-column grid then holds across every common phone (430 down to 360) and only gives up below that, where 2-up would leave the text under ~120px. */ @media(max-width:760px){ #sh-guide .lp-tiles{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ #sh-guide .lp-sec{padding-left:16px;padding-right:16px} /* gutter →16 */ #sh-guide .lp-sec--hero{width:calc(100% - 32px);margin:40px auto 24px;padding:36px 24px} #sh-guide .lp-note-tx{width:100%} } @media(max-width:359px){ #sh-guide .lp-tiles{grid-template-columns:1fr} }