/* ══════════════════════════════════════════════════════════════════════════ css/tools.css — THE TOOLS HUB (fw-tl) /tools, built 1 Oct 2026. ITS OWN PAGE. Same tokens, gutters, masthead band, ambient light and no-cards rule as every page; its own devices: §1 "Where are you right now?": a JOURNEY of five stops on one line; picking one lights the tools for that moment in a short row under it and across the whole list (others dim) §2 every tool in its menu group, as rows: 3D icon, name, the question it answers, minutes and stages, an arrow §3 why people trust them: three columns §4 questions beside a photograph, with the close PALETTE: blue carries the page; pink marks the chosen stop, "For you now" and the action. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-tl-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-tl{display:block;position:relative;background:var(--wh)} .fw-tl em{font-family:var(--ff);font-style:normal} .fw-tl-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-tl-sec{position:relative;padding:var(--sec) 0} .fw-tl-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-tl-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(14px, 2.4vh, 24px)} .fw-tl-head--c{align-items:center;text-align:center} .fw-tl-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-tl-eyebrow > span{min-width:26px;height:26px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--bl-d);color:var(--wh);font-size:12px;letter-spacing:0} .fw-tl-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-tl-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-tl-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;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-tl-btn:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-tl-btn .bi{transition:transform .25s var(--ease)} .fw-tl-btn:hover .bi{transform:translateX(4px)} .fw-tl-link{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;font-size:14px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-tl-link:hover{color:var(--pk-dd)} .fw-tl-link[hidden]{display:none} @keyframes fw-tl-float{50%{transform:translateY(-5px)}} @keyframes fw-tl-in{from{opacity:0;transform:translateY(8px)}} .fw-tl-pic{margin:0} .fw-tl-pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} /* ══════════════════════════════════════════════════════════════ 01 · WHERE ARE YOU RIGHT NOW? ══════════════════════════════════════════════════════════════ */ .fw-tl .fw-tl-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-tl-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-tl .fw-tl-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-tl-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-tl-lead b{color:var(--pk-dd)} .fw-tl-title__side{display:grid;justify-items:end;gap:12px} .fw-tl-title__art{display:flex} .fw-tl-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-tl-float 6s ease-in-out infinite} .fw-tl-title__art img + img{margin-left:-12px} .fw-tl-title__art img:nth-child(2){animation-delay:-2s} .fw-tl-title__art img:nth-child(3){animation-delay:-4s} .fw-tl-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-tl-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-tl-trust .bi{color:var(--bl-d);font-size:14px} /* the journey */ .fw-tl-journey{position:relative;display:grid;gap:clamp(14px, 2.4vh, 22px);margin-top:clamp(20px, 3.4vh, 34px);padding-top:clamp(16px, 2.6vh, 24px)} .fw-tl-journey::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tl-journey__q{display:flex;align-items:center;gap:14px;margin:0} .fw-tl-journey__q img{width:52px;aspect-ratio:1;object-fit:contain;animation:fw-tl-float 6s ease-in-out infinite} .fw-tl-journey__q span{display:grid;gap:2px} .fw-tl-journey__q b{font-family:var(--ff);font-size:clamp(20px, 3vh, 26px);font-weight:700;color:var(--ink)} .fw-tl-journey__q small{font-size:14.5px;color:var(--g6)} .fw-tl-stops{position:relative;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:clamp(10px, 1.6vw, 24px);margin:0;padding:0;list-style:none} .fw-tl-stops::before{content:"";position:absolute;left:10%;right:10%;top:40px;height:3px;border-radius:3px;background:linear-gradient(90deg, var(--bl-l2), var(--pk-l2), var(--mt-l2))} .fw-tl-stop{position:relative;display:grid;justify-items:center;gap:6px;width:100%;padding:0 4px 6px;text-align:center;background:none} .fw-tl-stop__dot{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:var(--wh);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 2px var(--bl-l2), 0 14px 28px -16px var(--bl);transition:transform .35s var(--ease-pop), box-shadow .25s var(--ease)} .fw-tl-stop__dot img{width:54px;aspect-ratio:1;object-fit:contain} .fw-tl-stop b{margin-top:6px;font-size:16px;font-weight:700;color:var(--ink);transition:color .2s var(--ease)} .fw-tl-stop small{max-width:220px;font-size:13px;line-height:1.45;color:var(--g6)} .fw-tl-stop:hover .fw-tl-stop__dot{transform:translateY(-4px);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 2px var(--bl), 0 18px 30px -16px var(--bl)} .fw-tl-stop[aria-pressed="true"] .fw-tl-stop__dot{transform:scale(1.08);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 3px var(--pk-d), 0 18px 34px -14px var(--pk)} .fw-tl-stop[aria-pressed="true"] b{color:var(--pk-dd)} /* the tools for that moment */ .fw-tl-pick{position:relative;display:grid;gap:12px;padding:16px 0 0} .fw-tl-pick::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tl-pick__h{margin:0;font-size:15px;color:var(--g6)} .fw-tl-pick__h b{margin-right:6px;padding:3px 12px;border-radius:999px;background:var(--pk-l);color:var(--pk-dd);font-size:13.5px} .fw-tl-pick__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:4px clamp(14px, 2vw, 28px);margin:0;padding:0;list-style:none} .fw-tl-pick__list li{animation:fw-tl-in .4s var(--ease) both} .fw-tl-pick__list li:nth-child(2){animation-delay:.05s} .fw-tl-pick__list li:nth-child(3){animation-delay:.1s} .fw-tl-pick__list li:nth-child(4){animation-delay:.15s} .fw-tl-pick__list li:nth-child(5){animation-delay:.2s} .fw-tl-pick__list li:nth-child(6){animation-delay:.25s} .fw-tl-pick__list a{display:grid;grid-template-columns:52px minmax(0, 1fr) auto;align-items:center;gap:14px;padding:10px 12px 10px 0;border-radius:16px;transition:background .2s var(--ease)} .fw-tl-pick__list a:hover{background:var(--bl-wash)} .fw-tl-pick__list img{width:52px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-tl-pick__list a:hover img{transform:translateY(-3px) rotate(-5deg)} .fw-tl-pick__list span{display:grid;gap:2px;min-width:0} .fw-tl-pick__list b{font-size:15.5px;color:var(--ink)} .fw-tl-pick__list small{font-size:13.5px;line-height:1.4;color:var(--g6)} .fw-tl-pick__list .bi{color:var(--pk-d);transition:transform .25s var(--ease)} .fw-tl-pick__list a:hover .bi{transform:translateX(4px)} /* ══════════════════════════════════════════════════════════════ 02 · EVERY TOOL ══════════════════════════════════════════════════════════════ */ .fw-tl-group.is-alt{background:linear-gradient(180deg, var(--bl-wash), var(--wh))} .fw-tl-sub{margin:0;max-width:420px;font-size:15px;line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-tl-group__grid{display:grid;grid-template-columns:minmax(0, .62fr) minmax(0, 1.38fr);gap:var(--gap);align-items:start} .fw-tl-group__grid > .fw-tl-head{margin:0;padding-top:18px} .fw-tl-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} /* An odd last tool takes the full row, so no group ends on a gap. */ .fw-tl-list > .fw-tl-tool:last-child:nth-child(odd){grid-column:1 / -1} .fw-tl-tool{position:relative;transition:opacity .35s var(--ease)} .fw-tl-tool::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tl-tool a{display:grid;grid-template-columns:76px minmax(0, 1fr) auto;align-items:center;gap:18px;padding:20px 0} .fw-tl-tool img{width:76px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-tl-tool a:hover img{transform:translateY(-4px) rotate(-6deg)} .fw-tl-tool__txt{display:grid;gap:4px;min-width:0} .fw-tl-tool__top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .fw-tl-tool__top b{font-family:var(--ff);font-size:18px;font-weight:700;color:var(--ink);transition:color .2s var(--ease)} .fw-tl-tag{padding:2px 10px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;letter-spacing:.02em} .fw-tl-tag.is-for{background:var(--pk-d);color:var(--wh)} .fw-tl-tag[hidden]{display:none} .fw-tl-tool__ask{font-size:15px;font-weight:500;line-height:1.45;color:var(--g7)} .fw-tl-tool__meta{display:block;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--g5)} .fw-tl-tool__go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bl-l);color:var(--bl-d);font-size:15px;transition:background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease)} .fw-tl-tool a:hover .fw-tl-tool__go{background:var(--pk-d);color:var(--wh);transform:translateX(3px)} .fw-tl-tool a:hover .fw-tl-tool__top b{color:var(--bl-d)} .fw-tl.is-picked .fw-tl-tool:not(.is-match){opacity:.38} .fw-tl.is-picked .fw-tl-tool:not(.is-match):hover{opacity:1} .fw-tl-tool.is-match .fw-tl-tool__top b{color:var(--pk-dd)} /* ══════════════════════════════════════════════════════════════ 03 · WHY PEOPLE TRUST THEM ══════════════════════════════════════════════════════════════ */ .fw-tl-why{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none} .fw-tl-why li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center} .fw-tl-why li + li::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-tl-why img{width:72px;aspect-ratio:1;object-fit:contain;animation:fw-tl-float 6s ease-in-out infinite} .fw-tl-why li:nth-child(2) img{animation-delay:-2s} .fw-tl-why li:nth-child(3) img{animation-delay:-4s} .fw-tl-why p{max-width:340px;margin:0;font-size:15px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · QUESTIONS AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-tl-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-tl-faq__grid{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:start} .fw-tl-faq__side{display:grid;gap:20px} .fw-tl-faq__side .fw-tl-head{margin:0} .fw-tl-close{display:grid;gap:8px;justify-items:start} .fw-tl-close .fw-tl-h3{font-size:clamp(20px, 2.9vh, 25px);line-height:1.25;text-wrap:balance} .fw-tl-close p{margin:0 0 4px;font-size:15px;line-height:1.6;color:var(--g6)} .fw-tl-close p a{font-weight:600;color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bl-ring)} .fw-tl-qa details{position:relative} .fw-tl-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tl-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-tl-qa summary::-webkit-details-marker{display:none} .fw-tl-qa summary:hover,.fw-tl-qa details[open] summary{color:var(--bl-d)} .fw-tl-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-tl-qa details[open] summary .bi{transform:rotate(45deg);background:var(--bl-d);color:var(--wh)} .fw-tl-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-tl-pick__list{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-tl-group__grid{grid-template-columns:minmax(0, 1fr);gap:0} .fw-tl-group__grid > .fw-tl-head{padding:0;margin-bottom:clamp(14px, 2.4vh, 24px)} } @media (max-width:1024px){ .fw-tl-title,.fw-tl-faq__grid,.fw-tl-why{grid-template-columns:minmax(0, 1fr)} .fw-tl-title__side{justify-items:start} .fw-tl-trust{justify-content:flex-start} .fw-tl-why li + li::before{left:0;right:0;top:calc(var(--gap) / -2);bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-tl-stop small{display:none} .fw-tl-faq__side{display:contents} .fw-tl-faq__side .fw-tl-head{order:1} .fw-tl-qa{order:2} .fw-tl-pic{order:3} .fw-tl-close{order:4} } @media (max-width:640px){ .fw-tl-page{--pad:14px} .fw-tl .fw-tl-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-tl-title__art{display:none} .fw-tl-h2{font-size:clamp(22px, 6.2vw, 28px)} /* The journey becomes a swipe row on a phone. */ .fw-tl-stops{grid-template-columns:repeat(5, 104px);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 6px;scrollbar-width:none} .fw-tl-stops::-webkit-scrollbar{display:none} .fw-tl-stops li{scroll-snap-align:start} .fw-tl-stops::before{left:52px;right:auto;width:calc(104px * 4 + 4 * 10px);top:38px} .fw-tl-stop__dot{width:72px;height:72px} .fw-tl-stop__dot img{width:46px} .fw-tl-stop b{font-size:13.5px} .fw-tl-list,.fw-tl-pick__list{grid-template-columns:minmax(0, 1fr)} .fw-tl-list > .fw-tl-tool:last-child:nth-child(odd){grid-column:auto} .fw-tl-tool a{grid-template-columns:60px minmax(0, 1fr) auto;gap:14px;padding:16px 0} .fw-tl-tool img{width:60px} .fw-tl-tool__top b{font-size:16.5px} .fw-tl-qa p{margin-right:0} } @media (prefers-reduced-motion:reduce){ .fw-tl-title__art img,.fw-tl-journey__q img,.fw-tl-why img,.fw-tl-pick__list li{animation:none} }