@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&display=swap'); /* ============================================================ KOSMOS+ ENTERPRISE -- shared stylesheet (shell + components) Extracted verbatim from kosmos-plus-design-system.html (Mona's kit) and adapted for a multi-page, full-page dashboard: - component class names are UNCHANGED from the kit (the contract); - the kit's embedded .shell/.shell-grid demo frame is replaced by two additive full-page frame classes: .app-header + .app-body; - everything is document-scoped (the kit's #ds wrapper is dropped), so every page just links this file and writes shell markup. Committed single visual world: white corporate body, navy Kosmos+ chrome. Components read ONLY semantic tokens; re-theme a whole page by setting ONE attribute on , e.g. data-brand="visualedge", which swaps --brand / --brand-2 / --link and nothing else. Status and chart tokens never change with the brand. ============================================================ */ :root { color-scheme: light; /* --- Kosmos+ product palette (FIXED, never per-company) --- */ --k-navy-900:#131d33; --k-navy-800:#17233d; --k-navy-700:#1d2b49; --k-navy-600:#31446f; --k-gold:#e3b341; --k-royal:#4171e3; --k-cyan:#41c2e3; --k-green:#3fbf87; --k-ink-on-dark:#e6ebf7; --k-ink-on-dark-2:#a9b7d6; --k-ink-on-dark-3:#7e8fb4; /* --- Semantic theme tokens (brief section 13) --- The ONLY colours a company theme overrides. Default = Kosmos royal; per-company blocks below swap --brand / --brand-2 / --link only. */ --brand:#1d4ed8; /* company primary */ --brand-2:var(--k-gold); /* secondary accent */ --on-brand:#ffffff; /* text on a brand fill */ --nav-bg:var(--k-navy-800); /* navy chrome, shared luxury */ --nav-bg-2:var(--k-navy-900); --nav-text:var(--k-ink-on-dark); --nav-text-dim:var(--k-ink-on-dark-3); --nav-line:var(--k-navy-600); --link:var(--brand); --focus:#2f6bf0; /* corporate white body + neutral surfaces (hue-biased, not flat grey) */ --body:#f6f8fc; --surface:#ffffff; --surface-sunken:#eef2f9; --border:#e2e7f1; --border-strong:#cfd7e6; --ink:#141b2b; --ink-2:#4a566d; --ink-3:#7b869c; /* status - STABLE, independent of brand colour (brief 13): a customer's red brand must not make healthy states look failed. Every status also carries a glyph + label, never colour alone. */ --ok:#1a935e; --ok-bg:#e4f5ec; --ok-line:#b7e2c9; --warn:#a9721a; --warn-bg:#fbf1dd; --warn-line:#eed6a3; --fail:#c23b28; --fail-bg:#fbe9e6; --fail-line:#f0c3ba; --unknown:#586a8c; --unknown-bg:#eef1f7; --unknown-line:#d4dbe8; --info:#2166b8; --info-bg:#e6f0fb; --info-line:#bcd6f2; /* chart categorical palette (approved, colour-blind spread) */ --cat-1:#1d4ed8; --cat-2:#e3b341; --cat-3:#3fbf87; --cat-4:#41c2e3; --cat-5:#8b5cf6; --cat-6:#e3699b; /* type */ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* scale */ --r-sm:6px; --r:10px; --r-lg:14px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px; --shadow-1:0 1px 2px rgba(20,27,43,.06), 0 1px 3px rgba(20,27,43,.05); --shadow-2:0 4px 16px rgba(20,27,43,.10), 0 1px 3px rgba(20,27,43,.06); --shadow-nav:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(11,18,40,.28); /* full-page frame */ --hdr:54px; /* co-branded header height, drives sticky offsets */ --side-w:230px; /* sidebar width */ } /* ---- per-company instances: swap ONLY brand tokens (from the kit) ---- */ [data-brand="visualedge"]{ --brand:#0066cc; --brand-2:#0a4d8f; --link:#0066cc; } [data-brand="inmar"]{ --brand:#c8102e; --brand-2:#5b6770; --link:#a50d26; } [data-brand="meridian"]{ --brand:#1d4ed8; --brand-2:#0f2f7a; --link:#1d4ed8; } [data-brand="cedar"]{ --brand:#0f766e; --brand-2:#0a4f49; --link:#0f766e; } /* Cypress Growth Capital: forest-green primary, deep evergreen secondary (additive) */ [data-brand="cypress"]{ --brand:#2d5b44; --brand-2:#14281e; --link:#2d5b44; --focus:#2d5b44; } /* Cypress typography (scoped so no other brand's fonts change): Lato body, Montserrat headings */ [data-brand="cypress"]{ --font:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } [data-brand="cypress"] h1, [data-brand="cypress"] h2, [data-brand="cypress"] h3, [data-brand="cypress"] h4, [data-brand="cypress"] .page-h h1, [data-brand="cypress"] .app-header .co-name, [data-brand="cypress"] .app-header .prod{ font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* Cypress header lockup logo: real logo image replaces the initials badge in the navy header */ [data-brand="cypress"] .app-header .lockup .mk.brand-logo{ background:transparent; border-radius:0; width:auto; height:26px; } .app-header .lockup .mk.brand-logo img{ height:26px; width:auto; display:block; } * { box-sizing:border-box; } html, body { height:100%; } body { margin:0; font-family:var(--font); color:var(--ink); background:var(--body); min-height:100%; -webkit-font-smoothing:antialiased; } p { margin:0; } a { color:var(--link); } /* ============ full-page shell frame (additive: .app-header + .app-body) ============ */ /* Co-branded header: company mark + name | shared product name. Navy chrome. */ .app-header { position:sticky; top:0; z-index:50; height:var(--hdr); display:flex; align-items:center; gap:var(--sp-4); padding:0 clamp(14px,3vw,24px); background:linear-gradient(180deg,var(--k-navy-800),var(--k-navy-900)); box-shadow:var(--shadow-nav); color:var(--nav-text); } .app-header .lockup { display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0; } .app-header .mk { width:30px; height:30px; border-radius:8px; flex:none; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:750; font-size:13px; letter-spacing:.01em; } .app-header .co-name { font-size:14.5px; font-weight:650; letter-spacing:.01em; white-space:nowrap; } .app-header .bar { color:var(--k-navy-600); font-weight:300; } .app-header .prod { display:flex; align-items:center; gap:7px; font-size:14.5px; color:var(--k-ink-on-dark-2); font-weight:600; white-space:nowrap; } .app-header .prod img { height:20px; width:auto; display:block; } .app-header .prod .plus { color:var(--k-gold); } .app-header .h-right { display:flex; align-items:center; gap:10px; } .app-header .tag { font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--k-ink-on-dark-2); background:rgba(255,255,255,.07); border:1px solid var(--nav-line); border-radius:999px; padding:4px 11px; } .app-header .who { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--nav-text-dim); } .app-header .who .av { width:26px; height:26px; border-radius:50%; background:var(--k-navy-600); color:var(--nav-text); display:grid; place-items:center; font-size:11px; font-weight:700; } .app-header a:focus-visible, .app-header button:focus-visible { outline:2px solid var(--k-cyan); outline-offset:2px; } /* Body grid: fixed sidebar + scrolling main. */ .app-body { display:grid; grid-template-columns:var(--side-w) 1fr; align-items:start; } /* ============ sidebar (kit .side, adapted to full height) ============ */ .side { position:sticky; top:var(--hdr); align-self:start; height:calc(100vh - var(--hdr)); overflow-y:auto; background:linear-gradient(180deg,var(--k-navy-800),var(--k-navy-900)); color:var(--nav-text); padding:14px 10px; display:flex; flex-direction:column; gap:2px; } .side .co { display:flex; align-items:center; gap:9px; padding:6px 8px 14px; border-bottom:1px solid var(--nav-line); margin-bottom:8px; } .side .co .mk { width:30px; height:30px; border-radius:8px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:750; font-size:13px; flex:none; } .side .co .nm { font-size:13px; font-weight:650; line-height:1.15; } .side .co .nm small { display:block; font-size:10.5px; color:var(--nav-text-dim); font-weight:500; letter-spacing:.04em; text-transform:uppercase; } .side .grp { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--nav-text-dim); padding:12px 8px 4px; } .side a { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; color:var(--k-ink-on-dark-2); text-decoration:none; font-size:13px; } .side a .i { width:7px; height:7px; border-radius:2px; background:currentColor; opacity:.6; flex:none; } .side a:hover { background:rgba(255,255,255,.06); color:var(--nav-text); } .side a.on { background:var(--brand); color:var(--on-brand); } .side a.on .i { opacity:1; } .side a:focus-visible { outline:2px solid var(--k-cyan); outline-offset:2px; } /* ============ main + scope/filter bar (kit) ============ */ .main { display:flex; flex-direction:column; min-width:0; background:var(--body); min-height:calc(100vh - var(--hdr)); } .scope { position:sticky; top:var(--hdr); z-index:20; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px clamp(14px,3vw,24px); background:var(--surface); border-bottom:1px solid var(--border); } .scope .lock { display:flex; align-items:center; gap:9px; margin-right:auto; } .scope .lock .mk { width:26px; height:26px; border-radius:6px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:750; font-size:12px; } .scope .lock .bar { color:var(--border-strong); font-weight:300; } .scope .lock b { font-size:14px; font-weight:650; } .scope .lock .prod { font-size:14px; color:var(--ink-2); font-weight:600; } .scope .chip { font-size:12px; color:var(--ink-2); background:var(--surface-sunken); border:1px solid var(--border); border-radius:999px; padding:5px 11px; display:inline-flex; gap:7px; align-items:center; } .scope .chip .x { color:var(--ink-3); font-weight:700; } .scope .chip.freshness { color:var(--ink-3); background:transparent; border-color:transparent; padding-left:0; } .main-body { padding:clamp(14px,3vw,24px); display:flex; flex-direction:column; gap:16px; } .page-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .page-h h1 { font-size:clamp(20px,3vw,26px); font-weight:720; letter-spacing:-.02em; margin:0; } .page-h .sub { color:var(--ink-2); font-size:13.5px; } /* ============ metric cards (kit) ============ */ .metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; } .metric { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-1); text-decoration:none; color:inherit; transition:box-shadow .12s, border-color .12s; } a.metric:hover { box-shadow:var(--shadow-2); border-color:var(--border-strong); } a.metric:focus-visible { outline:2px solid var(--focus); outline-offset:2px; } .metric .top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .metric .nm { font-size:12px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:6px; } .metric .nm .q { width:14px; height:14px; border-radius:50%; border:1px solid var(--border-strong); color:var(--ink-3); font-size:9px; display:grid; place-items:center; cursor:help; flex:none; } .metric .val { font-size:27px; font-weight:720; letter-spacing:-.02em; line-height:1; } .metric .val .u { font-size:14px; color:var(--ink-3); font-weight:600; margin-left:3px; } .metric .val.num { font-variant-numeric:tabular-nums; } .metric .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; } .metric .basis { color:var(--ink-3); } .delta { font-weight:700; display:inline-flex; align-items:center; gap:3px; } .delta.up { color:var(--ok); } .delta.down { color:var(--fail); } .delta.flat { color:var(--ink-3); } .delta.new { color:var(--info); } /* ============ two-col chart grid + panels (kit) ============ */ .chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .chart-grid.wide-left { grid-template-columns:1.6fr 1fr; } .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px; box-shadow:var(--shadow-1); min-width:0; } .panel .p-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .panel h2, .panel h3, .panel h4 { margin:0 0 2px; font-size:13.5px; font-weight:650; } .panel .sub { font-size:11.5px; color:var(--ink-3); margin-bottom:10px; } .legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; font-size:11.5px; color:var(--ink-2); } .legend span { display:inline-flex; align-items:center; gap:6px; } .legend i { width:10px; height:10px; border-radius:3px; flex:none; } .legend .v { color:var(--ink-3); font-variant-numeric:tabular-nums; } /* segmented toggle (chart series switch) */ .seg { display:inline-flex; gap:2px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:999px; padding:2px; } .seg button { font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--ink-2); border-radius:999px; padding:4px 11px; } .seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); } .seg button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; } /* ============ table + detail drawer (kit) ============ */ .tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); } table.et { border-collapse:collapse; width:100%; font-size:13px; min-width:560px; } table.et th, table.et td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; } table.et thead th { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); background:var(--surface-sunken); position:sticky; top:0; } table.et tbody tr:hover { background:var(--surface-sunken); cursor:pointer; } table.et tbody tr.sel { background:color-mix(in srgb, var(--brand) 8%, var(--surface)); } table.et .idcol { font-weight:600; color:var(--ink); } table.et td.num, table.et th.num { text-align:right; font-variant-numeric:tabular-nums; } table.et a { color:var(--link); text-decoration:none; } table.et a:hover { text-decoration:underline; } .drawer { position:fixed; top:0; right:0; bottom:0; width:min(380px,90vw); z-index:60; background:var(--surface); border-left:1px solid var(--border); box-shadow:-12px 0 32px rgba(20,27,43,.16); display:flex; flex-direction:column; } .drawer header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; } .drawer header .mk { width:30px; height:30px; border-radius:8px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; } .drawer header b { font-size:14px; } .drawer header small { display:block; color:var(--ink-3); font-size:11.5px; } .drawer .body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; overflow:auto; } .drawer footer { margin-top:auto; padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:10px; } .backdrop { position:fixed; inset:0; z-index:55; background:rgba(19,29,51,.28); } .kv { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; border-bottom:1px dashed var(--border); } .kv:last-of-type { border-bottom:0; } .kv .k { color:var(--ink-3); } .kv .v { font-weight:600; font-variant-numeric:tabular-nums; } /* ============ status badges + state language (kit) ============ */ .badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid; } .badge .g { font-size:11px; line-height:1; } .b-ok { color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); } .b-warn { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); } .b-fail { color:var(--fail); background:var(--fail-bg); border-color:var(--fail-line); } .b-unknown { color:var(--unknown); background:var(--unknown-bg); border-color:var(--unknown-line); } .b-info { color:var(--info); background:var(--info-bg); border-color:var(--info-line); } .states { display:flex; flex-direction:column; gap:0; } .state-row { display:grid; grid-template-columns:170px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); align-items:start; } .state-row:last-child { border-bottom:0; } .state-row .d { font-size:13px; color:var(--ink-2); line-height:1.5; } /* ============ cards / pills / buttons (kit) ============ */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-1); } .pad { padding:var(--sp-5); } .sec-h { font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3); font-weight:700; margin:4px 0; display:flex; align-items:center; gap:10px; } .sec-h::after { content:""; flex:1; height:1px; background:var(--border); } .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--border-strong); color:var(--ink-2); background:var(--surface); } .pill .k { width:8px; height:8px; border-radius:50%; } .btns { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; } .btn { font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:var(--r-sm); padding:9px 16px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:filter .12s,background .12s; text-decoration:none; } .btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; } .btn-primary { background:linear-gradient(180deg,var(--k-navy-700),var(--k-navy-800)); color:var(--nav-text); border-color:var(--k-navy-900); box-shadow:var(--shadow-1); } .btn-primary:hover { filter:brightness(1.12); } .btn-brand { background:var(--brand); color:var(--on-brand); } .btn-brand:hover { filter:brightness(.94); } .btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--border-strong); } .btn-ghost:hover { background:var(--surface-sunken); } .btn-gold { background:var(--k-gold); color:#3a2c05; } .btn-gold:hover { filter:brightness(1.05); } .btn[disabled]{ cursor:not-allowed; opacity:.55; filter:none; } /* empty / placeholder screen (for nav targets not built yet) */ .placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:64px 24px; color:var(--ink-3); } .placeholder .mk { width:44px; height:44px; border-radius:12px; background:var(--surface-sunken); border:1px solid var(--border); display:grid; place-items:center; } .placeholder h1, .placeholder h2 { margin:0; font-size:18px; color:var(--ink); font-weight:680; } .placeholder p { max-width:44ch; font-size:14px; line-height:1.55; } .num { font-variant-numeric:tabular-nums; } .mono { font-family:var(--mono); } @media (max-width:860px){ :root { --side-w:100%; } .app-body { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; } .side .co { border-bottom:0; width:100%; padding-bottom:6px; } .side .grp { display:none; } .chart-grid, .chart-grid.wide-left { grid-template-columns:1fr; } .app-header .who { display:none; } /* keep the co-brand lockup from overflowing on narrow */ /* mobile nav drawer (brand.js adds .js-nav, the .nav-toggle and .nav-backdrop) */ .js-nav .app-header { gap:10px; } .js-nav .nav-toggle { display:grid; place-items:center; flex:none; width:38px; height:38px; margin-left:-4px; padding:0; background:transparent; border:1px solid var(--nav-line); border-radius:8px; color:var(--nav-text); cursor:pointer; } .nav-toggle .bars { display:flex; flex-direction:column; gap:4px; width:18px; } .nav-toggle .bars span { display:block; height:2px; border-radius:1px; background:currentColor; transition:transform .2s ease, opacity .2s ease; } .nav-open .nav-toggle .bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); } .nav-open .nav-toggle .bars span:nth-child(2) { opacity:0; } .nav-open .nav-toggle .bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); } .js-nav .side { position:fixed; top:var(--hdr); left:0; bottom:0; z-index:48; width:min(280px,84vw); height:auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch; overflow-y:auto; overscroll-behavior:contain; box-shadow:12px 0 32px rgba(11,18,40,.3); transform:translateX(-100%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; } .js-nav .side .grp { display:block; } .js-nav .side a { padding:11px 10px; font-size:14px; } .nav-open .side { transform:none; visibility:visible; transition:transform .22s ease; } .js-nav .nav-backdrop { display:block; position:fixed; top:var(--hdr); left:0; right:0; bottom:0; z-index:46; background:rgba(19,29,51,.45); opacity:0; pointer-events:none; transition:opacity .22s ease; } .nav-open .nav-backdrop { opacity:1; pointer-events:auto; } .nav-open body { overflow:hidden; } /* phone header: hamburger + company + signed-in admin (the product name and Demo tag drop out) */ .js-nav .app-header .who { display:flex; flex:none; white-space:nowrap; } .js-nav .app-header .co-name { overflow:hidden; text-overflow:ellipsis; } /* a select sizes to its longest option (recovery.html scenario picker); let it shrink instead of widening the page */ .tblbar label.inline { max-width:100%; min-width:0; } .tblbar select { max-width:100%; min-width:0; } } @media (max-width:640px){ .js-nav .app-header .bar, .js-nav .app-header .prod, .js-nav .app-header .tag { display:none; } .js-nav .app-header .lockup { gap:8px; } } .nav-toggle, .nav-backdrop { display:none; } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }