/* =========================================================================== use-cases.css — the /use-cases pages. Loads AFTER prompt.css and home.css and adds nothing they already own. The builder in the middle of every one of these pages is home.css's, untouched: same .pb-step rail, same .hm-stage, same .hm-publish. What this file styles is the short hero above it, the tips inside step 1, and everything below the builder — the reading material, the FAQ and the footer. Every selector is .uc- prefixed, so this file can never reach into the builder, the editor, or the marketing page at /about. PER-PAGE THEME Each page sets --uc-accent on . It drives the hero gradient, the eyebrow, the section tags, the tip bulbs and the related cards, so twelve pages read as twelve places. The builder deliberately does NOT take it: that is the product, and it should look the same whichever door you came in. =========================================================================== */ body[data-uc]{ /* Tints derived once, so nothing downstream has to repeat a color-mix. */ --uc-wash:color-mix(in srgb, var(--uc-accent) 9%, var(--paper)); --uc-tint:color-mix(in srgb, var(--uc-accent) 14%, var(--white)); --uc-line:color-mix(in srgb, var(--uc-accent) 26%, var(--line)); --uc-deep:color-mix(in srgb, var(--uc-accent) 74%, #12142099); } /* ═══ Hero. Three lines and out — step 1 has to be near the fold ═══ */ .uc-top{ position:relative; padding:22px 0 26px; background: radial-gradient(120% 130% at 12% -40%, var(--uc-wash) 0%, rgba(0,0,0,0) 62%), var(--paper); border-bottom:1px solid var(--line); } .uc-crumb{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.8rem;color:var(--slate);margin-bottom:1.05rem} .uc-crumb a{color:var(--slate);border-bottom:1px solid transparent;transition:color .15s,border-color .15s} .uc-crumb a:hover{color:var(--uc-accent);border-bottom-color:var(--uc-line)} .uc-crumb i{font-size:.62rem;opacity:.45} .uc-crumb b{color:var(--ink-soft);font-weight:600} .uc-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase; color:var(--uc-deep);background:var(--uc-tint); border:1px solid var(--uc-line); padding:.4rem .8rem;border-radius:100px; } .uc-eyebrow i{font-size:.85rem} .uc-top h1{ font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800; margin-top:1rem;max-width:19ch;letter-spacing:-.03em; } .uc-grad{ background:linear-gradient(100deg,var(--uc-accent) 0%,color-mix(in srgb,var(--uc-accent) 55%,#8A6BFF) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .uc-sub{ margin-top:.85rem;max-width:56ch; font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.6;color:var(--slate); } .uc-sub b{color:var(--ink);font-weight:600} .uc-ticks{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin-top:1rem;font-size:.85rem;color:var(--slate);list-style:none} .uc-ticks li{display:inline-flex;align-items:center;gap:.4rem} .uc-ticks i{color:var(--ok);font-size:.85rem} /* ═══ Tips inside step 1 — advice where it changes the outcome ═══ */ .uc-tips{ list-style:none;margin-top:1.1rem;padding:.85rem 1rem; background:var(--uc-tint);border:1px solid var(--uc-line);border-radius:var(--r); display:flex;flex-wrap:wrap;gap:.5rem 1.4rem; } .uc-tips li{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-soft);line-height:1.4} .uc-tips i{color:var(--uc-accent);font-size:.82rem;flex-shrink:0} /* ═══ Sections below the builder ═══ */ .uc-sec{padding:60px 0} .uc-sec-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .uc-sec-dark{background:var(--ink);color:rgba(255,255,255,.86)} .uc-sec-h{max-width:60ch;margin-bottom:2rem} .uc-tag{ display:block;font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--uc-accent);margin-bottom:.6rem; } .uc-sec-dark .uc-tag{color:color-mix(in srgb,var(--uc-accent) 60%,#fff)} .uc-sec-h h2{font-size:clamp(1.45rem,2.9vw,2rem);font-weight:800;letter-spacing:-.03em} .uc-sec-dark .uc-sec-h h2{color:#fff} .uc-sec-h p{margin-top:.7rem;color:var(--slate);font-size:1rem;line-height:1.65;max-width:62ch} .uc-sec-dark .uc-sec-h p{color:rgba(255,255,255,.6)} .uc-rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease} .uc-rise.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.uc-rise{opacity:1;transform:none;transition:none}} /* ═══ Card grid ═══ */ .uc-grid{display:grid;gap:1rem} .uc-grid.c2{grid-template-columns:repeat(2,1fr)} .uc-grid.c3{grid-template-columns:repeat(3,1fr)} .uc-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.35rem;box-shadow:var(--shadow-sm)} .uc-card-i{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--uc-tint);color:var(--uc-deep);font-size:1.05rem;margin-bottom:.85rem; } .uc-card h3{font-size:1.02rem;font-weight:700;letter-spacing:-.02em} .uc-card p{margin-top:.45rem;color:var(--slate);font-size:.92rem;line-height:1.6} .uc-card p+p{margin-top:.6rem} .uc-card code,.uc-inline-code{ font-family:'Space Mono',monospace;font-size:.86em;background:var(--paper-2); border:1px solid var(--line);border-radius:5px;padding:.08em .38em;color:var(--ink-soft); } /* ═══ Numbered checklist ═══ */ .uc-steps{list-style:none;counter-reset:ucs} .uc-steps li{display:flex;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line)} .uc-steps li:first-child{border-top:1px solid var(--line)} .uc-steps li::before{ counter-increment:ucs;content:counter(ucs); flex-shrink:0;width:26px;height:26px;border-radius:50%; background:var(--uc-tint);color:var(--uc-deep); display:grid;place-items:center;font-family:'Space Mono',monospace;font-size:.74rem;font-weight:700; margin-top:.1rem; } .uc-steps b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em} .uc-steps p{margin-top:.25rem;color:var(--slate);font-size:.92rem;line-height:1.6} /* ═══ Code block — the literal tag we write into a published page ═══ */ .uc-code{background:var(--code-bg);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)} .uc-code-h{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.7rem 1rem;border-bottom:1px solid var(--code-line); font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.09em; text-transform:uppercase;color:rgba(255,255,255,.45); } .uc-code-h b{color:#fff} .uc-code pre{margin:0;padding:1rem;overflow-x:auto;font-family:'Space Mono',monospace;font-size:.78rem;line-height:1.75;color:var(--code-fg);white-space:pre} .uc-code .t{color:#8A6BFF} .uc-code .a{color:#7FD8C4} .uc-code .s{color:#F0C07A} .uc-code .c{color:rgba(255,255,255,.36)} .uc-code-f{padding:.8rem 1rem;border-top:1px solid var(--code-line);font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.6} .uc-code-f b{color:#fff;font-weight:600} /* ═══ Comparison table ═══ */ .uc-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow-sm)} .uc-table{width:100%;border-collapse:collapse;min-width:520px} .uc-table th,.uc-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top} .uc-table thead th{font-family:'Space Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:var(--paper-2)} .uc-table thead th:last-child{color:var(--uc-deep)} .uc-table tbody th{font-weight:600;color:var(--ink);width:28%} .uc-table td{color:var(--slate)} .uc-table td:last-child{color:var(--ink-soft);background:color-mix(in srgb,var(--uc-accent) 6%,transparent)} .uc-table tr:last-child th,.uc-table tr:last-child td{border-bottom:0} /* ═══ Two-column ledger ═══ */ .uc-split{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .uc-side{border-radius:var(--r-lg);padding:1.6rem 1.5rem;border:1px solid var(--line);background:var(--white)} .uc-side-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem} .uc-side-h i{font-size:1.02rem;color:var(--uc-accent)} .uc-side-h b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.18rem;font-weight:700;letter-spacing:-.02em} .uc-side>p{font-size:.88rem;color:var(--slate);margin-bottom:1rem} .uc-side ul{list-style:none} .uc-side li{display:flex;gap:.65rem;padding:.52rem 0;font-size:.94rem;line-height:1.45;border-top:1px solid var(--line)} .uc-side li i{margin-top:.24rem;flex-shrink:0;font-size:.82rem;color:var(--uc-accent)} .uc-side-f{margin-top:1.05rem;font-size:.84rem;color:var(--slate);line-height:1.55} .uc-side.yes{background:var(--ink);border-color:transparent;color:rgba(255,255,255,.9);box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .uc-side.yes::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--uc-accent) 42%,transparent),transparent 62%);pointer-events:none} .uc-side.yes>*{position:relative} .uc-side.yes .uc-side-h b{color:#fff} .uc-side.yes .uc-side-h i,.uc-side.yes li i{color:color-mix(in srgb,var(--uc-accent) 55%,#fff)} .uc-side.yes>p,.uc-side.yes .uc-side-f{color:rgba(255,255,255,.58)} .uc-side.yes li{border-top-color:rgba(255,255,255,.12)} /* ═══ Callout ═══ */ .uc-note{ display:flex;gap:.8rem;align-items:flex-start;margin-top:1.5rem; background:var(--white);border:1px solid var(--line); border-left:3px solid var(--uc-accent);border-radius:10px;padding:1rem 1.15rem; } .uc-note i{color:var(--uc-accent);font-size:1rem;margin-top:.15rem;flex-shrink:0} .uc-note p{font-size:.91rem;color:var(--slate);line-height:1.62} .uc-note b{color:var(--ink);font-weight:600} .uc-note a{color:var(--uc-deep);font-weight:600;border-bottom:1px solid var(--uc-line)} /* ═══ Back-to-builder button, at the end of every reading section ═══ */ .uc-back{display:flex;justify-content:center;margin-top:2rem} .uc-back a{ display:inline-flex;align-items:center;gap:.55rem; background:var(--uc-accent);color:#fff;font-weight:600;font-size:.95rem; padding:.85rem 1.5rem;border-radius:100px; box-shadow:0 10px 24px -12px var(--uc-accent); transition:transform .18s ease,box-shadow .18s ease; } .uc-back a:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--uc-accent)} /* ═══ FAQ ═══ */ .uc-faq{max-width:760px} .uc-q{border-bottom:1px solid var(--line)} .uc-q:first-of-type{border-top:1px solid var(--line)} .uc-q summary{ list-style:none;cursor:pointer;padding:1.05rem 0; display:flex;justify-content:space-between;align-items:center;gap:1rem; font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.02em; } .uc-q summary::-webkit-details-marker{display:none} .uc-q summary i{transition:transform .2s;color:var(--uc-accent);flex-shrink:0;font-size:.9rem} .uc-q[open] summary i{transform:rotate(45deg)} .uc-q p{padding:0 0 1.1rem;color:var(--slate);line-height:1.7;font-size:.94rem;max-width:68ch} /* ═══ Related ═══ */ .uc-more{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem} .uc-more-a{ display:flex;align-items:center;gap:.75rem; background:var(--white);border:1px solid var(--line);border-radius:12px; padding:.85rem 1rem;transition:border-color .18s,transform .18s,box-shadow .18s; } .uc-more-a:hover{border-color:var(--uc-line);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .uc-more-a i{color:var(--uc-accent);font-size:1.1rem;flex-shrink:0} .uc-more-a b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);letter-spacing:-.01em} .uc-more-a em{display:block;font-style:normal;font-size:.78rem;color:var(--slate);margin-top:.08rem} .uc-more-all{background:var(--paper-2)} /* ═══ Footer ═══ */ .uc-foot{border-top:1px solid var(--line);background:var(--paper);padding:26px 0 40px} .uc-foot-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .uc-foot-nav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.86rem;color:var(--slate)} .uc-foot-nav a:hover{color:var(--ink)} .uc-foot-c{font-family:'Space Mono',monospace;font-size:.74rem;color:var(--slate)} /* ═══ Hub ═══ */ .uc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .uc-hub-card{ display:flex;flex-direction:column;background:var(--white); border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.3rem; box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s; } .uc-hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--uc-line)} .uc-hub-i{width:40px;height:40px;border-radius:12px;background:var(--uc-tint);color:var(--uc-deep);display:grid;place-items:center;font-size:1.12rem;margin-bottom:.9rem} .uc-hub-card h3{font-size:1.04rem;font-weight:700;letter-spacing:-.02em} .uc-hub-card p{margin-top:.4rem;color:var(--slate);font-size:.9rem;line-height:1.55;flex:1} .uc-hub-eg{ margin-top:.95rem;padding:.6rem .75rem;border-radius:9px; background:var(--paper-2);font-size:.82rem;color:var(--ink-soft);line-height:1.45; } .uc-hub-eg span{display:block;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin-bottom:.2rem} .uc-hub-go{margin-top:.9rem;font-size:.88rem;font-weight:600;color:var(--uc-deep);display:inline-flex;align-items:center;gap:.35rem} .uc-hub-card:hover .uc-hub-go i{transform:translateX(3px)} .uc-hub-go i{transition:transform .2s;font-size:.8rem} .uc-hub-hero{padding:34px 0 30px;background:radial-gradient(110% 130% at 10% -40%,var(--lilac) 0%,rgba(0,0,0,0) 60%),var(--paper);border-bottom:1px solid var(--line)} .uc-hub-hero h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;max-width:18ch;letter-spacing:-.03em;margin-top:1rem} .uc-hub-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} /* ═══ Responsive ═══ */ @media (max-width:900px){ .uc-hub-grid,.uc-more,.uc-grid.c3{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .uc-sec{padding:44px 0} .uc-split,.uc-grid.c2{grid-template-columns:1fr} .uc-top h1{max-width:none} .uc-tips{flex-direction:column;gap:.55rem} } @media (max-width:560px){ .uc-hub-grid,.uc-more,.uc-grid.c3{grid-template-columns:1fr} /* "clickto.app › Use cases › This page" wraps to two lines on a phone and leaves a chevron dangling. The home crumb is the least useful of the three, since the logo directly above goes to the same place. The BreadcrumbList in the JSON-LD still carries all three levels. */ .uc-crumb>a:first-child,.uc-crumb>a:first-child+i{display:none} .uc-foot-in{flex-direction:column;align-items:flex-start;gap:.9rem} }