/* ========================================================================== KPJ Cares Junior — shared playful system Used by kpj-cares-junior-draft-a.html and kpj-cares-junior-draft-b.html. The shipped kpj-cares-junior.html does NOT use this file and is frozen. Base is the design system from kpj-little-heroes (Flexo, section shells, card/shadow/radius scale, reveal-on-scroll), with the six KPJ Cares Junior logo colours layered on top. NOTE: this file sits in assets/junior/, so asset URLs are ../-relative. ========================================================================== */ /* ── Fonts ───────────────────────────────────────────────────────────────── */ @font-face{font-family:Flexo;font-weight:300;font-display:swap;src:url("../fonts/Flexo-Light.woff2") format("woff2"),url("../fonts/Flexo-Light.woff") format("woff")} @font-face{font-family:Flexo;font-weight:400;font-display:swap;src:url("../fonts/Flexo-Regular.woff2") format("woff2"),url("../fonts/Flexo-Regular.woff") format("woff")} @font-face{font-family:Flexo;font-weight:500;font-display:swap;src:url("../fonts/Flexo-Medium.woff2") format("woff2"),url("../fonts/Flexo-Medium.woff") format("woff")} @font-face{font-family:Flexo;font-weight:600;font-display:swap;src:url("../fonts/Flexo-Demi.woff2") format("woff2"),url("../fonts/Flexo-Demi.woff") format("woff")} @font-face{font-family:Flexo;font-weight:700;font-display:swap;src:url("../fonts/Flexo-Bold.woff2") format("woff2"),url("../fonts/Flexo-Bold.woff") format("woff")} /* ── Tokens ────────────────────────────────────────────────────────────────── Every class is jr-/jrp- prefixed. kpj-chrome.js injects its CSS into at script-execution time — after this file — so bare-element and generic rules from the chrome (header{}, .container{}, body{}) would otherwise win on equal specificity. ────────────────────────────────────────────────────────────────────────── */ :root{ --jr-font:Flexo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --jr-navy:#001f3f; --jr-teal:#39b5b2; --jr-teal-deep:#0f6e6b; /* 6.1:1 on white */ --jr-teal-dark:#0a4f4d; --jr-taupe:#967f65; --jr-taupe-ink:#6f5c46; /* 6.4:1 on white */ --jr-ink:#1e293b; --jr-body:#475569; --jr-muted:#64748b; --jr-faint:#94a3b8; --jr-line:#e2e8f0; --jr-line-soft:#cbd5e1; --jr-wash:#f8fafc; --jr-ease:cubic-bezier(.22,1,.36,1); --jr-bounce:cubic-bezier(.34,1.56,.64,1); --jr-pad-y:clamp(44px,7vw,72px); --jr-pad-x:clamp(16px,4vw,48px); --jr-wrap:1280px; /* The six KPJ Cares Junior logo colours. Fills carry no small text — amber is 1.9:1 on white and coral 3.2:1 — so each has an -ink pair that does. */ --jrp-coral:#ef6762; --jrp-coral-ink:#a8352f; --jrp-amber:#fcb01e; --jrp-amber-ink:#85510b; --jrp-teal:#32b6b2; --jrp-teal-ink:#0f6e6b; --jrp-petrol:#083c4f; --jrp-petrol-ink:#083c4f; --jrp-aubergine:#361b4f; --jrp-aubergine-ink:#361b4f; --jrp-taupe:#967f65; --jrp-taupe-ink:#6f5c46; --jrp-scroll:0px; /* written by the rAF loop in junior-playful.js */ } html{scroll-behavior:smooth} /* clip, not hidden — overflow:hidden makes this a scroll container, which stops position:sticky working for .jr-subnav. clip contains overflow without that. */ .jr-page{font-family:var(--jr-font);color:var(--jr-ink);background:#fff;overflow-x:clip} .jr-page *{box-sizing:border-box} .jr-page img{max-width:100%;display:block} .jr-page a{text-decoration:none} .jr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .jr-ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .jr-ico-f{width:1em;height:1em;fill:currentColor;stroke:none;flex:none} /* ── Section shell ───────────────────────────────────────────────────────── */ .jr-sec{padding:var(--jr-pad-y) var(--jr-pad-x);background:#fff;position:relative} .jr-sec--wash{background:var(--jr-wash)} .jr-in{max-width:var(--jr-wrap);margin:0 auto;position:relative;z-index:1} .jr-head{text-align:center;max-width:680px;margin:0 auto 36px;display:flex;flex-direction:column;gap:12px;align-items:center} .jr-split{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,48px);align-items:center} .jr-split>.jr-a{flex:1.35;min-width:min(100%,340px);display:flex;flex-direction:column;gap:20px} .jr-split>.jr-b{flex:1;min-width:min(100%,300px)} /* The column is a stretch flex container, so pills and buttons would otherwise span its full width. Prose children still stretch, which is what they want. */ .jr-split>.jr-a>.jr-eyebrow,.jr-split>.jr-a>.jr-btn,.jr-split>.jr-a>.jrp-logo{align-self:flex-start} /* ── Eyebrow pills — one hue per section ─────────────────────────────────── */ .jr-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 11px var(--jr-font);letter-spacing:1.5px;padding:7px 14px;border-radius:99px;text-transform:uppercase; background:color-mix(in srgb,var(--jrp-hue,var(--jrp-teal)) 15%,transparent); color:var(--jrp-hue-ink,var(--jrp-teal-ink))} .jr-eyebrow--dark{background:rgba(255,255,255,.16);color:#d8f2f1} /* Hue assignment. Set --jrp-hue / --jrp-hue-ink on a section and every eyebrow, wavy rule and accent inside it follows. */ [data-hue="coral"] {--jrp-hue:var(--jrp-coral); --jrp-hue-ink:var(--jrp-coral-ink)} [data-hue="amber"] {--jrp-hue:var(--jrp-amber); --jrp-hue-ink:var(--jrp-amber-ink)} [data-hue="teal"] {--jrp-hue:var(--jrp-teal); --jrp-hue-ink:var(--jrp-teal-ink)} [data-hue="petrol"] {--jrp-hue:var(--jrp-petrol); --jrp-hue-ink:var(--jrp-petrol-ink)} [data-hue="aubergine"]{--jrp-hue:var(--jrp-aubergine);--jrp-hue-ink:var(--jrp-aubergine-ink)} [data-hue="taupe"] {--jrp-hue:var(--jrp-taupe); --jrp-hue-ink:var(--jrp-taupe-ink)} /* ── Type ────────────────────────────────────────────────────────────────── */ .jr-h1{margin:0;font:800 clamp(34px,4.6vw,56px)/1.08 var(--jr-font);color:var(--jr-navy);letter-spacing:-1px} .jr-h1 em{font-style:normal;color:var(--jr-teal-deep)} .jr-h1 em.jrp-coral{color:var(--jrp-coral-ink)} .jr-h2{margin:0;font:700 clamp(26px,3.2vw,36px) var(--jr-font);color:var(--jr-navy)} .jr-h2--dark{color:#fff;letter-spacing:-.5px} .jr-h3{margin:0;font:700 17px var(--jr-font);color:var(--jr-navy)} .jr-lede{margin:0;color:var(--jr-muted);font-size:15px;line-height:1.6;text-wrap:pretty} .jr-lede--hero{color:var(--jr-body);font-size:clamp(15px,1.5vw,18px);max-width:560px} .jr-lede--dark{color:#cbd8d8;font-size:clamp(14px,1.4vw,16px);line-height:1.65;text-wrap:pretty} /* --jr-muted, not --jr-faint: #94a3b8 is 2.6:1 on white and this is real programme-terms copy, not decoration. #64748b is 4.8:1. */ .jr-note{margin:20px 0 0;text-align:center;font-size:11px;line-height:1.6;color:var(--jr-muted)} /* Hand-drawn rule under a section heading, in that section's hue */ /* Stroke lives on the symbol's path as a presentation attribute — document CSS cannot reach inside a shadow tree, but currentColor still inherits in. */ .jrp-squiggle{display:block;width:132px;height:15px;margin:2px auto 0;color:var(--jrp-hue,var(--jrp-teal))} .jr-split .jrp-squiggle{margin-left:0;margin-right:auto} /* Star cluster lifted from the three stars above the logo's "i" */ .jrp-stars{display:inline-flex;gap:3px;align-items:flex-end;color:var(--jrp-amber);vertical-align:middle} .jrp-stars svg{width:1em;height:1em;fill:currentColor} .jrp-stars .s2{font-size:1.35em} .jr-head .jrp-stars{font-size:13px;margin-bottom:-2px} /* ── Logo lockup ─────────────────────────────────────────────────────────── */ .jrp-logo{display:inline-block;line-height:0} .jrp-logo img{width:clamp(170px,17vw,240px);height:auto} .jrp-logo-fb{display:none;line-height:1;font:700 clamp(20px,2.2vw,28px) var(--jr-font);color:var(--jrp-taupe);letter-spacing:-.5px;white-space:nowrap} .jrp-logo-fb b{display:block;margin-top:-2px;font-size:1.18em;letter-spacing:-1.5px} .jrp-logo-fb i{font-style:normal} .jrp-logo-fb i:nth-child(1){color:var(--jrp-coral)} .jrp-logo-fb i:nth-child(2){color:var(--jrp-amber)} .jrp-logo-fb i:nth-child(3){color:var(--jrp-teal)} .jrp-logo-fb i:nth-child(4){color:var(--jrp-petrol)} .jrp-logo-fb i:nth-child(5){color:var(--jrp-aubergine)} .jrp-logo-fb i:nth-child(6){color:var(--jrp-coral)} /* junior-playful.js flips this on when the SVG 404s */ .jrp-logo.is-missing img{display:none} .jrp-logo.is-missing .jrp-logo-fb{display:block} /* On a dark panel the logo sits on a white card, so the full-colour wordmark survives — no white logo variant needed. */ .jrp-logo-card{background:#fff;border-radius:20px;padding:16px 22px;box-shadow:0 14px 34px rgba(0,31,63,.22)} /* ── Buttons ─────────────────────────────────────────────────────────────── */ .jr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 15px var(--jr-font);padding:14px 26px;border-radius:16px;border:1px solid transparent;cursor:pointer; transition:background .25s var(--jr-ease),color .25s var(--jr-ease),transform .3s var(--jr-bounce),box-shadow .25s var(--jr-ease)} .jr-btn--teal{background:var(--jr-teal-deep);color:#fff;box-shadow:0 12px 26px rgba(15,110,107,.32)} .jr-btn--teal:hover{background:#0a5250;color:#fff;transform:translateY(-3px)} .jr-btn--taupe{background:#fff;border-color:var(--jr-taupe);color:var(--jr-taupe-ink)} .jr-btn--taupe:hover{background:var(--jr-taupe);color:#fff;transform:translateY(-3px)} .jr-btn--coral{background:#fff;border-color:var(--jrp-coral);color:var(--jrp-coral-ink)} .jr-btn--coral:hover{background:var(--jrp-coral);color:#fff;transform:translateY(-3px)} .jr-btn--light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff} .jr-btn--light:hover{background:#fff;color:var(--jr-teal-dark);transform:translateY(-3px)} .jr-btn--sm{font:700 13px var(--jr-font);padding:12px 24px;border-radius:99px} /* ── Hero shared bits ────────────────────────────────────────────────────── */ .jr-hero{padding:clamp(40px,7vw,72px) var(--jr-pad-x) clamp(36px,6vw,60px);position:relative;overflow-x:clip} .jr-hero .jr-a{gap:22px} .jr-actions{display:flex;gap:12px;flex-wrap:wrap} .jr-chips{display:flex;gap:10px;flex-wrap:wrap} .jr-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--jr-line);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;color:#334155} .jr-chip .jr-ico{color:var(--jr-teal-deep);font-size:15px} .jr-stage{position:relative;display:flex;justify-content:center;padding:16px 0} .jr-phone{width:min(100%,268px);padding:11px;border-radius:34px;background:#15130f;box-shadow:0 26px 60px rgba(0,31,63,.32)} .jr-phone img{border-radius:24px;width:100%;height:auto} .jr-float{position:absolute;background:#fff;color:var(--jr-navy);padding:12px 16px;border-radius:16px;box-shadow:0 14px 30px rgba(0,31,63,.16);font:700 12px var(--jr-font);max-width:170px;line-height:1.4} .jr-float--a{top:56px;left:0} .jr-float--b{bottom:56px;right:0} @media(max-width:520px){.jr-float{display:none}} /* ── Confetti ──────────────────────────────────────────────────────────────── Decorative only, aria-hidden. The container clips so pieces can never widen the page; the pieces bob on a CSS keyframe and drift with --jrp-scroll. ────────────────────────────────────────────────────────────────────────── */ .jrp-confetti{position:absolute;inset:0;pointer-events:none;overflow:clip;z-index:0} .jrp-c{position:absolute;display:block; transform:translateY(calc(var(--jrp-scroll) * var(--f,1))); animation:jrpBob var(--d,7s) ease-in-out var(--delay,0s) infinite} .jrp-c--dot{border-radius:50%;background:var(--c,var(--jrp-amber))} .jrp-c--ring{border-radius:50%;border:5px solid var(--c,var(--jrp-coral))} .jrp-c--star{color:var(--c,var(--jrp-amber))} .jrp-c--star svg{width:100%;height:100%;fill:currentColor;display:block} @keyframes jrpBob{0%,100%{margin-top:0;rotate:0deg}50%{margin-top:-14px;rotate:8deg}} @media(prefers-reduced-motion:reduce){.jrp-c{animation:none;transform:none}} /* Section-level pieces are positioned into the gutters either side of the copy column. Below ~725px .jr-split wraps, the copy fills the width and those gutters stop existing, so the desktop positions land on the headline. Pieces carrying data-m are re-placed into the pockets that survive the stack (above the logo, right of the short lines, below the panel) via --mt/--ml; the rest drop out. The soft blobs always stay — they sit far enough under the text to read as background. Scoped to the direct child so a panel's own confetti (draft A/D) is untouched. */ @media(max-width:730px){ .jr-hero>.jrp-confetti .jrp-c{display:none} /* !important is required: each piece carries its desktop top/left as an inline style, which would otherwise beat this rule and leave --mt/--ml unused. */ .jr-hero>.jrp-confetti .jrp-c[data-m]{display:block; top:var(--mt)!important;left:var(--ml)!important;right:auto!important;bottom:auto!important} } /* ── Wave dividers ─────────────────────────────────────────────────────────── Sits at the bottom of a section, filled with the NEXT section's background, so the two interlock. Set --jrp-next per section. ────────────────────────────────────────────────────────────────────────── */ .jr-sec--wave{padding-bottom:calc(var(--jr-pad-y) + 44px)} .jrp-wave{position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,4vw,52px);line-height:0;pointer-events:none;z-index:0} /* fill goes on the , not the path — document CSS cannot reach into a shadow tree, and an unmatched path would render default black. fill is an inherited SVG property, so setting it here reaches the symbol's path. */ .jrp-wave svg{width:100%;height:100%;display:block;fill:var(--jrp-next,#fff)} /* ── Feature rows ────────────────────────────────────────────────────────── */ .jr-features{display:flex;flex-direction:column;gap:12px} .jr-feature{background:#fff;border:1px solid var(--jr-line);border-radius:20px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start; transition:box-shadow .25s var(--jr-ease),transform .3s var(--jr-bounce)} .jr-feature:hover{box-shadow:0 16px 32px rgba(0,31,63,.08);transform:translateY(-4px)} .jr-feature-ic{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:19px; background:color-mix(in srgb,var(--jrp-hue,var(--jrp-teal)) 16%,transparent);color:var(--jrp-hue-ink,var(--jrp-teal-ink))} .jr-feature b{display:block;font:700 15px var(--jr-font);color:var(--jr-navy);margin-bottom:4px} .jr-feature span{font-size:13px;line-height:1.6;color:var(--jr-muted)} .jr-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start} .jr-shots img{width:100%;height:auto;border-radius:18px;border:1px solid var(--jr-line);box-shadow:0 16px 34px rgba(0,31,63,.1)} /* ── Bridge band ─────────────────────────────────────────────────────────── */ /* The light end of the gradient is held back past the text column: white on #1d918d is only 3.8:1 and the --dark lede 2.6:1, but both sit on the solid #0a4f4d run at 15:1 and 6.4:1. */ .jr-bridge{background:linear-gradient(115deg,var(--jr-teal-dark) 0%,var(--jr-teal-dark) 42%,#0f6e6b 74%,#1d918d 100%);padding:clamp(30px,4vw,42px) var(--jr-pad-x);position:relative;overflow-x:clip} .jr-bridge-in{max-width:var(--jr-wrap);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;position:relative;z-index:1} .jr-bridge-txt{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:min(100%,300px)} /* ── Voucher cards, colour-coded ─────────────────────────────────────────── */ .jr-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(280px,(100% - 36px)/3)),1fr));gap:18px} .jr-vcard{background:#fff;border:1px solid var(--jr-line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column; transition:box-shadow .25s var(--jr-ease),transform .3s var(--jr-bounce),border-color .25s} .jr-vcard:hover{border-color:var(--jr-line-soft);box-shadow:0 18px 36px rgba(0,31,63,.12);transform:translateY(-5px)} .jr-vcard-edge{height:6px;background:var(--jrp-hue,var(--jrp-teal))} .jr-vcard img{width:100%;height:auto;aspect-ratio:23/14;object-fit:cover} .jr-vcard-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px} .jr-vcard-cat{align-self:flex-start;font:700 10px var(--jr-font);text-transform:uppercase;letter-spacing:1.4px;padding:5px 11px;border-radius:99px; background:color-mix(in srgb,var(--jrp-hue,var(--jrp-teal)) 16%,transparent);color:var(--jrp-hue-ink,var(--jrp-teal-ink))} .jr-vcard p{margin:0;font-size:13px;line-height:1.6;color:var(--jr-muted)} /* ── Enrolment steps ─────────────────────────────────────────────────────── */ .jr-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media(min-width:1000px){.jr-steps{grid-template-columns:repeat(4,1fr)}} .jr-step{background:#fff;border:1px solid var(--jr-line);border-radius:24px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px; transition:box-shadow .25s var(--jr-ease),transform .3s var(--jr-bounce)} .jr-step:hover{box-shadow:0 18px 36px rgba(0,31,63,.12);transform:translateY(-5px)} /* -ink, not the raw hue: white on amber is 1.9:1 and on coral 3.2:1, and a 16px bold numeral is not "large text". The -ink variants are all 6.5:1+. */ .jr-step-num{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font:800 16px var(--jr-font);background:var(--jrp-hue-ink,var(--jr-teal-deep))} .jr-step-shot{width:min(100%,190px);margin:0 auto;background:var(--jr-wash);border:1px solid var(--jr-line);border-radius:18px;padding:8px} .jr-step-shot img{width:100%;height:auto;border-radius:10px} .jr-step p{margin:0;font-size:13px;line-height:1.6;color:var(--jr-muted)} .jr-swipe{display:none;justify-content:center;align-items:center;gap:8px;margin-top:16px;color:var(--jr-faint);font:700 11px var(--jr-font);text-transform:uppercase;letter-spacing:1.5px} .jr-swipe .l{animation:jrSwipeL 1.6s ease-in-out infinite} .jr-swipe .r{animation:jrSwipeR 1.6s ease-in-out infinite} @keyframes jrSwipeL{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(-4px);opacity:1}} @keyframes jrSwipeR{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:1}} @media(max-width:640px){ .jr-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-inline:7.5%;scrollbar-width:none} .jr-steps::-webkit-scrollbar{display:none} .jr-step{flex:0 0 85%;scroll-snap-align:center} .jr-swipe{display:flex} } /* ── Wallet ──────────────────────────────────────────────────────────────── */ .jr-wallet-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .jr-wallet-shots img{width:100%;height:auto;border-radius:18px;border:1px solid var(--jr-line);box-shadow:0 16px 34px rgba(0,31,63,.1)} .jr-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .jr-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--jr-body)} .jr-ticks .jr-ico{color:var(--jrp-hue-ink,var(--jr-teal-deep));font-size:18px;margin-top:1px} /* ── Sticky sub-nav ──────────────────────────────────────────────────────── */ .jr-subnav{position:sticky;top:65px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--jr-line)} .jr-subnav ul{max-width:var(--jr-wrap);margin:0 auto;padding:0 var(--jr-pad-x);list-style:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .jr-subnav ul::-webkit-scrollbar{display:none} .jr-subnav a{display:block;white-space:nowrap;padding:14px;font:700 12px var(--jr-font);letter-spacing:.6px;text-transform:uppercase;color:var(--jr-muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .jr-subnav a:hover{color:var(--jr-teal-deep)} .jr-subnav a.is-active{color:var(--jr-teal-deep);border-bottom-color:var(--jr-teal)} /* ── FAQ — deliberately sober. No confetti, no squiggles, no bounce. ─────── */ .jr-faq{max-width:850px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .jr-faq-item{background:#fff;border:1px solid var(--jr-line);border-radius:14px;overflow:hidden} .jr-faq-toggle{width:100%;background:none;border:none;cursor:pointer;padding:16px 20px;font:700 14px var(--jr-font);color:var(--jr-navy);display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;transition:background .2s} .jr-faq-toggle:hover{background:var(--jr-wash)} .jr-faq-chev{font-size:14px;color:var(--jr-faint);transition:transform .25s var(--jr-ease);flex:none} .jr-faq-answer{display:none;padding:14px 20px 18px;font-size:13px;line-height:1.65;color:var(--jr-body);border-top:1px solid #f1f5f9} .jr-faq-item.is-open .jr-faq-answer{display:block} .jr-faq-item.is-open .jr-faq-chev{transform:rotate(180deg)} /* ── Download CTA ────────────────────────────────────────────────────────── */ /* Same reasoning as .jr-bridge — the copy column stays on the dark run. */ .jr-dl{padding:clamp(44px,7vw,76px) var(--jr-pad-x);background:linear-gradient(125deg,#08423f 0%,#08423f 38%,#0f6e6b 70%,#2a9d99 100%);position:relative;overflow-x:clip} .jr-dl .jr-in{position:relative;z-index:1} .jr-stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .jr-store{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--jr-navy);border-radius:14px;padding:11px 20px;transition:transform .3s var(--jr-bounce),box-shadow .25s var(--jr-ease)} .jr-store:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.22)} .jr-store .jr-ico-f{font-size:26px} .jr-store i{font-style:normal;display:flex;flex-direction:column;line-height:1.25} .jr-store small{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--jr-muted);font-weight:700} .jr-store b{font:700 14px var(--jr-font)} .jr-qr-wrap{display:flex;justify-content:center} .jr-qr{width:190px;background:#fff;border-radius:22px;padding:16px;text-align:center;box-shadow:0 20px 44px rgba(0,0,0,.26)} .jr-qr-box{aspect-ratio:1;border-radius:12px;border:2px dashed var(--jr-line-soft);display:grid;place-items:center;color:var(--jr-faint);background:repeating-conic-gradient(var(--jr-wash) 0% 25%,#fff 0% 50%) 50%/16px 16px} .jr-qr span{display:block;margin-top:11px;font:700 10px var(--jr-font);color:var(--jr-muted);text-transform:uppercase;letter-spacing:1px} /* ── Legal strip — sober, like the FAQ ───────────────────────────────────── */ .jr-legal{background:var(--jr-wash);border-bottom:1px solid var(--jr-line);padding:22px var(--jr-pad-x)} .jr-legal p{max-width:var(--jr-wrap);margin:0 auto;font-size:10px;line-height:1.7;color:var(--jr-muted)} /* ── Reveal on scroll ──────────────────────────────────────────────────────── The hidden state is gated on .jr-reveal-on, which the script only adds once it has set up the observer. Without JS — or if the script throws — nothing is ever hidden, so the page can never end up blank. ────────────────────────────────────────────────────────────────────────── */ .jr-reveal-on [data-reveal]{opacity:0} .jr-reveal-on [data-reveal].is-in{opacity:1} @media(prefers-reduced-motion:reduce){.jr-reveal-on [data-reveal]{opacity:1!important;transform:none!important}}