:root{ /* We ship our own light + dark themes below — tell the browser so it does NOT force its own Auto-Dark algorithm on top (which was inverting the white logo tile to black and hiding the R). With this declared, browsers use our dark-mode CSS instead. */ color-scheme: light dark; /* Brand board (Devan, approved): teal #008080 = Control/primary · amber #FFBF00 = Freedom/attention · silver #C0C0C0 = Clarity/neutral · charcoal #36454F. Pure board hexes are the FILLS / borders / dots; anything that is TEXT on white uses the AA-tuned -d variant (pure amber / silver fail as text). */ --teal:#008080; --teal-d:#0a6060; --teal-l:#e5f2f2; --amber:#FFBF00; --amber-d:#8a5a12; --amber-l:#fbf0dc; /* amber = fill only (1.6:1 on white); amber-d = text (6.0:1) */ --silver:#C0C0C0; --silver-l:#eef1f3; /* fill / border only (1.8:1 on white) */ --ink:#16202a; --muted:#5d6b78; --line:#e2e7eb; --bg:#f6f8f9; --card:#ffffff; --ok:#008080; --attn:#8a5a12; --amber-chip:#774c0d; /* ---- Design tokens (single source of truth — added design-polish 2026-10-23) -------------- Spacing: pragmatic 2px scale tokenizing the values the app already uses (Option B). Type: 8-step scale collapsing 35 ad-hoc sizes. Radius: 5-step + pill. Weights: 4. Migrating a hand-typed value onto its matching token is value-preserving (no visual change); the only intended visual shifts are the small-text collapse (T2) + the .btn radius 11->12. */ --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-10:24px; --sp-12:32px; --fs-xs:.72rem; --fs-sm:.8rem; --fs-md:.875rem; --fs-base:1rem; --fs-lg:1.05rem; --fs-xl:1.3rem; --fs-2xl:1.5rem; --fs-stat:1.7rem; --fw-normal:400; --fw-medium:600; --fw-bold:700; --fw-display:800; --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --radius:var(--r-lg); --maxw:620px; } @media (prefers-color-scheme: dark){ :root{ --teal:#2fb6b6; --teal-d:#1e8f8f; --teal-l:#10302f; --amber:#f0ad4e; --amber-d:#d4922f; --amber-l:#2e2410; --amber-chip:#f0ad4e; --ink:#e9eef1; --muted:#9fb0bc; --line:#263038; --bg:#0e161c; --card:#16212a; --silver:#5d6b78; --silver-l:#1c272f; } } *{box-sizing:border-box} html,body{margin:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.45; -webkit-font-smoothing:antialiased; padding-bottom:84px; } a{color:var(--teal); text-decoration:none} /* Brand mark (auth pages + any ): the REAL Rekiva symbol (the app icon PNG: symbol on its soft #EEEFF2 tile) — never a placeholder dot. */ .brand-mark{display:inline-block;flex:none;box-sizing:border-box;width:22px;height:22px;border-radius:24%; background:#EEEFF2 url("/static/rekiva-icon-192.png") center / cover no-repeat; /* raster: CK-143 */ box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .brand-mark.big{width:56px;height:56px;margin:0 auto;border-radius:22%; box-shadow:0 4px 14px rgba(6,72,72,.18),inset 0 0 0 1px rgba(0,0,0,.05)} /* Real brand logo in a rounded app-tile — the white tile is baked into rekiva-logo-tile.png (CK-143) so the mark reads on the light chrome, the dark hero AND a force-darkened page. */ .rk-logo{display:inline-block;flex:none;box-sizing:border-box;border-radius:24%; object-fit:contain;box-shadow:0 2px 8px rgba(6,72,72,.22),inset 0 0 0 1px rgba(0,0,0,.06)} .rk-logo-nav{width:38px;height:38px} .rk-logo-hero{width:clamp(52px,10vw,72px);height:clamp(52px,10vw,72px);border-radius:22%; box-shadow:0 6px 20px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.05)} .rk-logo-foot{width:30px;height:30px} /* Stylized icon+word LOCKUP for the landing nav + footer. Dark word for light chrome; a white-word variant swaps in under dark mode so it never vanishes on a dark nav. */ .lp-brand-lockup{width:auto;height:30px} .lp-footer-lockup{width:auto;height:26px} .rk-light-only{display:block} .rk-dark-only{display:none} .lp-dark-lockup{display:none;align-items:center;gap:8px} .lp-dark-symbol{width:34px;height:34px} .lp-dark-word{height:24px;width:auto} .lp-dark-lockup-foot .lp-dark-symbol{width:28px;height:28px} .lp-dark-lockup-foot .lp-dark-word{height:20px} @media (prefers-color-scheme: dark){ .rk-light-only{display:none} .rk-dark-only{display:block} .lp-dark-lockup{display:inline-flex} } /* CK-143/161: Samsung Internet's dark mode (Blink forced dark) repaints a light page itself: it LIGHTENS the dark fills inside SVG images (the charcoal R went pale on the silver, the word went gray) and darkens CSS background colours (the logo's white tile). `color-scheme: only light` on the element does NOT stop it. What it leaves alone is an opaque raster with its own backing, so the brand surfaces use PNGs made from the SVGs (tools/make_logo_pngs.py): the symbol with its white tile baked in, and the lockup on opaque white (a white badge if the bar is darkened). */ .lp-brand-lockup, .lp-footer-lockup{border-radius:6px} /* Topbar */ .topbar{display:flex;align-items:center;justify-content:space-between; padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:5} .brand{display:flex;align-items:center;gap:var(--sp-4);color:var(--ink);font-weight:700} .brand-name{letter-spacing:.2px} .link-btn{background:none;border:none;color:var(--muted);font-size:var(--fs-md);cursor:pointer} .logout{margin:0} .content{max-width:var(--maxw);margin:0 auto} .page{padding:18px 16px} .h-page{font-size:var(--fs-2xl);margin:.2em 0 .6em} .h-sec{font-size:var(--fs-lg);margin:1.4em 0 .5em;display:flex;align-items:center;gap:8px} /* Cards */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cards.two{margin:14px 0} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .card-label{font-size:var(--fs-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .card-big{font-size:var(--fs-stat);font-weight:700;margin-top:4px} .card-big.muted{color:var(--muted)} .card-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px} /* Lists / rows */ .list{list-style:none;padding:0;margin:8px 0} .list li{margin-bottom:8px} .row{display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6) var(--sp-7)} .row-main{font-weight:600} .row-sub{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--muted)} .row-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .tag{font-size:var(--fs-xs);padding:3px 9px;border-radius:var(--r-pill);font-weight:600;white-space:nowrap} .tag.teal{background:var(--teal-l);color:var(--teal-d)} .tag.amber{background:var(--amber-l);color:var(--amber-d)} .tag.amber.tag-link{color:var(--amber-chip)} /* "+ General Liability" chips on cream: a touch darker */ .tag.silver{background:var(--silver-l);color:var(--muted)} .pill{font-size:var(--fs-sm);padding:1px 10px;border-radius:var(--r-pill);font-weight:700} .pill.amber{background:var(--amber);color:#1f1300} /* was white: 2.4:1 -> 13:1 */ .empty,.disclaimer{color:var(--muted)} .empty{padding:16px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r-md)} .disclaimer{font-size:var(--fs-xs);margin-top:28px;line-height:1.5} .hint{font-size:var(--fs-sm);color:var(--muted);font-weight:400} .hint.block{display:block} .muted{color:var(--muted)} .center{text-align:center} .back{display:inline-block;color:var(--muted);font-size:var(--fs-md);margin-bottom:6px} .meta{display:flex;gap:6px;margin-bottom:12px} /* Paperwork */ .paperwork{list-style:none;padding:0;margin:8px 0} .pw-row{display:flex;align-items:center;justify-content:space-between; background:var(--card);border:1px solid var(--line);border-left-width:4px; border-radius:var(--r-sm);padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-4)} .pw-row.ok{border-left-color:var(--teal)} .pw-row.attn{border-left-color:var(--amber)} .pw-name{font-weight:600} .pw-status{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-md);color:var(--muted)} .pw-dates{font-size:var(--fs-sm)} .dot{width:9px;height:9px;border-radius:50%;display:inline-block} .dot.teal{background:var(--teal)} .dot.amber{background:var(--amber)} .kv{list-style:none;padding:0;margin:6px 0 4px} .kv li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md);min-width:0;overflow-wrap:anywhere} .kv li span{color:var(--muted);min-width:70px} /* job cost (report_job_cost / project page): label | amount rows */ dl.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;margin:6px 0 4px} dl.kv dt,dl.kv dd{margin:0;padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md);min-width:0;overflow-wrap:anywhere} dl.kv dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} dl.kv .sub{color:var(--muted);padding-left:12px;font-size:var(--fs-sm)} dl.kv dd.text{white-space:normal;max-width:45vw} /* a words value (category, kind) may wrap */ /* expense page: labels wrap between WORDS (never "Catego|ría"), so a long value can't squeeze them */ dl.kv.exp-kv dt{overflow-wrap:break-word;hyphens:auto} dl.kv dd.neg{color:var(--attn)} .job-cost h3{margin:0 0 4px} /* Forms */ .stack{display:flex;flex-direction:column;gap:14px;margin-top:8px} label{display:block;font-weight:600;font-size:var(--fs-md)} input[type=text],input[type=email],input[type=password],input[type=tel],input:not([type]),textarea{ width:100%;margin-top:6px;padding:12px 13px;font-size:16px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit} input:focus{outline:2px solid var(--teal);border-color:var(--teal)} label.check{display:flex;gap:10px;align-items:flex-start;font-weight:600} label.check input{margin-top:3px;width:18px;height:18px;flex:none} .btn{display:inline-block;text-align:center;padding:13px 18px;border-radius:var(--r-md); font-weight:var(--fw-bold);font-size:var(--fs-base);border:none;cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease} .btn.primary{background:var(--teal);color:#fff} .btn.primary:hover{background:var(--teal-d)} .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)} .btn.ghost:hover{background:var(--silver-l);border-color:var(--teal);color:var(--ink)} .btn.block{display:block;width:100%;margin-top:16px} .err{background:var(--amber-l);color:var(--amber-d);padding:11px 14px;border-radius:var(--r-sm); font-size:var(--fs-md);border:1px solid var(--amber)} /* Auth screens */ body.auth{display:flex;align-items:center;min-height:100vh;padding-bottom:0} .auth-card{max-width:400px;margin:auto;padding:28px 22px;width:100%} .auth-brand{text-align:center;margin-bottom:22px} .auth-brand h1{margin:12px 0 2px;font-size:1.8rem} .tagline{color:var(--muted);margin:0;font-size:var(--fs-md)} /* Bottom nav */ .bottomnav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card); border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto; padding-bottom:env(safe-area-inset-bottom)} .bottomnav a{flex:1;text-align:center;padding:9px 0 7px;font-size:var(--fs-xs);color:var(--muted); display:flex;flex-direction:column;align-items:center;gap:2px} .bottomnav a.active{color:var(--teal)} .bottomnav a.nav-soon{opacity:.4} .bottomnav .ni{font-size:var(--fs-xl);line-height:1} .nav-add .ni{background:var(--teal);color:#fff;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;margin-top:-2px} /* ---- Phase 3: agreements / stages / payments ---- */ select{width:100%;margin-top:6px;padding:12px 13px;font-size:16px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit} input[type=date]{width:100%;margin-top:6px;padding:11px 13px;font-size:16px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit} .disclose{margin:10px 0} .disclose summary{cursor:pointer;list-style:none} .disclose summary::-webkit-details-marker{display:none} .disclose.tight{margin:2px 0 10px} .disclose.tight summary{font-size:var(--fs-sm)} .boxed{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-top:10px} .row-btns{display:flex;gap:10px} .row-btns .btn{flex:1} .balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:6px 0} .bal{background:var(--card);padding:13px 15px;display:flex;flex-direction:column;gap:3px} .bal-l{font-size:var(--fs-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .bal-v{font-size:1.2rem;font-weight:700} .bal.strong .bal-v{font-size:var(--fs-xl)} .amber-ink{color:var(--amber-d)} .toggle-form{text-align:right;margin:2px 0 8px} .warn{background:var(--amber-l);color:var(--amber-d);border:1px solid var(--amber); border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fs-md);margin:10px 0} .stage-list,.pay-list{list-style:none;padding:0;margin:8px 0} .stage-row{background:var(--card);border:1px solid var(--line);border-left-width:4px; border-left-color:var(--silver);border-radius:var(--r-sm);padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-4)} .stage-row.on{border-left-color:var(--amber)} .stage-head{display:flex;justify-content:space-between;font-weight:600} .stage-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pay-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-4)} .pay-amt{font-weight:700} .pay-meta{display:block;font-size:var(--fs-sm);color:var(--muted)} .pay-row.voided{opacity:.55;text-decoration:line-through} .pay-row.refund{border-left:4px solid var(--teal)} .inline{display:inline;margin:0} .inline .link-btn{color:var(--amber-d)} .list.compact li{margin-bottom:4px} .row.sm{padding:10px 13px;font-size:var(--fs-md)} .row.sm.voided{opacity:.5;text-decoration:line-through} .row.sm.strong{font-weight:700;background:var(--silver-l)} .archive-form{margin-top:22px} .hint.block{display:block;margin-top:14px} a.card{color:var(--ink);display:block} a.card:hover{border-color:var(--teal)} /* ---- Phase 4: Drive / settings ---- */ .topbar-actions{display:flex;align-items:center;gap:14px} .ok-banner{background:var(--teal-l);color:var(--teal-d);border:1px solid var(--teal); border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fs-md);margin:10px 0} .boxed p{margin:.3em 0} .doc-link{font-size:var(--fs-sm)} .pw-upload{margin:2px 0 10px} .pw-upload summary{font-size:var(--fs-sm);cursor:pointer;color:var(--teal)} #doc-status{font-size:var(--fs-md);margin-top:8px} /* ---- Phase 6: reports ---- */ .report-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0} .report-filter label{flex:1;min-width:11em} .report-filter select{min-width:0;width:100%;box-sizing:border-box} /* the LABEL keeps the 11em floor ("Calendar year" was cut to "Calendar ye"); an 11em select measured in its own larger font ran 14px past the label (layout sweep 10/28) */ .report-filter .btn{flex:none} .audit-row .row-tags{margin-top:4px;gap:6px} input[type=number]{width:100%;margin-top:6px;padding:11px 13px;font-size:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)} /* ---- multipage document capture (capture.js) ---- */ .cap-strip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .cap-page{position:relative;width:76px;height:96px;border:1px solid var(--line); border-radius:9px;overflow:hidden;background:var(--teal-l);flex:none} .cap-page img{width:100%;height:100%;object-fit:cover;display:block} .cap-page.cap-pdf{display:flex;align-items:center;justify-content:center;width:auto; min-width:120px;padding:0 10px;font-size:var(--fs-sm);color:var(--teal-d);gap:4px} .cap-page .cap-x,.cap-page .cap-up,.cap-page .cap-down{position:absolute;border:none; width:22px;height:22px;border-radius:50%;font-size:var(--fs-sm);line-height:1;cursor:pointer; background:rgba(0,0,0,.62);color:#fff;padding:0} .cap-page .cap-x{top:3px;right:3px} .cap-page .cap-up{bottom:3px;left:3px} .cap-page .cap-down{bottom:3px;left:29px} .cap-num{position:absolute;top:3px;left:3px;background:var(--teal);color:#fff; font-size:var(--fs-xs);min-width:17px;height:17px;border-radius:9px;text-align:center; line-height:17px;padding:0 4px} .cap-actions{display:flex;gap:8px;flex-wrap:wrap} .cap-actions .btn{flex:1;min-width:140px} /* Tappable money cards (each total opens the entries behind it) */ a.card.tappable .card-sub{color:var(--teal)} a.card.active{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)} .page > .row-btns{margin:12px 0 4px} .attn-count{margin:-4px 0 10px;font-weight:600;color:var(--amber-d)} .btn[disabled]{opacity:.55;cursor:not-allowed} .req-row .row-sub{display:block} /* Trade multi-select (searchable, canonical list + Other) */ .trade-pick{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:0;min-width:0} /* fieldset min-content would outgrow 320px */ .trade-pick legend{font-weight:600;padding:0 4px} .trade-list{max-height:200px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:8px 0} .trade-opt{display:flex;align-items:center;gap:6px;font-weight:400;padding:4px 0;min-width:0;overflow-wrap:anywhere} .trade-opt[hidden]{display:none} .trade-group{grid-column:1/-1;margin:6px 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .trade-opt.suggested{font-weight:600} .trade-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px} .chip{border:none;cursor:pointer} /* Peer action buttons (Record a payment / Add amount owed): SAME weight + style so the pair reads as two actions, not a filled-vs-outlined toggle. An open form takes the full row. */ .btn.action{background:var(--teal);color:#fff;font-weight:600;display:block;width:100%; box-shadow:0 1px 2px rgba(0,0,0,.12)} .btn.action:hover{background:var(--teal-d)} .btn.action.sm{width:auto} /* size comes from the one standard .btn.sm spec */ .btn.action[disabled]{opacity:.45} .action-pair{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0} .action-pair > .disclose.action{flex:1 1 40%;margin:0} .action-pair > .disclose.action[open]{flex-basis:100%;order:-1} .action-pair > .disclose.action[open] > summary{background:var(--teal-d)} .h-sub{font-size:var(--fs-md);color:var(--muted);margin:1.2em 0 .4em;text-transform:uppercase;letter-spacing:.04em} /* Venmo-style payment feed */ .feed{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)} .feed li + li{border-top:1px solid var(--line)} .feed-row{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-7);color:var(--ink)} .feed-row.voided{opacity:.55} .feed-row.voided .feed-amt{text-decoration:line-through} .feed-av{flex:0 0 36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:700;color:#22303a;background:var(--silver)} /* was white on silver: fails AA */ .feed-av.in{background:var(--teal)} .feed-av.out{background:var(--amber-d)} .feed-main{flex:1;min-width:0;display:flex;flex-direction:column} .feed-who{font-weight:600} .feed-sub{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .feed-amt{font-weight:700;white-space:nowrap} .feed-amt.in{color:var(--teal)} .trade-add-row{display:flex;gap:8px;align-items:center} .trade-add-row .trade-search{flex:1} .action-row{margin:12px 0 4px} .action-row .btn.action{display:flex;align-items:center;justify-content:center;width:auto} /* Trade lines on owed entries */ /* fieldset defaults to min-width:min-content and its legend straddles the border: both made the box run past the screen edge with its heading floating outside it on phones. */ .trade-lines{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin:0;min-width:0;max-width:100%;box-sizing:border-box} .trade-lines legend{float:left;width:100%;padding:0;margin:0 0 8px;font-weight:600} .trade-lines legend .hint{display:block;font-weight:400;margin-top:2px} .trade-lines .tl-rows{clear:both} .tl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(84px,110px) 32px;gap:6px;margin-bottom:6px;align-items:center} .tl-row input{min-width:0;width:100%;box-sizing:border-box} .btn.sm{padding:9px 14px;font-size:var(--fs-md)} /* Payment detail */ .pay-hero{text-align:center;margin:10px 0 16px} .pay-hero.voided .pay-hero-amt{text-decoration:line-through;opacity:.6} .feed-av.big{width:56px;height:56px;margin:0 auto 6px;font-size:1.4rem;display:flex} .pay-hero-amt{font-size:2rem;font-weight:800} .pay-hero-amt.in{color:var(--teal)} .pay-hero-who{color:var(--muted)} a.pay-amt{color:var(--ink)} .pw-row.neutral{border-left-color:var(--silver)} .dot.silver{background:var(--silver)} .pw-ack{margin:-4px 0 6px} .feed-av.offset{background:var(--silver);color:var(--ink)} /* "See entries" landing: clear the sticky top bar + flash the list so the tap visibly lands */ #entries,#payments,#trades{scroll-margin-top:64px} #entries:target{animation:rk-flash 1.2s ease-out} @keyframes rk-flash{0%{background:var(--teal-l);box-shadow:0 0 0 6px var(--teal-l)}100%{background:transparent;box-shadow:none}} a.card.tappable{-webkit-tap-highlight-color:rgba(0,128,128,.18);touch-action:manipulation} a.card.tappable:active{transform:scale(.98)} /* Tappable document status bubbles (the bubble is the Add action) */ .pw-li{list-style:none} .pw-item > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:rgba(255,191,0,.2)} .pw-item > summary::-webkit-details-marker{display:none} .pw-cta{margin-left:8px;font-weight:600;color:var(--teal);white-space:nowrap} .pw-row.attn .pw-cta{color:var(--amber-d)} .pw-item[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0} .pw-panel{margin:-1px 0 8px;border-top-left-radius:0;border-top-right-radius:0} .pw-or{margin-bottom:0} .attn-row{display:flex;align-items:center;gap:8px} .row-link{color:var(--ink);display:flex;flex-direction:column;flex:1;min-width:0} a.tag-link{text-decoration:none;padding:6px 10px} .pw-item{scroll-margin-top:64px} a.tag-link.on{box-shadow:inset 0 0 0 2px var(--teal);font-weight:700} .proj-filter{margin:6px 0 10px} /* ---- Expandable bottom nav: fixed center Add, handle + sheet of labeled tiles ---- */ .bottomnav{z-index:20} .nav-handle{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:56px;height:18px; border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;background:var(--card); cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation} .nav-handle span{display:block;width:26px;height:4px;border-radius:2px;background:var(--silver)} .nav-handle[aria-expanded=true] span{background:var(--teal)} .nav-sheet{position:fixed;inset:0;z-index:19} .nav-backdrop{position:absolute;inset:0;background:rgba(10,20,25,.35);opacity:0;transition:opacity .18s} .nav-panel{position:absolute;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto; background:var(--card);border-radius:18px 18px 0 0;padding:10px 16px; transform:translateY(100%);transition:transform .18s ease-out;box-shadow:0 -6px 24px rgba(0,0,0,.18)} /* The panel never outgrows the visible screen: it scrolls INSIDE itself (the page behind is locked by nav.js) and its bottom padding clears the bottom bar (--nav-h, measured by nav.js incl. the home indicator). */ .nav-panel{max-height:calc(100vh - 12px - env(safe-area-inset-top));max-height:calc(100dvh - 12px - env(safe-area-inset-top)); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding-bottom:calc(var(--nav-h, calc(64px + env(safe-area-inset-bottom))) + 20px); scroll-padding-bottom:calc(var(--nav-h, calc(64px + env(safe-area-inset-bottom))) + 8px)} .nav-backdrop, .nav-grip{touch-action:none} html.rk-sheet-open, html.rk-sheet-open body{overflow:hidden} .nav-sheet.open .nav-backdrop{opacity:1} .nav-sheet.open .nav-panel{transform:none} .nav-grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px} .nav-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .nav-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border:1px solid var(--line); border-radius:var(--r-lg);color:var(--ink);font-size:var(--fs-md);font-weight:600} .nav-tile .ni{font-size:var(--fs-2xl)} .nav-tile.on{border-color:var(--teal);color:var(--teal)} .nav-tile small{font-weight:400;color:var(--muted);font-size:var(--fs-xs)} /* ========================================================================================== Narrow-screen layout (Samsung Z Fold outer display ~344px, 320px Androids, large system font sizes). Regression fix: a no-wrap money amount inside a `1fr` grid column forced the column to its min-content width, so the card spilled into its neighbour and text overlapped. Rules: grid columns may shrink (minmax(0,1fr)); every flex/grid child may shrink (min-width:0); amounts scale to their OWN card's width (container units) and wrap only as a last resort; tag/bubble rows wrap; long names break instead of pushing neighbours. Verified by qa/layout_audit.py at 320/344/360/390px and 1.0x/1.3x text. ========================================================================================== */ .cards,.balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .card,.bal{min-width:0;container-type:inline-size} .card{padding:14px clamp(10px,3.5vw,16px)} .card-big{font-size:clamp(.8rem,12cqi,1.7rem);line-height:1.15;overflow-wrap:anywhere} .bal-v{font-size:clamp(.95rem,10.5cqi,1.2rem);overflow-wrap:anywhere} .bal.strong .bal-v{font-size:clamp(1rem,11.5cqi,1.35rem)} .card-label,.bal-l{overflow-wrap:anywhere} .h-page{overflow-wrap:anywhere} .meta{flex-wrap:wrap} .meta .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* trade labels only — never amounts */ .row{flex-wrap:wrap} .row > .row-tags{margin-left:auto} .row-main,.row-link{min-width:0;flex:1 1 auto;overflow-wrap:anywhere} .row-tags{flex:0 1 auto;min-width:0} .feed-who{overflow-wrap:anywhere} .feed-amt{flex:0 0 auto} .pw-row{flex-wrap:wrap;gap:4px 10px} .pw-status{flex-wrap:wrap;justify-content:flex-end} .action-pair > .disclose.action > summary,.row-btns .btn{padding-left:10px;padding-right:10px} @media (max-width:420px){ /* Needs-attention / Documents rows: the document bubbles drop BELOW the business name instead of squeezing it into a sliver. */ .attn-row{flex-wrap:wrap} .attn-row > .row-tags{flex:1 1 100%;justify-content:flex-start} .page{padding:16px 12px} .cards{gap:8px} } /* Verified-style paperwork badge (app/badge.py) — teal check = current, amber triangle = attention */ .vb{display:inline-flex;align-items:center;vertical-align:-0.12em;width:1em;height:1em;margin-left:.3em;flex:0 0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%} .vb svg{width:100%;height:100%} .vb.vb-ok{color:var(--teal)} .vb.vb-warn{color:var(--amber-d)} /* an icon needs 3:1; pure amber is 1.6:1 */ .vb:focus-visible,.has-tip:focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* Reusable tap-to-reveal tooltip (TT, design-polish): ANY element with class "has-tip" + data-tip="..." gets the same touch-safe bubble as the .vb badge — tap / Enter / Space toggles it (badge.js), Escape/outside-tap closes it. This is the ONE standard tooltip pattern; do NOT rely on native title= alone for status info (it's invisible on touch). title= may stay as a desktop-hover enhancement alongside data-tip. */ .has-tip{cursor:help;-webkit-tap-highlight-color:transparent} .vb.tip-open::after,.has-tip.tip-open::after{content:attr(data-tip);position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:30; background:var(--ink);color:var(--card);font-size:var(--fs-md);font-weight:500;line-height:1.35;padding:10px 12px;border-radius:var(--r-md);box-shadow:0 6px 20px rgba(0,0,0,.25);text-transform:none;letter-spacing:0;white-space:normal} .h-page .vb{width:.8em;height:.8em} a.tag-link{white-space:normal;max-width:100%;overflow-wrap:anywhere;line-height:1.25} /* doc bubbles may wrap; amount tags never do */ /* Saved-document tiles: the WHOLE tile opens the file; badge = status by RECORDED dates only */ .doc-tiles{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px} .doc-tile{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--card);color:var(--ink);min-width:0;-webkit-tap-highlight-color:rgba(0,128,128,.15)} a.doc-tile:hover{border-color:var(--teal)} a.doc-tile:active{transform:scale(.99)} a.doc-tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .doc-tile.expired{border-left:4px solid var(--amber)} .doc-tile.current{border-left:4px solid var(--teal)} .doc-ico{flex:0 0 auto;font-size:1.2rem;line-height:1.3} .doc-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .doc-name{font-weight:600;font-size:var(--fs-md);overflow-wrap:anywhere} .doc-dates{font-size:var(--fs-sm);color:var(--ink)} .doc-sub{font-size:var(--fs-sm);color:var(--muted)} .doc-open{color:var(--teal);font-weight:600} .doc-badge{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap} .doc-badge.current{background:var(--teal-l);color:var(--teal-d)} .doc-badge.expired{background:var(--amber-l);color:var(--amber-d)} .doc-badge.future,.doc-badge.undated{background:var(--silver-l);color:var(--muted)} .doc-note{margin:2px 0 10px} /* Capture widget: per-widget status, unsaved warning, upload progress (Oct 18 evening §3) */ .cap-status{font-size:var(--fs-md);margin:6px 0 0;color:var(--teal-d);font-weight:600;min-height:1em} .cap-status.bad{color:var(--amber-d)} .cap-unsaved{margin:6px 0 0;padding:8px 10px;border-radius:var(--r-sm);background:var(--amber-l);color:var(--amber-d); font-size:var(--fs-md);font-weight:600} .cap-progress{display:flex;align-items:center;gap:8px;margin-top:6px} .cap-progress progress{flex:1;height:10px;accent-color:var(--teal)} .cap-pct{font-size:var(--fs-sm);font-weight:700;min-width:3em;text-align:right} .saved-doc{overflow-wrap:anywhere} /* Offline indicator (pwa.js) */ .net-bar{position:fixed;left:0;right:0;top:0;z-index:40;padding:10px 14px;font-size:var(--fs-md);font-weight:600;text-align:center;line-height:1.35} .net-bar.offline{background:var(--amber-l);color:var(--amber-d);border-bottom:1px solid var(--amber)} .net-bar.online{background:var(--teal-l);color:var(--teal-d);border-bottom:1px solid var(--teal)} /* Apply-offset CTA: a real button, not a text link (discoverability) */ .offset-cta{margin:10px 0 4px} .btn.offset-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;background:var(--card);color:var(--teal-d); border:2px solid var(--teal);font-weight:700;padding:11px 14px} .btn.offset-btn:hover{background:var(--teal-l)} .btn.offset-btn small{font-weight:var(--fw-medium);color:var(--muted);font-size:var(--fs-sm)} .btn.offset-btn .ob-ico{font-size:1.1rem} .offset-cta[open] > .btn.offset-btn{background:var(--teal-l)} /* One shared GL/WC coverage-date pair per document panel */ .date-pair{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px 10px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .date-pair legend{font-weight:600;padding:0 4px} .date-pair label{min-width:0} .date-pair input{width:100%;min-width:0} @media (max-width:340px){.date-pair{grid-template-columns:1fr}} .lang-switch{text-align:center;margin:14px 0 4px;font-size:var(--fs-md)} .boxed .lang-switch{text-align:left;margin:0 0 6px;font-size:var(--fs-base)} .lang-switch a,.lang-switch strong{display:inline-block;padding:6px 4px} /* Demo-account banner (sandboxed showcase accounts) */ .demo-banner { margin: 0; padding: 6px 12px; text-align: center; font-size:var(--fs-md); background: var(--amber-l); color: var(--amber-d); border-bottom: 1px solid var(--amber); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; } .demo-exit { margin: 0; display: inline; } .demo-exit-btn { font: inherit; font-weight: 700; color: var(--amber-d); background: transparent; border: 1.5px solid var(--amber); border-radius:var(--r-pill); padding: 4px 12px; min-height: 32px; cursor: pointer; white-space: nowrap; } .demo-exit-btn:hover { background: var(--amber); color: #1f1300; } /* My business documents + share: long Drive filenames must wrap on narrow phones */ .own-doc, .own-doc .row-sub, .share-pick, .share-pick .hint, .share-log .row-sub, .share-results .row-sub { min-width: 0; overflow-wrap: anywhere; } /* CK-081: original vs net-after-refunds trade allocation on the payment page */ .split-head .hint, .split-net { min-width: 5.5em; text-align: right; } .split-net { font-weight: 600; } .fully-refunded { margin: 6px 0; } /* Signup email verification banner (soft gate) */ .verify-banner { margin: 0; padding: 8px 12px; font-size:var(--fs-md); background: var(--amber-l); color: var(--amber-d); border-bottom: 1px solid var(--amber); overflow-wrap: anywhere; } .verify-banner.ok { background: transparent; color: var(--teal, #0f766e); border-bottom-color: var(--line, #ddd); } .verify-banner .inline-form { display: inline; } .reconnect-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; font-size:var(--fs-md); background: var(--amber-l); color: var(--amber-d); border: 1px solid var(--amber); border-radius: 8px; overflow-wrap: anywhere; } .reconnect-banner span { flex: 1 1 220px; } .reconnect-banner .btn { flex: 0 0 auto; } /* "Sign in with Google" — Google Identity branding (light theme). Don't restyle. */ .gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 12px; margin: 8px 0; background: #FFFFFF; border: 1px solid #747775; border-radius: 4px; color: #1F1F1F; font-family: "Roboto", Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .25px; text-decoration: none; box-sizing: border-box; } .gsi-btn:hover { background: #F8F9FA; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); } .gsi-btn:focus-visible { outline: 2px solid #0B57D0; outline-offset: 2px; } .gsi-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; } .gsi-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .or-sep { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--muted, #6b7280); font-size:var(--fs-md); } .or-sep::before, .or-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line, #ddd); } .legal-links { text-align: center; font-size:var(--fs-md); margin: 14px 0 4px; } .site-foot { padding: 4px 12px 96px; } .home-name { font-size: 2.2rem; letter-spacing: .5px; } .home-points { margin: 10px 0 16px; padding-left: 1.2em; } .legal-body { line-height: 1.55; overflow-wrap: anywhere; } .legal-body h1 { font-size:var(--fs-2xl); } .legal-body h2 { font-size: 1.15rem; margin-top: 1.4em; } /* ===================================================================================== PUBLIC LANDING PAGE (home.html, body.lp) — Rekiva palette only: teal / amber / silver. Mobile-first; two-column alternating features from 768px. Scoped to body.lp so nothing here touches the app screens. ===================================================================================== */ body.lp { --lp-teal: var(--teal); --lp-teal-d: var(--teal-d); --lp-teal-l: var(--teal-l); --lp-teal-xd: #064848; /* deep teal for the hero + final band */ --lp-amber: var(--amber); --lp-amber-d: var(--amber-d); --lp-amber-l: var(--amber-l); --lp-amber-ink: #8a5a10; /* amber dark enough for small text (AA on light bg) */ --lp-silver: var(--silver); --lp-silver-l: var(--silver-l); --lp-ink: var(--ink); --lp-muted: var(--muted); --lp-line: var(--line); --lp-card: var(--card); --lp-bg: var(--bg); --lp-r-sm: 10px; --lp-r: 16px; --lp-r-lg: 28px; --lp-shadow: 0 1px 2px rgba(6,72,72,.06), 0 8px 24px rgba(6,72,72,.08); --lp-maxw: 1100px; padding-bottom: 0; background: var(--lp-bg); } @media (prefers-color-scheme: dark) { body.lp { --lp-amber-ink: var(--amber); } } body.lp .content { max-width: none; margin: 0; } .lp-wrap { max-width: var(--lp-maxw); margin: 0 auto; padding: 0 20px; } /* ---- sticky top nav --------------------------------------------------------------- */ .lp-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--lp-card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--lp-line); } .lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; } .lp-brand { display: flex; align-items: center; gap: 10px; color: var(--lp-ink); min-width: 0; } .lp-brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; } .lp-brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: .2px; } .lp-brand-tag { font-size:var(--fs-xs); color: var(--lp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-nav-links { display: flex; align-items: center; gap: 18px; font-size:var(--fs-md); flex-shrink: 0; } .lp-nav-links a { color: var(--lp-ink); } .lp-nav-links a:hover { color: var(--lp-teal); } .lp-signin { padding: 7px 16px; border-radius:var(--r-pill); border: 1.5px solid var(--lp-teal); color: var(--lp-teal) !important; font-weight: 600; transition: background .15s, color .15s; } .lp-signin:hover { background: var(--lp-teal); color: #fff !important; } .lp-hide-sm { display: none; } /* ---- hero ------------------------------------------------------------------------- */ .lp-hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 8vw, 96px); background: radial-gradient(1200px 420px at 50% -10%, rgba(255,191,0,.22), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(192,192,192,.18), transparent 60%), linear-gradient(160deg, var(--teal) 0%, var(--lp-teal-xd) 100%); } .lp-hero .lang-switch { margin: 0 0 18px; font-size:var(--fs-md); } .lp-hero .lang-switch a, .lp-hero .lang-switch strong { color: rgba(255,255,255,.9); } .lp-hero-brand { display: flex; align-items: center; justify-content: center; gap: 14px; } .lp-hero-brand .brand-mark.big { margin: 0; width: clamp(40px, 7vw, 56px); height: clamp(40px, 7vw, 56px); } /* Hero brand = the stylized Rekiva wordmark (white). Image-replacement: the real

Rekiva

text stays in the DOM (SEO + Google OAuth brand verification) but is visually swapped for the stylized wordmark SVG. */ .lp-hero .home-name { margin: 0 auto; width: clamp(230px, 58vw, 360px); aspect-ratio: 1248 / 348; background: url("/static/rekiva-wordmark-light.svg") center / contain no-repeat; text-indent: -9999px; overflow: hidden; white-space: nowrap; } .lp-headline { margin: 18px auto 0; font-size: clamp(1.7rem, 5.6vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; max-width: 24ch; } .lp-sub { margin: 16px auto 0; max-width: 60ch; font-size: clamp(1rem, 2.4vw, 1.16rem); color: rgba(255,255,255,.88); } .lp-cta { display: flex; flex-direction: column; gap: 12px; margin: 26px auto 0; max-width: 360px; } .lp-google { max-width: 360px; margin: 12px auto 0; } .lp-google .gsi-btn { margin: 0; } /* Terms/Privacy links must be readable on the DARK hero — the shared terms_agree macro's default teal link color is for the light /signup + /welcome pages, not this band. */ .lp-hero .terms-agree { color: rgba(255,255,255,.92); } .lp-hero .terms-agree a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .lp-signin-line { margin: 14px 0 0; font-size:var(--fs-md); color: rgba(255,255,255,.85); } .lp-signin-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* Demo promoted into the hero as a first-class CTA (display:contents so the button joins .lp-cta's flex) */ .lp-hero-demo { display: contents; } .lp-demo-hint { margin: 10px auto 0; font-size:var(--fs-md); color: rgba(255,255,255,.82); } /* Hero subhead + the three benefit pills (Documents · Payments · Audit Preparation) — each is a link that scrolls to its feature section (#lp-documents / #lp-payments / #lp-audit) */ .lp-subhead { margin: 12px auto 0; max-width: 34ch; font-size: clamp(1.08rem, 3vw, 1.35rem); font-weight: 600; color: #fff; line-height: 1.35; } .lp-bullets { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 14px auto 0; padding: 0; font-weight: 700; font-size:var(--fs-base); } .lp-bullet { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border-radius:var(--r-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: inherit; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; } .lp-bullet:hover, .lp-bullet:focus-visible { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); } .lp-feature[id] { scroll-margin-top: 76px; } /* land below the sticky landing nav */ html:has(body.lp) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(body.lp) { scroll-behavior: auto; } } /* Big, centered, thumb-sized hero buttons (>= 52px tall, full width up to 360px) */ .lp-btn-xl { width: 100%; min-height: 54px; font-size: 1.08rem; } .lp-hero .lp-cta { flex-direction: column; align-items: stretch; max-width: 360px; } /* stacked + centered at every width */ .lp-hero .lp-cta .lp-demo-hint { margin: 0; } .lp-see-how { min-height: 48px; } /* "Ready to get started?" — its own card so it reads as a separate step after the demo */ .lp-start { max-width: 400px; margin: 28px auto 0; padding: 20px 18px 16px; border-radius:var(--r-xl); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); } .lp-start-title { margin: 0 0 12px; font-size: clamp(1.15rem, 3.4vw, 1.4rem); font-weight: 800; } .lp-start-form { display: flex; flex-direction: column; gap: 12px; text-align: left; } .lp-start-form .terms-agree { color: rgba(255,255,255,.92); font-size:var(--fs-md); } .lp-start-form .terms-agree a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .lp-start-form .or-sep { margin: 0; color: rgba(255,255,255,.75); } .lp-start-form .or-sep::before, .lp-start-form .or-sep::after { border-top-color: rgba(255,255,255,.3); } .lp-start-form .gsi-btn { width: 100%; min-height: 48px; margin: 0; } .lp-start .lp-signin-line { margin: 12px 0 0; } /* ---- buttons ---------------------------------------------------------------------- */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 12px 24px; border-radius:var(--r-pill); font-weight: 700; font-size:var(--fs-base); text-decoration: none; transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .lp-btn:active { transform: translateY(1px) scale(.99); } .lp-btn:focus-visible { outline: 3px solid var(--lp-amber); outline-offset: 2px; } .lp-btn-primary { background: var(--lp-amber); color: #1f1300; box-shadow: 0 6px 18px rgba(255,191,0,.35); } .lp-btn-primary:hover { background: #E6AC00; box-shadow: 0 8px 22px rgba(255,191,0,.45); } .lp-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); } .lp-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } .lp-btn-light { background: #fff; color: var(--lp-teal-xd); } .lp-btn-light:hover { background: var(--lp-amber-l); } .lp-btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.6); } .lp-btn-ghost-light:hover { background: rgba(255,255,255,.12); } /* ---- pillars strip (Clarity / Control / Freedom) — supporting language under the hero -- */ .lp-pillars { padding: clamp(22px, 5vw, 44px) 0 0; } .lp-pillar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } /* Word -> colour is FIXED by Devan's approved board (10/30): Clarity = silver, Control = teal, Freedom = amber, on charcoal. Keep this order if the pillars are ever reordered. */ .lp-pillar { background: var(--lp-card); border: 1px solid var(--lp-line); border-top: 4px solid var(--lp-silver); border-radius: var(--lp-r); padding: 16px 18px; box-shadow: var(--lp-shadow); } .lp-pillar:nth-child(2) { border-top-color: var(--lp-teal); } .lp-pillar:nth-child(3) { border-top-color: var(--lp-amber); } .lp-pillar-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius:var(--r-sm); background: var(--lp-teal-l); color: var(--lp-teal-d); font-size:var(--fs-lg); margin-bottom: 8px; } .lp-pillar-name { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: .2px; color: var(--lp-ink); } .lp-pillar p { margin: 0; color: var(--lp-muted); } /* ==== SUITE HOMEPAGE HERO (Devan's design): LIGHT background, two-tone headline, two phones ==== */ .lp-nav-suite .lp-nav-lang .lang-switch { margin: 0; font-size: var(--fs-sm); } .lp-nav-suite .lp-nav-lang .lang-switch a { color: var(--lp-muted); } .lp-btn-sm { min-height: 38px; padding: 0 16px; font-size: var(--fs-md); border-radius: var(--r-pill); } .lp-hero-suite { position: relative; overflow: hidden; background: var(--lp-bg); padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 6vw, 72px); } /* soft teal + amber ribbons on the right, behind the phones */ .lp-hero-ribbon { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(42% 55% at 86% 24%, color-mix(in srgb, var(--lp-teal) 24%, transparent) 0%, transparent 70%), radial-gradient(38% 46% at 98% 62%, color-mix(in srgb, var(--lp-amber) 30%, transparent) 0%, transparent 72%), radial-gradient(30% 40% at 70% 86%, color-mix(in srgb, var(--lp-teal) 14%, transparent) 0%, transparent 75%); } .lp-hero-suite .lp-wrap { position: relative; z-index: 1; } .lp-hero-suite .lp-hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } .lp-hero-eyebrow { margin: 0 0 12px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lp-teal-d); } .lp-suite-h1 { margin: 0; font-size: clamp(2.2rem, 8vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -1px; color: var(--lp-ink); } .lp-suite-h1 .tl { color: var(--lp-teal); } .lp-suite-sub { margin: 16px 0 0; max-width: 40ch; font-size: clamp(1.05rem, 2.6vw, 1.22rem); color: var(--lp-muted); line-height: 1.5; } .lp-cta-suite { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; max-width: 100%; } /* nav "Explore apps" is a .lp-btn, whose display beats .lp-hide-sm — hide it explicitly on mobile */ .lp-nav-links a.lp-btn.lp-hide-sm { display: none; } .lp-hero-demo { display: contents; } .lp-btn-teal { background: var(--lp-teal); color: #fff; box-shadow: 0 6px 18px rgba(0,128,128,.28); } .lp-btn-teal:hover { background: var(--lp-teal-d); box-shadow: 0 8px 22px rgba(0,128,128,.36); } .lp-btn-outline { background: var(--lp-card); color: var(--lp-teal-d); border: 1.5px solid var(--lp-line); } .lp-btn-outline:hover { border-color: var(--lp-teal); color: var(--lp-teal-d); background: var(--lp-teal-l); } .lp-suite-hint { margin: 14px 0 0; color: var(--lp-muted); font-size: var(--fs-md); } .lp-hero-suite .lp-signin-line { margin: 8px 0 0; color: var(--lp-muted); } .lp-hero-suite .lp-signin-line a { color: var(--lp-teal-d); font-weight: 600; } /* two overlapping phone mockups (sample data) */ .lp-hero-phones { position: relative; display: flex; justify-content: center; min-width: 0; min-height: 0; max-width: 100%; } .lp-hero-suite .lp-hero-copy { min-width: 0; } .lp-hero-phones .lp-phone { width: min(230px, 64vw); } .lp-hero-phones .lp-phone-back { display: none; } /* single phone on mobile; both on desktop */ .lp-screen-home, .lp-screen-money { padding: 26px 11px 26px; font-size: 11px; gap: 0; } .lp-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .lp-app-head-brand { font-weight: 800; color: var(--lp-ink); font-size: 12px; } .lp-app-head-av { width: 20px; height: 20px; border-radius: 50%; background: var(--lp-teal); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; } .lp-app-biz { color: var(--lp-muted); font-size: 10px; margin-bottom: 8px; } .lp-greet { background: linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-teal-xd) 100%); color: #fff; border-radius: 12px; padding: 10px 11px; margin-bottom: 8px; } .lp-greet-q { margin: 0; font-weight: 800; font-size: 13px; } .lp-greet-s { margin: 2px 0 0; font-size: 10px; color: rgba(255,255,255,.88); } .lp-app-search { background: var(--lp-bg); border: 1px solid var(--lp-line); border-radius: 9px; padding: 7px 10px; color: var(--lp-muted); font-size: 10px; margin-bottom: 9px; } .lp-app-gridhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .lp-app-gridhead > span:first-child { font-weight: 800; color: var(--lp-ink); font-size: 11px; } .lp-arrange { color: var(--lp-teal-d); font-size: 10px; font-weight: 600; } .lp-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .lp-mini-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 11px; padding: 8px 2px; } .lp-mini-tile.is-live { border-color: color-mix(in srgb, var(--lp-teal) 50%, transparent); } .lp-mini-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--lp-teal-l); font-size: 14px; } .lp-mini-tile.is-live .lp-mini-ico { background: var(--lp-teal); } .lp-mini-name { font-size: 8.5px; font-weight: 600; color: var(--lp-ink); } .lp-mini-badge { position: absolute; top: 4px; right: 5px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: var(--lp-amber); color: #1f1300; font-size: 8px; font-weight: 800; display: grid; place-items: center; } .lp-mini-dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-teal); } /* money phone */ .lp-money-hero { background: linear-gradient(135deg, #0b2730 0%, #0a1b22 100%); color: #fff; border-radius: 12px; padding: 10px 11px; margin-bottom: 9px; } .lp-money-hero p { margin: 0; } .lp-money-hero .lp-money-h { font-weight: 800; font-size: 13px; } .lp-money-hero .lp-money-s { font-size: 10px; color: rgba(255,255,255,.82); margin-top: 2px; } .lp-money-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; } .lp-money-tile { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 10px; padding: 8px 9px; } .lp-money-tile span { display: block; font-size: 9px; color: var(--lp-muted); } .lp-money-tile b { font-size: 14px; color: var(--lp-ink); } .lp-qa-head { margin: 0 0 7px; font-weight: 800; font-size: 11px; color: var(--lp-ink); } .lp-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .lp-qa-cell { background: var(--lp-teal-l); border-radius: 10px; padding: 9px 8px; font-size: 9px; font-weight: 600; color: var(--lp-teal-d); display: flex; align-items: center; gap: 5px; } /* ---- THE REKIVA SUITE: apps grid ---------------------------------------------------- */ .lp-suite { padding: clamp(32px, 6vw, 60px) 0 clamp(8px, 3vw, 20px); text-align: center; scroll-margin-top: 66px; } .lp-suite-eyebrow { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lp-amber-ink); } .lp-suite-title { margin: 0 auto; max-width: 18ch; font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.4px; color: var(--lp-ink); } .lp-suite-sub { margin: 10px auto 0; color: var(--lp-muted); font-size: clamp(1rem, 2.2vw, 1.12rem); } .lp-app-grid { list-style: none; margin: clamp(22px, 4vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; } .lp-app { } .lp-app-link { display: flex; align-items: center; gap: 14px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r); padding: 16px 18px; box-shadow: var(--lp-shadow); transition: border-color .15s, box-shadow .15s, transform .1s; color: var(--lp-ink); } a.lp-app-link:hover { border-color: var(--lp-teal); box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-teal) inset; transform: translateY(-1px); } .lp-app-soon { opacity: .9; } .lp-app:not(.is-live) .lp-app-ico { filter: grayscale(.55); opacity: .72; } .lp-app-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lp-teal-l); font-size: 1.5rem; } .lp-app.is-live .lp-app-ico { background: var(--lp-teal); } .lp-app-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .lp-app-name { font-weight: 800; font-size: 1.12rem; color: var(--lp-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lp-app-blurb { color: var(--lp-muted); font-size: var(--fs-md); } .lp-app-badge { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; } .lp-app-badge.now { background: var(--lp-teal); color: #fff; } .lp-app-badge.soon { background: var(--lp-silver-l); color: var(--lp-muted); } .lp-app-arrow { flex: none; font-size: 1.5rem; color: var(--lp-teal); font-weight: 700; } /* ---- SUITE VISION band -------------------------------------------------------------- */ .lp-vision { padding: clamp(28px, 5vw, 48px) 0; } .lp-vision-inner { position: relative; overflow: hidden; border-radius: var(--lp-r-lg); padding: clamp(28px, 5vw, 52px); color: #fff; text-align: center; background: radial-gradient(120% 140% at 15% 10%, #0b5f5f 0%, #083f45 55%, #0a2730 100%); } .lp-vision-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(255,191,0,.14) 0%, transparent 60%); pointer-events: none; } .lp-vision-eyebrow { position: relative; margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lp-amber); } .lp-vision-title { position: relative; margin: 0; font-size: clamp(1.7rem, 5vw, 2.8rem); letter-spacing: -.4px; } .lp-vision-sub { position: relative; margin: 12px auto 0; font-size: clamp(1.05rem, 2.6vw, 1.35rem); color: rgba(255,255,255,.92); } /* ---- Docs app intro (relocated feature content) ------------------------------------ */ .lp-app-anchor { scroll-margin-top: 66px; } .lp-app-intro { padding: clamp(24px, 5vw, 44px) 20px 0; text-align: center; } .lp-app-intro-title { margin: 6px 0 0; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--lp-ink); letter-spacing: -.3px; } .lp-app-intro .lp-eyebrow { color: var(--lp-amber-ink); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; font-size: var(--fs-sm); } .lp-app-intro-sub { margin: 12px auto 0; max-width: 60ch; color: var(--lp-muted); font-size: clamp(1rem, 2.2vw, 1.12rem); } /* ---- alternating features --------------------------------------------------------- */ .lp-features { padding: clamp(36px, 7vw, 88px) 0 clamp(16px, 4vw, 40px); scroll-margin-top: 60px; } .lp-feature { display: grid; gap: 28px; align-items: center; padding: clamp(24px, 5vw, 56px) 0; border-bottom: 1px solid var(--lp-line); } .lp-feature:last-child { border-bottom: 0; } .lp-feature .lp-eyebrow { margin: 0 0 8px; font-size:var(--fs-sm); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lp-amber-ink); } .lp-feature h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 4.4vw, 2.4rem); line-height: 1.12; letter-spacing: -.4px; color: var(--lp-ink); } .lp-feature .lp-lede { margin: -4px 0 10px; font-weight: 600; color: var(--lp-teal-d); } .lp-feature .lp-estimate { margin-top: 12px; padding: 10px 12px; font-size:var(--fs-md); border-left: 3px solid var(--lp-amber); background: var(--lp-amber-l); border-radius: 6px; color: var(--lp-ink); } .lp-feature p { margin: 0; color: var(--lp-muted); font-size: clamp(1rem, 2vw, 1.08rem); max-width: 52ch; } .lp-feature-visual { display: flex; justify-content: center; } /* illustrative device mockup (pure HTML/CSS — sample data, not a screenshot) */ .lp-phone { position: relative; width: min(256px, 70vw); aspect-ratio: 9 / 19.3; padding: 7px; border-radius: 46px; background: linear-gradient(150deg, #39454f 0%, #141b21 42%, #0b1014 100%); box-shadow: var(--lp-shadow), 0 0 0 1.5px #434f59 inset; display: flex; flex-direction: column; } /* Dynamic Island: a small floating black pill near the top of the screen (not a full-width bar) */ .lp-phone-notch { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 3; width: 30%; height: 17px; border-radius: 999px; background: #05080b; margin: 0; } .lp-screen { position: relative; flex: 1; min-height: 0; background: var(--lp-bg); border-radius: 40px; padding: 28px 13px 30px; color: var(--lp-ink); font-size:var(--fs-md); text-align: left; overflow: hidden; display: flex; flex-direction: column; gap: 10px; } /* Android variant: squarer corners, flatter matte bezel, centred hole-punch camera (not an island) */ .lp-phone-android { border-radius: 34px; background: linear-gradient(150deg, #4a5560 0%, #242b32 46%, #12171c 100%); box-shadow: var(--lp-shadow), 0 0 0 1.5px #4e5a65 inset; } .lp-phone-android .lp-screen { border-radius: 30px; } .lp-phone-android .lp-phone-notch { width: 9px; height: 9px; border-radius: 50%; top: 12px; background: #05080b; box-shadow: 0 0 0 2px rgba(0,0,0,.28); } .lp-screen::after { content: ""; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); width: 32%; height: 5px; border-radius:var(--r-pill); background: color-mix(in srgb, var(--lp-ink) 22%, transparent); } .lp-feature .lp-screen p { color: var(--lp-ink); font-size: inherit; max-width: none; } /* not the grey feature copy */ .lp-feature .lp-screen p.lp-m-sub, .lp-feature .lp-screen p.lp-m-note { color: var(--lp-muted); } .lp-m-title { margin: 2px 0 10px; font-weight: 800; font-size:var(--fs-base); } .lp-m-pill { display: inline-block; min-width: 20px; padding: 0 6px; border-radius:var(--r-pill); background: var(--lp-amber); color: #1f1300; font-size:var(--fs-sm); text-align: center; } /* was white on amber: fails AA */ .lp-m-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); padding: 10px 12px; margin-bottom: 10px; border-left: 4px solid var(--lp-silver); } .lp-m-warn { border-left-color: var(--lp-amber); } .lp-m-ok { border-left-color: var(--lp-teal); } .lp-m-file { border-left-color: var(--lp-teal); } .lp-m-name { margin: 0 0 6px; font-weight: 700; } .lp-m-row { margin: 3px 0; } .lp-m-sub { color: var(--lp-muted); font-size:var(--fs-sm); } .lp-m-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .lp-m-dot.amber { background: var(--lp-amber); } .lp-m-dot.teal { background: var(--lp-teal); } .lp-m-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .lp-m-tile { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); padding: 10px; } .lp-m-label { display: block; font-size:var(--fs-xs); color: var(--lp-muted); } .lp-m-big { display: block; font-weight: 800; font-size: 1.08rem; color: var(--lp-teal-d); } .lp-neg { color: var(--lp-amber-d); } .lp-amber { color: var(--lp-amber-d); } .lp-m-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-xs); overflow-wrap: anywhere; } .lp-m-link { color: var(--lp-teal); font-weight: 600; } .lp-m-btns { display: flex; flex-direction: column; gap: 6px; } .lp-m-btn { display: block; text-align: center; padding: 8px; border-radius: var(--lp-r-sm); background: var(--lp-teal-l); color: var(--lp-teal-d); font-weight: 700; font-size:var(--fs-sm); } .lp-m-note { margin: 6px 2px 0; font-size:var(--fs-xs); color: var(--lp-muted); } /* ---- trust callout ---------------------------------------------------------------- */ .lp-callout { padding: 8px 0 clamp(32px, 6vw, 64px); } .lp-callout-inner { background: var(--lp-amber-l); border: 1px solid color-mix(in srgb, var(--lp-amber) 45%, transparent); border-left: 6px solid var(--lp-amber); border-radius: var(--lp-r); padding: clamp(18px, 4vw, 32px); } .lp-callout h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 3.2vw, 1.6rem); color: var(--lp-ink); } .lp-callout p { margin: 0; color: var(--lp-ink); max-width: 75ch; } /* ---- what you can track (value grid — no pricing: there is no paid tier) ------------ */ .lp-track { padding: clamp(16px, 4vw, 40px) 0 clamp(40px, 7vw, 80px); scroll-margin-top: 60px; } .lp-track h2 { text-align: center; margin: 0 0 22px; font-size: clamp(1.6rem, 4.4vw, 2.3rem); letter-spacing: -.4px; } .lp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .lp-grid li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r); padding: 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lp-grid li:hover { transform: translateY(-2px); box-shadow: var(--lp-shadow); border-color: color-mix(in srgb, var(--lp-teal) 35%, var(--lp-line)); } .lp-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius:var(--r-md); background: var(--lp-teal-l); font-size:var(--fs-xl); } .lp-grid strong { color: var(--lp-ink); } .lp-grid span:not(.lp-ico) { color: var(--lp-muted); font-size:var(--fs-md); } .lp-grid-note { text-align: center; color: var(--lp-muted); margin: 18px auto 0; max-width: 60ch; } /* ---- "Add to home screen" (install the PWA) ----------------------------------------- */ .lp-install { padding: 0 0 clamp(36px, 6vw, 64px); scroll-margin-top: 60px; } .lp-install-inner { background: var(--lp-teal-l); border: 1px solid color-mix(in srgb, var(--lp-teal) 30%, transparent); border-radius: var(--lp-r); padding: clamp(18px, 4vw, 32px); } .lp-install h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 3.6vw, 1.8rem); color: var(--lp-ink); } .lp-install-lead { margin: 0 0 14px; color: var(--lp-ink); } .lp-install-steps { display: grid; grid-template-columns: 1fr; gap: 12px; } .lp-install-os { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); padding: 14px 16px; } .lp-install-os h3 { margin: 0 0 6px; font-size:var(--fs-base); color: var(--lp-teal-d); } .lp-install-os ol { margin: 0; padding-left: 1.2em; color: var(--lp-ink); } .lp-install-os li { margin: 3px 0; } .lp-grid-note a { font-weight: 600; white-space: nowrap; } /* ---- final CTA band ---------------------------------------------------------------- */ .lp-final { color: #fff; text-align: center; padding: clamp(40px, 7vw, 80px) 0; background: radial-gradient(800px 300px at 50% 0%, rgba(255,191,0,.22), transparent 60%), linear-gradient(160deg, var(--lp-teal-xd) 0%, var(--teal) 100%); } .lp-final h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -.4px; } .lp-final p { margin: 0 auto; max-width: 56ch; color: rgba(255,255,255,.88); } .lp-cta-center { margin-left: auto; margin-right: auto; } .lp-final-note { margin-top: 12px !important; font-size:var(--fs-md); } /* Two clearly-separate choices (start an account vs. try the demo) — not one confusing funnel */ .lp-choose { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 430px; margin: 26px auto 0; } .lp-choice { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 18px 16px; } .lp-choice-title { margin: 0; font-weight: 800; font-size: 1.1rem; color: #fff; } .lp-choice-sub { margin: 0; font-size:var(--fs-md); color: rgba(255,255,255,.78); } .lp-choice .lp-demo-form { flex-direction: column; align-items: stretch; gap: 10px; } .lp-demo-label { text-align: left; } .lp-or { position: relative; text-align: center; height: 1px; } .lp-or span { display: inline-block; padding: 0 14px; font-size:var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); background: transparent; transform: translateY(-50%); } /* ---- footer ------------------------------------------------------------------------- */ .lp-footer { padding: 28px 0 36px; border-top: 1px solid var(--lp-line); background: var(--lp-card); font-size:var(--fs-md); } .lp-footer-row { display: flex; flex-direction: column; gap: 10px; align-items: center; } .lp-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--lp-ink); } .lp-footer-links a { color: var(--lp-teal); font-weight: 600; } .lp-credit { margin: 14px 0 0; text-align: center; color: var(--lp-muted); font-size:var(--fs-md); } /* ---- >= 768px: desktop enhancements -------------------------------------------------- */ @media (min-width: 768px) { .lp-hide-sm { display: inline; } .lp-cta { flex-direction: row; justify-content: center; max-width: none; } .lp-google { max-width: 300px; } .lp-feature { grid-template-columns: 1.1fr .9fr; gap: 56px; } .lp-flip .lp-feature-text { order: 2; } .lp-flip .lp-feature-visual { order: 1; } .lp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-pillar-list { grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-app-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-install-steps { grid-template-columns: 1fr 1fr; gap: 16px; } /* suite hero: copy left, two overlapping phones right */ .lp-hero-suite .lp-hero-grid { grid-template-columns: 1.02fr .98fr; gap: 48px; } .lp-hero-phones { min-height: 520px; } .lp-hero-phones .lp-phone { width: 236px; } .lp-cta-suite { max-width: 360px; } .lp-nav-links a.lp-btn.lp-hide-sm { display: inline-flex; } .lp-phone-front { position: relative; z-index: 2; transform: translateX(-12%) translateY(16px); } /* same size as the front phone (just offset + layered for depth, not a different device size) */ .lp-hero-phones .lp-phone-back { display: flex; position: absolute; z-index: 1; top: 0; right: 0; transform: translateX(14%); filter: drop-shadow(0 18px 40px rgba(6,72,72,.22)); } .lp-footer-row { flex-direction: row; justify-content: space-between; } .lp-credit { text-align: left; } } @media (prefers-reduced-motion: reduce) { .lp-btn, .lp-grid li { transition: none; } } /* ---- "Update available — tap to refresh" (new service worker waiting; see pwa.js) ------ */ .sw-update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:45; max-width:calc(100% - 24px);padding:12px 18px;border:0;border-radius:var(--r-pill);background:var(--teal-d);color:#fff; font:inherit;font-weight:600;font-size:var(--fs-md);box-shadow:0 6px 20px rgba(0,0,0,.22);cursor:pointer} .sw-update:disabled{opacity:.7} @media (max-width: 767px){ body.has-nav .sw-update{bottom:calc(84px + env(safe-area-inset-bottom))} } /* ---- Install prompt (install.js) ------------------------------------------------------------ iOS: guided sheet (bottom sheet on phones, centred card elsewhere) + an arrow at the real Share button. Android: prominent strip at the TOP. Desktop: a small quiet chip, bottom-right. */ .rk-install-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,30,30,.5);display:flex;align-items:center; justify-content:center;padding:20px 16px} .rk-install-overlay.sheet{align-items:flex-end;padding:0 8px calc(64px + env(safe-area-inset-bottom))} .rk-install-overlay.sheet[data-layout="ios-ipad"],.rk-install-overlay.sheet[data-layout="ios-address-bar"]{padding-bottom:calc(8px + env(safe-area-inset-bottom))} .rk-ip-sheet{position:relative;background:var(--card);color:var(--ink);border-radius:var(--r-xl);padding:18px 18px 14px; max-width:400px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.3)} .sheet .rk-ip-sheet{animation:rk-ip-up .28s ease-out} @keyframes rk-ip-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} .rk-ip-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:50%;background:transparent; color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;flex:none} .rk-ip-x:hover{background:color-mix(in srgb, var(--teal) 12%, transparent);color:var(--ink)} .rk-ip-head{display:flex;gap:12px;align-items:center;margin:0 36px 12px 0} .rk-ip-icon{width:48px;height:48px;border-radius:11px;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.18)} .rk-ip-head h2{margin:0;font-size:1.1rem;line-height:1.25} .rk-ip-sub{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted)} .rk-ip-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px} .rk-ip-steps li{display:flex;gap:10px;align-items:flex-start} .rk-ip-steps li>div{flex:1;min-width:0} .rk-ip-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff; font-weight:700;font-size:var(--fs-md);margin-top:1px} .rk-ip-hint{display:block;font-size:var(--fs-md);color:var(--muted);margin-top:1px} .rk-ip-mock{display:flex;align-items:center;gap:10px;margin-top:8px;padding:7px 12px;border-radius:12px;background:#f2f2f7; color:#8e8e93;font-size:var(--fs-md);border:1px solid #e5e5ea} .rk-ip-mock.toolbar{justify-content:space-around;font-size:1.15rem} .rk-ip-mock.addr{border-radius:var(--r-pill)} .rk-ip-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#3c3c43} .rk-ip-mock.menu{justify-content:space-between;background:#fff;color:#1c1c1e;font-weight:600;border-radius:10px} .rk-ip-lit{display:inline-grid;place-items:center;color:#007aff;border-radius:8px;box-shadow:0 0 0 2.5px var(--amber)} .rk-ip-lit .rk-share-glyph{background:transparent} .rk-ip-plain{margin:0 0 12px;padding-left:1.3em} .rk-ip-plain li{margin:6px 0;line-height:1.45} .rk-install-note{margin:0 0 12px;font-size:var(--fs-md);color:var(--muted)} .rk-share-glyph{display:inline-grid;place-items:center;vertical-align:-4px;width:26px;height:26px;border-radius:6px; background:var(--teal-l);color:#007aff} .rk-share-glyph.ring{border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,122,255,.35)} .rk-install-arrow{position:fixed;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent; animation:rk-bob 1.1s ease-in-out infinite} .rk-install-arrow.bottom-center,.rk-install-arrow.bottom-right{border-top:22px solid var(--amber);bottom:calc(14px + env(safe-area-inset-bottom))} .rk-install-arrow.bottom-center{left:calc(50% - 16px)} .rk-install-arrow.bottom-right{right:22px} .rk-install-arrow.top-right{border-bottom:22px solid var(--amber);top:calc(10px + env(safe-area-inset-top));right:22px;animation-name:rk-bob-up} @keyframes rk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} @keyframes rk-bob-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media (prefers-reduced-motion: reduce){.rk-install-arrow,.sheet .rk-ip-sheet{animation:none}} .lp-install-btn{margin-top:10px;min-height:44px} /* install buttons: centered under their steps, thumb-sized */ .lp-install-os .lp-install-btn { display: flex; margin: 12px auto 0; min-height: 48px; min-width: 220px; } .lp-install-os[hidden], .lp-install-btn[hidden] { display: none; } /* .lp-btn sets display, which would beat [hidden] */ /* Android: the "Install App" strip at the top of the page (Play-Store-style row) */ .rk-install-banner{display:flex;align-items:center;gap:10px;padding:10px 6px 10px 12px;background:var(--teal-l); border-bottom:1px solid color-mix(in srgb, var(--teal) 30%, transparent);color:var(--ink);position:relative;z-index:30} .rk-install-banner .rk-ip-icon{width:40px;height:40px;border-radius:9px} .rk-install-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .rk-install-banner-text span{font-size:var(--fs-sm, .85rem);color:var(--muted)} .rk-install-banner-go{min-height:44px;padding:8px 14px;white-space:nowrap;flex:none} .rk-install-banner .rk-ip-x{position:static;width:40px;height:40px} @media (max-width: 479px){ /* narrow phones: icon + text + ✕, then a full-width Install button */ .rk-install-banner:not(.chip){display:grid;grid-template-columns:auto 1fr auto;row-gap:8px} .rk-install-banner:not(.chip) .rk-install-banner-go{grid-column:1 / -1;grid-row:2;width:100%;margin-right:6px} } /* desktop: a small, quiet chip in the corner */ .rk-install-banner.chip{position:fixed;right:16px;bottom:16px;z-index:44;padding:4px 4px 4px 6px;gap:2px;border:1px solid var(--line, #dde3e3); border-radius:var(--r-pill);background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.12)} .rk-install-banner.chip .rk-install-banner-go{min-height:34px;padding:4px 12px;border:0;background:transparent;color:var(--teal-d); font:inherit;font-weight:600;font-size:var(--fs-md);cursor:pointer;border-radius:var(--r-pill)} .rk-install-banner.chip .rk-install-banner-go:hover{background:var(--teal-l)} .rk-install-banner.chip .rk-ip-x{width:32px;height:32px;font-size:.9rem} .rk-ip-glyph{vertical-align:-3px;flex:none} [data-install-icon]:empty{display:none} .rk-install-toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top));z-index:61; padding:10px 18px;border-radius:var(--r-pill);background:var(--teal-d);color:#fff;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.22)} /* ---- CK-088 identity: logo avatar, tracked-status badges, Home identity, /profile ------- */ .avatar{flex:0 0 auto;display:inline-grid;place-items:center;border-radius:50%;object-fit:contain; background:var(--card);border:1px solid var(--line);font-weight:800;color:#fff;line-height:1} .avatar-sm{width:40px;height:40px;font-size:var(--fs-lg)} .avatar-md{width:56px;height:56px;font-size:1.4rem} .avatar-lg{width:88px;height:88px;font-size:2.2rem} span.avatar{border:0} .avatar-teal{background:var(--teal)} .avatar-amber{background:var(--amber);color:#1f1300} .avatar-silver{background:var(--silver);color:#22303a} .avatar-charcoal{background:#36454F} .doc-badge.on_file{background:var(--silver-l);color:var(--ink)} .doc-badge.expiring_soon{background:var(--amber-l);color:var(--amber-d)} .doc-badge.missing{background:transparent;color:var(--amber-d);border:1.5px dashed var(--amber)} .id-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:700;padding:4px 10px; border-radius:var(--r-pill);white-space:nowrap} .id-badge.ok{background:var(--teal-l);color:var(--teal-d)} .id-badge.warn{background:var(--amber-l);color:var(--amber-d)} .home-id{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:inherit;text-decoration:none;margin-bottom:6px} .home-id .h-page{margin:0;min-width:0;overflow-wrap:anywhere} .home-id:hover .h-page{color:var(--teal-d)} .profile-id{display:flex;gap:16px;align-items:flex-start} .profile-id-text{min-width:0;flex:1} .profile-name{margin:0 0 6px;font-size:var(--fs-xl);overflow-wrap:anywhere} .profile-rollup{text-decoration:none} .own-status .row-tags{align-self:center} .profile-id .id-badge{white-space:normal;line-height:1.3} @media (max-width: 420px){.profile-id{gap:12px}.profile-id .avatar-lg{width:64px;height:64px;font-size:1.6rem}} /* An uploaded logo keeps its own shape (wide wordmarks were unreadable squeezed into a circle): fixed height per size, natural width up to ~3.5:1, rounded rect. The initial stays a circle. Checkered backing so a white (or dark) transparent logo stays visible (Devan 11/5); clipped to the image so an opaque logo gets no checkered frame. */ img.avatar{border-radius:var(--r-sm);padding:3px;object-fit:contain; background:repeating-conic-gradient(#6b7680 0 25%,#8b959d 0 50%) 50%/12px 12px content-box} img.avatar-sm{width:auto;max-width:140px} img.avatar-md{width:auto;max-width:196px} img.avatar-lg{width:auto;max-width:240px} @media (max-width: 420px){.profile-id img.avatar-lg{width:auto;max-width:180px}} .profile-id{flex-wrap:wrap}.profile-id-text{flex:1 1 200px} /* demo entry: industry