/* =========================================================================== SureEstate Panorama — hand-written CSS. No build step: shared hosting has no Node, so this file is the whole of the styling and is meant to be read. The register is neutral and typographic. Colour carries meaning and nothing else: a plot's status, a lease's state, money that is overdue. Everything structural is white, near-white and a hairline, so the eye goes to the words and the numbers rather than to the furniture. Layout: 1. Tokens (light, then dark) 2. Base and typography 3. Shell — sidebar, topbar, content 4. Blocks — cards, stats, panels 5. Tables 6. Forms and buttons 7. Status — pills, badges, flashes 8. Boards — pipeline and occupancy 9. Panorama map 10. Public site and the installer 11. Responsive 12. Print =========================================================================== */ /* --------------------------------------------------------------- 1. Tokens */ :root { /* Surfaces. The page is faintly grey so white cards separate without borders. */ --bg: #F7F7F8; --surface: #FFFFFF; --surface-2: #FAFAFA; --zebra: #FAFAFA; /* Ink */ --text: #18181B; --text-strong: #09090B; --muted: #71717A; --faint: #A1A1AA; /* Lines — hairlines only, never a frame */ --line: #E4E4E7; --line-strong: #D4D4D8; /* One accent. Everything interactive is this colour and nothing else is. */ --accent: #0F766E; --accent-hover: #0D625B; --accent-tint: #F0FDFA; --accent-ink: #115E59; /* Status. Used as small marks, not as fields of colour. */ --green: #15803D; --green-tint: #F0FDF4; --amber: #B45309; --amber-tint: #FFFBEB; --orange: #C2410C; --orange-tint: #FFF7ED; --red: #DC2626; --red-tint: #FEF2F2; --blue: #1D4ED8; --blue-tint: #EFF6FF; --purple: #6D28D9; --purple-tint: #F5F3FF; --grey: #71717A; --grey-tint: #F4F4F5; --slate: #475569; --slate-tint: #F1F5F9; /* Kept for the brand mark and anything still asking for them by name. */ --navy: #18181B; --navy-dark: #09090B; --teal: var(--accent); /* The navigation rail is tokenised so a theme can darken it on its own. */ --rail-bg: var(--surface); --rail-line: var(--line); --rail-text: var(--text); --rail-strong: var(--text-strong); --rail-muted: var(--faint); --rail-hover: var(--surface-2); --rail-active-bg: var(--accent-tint); --rail-active-text: var(--accent-ink); --radius: 10px; --radius-sm: 6px; --shadow: none; --sidebar: 248px; } /* ------------------------------------------------------------- 1b. Themes Three looks. A theme only moves tokens; not one rule below knows which is on. The company sets a house look, a person may override it for themselves, and the choice arrives as data-theme on . Each theme also names its dark accent (--accent-d and friends), because in dark mode the surfaces converge to near-black across all three and only the accent really distinguishes them. ------------------------------------------------------------------------ */ :root, [data-theme="neutral"] { --accent-d: #2DD4BF; --accent-hover-d: #5EEAD4; --accent-tint-d: #0B2E2B; --accent-ink-d: #99F6E4; } /* Classic — the navy and teal the platform launched with, softened. */ [data-theme="classic"] { --bg: #F4F6F9; --surface: #FFFFFF; --surface-2: #F7F9FC; --zebra: #F7F9FC; --text: #1E293B; --text-strong: #0F1F35; --muted: #64748B; --faint: #94A3B8; --line: #E2E8F0; --line-strong: #CBD5E1; --accent: #0F766E; --accent-hover: #0B5C55; --accent-tint: #ECFDF5; --accent-ink: #115E59; --accent-d: #2DD4BF; --accent-hover-d: #5EEAD4; --accent-tint-d: #0B2E2B; --accent-ink-d: #99F6E4; /* The navy rail, which is what people remember about this look. */ --rail-bg: #1F3A5F; --rail-line: #1F3A5F; --rail-text: #D7E3F1; --rail-strong: #FFFFFF; --rail-muted: #8FA8C6; --rail-hover: rgba(255,255,255,.09); --rail-active-bg: #0F766E; --rail-active-text: #FFFFFF; } /* Contrast — a near-black rail against a white working area. */ [data-theme="contrast"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F7F8; --zebra: #F7F7F8; --text: #18181B; --text-strong: #000000; --muted: #52525B; --faint: #A1A1AA; --line: #E4E4E7; --line-strong: #D4D4D8; --accent: #0D9488; --accent-hover: #0F766E; --accent-tint: #ECFDF5; --accent-ink: #0F766E; --accent-d: #2DD4BF; --accent-hover-d: #5EEAD4; --accent-tint-d: #0B2E2B; --accent-ink-d: #99F6E4; --rail-bg: #0A0A0B; --rail-line: #0A0A0B; --rail-text: #A1A1AA; --rail-strong: #FAFAFA; --rail-muted: #52525B; --rail-hover: rgba(255,255,255,.07); --rail-active-bg: rgba(255,255,255,.12); --rail-active-text: #FFFFFF; } /* ---------------------------------------------------------- 1c. Dark mode Two selectors, one body. A person who chose dark gets it always; a person who left the choice alone gets whatever the device says. CSS has no way to say "this selector OR that media query" in one rule, so the body is written twice on purpose rather than by accident. ------------------------------------------------------------------------ */ [data-scheme="dark"] { --bg: #0A0A0B; --surface: #151517; --surface-2: #1B1B1E; --zebra: #1B1B1E; --text: #E4E4E7; --text-strong: #FAFAFA; --muted: #A1A1AA; --faint: #71717A; --line: #27272A; --line-strong: #3F3F46; --accent: var(--accent-d); --accent-hover: var(--accent-hover-d); --accent-tint: var(--accent-tint-d); --accent-ink: var(--accent-ink-d); --green: #4ADE80; --green-tint: #0C2717; --amber: #FBBF24; --amber-tint: #2A1D05; --orange: #FB923C; --orange-tint: #2A1608; --red: #F87171; --red-tint: #2A1214; --blue: #60A5FA; --blue-tint: #0C1A33; --purple: #A78BFA; --purple-tint: #1B1338; --grey: #A1A1AA; --grey-tint: #1F1F23; --slate: #94A3B8; --slate-tint: #17202B; --navy: #FAFAFA; --navy-dark: #FFFFFF; --rail-bg: #0F0F11; --rail-line: #27272A; --rail-text: #A1A1AA; --rail-strong: #FAFAFA; --rail-muted: #52525B; --rail-hover: rgba(255,255,255,.06); --rail-active-bg: var(--accent-tint); --rail-active-text: var(--accent-ink); } @media (prefers-color-scheme: dark) { [data-scheme="auto"] { --bg: #0A0A0B; --surface: #151517; --surface-2: #1B1B1E; --zebra: #1B1B1E; --text: #E4E4E7; --text-strong: #FAFAFA; --muted: #A1A1AA; --faint: #71717A; --line: #27272A; --line-strong: #3F3F46; --accent: var(--accent-d); --accent-hover: var(--accent-hover-d); --accent-tint: var(--accent-tint-d); --accent-ink: var(--accent-ink-d); --green: #4ADE80; --green-tint: #0C2717; --amber: #FBBF24; --amber-tint: #2A1D05; --orange: #FB923C; --orange-tint: #2A1608; --red: #F87171; --red-tint: #2A1214; --blue: #60A5FA; --blue-tint: #0C1A33; --purple: #A78BFA; --purple-tint: #1B1338; --grey: #A1A1AA; --grey-tint: #1F1F23; --slate: #94A3B8; --slate-tint: #17202B; --navy: #FAFAFA; --navy-dark: #FFFFFF; --rail-bg: #0F0F11; --rail-line: #27272A; --rail-text: #A1A1AA; --rail-strong: #FAFAFA; --rail-muted: #52525B; --rail-hover: rgba(255,255,255,.06); --rail-active-bg: var(--accent-tint); --rail-active-text: var(--accent-ink); } } /* ------------------------------------------------- 2. Base and typography */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: "cv05" 1; } /* Figures line up in columns; this is a platform about money. */ .num, td.num, th.num, .value, .stat-value, .price, table { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0 0 .5rem; color: var(--text-strong); line-height: 1.25; letter-spacing: -.011em; } h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.018em; } h2 { font-size: 1.05rem; font-weight: 620; } h3 { font-size: .95rem; font-weight: 620; } p { margin: 0 0 .75rem; } .small { font-size: .85rem; } .muted { color: var(--muted); } .mb { margin-bottom: 1rem; } .mt { margin-top: 1rem; } .right { text-align: right; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .85em; color: var(--muted); } .page-head { margin-bottom: 1.25rem; } .page-head h1 { margin-bottom: .15rem; } .page-head p { margin: 0; color: var(--muted); } /* --------------------------------------------------------------- 3. Shell */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar); flex: none; background: var(--rail-bg); border-right: 1px solid var(--rail-line); padding: 1.1rem .7rem 2rem; position: sticky; top: 0; height: 100vh; overflow: auto; } .sidebar .brand { display: block; padding: .1rem .55rem 1.25rem; font-size: 1rem; font-weight: 650; color: var(--rail-strong); letter-spacing: -.015em; } .sidebar .brand:hover { text-decoration: none; } .sidebar .brand small { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 400; color: var(--rail-muted); letter-spacing: 0; } .sidebar a { display: block; padding: .4rem .55rem; margin-bottom: 1px; border-radius: var(--radius-sm); color: var(--rail-text); font-size: .89rem; font-weight: 450; } .sidebar a:hover { background: var(--rail-hover); color: var(--rail-strong); text-decoration: none; } .sidebar a.active { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: 550; } .sidebar .group { margin: 1.35rem 0 .35rem; padding: 0 .55rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--rail-muted); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .88rem; } .topbar .who { color: var(--muted); } .topbar a { color: var(--muted); } .topbar a:hover { color: var(--text-strong); } .content { padding: 1.5rem; flex: 1; } .breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: .6rem; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--text-strong); } /* -------------------------------------------------------------- 4. Blocks */ .card { background: var(--surface); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: 1rem; border: 1px solid var(--line); } .card > h2:first-child, .card > h3:first-child { margin-top: 0; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; } /* A card reporting something that should not be true of this installation — a second company, accounts outside yours. An amber edge, not amber text: `.warn` on its own recolours everything it contains, and the figures inside this card are the point of it. */ .card.warn { color: inherit; border-left: 3px solid var(--amber); } .card.warn > h2:first-child { color: var(--amber); } /* One stray company inside that card, with its counts and its two ways out. */ .stray { padding: .8rem 0; border-top: 1px solid var(--line); } .stray:first-of-type { border-top: 0; padding-top: .2rem; } .stray h3 { margin: 0 0 .35rem; } /* Two separate forms that have to sit side by side: each button posts a different action, so they cannot share one form. */ .row { display: flex; flex-wrap: wrap; align-items: center; } .gap { gap: .6rem; } .grid { display: grid; gap: 1rem; margin-bottom: 1rem; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* A figure and what it means. The number does the talking. */ .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; } .stat .label, .stat-label { font-size: .72rem; font-weight: 550; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .stat .value, .stat-value { display: block; margin-top: .15rem; font-size: 1.65rem; font-weight: 620; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.15; } .stat .sub { font-size: .8rem; color: var(--muted); margin-top: .1rem; } .stat .value.teal, .stat-value.teal { color: var(--accent); } .stat .value.amber, .stat-value.amber { color: var(--amber); } .stat .value.red, .stat-value.red, .stat-value.bad { color: var(--red); } .ok { color: var(--green); } .bad { color: var(--red); } .warn { color: var(--amber); } /* Label and value, side by side */ .kv { width: 100%; border-collapse: collapse; } .kv th, .kv td { padding: .45rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .kv th { width: 40%; font-weight: 500; color: var(--muted); font-size: .86rem; } .kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; } .block-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; } .plain { list-style: none; margin: .4rem 0; padding: 0; } .plain li { padding: .3rem 0; border-bottom: 1px solid var(--line); } .plain li:last-child { border-bottom: 0; } /* -------------------------------------------------------------- 5. Tables */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } thead th { text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } tbody td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-2); } .num, td.num, th.num { text-align: right; } tr.total td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 650; color: var(--text-strong); } /* --------------------------------------------------- 6. Forms and buttons */ label { display: block; font-size: .84rem; font-weight: 550; color: var(--text); margin-bottom: .25rem; } input, select, textarea { width: 100%; padding: .48rem .6rem; font: inherit; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } input::placeholder, textarea::placeholder { color: var(--faint); } input[type="checkbox"], input[type="radio"] { width: auto; } textarea { resize: vertical; } .stack { display: flex; flex-direction: column; gap: .7rem; } .stack label { margin-bottom: 0; } .stack .grid { margin-bottom: 0; gap: .7rem; } .stack button { align-self: flex-start; margin-top: .25rem; } .check { display: flex; align-items: center; gap: .5rem; font-size: .89rem; font-weight: 450; margin-bottom: 0; } .check input { margin: 0; accent-color: var(--accent); } .filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: 1rem; } .btn { display: inline-block; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .45rem .85rem; font-size: .88rem; font-weight: 550; line-height: 1.4; cursor: pointer; background: var(--surface); color: var(--text); border-color: var(--line-strong); } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn-primary, .btn-navy { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover, .btn-navy:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-outline { background: transparent; border-color: var(--line-strong); color: var(--text); } .btn-danger { background: transparent; border-color: var(--red); color: var(--red); } .btn-danger:hover { background: var(--red-tint); } .btn-small { padding: .25rem .55rem; font-size: .8rem; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* -------------------------------------------------------------- 7. Status */ /* Quiet by default: tinted, not filled. A screen of these should still read as a page of text rather than a bag of sweets. */ .pill { display: inline-block; padding: .1rem .45rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 550; white-space: nowrap; background: var(--grey-tint); color: var(--grey); } .pill-green { background: var(--green-tint); color: var(--green); } .pill-amber { background: var(--amber-tint); color: var(--amber); } .pill-orange { background: var(--orange-tint); color: var(--orange); } .pill-blue { background: var(--blue-tint); color: var(--blue); } .pill-red { background: var(--red-tint); color: var(--red); } .pill-purple { background: var(--purple-tint); color: var(--purple); } .pill-grey { background: var(--grey-tint); color: var(--grey); } .pill-slate { background: var(--slate-tint); color: var(--slate); } /* Filled, for the few places a colour is set inline from a status enum. */ .badge { display: inline-block; padding: .08rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #fff; background: var(--grey); } .swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; } .flash { border-left: 3px solid var(--accent); background: var(--accent-tint); color: var(--text); padding: .65rem .85rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; } .flash.error { border-color: var(--red); background: var(--red-tint); } .flash.ok { border-color: var(--green); background: var(--green-tint); } .flash.warn { border-color: var(--amber); background: var(--amber-tint); } /* --------------------------------------------------------------- 8. Boards */ .pipeline { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; } .pipeline-col { flex: 0 0 248px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem; } .pipeline-col.over { border-color: var(--accent); background: var(--accent-tint); } /* The column's colour is a mark, not a field: a dot beside the name. */ .pipeline-col header { display: flex; align-items: center; gap: .4rem; padding: .1rem .15rem .6rem; font-size: .8rem; font-weight: 600; color: var(--text-strong); letter-spacing: .01em; } .pipeline-col header .dot { width: .5rem; height: .5rem; border-radius: 999px; flex: none; } .pipeline-col header .count { margin-left: auto; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0 .4rem; font-size: .73rem; font-weight: 600; } .deal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .6rem; margin-bottom: .45rem; cursor: grab; font-size: .86rem; } .deal:hover { border-color: var(--line-strong); } .deal:active { cursor: grabbing; } .deal:last-child { margin-bottom: 0; } .deal a { color: var(--text-strong); font-weight: 550; } .deal .badge { font-size: .66rem; } /* A .deal that is itself a link — the occupancy board, where every tile opens something. Block, so the whole card is the target rather than a line of text inside it, and pointer rather than grab: these are not draggable. */ a.deal-link { display: block; cursor: pointer; text-decoration: none; color: inherit; } a.deal-link:hover { border-color: var(--accent); background: var(--surface-2, var(--surface)); } a.deal-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a.deal-link strong { color: var(--text-strong); } .strong { font-weight: 550; color: var(--text-strong); } /* ------------------------------------------------------------ 9. Panorama */ .panorama { display: grid; grid-template-columns: 240px 1fr 320px; gap: 1rem; align-items: start; } .map-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; overflow: auto; } .plot-shape { cursor: pointer; transition: opacity .12s; } .plot-shape:hover { opacity: .78; } .plot-shape.selected { stroke: var(--text-strong); stroke-width: 2.5; } .plot-label { font-size: 9px; fill: #fff; pointer-events: none; font-weight: 600; } .legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .8rem; color: var(--muted); } .price { font-size: 1.2rem; font-weight: 620; color: var(--text-strong); letter-spacing: -.015em; } /* ------------------------------------------- 10. Public site and installer */ .public-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); } .hero { padding: 2.5rem 1.5rem; text-align: center; background: var(--surface); border-bottom: 1px solid var(--line); } .hero h1 { font-size: 1.9rem; } .estate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .wizard { max-width: 780px; margin: 2.5rem auto; padding: 0 1.25rem; } .wizard .card { padding: 1.5rem 1.6rem; } .steps { display: flex; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; flex-wrap: wrap; } .steps li { flex: 1; min-width: 110px; font-size: .76rem; font-weight: 500; color: var(--faint); border-top: 2px solid var(--line); padding-top: .45rem; } .steps li.done { border-color: var(--green); color: var(--green); } .steps li.current { border-color: var(--accent); color: var(--accent-ink); font-weight: 650; } /* Names a few views still use for a colour directly. */ .teal { color: var(--accent); } .amber { color: var(--amber); } .red { color: var(--red); } /* ------------------------------------------------------ 10b. Administration */ /* Sub-navigation inside a module. A row of links, underlined where you are, rather than a second sidebar — the settings screens are six pages, not a section of their own. */ .tabs { display: flex; flex-wrap: wrap; gap: .15rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); } .tabs a { padding: .45rem .8rem; font-size: .88rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--text-strong); background: var(--surface-2); } .tabs a.active { color: var(--text-strong); font-weight: 600; border-bottom-color: var(--accent); } /* The permission grid. Two columns on a wide screen, because 35 permissions in one column is a page nobody scrolls to the bottom of. */ .matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; } .matrix .check { padding: .3rem 0; align-items: flex-start; } .matrix .check .mono { display: block; font-size: .72rem; } /* Search in the top bar. Deliberately unobtrusive until used. */ .searchbox { flex: 1 1 auto; max-width: 22rem; margin: 0 1rem; } .searchbox input { width: 100%; margin: 0; padding: .35rem .6rem; font-size: .85rem; background: var(--surface-2); } /* Disclosure used for a detail nobody needs until they do: an audit entry's before-and-after values, a block's dimensions. */ details summary { cursor: pointer; padding: .15rem 0; } details summary:hover { color: var(--text-strong); } details[open] summary { margin-bottom: .4rem; font-weight: 550; } details .stack { margin: .3rem 0 .6rem; } .result { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--line); } .result:last-child { border-bottom: 0; } /* ---------------------------------------------------------- 11. Responsive */ @media (max-width: 1100px) { .panorama { grid-template-columns: 1fr; } .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .app { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--rail-line); padding: .75rem; display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; } .sidebar .brand { width: 100%; padding-bottom: .6rem; } .sidebar a { padding: .3rem .55rem; font-size: .85rem; } /* Section headings become separators rather than stacked labels. */ .sidebar .group { margin: .35rem .2rem; padding: 0; width: 100%; border-top: 1px solid var(--rail-line); padding-top: .5rem; } .content, .topbar { padding: 1rem; } .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } /* Wide tables scroll rather than squeezing every column to nothing. */ .card > table, .panel > table { display: block; overflow-x: auto; white-space: nowrap; } .pipeline-col { flex: 0 0 82vw; } .filters { flex-direction: column; align-items: stretch; } /* One column of permissions on a phone, and the search box on its own line rather than squeezed between the page title and the sign-out button. */ .matrix { grid-template-columns: 1fr; } .searchbox { order: 3; flex-basis: 100%; max-width: none; margin: .6rem 0 0; } .tabs { overflow-x: auto; flex-wrap: nowrap; } .tabs a { white-space: nowrap; } } @media (max-width: 520px) { body { font-size: 14px; } h1 { font-size: 1.3rem; } .stat .value, .stat-value { font-size: 1.4rem; } .card { padding: 1rem; border-radius: var(--radius-sm); } } /* --------------------------------------------------------------- 12. Print Invoices, receipts, owner statements and the rent roll are handed to people. On paper the navigation is noise and the colour is a waste of toner. */ @media print { :root { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --zebra: #FFFFFF; --text: #000000; --text-strong: #000000; --muted: #333333; --faint: #555555; --line: #BBBBBB; --line-strong: #777777; } body { background: #fff; color: #000; font-size: 11pt; } .sidebar, .topbar, .breadcrumb, .filters, .btn, form, .flash, .steps, .tabs, .searchbox { display: none !important; } .app { display: block; } .content { padding: 0; } .card, .panel, .stat { border: 0; padding: 0; margin: 0 0 1rem; break-inside: avoid; } table { font-size: 10pt; } thead { display: table-header-group; } /* repeat headings across pages */ tr { break-inside: avoid; } tbody tr:hover td { background: none; } /* A tinted label prints as grey mush; outline it instead. */ .pill, .badge { background: none !important; color: #000 !important; border: 1px solid #777; } a { color: #000; text-decoration: none; } /* Where a link's destination matters on paper, show it. */ .content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } }