/* Linen — warm cream ground, slate-blue accent. Carried over from the Streamlit theme, rebuilt as real CSS instead of injected overrides. */ :root{ --bg:#faf7f2; --surface:#fffdf9; --surface-2:#f4efe6; --ink:#2b2926; --ink-soft:#6b655c; --line:#e5ddd0; --accent:#0f5c43; --accent-soft:#e6f0eb; --accent-ink:#0d4a37; --good:#3f6b52; --good-soft:#eaf3ee; --warn:#8a6d3b; --warn-soft:#faf3e4; --bad:#8c4a42; --bad-soft:#f8ecea; --radius:10px; --shadow:0 1px 2px rgba(43,41,38,.06),0 4px 14px rgba(43,41,38,.05); } @media (prefers-color-scheme:dark){ :root{ --bg:#1c1b19; --surface:#242220; --surface-2:#2c2a27; --ink:#ece7df; --ink-soft:#a8a096; --line:#3a3733; --accent:#6fbf9b; --accent-soft:#1e2b26; --accent-ink:#8fd0ae; --good:#7fb394; --good-soft:#232e27; --warn:#d1ad6e; --warn-soft:#302819; --bad:#d2938a; --bad-soft:#2f2220; } } /* The signed-out palette — "Warm Authority". Set on , not :root, so it reaches every component through the same tokens the app uses and CANNOT reach a signed-in page: the class is never emitted there. Because these land on body they also beat the dark-mode block above for their subtree, which is deliberate — the marketing pages are committed to one light look rather than following the visitor's OS. */ body.public{ --bg:#fbfaf7; --surface:#ffffff; --surface-2:#f2f0ea; --ink:#1b2320; --ink-soft:#5d6864; --line:#e4e0d6; --accent:#0f5c43; --accent-soft:#e6f0eb; --accent-ink:#0d4a37; --good:#0f5c43; --good-soft:#e6f0eb; --warn:#8a6d3b; --warn-soft:#faf3e4; --bad:#9b3d33; --bad-soft:#f8ecea; --shadow:0 1px 2px rgba(27,35,32,.05),0 8px 24px rgba(27,35,32,.06); --foot:#0d3d2d; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} a{color:var(--accent-ink);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.25;margin:0 0 .5rem} h1{font-size:1.6rem;letter-spacing:-.01em} h2{font-size:1.15rem} h3{font-size:.95rem} .muted{color:var(--ink-soft)} .small{font-size:.85rem} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem} /* layout */ .wrap{max-width:960px;margin:0 auto;padding:0 20px 64px} .wrap-wide{max-width:1180px} header.top{border-bottom:1px solid var(--line);background:var(--surface); position:sticky;top:0;z-index:10} header.top .inner{max-width:1180px;margin:0 auto;padding:12px 20px; display:flex;align-items:center;gap:18px} footer.foot{border-top:1px solid var(--line);margin-top:8px; padding:16px 20px 28px;text-align:center;font-size:.85rem} footer.foot a{color:var(--ink-soft)} .brand{font-weight:650;letter-spacing:-.01em;color:var(--ink)} .brand span{color:var(--accent)} nav.links{display:flex;gap:16px;margin-left:auto;align-items:center} nav.links a{color:var(--ink-soft);font-size:.9rem} nav.links a.active{color:var(--accent-ink);font-weight:600} /* `nav.links a` outweighs `.btn`, so a button in the nav took the muted link colour — white-on-slate became grey-on-slate. */ nav.links a.btn{color:#fff} .card{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px} .card.tight{padding:14px 16px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:800px){.grid-2{grid-template-columns:1fr}} /* forms */ label{display:block;font-size:.85rem;font-weight:600;margin:0 0 4px} input[type=text],input[type=email],input[type=password],select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px; background:var(--surface-2);color:var(--ink);font:inherit} textarea{min-height:220px;resize:vertical;font-size:.9rem} /* The 220px floor is sized for the job-posting box. A plan description is one sentence, and three of them turned /admin/plans into a 2,250px page. rows= is honoured where the author asked for a small box. */ textarea[rows]{min-height:0} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px;background:var(--surface)} .field{margin-bottom:14px} .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .row>*{flex:1;min-width:180px} .btn{display:inline-block;border:1px solid var(--accent);background:var(--accent); color:#fff;padding:9px 16px;border-radius:8px;font:inherit;font-weight:600; cursor:pointer;text-align:center} .btn:hover{filter:brightness(1.08);text-decoration:none} .btn.ghost{background:transparent;color:var(--accent-ink)} .btn.quiet{background:var(--surface-2);border-color:var(--line);color:var(--ink)} .btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)} .btn.full{display:block;width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-google{display:flex;align-items:center;justify-content:center;gap:10px; background:var(--surface);color:var(--ink);border:1px solid var(--line); padding:10px 16px;border-radius:8px;font-weight:600;width:100%} .btn-google:hover{background:var(--surface-2);text-decoration:none} /* auth split */ .auth{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:32px 20px} .auth-card{width:100%;max-width:840px;background:var(--surface);border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow);overflow:hidden; display:grid;grid-template-columns:1fr 1px 1fr} .auth-side{padding:34px 32px} .auth-rule{background:var(--line);position:relative} .auth-rule::after{content:"or";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);background:var(--surface);color:var(--ink-soft); font-size:.75rem;padding:6px 4px} @media(max-width:760px){ .auth-card{grid-template-columns:1fr} .auth-rule{height:1px;width:100%} .auth-rule::after{padding:0 10px} } /* status + notes */ .note{border-radius:8px;padding:10px 13px;font-size:.9rem;margin-bottom:14px; border:1px solid transparent} .note.err{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)} .note.ok{background:var(--good-soft);border-color:var(--good);color:var(--good)} .note.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)} .note pre{white-space:pre-wrap;margin:6px 0 0;font-size:.8rem} .metrics{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .metric{flex:1;min-width:130px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--radius);padding:12px 14px} .metric .v{font-size:1.5rem;font-weight:650;letter-spacing:-.02em} .metric .k{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em} .metric.good .v{color:var(--good)} .metric.warn .v{color:var(--warn)} table{width:100%;border-collapse:collapse;font-size:.9rem} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)} tbody tr:hover{background:var(--surface-2)} .pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem; font-weight:600;background:var(--surface-2);border:1px solid var(--line)} .pill.ok{background:var(--good-soft);color:var(--good);border-color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)} details{border:1px solid var(--line);border-radius:var(--radius); background:var(--surface-2);padding:10px 14px;margin-bottom:12px} summary{cursor:pointer;font-weight:600;font-size:.9rem} details[open] summary{margin-bottom:8px} .diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0} @media(max-width:760px){.diff{grid-template-columns:1fr}} .diff .b,.diff .a{padding:10px 12px;border-radius:8px;font-size:.85rem;white-space:pre-wrap} .diff .b{background:var(--bad-soft);border:1px solid var(--line)} .diff .a{background:var(--good-soft);border:1px solid var(--line)} .preview{background:var(--surface-2);border:1px solid var(--line);border-radius:8px; padding:14px;max-height:380px;overflow:auto;white-space:pre-wrap;font-size:.85rem} .stack>*+*{margin-top:10px} /* Environment banner — deliberately loud. It only renders when the deployment is not production, and its whole job is to stop you acting on the wrong one. */ .envbar{ background:var(--warn);color:#fff;text-align:center; padding:5px 12px;font-size:.78rem;font-weight:650;letter-spacing:.04em; position:sticky;top:0;z-index:50; } /* The walkthrough on the landing page. Poster plus preload="none", so the 3MB only travels for visitors who actually press play. No script anywhere near it — tests/test_landing.py fails if one appears. */ .filmband{padding-top:0} .film{max-width:960px;margin:0 auto;border:1px solid var(--line); border-radius:14px;overflow:hidden;box-shadow:var(--shadow); background:var(--surface-2);line-height:0} .filmv{display:block;width:100%;height:auto;aspect-ratio:16/9; background:var(--surface-2)} .filmcap{max-width:960px;margin:14px auto 0;text-align:center; font-size:.9rem;line-height:1.6;color:var(--ink-soft)} /* Legal pages — long-form prose, so a reading measure rather than the app's form-width layout. */ .legal{max-width:44rem;margin:0 auto} .legal h1{margin-bottom:4px} .legal h2{margin-top:34px;font-size:1.05rem} .legal p, .legal li{line-height:1.65;color:var(--ink)} .legal ul{padding-left:20px;margin:10px 0} .legal li{margin:6px 0} .legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem} .legal th{text-align:left;font-weight:650;border-bottom:1px solid var(--line);padding:8px 10px 8px 0} .legal td{vertical-align:top;border-bottom:1px solid var(--line);padding:9px 10px 9px 0} .legal td:first-child{width:38%;font-weight:550} /* admin — a stat wall and a bar chart small enough to keep in the page */ .statgrid{display:grid;gap:12px;margin-bottom:18px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .statgrid .card{margin:0} .spark{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:6px} .spark-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;gap:3px} .spark-bar{width:100%;min-height:2px;border-radius:3px 3px 0 0; background:var(--accent)} .spark-n{font-size:.75rem;font-weight:600} .spark-d{font-size:.68rem;white-space:nowrap} /* Set by the Chrome extension's content script (extension/content-site.js) on when it is installed. CSS rather than JavaScript because the app ships none: the page owns both sentences and shows the true one. */ .rr-auto{display:none} html[data-rr-extension] .rr-auto{display:inline} html[data-rr-extension] .rr-manual{display:none} /* Tailor page: the same three numbered steps the landing page promises, so the shape of the tool matches the pitch. .step .n is reused rather than re-declared, further down — one numbered circle, two places. */ .stepcard{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:18px 20px;margin-bottom:12px; box-shadow:var(--shadow)} .stephead{display:flex;align-items:center;gap:11px;flex-wrap:wrap; margin-bottom:12px} .stephead .n{margin-bottom:0;width:24px;height:24px;font-size:.8rem} .stephead h2{font-size:.98rem;margin:0} .stephead .hint{font-size:.82rem;color:var(--ink-soft);margin:0} .stepcard .btn.full{padding:13px 26px;font-size:1rem} .stephead .creditpill{margin-left:auto} .creditpill{font-size:.8rem;color:var(--accent-ink);background:var(--accent-soft); padding:4px 12px;border-radius:99px} /* Recent: a list, not a bordered table. Same information, less furniture. */ .recent{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:2px 16px;box-shadow:var(--shadow)} .recent-row{display:flex;align-items:center;gap:12px;padding:11px 0; border-bottom:1px solid var(--surface-2);font-size:.9rem} .recent-row:last-child{border-bottom:none} .recent-row .role{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .recent-row .co{color:var(--ink-soft);width:130px;flex:0 0 auto; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .recent-row .fit{width:38px;flex:0 0 auto;font-weight:600} @media(max-width:640px){ .recent-row .co{display:none} } /* ═══ public pages ═════════════════════════════════════════════════════ Public-only classes. Everything here reads the body.public tokens above, so there is not one literal colour in the block — which is what stops it drifting from the app the way the previous dark-band version did. All motion is CSS: the app ships no JavaScript and that is load-bearing (see CLAUDE.md). Animations stay on transform / opacity / width so they composite cheaply, and the reduced-motion guard at the bottom turns every one of them off. */ .wrap-flush{max-width:none;padding:0} /* ── brand mark ── */ .brand-full{display:inline-flex;align-items:center;gap:9px;font-size:1rem} .brand .mark{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:7px;background:var(--accent); color:#fff;flex:0 0 auto} .brand .brand-soft{color:var(--ink-soft);font-weight:500} /* ── hero ── */ .hero{position:relative;overflow:hidden;padding:76px 20px 60px;text-align:center; border-bottom:1px solid var(--line)} /* One soft wash instead of the old drifting blobs — it sits behind the type rather than competing with it, and costs no animation frames. */ .hero::before{content:"";position:absolute;left:50%;top:-42%;width:900px; height:620px;transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%)} .hero-copy{position:relative;max-width:680px;margin:0 auto} .eyebrow{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase; color:var(--accent);font-weight:650;margin:0 0 18px} .hero-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px; border:1px solid var(--line);background:var(--surface);border-radius:99px; padding:6px 15px;font-size:.8rem;color:var(--ink-soft)} .hero-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); animation:dot-pulse 1.8s ease-in-out infinite} @keyframes dot-pulse{0%,100%{opacity:.3}50%{opacity:1}} .hero h1{font-size:clamp(2.1rem,5.6vw,3.35rem);line-height:1.08; letter-spacing:-.035em;font-weight:650;margin:0 0 16px} .hero h1 .hl{color:var(--accent)} .hero-sub{font-size:1.06rem;line-height:1.6;color:var(--ink-soft); max-width:520px;margin:0 auto 30px} .hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin:0 0 44px} .hero-cta .btn{padding:13px 24px;font-size:1rem} /* ── the demo: one bullet, rewritten, on a loop ── */ .demo{position:relative;max-width:580px;margin:0 auto;padding:18px 20px; background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow);overflow:hidden;text-align:left} .demo-scan{position:absolute;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:demo-scan 5s linear infinite} @keyframes demo-scan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1} 100%{top:100%;opacity:0}} .demo-head{margin:0 0 13px;font-size:.78rem;color:var(--ink-soft); letter-spacing:.02em;position:relative} .demo-diff{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;line-height:1.65;margin-bottom:15px;position:relative} .demo-diff p{margin:0} .demo-diff .was{color:var(--bad);animation:swap-out 5s ease-in-out infinite} .demo-diff .now{color:var(--accent);font-weight:550; animation:swap-in 5s ease-in-out infinite} @keyframes swap-out{0%,42%{opacity:1;transform:translateY(0)} 52%,100%{opacity:.3;transform:translateY(-3px)}} @keyframes swap-in{0%,52%{opacity:0;transform:translateY(4px)} 64%,100%{opacity:1;transform:translateY(0)}} .demo-stats{display:flex;gap:9px;position:relative} .demo-stat{flex:1;background:var(--surface-2);border-radius:9px;padding:10px 12px} .demo-stat .k{display:block;font-size:.68rem;color:var(--ink-soft); text-transform:uppercase;letter-spacing:.06em} .demo-stat .v{display:block;font-size:1.2rem;font-weight:650; letter-spacing:-.02em;color:var(--ink)} .demo-stat .v.good{color:var(--accent)} .demo-stat .v.warn{color:var(--warn)} .demo-stat .v.count{animation:count-in 5s ease-in-out infinite} @keyframes count-in{0%,45%{opacity:.35}72%,100%{opacity:1}} .demo-stat .note{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:3px} .demo-stat .track{display:block;height:4px;border-radius:9px;margin-top:7px; background:var(--line);overflow:hidden} .demo-stat .fill{display:block;height:100%;border-radius:9px; background:var(--accent);animation:bar-fill 5s ease-in-out infinite} @keyframes bar-fill{0%,45%{width:34%}72%,100%{width:91%}} /* ── bands ── */ .band{padding:66px 20px} .band-tint{background:var(--surface-2);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .band-inner{max-width:1080px;margin:0 auto} .band-inner.narrow{max-width:680px} .band-inner.center{text-align:center} .band .eyebrow{text-align:center} .band-title{text-align:center;font-size:clamp(1.5rem,3.6vw,2.1rem); letter-spacing:-.028em;font-weight:650;margin:0 0 10px} .band-sub{text-align:center;color:var(--ink-soft);font-size:.98rem;margin:0 0 32px} .band-title+.steps,.band-title+.features,.band-title+.plans, .band-title+details,.band-title+.lede,.band-title+.quad{margin-top:34px} .lede{font-size:1.04rem;line-height:1.75;margin:0 0 16px} .center{text-align:center} .quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .quad .card,.features .card,.plans .card{margin-bottom:0} /* One numbered circle, three contexts: the landing page's steps and the Tailor page's two step rows. Listed here rather than duplicated, so the marketing promise and the tool it describes cannot drift apart. */ .step .n,.stephead .n{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:50%;background:var(--accent); color:#fff;font-size:.9rem;font-weight:650;margin-bottom:12px} .step h3,.quad h3,.features h3{font-size:1.02rem;letter-spacing:-.01em} .lift{transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s,box-shadow .35s} .lift:hover{transform:translateY(-4px);border-color:var(--accent); box-shadow:var(--shadow)} /* Reveal on scroll, with no script. Behind @supports rather than left to degrade: without a view timeline the rule is dropped and the content is simply visible, which is the only acceptable fallback. */ @supports (animation-timeline:view()){ .reveal{animation:reveal-rise linear both;animation-timeline:view(); animation-range:entry 8% cover 30%} @keyframes reveal-rise{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}} } /* ── honesty band ── */ .honesty{padding-top:0} .honesty-panel{max-width:700px;margin:0 auto;text-align:center; background:var(--accent-soft);border:1px solid var(--line); border-radius:16px;padding:40px 44px} .honesty-panel h2{font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.02em; color:var(--accent-ink);font-weight:650} .honesty-panel p{margin:0;font-size:1rem;line-height:1.75;color:var(--ink)} /* ── plans ── */ .plan{position:relative;overflow:hidden;display:flex;flex-direction:column} .plan .price{font-size:2.1rem;font-weight:650;letter-spacing:-.03em;margin:8px 0} .plan .btn{margin-top:auto} /* Anchored, not in the flow: as a flex item the pill stretched full width and pushed this card's price a line below the other two. */ .plan .badge{position:absolute;top:13px;right:13px;background:var(--accent); color:#fff;font-size:.7rem;font-weight:650;padding:3px 11px; border-radius:99px;z-index:1} .plan.rec{border:2px solid var(--accent)} .plan .sweep{display:none} .plan.rec .sweep{display:block;position:absolute;top:0;bottom:0;width:34%; background:linear-gradient(100deg,transparent,var(--accent-soft),transparent); animation:plan-sweep 4.5s ease-in-out infinite;pointer-events:none} @keyframes plan-sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(320%)}} /* The badge is excluded as well as the sweep: this rule has the same specificity as .plan .badge and comes later, so without the second :not() it silently overrode position:absolute and put the pill back in the flex flow — full width, on top of the plan name. */ .plan>*:not(.sweep):not(.badge){position:relative} .closer{background:var(--surface-2);border-top:1px solid var(--line)} .closer h2{font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.028em; font-weight:650;margin-bottom:10px} .closer .btn{padding:14px 32px;font-size:1.02rem;margin-top:8px} /* ── public footer ── */ footer.foot.foot-public{text-align:left;padding:0;margin-top:0; background:var(--foot);border-top:none;color:#dfe9e4} .foot-inner{max-width:1080px;margin:0 auto;padding:30px 20px 10px; display:flex;align-items:center;gap:18px;flex-wrap:wrap} .foot-inner nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap} .foot-public .brand{color:#fff} .foot-public .brand .mark{background:#fff;color:var(--accent)} .foot-public .brand .brand-soft{color:#9fb8ad} .foot-public a{color:#b9cfc6} .foot-public a:hover{color:#fff} .foot-legal{max-width:1080px;margin:0 auto;padding:0 20px 30px; font-size:.82rem;color:#8fa79c} @media(max-width:900px){ .quad,.features,.plans{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{grid-template-columns:1fr} } @media(max-width:640px){ /* Signed in there are six items in the bar and they do not fit a phone — Sign out was cut off the right edge. Wrapping to a second row keeps every link reachable, which hiding them would not. */ header.top .inner{flex-wrap:wrap;gap:10px} header.top nav.links{margin-left:0;width:100%;gap:14px} /* The bar overflowed the viewport by 36px at 390 wide and clipped the CTA. Section links go; the two that are actually destinations stay. Scoped to body.public so the signed-in nav is untouched. */ body.public nav.links a.nav-more{display:none} body.public nav.links{gap:12px} body.public .brand-full{font-size:.95rem;gap:7px} .quad,.features,.plans{grid-template-columns:1fr} .band{padding:46px 18px} .hero{padding:52px 18px 44px} .demo-stats{flex-direction:column} .foot-inner nav{margin-left:0} } /* Non-negotiable. A pulsing dot and a scanning line behind a headline are vestibular triggers, and people use this at 2am. Everything must land on its finished frame — the demo shows the tailored line, not a half-faded swap. */ @media (prefers-reduced-motion:reduce){ .hero-pill .dot,.demo-scan,.demo-diff .was,.demo-diff .now, .demo-stat .v.count,.demo-stat .fill,.plan.rec .sweep,.reveal{ animation:none !important;transform:none !important} .demo-scan,.plan.rec .sweep{display:none} .demo-diff .was{opacity:.3} .demo-stat .fill{width:91%} .lift{transition:none} } /* ══════════════════════════════════════════════════════════════════ THE SCREENING COPILOT TEASER — templates/partials/_interest.html Two sizes of one thing: a band on the landing page, a strip under the tailor form. Deep green, taken from the footer colour already in this file, so it is a band and not a second theme — the same licence the hero has. EVERYTHING HERE MOVES AND NONE OF IT IS JAVASCRIPT. The landing page and the dashboard ship no script and there are tests holding that line, so the loop is keyframes, the waveform is twenty four divs on staggered delays, and the vote is a form post that reloads. Every animation declared below is switched off at the bottom of this block. ══════════════════════════════════════════════════════════════════ */ .if-band{position:relative;overflow:hidden;padding:58px 22px 54px;color:#e7f2ec; background: radial-gradient(112% 132% at 80% -32%,#1d7a5a 0%,rgba(29,122,90,0) 56%), radial-gradient(92% 122% at 6% 122%,#0e4634 0%,rgba(14,70,52,0) 62%), linear-gradient(168deg,#0c3728 0%,#08241b 100%)} /* One pixel of light along the top edge. It is what makes a large flat area look printed rather than filled. */ .if-band::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(155,222,192,.55) 22%, rgba(155,222,192,.55) 78%,transparent)} /* A slow light crossing the band. Nine seconds, sixteen percent at its brightest. You do not watch it happen, you notice the band is alive. */ .if-band::after{content:"";position:absolute;top:-60%;bottom:-60%;width:38%; left:-45%;pointer-events:none;transform:skewX(-14deg); background:linear-gradient(90deg,transparent,rgba(169,233,200,.16),transparent); animation:if-glide 9s cubic-bezier(.4,0,.5,1) infinite} @keyframes if-glide{0%{left:-45%}62%,100%{left:118%}} .if-grid{position:relative;z-index:1;display:grid; grid-template-columns:1.06fr .94fr;gap:54px;align-items:center; max-width:1010px;margin:0 auto} .if-pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px; font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:#a9dcc4;background:rgba(111,191,155,.10); border:1px solid rgba(111,191,155,.28);border-radius:99px;padding:6px 14px 6px 11px} .if-pill .dot{width:6px;height:6px;border-radius:50%;background:#7fd3ab; animation:if-beat 2.4s ease-out infinite} @keyframes if-beat{0%{box-shadow:0 0 0 0 rgba(127,211,171,.55)} 70%{box-shadow:0 0 0 8px rgba(127,211,171,0)} 100%{box-shadow:0 0 0 0 rgba(127,211,171,0)}} .if-head{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:700; letter-spacing:-.024em;line-height:1.12;color:#f4faf7;max-width:15ch;margin:0} .if-head em{font-style:normal;color:#8ad9b4} .if-sub{margin:16px 0 0;font-size:1rem;line-height:1.62;color:#bcd6ca;max-width:45ch} .if-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .if-chip{font-size:.78rem;color:#cfe6da;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);border-radius:6px;padding:6px 11px} /* ── the control ─────────────────────────────────────────────── */ .if-cta{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .if-form{margin:0} .if-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center; gap:10px;font:inherit;font-size:1rem;font-weight:650;color:#07231a; background:linear-gradient(180deg,#a9e9c8 0%,#7fd3ab 100%); border:0;border-radius:9px;padding:14px 24px;cursor:pointer; transition:transform .16s ease; /* An ambient halo, one breath every four seconds, and it stops the moment the pointer arrives. Enough to be found on a long page, never enough to feel like it is chasing anybody. */ animation:if-halo 4.2s ease-in-out infinite} @keyframes if-halo{ 0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px rgba(6,32,24,.5),0 0 0 0 rgba(127,211,171,.34)} 55%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px rgba(6,32,24,.5),0 0 0 12px rgba(127,211,171,0)}} .if-btn:hover{transform:translateY(-1px);animation-play-state:paused} .if-btn:focus-visible{outline:2px solid #d9f5e6;outline-offset:3px} .if-sweep{position:absolute;top:0;bottom:0;width:36%;transform:translateX(-150%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)} .if-btn:hover .if-sweep{animation:if-sweep .7s ease-out} @keyframes if-sweep{to{transform:translateX(340%)}} .if-count{display:flex;align-items:center;gap:12px} .if-ring{position:relative;width:9px;height:9px;border-radius:50%; background:#7fd3ab;flex:0 0 auto} .if-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%; border:1px solid rgba(127,211,171,.5);animation:if-ripple 3.2s ease-out infinite} @keyframes if-ripple{0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.9);opacity:0}} .if-num{font-size:1.55rem;font-weight:700;color:#f4faf7;line-height:1.1; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .if-lab{display:block;font-size:.86rem;color:#a6c4b7;line-height:1.3} .if-done{display:flex;align-items:center;gap:12px;padding:13px 19px; background:rgba(127,211,171,.12);border:1px solid rgba(127,211,171,.34); border-radius:9px;animation:if-pop .45s cubic-bezier(.2,1.3,.4,1) both} @keyframes if-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} .if-tick{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:#7fd3ab; color:#07231a;display:grid;place-items:center;font-size:.8rem;font-weight:800} .if-done b{display:block;color:#f4faf7;font-weight:650;font-size:.97rem} .if-done p{margin:1px 0 0;font-size:.85rem;color:#a6c4b7} .if-fine{margin:16px 0 0;font-size:.8rem;color:#8bab9d} /* ── the loop ──────────────────────────────────────────────────── Twelve seconds: two questions arrive off the call, the model thinks for a beat, the answer rises with its blanks flashing once. Every element runs the same duration with no delay and holds its own position inside its own keyframes, so nothing drifts out of step however long a tab is left open. */ .if-sim{position:relative} .if-simhead{display:flex;align-items:center;justify-content:space-between; font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#8fb3a3; margin-bottom:11px;padding:0 3px} .if-rec{display:inline-flex;align-items:center;gap:7px;color:#eab5ad} .if-rec i{width:6px;height:6px;border-radius:50%;background:#eab5ad; animation:if-blink 1.7s ease-in-out infinite} @keyframes if-blink{0%,100%{opacity:.3}50%{opacity:1}} .if-glass{position:relative;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);border-radius:14px; padding:14px 15px 16px;min-height:288px;box-shadow:0 20px 50px rgba(4,20,15,.4)} .if-wave{display:flex;align-items:flex-end;gap:3px;height:26px;margin:0 0 13px;padding:0 1px} .if-wave i{flex:1;border-radius:2px;height:18%; background:linear-gradient(180deg,#7fd3ab,rgba(127,211,171,.28)); animation:if-bar 1.05s ease-in-out infinite alternate} @keyframes if-bar{from{height:14%;opacity:.5}to{height:96%;opacity:1}} .if-wave i:nth-child(3n){animation-duration:.78s} .if-wave i:nth-child(3n+1){animation-duration:1.32s} .if-wave i:nth-child(4n){animation-duration:.94s} .if-wave i:nth-child(1){animation-delay:-.10s}.if-wave i:nth-child(2){animation-delay:-.44s} .if-wave i:nth-child(3){animation-delay:-.72s}.if-wave i:nth-child(4){animation-delay:-.26s} .if-wave i:nth-child(5){animation-delay:-.90s}.if-wave i:nth-child(6){animation-delay:-.58s} .if-wave i:nth-child(7){animation-delay:-.18s}.if-wave i:nth-child(8){animation-delay:-.82s} .if-wave i:nth-child(9){animation-delay:-.36s}.if-wave i:nth-child(10){animation-delay:-.66s} .if-wave i:nth-child(11){animation-delay:-.12s}.if-wave i:nth-child(12){animation-delay:-.98s} .if-wave i:nth-child(13){animation-delay:-.50s}.if-wave i:nth-child(14){animation-delay:-.30s} .if-wave i:nth-child(15){animation-delay:-.86s}.if-wave i:nth-child(16){animation-delay:-.62s} .if-wave i:nth-child(17){animation-delay:-.22s}.if-wave i:nth-child(18){animation-delay:-.76s} .if-wave i:nth-child(19){animation-delay:-.42s}.if-wave i:nth-child(20){animation-delay:-.94s} .if-wave i:nth-child(21){animation-delay:-.14s}.if-wave i:nth-child(22){animation-delay:-.54s} .if-wave i:nth-child(23){animation-delay:-.70s}.if-wave i:nth-child(24){animation-delay:-.34s} .if-utt{font-size:.78rem;line-height:1.5;color:#c8ddd2;margin:0 0 10px; padding-left:12px;border-left:2px solid rgba(255,255,255,.16);opacity:0} .if-utt b{display:block;color:#8fb3a3;font-weight:600;font-size:.6rem; letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px} .if-u1{animation:if-u1 12s linear infinite} @keyframes if-u1{0%{opacity:0;transform:translateY(5px)} 3%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}} .if-u2{animation:if-u2 12s linear infinite} @keyframes if-u2{0%,9%{opacity:0;transform:translateY(5px)} 13%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}} .if-think{display:flex;align-items:center;gap:6px;margin:0;padding-left:12px; font-size:.69rem;color:#8fb3a3;opacity:0;animation:if-think 12s linear infinite} @keyframes if-think{0%,15%{opacity:0}18%,23%{opacity:1}26%,100%{opacity:0}} .if-think s{width:5px;height:5px;border-radius:50%;background:#8fb3a3; text-decoration:none;animation:if-hop .9s ease-in-out infinite} .if-think s:nth-child(2){animation-delay:.15s} .if-think s:nth-child(3){animation-delay:.3s} @keyframes if-hop{0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)}} .if-card{background:#fffdf9;color:#1b2320;border-radius:10px;padding:13px 14px; box-shadow:0 14px 34px rgba(0,0,0,.4);opacity:0; animation:if-card 12s linear infinite} @keyframes if-card{0%,23%{opacity:0;transform:translateY(12px) scale(.985)} 28%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-5px)}} .if-q{margin:0 0 9px;font-size:.69rem;color:#5d6864} .if-q b{color:#1b2320;font-weight:650;margin-right:7px} .if-flag{margin:0 0 10px;font-size:.66rem;font-weight:700;color:#7a4a1e; background:#faf3e4;border:1px solid #e9d9b4;border-radius:6px; padding:7px 9px;line-height:1.42} .if-ans{margin:0;font-size:.78rem;line-height:1.58} /* The dashed blank — the single most important pixel in the product. It flashes once, after the card lands, and then sits still. */ .if-blank{display:inline-block;border:1px dashed #b9a97f;background:#fdf8ec; color:#7a4a1e;border-radius:4px;padding:0 5px;font-size:.93em;font-weight:600; animation:if-flash 12s linear infinite} @keyframes if-flash{0%,32%{background:#fdf8ec;box-shadow:0 0 0 0 rgba(184,142,58,0)} 38%{background:#fbeecb;box-shadow:0 0 0 3px rgba(184,142,58,.22)} 46%,100%{background:#fdf8ec;box-shadow:0 0 0 0 rgba(184,142,58,0)}} .if-src{margin:10px 0 0;font-size:.66rem;color:#5d6864; border-top:1px solid #e4e0d6;padding-top:8px} /* ── the signed-in strip ───────────────────────────────────────── Under the tailor form, never over it. Somebody on the dashboard came to do a job; this earns a glance on the way past. */ .if-strip{position:relative;overflow:hidden;display:grid; grid-template-columns:auto 1fr auto;gap:18px;align-items:center; margin:22px 0 0;padding:16px 20px;border-radius:11px;color:#e7f2ec; background:linear-gradient(135deg,#0c3728 0%,#0f4b37 60%,#13664e 100%); box-shadow:0 12px 30px rgba(12,55,40,.26)} .if-strip::after{content:"";position:absolute;top:-60%;bottom:-60%;width:34%; left:-40%;transform:skewX(-14deg);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(169,233,200,.15),transparent); animation:if-glide 9s cubic-bezier(.4,0,.5,1) infinite} .if-mic{position:relative;z-index:1;width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18); display:grid;place-items:center;color:#a9e9c8} /* One ring leaving the microphone, slowly. It reads as listening. */ .if-mic::after{content:"";position:absolute;inset:0;border-radius:11px; border:1px solid rgba(127,211,171,.55);animation:if-ripple 3.4s ease-out infinite} .if-striptxt{position:relative;z-index:1;min-width:0} .if-t{margin:0;font-size:.96rem;font-weight:650;color:#f4faf7} .if-soon{font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:#07231a;background:#7fd3ab;border-radius:4px;padding:2px 6px; margin-left:9px;vertical-align:2px} .if-d{margin:2px 0 0;font-size:.83rem;color:#aec9bd} .if-stripcta{position:relative;z-index:1;display:flex;align-items:center; gap:14px;flex-wrap:wrap} .if-stripcta .if-btn{padding:10px 17px;font-size:.9rem} .if-stripcta .if-num{font-size:1.05rem} .if-stripcta .if-lab{display:inline;font-size:.8rem} .if-stripcta .if-done{padding:10px 15px} .if-stripcta .if-done b{font-size:.89rem} .if-stripcta .if-done p{display:none} @media (max-width:860px){ .if-band{padding:40px 18px} .if-grid{grid-template-columns:1fr;gap:30px} /* THE PANEL GOES FIRST ON A PHONE. The moving thing is what stops a scroll; the paragraph is what holds it. */ .if-sim{order:-1} /* The card sets the height here, so reserving a floor as well only adds dead green under it on the screen with the least room. */ .if-glass{min-height:0;padding:12px} .if-wave{height:20px;margin-bottom:11px} .if-utt{font-size:.75rem;margin-bottom:8px} .if-card{padding:11px 12px} .if-cta{flex-direction:column;align-items:stretch;gap:14px} .if-btn{justify-content:center;width:100%} .if-count{justify-content:center} .if-fine{text-align:center} .if-strip{grid-template-columns:auto 1fr;row-gap:14px} .if-stripcta{grid-column:1 / -1} .if-stripcta .if-form{flex:1} .if-stripcta .if-btn{width:100%} } /* NONE OF THIS IS INFORMATION. It is decoration on a page somebody is reading, so all of it goes when asked — the same contract the copilot screen and the landing page already keep. Every keyframe declared above is named here. */ @media (prefers-reduced-motion:reduce){ .if-band::after,.if-strip::after,.if-pill .dot,.if-rec i,.if-wave i, .if-think s,.if-ring::after,.if-mic::after,.if-btn,.if-done{animation:none} .if-u1,.if-u2,.if-card,.if-blank{animation:none;opacity:1;transform:none} .if-think{display:none} .if-wave i{height:52%} .if-btn:hover .if-sweep{animation:none} .if-btn{transition:none;box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px rgba(6,32,24,.5)} }