/* * Bhoomi Works — paper, ink and brass. * * Bootstrap 5.3 supplies the grid, forms, tables, modals and dropdowns; this * file re-skins it with the prototype's tokens (v2/p1.html) and adds the * prototype's own components under a bw- prefix, so they never collide with a * Bootstrap class of the same name (.card, .row, .btn, .badge, .modal ...). * * The product is light. Dark is a choice the header offers, stored in the * bw_theme cookie and applied server-side as data-theme + data-bs-theme on * , so there is no flash of the wrong theme. There is deliberately no * prefers-color-scheme rule. */ :root { --bg:#F4F1EA; --panel:#FFFFFF; --sunk:#E9E4D9; --raise:#FBFAF6; --ink:#23211B; --muted:#66604F; --faint:#736C5D; --rule:#DCD5C6; --rule-strong:#8E8773; --brass:#79610F; --brass-soft:#F3E7C8; --good:#1E6A4C; --good-soft:#DDEBE0; --warn:#AD4408; --warn-soft:#FBE1CE; --bad:#A02A22; --bad-soft:#F8DEDA; --info:#1B5B86; --info-soft:#DBE7F1; --on-brass:#FFF9EC; --on-bad:#FFFFFF; --focus:#79610F; --shadow:0 1px 2px rgba(35,33,27,.07), 0 6px 18px rgba(35,33,27,.06); --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --rail-w:15rem; --top-h:3.4rem; } :root[data-theme="dark"] { --bg:#171511; --panel:#201E19; --sunk:#282520; --raise:#2C2924; --ink:#EAE5DA; --muted:#A79F8E; --faint:#968E7C; --rule:#3A362E; --rule-strong:#7A7463; --brass:#DDBB5C; --brass-soft:#372D14; --good:#6DC49B; --good-soft:#162C22; --warn:#F08E4E; --warn-soft:#341F12; --bad:#EF8B7E; --bad-soft:#351C19; --info:#7FB0DE; --info-soft:#162735; --on-brass:#241C08; --on-bad:#2A1512; --focus:#DDBB5C; --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28); } /* ---------- Bootstrap mapped onto the tokens (both themes) ---------- */ :root, :root[data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-body-font-family: var(--sans); --bs-body-font-size: .94rem; --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--faint); --bs-secondary-bg: var(--sunk); --bs-tertiary-bg: var(--raise); --bs-border-color: var(--rule); --bs-border-color-translucent: var(--rule); --bs-link-color: var(--info); --bs-link-color-rgb: 27,91,134; --bs-link-hover-color: var(--info); --bs-heading-color: var(--ink); --bs-primary: var(--brass); --bs-focus-ring-color: color-mix(in srgb, var(--focus) 35%, transparent); --bs-font-monospace: var(--mono); } body { background: var(--bg); color: var(--ink); line-height: 1.5; } a { color: var(--info); } :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 3px; } .mono, .num, td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; } td.n, th.n { text-align: right; } .text-muted, .form-text { color: var(--muted) !important; } .text-faint { color: var(--faint) !important; } .text-good { color: var(--good) !important; } .text-bad { color: var(--bad) !important; } .text-warn { color: var(--warn) !important; } .text-info { color: var(--info) !important; } .text-brass { color: var(--brass) !important; } .bg-panel { background: var(--panel) !important; } .bg-sunk { background: var(--sunk) !important; } /* cards */ .card { --bs-card-bg: var(--panel); --bs-card-border-color: var(--rule); --bs-card-border-radius: 11px; --bs-card-cap-bg: transparent; --bs-card-color: var(--ink); margin-bottom: .95rem; } .card-header { border-bottom-color: var(--rule); padding: .75rem 1rem .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .card-title, .card-header h2 { font-family: var(--serif); font-weight: 700; font-size: 1.06rem; margin: 0; } .card-header h2 { margin-right: auto; } .card-lead { color: var(--muted); font-size: .86rem; margin: .1rem 0 .75rem; max-width: 74ch; } /* buttons: ink primary, brass accent, quiet outline default */ .btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .87rem; --bs-btn-border-radius: 8px; --bs-btn-padding-y: .36rem; --bs-btn-padding-x: .7rem; } .btn-sm { --bs-btn-font-size: .79rem; --bs-btn-padding-y: .18rem; --bs-btn-padding-x: .48rem; } .btn-primary { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-color: var(--bg); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: var(--bg); --bs-btn-active-bg: var(--ink); --bs-btn-active-color: var(--bg); --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink); --bs-btn-disabled-color: var(--bg); } .btn-primary:hover { opacity: .88; } .btn-brass { --bs-btn-bg: var(--brass); --bs-btn-border-color: var(--brass); --bs-btn-color: var(--on-brass); --bs-btn-hover-bg: var(--brass); --bs-btn-hover-border-color: var(--brass); --bs-btn-hover-color: var(--on-brass); --bs-btn-active-bg: var(--brass); --bs-btn-active-color: var(--on-brass); } .btn-brass:hover { opacity: .9; } .btn-light, .btn-outline-secondary { --bs-btn-bg: var(--panel); --bs-btn-border-color: var(--rule-strong); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--sunk); --bs-btn-hover-border-color: var(--rule-strong); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--sunk); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--rule-strong); } .btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-border-color: var(--bad); --bs-btn-bg: var(--panel); --bs-btn-hover-bg: var(--bad); --bs-btn-hover-border-color: var(--bad); --bs-btn-hover-color: var(--on-bad); } .btn-link { --bs-btn-color: var(--info); --bs-btn-hover-color: var(--info); } /* forms */ .form-control, .form-select { background-color: var(--raise); border-color: var(--rule-strong); color: var(--ink); border-radius: 7px; font-size: .9rem; } .form-control:focus, .form-select:focus { background-color: var(--raise); color: var(--ink); border-color: var(--brass); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brass) 25%, transparent); } .form-control::placeholder { color: var(--faint); } .form-label { font-weight: 600; font-size: .79rem; color: var(--muted); margin-bottom: .2rem; } .form-check-input { accent-color: var(--brass); border-color: var(--rule-strong); background-color: var(--raise); } .form-check-input:checked { background-color: var(--brass); border-color: var(--brass); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--bad); } .invalid-feedback { color: var(--bad); } .input-group-text { background: var(--sunk); border-color: var(--rule-strong); color: var(--muted); } /* tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--rule); --bs-table-hover-bg: var(--raise); --bs-table-hover-color: var(--ink); --bs-table-striped-bg: var(--raise); font-size: .86rem; margin-bottom: 0; } .table > :not(caption) > * > * { padding: .42rem .55rem; } .table thead th { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; border-bottom-width: 1.5px; white-space: nowrap; } .table tr.tot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: none; } .table tr.grp td { background: var(--sunk); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .table tr.dim td { opacity: .55; } /* alerts, dropdowns, modals, nav tabs */ .alert { border-radius: 9px; font-size: .9rem; } .alert-success { --bs-alert-bg: var(--good-soft); --bs-alert-color: var(--good); --bs-alert-border-color: transparent; } .alert-danger { --bs-alert-bg: var(--bad-soft); --bs-alert-color: var(--bad); --bs-alert-border-color: transparent; } .alert-warning { --bs-alert-bg: var(--warn-soft); --bs-alert-color: var(--warn); --bs-alert-border-color: transparent; } .alert-info { --bs-alert-bg: var(--info-soft); --bs-alert-color: var(--info); --bs-alert-border-color: transparent; } .dropdown-menu { --bs-dropdown-bg: var(--panel); --bs-dropdown-color: var(--ink); --bs-dropdown-border-color: var(--rule); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--sunk); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-divider-bg: var(--rule); --bs-dropdown-header-color: var(--faint); box-shadow: var(--shadow); } .modal { --bs-modal-bg: var(--panel); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--rule); --bs-modal-header-border-color: var(--rule); --bs-modal-footer-border-color: var(--rule); } .modal-title { font-family: var(--serif); font-weight: 700; } .nav-tabs { --bs-nav-tabs-border-color: var(--rule); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: transparent; gap: .2rem; margin: .6rem 0 1rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; } .nav-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap; padding: .55rem .85rem; } .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--brass); } .nav-tabs .count { font-size: .72rem; background: var(--sunk); border-radius: 10px; padding: 0 .4rem; margin-left: .3rem; font-family: var(--mono); } .pagination { --bs-pagination-bg: var(--panel); --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--rule); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-active-color: var(--bg); --bs-pagination-hover-bg: var(--sunk); --bs-pagination-hover-color: var(--ink); } .list-group { --bs-list-group-bg: var(--panel); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--rule); } .progress { --bs-progress-bg: var(--sunk); --bs-progress-bar-bg: var(--brass); } /* ---------- the shell: top bar, rail, main ---------- */ .bw-top { display: flex; align-items: center; gap: .9rem; padding: .55rem 1rem; min-height: var(--top-h); background: var(--panel); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 1030; } .bw-mark { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.12rem; letter-spacing: -.005em; color: var(--ink); text-decoration: none; flex: none; font-family: var(--serif); } .bw-mark .bm { color: var(--brass); } .bw-mark .sub { font-family: var(--sans); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--rule); padding-left: .5rem; margin-left: .1rem; } .bw-tools { margin-left: auto; display: flex; align-items: center; gap: .5rem; min-width: 0; } .bw-tools .form-select { width: auto; max-width: 15rem; padding-top: .28rem; padding-bottom: .28rem; font-size: .85rem; } .bw-who { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); } .bw-who b { color: var(--ink); font-weight: 600; } .bw-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; } .bw-rail { border-right: 1px solid var(--rule); padding: .8rem .6rem; background: var(--bg); position: sticky; top: var(--top-h); max-height: calc(100vh - var(--top-h)); overflow: auto; } .bw-rail h3 { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: .9rem .5rem .35rem; font-weight: 700; } .bw-rail h3:first-child { margin-top: 0; } .bw-rail a, .bw-rail span.soon { display: flex; width: 100%; align-items: center; gap: .55rem; border: 1px solid transparent; border-radius: 8px; padding: .38rem .55rem; text-decoration: none; font-weight: 500; color: var(--muted); font-size: .88rem; } .bw-rail a:hover { background: var(--sunk); color: var(--ink); } .bw-rail a.active { background: var(--panel); border-color: var(--rule); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); } .bw-rail .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--faint); flex: none; } .bw-rail a.active .dot { background: var(--brass); } .bw-rail span.soon { opacity: .5; cursor: default; } .bw-rail span.soon::after { content: "soon"; margin-left: auto; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; } .bw-main { padding: 1.1rem 1.25rem 4rem; min-width: 0; } @media (max-width: 860px) { .bw-top { flex-wrap: wrap; gap: .45rem .7rem; position: static; } .bw-tools { width: 100%; margin-left: 0; flex-wrap: wrap; } .bw-tools .form-select { flex: 1 1 9rem; max-width: none; } .bw-shell { grid-template-columns: 1fr; } .bw-rail { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--rule); display: flex; gap: .35rem; overflow-x: auto; padding: .5rem .75rem; } .bw-rail h3, .bw-rail span.soon { display: none; } .bw-rail a { width: auto; white-space: nowrap; } .bw-main { padding: 1rem .9rem 4rem; } } @media (max-width: 560px) { .bw-mark .sub { display: none; } } /* ---------- page furniture ---------- */ .bw-phead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .2rem; } .bw-phead h1 { font-family: var(--serif); font-size: 1.58rem; font-weight: 700; letter-spacing: -.008em; margin: 0; } .bw-phead .acts { margin-left: auto; display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; } .bw-kicker { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); font-weight: 700; width: 100%; } .bw-lead { color: var(--muted); max-width: 70ch; margin: .2rem 0 1rem; } .bw-sub { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; margin: 1.1rem 0 .4rem; } .bw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .95rem; align-items: start; } .bw-cols > .card { margin-bottom: 0; } /* KPI strip */ .bw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; margin-bottom: .95rem; } .bw-kpi { background: var(--panel); padding: .62rem .85rem .72rem; } .bw-kpi .k { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; } .bw-kpi .v { font-family: var(--mono); font-weight: 600; font-size: 1.3rem; letter-spacing: -.025em; margin-top: .12rem; } .bw-kpi .s { font-size: .77rem; color: var(--muted); margin-top: .02rem; } .bw-kpi .v.g { color: var(--good); } .bw-kpi .v.b { color: var(--bad); } .bw-kpi .v.w { color: var(--warn); } /* chips */ .bw-chip { display: inline-flex; align-items: center; gap: .28rem; font-size: .71rem; font-weight: 700; border-radius: 5px; padding: .08rem .45rem; white-space: nowrap; } .bw-chip.g { background: var(--good-soft); color: var(--good); } .bw-chip.w { background: var(--warn-soft); color: var(--warn); } .bw-chip.b { background: var(--bad-soft); color: var(--bad); } .bw-chip.i { background: var(--info-soft); color: var(--info); } .bw-chip.n { background: var(--sunk); color: var(--muted); } .bw-chip.a { background: var(--brass-soft); color: var(--brass); } /* meters and bars */ .bw-meter { height: .48rem; background: var(--sunk); border-radius: 3px; overflow: hidden; display: block; min-width: 3rem; } .bw-meter i { display: block; height: 100%; background: var(--brass); } .bw-meter i.g { background: var(--good); } .bw-meter i.b { background: var(--bad); } .bw-meter i.w { background: var(--warn); } .bw-meter i.i { background: var(--info); } .bw-barrow { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 7.5rem; gap: .7rem; align-items: center; padding: .2rem 0; font-size: .85rem; } .bw-barrow .bv { text-align: right; font-family: var(--mono); font-size: .81rem; } @media (max-width: 560px) { .bw-barrow { grid-template-columns: 1fr 6.5rem; } .bw-barrow .bw-meter { grid-column: 1 / -1; grid-row: 2; } } .bw-stack { display: flex; height: 1.5rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--rule); } .bw-stack i { display: block; height: 100%; } .bw-legend { display: flex; flex-wrap: wrap; gap: .3rem .85rem; margin-top: .45rem; font-size: .77rem; color: var(--muted); } .bw-legend span { display: inline-flex; align-items: center; gap: .3rem; } .bw-legend b { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; } /* verdict stamp (Land Check) */ .bw-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .95rem; } .bw-verdict h2 { font-family: var(--serif); font-size: 1.28rem; font-weight: 700; } .bw-verdict p { color: var(--muted); max-width: 62ch; } .bw-stamp { --c: var(--muted); width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 4px double var(--c); color: var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(-8deg); padding: .6rem; font-weight: 800; line-height: 1.05; } .bw-stamp .big { font-size: 1.1rem; letter-spacing: .02em; } .bw-stamp .small { font-size: .62rem; font-weight: 600; margin-top: .3rem; opacity: .9; } .bw-stamp.no { --c: var(--bad); } .bw-stamp.hold { --c: var(--warn); } .bw-stamp.check { --c: var(--info); } .bw-stamp.go { --c: var(--good); } @media (max-width: 560px) { .bw-verdict { grid-template-columns: 1fr; } } /* definition list for detail cards */ .bw-dl { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .3rem 1rem; margin: 0; font-size: .88rem; } .bw-dl dt { color: var(--muted); font-weight: 600; font-size: .8rem; } .bw-dl dd { margin: 0; } /* empty state */ .bw-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; } .bw-empty .bi { font-size: 1.8rem; color: var(--faint); display: block; margin-bottom: .4rem; } /* filter bar */ .bw-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; } .bw-filter .form-select, .bw-filter .form-control { width: auto; min-width: 9rem; } /* sign-in */ .bw-auth { max-width: 26rem; margin: 9vh auto 2rem; padding: 0 1rem; } .bw-auth .bw-mark { justify-content: center; font-size: 1.5rem; margin-bottom: .2rem; } .bw-auth .card { box-shadow: var(--shadow); } /* print: the page, not the chrome */ @media print { .bw-top, .bw-rail, .no-print { display: none !important; } .bw-shell { display: block; } .bw-main { padding: 0; } body { background: #fff; } }