/* 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:'Space Grotesk';font-weight:500;src:url(sg-500.ttf) format('truetype');font-display:swap} @font-face{font-family:'Space Grotesk';font-weight:700;src:url(sg-700.ttf) format('truetype');font-display:swap} @font-face{font-family:'DM Sans';font-weight:400;src:url(dm-400.ttf) format('truetype');font-display:swap} @font-face{font-family:'DM Sans';font-weight:500;src:url(dm-500.ttf) format('truetype');font-display:swap} @font-face{font-family:'DM Sans';font-weight:700;src:url(dm-700.ttf) format('truetype');font-display:swap} :root{ /* MoonSauce brand type scale */ --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'DM Sans',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:14px; --radius-lg:22px; --ease:cubic-bezier(.16,1,.3,1); /* dark theme (default) — MoonSauce night canvas */ --bg:#0a0e10; --bg-2:#0a131a; --bg-3:#0b1c24; --elev:#122a32; --surface:#0a141a; --line:#1e2a30; --line-soft:#16242f; --ink:#eef3f6; --ink-dim:#9fb0b8; --ink-mute:#6c7e87; --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:#f35b44; --card-shadow:none; --logo-filter:brightness(0) invert(1); --btn-ink:#0a0e10; } :root[data-theme="light"]{ --bg:#f4f4f7; --bg-2:#ffffff; --bg-3:#ffffff; --elev:#ffffff; --surface:#ffffff; --line:#e2e4ea; --line-soft:#ecedf2; --ink:#1d2733; --ink-dim:#566069; --ink-mute:#8a939e; --accent:#0a7d9c; --accent-deep:#2e9dbf; --accent-btn:#2e9dbf; --accent-soft:rgba(46,157,191,.1); --accent-glow:rgba(46,157,191,.25); --card-shadow:0 1px 3px rgba(29,39,51,.07),0 8px 24px rgba(29,39,51,.05); --logo-filter:brightness(0) opacity(.85); --btn-ink:#ffffff; } *{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:700;letter-spacing:-.02em;line-height:1.05} 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:.82rem; letter-spacing:.14em;text-transform:uppercase;color:#5b87a6;margin-bottom:.9rem} :root[data-theme="light"] .eyebrow{color:#4a7c9b} /* ---------------- 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)} /* 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(255,214,78,.16);color:var(--gold)} :root[data-theme="light"] .brandmark.ext{background:rgba(184,132,26,.12);color:#8a6414} .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} }