/* ══════════════════════════════════════════════════════════════════════════ css/help.css — HELP & SUPPORT (fw-hlp) /help, built 9 Oct 2026. ITS OWN PAGE, on the tools hub's opening: crumb with its eyebrow, the gradient title, three floating clay icons and three small promises, and the page's work inside the first screen: §1 FIND IT, OR ASK: the search, the topics as a row of clay stops (picking one narrows the answers), and the three ways to reach us side by side, divided by fade rules, never boxed §2 the answers, one topic per row: its icon and name beside its questions §3 what happens when you ask: three numbered steps on one line §4 the grievance officer beside "looking for someone else?" PALETTE: blue carries the page; pink marks the chosen topic and the one action (Ask). Colour from :root only. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-hlp-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5vh, 56px); --gap:clamp(28px, 5vw, 80px); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-hlp{display:block;position:relative;background:var(--wh)} .fw-hlp em{font-family:var(--ff);font-style:normal} .fw-hlp-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-hlp-sec{position:relative;padding:var(--sec) 0} .fw-hlp-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-hlp-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(14px, 2.4vh, 24px)} .fw-hlp-head--c{align-items:center;text-align:center} .fw-hlp-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-hlp-head--row > div{display:grid;gap:8px} .fw-hlp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-d)} .fw-hlp-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-hlp-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(24px, 3.8vh, 36px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance} .fw-hlp-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-hlp-sub{margin:0;max-width:560px;font-size:15px;line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-hlp-sub a{font-weight:600;color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bl-ring)} .fw-hlp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;background:var(--pk-d);color:var(--wh);font-size:14.5px;font-weight:600;box-shadow:var(--pk-glow);transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-hlp-btn:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-hlp-btn .bi{transition:transform .25s var(--ease)} .fw-hlp-btn:hover .bi{transform:translateX(4px)} .fw-hlp-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-hlp-link:hover{color:var(--pk-dd)} @keyframes fw-hlp-float{50%{transform:translateY(-5px)}} @keyframes fw-hlp-in{from{opacity:0;transform:translateY(8px)}} /* ══════════════════════════════════════════════════════════════ 01 · FIND IT, OR ASK ══════════════════════════════════════════════════════════════ */ .fw-hlp .fw-hlp-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-hlp-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-hlp .fw-hlp-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--bl-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent} .fw-hlp-lead{margin:8px 0 0;max-width:680px;font-size:clamp(15.5px, 2.1vh, 18px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-hlp-lead b{color:var(--pk-dd)} .fw-hlp-title__side{display:grid;justify-items:end;gap:12px} .fw-hlp-title__art{display:flex} .fw-hlp-title__art img{width:clamp(52px, 7vh, 64px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:var(--wh);box-shadow:0 8px 22px var(--bl-ring), 0 0 0 3px var(--wh);animation:fw-hlp-float 6s ease-in-out infinite} .fw-hlp-title__art img + img{margin-left:-12px} .fw-hlp-title__art img:nth-child(2){animation-delay:-2s} .fw-hlp-title__art img:nth-child(3){animation-delay:-4s} .fw-hlp-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-hlp-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-hlp-trust .bi{color:var(--bl-d);font-size:14px} /* the search and the topics */ .fw-hlp-find{position:relative;display:grid;gap:clamp(14px, 2.2vh, 20px);margin-top:clamp(20px, 3.4vh, 34px);padding-top:clamp(16px, 2.6vh, 24px)} .fw-hlp-find::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-hlp-search{position:relative;display:flex;align-items:center;margin:0} .fw-hlp-search .bi{position:absolute;left:20px;font-size:18px;color:var(--bl-d);pointer-events:none} .fw-hlp-search input{width:100%;height:56px;padding:0 22px 0 52px;border:1px solid var(--bl-l2);border-radius:999px;background:var(--wh);font-size:16px;color:var(--ink);box-shadow:0 14px 34px -24px var(--bl);transition:border-color .2s var(--ease), box-shadow .2s var(--ease)} .fw-hlp-search input::placeholder{color:var(--g5)} .fw-hlp-search input:focus{outline:none;border-color:var(--bl-d);box-shadow:0 0 0 4px var(--bl-ring), 0 14px 34px -24px var(--bl)} .fw-hlp-topics{display:grid;grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));gap:8px clamp(8px, 1.2vw, 16px);margin:0;padding:0;list-style:none} .fw-hlp-topic{display:grid;justify-items:center;gap:4px;width:100%;padding:4px 4px 8px;text-align:center;background:none;border-radius:18px;transition:background .2s var(--ease)} .fw-hlp-topic:hover{background:var(--bl-wash)} .fw-hlp-topic__dot{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--wh);box-shadow:0 0 0 4px var(--wh), inset 0 0 0 2px var(--bl-l2), 0 12px 24px -16px var(--bl);transition:transform .35s var(--ease-pop), box-shadow .25s var(--ease)} .fw-hlp-topic__dot img{width:44px;aspect-ratio:1;object-fit:contain} .fw-hlp-topic b{margin-top:4px;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);transition:color .2s var(--ease)} .fw-hlp-topic small{font-size:12px;color:var(--g5)} .fw-hlp-topic:hover .fw-hlp-topic__dot{transform:translateY(-3px)} .fw-hlp-topic[aria-pressed="true"] .fw-hlp-topic__dot{transform:scale(1.06);box-shadow:0 0 0 4px var(--wh), inset 0 0 0 3px var(--pk-d), 0 16px 30px -14px var(--pk)} .fw-hlp-topic[aria-pressed="true"] b{color:var(--pk-dd)} /* the three ways to reach us */ .fw-hlp-ways{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:clamp(18px, 3vh, 30px) 0 0;padding:clamp(16px, 2.6vh, 24px) 0 0;list-style:none} .fw-hlp-ways::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-hlp-way{position:relative;display:grid;grid-template-columns:60px minmax(0, 1fr);gap:16px;align-items:start} .fw-hlp-way + .fw-hlp-way::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-hlp-way > img{width:60px;aspect-ratio:1;object-fit:contain;animation:fw-hlp-float 6s ease-in-out infinite} .fw-hlp-way:nth-child(2) > img{animation-delay:-2s} .fw-hlp-way:nth-child(3) > img{animation-delay:-4s} .fw-hlp-way > div{display:grid;gap:8px;justify-items:start} .fw-hlp-way p{margin:0;font-size:14.5px;line-height:1.55;color:var(--g6)} .fw-hlp-way.is-main .fw-hlp-h3{color:var(--pk-dd)} .fw-hlp-way .fw-hlp-btn{margin-top:4px} /* ══════════════════════════════════════════════════════════════ 02 · THE ANSWERS ══════════════════════════════════════════════════════════════ */ .fw-hlp-answers{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 420px)} .fw-hlp-group{position:relative;display:grid;grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);gap:var(--gap);align-items:start;padding:clamp(16px, 2.6vh, 24px) 0;animation:fw-hlp-in .4s var(--ease) both} .fw-hlp-group::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-hlp-group[hidden]{display:none} .fw-hlp-group__head{display:grid;grid-template-columns:56px minmax(0, 1fr);gap:14px;align-items:center;padding-top:6px} .fw-hlp-group__head img{width:56px;aspect-ratio:1;object-fit:contain} .fw-hlp-group__head div{display:grid;gap:4px} .fw-hlp-group__head .fw-hlp-h3{font-size:19px} .fw-hlp-group__head p{margin:0;font-size:13.5px;line-height:1.5;color:var(--g6)} .fw-hlp-qa details{position:relative} .fw-hlp-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-hlp-qa details[hidden]{display:none} .fw-hlp-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-hlp-qa summary::-webkit-details-marker{display:none} .fw-hlp-qa summary:hover,.fw-hlp-qa details[open] summary{color:var(--bl-d)} .fw-hlp-qa summary .bi{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bl-l);color:var(--bl-d);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-hlp-qa details[open] summary .bi{transform:rotate(45deg);background:var(--bl-d);color:var(--wh)} .fw-hlp-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)} .fw-hlp-none{display:grid;grid-template-columns:72px minmax(0, 1fr);gap:18px;align-items:center;padding:clamp(18px, 3vh, 28px) 0} .fw-hlp-none[hidden]{display:none} .fw-hlp-none img{width:72px;aspect-ratio:1;object-fit:contain} .fw-hlp-none div{display:grid;gap:8px;justify-items:start} .fw-hlp-none p{margin:0;font-size:15px;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · WHAT HAPPENS WHEN YOU ASK ══════════════════════════════════════════════════════════════ */ .fw-hlp-flow{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none} .fw-hlp-flow::before{content:"";position:absolute;left:16%;right:16%;top:21px;height:3px;border-radius:3px;background:linear-gradient(90deg, var(--bl-l2), var(--pk-l2), var(--mt-l2))} .fw-hlp-flow li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center} .fw-hlp-flow__n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bl-d);color:var(--wh);font-size:16px;font-weight:700;box-shadow:0 0 0 6px var(--wh)} .fw-hlp-flow li:nth-child(2) .fw-hlp-flow__n{background:var(--pk-d)} .fw-hlp-flow li:nth-child(3) .fw-hlp-flow__n{background:var(--mt-d)} .fw-hlp-flow img{width:72px;aspect-ratio:1;object-fit:contain;animation:fw-hlp-float 6s ease-in-out infinite} .fw-hlp-flow li:nth-child(2) img{animation-delay:-2s} .fw-hlp-flow li:nth-child(3) img{animation-delay:-4s} .fw-hlp-flow p{max-width:330px;margin:0;font-size:15px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · NOT PUT RIGHT? AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-hlp-last{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-hlp-last__grid{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);gap:var(--gap);align-items:stretch} .fw-hlp-griev{display:grid;gap:10px;align-content:start} .fw-hlp-officer{display:grid;grid-template-columns:64px minmax(0, 1fr);gap:16px;align-items:start;margin-top:8px;padding-top:16px;position:relative} .fw-hlp-officer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-hlp-officer img{width:64px;aspect-ratio:1;object-fit:contain} .fw-hlp-officer > div{display:grid;gap:4px} .fw-hlp-officer b{font-family:var(--ff);font-size:18px;font-weight:700;color:var(--ink)} .fw-hlp-officer span{font-size:14px;color:var(--g6)} .fw-hlp-officer ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:6px 0 0;padding:0;list-style:none} .fw-hlp-officer li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--g7)} .fw-hlp-officer li .bi{color:var(--bl-d)} .fw-hlp-officer a{font-weight:600;color:var(--bl-ink)} .fw-hlp-officer a:hover{color:var(--pk-dd)} .fw-hlp-close{position:relative;display:grid;gap:8px;justify-items:start;align-content:center;padding-left:calc(var(--gap) / 2)} .fw-hlp-close::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-hlp-close img{width:64px;aspect-ratio:1;object-fit:contain;animation:fw-hlp-float 6s ease-in-out infinite} .fw-hlp-close .fw-hlp-h3{font-size:clamp(20px, 2.9vh, 24px)} .fw-hlp-close p{margin:0 0 4px;font-size:15px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1100px){ .fw-hlp-group{grid-template-columns:minmax(0, 1fr);gap:8px} } @media (max-width:1024px){ .fw-hlp-title,.fw-hlp-last__grid{grid-template-columns:minmax(0, 1fr)} .fw-hlp-title__side{justify-items:start} .fw-hlp-trust{justify-content:flex-start} .fw-hlp-ways,.fw-hlp-flow{grid-template-columns:minmax(0, 1fr);gap:22px} .fw-hlp-way + .fw-hlp-way::before{left:0;right:0;top:-11px;bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-hlp-flow::before{display:none} .fw-hlp-close{padding-left:0;padding-top:22px} .fw-hlp-close::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:var(--fade)} } @media (max-width:640px){ .fw-hlp-page{--pad:14px} .fw-hlp .fw-hlp-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-hlp-title__art{display:none} .fw-hlp-h2{font-size:clamp(22px, 6.2vw, 28px)} /* The topics become a swipe row on a phone. */ .fw-hlp-topics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:104px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 6px;scrollbar-width:none} .fw-hlp-topics::-webkit-scrollbar{display:none} .fw-hlp-topics li{scroll-snap-align:start} .fw-hlp-search input{height:50px;font-size:15px} .fw-hlp-qa p{margin-right:0} } @media (prefers-reduced-motion:reduce){ .fw-hlp-title__art img,.fw-hlp-way > img,.fw-hlp-flow img,.fw-hlp-close img,.fw-hlp-group{animation:none} }