/* Graziano design system. One token set, two themes. Light is the default; [data-theme="dark"] on flips the environment. Charts reference the --ch-* tokens directly from SVG attributes, so a theme change restyles every chart (including Solly's canvas artifacts) without re-rendering. */ :root{ /* environment */ --bg-base:#EDF1F7; --atmo-a:rgba(116,168,235,.30); --atmo-b:rgba(160,200,246,.24); --atmo-c:rgba(116,168,235,.16); /* glass surfaces */ --glass-hi:rgba(255,255,255,.66); --glass-lo:rgba(255,255,255,.40); --glass-border:rgba(88,118,160,.16); --glass-inner:rgba(255,255,255,.85); --glass-shadow:0 18px 44px -22px rgba(28,50,92,.22), 0 2px 8px rgba(28,50,92,.05); --glass-blur:blur(18px) saturate(1.2); /* ink */ --ink:#0B1524; --ink-2:#3D4C63; --ink-3:#71839E; /* accent: sky blue, never teal */ --accent:#3E8FE0; --accent-ink:#2470C2; --accent-soft:rgba(76,158,235,.13); --accent-line:rgba(76,158,235,.45); /* rules and fills */ --hairline:rgba(35,58,94,.12); --hairline-strong:rgba(35,58,94,.30); --row-hover:rgba(76,158,235,.07); /* charts */ --ch-ink:#111C2E; --ch-accent:#4C9EEB; --ch-2:#8CA3C2; --ch-pos:#4C9EEB; --ch-warm:#C2A26C; --ch-mute:#C3CEDE; --ch-grid:rgba(35,58,94,.10); --ch-axis:#71839E; /* tooltip */ --tt-bg:rgba(16,26,44,.88); --tt-ink:#F2F6FC; --radius:16px; --radius-sm:10px; } [data-theme="dark"]{ --bg-base:#070B12; --atmo-a:rgba(66,132,222,.24); --atmo-b:rgba(60,112,192,.15); --atmo-c:rgba(66,132,222,.11); --glass-hi:rgba(27,39,60,.60); --glass-lo:rgba(13,21,35,.48); --glass-border:rgba(142,172,216,.15); --glass-inner:rgba(255,255,255,.055); --glass-shadow:0 22px 54px -24px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.30); --ink:#EAF1F9; --ink-2:#AEBED4; --ink-3:#6E82A0; --accent:#63A9F2; --accent-ink:#8FC2F7; --accent-soft:rgba(99,169,242,.14); --accent-line:rgba(99,169,242,.50); --hairline:rgba(160,190,230,.13); --hairline-strong:rgba(160,190,230,.32); --row-hover:rgba(99,169,242,.08); --ch-ink:#CBD8EA; --ch-accent:#5FA8F2; --ch-2:#5B7697; --ch-pos:#5FA8F2; --ch-warm:#C7A268; --ch-mute:#33455E; --ch-grid:rgba(160,190,230,.10); --ch-axis:#6E82A0; --tt-bg:rgba(30,44,68,.92); --tt-ink:#EAF1F9; } /* ================= base ================= */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:'Open Sans',system-ui,sans-serif;font-weight:300; color:var(--ink);background:var(--bg-base); line-height:1.6;font-size:15px; transition:background .35s ease, color .35s ease; } body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 520px at 12% -8%, var(--atmo-a), transparent 62%), radial-gradient(780px 460px at 88% 4%, var(--atmo-b), transparent 60%), radial-gradient(1100px 640px at 50% 112%, var(--atmo-c), transparent 65%), var(--bg-base); transition:background .35s ease; } ::selection{background:var(--accent-soft)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } .kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--ink-3)} .kicker b{color:var(--accent-ink);font-weight:600} h1{font-weight:600;font-size:33px;letter-spacing:-.015em;line-height:1.25;margin:10px 0 6px} h2{font-weight:600;font-size:22px;letter-spacing:-.01em;margin:6px 0 6px} h2 .no{color:var(--accent-ink);font-weight:300;margin-right:10px;font-variant-numeric:tabular-nums} .lede{color:var(--ink-2);max-width:74ch;margin-bottom:22px} .sub{color:var(--ink-2);max-width:70ch} .note{font-size:12px;color:var(--ink-3);max-width:76ch;margin-top:14px} .meta{font-size:12px;color:var(--ink-3);margin-top:12px} a{color:inherit;text-decoration-color:var(--accent-line);text-underline-offset:3px} /* ================= glass ================= */ .glass{ background:linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-inner); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); } .panel{ background:linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-inner); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); padding:26px 30px 20px; margin:20px 0 26px; } /* ================= login ================= */ #login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20} .logincard{width:380px;padding:44px 40px 38px} .logincard .wordmark{font-size:25px;font-weight:600;letter-spacing:.34em;text-transform:uppercase} .logincard .strap{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:5px 0 28px} .logincard label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin:16px 0 4px} .logincard input{ width:100%;border:none;border-bottom:1px solid var(--hairline); padding:8px 2px;font:inherit;font-weight:300;outline:none;background:transparent;color:var(--ink); transition:border-color .2s; } .logincard input:focus{border-bottom-color:var(--accent)} #loginerr{font-size:12.5px;color:var(--ink-2);margin-top:14px;min-height:20px} /* buttons */ .btn{ background:linear-gradient(180deg, var(--accent), var(--accent-ink)); color:#fff;border:1px solid rgba(255,255,255,.18); font:inherit;font-weight:600;letter-spacing:.05em;cursor:pointer; border-radius:var(--radius-sm); box-shadow:0 8px 18px -8px var(--accent-line), inset 0 1px 0 rgba(255,255,255,.25); transition:filter .18s, transform .18s; } .btn:hover{filter:brightness(1.06)} .btn:active{filter:brightness(.94)} .btn:disabled{opacity:.45;cursor:default;filter:none} [data-theme="dark"] .btn{color:#07101E} .logincard button{margin-top:28px;width:100%;padding:11px} /* ================= shell ================= */ #app{display:none;height:100vh} #app.on{display:flex} #sidebar{ width:232px;flex:0 0 232px;display:flex;flex-direction:column; padding:24px 0 16px;margin:14px 0 14px 14px; position:relative;z-index:2; } #sidebar .brand{padding:4px 24px 18px;border-bottom:1px solid var(--hairline)} #sidebar .wordmark{font-size:18px;font-weight:600;letter-spacing:.3em;text-transform:uppercase} #sidebar .strap{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:3px} #nav{padding:12px 12px;overflow-y:auto;flex:1} .navlab{padding:12px 12px 6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .navbtn{ display:block;width:100%;text-align:left;background:none;border:1px solid transparent; font:inherit;font-weight:300;font-size:13.5px;padding:7px 12px;cursor:pointer; color:var(--ink-2);border-radius:var(--radius-sm); transition:color .18s, background .18s; } .navbtn:hover{color:var(--ink);background:var(--accent-soft)} .navbtn.active{ color:var(--ink);font-weight:600;background:var(--accent-soft); border-color:var(--accent-line); box-shadow:inset 0 1px 0 var(--glass-inner); } .navbtn .num{display:inline-block;width:24px;color:var(--ink-3);font-weight:300;font-size:11.5px;font-variant-numeric:tabular-nums} .navbtn.active .num{color:var(--accent-ink)} .navbtn.solly{font-weight:600} .navbtn.solly .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;box-shadow:0 0 8px var(--accent-line)} #userbox{padding:14px 24px 4px;border-top:1px solid var(--hairline);font-size:12px;color:var(--ink-3)} #userbox .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px} #userbox .userrow{display:flex;justify-content:space-between;align-items:center;gap:10px} #userbox button{background:none;border:none;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;padding:0;text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px} #themetoggle{ text-decoration:none !important;display:inline-flex;align-items:center;gap:6px; border:1px solid var(--hairline) !important;border-radius:999px;padding:3px 12px !important; color:var(--ink-2) !important;transition:border-color .18s, color .18s; } #themetoggle:hover{border-color:var(--accent-line) !important;color:var(--ink) !important} #main{flex:1;overflow-y:auto;padding:36px 44px 90px;position:relative;z-index:1} .view{display:none;max-width:1120px} .view.active{display:block;animation:viewrise .28s cubic-bezier(.4,0,.2,1)} @keyframes viewrise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* ================= tiles ================= */ .tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0; overflow:hidden; } .tiles.glass{margin-top:24px} .tile{padding:22px 22px 20px;border-right:1px solid var(--hairline)} .tile:last-child{border-right:none} .tile .v{font-size:28px;font-weight:600;letter-spacing:-.01em} .tile .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:3px} .tile .d{font-size:12.5px;color:var(--ink-2);margin-top:8px} /* ================= callout / insight ================= */ .callout{ padding:28px 30px;margin:26px 0 10px; display:grid;grid-template-columns:1fr 280px;gap:34px; border-top:2px solid var(--accent-line); } .callout .kicker{color:var(--accent-ink)} .callout p{max-width:76ch;margin-top:10px} .sidecar{border-left:1px solid var(--hairline);padding-left:30px;display:flex;flex-direction:column;justify-content:center;gap:18px} .sidecar .stat .v{font-size:30px;font-weight:600;color:var(--accent-ink);letter-spacing:-.01em} .sidecar .stat .v small{font-size:15px;font-weight:300;color:var(--ink-2)} .sidecar .stat .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:2px} .sidecar .stat + .stat{border-top:1px solid var(--hairline);padding-top:16px} @media(max-width:980px){.callout{grid-template-columns:1fr}.sidecar{border-left:none;border-top:1px solid var(--hairline);padding:18px 0 0}} /* ================= figures / charts ================= */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:38px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:38px} @media(max-width:980px){.grid2,.grid3{grid-template-columns:1fr}} figure{margin:6px 0 18px} figcaption{font-size:13px;color:var(--ink-2);margin-bottom:12px} figcaption b{font-weight:600;color:var(--ink)} .chart{position:relative} svg{display:block;width:100%;height:auto} svg text{font-family:'Open Sans',sans-serif} .tiles .tile .v, .sidecar .stat .v{font-variant-numeric:tabular-nums} .tt{ position:fixed;pointer-events:none;z-index:30;max-width:280px;line-height:1.45; background:var(--tt-bg);color:var(--tt-ink);font-size:12px;padding:7px 11px; border-radius:8px;border:1px solid var(--glass-border); box-shadow:0 12px 28px -12px rgba(0,0,0,.4); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;transition:opacity .12s; } table{border-collapse:collapse;width:100%;font-size:13.5px} th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--hairline-strong)} td{padding:7px 10px;border-bottom:1px solid var(--hairline)} tr:hover td{background:var(--row-hover)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} .chip{display:inline-block;border:1px solid var(--hairline);border-radius:999px;padding:1px 10px;font-size:11px;letter-spacing:.06em;background:var(--accent-soft)} /* ================= Solly ================= */ #view-solly.active{display:flex;gap:22px;height:calc(100vh - 96px);max-width:none} #sollychat{ width:42%;min-width:340px;display:flex;flex-direction:column; padding:22px 24px 18px; } #sollycanvas{flex:1;overflow-y:auto;padding:22px 26px} #sollymsgs{flex:1;overflow-y:auto;padding-right:6px} .msg{margin-bottom:18px;max-width:62ch} .msg .who{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:3px} .msg.solly .who{color:var(--accent-ink)} .msg .body{white-space:pre-wrap} .msg.user .body{color:var(--ink-2)} .msg.thinking .body{color:var(--ink-3);font-style:italic} .msg.thinking .body::after{content:'';display:inline-block;width:1ch;animation:ellipsis 1.2s steps(4) infinite} @keyframes ellipsis{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}} #sollyform{display:flex;gap:10px;border-top:1px solid var(--hairline);padding-top:14px;margin-top:8px} #sollyinput{ flex:1;border:none;border-bottom:1px solid var(--hairline); font:inherit;font-weight:300;padding:8px 2px;outline:none;resize:none;height:44px; background:transparent;color:var(--ink);transition:border-color .2s; } #sollyinput:focus{border-bottom-color:var(--accent)} #sollyinput::placeholder{color:var(--ink-3)} #sollysend{padding:0 22px;height:44px} #deepdive{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-3);margin-top:10px;cursor:pointer;user-select:none} #deepdive input{accent-color:var(--accent);margin-top:3px} .artifact{border-top:1px solid var(--hairline);padding:18px 0 8px;margin-bottom:8px} .artifact:first-child{border-top:none;padding-top:4px} .artifact .cap{font-size:13px;color:var(--ink-2);margin-bottom:10px} .artifact .cap b{font-weight:600;color:var(--ink)} .canvas-empty{color:var(--ink-3);max-width:46ch;padding-top:4px} /* ================= responsive ================= */ @media(max-width:920px){ #app.on{flex-direction:column;height:auto;min-height:100vh} #sidebar{ width:auto;flex:0 0 auto;flex-direction:row;align-items:center;gap:6px; margin:10px 10px 0;padding:10px 12px;overflow-x:auto; position:sticky;top:10px;z-index:5; } #sidebar .brand{padding:0 14px 0 6px;border-bottom:none;border-right:1px solid var(--hairline);white-space:nowrap} #sidebar .strap{display:none} #nav{display:flex;padding:0 4px;overflow-y:visible;align-items:center} .navlab{display:none} .navbtn{white-space:nowrap;width:auto;padding:6px 10px} .navbtn .num{width:auto;margin-right:4px} #userbox{border-top:none;padding:0 6px;white-space:nowrap} #userbox .email{display:none} #main{padding:22px 18px 70px} h1{font-size:26px} .panel{padding:20px 18px 14px} .callout{padding:22px 18px} #view-solly.active{flex-direction:column;height:auto} #sollychat{width:auto;min-width:0} #sollymsgs{max-height:46vh} #sollycanvas{padding:18px} }