/* ============================================================ Alpha Souverain Capital — Industry Demo Hub Shared design system Clean modern SaaS aesthetic (light, functional) ============================================================ */ /* ---------- Design tokens ---------- Full theme presets live in assets/js/app.js and are written as inline custom properties on at runtime (single source of truth). The :root values below are ASC's fixed brand identity — "Onyx Gold" (black/gold). This is what the Industry Picker/landing renders (no switcher there), and the first-paint / no-JS default for demo pages before a selection is applied. */ :root { color-scheme: dark; /* Accent (theme-driven) — ASC brand default: Onyx Gold */ --accent: #C9A227; /* refined gold — fills, meters, selected states */ --accent-secondary:#E8C766; /* lighter gold (available to components) */ --accent-strong: #96751A; /* stronger accent for emphasis states (available) */ --accent-hover: #B38E1F; --accent-active: #96751A; --accent-soft: rgba(201,162,39,0.16); /* tinted surface behind icons / chips */ --accent-soft-2: rgba(201,162,39,0.28); --accent-fg: #DAB63E; /* accent used as TEXT/icon — AA on cards & soft */ --on-accent: #201A04; /* text/icon colour ON a filled --accent surface */ --accent-ring: rgba(201,162,39,0.4); /* Surfaces (theme-driven) */ --bg: #0A0A0A; /* page background */ --surface: #171717; /* card / panel background */ --surface-2: #201F1E; /* secondary surface — table headers, subtle fills */ --surface-3: #2A2927; /* tertiary surface — chips, meter tracks */ --border: #272625; --border-strong: #383735; --header-bg: rgba(10,10,10,0.9); /* Text (theme-driven) */ --text: #F2F2F0; --text-2: #C2C2BE; --text-3: #928F88; --text-inv: #FFFFFF; /* Spec alias names (mirror the semantic tokens above) */ --bg-secondary: var(--surface-2); --card-bg: var(--surface); --text-primary: var(--text); --text-secondary: var(--text-2); /* Status (constant across themes) */ --green: #16A34A; --green-soft: #E9F7EF; --amber: #D97706; --amber-soft: #FBF1E3; --red: #DC2626; --red-soft: #FBEAEA; --blue: #2563EB; --blue-soft: #E8F0FE; --slate: #64748B; --slate-soft: #EEF1F5; /* Elevation */ --shadow-xs: 0 1px 2px rgba(16, 18, 24, 0.04); --shadow-sm: 0 1px 2px rgba(16,18,24,.05), 0 1px 3px rgba(16,18,24,.06); --shadow-md: 0 4px 12px rgba(16,18,24,.06), 0 2px 4px rgba(16,18,24,.04); --shadow-lg: 0 12px 32px rgba(16,18,24,.10), 0 4px 8px rgba(16,18,24,.05); /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Layout */ --header-h: 60px; --sidebar-w: 248px; --maxw: 1240px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 550; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; white-space: nowrap; } .btn:active { transform: translateY(0.5px); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { background: var(--accent-active); } .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-soft { background: var(--accent-soft); color: var(--accent-fg); } .btn-soft:hover { background: var(--accent-soft-2); } .btn-sm { height: 34px; padding: 0 13px; font-size: 13px; } .btn-lg { height: 46px; padding: 0 24px; font-size: 15px; } .btn-block { width: 100%; } /* ---------- Chips / badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 1; background: var(--surface-3); color: var(--text-2); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip.green { background: var(--green-soft); color: #15803d; } .chip.amber { background: var(--amber-soft); color: #b45309; } .chip.red { background: var(--red-soft); color: #b91c1c; } .chip.blue { background: var(--blue-soft); color: #1d4ed8; } .chip.slate { background: var(--slate-soft); color: #475569; } .chip.accent { background: var(--accent-soft); color: var(--accent-fg); } /* ---------- Cards / panels ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .panel-head h3 { font-size: 15px; } .panel-head .sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } .panel-body { padding: 18px; } .panel-body.flush { padding: 0; } /* ---------- Brand logo ---------- */ .asc-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); } .asc-logo .mark { width: 34px; height: 34px; border-radius: 9px; flex: none; background: #000 url("../img/asc-logo.png") center/cover no-repeat; border: 1px solid var(--border-strong); color: transparent; font-size: 0; display: grid; place-items: center; box-shadow: var(--shadow-xs); overflow: hidden; } .asc-logo .name { font-size: 15px; } .asc-logo .name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-3); letter-spacing: .02em; margin-top: -2px; } /* ============================================================ Shared app header (in-demo) ============================================================ */ .app-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 16px; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .app-header .left { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-header .switch-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 6px 10px; border-radius: var(--r-sm); } .app-header .switch-link:hover { background: var(--surface-2); color: var(--text); } .app-header .right { display: flex; align-items: center; gap: 12px; } /* Theme switcher — each swatch previews a full theme (page bg + card + accent + text) */ .palette { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .theme-swatch { position: relative; width: 30px; height: 26px; border-radius: 7px; cursor: pointer; padding: 3px; background: var(--sw-bg); border: 1.5px solid var(--sw-border); transition: transform .12s ease, box-shadow .12s ease; flex: none; overflow: hidden; } .theme-swatch:hover { transform: translateY(-1px) scale(1.06); box-shadow: var(--shadow-sm); } .theme-swatch .sw-card { position: absolute; inset: 4px; border-radius: 4px; background: var(--sw-card); border: 1px solid var(--sw-border); padding: 3px; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .theme-swatch .sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-accent); } .theme-swatch .sw-line { height: 2px; border-radius: 2px; background: var(--sw-text); opacity: .7; width: 12px; } .theme-swatch .sw-line.short { width: 8px; opacity: .4; } .theme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--sw-accent); } .theme-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--sw-accent); } /* ============================================================ App shell (sidebar + main) ============================================================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - var(--header-h)); } .sidebar { border-right: 1px solid var(--border); background: var(--surface); padding: 18px 14px; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; } .sidebar .demo-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 4px 10px 12px; } .sidebar .nav-group + .nav-group { margin-top: 18px; } .sidebar .nav-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 6px 10px; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--text-2); background: none; border: none; text-align: left; transition: background .12s ease, color .12s ease; } .nav-item .ico { width: 18px; height: 18px; flex: none; color: var(--text-3); } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent-fg); font-weight: 550; } .nav-item.active .ico { color: var(--accent-fg); } .nav-item .count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface-3); padding: 1px 7px; border-radius: 999px; } .nav-item.active .count { background: var(--accent-soft-2); color: var(--accent-fg); } .sidebar .side-foot { margin-top: 22px; padding: 12px 10px 4px; border-top: 1px solid var(--border); } .sidebar .side-foot .role { display: flex; align-items: center; gap: 10px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft-2); color: var(--accent-fg); display: grid; place-items: center; font-size: 12px; font-weight: 650; flex: none; } .sidebar .side-foot .who { font-size: 13px; font-weight: 550; } .sidebar .side-foot .who small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 500; } /* Main content area */ .main { min-width: 0; padding: 26px 30px 40px; } .view { display: none; animation: fade .25s ease; } .view.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .view-head { margin-bottom: 22px; } .view-head .crumb { font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; } .view-head h1 { font-size: 24px; } .view-head p.lead { color: var(--text-2); margin-top: 7px; max-width: 640px; font-size: 15px; } .view-head .head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .view-head .actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Hero (overview view) ---------- */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin-bottom: 10px; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent-fg); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; } .hero h1 { font-size: 34px; letter-spacing: -0.03em; } .hero .hero-sub { font-size: 16.5px; color: var(--text-2); margin-top: 14px; max-width: 520px; } .hero .hero-bullets { margin-top: 24px; display: grid; gap: 13px; } .hero .hero-bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--text); } .hero .hero-bullets .tick { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-fg); display: grid; place-items: center; flex: none; margin-top: 1px; } .hero .hero-bullets strong { font-weight: 600; } .hero .hero-bullets span.d { color: var(--text-3); } .hero .hero-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } /* Dashboard mockup preview (browser frame) */ .mock { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .mock .mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .mock .mock-bar .dots { display: flex; gap: 6px; } .mock .mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .mock .mock-bar .url { margin-left: 6px; font-size: 11.5px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; } .mock .mock-body { padding: 16px; } /* ---------- Stat tiles ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 17px; } .stat .stat-top { display: flex; align-items: center; justify-content: space-between; } .stat .label { font-size: 13px; color: var(--text-3); font-weight: 500; } .stat .stat-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-fg); display: grid; place-items: center; } .stat .value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; } .stat .delta { font-size: 12.5px; font-weight: 550; margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; } .stat .delta.up { color: var(--green); } .stat .delta.down { color: var(--red); } .stat .delta.flat { color: var(--text-3); } /* ---------- Tables ---------- */ .table-wrap { width: 100%; overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } table.data th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; } table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--surface-2); } table.data td .muted { color: var(--text-3); font-size: 12.5px; } table.data td .who { display: flex; align-items: center; gap: 10px; } table.data td .who .avatar { width: 28px; height: 28px; font-size: 11px; } table.data td.num { font-variant-numeric: tabular-nums; } table.data .row-strong { font-weight: 600; } /* ---------- Forms ---------- */ .field { margin-bottom: 15px; } .field > label { display: block; font-size: 13px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; } .field .hint { font-size: 12px; color: var(--text-3); margin-top: 5px; } .input, .select, .textarea { width: 100%; height: 42px; padding: 0 13px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color .12s ease, box-shadow .12s ease; } .textarea { height: auto; padding: 11px 13px; resize: vertical; min-height: 96px; line-height: 1.5; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767C88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-fg); box-shadow: 0 0 0 3px var(--accent-ring); } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Segmented / pill options */ .pill-group { display: flex; flex-wrap: wrap; gap: 9px; } .pill-opt { padding: 9px 15px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: all .12s ease; } .pill-opt:hover { border-color: var(--accent-fg); color: var(--text); } .pill-opt.selected { background: var(--accent-soft); border-color: var(--accent-fg); color: var(--accent-fg); font-weight: 600; } /* Choice cards (radio-like) */ .choice-grid { display: grid; gap: 12px; } .choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); transition: all .12s ease; text-align: left; width: 100%; } .choice:hover { border-color: var(--accent-fg); } .choice.selected { border-color: var(--accent-fg); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-ring); } .choice .ci { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; flex: none; } .choice.selected .ci { background: var(--accent-soft-2); color: var(--accent-fg); } .choice .cc { min-width: 0; } .choice .cc .t { font-size: 14px; font-weight: 600; } .choice .cc .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } .choice .cx { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-2); font-weight: 550; white-space: nowrap; } /* ---------- Calendar / time grid ---------- */ .cal { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); } .cal-head .m { font-size: 14px; font-weight: 600; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-grid .dow { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: center; padding: 9px 0; text-transform: uppercase; letter-spacing: .04em; } .cal-day { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; color: var(--text-2); border: none; background: none; border-radius: 8px; margin: 2px; transition: all .1s ease; position: relative; } .cal-day:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .cal-day.muted { color: var(--border-strong); } .cal-day:disabled { color: var(--border-strong); cursor: not-allowed; } .cal-day.has-dot::after { content:""; position:absolute; bottom:6px; width:4px; height:4px; border-radius:50%; background: var(--accent); } .cal-day.selected { background: var(--accent); color: var(--on-accent); font-weight: 600; } .cal-day.selected.has-dot::after { background: var(--on-accent); } .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; } .time-slot { padding: 9px 0; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-size: 13px; font-weight: 550; color: var(--text-2); text-align: center; transition: all .12s ease; } .time-slot:hover:not(:disabled) { border-color: var(--accent-fg); color: var(--accent-fg); } .time-slot.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .time-slot:disabled { color: var(--border-strong); cursor: not-allowed; background: var(--surface-2); text-decoration: line-through; } /* ---------- Product / listing grids ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .tile .thumb { height: 132px; background: var(--surface-3); position: relative; display: grid; place-items: center; color: var(--text-3); } .tile .thumb.grad-1 { background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); } .tile .thumb .thumb-ico { opacity: .6; } .tile .thumb .flag { position: absolute; top: 10px; left: 10px; } .tile .tbody { padding: 13px 15px; } .tile .tbody .cat { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); } .tile .tbody .t { font-size: 14.5px; font-weight: 600; margin-top: 3px; } .tile .tbody .d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.45; } .tile .tbody .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } /* ---------- Feature section band ---------- */ .section { margin-top: 34px; } .section > .section-head { margin-bottom: 16px; } .section > .section-head .kick { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-fg); } .section > .section-head h2 { font-size: 20px; margin-top: 6px; } .section > .section-head p { color: var(--text-2); margin-top: 6px; max-width: 640px; } /* Two-column split (form + summary) */ .split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; } .split-narrow { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; } /* Summary rail */ .summary .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; } .summary .row:last-of-type { border-bottom: none; } .summary .row .k { color: var(--text-3); } .summary .row .v { font-weight: 600; } .summary .total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; } .summary .total .v { font-weight: 700; font-size: 18px; } /* Progress / meters */ .meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .meter.green > span { background: var(--green); } .meter.amber > span { background: var(--amber); } .meter.red > span { background: var(--red); } /* Timeline / list rows */ .list-rows { display: grid; } .list-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: none; } .list-row .lr-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; flex: none; } .list-row .lr-main { min-width: 0; flex: 1; } .list-row .lr-main .t { font-size: 14px; font-weight: 550; } .list-row .lr-main .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } .list-row .lr-end { text-align: right; white-space: nowrap; } /* KES/USD dual money */ .money-dual .kes { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .money-dual .usd { font-size: 12.5px; color: var(--text-3); font-weight: 500; margin-top: 2px; } /* Bar chart (pure CSS) */ .barchart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; } .barchart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .barchart .bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--accent-soft-2); position: relative; transition: height .4s ease; } .barchart .bar.a { background: var(--accent); } .barchart .bar-col .xl { font-size: 11.5px; color: var(--text-3); } /* Donut (conic) */ .donut { width: 132px; height: 132px; border-radius: 50%; position: relative; } .donut::after { content:""; position:absolute; inset: 22px; background: var(--surface); border-radius: 50%; } .donut .dc { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; } .donut .dc .big { font-size: 20px; font-weight: 700; } .donut .dc .sm { font-size: 11px; color: var(--text-3); } /* Empty helper */ .hr { height: 1px; background: var(--border); border: none; margin: 20px 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .stack { display: grid; gap: 16px; } .muted { color: var(--text-3); } .small { font-size: 12.5px; } /* ============================================================ Landing / Industry picker ============================================================ */ .top-nav { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .top-nav .nav-links { display: flex; align-items: center; gap: 8px; } .top-nav .nav-links a { font-size: 14px; color: var(--text-2); padding: 8px 12px; border-radius: var(--r-sm); } .top-nav .nav-links a:hover { background: var(--surface-2); color: var(--text); } .landing-hero { max-width: var(--maxw); margin: 0 auto; padding: 60px 24px 40px; text-align: center; } .landing-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-fg); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; } .landing-hero h1 { font-size: 44px; margin-top: 22px; letter-spacing: -0.035em; } .landing-hero p { font-size: 18px; color: var(--text-2); margin: 18px auto 0; max-width: 620px; } .landing-hero .hero-meta { display: flex; gap: 26px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .landing-hero .hero-meta .hm { text-align: center; } .landing-hero .hero-meta .hm .n { font-size: 22px; font-weight: 700; } .landing-hero .hero-meta .hm .l { font-size: 12.5px; color: var(--text-3); } .industry-grid { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ind-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-xs); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; position: relative; overflow: hidden; } .ind-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); } .ind-card .ic-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-fg); display: grid; place-items: center; margin-bottom: 16px; transition: background .16s ease; } .ind-card:hover .ic-ico { background: var(--accent-soft-2); } .ind-card h3 { font-size: 17px; } .ind-card p { font-size: 13.5px; color: var(--text-2); margin-top: 7px; line-height: 1.5; } .ind-card .ic-foot { margin-top: 16px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-fg); } .ind-card .ic-foot .arr { transition: transform .16s ease; } .ind-card:hover .ic-foot .arr { transform: translateX(3px); } /* ============================================================ Shared footer ============================================================ */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 10px; } .site-footer .foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 30px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; } .site-footer .foot-lead h3 { font-size: 22px; } .site-footer .foot-lead p { color: var(--text-2); margin-top: 10px; max-width: 380px; } .site-footer .contact-lines { margin-top: 22px; display: grid; gap: 12px; } .site-footer .contact-lines .cl { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); } .site-footer .contact-lines .cl .cli { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-fg); display: grid; place-items: center; flex: none; } .contact-form .field-row { grid-template-columns: 1fr 1fr; } .site-footer .foot-bottom { border-top: 1px solid var(--border); } .site-footer .foot-bottom-inner { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer .disclaimer { font-size: 12.5px; color: var(--text-3); max-width: 620px; } .form-note { font-size: 12.5px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-fg); display: none; } .form-note.show { display: block; } /* ============================================================ Toast + modal ============================================================ */ .toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: grid; gap: 10px; } .toast { display: flex; align-items: center; gap: 11px; background: var(--text); color: var(--bg); padding: 13px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; animation: toastIn .25s ease; max-width: 340px; } .toast .ti { color: #4ade80; flex: none; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .modal-backdrop { position: fixed; inset: 0; background: rgba(16,18,24,.45); z-index: 150; display: none; place-items: center; padding: 20px; backdrop-filter: blur(2px); } .modal-backdrop.open { display: grid; } .modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; overflow: hidden; animation: fade .2s ease; } .modal .modal-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal .modal-head h3 { font-size: 17px; } .modal .modal-body { padding: 20px; } .modal .x { background: none; border: none; color: var(--text-3); padding: 4px; border-radius: 6px; } .modal .x:hover { background: var(--surface-2); color: var(--text); } /* ============================================================ Responsive ============================================================ */ .menu-btn { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 1000px) { .hero { grid-template-columns: 1fr; gap: 28px; } .industry-grid { grid-template-columns: repeat(2, 1fr); } .split, .split-narrow { grid-template-columns: 1fr; } .site-footer .foot-inner { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 820px) { :root { --sidebar-w: 250px; } .app-shell { grid-template-columns: 1fr; } .menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); } .sidebar { position: fixed; top: var(--header-h); left: 0; z-index: 60; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(16,18,24,.35); z-index: 55; } .sidebar-backdrop.open { display: block; } .main { padding: 22px 18px 36px; } .hero h1 { font-size: 28px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .industry-grid { grid-template-columns: 1fr; } .landing-hero h1 { font-size: 32px; } .landing-hero p { font-size: 16px; } .field-row { grid-template-columns: 1fr; } .app-header .palette { display: none; } .app-header .contact-lbl { display: none; } .view-head h1 { font-size: 21px; } }