/* ══════════════════════════════════════════════════════════════════════════ css/certifications.css — /certifications (prefix fw-cf) Certificates you can check: the masthead with the certificate photograph (the real logo as a chip); the seal wall; THE HEART, the register (one row per certificate with issuer, number, coverage, a validity bar in 5% steps and its state, opening to what it means and its details); a plain guide to the kinds; three steps to check one yourself; questions; and a closing invitation beside a photograph. House rules: bright grounds, no max-width on bands, colour only from :root, fade rules never boxed cards, square whole photographs, round discs and buttons, 28px / 14px gutters, type in vh. Never a class containing "bi-", "fa-" or "uil-"; no inline styles (the bar width is a class). ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-cf-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 9%, transparent); --fade-x:linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent); --sec:clamp(34px, 6vh, 72px); --gap:clamp(24px, 4vw, 76px); --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); --ac:var(--pk);--ac-ink:var(--pk-dd);--ac-l:var(--pk-l); background:var(--wh); -webkit-text-size-adjust:100% } .fw-cf-ac--pk{--ac:var(--pk);--ac-ink:var(--pk-dd);--ac-l:var(--pk-l)} .fw-cf-ac--bl{--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)} .fw-cf-ac--mt{--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)} .fw-cf-ac--pu{--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)} .fw-cf-ac--co{--ac:var(--co);--ac-ink:var(--co-ink);--ac-l:var(--co-l)} .fw-cf-ac--go{--ac:var(--go);--ac-ink:var(--go-ink);--ac-l:var(--go-l)} .fw-cf{display:block;position:relative} .fw-cf-page em{font-family:var(--ff);font-style:normal} .fw-cf .fw-ico{stroke-width:1.6} .fw-cf a{text-decoration:none} .fw-cf-sec{position:relative;padding:var(--sec) var(--pad)} .fw-cf-sec + .fw-cf-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)} .fw-cf-head{display:grid;gap:8px;margin-bottom:clamp(20px, 3.4vh, 34px)} .fw-cf-head--c{justify-items:center;text-align:center} .fw-cf-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px} .fw-cf-head__say{display:grid;gap:8px} .fw-cf-h2{margin:0;font-family:var(--ff);font-size:clamp(25px, 4vh, 40px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--ink);text-wrap:balance} .fw-cf-sub{margin:0;font-size:clamp(15px, 2vh, 17px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-cf-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pk-dd)} .fw-cf-kicker .fw-ico{width:18px;height:18px} .fw-cf-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:clamp(46px, 5.8vh, 54px);padding:0 24px;border:0;border-radius:100px;cursor:pointer; font-family:var(--ff);font-size:15px;font-weight:600;white-space:nowrap;color:var(--wh);background:linear-gradient(100deg, var(--pk), var(--pk-d) 45%, var(--pk-dd));box-shadow:var(--pk-glow); transition:box-shadow .3s, transform .25s var(--ease) } .fw-cf-btn i{font-size:14px} .fw-cf-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)} .fw-cf-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--line)} .fw-cf-btn--ghost:hover{color:var(--bl-ink);background:var(--bl-wash);box-shadow:inset 0 0 0 1.5px var(--bl-ring)} .fw-cf-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(18px, 3vh, 26px)} .fw-cf-copy{display:inline-flex;align-items:center;gap:8px;min-height:clamp(46px, 5.8vh, 54px);padding:0 18px;border:0;border-radius:100px;cursor:pointer;font-family:var(--ff);font-size:14.5px;font-weight:600;color:var(--bl-ink);background:var(--bl-wash);transition:background .25s, color .25s} .fw-cf-copy:hover{color:var(--wh);background:var(--bl)} .fw-cf img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)} .fw-cf img.lazy-loaded,.fw-cf img.lazy-error{opacity:1} /* the seal: the issuer's logo on white, or the kind's icon in its colour */ .fw-cf-seal{position:relative;display:grid;place-items:center;flex:0 0 auto;width:56px;height:56px;border-radius:50%;color:var(--wh);background:linear-gradient(140deg, var(--ac), var(--ac-ink));box-shadow:0 0 0 4px var(--wh), 0 0 0 6px var(--ac-l)} .fw-cf-seal .fw-ico{width:46%;height:auto;aspect-ratio:1} .fw-cf-seal--logo{background:var(--wh);box-shadow:inset 0 0 0 1px var(--line), 0 0 0 4px var(--wh), 0 0 0 6px var(--ac-l);overflow:hidden} .fw-cf-seal--logo img{display:block;width:72%;height:72%;object-fit:contain} .fw-cf-seal--lg{width:clamp(84px, 11vh, 104px);height:clamp(84px, 11vh, 104px);box-shadow:0 0 0 6px var(--wh), 0 0 0 9px var(--ac-l), 0 20px 36px -22px var(--ac)} .fw-cf-seal--lg::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px dashed color-mix(in srgb, var(--ac) 35%, transparent)} /* the state of a certificate today */ .fw-cf-state{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;font-size:11.5px;font-weight:700;font-style:normal;letter-spacing:.04em;white-space:nowrap} .fw-cf-state--valid{color:var(--mt-ink);background:var(--mt-l)} .fw-cf-state--due{color:var(--go-ink);background:var(--go-l)} .fw-cf-state--open{color:var(--bl-ink);background:var(--bl-l)} .fw-cf-label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-dd)} .fw-cf-label .fw-ico{width:16px;height:16px} .fw-cf-btn--sm{min-height:44px;padding:0 20px;font-size:14px} .fw-cf-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 01 · CARE YOU CAN CHECK ══════════════════════════════════════════════════════════════ */ .fw-cf-mast__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center} .fw-cf-mast__say{display:grid;justify-items:start} .fw-cf-mast__say .fw-cf-kicker{margin-top:clamp(8px, 1.6vh, 16px)} .fw-cf .fw-cf-h1{margin:clamp(8px, 1.4vh, 14px) 0 0;font-size:clamp(34px, 6.2vh, 60px);line-height:1.05;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-cf .fw-cf-h1 em{color:var(--pk-dd)} .fw-cf-lede{margin:clamp(10px, 1.8vh, 16px) 0 0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-cf-trust{position:relative;display:grid;grid-template-columns:repeat(3, auto);justify-content:start;width:100%;margin:clamp(18px, 3vh, 28px) 0 0;padding:clamp(14px, 2.2vh, 18px) 0 0;list-style:none} .fw-cf-trust::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, var(--line), transparent)} .fw-cf-trust li{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:0 clamp(16px, 2vw, 28px)} .fw-cf-trust li:first-child{padding-left:0} .fw-cf-trust li + li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)} .fw-cf-trust__ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ac-ink);background:var(--ac-l)} .fw-cf-trust__ico .fw-ico{width:21px;height:21px} .fw-cf-trust b{align-self:end;font-size:clamp(22px, 3.4vh, 30px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)} .fw-cf-trust b + span{align-self:start;font-size:12.5px;font-weight:600;color:var(--g6)} .fw-cf-mast__fig{position:relative;justify-self:end;margin:0;line-height:0} .fw-cf-mast__fig > img{display:block;height:clamp(260px, 50vh, 500px);width:auto;max-width:100%;aspect-ratio:1600 / 1195;object-fit:cover} .fw-cf-brand{position:absolute;left:clamp(16px, 2vw, 28px);bottom:clamp(16px, 2.6vh, 28px);display:flex;align-items:center;gap:16px;padding:12px 20px;line-height:1;background:var(--wh);box-shadow:var(--sh-soft)} .fw-cf-brand img{display:block;height:clamp(34px, 5vh, 48px);width:auto} .fw-cf-brand span{padding-left:16px;border-left:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bl-ink)} /* ══════════════════════════════════════════════════════════════ 02 · THE SEAL WALL ══════════════════════════════════════════════════════════════ */ .fw-cf-wall{background:radial-gradient(60% 80% at 50% 0%, var(--bl-wash), transparent 70%), var(--wh)} .fw-cf-wall__list{display:grid;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));gap:clamp(24px, 4vh, 36px) clamp(16px, 2vw, 28px);margin:0;padding:0;list-style:none} .fw-cf-wall__list li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;text-align:center} .fw-cf-wall__list li + li::before{content:"";position:absolute;left:calc(-1 * clamp(8px, 1vw, 14px));top:15%;bottom:15%;width:1px;background:linear-gradient(180deg, transparent, var(--line), transparent)} .fw-cf-wall__list .fw-cf-seal{margin:14px 0 12px} .fw-cf-wall__list b{font-size:clamp(14.5px, 2vh, 16px);font-weight:700;line-height:1.3;color:var(--ink);text-wrap:balance} .fw-cf-wall__list span{font-size:12.5px;line-height:1.4;color:var(--g6)} .fw-cf-wall__list em{margin-top:auto} /* ══════════════════════════════════════════════════════════════ 03 · THE REGISTER One line per certificate on shared column tracks; each opens to what it means and its details. Fade rules between rows. ══════════════════════════════════════════════════════════════ */ .fw-cf-reg{--cols:64px minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.3fr) 150px} .fw-cf-reg .fw-cf-head--row{flex-direction:column;align-items:flex-start} .fw-cf-reg .fw-cf-chips{gap:6px} .fw-cf-reg .fw-cf-chips button{gap:7px;height:38px;padding:0 6px 0 12px;font-size:13px} .fw-cf-chips{display:flex;flex-wrap:wrap;gap:8px} .fw-cf-chips button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;border:0;border-radius:100px;cursor:pointer;font-family:var(--ff);font-size:13.5px;font-weight:600;color:var(--g7);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s, color .25s, box-shadow .25s} .fw-cf-chips button .fw-ico{width:16px;height:16px;color:var(--ac-ink)} .fw-cf-chips button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:100px;font-size:11.5px;font-weight:700;color:var(--ac-ink);background:var(--ac-l)} .fw-cf-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--ac)} .fw-cf-chips button.is-on{color:var(--wh);background:var(--ac);box-shadow:none} .fw-cf-chips button.is-on .fw-ico{color:var(--wh)} .fw-cf-chips button.is-on span{color:var(--ac-ink);background:var(--wh)} .fw-cf-cols{display:grid;grid-template-columns:var(--cols);gap:clamp(14px, 1.8vw, 26px);padding:0 0 10px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g5)} .fw-cf-cols span:last-child{text-align:right} .fw-cf-rows{margin:0;padding:0;list-style:none} .fw-cf-row{position:relative} .fw-cf-row[hidden]{display:none} /* The certificate a trust badge link arrived for (?badge=, data-fw-arrive): opened, with a wash in its colour that fades once seen. */ .fw-cf-row[data-fw-arrive]{scroll-margin-top:150px;margin:0 calc(-1 * clamp(10px, 1.4vw, 18px));padding:0 clamp(10px, 1.4vw, 18px);border-radius:16px;background-color:var(--ac-l);animation:fw-cf-arrive 2.4s ease-out 2s forwards} .fw-cf-row[data-fw-arrive]::before{display:none} .fw-cf-row[data-fw-arrive]:focus{outline:none} @keyframes fw-cf-arrive{to{background-color:transparent}} @media (prefers-reduced-motion: reduce){.fw-cf-row[data-fw-arrive]{animation:none;background-color:transparent;box-shadow:inset 3px 0 0 var(--ac-ink)}} .fw-cf-row + .fw-cf-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade-x)} .fw-cf-row summary{display:grid;grid-template-columns:var(--cols);align-items:center;gap:clamp(14px, 1.8vw, 26px);padding:16px 0;cursor:pointer;list-style:none} .fw-cf-row summary::-webkit-details-marker{display:none} .fw-cf-row summary .fw-cf-seal{justify-self:center} .fw-cf-row__main{display:grid;gap:3px;min-width:0} .fw-cf-row__main small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink)} .fw-cf-row__main b{font-size:clamp(16px, 2.2vh, 18px);font-weight:700;line-height:1.3;color:var(--ink);transition:color .25s} .fw-cf-row summary:hover .fw-cf-row__main b,.fw-cf-row details[open] .fw-cf-row__main b{color:var(--pk-dd)} .fw-cf-row__main > span{font-size:13.5px;color:var(--g6)} .fw-cf-row__covers{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--g7)} .fw-cf-row__covers .bi{color:var(--ac-ink)} .fw-cf-row__term{display:grid;justify-items:start;gap:6px} .fw-cf-bar{position:relative;display:block;width:100%;max-width:220px;height:6px;border-radius:6px;background:var(--g1);overflow:hidden} .fw-cf-bar i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg, var(--mt), var(--mt-ink))} .fw-cf-row[data-kind] .fw-cf-state--due + .fw-cf-bar i{background:linear-gradient(90deg, var(--go), var(--go-ink))} .fw-cf-p0{width:0%}.fw-cf-p5{width:5%}.fw-cf-p10{width:10%}.fw-cf-p15{width:15%}.fw-cf-p20{width:20%}.fw-cf-p25{width:25%}.fw-cf-p30{width:30%}.fw-cf-p35{width:35%}.fw-cf-p40{width:40%}.fw-cf-p45{width:45%}.fw-cf-p50{width:50%}.fw-cf-p55{width:55%}.fw-cf-p60{width:60%}.fw-cf-p65{width:65%}.fw-cf-p70{width:70%}.fw-cf-p75{width:75%}.fw-cf-p80{width:80%}.fw-cf-p85{width:85%}.fw-cf-p90{width:90%}.fw-cf-p95{width:95%}.fw-cf-p100{width:100%} .fw-cf-term__dates{font-size:12.5px;font-weight:600;color:var(--g5)} .fw-cf-row__check{display:flex;align-items:center;justify-content:flex-end;gap:10px} .fw-cf-check{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:700;color:var(--bl-ink);background:var(--bl-wash)} .fw-cf-more{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--g6);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease), color .25s, background .25s} .fw-cf-row details[open] .fw-cf-more{transform:rotate(180deg);color:var(--wh);background:var(--pk-dd);box-shadow:none} .fw-cf-row__body{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--gap);padding:4px 0 24px calc(64px + clamp(14px, 1.8vw, 26px))} .fw-cf-row__body.has-scan{grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr)} .fw-cf-row__say{display:grid;gap:12px;justify-items:start} .fw-cf-row__sum{margin:0;font-size:clamp(15.5px, 2.1vh, 17px);line-height:1.65;color:var(--ink);text-wrap:pretty} .fw-cf-facts{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:0 clamp(16px, 2vw, 32px);width:100%;margin:0} .fw-cf-facts > div{position:relative;display:grid;gap:2px;padding:10px 0} .fw-cf-facts > div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, var(--line), transparent)} .fw-cf-facts dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-cf-facts dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink)} .fw-cf-facts dd a{color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bl-ring)} .fw-cf-scan{margin:0;line-height:0;background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)} .fw-cf-scan img{display:block;width:100%;height:auto} .fw-cf-empty{margin:16px 0 0;font-size:15px;color:var(--g6)} .fw-cf-empty button{border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--bl-ink);background:none;text-decoration:underline;text-underline-offset:3px} .fw-cf-rows.is-ready .fw-cf-row{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft)} .fw-cf-rows.is-ready .fw-cf-row.is-in{opacity:1;transform:none} /* ══════════════════════════════════════════════════════════════ 04 · WHAT THESE MEAN ══════════════════════════════════════════════════════════════ */ .fw-cf-kinds{background:linear-gradient(180deg, var(--wh), var(--pk-wash) 60%, var(--wh))} .fw-cf-kinds__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(22px, 3.6vh, 34px) 0;margin:0;padding:0;list-style:none} .fw-cf-kinds__list--1{grid-template-columns:minmax(0, 1fr)} .fw-cf-kinds__list--2,.fw-cf-kinds__list--4{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-cf-kinds__list li{position:relative;display:grid;grid-template-columns:56px minmax(0, 1fr);column-gap:16px;row-gap:4px;align-items:start;padding:0 clamp(16px, 2.2vw, 36px)} .fw-cf-kinds__list--3 li:nth-child(3n+1),.fw-cf-kinds__list--5 li:nth-child(3n+1),.fw-cf-kinds__list--6 li:nth-child(3n+1){padding-left:0} .fw-cf-kinds__list--2 li:nth-child(odd),.fw-cf-kinds__list--4 li:nth-child(odd){padding-left:0} .fw-cf-kinds__list li::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:linear-gradient(180deg, transparent, var(--line), transparent)} .fw-cf-kinds__list--3 li:nth-child(3n+1)::before,.fw-cf-kinds__list--5 li:nth-child(3n+1)::before,.fw-cf-kinds__list--6 li:nth-child(3n+1)::before,.fw-cf-kinds__list--2 li:nth-child(odd)::before,.fw-cf-kinds__list--4 li:nth-child(odd)::before,.fw-cf-kinds__list--1 li::before{display:none} .fw-cf-kinds__ico{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--ac-ink);background:var(--ac-l)} .fw-cf-kinds__ico .fw-ico{width:26px;height:26px} .fw-cf-kinds__list b{font-size:clamp(16px, 2.2vh, 18px);font-weight:700;color:var(--ink)} .fw-cf-kinds__list p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · CHECK ONE YOURSELF ══════════════════════════════════════════════════════════════ */ .fw-cf-check__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 2fr);gap:var(--gap);align-items:center} .fw-cf-check__say{margin:0} .fw-cf-steps{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));margin:0;padding:0;list-style:none} .fw-cf-steps li{position:relative;display:grid;align-content:start;gap:8px;padding-right:clamp(14px, 1.8vw, 28px)} .fw-cf-steps li:not(:last-child)::after{content:"";position:absolute;top:29px;left:76px;right:18px;height:2px;background:repeating-linear-gradient(90deg, var(--bl-ring) 0 7px, transparent 7px 13px)} .fw-cf-steps li:not(:last-child)::before{content:"";position:absolute;top:24px;right:9px;border-left:10px solid var(--bl-ring);border-top:6px solid transparent;border-bottom:6px solid transparent} .fw-cf-steps__ico{position:relative;display:grid;place-items:center;width:60px;height:60px;margin-bottom:6px;border-radius:50%;color:var(--bl-ink);background:var(--bl-l);box-shadow:0 0 0 6px var(--bl-wash)} .fw-cf-steps__ico .fw-ico{width:26px;height:26px} .fw-cf-steps__ico em{position:absolute;top:-4px;right:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;color:var(--wh);background:var(--pk-dd);box-shadow:0 0 0 3px var(--wh)} .fw-cf-steps h3{margin:0;font-family:var(--ff);font-size:clamp(16px, 2.2vh, 18.5px);font-weight:700;line-height:1.3;color:var(--ink)} .fw-cf-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS (Manage only) ══════════════════════════════════════════════════════════════ */ .fw-cf-qs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(24px, 4vw, 64px);align-items:start} .fw-cf-q{position:relative} .fw-cf-q::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)} .fw-cf-q summary{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:14px;padding:clamp(12px, 2vh, 17px) 6px;cursor:pointer;list-style:none} .fw-cf-q summary::-webkit-details-marker{display:none} .fw-cf-q__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--pk-dd);background:var(--pk-l);transition:background .25s, color .25s} .fw-cf-q__t{font-size:clamp(15px, 2vh, 17px);font-weight:600;line-height:1.4;color:var(--ink);transition:color .25s} .fw-cf-q summary > i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:13px;color:var(--g6);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease), color .25s, background .25s} .fw-cf-q summary:hover .fw-cf-q__t,.fw-cf-q[open] .fw-cf-q__t{color:var(--pk-dd)} .fw-cf-q p{margin:0;padding:0 48px clamp(14px, 2.2vh, 20px) calc(36px + 14px + 6px);font-size:15px;line-height:1.7;color:var(--g6)} .fw-cf-q[open] .fw-cf-q__n{color:var(--wh);background:var(--pk-dd)} .fw-cf-q[open] summary > i{transform:rotate(45deg);color:var(--wh);background:var(--pk-dd);box-shadow:none} /* ══════════════════════════════════════════════════════════════ 07 · STANDARDS YOU CAN FEEL ══════════════════════════════════════════════════════════════ */ .fw-cf-close{background:radial-gradient(50% 70% at 80% 50%, var(--pk-wash), transparent 70%), var(--wh)} .fw-cf-close__grid{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--gap);align-items:stretch} .fw-cf-close__say{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px} .fw-cf-pic{position:relative;margin:0;line-height:0;height:100%;min-height:300px;aspect-ratio:1400 / 939;max-width:50vw;background:var(--g1)} .fw-cf-pic img{display:block;width:100%;height:100%} /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px){ .fw-cf-mast__grid,.fw-cf-close__grid,.fw-cf-check__grid{grid-template-columns:minmax(0, 1fr)} .fw-cf-mast__fig{justify-self:start} .fw-cf-mast__fig > img{height:auto;width:100%} .fw-cf-reg{--cols:56px minmax(0, 1fr) 120px} .fw-cf-cols{display:none} .fw-cf-row summary{row-gap:10px;align-items:start} .fw-cf-row__covers,.fw-cf-row__term{grid-column:2} .fw-cf-row__check{grid-column:3;grid-row:1} .fw-cf-row__body,.fw-cf-row__body.has-scan{grid-template-columns:minmax(0, 1fr);padding-left:calc(56px + clamp(14px, 1.8vw, 26px))} .fw-cf-kinds__list,.fw-cf-kinds__list--3,.fw-cf-kinds__list--5,.fw-cf-kinds__list--6{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-cf-kinds__list li:nth-child(n){padding:0 clamp(16px, 2.2vw, 36px)} .fw-cf-kinds__list li:nth-child(odd){padding-left:0} .fw-cf-kinds__list li::before,.fw-cf-kinds__list li:nth-child(n)::before{display:none} .fw-cf-kinds__list li:nth-child(even)::before{display:block} .fw-cf-qs{grid-template-columns:minmax(0, 1fr)} .fw-cf-pic{height:auto;max-width:none;width:100%;min-height:0} .fw-cf-pic img{height:auto;aspect-ratio:1400 / 939} } @media (max-width: 768px){ .fw-cf-page{--pad:14px} .fw-cf .fw-cf-h1{font-size:clamp(32px, 9vw, 42px)} .fw-cf-act .fw-cf-btn{width:100%} .fw-cf-trust{grid-template-columns:repeat(3, minmax(0, 1fr))} .fw-cf-trust li{grid-template-columns:auto;padding:0 10px;row-gap:2px} .fw-cf-trust__ico{grid-row:auto;width:36px;height:36px;margin-bottom:4px} .fw-cf-brand{left:10px;bottom:10px;gap:10px;padding:8px 12px} .fw-cf-brand img{height:26px} .fw-cf-brand span{padding-left:10px;font-size:10px} .fw-cf-wall__list{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-cf-wall__list li::before{display:none} .fw-cf-head--row .fw-cf-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));padding:0 var(--pad)} .fw-cf-chips button{flex:0 0 auto} .fw-cf-reg{--cols:44px minmax(0, 1fr) 40px} .fw-cf-row .fw-cf-seal{width:44px;height:44px} .fw-cf-check{display:none} .fw-cf-row__body,.fw-cf-row__body.has-scan{padding-left:0} .fw-cf-kinds__list,.fw-cf-kinds__list--2,.fw-cf-kinds__list--3,.fw-cf-kinds__list--4,.fw-cf-kinds__list--5,.fw-cf-kinds__list--6{grid-template-columns:minmax(0, 1fr)} .fw-cf-kinds__list li:nth-child(n){padding:0} .fw-cf-kinds__list li:nth-child(n)::before{display:none} .fw-cf-steps{grid-template-columns:minmax(0, 1fr);row-gap:22px} .fw-cf-steps li{grid-template-columns:60px minmax(0, 1fr);column-gap:16px;padding-right:0} .fw-cf-steps__ico{grid-row:span 2;margin:0} .fw-cf-steps li::before,.fw-cf-steps li::after{display:none} .fw-cf-q p{padding:0 6px clamp(14px, 2.2vh, 20px)} } @media (prefers-reduced-motion: reduce){ .fw-cf *{transition:none!important;animation:none!important} }