/* ============================================================================= * ChefStack Design System - Layer 2: Base * ============================================================================= * Document-level typography, the app shell, the ambient gradient canvas and * the single shared focus treatment. Component styling lives in components.css; * de-fanging the legacy template lives in legacy-bridge.css. * ========================================================================== */ /* Keep the rem scale anchored. The legacy NobleUI bundle shrinks the root * font-size, which would compound with our own rem-based type scale. */ /* The rem anchor. Nothing else may set a font-size on : every --cs-text-* * token is expressed in rem, so a second root-level font-size would multiply * the whole type scale (16px root + a 0.875rem root rule = a 14px root, and * then 0.875rem body text resolves to 12.25px instead of 14px). */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } html { background-color: var(--cs-canvas); color: var(--cs-text); } body { background-color: var(--cs-canvas); color: var(--cs-text); font-family: var(--cs-font-sans); font-size: var(--cs-text-base); font-weight: var(--cs-weight-regular); line-height: var(--cs-leading-normal); letter-spacing: var(--cs-tracking-tight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; transition: background-color var(--cs-transition-base), color var(--cs-transition-base); } /* --- Headings -------------------------------------------------------------- * Figtree for display text, Inter for everything else. The pairing gives * headings a slightly wider, warmer shape against Inter's neutral UI text. * ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .card-title, .modal-title { font-family: var(--cs-font-display); font-weight: var(--cs-weight-semibold); line-height: var(--cs-leading-tight); letter-spacing: var(--cs-tracking-tight); color: var(--cs-text); margin-top: 0; } h1, .h1 { font-size: var(--cs-text-2xl); } h2, .h2 { font-size: var(--cs-text-xl); } h3, .h3 { font-size: var(--cs-text-lg); } h4, .h4 { font-size: var(--cs-text-md); } h5, .h5 { font-size: var(--cs-text-base); } h6, .h6 { font-size: var(--cs-text-sm); } .page-title { font-size: var(--cs-text-xl); } .card-title, .modal-title { font-size: var(--cs-text-lg); } small, .small, .text-muted, .help-block { font-size: var(--cs-text-xs); color: var(--cs-text-muted); } code, kbd, pre, samp { font-family: var(--cs-font-mono); font-size: var(--cs-text-sm); } a { color: var(--cs-primary); text-decoration: none; transition: color var(--cs-transition-fast); } a:hover { color: var(--cs-primary-hover); } hr { border-color: var(--cs-border); opacity: 1; } /* --- App shell ------------------------------------------------------------- * The ambient wash: three soft radial pools (lavender, periwinkle, a touch of * mint) over the flat canvas. Fixed attachment so it does not scroll with * content, which keeps long tables from dragging the gradient around. * ------------------------------------------------------------------------- */ .page-wrapper, .main-wrapper > .page-wrapper { background-color: var(--cs-canvas); background-image: radial-gradient(ellipse 80% 60% at 8% -5%, var(--cs-ambient-1), transparent 60%), radial-gradient(ellipse 70% 50% at 95% 5%, var(--cs-ambient-2), transparent 55%), radial-gradient(ellipse 60% 50% at 50% 100%, var(--cs-ambient-3), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } .page-content, .content-wrapper, .main-content { background: transparent; } /* --- Focus ----------------------------------------------------------------- * One focus treatment for the whole portal. :focus-visible only, so pointer * users never see a ring but keyboard users always do. * ------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 2px; } /* --- Selection & scrollbars ----------------------------------------------- */ ::selection { background: var(--cs-primary-soft-hover); color: var(--cs-primary-text); } * { scrollbar-width: thin; scrollbar-color: var(--cs-border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--cs-border-strong); border: 3px solid transparent; border-radius: var(--cs-radius-pill); background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--cs-text-subtle); background-clip: content-box; } /* --- Icon sizing ----------------------------------------------------------- * The portal ships two icon sets: Feather (inlined as by feather.js) in * the older modules and Bootstrap Icons (a webfont) in the newer ones. Pin * both to the same box so mixed pages line up. * ------------------------------------------------------------------------- */ .bi::before { font-size: var(--cs-icon-size); line-height: 1; vertical-align: -0.125em; } svg.feather, [data-feather] { width: var(--cs-icon-size); height: var(--cs-icon-size); stroke-width: 2; vertical-align: -0.175em; } /* --- Utilities ------------------------------------------------------------- * A small, deliberately short list. Anything used more than a few times * belongs in components.css as a named component instead. * ------------------------------------------------------------------------- */ .cs-stack { display: flex; flex-direction: column; gap: var(--cs-space-4); } .cs-row { display: flex; align-items: center; gap: var(--cs-space-2); flex-wrap: wrap; } .cs-row-end { display: flex; align-items: center; gap: var(--cs-space-2); flex-wrap: wrap; justify-content: flex-end; } .cs-spacer { flex: 1 1 auto; } .cs-text-muted { color: var(--cs-text-muted) !important; } .cs-text-subtle { color: var(--cs-text-subtle) !important; } /* Frosted panel, for sticky toolbars and hero strips. */ .cs-glass { background: var(--cs-glass); border: var(--cs-border-width) solid var(--cs-glass-border); border-radius: var(--cs-radius-surface); box-shadow: var(--cs-shadow-sm); } @supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) { .cs-glass { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } .cs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }