/* ================================================================== LIVIO "light engineered" design system — shared stylesheet. Warm architectural paper + graphite ink + one machined-amber accent. Fonts: Archivo (display) · Helvetica (body) · IBM Plex Mono (labels). 1px hairlines, sharp corners, no shadows, no gradients. Plain CSS (no Tailwind/build step). Pages link this file and load Archivo + IBM Plex Mono via Google Fonts in their . Source of truth: design-mocks/mock-hub-reskin-real-content.html ================================================================== */ :root{ color-scheme:light; --color-paper:#f4f2ec;--color-surface:#fbfaf6;--color-surface-2:#ece8df; --color-line:#dad5c8;--color-line-bright:#c4beae; --color-fg:#1b1c1e;--color-fg-dim:#55524a;--color-fg-faint:#716c5d; --color-amber:#f5b324;--color-amber-bright:#ffc40a;--color-amber-deep:#8f5f0a;--color-ink:#0b0b0c; --font-display:"Archivo",ui-sans-serif,system-ui,sans-serif; --font-text:"Helvetica Neue",Helvetica,Arial,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ease-machined:cubic-bezier(0.16,1,0.3,1);--grid-unit:5.5rem;--gutter:2.75rem; } /* base resets */ *{box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--color-paper);scroll-behavior:smooth;} body{margin:0;padding:0;background:var(--color-paper);color:var(--color-fg);font-family:var(--font-text);font-size:16px;line-height:1.6;overflow-x:hidden;} h1,h2,h3,h4,h5,p{margin:0;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} input,select,textarea{font:inherit;color:inherit;} s{color:var(--color-fg-faint);} ::selection{background:var(--color-amber);color:var(--color-ink);} :focus-visible{outline:2px solid var(--color-amber-deep);outline-offset:2px;border-radius:1px;} ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-track{background:var(--color-paper);} ::-webkit-scrollbar-thumb{background:var(--color-line-bright);border:2px solid var(--color-paper);} ::-webkit-scrollbar-thumb:hover{background:var(--color-amber-deep);} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}} /* type utilities */ .label-mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--color-fg-dim);} .label-mono-lg{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;color:var(--color-fg-dim);} .mono{font-family:var(--font-mono);} .display{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.08;} .hero-h{font-family:var(--font-display);font-weight:700;line-height:.95;letter-spacing:-.02em;font-size:clamp(2.4rem,5.6vw,4.6rem);} .big{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.015em;font-size:clamp(2rem,4.4vw,3.4rem);} .sec-h{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;font-size:clamp(1.6rem,3.4vw,2.6rem);} .dim{color:var(--color-fg-dim);}.faint{color:var(--color-fg-faint);}.amberdeep{color:var(--color-amber-deep);} .lead{font-size:1.125rem;line-height:1.6;color:var(--color-fg-dim);max-width:46rem;} .eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--color-amber-deep);} .stat{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;} /* engineered grid + fixed overlay (CAD registration frame) */ .eng-grid{background-image:linear-gradient(to right,color-mix(in oklab,var(--color-line-bright) 55%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab,var(--color-line-bright) 55%,transparent) 1px,transparent 1px);background-size:var(--grid-unit) var(--grid-unit);} .overlay{position:fixed;inset:0;z-index:5;pointer-events:none;display:none;} @media(min-width:768px){.overlay{display:block;}} .tick{position:absolute;height:12px;width:12px;} .tick:before{content:"";position:absolute;left:50%;top:0;height:100%;width:1px;transform:translateX(-50%);background:color-mix(in oklab,var(--color-amber-deep) 70%,transparent);} .tick:after{content:"";position:absolute;top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);background:color-mix(in oklab,var(--color-amber-deep) 70%,transparent);} .hud{position:absolute;color:var(--color-fg-faint);} /* section marker: ● 01 / The problem ---- */ .marker{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;width:100%;} .marker .sq{height:6px;width:6px;background:var(--color-amber);flex:none;} .marker .idx{color:var(--color-amber-deep);} .marker .lbl{color:var(--color-fg-dim);} .marker .ln{height:1px;background:var(--color-line);flex:1;} /* layout */ .wrap{max-width:80rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;} .wrap-wide{max-width:120rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;} @media(min-width:768px){.wrap,.wrap-wide{padding-left:var(--gutter);padding-right:var(--gutter);}} .section{border-top:1px solid var(--color-line);padding:4rem 0;} @media(min-width:768px){.section{padding:5rem 0;}} .center{display:flex;flex-direction:column;align-items:center;text-align:center;} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;padding:.875rem 1.75rem;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s;} .btn-amber{background:var(--color-amber);color:var(--color-ink);} .btn-amber:hover{background:var(--color-amber-bright);} .btn-ghost{border-color:var(--color-line-bright);color:var(--color-fg);} .btn-ghost:hover{border-color:var(--color-amber);color:var(--color-amber-deep);} .btn-sm{padding:.55rem 1rem;font-size:.8rem;letter-spacing:.1em;} .btn-block{width:100%;} /* surfaces / cards / matrix */ .card{border:1px solid var(--color-line);background:var(--color-surface);} .pad{padding:1.5rem;}@media(min-width:768px){.pad{padding:2rem;}} .matrix{display:grid;gap:1px;border:1px solid var(--color-line);background:var(--color-line);} .matrix>*{background:var(--color-paper);} .cell{padding:1.5rem;}@media(min-width:768px){.cell{padding:2rem;}} .divider{height:1px;background:var(--color-line);} .grid2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);} @media(min-width:820px){.grid2{grid-template-columns:1fr 1fr;}} .grid3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);} @media(min-width:768px){.grid3{grid-template-columns:repeat(3,1fr);}} .grid4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);} @media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr);}} .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);} @media(min-width:680px){.catgrid{grid-template-columns:repeat(3,1fr);}} @media(min-width:1024px){.catgrid{grid-template-columns:repeat(3,1fr);}} /* chips / pills / status */ .chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;padding:.3rem .6rem;border:1px solid var(--color-line-bright);color:var(--color-fg-dim);} .chip-amber{background:var(--color-amber);color:var(--color-ink);border-color:var(--color-amber);} .chip-dot{height:6px;width:6px;background:var(--color-amber-deep);} .chip-amber .chip-dot{background:var(--color-ink);} .pill{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;padding:.12rem .45rem;border:1px solid var(--color-line-bright);color:var(--color-fg-dim);} .pill-st{border-color:var(--color-amber-deep);color:var(--color-amber-deep);} .pill-inf{border-color:var(--color-line-bright);color:var(--color-fg-faint);} /* form */ .field{margin-bottom:1rem;} .field label{display:block;margin-bottom:.5rem;} .input{width:100%;border:1px solid var(--color-line);background:var(--color-surface);padding:.75rem 1rem;font-family:var(--font-text);color:var(--color-fg);transition:border-color .15s;} .input::placeholder{color:var(--color-fg-faint);} .input:focus{outline:none;border-color:var(--color-amber);} select.input{appearance:none;} /* app chrome */ .appbar{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--color-line);background:var(--color-paper);} .appbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px;} @media(min-width:768px){.appbar-inner{height:72px;}} .brand{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;font-size:1.3rem;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;} .brand .o{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;border:2px solid var(--color-amber-deep);color:var(--color-amber-deep);font-size:.6em;font-family:var(--font-mono);} .brand small{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.18em;color:var(--color-fg-dim);} .appnav{display:none;gap:1.6rem;align-items:center;} @media(min-width:920px){.appnav{display:flex;}} .appnav a{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--color-fg);transition:color .15s;} .appnav a:hover,.appnav a.active{color:var(--color-amber-deep);} .tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--color-line);overflow-x:auto;} .tabs .t{padding:.9rem 0;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;white-space:nowrap;color:var(--color-fg-dim);border-bottom:2px solid transparent;} .tabs .t.on{color:var(--color-fg);border-bottom-color:var(--color-amber-deep);} /* reveal-once (progressive enhancement: visible without JS) */ .reveal{opacity:1;transform:none;} .js-anim .reveal{opacity:0;transform:translateY(14px);} .js-anim .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease-machined),transform .7s var(--ease-machined);} /* small instrument visuals */ .cmprow{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--color-line);font-size:.97rem;} .cmprow .ic{font-family:var(--font-mono);color:var(--color-amber-deep);flex:none;} .viz{border:1px solid var(--color-line-bright);background:var(--color-surface);padding:1rem;margin-top:1.25rem;} .viz-h{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--color-fg-faint);padding-bottom:.6rem;border-bottom:1px solid var(--color-line);margin-bottom:.7rem;} .srow,.bidrow{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.35rem 0;font-size:.92rem;} /* tables */ .tablewrap{overflow-x:auto;} .table{width:100%;border-collapse:collapse;} .table th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--color-fg-dim);text-align:left;font-weight:400;padding:.7rem 1rem;border-bottom:1px solid var(--color-line-bright);white-space:nowrap;} .table td{padding:.8rem 1rem;border-bottom:1px solid var(--color-line);vertical-align:top;font-size:.95rem;} .table tr:last-child td{border-bottom:none;} /* pipeline node ("you are here") */ .node{background:var(--color-paper);padding:1.5rem;position:relative;} .node.here{outline:1px solid var(--color-amber-deep);} .node .hb{position:absolute;top:-.7rem;left:1.5rem;background:var(--color-amber);color:var(--color-ink);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;padding:.15rem .5rem;text-transform:uppercase;} /* details/summary reset */ summary{list-style:none;}summary::-webkit-details-marker{display:none;} /* spacing helpers */ .mt1{margin-top:.5rem;}.mt2{margin-top:1rem;}.mt3{margin-top:1.5rem;}.mt4{margin-top:2rem;}.mt5{margin-top:2.5rem;}.mt6{margin-top:3.5rem;}