/* Sauce Vault — MoonSauce client portal. Type + tokens follow the MoonSauce brand guide (same scale the proposal sites use). Themes: dark (default) and light via [data-theme="light"] on . */ @font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-stretch:75% 100%; src:url(fonts/bricolage-var.woff2) format('woff2');font-display:swap} @font-face{font-family:'Outfit';font-weight:100 900; src:url(fonts/outfit-var.woff2) format('woff2');font-display:swap} :root{ /* MoonSauce brand type scale (Website-V2 system) */ --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Outfit',system-ui,sans-serif; --t-h1:clamp(2.25rem,5.5vw,3.4rem); --t-h2:clamp(1.75rem,3.5vw,3rem); --t-h3:clamp(1.25rem,2vw,1.6rem); --t-lead:clamp(1.15rem,1.6vw,1.45rem); --t-body:clamp(1rem,1.15vw,1.125rem); --t-small:.875rem; --t-eyebrow:.78rem; --radius:10px; --radius-lg:14px; --ease:cubic-bezier(.2,.7,.2,1); /* light (default) — MoonSauce paper */ --bg:#fdfdfd; --bg-2:#ffffff; --bg-3:#ffffff; --elev:#ffffff; --surface:#ffffff; --line:#e6e9ec; --line-soft:#eef0f2; --ink:#111417; --ink-dim:#5c666e; --ink-mute:#9aa3aa; --accent:#0a7d9c; --accent-deep:#2e9dbf; --accent-btn:#0a7d9c; --accent-soft:rgba(10,125,156,.08); --accent-glow:rgba(46,157,191,.25); --gold:#b8841a; --coral:#d23f28; --card-shadow:0 1px 2px rgba(17,20,23,.04),0 10px 30px rgba(17,20,23,.06); --logo-filter:brightness(0) opacity(.85); --btn-ink:#ffffff; } :root[data-theme="dark"]{ --bg:#090e11; --bg-2:#0d1419; --bg-3:#10181d; --elev:#151f26; --surface:#0d1419; --line:#1f2a31; --line-soft:#18232a; --ink:#e8eef2; --ink-dim:#b8c6cf; --ink-mute:#6e7d86; --accent:#5fc3e0; --accent-deep:#0a7d9c; --accent-btn:#2e9dbf; --accent-soft:rgba(95,195,224,.12); --accent-glow:rgba(95,195,224,.4); --gold:#ffd64e; --coral:#f04438; --card-shadow:none; --logo-filter:brightness(0) invert(1); --btn-ink:#090e11; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6; font-size:var(--t-body);-webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease} a{color:inherit;text-decoration:none} h1,h2,h3,.disp{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08} button{font-family:var(--font-body)} ::selection{background:var(--accent-soft)} /* ---------------- gate (always dark, theme-independent) ---------------- */ #gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:2rem; background: radial-gradient(120% 90% at 80% -10%,rgba(46,157,191,.20),transparent 60%), radial-gradient(90% 70% at 0% 110%,rgba(255,214,78,.10),transparent 55%), #0a0e10; overflow:hidden;transition:opacity .5s ease} #gate.hidden{opacity:0;pointer-events:none} .grain{position:absolute;inset:0;opacity:.05;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .gate-card{position:relative;z-index:1;max-width:31rem;width:100%;color:#eef3f6} .gate-brand{display:flex;align-items:center;gap:1rem;margin-bottom:2.2rem} .gate-brand img.og{height:30px;filter:brightness(0) invert(1) opacity(.92)} .gate-brand img.ms{height:30px} .gate-brand .x{color:#6c7e87;font-size:1.1rem} .gate-card .eyebrow{color:#5fc3e0} .gate-card h1{font-size:clamp(1.9rem,4.5vw,2.9rem);margin:1.1rem 0 .8rem;color:#fff;text-wrap:balance} .gate-lead{color:#9fb0b8;margin-bottom:1.9rem;max-width:28rem} .gate-form{display:flex;gap:.6rem;flex-wrap:wrap} .gate-form input{flex:1;min-width:13rem;background:#0a141a;border:1px solid #1e2a30; color:#eef3f6;padding:.95rem 1.1rem;border-radius:11px;font-family:var(--font-body);font-size:1rem} .gate-form input:focus-visible{border-color:#5fc3e0;outline:none; box-shadow:0 0 0 3px rgba(95,195,224,.4)} .gate-form button{background:#2e9dbf;color:#0a0e10;border:0;cursor:pointer; font-family:var(--font-display);font-weight:700;padding:.95rem 1.5rem;border-radius:11px; transition:background .2s,transform .2s} .gate-form button:hover{background:#5fc3e0;transform:translateY(-1px)} .gate-error{color:#f35b44;margin-top:1rem;font-size:var(--t-small);min-height:1.2em} .demo-note{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:1; font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#6c7e87} /* shared eyebrow */ .eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem; letter-spacing:.16em;text-transform:uppercase;color:#4a7c9b;margin-bottom:.9rem} :root[data-theme="dark"] .eyebrow{color:#5b87a6} /* ---------------- app shell ---------------- */ #app{display:none;min-height:100vh} #app.on{display:block} .shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh} /* sidebar */ .side{position:sticky;top:0;height:100vh;background:var(--bg-2);border-right:1px solid var(--line); padding:1.7rem 1.4rem;display:flex;flex-direction:column;gap:.2rem; transition:background .3s ease} .side .wordmark{font-family:var(--font-display);font-weight:700;font-size:1.45rem; letter-spacing:-.02em;color:var(--accent);line-height:1;margin-bottom:.35rem} .side .wm-sub{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute); margin-bottom:1.6rem} .searchbtn{display:flex;align-items:center;gap:.6rem;background:var(--surface); border:1px solid var(--line);border-radius:10px;color:var(--ink-mute);font-size:.84rem; padding:.55rem .8rem;cursor:pointer;margin-bottom:1.4rem;transition:border-color .15s} .searchbtn:hover{border-color:var(--accent-deep);color:var(--ink-dim)} .searchbtn svg{width:15px;height:15px} .searchbtn .kbd{margin-left:auto;font-size:.66rem;border:1px solid var(--line); border-radius:5px;padding:.1em .45em;color:var(--ink-mute)} .side nav{display:flex;flex-direction:column;gap:.15rem;flex:1} .side nav a{display:flex;align-items:center;gap:.7rem;color:var(--ink-dim);font-weight:500; font-size:.92rem;padding:.6rem .8rem;border-radius:10px;border-left:2px solid transparent; cursor:pointer;transition:background .15s,color .15s,border-color .15s} .side nav a svg{width:17px;height:17px;flex:none;opacity:.8} .side nav a:hover{background:var(--accent-soft);color:var(--ink)} .side nav a.on{background:var(--accent-soft);color:var(--ink);border-left-color:var(--accent)} .side .foot{margin-top:auto;padding-top:1.3rem;border-top:1px solid var(--line-soft)} .theme-toggle{display:flex;align-items:center;gap:.5rem;background:var(--surface); border:1px solid var(--line);border-radius:99px;padding:.35rem;width:max-content; margin-bottom:1.1rem;cursor:pointer} .theme-toggle span{display:grid;place-items:center;width:26px;height:26px;border-radius:99px; color:var(--ink-mute)} .theme-toggle span.on{background:var(--accent-soft);color:var(--accent)} .theme-toggle svg{width:14px;height:14px} .foot-brand{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem} .foot-brand .fb-og{height:19px;filter:var(--logo-filter)} .foot-brand .fb-ms{height:18px;filter:var(--logo-filter)} .foot-brand .fb-x{color:var(--ink-mute);font-size:.75rem} .side .foot p{font-size:.66rem;color:var(--ink-mute);line-height:1.5} .logout{display:inline-block;margin-top:.6rem;font-size:.7rem;color:var(--ink-mute); cursor:pointer;border-bottom:1px solid transparent;transition:color .15s} .logout:hover{color:var(--coral)} .side-welcome{margin:.2rem 0 1.2rem;padding:.9rem .95rem;border:1px solid var(--line); border-radius:var(--radius);background:var(--bg-2)} /* the client's own mark, when the manifest carries one: the color lockup in light, the brand's white lockup in dark. Unfiltered in both, so neither theme shows a recolored version of somebody's trademark. Falls back to showing the light file when a client ships only one. */ .side-welcome .welcome-mark{display:block;width:100%;max-width:150px;height:auto; margin:.1rem 0 .8rem} .side-welcome .welcome-mark.mono{filter:var(--logo-filter)} :root:not([data-theme="dark"]) .side-welcome .wm-dark{display:none} :root[data-theme="dark"] .side-welcome.has-mark-dark .wm-light{display:none} .side-welcome h2{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.3rem} .side-welcome h2 em{font-style:normal;color:var(--accent)} .side-welcome p{font-size:.76rem;color:var(--ink-dim);line-height:1.5} /* main */ .main{padding:clamp(2rem,4vw,3.5rem) clamp(1.6rem,4vw,3.5rem) 5rem;max-width:1460px} .welcome{max-width:660px;margin-bottom:.6rem} .welcome h2{font-size:var(--t-h2);margin:.35rem 0 .8rem;color:var(--ink);text-wrap:balance} .welcome h2 em{font-style:normal;color:var(--accent)} .welcome p{color:var(--ink-dim);font-size:var(--t-lead);line-height:1.55} .group{margin-top:3.4rem;scroll-margin-top:1.5rem} .group-head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.2rem} .group-head h3{font-size:var(--t-h3);color:var(--ink)} .group-head .rule{flex:1;height:1px;background:var(--line)} .group-head .count{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px} .card{position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.5rem 1.6rem;cursor:pointer;box-shadow:var(--card-shadow); transition:transform .25s var(--ease),border-color .25s,background .25s,opacity .5s,translate .5s; display:flex;flex-direction:column;min-height:176px;overflow:hidden} .card::after{content:"";position:absolute;inset:0;background: radial-gradient(120% 80% at 100% 0%,var(--accent-soft),transparent 55%);opacity:0;transition:opacity .3s} .card:hover{transform:translateY(-3px);border-color:var(--accent-deep)} .card:hover::after{opacity:1} .card .toprow{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:1rem} .card .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none; background:var(--accent-soft);color:var(--accent)} .card .ico svg{width:20px;height:20px} .brandmark{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500; padding:.3em .65em;border-radius:99px;white-space:nowrap} .brandmark.ext{background:rgba(184,132,26,.12);color:#8a6414} :root[data-theme="dark"] .brandmark.ext{background:rgba(255,214,78,.16);color:var(--gold)} .card h4{font-family:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--ink); margin-bottom:.4rem;letter-spacing:-.01em} .card p{font-size:var(--t-small);color:var(--ink-dim);line-height:1.55} .card .meta{margin-top:auto;padding-top:1.05rem;display:flex;align-items:center;gap:.5rem; font-size:.74rem;color:var(--ink-mute)} .card .meta .arrow{margin-left:auto;color:var(--accent);transition:transform .25s var(--ease)} .card:hover .meta .arrow{transform:translateX(4px)} /* staggered reveal */ .reveal{opacity:0;translate:0 18px} .reveal.in{opacity:1;translate:0 0} /* archive (standalone bottom section) */ .arch{border:1px solid var(--line);border-radius:var(--radius-lg); background:var(--bg-3);overflow:hidden;box-shadow:var(--card-shadow)} .al-row{display:flex;align-items:center;gap:1.2rem;padding:.85rem 1.5rem; border-bottom:1px solid var(--line-soft)} .al-row:last-child{border-bottom:0} .al-row:hover{background:var(--accent-soft)} .al-month{font-family:var(--font-display);font-weight:500;color:var(--ink);min-width:8rem} .al-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto} .al-entry{display:inline-flex;align-items:center;gap:.35rem} .al-view{font-size:.84rem;color:var(--accent);font-weight:500;padding:.35rem .85rem; border:1px solid var(--line);border-radius:99px;transition:border-color .15s,background .15s} .al-view:hover{border-color:var(--accent-deep);background:var(--accent-soft)} .al-pdf{font-size:.72rem;color:var(--ink-mute);padding:.35rem .55rem;border-radius:99px; transition:color .15s} .al-pdf:hover{color:var(--ink)} /* ---------------- search overlay ---------------- */ #search{position:fixed;inset:0;z-index:90;display:none;place-items:start center; padding:12vh 1.5rem 2rem;background:rgba(6,10,12,.6);backdrop-filter:blur(6px)} #search.on{display:grid} .s-box{width:100%;max-width:34rem;background:var(--bg-2);border:1px solid var(--line); border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45)} .s-box input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line); color:var(--ink);font-family:var(--font-body);font-size:1.05rem;padding:1rem 1.2rem;outline:none} .s-list{max-height:19rem;overflow:auto} .s-item{display:flex;align-items:center;gap:.8rem;padding:.75rem 1.2rem;cursor:pointer; color:var(--ink-dim);font-size:.92rem} .s-item svg{width:16px;height:16px;flex:none;color:var(--accent)} .s-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .s-item .s-grp{margin-left:auto;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-mute)} .s-item.sel,.s-item:hover{background:var(--accent-soft);color:var(--ink)} .s-empty{padding:1rem 1.2rem;color:var(--ink-mute);font-size:.88rem} /* ---------------- viewer ---------------- */ #viewer{position:fixed;inset:0;z-index:80;background:var(--bg);display:none;flex-direction:column} #viewer.on{display:flex} .vbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.2rem;background:var(--bg-2); border-bottom:1px solid var(--line);flex:none} .vbar .back{display:flex;align-items:center;gap:.5rem;color:var(--ink-dim);font-weight:500; font-size:.9rem;cursor:pointer;padding:.4rem .7rem;border-radius:9px;transition:background .15s,color .15s} .vbar .back:hover{background:var(--accent-soft);color:var(--ink)} .vbar .vtitle{font-family:var(--font-display);font-weight:500;color:var(--ink);font-size:.98rem} .vbar .vtitle .vbrand{font-family:var(--font-body);font-weight:400;color:var(--ink-mute); font-size:.8rem;margin-left:.6rem} .vbar .vpdf{margin-left:auto;background:var(--accent-btn);color:var(--btn-ink); font-family:var(--font-display);font-weight:700;font-size:.82rem;padding:.5rem 1rem; border-radius:9px;transition:background .2s} .vbar .vpdf:hover{background:var(--accent)} .vstage{flex:1;position:relative;min-height:0} .vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;visibility:hidden} .vstage iframe.cur:not(.pending){visibility:visible} .vload{position:absolute;inset:0;display:none;place-items:center;background:var(--bg);color:var(--ink-mute); font-size:.9rem;text-align:center} .vload.on{display:grid} .vload p{margin-top:.8rem} .vspin{display:block;width:26px;height:26px;margin:0 auto;border-radius:50%;border:2px solid var(--line); border-top-color:var(--accent);animation:vspin .8s linear infinite} @keyframes vspin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;translate:none;transition:none} } @media(max-width:820px){ .shell{grid-template-columns:1fr} .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:1rem; padding:.8rem 1.1rem} .side .wm-sub,.side nav,.side .foot,.searchbtn{display:none} } /* ---------------- bento home (2026 redesign) ---------------- */ /* Equal halves. The Account Breakdown sets the height of this row, and it is laid out in two columns (.dt.two) so the row, and the hero with it, is about half as tall as it was stacked (Rob, 2026-09-09: "so massive"). Two columns need the width; the hero loses width it was not using. */ .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2rem} .feat{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.8rem 1.9rem 1.4rem; border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;cursor:pointer; background: radial-gradient(130% 110% at 100% 0%,var(--accent-soft),transparent 55%), var(--bg-3); box-shadow:var(--card-shadow);transition:transform .25s var(--ease),border-color .25s} .feat:hover{transform:translateY(-3px);border-color:var(--accent-deep)} .feat h3{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);letter-spacing:-.02em} .feat p{color:var(--ink-dim);font-size:var(--t-small);max-width:44ch;line-height:1.6} .feat-top{display:flex;justify-content:space-between;align-items:center} .feat-live{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--accent); background:var(--accent-soft);padding:.32em .8em;border-radius:99px} .feat-live i{width:7px;height:7px;border-radius:50%;background:var(--accent); animation:featpulse 2.2s infinite} @keyframes featpulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}} .feat-pulse{width:calc(100% + 3.8rem);margin:0 -1.9rem;height:84px;margin-top:auto} .fp-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:fpdraw 2.4s var(--ease) .3s forwards} @keyframes fpdraw{to{stroke-dashoffset:0}} .feat-cta{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700; color:var(--accent);font-size:.95rem;padding-top:.4rem} .feat-cta .arrow{transition:transform .25s var(--ease)} .feat:hover .feat-cta .arrow{transform:translateX(5px)} .feat-col{display:flex;flex-direction:column;gap:16px} /* .fs-k is the Account Breakdown panel's label. The three hero side tiles it used to sit beside were replaced by that panel; their styles are gone. */ .fs-k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600} .panelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:2.2rem} .panel{margin-top:0!important;background:var(--bg-3);border:1px solid var(--line); border-radius:var(--radius-lg);padding:1.1rem 1.15rem;box-shadow:var(--card-shadow)} .panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6rem; padding:0 .35rem} .panel-head h3{font-size:1.02rem;color:var(--ink)} .panel-head .count{font-size:.68rem;color:var(--ink-mute);border:1px solid var(--line); border-radius:99px;padding:.05em .6em} .pitems{display:flex;flex-direction:column} .pitem{display:flex;align-items:center;gap:.75rem;padding:.55rem .45rem;border-radius:10px; cursor:pointer;transition:background .15s} .pitem:hover{background:var(--accent-soft)} .pi-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; background:var(--accent-soft);color:var(--accent)} .pi-ico svg{width:15px;height:15px} .pi-tx{display:flex;flex-direction:column;min-width:0} .pi-title{font-size:.87rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .pi-meta{font-size:.7rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pi-arrow,.pi-ext{margin-left:auto;color:var(--accent);font-size:.9rem;opacity:0; transition:opacity .15s,transform .2s var(--ease)} .pi-ext{color:var(--gold)} .pitem:hover .pi-arrow{opacity:1;transform:translateX(2px)} .pitem:hover .pi-ext{opacity:1} .pi-note{cursor:default} .pi-note:hover{background:transparent} /* invoice state, read from Stripe: paid is quiet, open is the accent, overdue is coral */ .pi-badge{display:inline-block;vertical-align:1px;margin-left:.5rem;padding:.12em .55em;border-radius:99px; font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4} .pi-badge.paid{background:rgba(10,125,156,.1);color:var(--accent)} .pi-badge.open{background:rgba(184,132,26,.14);color:#8a6414} .pi-badge.overdue,.pi-badge.unpaid{background:rgba(210,63,40,.12);color:var(--coral)} :root[data-theme="dark"] .pi-badge.paid{background:rgba(95,195,224,.14)} :root[data-theme="dark"] .pi-badge.open{background:rgba(255,214,78,.16);color:var(--gold)} :root[data-theme="dark"] .pi-badge.overdue,:root[data-theme="dark"] .pi-badge.unpaid{background:rgba(240,68,56,.16)} @media(max-width:980px){.hero-grid{grid-template-columns:1fr}} /* archive items live inside their panel behind a "View all" expander */ .pitems-more{display:none} .panel.open .pitems-more{display:block} .pmore{margin-top:.7rem;font-size:.78rem;font-weight:600;color:var(--ink-dim);background:none; border:1px solid var(--line);border-radius:99px;padding:.42rem .95rem;cursor:pointer; transition:border-color .15s,color .15s} .pmore:hover{border-color:var(--accent-deep);color:var(--ink)} /* archived: a quiet strip under the grid, deliberately not a card */ .arch-strip{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:2rem; padding-top:1.2rem;border-top:1px solid var(--line)} .arch-k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute); font-weight:600} .arch-item{display:inline-flex;align-items:baseline;gap:.5rem;font-size:.86rem;font-weight:500; color:var(--ink-dim);cursor:pointer;transition:color .15s} .arch-item:hover{color:var(--ink)} .arch-item small{font-size:.7rem;color:var(--ink-mute)} /* ---------------- pop pass (2026-09-03) ---------------- Rob: the home read gray and faded next to the report. Same layout; the ground is pure white, the shadows are gone, and color lands in a few deliberate places: the dashboard hero is a night card like the report cover, the side tiles carry the brand's signal bar, panel icons are solid, badges are solid. */ :root{ --bg:#ffffff; --bg-2:#ffffff; --bg-3:#ffffff; --ink-mute:#6b7680; --card-shadow:none; --vtb-ground:#ffffff; --night:#090e11; --teal:#2e9dbf; --teal-bright:#5fc3e0; --gold-fill:#ffd64e; --coral-fill:#f04438; } :root[data-theme="dark"]{--ink-mute:#7d8c96;--vtb-ground:#090e11} html[data-topbar] body{background:var(--bg)} /* the hero: the one dark moment on the page, like the report's cover */ .feat{ background: radial-gradient(120% 90% at 100% 0%,rgba(95,195,224,.22),transparent 58%), radial-gradient(70% 60% at 0% 100%,rgba(255,214,78,.07),transparent 55%), var(--night); border-color:var(--night)} .feat:hover{border-color:var(--night);transform:translateY(-3px)} /* A client photograph behind the hero. The card's own gradients are painted OVER it (the .has-img rule below re-applies them as a scrim), so the headline keeps its contrast; the image itself is pushed right and dimmed so the text column stays on near-solid ground at every width. Identical in both themes: the hero is the one dark moment on the page in light mode too. */ .feat .feat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:100% 58%;border-radius:inherit;z-index:0;opacity:.95} .feat.has-img{overflow:hidden;background:var(--night)} /* The photograph is anchored to its right edge and the scrim is weighted to the LEFT, where the text sits, clearing toward the subject. The van photo before it carried the client's wordmark dead center and the headline covered it (Rob, 2026-09-09); a photo of a technician at work keeps the branding on the shirt, at the right, where nothing is drawn over it. */ .feat.has-img::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1; background: linear-gradient(90deg,rgba(6,11,14,.92) 0%,rgba(6,11,14,.84) 38%,rgba(6,11,14,.42) 64%,rgba(6,11,14,.18) 100%), linear-gradient(180deg,rgba(6,11,14,.35) 0%,transparent 30%,transparent 70%,rgba(6,11,14,.35) 100%)} .feat.has-img > *:not(.feat-img){position:relative;z-index:2} /* The decorative pulse is the hero's texture when there is no photograph. Over one it reads as a stray line across the picture, so it goes and the CTA takes over its job of holding the bottom of the card. */ .feat.has-img .feat-pulse{display:none} .feat.has-img .feat-cta{margin-top:auto} /* Below the hero's stacking point the card is far shorter and the copy fills it, so a scrim that clears halfway down leaves the paragraph sitting on the bright part of the photograph. Narrow screens get a flatter, heavier scrim: the photograph stays legible as a background and the text stays readable on it. */ @media(max-width:980px){ .feat .feat-img{opacity:.8} .feat.has-img::after{background:linear-gradient(180deg, rgba(6,11,14,.94) 0%,rgba(6,11,14,.90) 44%,rgba(6,11,14,.78) 74%,rgba(6,11,14,.72) 100%)} } .feat h3{color:#fff;font-weight:800;letter-spacing:-.035em;font-size:clamp(1.7rem,2.7vw,2.25rem)} .feat p{color:#b8c6cf} .feat-live{color:var(--teal-bright);background:rgba(95,195,224,.16)} .feat-live i{background:var(--teal-bright)} .feat .fp-line{stroke:var(--teal-bright)} .feat .fp-area stop:first-child{stop-color:var(--teal-bright)} .feat-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem; background:var(--coral-fill);color:#fff;font-size:.9rem;padding:.6rem 1.1rem;border-radius:8px; margin-top:.2rem;transition:background .2s,transform .2s var(--ease)} .feat:hover .feat-cta{background:#d23f28} .feat:hover .feat-cta .arrow{transform:translateX(4px)} :root[data-theme="dark"] .feat{background: radial-gradient(120% 90% at 100% 0%,rgba(95,195,224,.22),transparent 58%),#0f1a20;border-color:#1f2a31} .fs-k{color:var(--ink-dim)} /* panel icons: solid, so each row has a real mark instead of a wash */ /* One quiet tile for every row. Solid teal squares, and yellow ones in Invoicing, were four loud things competing on a row that should be calm (Rob, 2026-09-09: "less busy"; option 1 of three mocked). */ .pi-ico{background:var(--bg-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:9px} .panel-head h3{font-weight:700;letter-spacing:-.025em;font-size:1.08rem} .panel-head .count{color:var(--ink-dim);border-color:var(--line)} .pi-title{font-weight:550} .pi-meta{color:var(--ink-dim)} .pmore{border-color:var(--line)} /* badges: solid state colors, the same ones the report uses for chips */ .pi-badge{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-weight:600; letter-spacing:.06em;text-transform:uppercase;font-size:.6rem;padding:.14em .5em} .pi-badge.paid{background:transparent;color:var(--ink-dim)} .pi-badge.open{background:transparent;border-color:var(--accent);color:var(--accent)} .pi-badge.overdue,.pi-badge.unpaid{background:transparent;border-color:var(--coral);color:var(--coral)} :root[data-theme="dark"] .pi-badge.paid{background:transparent;color:var(--ink-dim)} :root[data-theme="dark"] .pi-badge.open{background:transparent;border-color:var(--teal-bright);color:var(--teal-bright)} /* sidebar: the welcome card and the active item pick up the same teal */ .side-welcome{border-color:var(--line)} .side-welcome h2 em{color:#0a7d9c} :root[data-theme="dark"] .side-welcome h2 em{color:var(--teal-bright)} .side nav a{color:var(--ink)} .side nav a svg{opacity:1;color:var(--teal)} .side nav a:hover{background:rgba(46,157,191,.1)} .side .foot p{color:var(--ink-dim)} /* ---- "How this account runs" (beside the dashboard tile; replaces the side tiles) ---- */ .details{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.15rem .9rem;border-radius:var(--radius-lg); border:1px solid var(--line);background:var(--bg-3);box-shadow:var(--card-shadow);height:100%} .dt{display:flex;flex-direction:column;gap:.45rem;margin:.15rem 0 0} /* The label sits ABOVE its content, not beside it. A 96px label gutter left the content column too narrow for its own text at ordinary widths: at a 1440 viewport three lead bullets and an invoice label broke mid-phrase and the Running list could not fit two columns. Stacking costs about 34px of height and removes every break (measured 2026-09-08). */ .dt-row{display:grid;grid-template-columns:1fr;gap:.3rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--line)} .dt-row:first-child{border-top:0;padding-top:0} .dt-row dt{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-weight:600; display:flex;justify-content:space-between;align-items:baseline;gap:.6rem} /* the month's figure on the Expected Invoice label line: plain case, ink, bold */ .dt-amt{text-transform:none;letter-spacing:0;font-size:.84rem;color:var(--ink);font-weight:400;white-space:nowrap} .dt-amt b{font-weight:700} .dt-amt small{color:var(--ink-dim);font-size:.76rem;font-weight:400} .dt-row dd{margin:0;font-size:.82rem;color:var(--ink);line-height:1.42} .dt-row dd small{color:var(--ink-dim);font-size:.76rem} .dt-row dd a{color:var(--accent-deep);text-decoration:none} .dt-chips{display:flex;flex-wrap:wrap;gap:.35rem} /* A chip is one line, always. "Google Ads" breaking after "Google" read as a layout fault, and a wrapped chip is also a different height from its neighbours, so a row of them stopped lining up (Rob, 2026-09-08). */ .dt-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;padding:.22rem .6rem;border-radius:999px; border:1px solid var(--line);background:var(--bg-2);color:var(--ink);white-space:nowrap} .dt-chip b{font-weight:650;color:var(--accent-deep);flex:none} /* The budget is never truncated; a very long service name gives way instead, so a chip can never spill past its pill however narrow the column gets. */ .dt-chip i{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis} .dt-chip.svc{background:var(--bg-3);border-color:var(--accent-soft,var(--line))} .dt-chip.off{color:var(--ink-mute);border-style:dashed}.dt-chip.off b{color:var(--ink-mute);font-weight:500} .dt-note{font-size:.72rem;color:var(--ink-dim);margin:.2rem 0 0} .dt-wait{font-size:.8rem;color:var(--ink-dim)} /* ---- "How this account runs", 2026-09-08 layout: name in the header, one-column running list, lead bullets with a subtext, one invoice line per item ---- */ .details h3.dt-name{margin:.1rem 0 .35rem;font-size:1.02rem;font-weight:700;color:var(--ink);letter-spacing:0} .dt-list{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem} /* every chip in a list is the same size, so the lead chips on the right and the service chips on the left read as one system (Rob, 2026-09-09) */ .dt-list .dt-chip{box-sizing:border-box;font-size:.71rem;padding:.22rem .45rem} /* The panel's two columns, each an independent stack so neither pads the other: site and service lines left; lead definition and expected invoice right, the wider side so the lead bullets stay on one line. The panel sets the height of the whole hero row, and stacked it made the hero "massive" (Rob, 2026-09-09). Under 700px, on a phone, it goes back to one column. */ .dt.two{display:grid;grid-template-columns:1fr 1.25fr;column-gap:1.3rem;align-items:start} .dt-col{display:flex;flex-direction:column} .dt-col .dt-row:first-child{border-top:0;padding-top:0} .dt.two .dt-col:last-child{border-left:1px solid var(--line);padding-left:1.3rem;align-self:stretch} .dt.two .dt-list.two{grid-template-columns:1fr} /* Split only when the panel itself is wide enough. A container query measures the panel's CONTENT box (its padding is outside it): at a 1440 viewport that is 514px and the split fits; at 1366 it is 477px, the right column would be under ~250px and the lead bullets break mid-phrase (measured 2026-09-09), so the panel stacks instead: taller, but nothing broken. */ .details{container-type:inline-size} @container (max-width:500px){ .dt.two{grid-template-columns:1fr} .dt.two .dt-col:last-child{border-left:0;padding-left:0} .dt.two .dt-col:last-child .dt-row:first-child{border-top:1px solid var(--line);padding-top:.5rem} .dt.two .dt-list.two{grid-template-columns:repeat(auto-fit,minmax(max(150px,48%),1fr))} } /* two columns for an account with enough service lines that one column makes the panel tall (Ongaro runs nine). Back to one under 700px, where the panel is already full width and two columns would crush the budget figures. */ /* Two columns need the panel's full width, so this row puts its label above the list instead of beside it. Measured 2026-09-08: beside the 96px label gutter a column is ~107px and the widest chip needs ~152px, which with nowrap labels overflowed the panel and put a horizontal scrollbar on the page at 1024 and 1200. auto-fit means the grid drops to one column on its own if a client's service names are too long to pair, rather than spilling. */ /* Two columns, never three. The 48% floor is what caps it: two columns fit inside 100% and three cannot, so a wide panel stays at two instead of letting auto-fit add a third. The 150px floor is the other half of the deal, dropping the list to one column when a column would be too narrow for its chip rather than truncating the service name. */ .dt-list.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,48%),1fr)); align-items:stretch;gap:.35rem .3rem} .dt-list.two .dt-chip{justify-content:space-between;width:100%;padding:.22rem .45rem;gap:.3rem;font-size:.71rem} @media(max-width:700px){.dt-list.two{grid-template-columns:1fr}} .dt-lines{margin:.15rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.12rem;max-height:9.5rem;overflow:auto} .dt-lines li{display:flex;justify-content:space-between;gap:1rem;font-size:.76rem;color:var(--ink-dim)} .dt-lines li em{font-style:normal;color:var(--ink-mute)} .dt-lines li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink);flex:none} .dt-leads{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.15rem;font-weight:600} .dt-leads li::before{content:"";display:inline-block;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent-deep);margin-right:.5rem;vertical-align:middle} .dt-sub{display:block;margin-top:.3rem;color:var(--ink-dim);font-size:.74rem;font-weight:400;line-height:1.4}