/* TidyPace product accent — calm sky blue over the shared T&O dark base. Loads after site.css. Everything is scoped to .tp (set on for TidyPace pages, or on a single card when embedded on the company page), so Tuck and company pages are untouched. Also contains the TidyPace concept visual: an honest CSS illustration, not an app screenshot. */ .tp{ --mint:#8ec5fd; --emerald:#5b9df0; --grad:linear-gradient(120deg,#5b9df0,#8ec5fd 55%,#dcedff); --ink-on-mint:#07203a; --line:rgba(158,197,253,.15); --line-2:rgba(158,197,253,.3); } .tp ::selection{background:rgba(142,197,253,.3)} .tp .glow.a{background:radial-gradient(circle,rgba(91,157,240,.38),transparent 65%)} .tp .glow.b{background:radial-gradient(circle,rgba(142,197,253,.2),transparent 65%)} .tp .grid-bg{ background: linear-gradient(rgba(158,197,253,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(158,197,253,.05) 1px,transparent 1px); background-size:56px 56px; } .tp .eyebrow .pulse{box-shadow:0 0 0 0 rgba(142,197,253,.6);animation:tp-pulse 2.4s infinite} @keyframes tp-pulse{70%{box-shadow:0 0 0 9px rgba(142,197,253,0)}100%{box-shadow:0 0 0 0 rgba(142,197,253,0)}} .tp .btn-mint{box-shadow:0 8px 28px rgba(91,157,240,.32)} .tp .btn-mint:hover{box-shadow:0 12px 36px rgba(91,157,240,.44)} .tp .feature .ic{background:rgba(91,157,240,.14)} .tp .pill{background:rgba(91,157,240,.12)} .tp .app-card,.app-card.tp{background:linear-gradient(160deg,rgba(91,157,240,.12),rgba(255,255,255,.03) 55%)} .tp .plan.featured{background:linear-gradient(170deg,rgba(91,157,240,.16),rgba(255,255,255,.03) 60%)} .tp .plan.featured::before{background:linear-gradient(160deg,#5b9df0,rgba(158,197,253,.25) 45%,rgba(255,255,255,.08))} .tp .finale{ background: radial-gradient(ellipse 70% 90% at 50% 110%,rgba(91,157,240,.26),transparent 70%), var(--bg1); } .tp .legal .callout{background:rgba(91,157,240,.1)} .tp footer .fine{border-top-color:rgba(158,197,253,.09)} /* ---------- concept visual (CSS illustration — deliberately not a screenshot) ---------- */ .tp .mock{ width:min(320px,80vw);border-radius:40px;padding:22px 20px 24px; background:linear-gradient(170deg,#0b1622,#0a121c 60%); border:1px solid rgba(158,197,253,.22);position:relative; box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 80px rgba(91,157,240,.14); transform:rotate(2.5deg);display:grid;gap:13px; } .tp .mock::before{ content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%); width:64px;height:6px;border-radius:99px;background:rgba(255,255,255,.1); } .tp .mock.flat{transform:none} .tp .m-head{display:flex;justify-content:space-between;align-items:center;margin-top:14px} .tp .m-title{font-family:"Space Grotesk","Inter",sans-serif;font-size:.95rem;font-weight:700} .tp .m-chips{display:flex;gap:8px;flex-wrap:wrap} .tp .m-chip{ font-size:.72rem;font-weight:600;color:#8ec5fd;letter-spacing:.02em; border:1px solid rgba(158,197,253,.3);padding:5px 11px;border-radius:999px; background:rgba(91,157,240,.1); } .tp .m-task{ display:flex;gap:12px;align-items:center;padding:13px 14px; background:rgba(255,255,255,.05);border:1px solid rgba(158,197,253,.14); border-radius:16px; } .tp .m-check{ width:23px;height:23px;border-radius:50%;flex:none; border:2px solid rgba(158,197,253,.5); } .tp .m-task.done .m-check{ background:var(--grad);border-color:transparent; display:grid;place-items:center;color:#07203a;font-weight:800;font-size:.75rem; } .tp .m-task.done .m-check::after{content:"✓"} .tp .m-task.done .m-bar{opacity:.45} .tp .m-bars{display:grid;gap:7px;flex:1} .tp .m-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.16)} .tp .m-bar.short{width:55%} .tp .m-min{font-size:.72rem;color:var(--muted);flex:none} .tp .m-done{ text-align:center;padding:12px;border-radius:999px;background:var(--grad); color:#07203a;font-weight:700;font-size:.9rem;margin-top:2px; } .tp .mock-caption{text-align:center;font-size:.78rem;color:var(--muted);margin-top:14px}