/* ===================================================================== meinfoto.de homepage (GB-201089) · PROJECT TOKEN LAYER (lane D) ----------------------------------------------------------------- Loads after tokens.css. Holds ONLY the pull-forwards agreed in the build brief §9.2. Each one is a v6.2 write-back candidate, registered in HANDOVER.md. Nothing here overrides a v6.1 value. ===================================================================== */ :root{ /* Hero headline only · 700 · line-height 1.1. On phones the component caps it further so "Deutschlands" never overflows at 320 (brief §6.2, DV-08). */ --fs-display: clamp(36px, 4.2vw, 56px); --lh-display: 1.1; /* Hero price only. */ --fs-price-hero: clamp(32px, 3vw, 44px); /* The v6.1 §3 measured remedy for --text-secondary: 5.33:1 on white, 4.82:1 on the canvas. For "ab" / "je" prefixes and any secondary text that carries meaning, struck reference prices included (Phase 8: #878787 is 3.59:1 on white). --text-secondary (#878787) stays for disabled states and decoration. */ --text-secondary-aa: #6B6B6B; /* No price amount below 600 anywhere; 700 in merchandised components. Note: live meinfoto.de serves its "700" Montserrat face as the SemiBold cut (usWeightClass 600), so 600 and 700 render the same file here, as on live. */ --fw-price-min: 600; /* Stop-point 8: the live Trustpilot TrustBox is a 250 px iframe at 390, 768 and 1440 (reference/live-fetch/length-p8, cookies declined and accepted). The reviews slot holds its place. */ --slot-trustbox: 250px; /* 3 Nov (Codex review): every size and timing the components use, named here, so app.css holds no literal design value. Values measured from live are marked "live". Structural constants stay literal in app.css: 0, 1–3 px hairlines, focus rings and underline offsets, and the breakpoints in media queries. */ --target: 44px; /* minimum touch target (brief §16) */ --target-s: 24px; /* inline and footer links (WCAG 2.5.8) */ --cta-h: 52px; /* primary button (D1: 52–56) */ --cta-h-hero: 56px; --cta-h-banner: 48px; --rb-chip-h: 24px; /* prototype review panel only (compact since 3 Nov) */ --rb-panel-w: 21rem; /* v36: the review panel's width, height cap and legend column, moved here from app.css */ --rb-panel-h: 30rem; --rb-legend-w: 6.5rem; --ico-xs: 16px; --ico-s: 18px; --ico-m: 20px; --ico-util-h: 25px; /* live header utility icons */ --count-h: 18px; /* live cart count */ --hd-top-h: 60px; /* live desktop header row */ --logo-w: 230px; /* live */ --search-w: 336px; /* live */ --search-h: 40px; /* live */ --mega-item-w: 130px; /* live mega menu column */ --nav-img-w: 125px; /* live menu image, 1× */ --nav-img-h: 75px; --ph-top-h: 50px; /* live phone header */ --ph-row-h: 46px; /* live phone L1 row */ --ph-logo-w: 133px; /* live */ --ph-logo-min: 88px; --pay-logo-h-m: 20px; /* v63: footer payment logos on phones, two even rows 5 + 3 */ --burger-w: 48px; --burger-bar-w: 20px; --burger-gap: 5px; --burger-shift: 7px; /* the bars meet in the × */ --drawer-max: 420px; --dr-row-h: 60px; /* live drawer head and DEALS rows */ --dr-tile-h: 130px; --dr-img-w: 88px; /* live drawer image */ --dr-img-h: 53px; --login-w: 300px; --tab-inset: 6px; /* top-bar pull tab */ --fr-dot: 22px; /* frames: the dot */ --fr-ctl-inset: 4px; --fr-edge: 20px; /* frames: labels keep this far from the image edge (read by app.js) */ --fr-edge-m: 14px; /* the same on phones */ --swatch: 10px; --swatch-l: 14px; --nl-btn-min: 320px; --dur-pulse: 900ms; /* frames: the dots' pulse */ --stagger: 140ms; /* frames: delay between labels */ --pill-delay: 500ms; /* "Mehr Infos ›" after half a second of hover (CDUS) */ /* the CDUS hero (3 Nov): headline sizes, claim rows, the price tag on the photo */ --fs-hero-h1: clamp(36px, 3.7vw, 56px); /* from 768, CDUS */ --fs-hero-h1-m: clamp(24px, 8.4cqi, 52px); /* phones, CDUS; scales with the copy column */ --lh-hero: 1.04; --fs-hero-em: 17px; /* the bold words of a claim row */ --fs-hero-made: 15px; /* the Made in Germany line (CDUS Gift-Ready) */ --ico-hero: 22px; --ico-flag-w: 14px; /* the live flag before „Made in Germany“, 14 × 10 as live */ --ico-flag-h: 10px; --hero-gap: 40px; /* photo → copy from 1024 */ --img-hero-m: 5 / 4; /* the CDUS phone photo, 1200 × 960 */ --fs-tag-size: clamp(12px, 3.1cqi, 19px); /* the tag's size line; cqi of the photo */ --fs-tag-price: clamp(20px, 6.65cqi, 37px); /* the tag's price */ --fs-tag-size-sm: clamp(10px, 2.3cqi, 14px); /* the narrower tag on MHL's hero photo (3 Nov) */ --fs-tag-price-sm: clamp(18px, 4.8cqi, 27px); --tag-left: 4%; /* where MHL marked it: over the wall above the plant */ --tag-top: 52%; /* the Christmas strip (3 Nov, round 5: "very light golden strip"); the ink is AA on the gold */ --xmas-gold: #FBF5E6; --xmas-gold-line: #EADFC2; /* the four shades MHL compares (XMAS_GOLD); contrast on each: text ≥ 6.9:1, kicker ink ≥ 4.97, teal link ≥ 4.94, red price ≥ 4.22 (large text) */ --xmas-gold-1: #FCF8EE; --xmas-gold-line-1: #EFE6CF; /* champagne */ --xmas-gold-2: #FBF5E6; --xmas-gold-line-2: #EADFC2; /* light gold (v16) */ --xmas-gold-3: #F8EDD3; --xmas-gold-line-3: #E6D5AE; /* soft gold */ --xmas-gold-4: #F3E2B8; --xmas-gold-line-4: #DCC48E; /* warm gold */ --xmas-gold-ink: #7A5A12; --xg-thumb: 80px; /* mf-newsletter (v27, 3 Nov, MHL: "lets preserve this as it is", "for desktop and mobile"): live's newsletter, WhatsApp and merchOne cards with live's own values, measured on www.meinfoto.de at 1440 (desktop UA) and 390 (iPhone UA) */ --nl-band: var(--grey-f3); /* live's band behind the cards (#F3F3F3); this block only */ --nl-card: #F9F9F9; --nl-line: #E1E1E1; --nl-veil: rgba(255,255,255,.8); /* the text panel over the illustration */ --nl-wa: #25D366; /* WhatsApp green, live's WhatsApp button */ --nl-max: 1020px; --nl-main: 680px; --nl-side: 340px; --nl-img-w: 318px; --nl-veil-in: 170px; /* desktop: the panel's text starts right of the figures */ --nl-circle: 60px; --nl-circle-m: 45px; --nl-ico: 40px; --nl-ico-m: 25px; --nl-ico-b2b: 30px; --nl-ico-wa: 16px; --nl-lift-m: -90px; /* phones: the benefits ride up over the illustration */ --nl-img-c: 170px; /* NL_PHONE=c: the illustration's height (232 as live at 390) */ --nl-lift-c: -66px; /* NL_PHONE=c: the benefits ride up as much, in proportion */ --nl-s2: 2px; --nl-s5: 5px; --nl-s8: 8px; --nl-s9: 9px; /* the 13 px buttons: 35 px tall, as live */ --nl-s10: 10px; --nl-s13: 13px; --nl-s15: 15px; --nl-s18: 18px; --nl-s20: 20px; --nl-s22: 22.1px; --nl-s30: 30px; --nl-s35: 35px; --nl-r: 2px; --nl-fs-8: 8px; --nl-fs-11: 11px; --nl-fs-12: 12px; --nl-fs-13: 13px; --nl-fs-14: 14.4px; --nl-fs-16: 16px; --nl-fs-17: 17px; --nl-fs-18: 18px; --nl-fs-24: 24px; --nl-lh-b2b: 31.5px; --dur-xc: 4000ms; /* option b: each product, then the next (v27, MHL: "bit faster"; was 5 s) */ --dur-xfade: 600ms; /* option b: the photo cross-fade */ --xc-ctl: 36px; /* option b: the height of the dots' row on the photo */ /* option c: the square photo */ /* the Trusted Shops trustbadge (3 Nov): its face and the two colours of Trusted Shops' own sprite */ --font-ts: Arial, Helvetica, sans-serif; --tsb-fs: 8px; /* one em of the badge on phones: 128 × 64 */ --tsb-fs-d: 10px; /* from 768: 160 × 80, the live size */ --ts-ink: #181C20; /* Trusted Shops sprite, e-in-circle */ --ts-muted: #4D4D4D; /* Trusted Shops sprite, ellipsis */ --ts-track: var(--border-subtle); --dur-tv: 8000ms; /* the TV logos: 0.5 s in, 3 s, 0.5 s out, each in turn (live) */ --fs-deal: clamp(48px, 5.2vw, 76px); /* the 20 % deal's big line, as CDUS "20% off" (3 Nov; CDUS sizes) */ --fs-deal-sub-m: 18px; /* the deal's scope line on phones (CDUS) */ --fs-deal-m: 36px; /* phones (4 Nov): „Zusätzlich 20%“ on one line, as CDUS's 48 px "20% off" */ --img-deal-m: 1500 / 770; /* phones: MHL's slim cut of the deal image */ --xs-card: 84%; /* phones: a Christmas slide; the next one peeks in by 16 % (4 Nov) */ --xs-card-s: 90%; /* v36: the same below 375 px, so „Weihnachtsschmuck“ fits on one line */ --fs-deal-num: clamp(104px, 11vw, 168px); /* the deal's „20%“, capped by its column */ --ts-stars-yellow: #FFDC0F; /* v62: Trusted Shops' yellow for the Trusted Stars line (MHL's reference: the official widget) */ --r-ts-pill: 999px; /* v59: the Trusted Shops rating pill under the hero button (Amin's „Trusted Shops Rollout“, 9 Nov): a pill like Trusted Shops' own widgets; the page's one round outline */ --star-live: #FDAD30; /* v47: the live hero's star for „3 Produkte GRATIS“ (sampled from the live capture, 4 Nov); the ticks are --sale-red, as live */ --hero-badge-x: 84.3%; /* v70: the hero price badge's centre from 768, of the photo (hero-01 = sage v4 option 4, MHL's PSD crop, 11 Nov): centred under the acrylic */ --hero-badge-y: 59.4%; /* (71.8–96.8 %), below the middle between its bottom (46.3 %) and the left jar's lid (69.9 %) — MHL: "move badge a bit down as it is too close to acrylic" (v69: 58.1); re-measure when the hero photo changes */ --hero-badge-x-m: 86.6%; /* phones: the same spot in the centre 5:4 crop (hero-01-m) */ --hero-badge-y-m: 59.2%; /* phones: 1.1 lower than v69, the most that keeps it off the jar lid (v69: 58.1) */ } /* ---------- MPUK (my-picture.co.uk, 11 Nov 2026): the few tokens the MPUK data needs on top of the MFDE set ---------- */ :root { --dur-tv3: 12000ms; /* three TV logos (Channel 4, ITV, Sky): 0.5 s in, 3 s, 0.5 s out, each in turn, as the MFDE pair */ --heart-w: 1.05em; /* live's footer heart in the hero's "Made with ♥ in Europe" line */ --hd-promo-fs: 14px; /* live's "Free Delivery over £55" beside the logo (desktop) */ --nl-note-fs: 11px; /* live's newsletter footnote under the button */ } :root { --fs-hero-brand: 15px; } /* MPUK: the h1's brand words "MYPICTURE UK –" as a small line over the headline (the section kicker's weight and colour) */ /* MPUK: the badge ("from £6.50 / £32.90") is wider than MFDE's ("ab 6,90"), so on phones its centre moves left to keep MFDE's right margin; still under the acrylic (71.8–96.8 %) */ :root { --hero-badge-x-m: 84.2%; }