/* 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)} .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)} #vframe{flex:1;width:100%;border:0;background:#fff} @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) ---------------- */ .hero-grid{display:grid;grid-template-columns:1.6fr 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} .feat-side{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.25rem; padding:1.1rem 1.4rem;border-radius:var(--radius-lg);border:1px solid var(--line); background:var(--bg-3);box-shadow:var(--card-shadow);cursor:pointer; transition:transform .25s var(--ease),border-color .25s} .feat-side:hover{transform:translateY(-2px);border-color:var(--accent-deep)} .fs-k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600} .fs-t{font-family:var(--font-display);font-weight:500;font-size:1.02rem;color:var(--ink)} .fs-m{font-size:.76rem;color:var(--ink-dim)} .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} @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)}