/* ============================================================================ KAAM.COM · HOME v2 · overlay on home.css (approved 18 Sep 2026, LIVE) Loaded AFTER home.css and after b.html's inline block, so it wins on ties. What changes, and why (from the 18 Sep review of the live page): 1 the hero has a MOMENT: type your name, the rail glides to your card and it re-renders 2 the six-cell stat banner is gone; one mono ticker line under the rail 3 three surfaces only: bare canvas · full-bleed dark · white cards for product tiles; the eyebrow+hairline+teal-H2 trio no longer repeats on every section 4 the Bolo stage and the Kai thread are alive on arrival, no voids 5 the company triangle is a hairline drawing with the real objects beside each band 6 scroll-driven depth: the demo card tilts in, the kitchen photo drifts Law unchanged: warm white canvas · navy only where the product runs · teal = the one action · gold = earned · mono = labels · no borders on rounded cards · reduced-motion gated. ========================================================================== */ /* ── 1 · the hero moment: the you-tile in the rail ───────────────────────── */ .life.you.off{display:none!important} /* A light tile, not a dark box (Rishi, 18 Sep). It fills with your name as you type: a giant ghost initial, your name in display type, your URL, a real QR. */ .life.you{background:linear-gradient(160deg,#EDF5F6 0%,#F8FAF9 55%,#FCFBF8 100%);display:flex;flex-direction:column;justify-content:flex-start;padding:16px;cursor:text;box-shadow:var(--shadow)} .life.you::after{content:none} .life.you .youg{position:absolute;inset:0;opacity:.9;pointer-events:none;width:100%;height:100%} .life.you .tag{position:relative;display:inline-flex;align-self:flex-start;background:var(--ink);color:#fff;margin-bottom:0;top:auto;left:auto;z-index:2} .life.you .ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--f-disp);font-weight:800;font-size:clamp(9rem,14vw,13rem);line-height:1;letter-spacing:-.06em;color:var(--teal);opacity:.13;pointer-events:none;user-select:none;z-index:1;transition:opacity .3s} .life.you.typing .ghost{animation:ghostIn .45s var(--ease)} @keyframes ghostIn{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}to{opacity:.13;transform:translate(-50%,-50%) scale(1)}} .life.you .youqr{position:absolute;right:14px;top:14px;width:48px;height:48px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 6px 16px rgba(35,42,70,.10);z-index:2} .life.you .youqr canvas,.life.you .youqr img{width:100%!important;height:100%!important;image-rendering:pixelated} .life.you .youtx{margin-top:auto;color:var(--ink);position:relative;z-index:2} .life.you .youtx .nm{font-family:var(--f-disp);font-size:clamp(1.25rem,4.4vw,1.5rem);letter-spacing:-.03em;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .life.you .youtx .rl{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45;max-width:24ch} .life.you .youtx .rl b{color:var(--ink);font-weight:600} .life.you .ur{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-mono);font-size:11px;color:var(--teal);min-width:0} .life.you .ur .u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600} .life.you .ur .u i{font-style:normal;color:var(--muted);font-weight:500} .life.you .ur .seal{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:var(--teal-t);color:var(--teal-d);border-radius:999px;padding:4px 9px;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:background .25s,color .25s} .life.you.free .ur .seal{background:var(--gold);color:#3A2E08} .life.you.taken .ur .seal{background:#F3D9D3;color:#7A2E22} .life.you.typing .youtx .nm{animation:nameIn .4s var(--ease)} @keyframes nameIn{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}} /* the rail attends to your tile while the name is being typed */ .lives-wrap.attend .life.you{--lift:-14px;box-shadow:0 44px 84px rgba(35,42,70,.22)} @media(min-width:1000px){.life.you{padding:18px}} @media(max-width:899px){.life.you{padding:12px}.life.you .youtx .rl{font-size:11px}.life.you .ghost{font-size:7rem}.life.you .youqr{width:40px;height:40px}} /* ── 2 · the ticker replaces the six-cell banner ─────────────────────────── */ .pulse{display:none} .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--canvas);overflow:hidden;margin-top:-6px;position:relative} .ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .ticker::before{left:0;background:linear-gradient(90deg,var(--canvas),transparent)} .ticker::after{right:0;background:linear-gradient(-90deg,var(--canvas),transparent)} .ticker .tk{display:flex;width:max-content;animation:tk 46s linear infinite} .ticker:hover .tk{animation-play-state:paused} .ticker .tki{display:inline-flex;align-items:center;gap:0;padding:0} .ticker .it{display:inline-flex;align-items:baseline;gap:8px;padding:14px 26px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-right:1px solid var(--line-2)} .ticker .it b{font-family:var(--f-disp);font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .ticker .it .live{width:6px;height:6px;border-radius:50%;background:var(--green);align-self:center;box-shadow:0 0 0 0 rgba(30,142,90,.5);animation:pulse 2s infinite;margin-right:2px} @keyframes tk{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker .tk{animation:none}} @media(max-width:899px){.ticker{margin-top:0}.ticker .it{padding:11px 18px;font-size:9px}.ticker .it b{font-size:13.5px}.ticker::before,.ticker::after{width:36px}} /* ── 3 · rhythm: three surfaces, and the section furniture stops repeating ── */ .kick::after{content:none} /* the hairline after every eyebrow is gone */ .manifesto .kick{display:none} /* the 01/02/03 folios already carry it */ .manifesto{padding-top:clamp(72px,11vw,150px)} /* folio numerals instead of an eyebrow on Seven Steps and The company */ #steps .kick,#company .kick{display:none} .folio{display:block;font-family:var(--f-disp);font-weight:700;font-size:38px;letter-spacing:-.04em;line-height:1;color:var(--faint);margin-bottom:14px} .folio small{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-left:12px;vertical-align:.5em} #steps .h2 .em,#company .h2 .em{color:inherit} /* teal is for three headlines on the page, not six */ #steps .h2{margin-top:0}#company .h2{margin-top:0} /* the steps table is bare on the canvas */ @media(min-width:900px){ .journey{background:transparent;box-shadow:none;border-radius:0;overflow:visible;padding:26px 0 0;border-top:1px solid var(--line);margin-top:34px} .jhead{padding:0} .jsteps{margin-top:6px} .js{border-left-color:var(--line)} } /* product tiles keep the white card, lighter */ .tcard{box-shadow:0 1px 2px rgba(35,42,70,.05),0 14px 34px rgba(35,42,70,.07)} /* Verified: full bleed, edge to edge */ #verified.sec.wrap{max-width:none;padding-left:0;padding-right:0} #verified .band{border-radius:0;margin-top:34px;padding:clamp(60px,8vw,118px) var(--gutter)} #verified .band::before{content:"";position:absolute;left:-10%;top:-30%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(233,185,73,.13),transparent 70%);pointer-events:none} #verified .band::after{content:"";position:absolute;right:-20%;bottom:-40%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(23,122,140,.18),transparent 70%);pointer-events:none} #verified .band-grid{max-width:var(--max);margin:0 auto;position:relative;z-index:1} #verified .band .h2{max-width:16ch} /* the business door: full bleed, the kitchen runs to the edge */ #biz-slot>section.wrap{max-width:none;padding-left:0;padding-right:0} .door{border-radius:0;box-shadow:none;background:var(--paper);margin-top:clamp(64px,10vw,128px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .door .door-tx{padding:clamp(40px,6vw,88px) var(--gutter) clamp(40px,6vw,88px);max-width:calc(var(--max)/2 + var(--gutter));margin-left:auto;width:100%} @media(min-width:900px){.door{grid-template-columns:1fr 1fr}.door .door-tx{padding-right:clamp(32px,4vw,64px)}.door .door-art{min-height:520px}} .door .door-art>img{object-position:center 55%} /* the close: a shade more air, the last word on the canvas */ .close{padding-top:clamp(96px,14vw,180px)} /* ── 4 · the two stages, alive on arrival ────────────────────────────────── */ /* Bolo: the CV writes itself under the waveform */ .bolostage .cvlive{flex:1;display:flex;margin-top:16px;min-height:96px} .bolostage .sheet{position:relative;width:100%;background:#fff;color:var(--ink);border-radius:8px 8px 0 0;padding:14px 16px 10px;box-shadow:0 -10px 30px rgba(0,0,0,.25);overflow:hidden;font-size:12px;line-height:1.5; display:grid;gap:5px;align-content:start;transform:translateY(0);transition:transform .6s var(--ease)} .bolostage .sheet::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;background:var(--gold);opacity:0;transition:opacity .4s} .bolostage .sheet.done::before{opacity:1} .bolostage .sheet .l{display:block;font-style:normal;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)} .bolostage .sheet .l.on{clip-path:inset(0 0 0 0)} .bolostage .sheet .l1{font-family:var(--f-disp);font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .bolostage .sheet .l2{color:var(--ink-2)} .bolostage .sheet .l3{color:var(--muted);font-size:11.5px} .bolostage .sheet .l4,.bolostage .sheet .l5{height:7px;border-radius:4px;background:var(--line);margin-top:4px;clip-path:none;opacity:.55;transition:opacity .4s} .bolostage .sheet .l4.on,.bolostage .sheet .l5.on{opacity:1} .bolostage .sheet .l5{width:72%} .bolostage .sheet .stamp{position:absolute;right:12px;top:10px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);opacity:0;transition:opacity .4s} .bolostage .sheet.done .stamp{opacity:1} .bolostage .cvB{margin-top:0;padding-top:14px} /* Kai: a real thread shape, populated on paint, only the newest lines arrive */ .wapanel{padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;min-height:0} .wapanel .wahead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F0F2F5;border-bottom:1px solid rgba(0,0,0,.06)} .wapanel .wahead img{width:32px;height:32px;border-radius:50%} .wapanel .wahead b{display:block;font-size:13px;color:#111;font-weight:600;line-height:1.1} .wapanel .wahead span{display:block;font-size:11px;color:#3a3;margin-top:2px} .wapanel .wahead .wt{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:#667} .wapanel .wa{flex:1;padding:14px 14px 10px;justify-content:flex-end;background:#ECE5DD} .wapanel .wacomp{display:flex;align-items:center;gap:10px;padding:8px 10px 10px 14px;background:#F0F2F5;border-top:1px solid rgba(0,0,0,.05)} .wapanel .wacomp span{flex:1;height:34px;border-radius:17px;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:#889;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} .wapanel .wacomp i{width:34px;height:34px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff} .wapanel .wacomp i svg{width:15px;height:15px} .wapanel .wa .b.typing{display:none} .wapanel .wa .b,.wapanel .wa .sys{opacity:1;transform:none;animation:none} .on .wapanel .wa .b,.on .wapanel .wa .sys{animation:none} .on .wapanel .wa .b.late{opacity:0;animation:bIn .45s var(--ease) both} .on .wapanel .wa .b.late.l1{animation-delay:.5s}.on .wapanel .wa .b.late.l2{animation-delay:1.5s} .wapanel .wa .b.late{opacity:0} html.noanim .wapanel .wa .b.late,html.inframe .wapanel .wa .b.late{opacity:1} .wapanel .wa .b b{font-weight:600} @media(max-width:899px){.wapanel .wa{padding:10px}.wapanel .wahead{padding:8px 12px}} /* ── 5 · the company: a hairline triangle, nothing drawn beside it ─────────── */ .tri-art{position:relative} .v2tri{filter:none;width:100%;max-width:520px;display:block;height:auto;margin:0 auto} .v2tri .tb{transition:none;transform:none} .v2tri .tb .face{fill:transparent;stroke:rgba(35,42,70,.30);stroke-width:1;transition:fill .3s,stroke .3s} .v2tri .tb .c1,.v2tri .tb .c2{transition:fill .3s} .v2tri .tb.lit .face,.v2tri .tb.on .face{fill:var(--teal-t);stroke:var(--teal)} .v2tri .tb.lit,.v2tri .tb.on{transform:none} .v2tri .tb.lit .c1,.v2tri .tb.on .c1{fill:var(--teal-d)} .v2tri .tb.lit .c2,.v2tri .tb.on .c2{fill:var(--teal)} .v2tri .tb.lit polygon:first-child{fill:transparent} .v2tri .tb.apex .face{fill:var(--ink);stroke:var(--ink)} .v2tri .tb.apex .c1{fill:var(--gold)} .v2tri .tb.apex.lit .face,.v2tri .tb.apex.on .face{fill:var(--teal);stroke:var(--teal)} .v2tri .tb.apex.lit .c1,.v2tri .tb.apex.on .c1{fill:#fff} @media(min-width:900px){.tri{grid-template-columns:1.1fr 1fr;gap:64px}.v2tri{max-width:none}} @media(max-width:899px){.v2tri{max-width:300px}} /* ── 6 · scroll-driven depth ─────────────────────────────────────────────── */ /* (the two-depth rail parallax was tried and pulled: it fought the cards' hover lift. The rail is the original.) */ @supports (animation-timeline: view()){ .spread .cardrow .idcard{animation:tiltIn linear both;animation-timeline:view();animation-range:entry 0% entry 85%} @keyframes tiltIn{from{transform:perspective(900px) rotateX(12deg) rotateY(-9deg) translateY(22px);opacity:.55}to{transform:none;opacity:1}} .band-card .idcard{animation:tiltIn linear both;animation-timeline:view();animation-range:entry 0% entry 80%} .door .door-art>img{animation:kb linear both;animation-timeline:view();animation-range:entry 0% exit 100%;transform-origin:50% 50%} @keyframes kb{from{transform:scale(1.08) translateY(-3%)}to{transform:scale(1) translateY(3%)}} html.noanim .spread .cardrow .idcard,html.inframe .spread .cardrow .idcard,html.noanim .band-card .idcard,html.noanim .door .door-art>img{animation:none} } @media(prefers-reduced-motion:reduce){.spread .cardrow .idcard,.band-card .idcard,.door .door-art>img{animation:none!important}.ticker .tk{animation:none}} /* ── the option chrome ───────────────────────────────────────────────────── */ .optbadge{opacity:.9} .optbadge a{color:var(--gold)} /* (Ananya's card was taller than the rest only because 'Open kaam.com/ananya-demo' wrapped under the ID card; with the button beside the card the row matches the others and the photo closes the card cleanly.) */ /* ── the real-page button sits to the RIGHT of the ID card for every persona, never under it ── */ @media(min-width:900px){ .spread .cardrow{flex-wrap:nowrap;align-items:center} .spread .cardrow .idcard{flex:0 0 min(352px,100%)} .spread .cardrow .open{flex:1 1 0;min-width:0} .spread .cardrow .open .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:44px} } /* ── the rail reserves its height (Dijji, 9-19 Sep: CLS 0.29 on / for phones, 82% poor). The rail is filled by JS, so the ticker and everything under it jumped down by a tile's height on every load. ── */ .lives-wrap{min-height:calc(58vw * 1.3 + 28px)} @media(min-width:1000px){.lives-wrap{min-height:480px}} #chips{min-height:44px}