/* ============================================================================ Hometime UI — design layer over Bootstrap 4.6 ---------------------------------------------------------------------------- Everything is scoped to `.ht-ui` (set on via header_data['ui_theme']), so this file is completely inert on pages that haven't opted in. Rollout: 1. per-controller -> $this->header_data['ui_theme'] = 'ht-ui'; 2. site-wide -> default the flag on in the BaseController. NO markup changes are required — this restyles the Bootstrap 4 classes the app already uses. It is also the migration path to Bootstrap 5: BS5 is built on CSS custom properties, so these tokens carry over rather than being thrown away. Tune the palette/scale in one place: the :root block below. ========================================================================== */ .ht-ui { /* Neutrals — a true slate ramp; Bootstrap's greys read washed-out and flat. */ --ht-bg: #f6f7f9; --ht-surface: #ffffff; --ht-line: #e5e8ec; /* hairline borders */ --ht-line-soft: #eef1f4; --ht-ink: #1c2733; /* body text */ --ht-ink-soft: #5a6875; /* secondary text */ --ht-ink-faint: #8a95a1; /* Brand — Hometime green, with the existing blue kept as the data accent. */ --ht-brand: #079245; --ht-brand-ink: #05612e; --ht-brand-bg: rgba(7,146,69,.10); --ht-accent: #2a78d6; --ht-accent-ink:#1a5aa8; --ht-accent-bg: rgba(42,120,214,.10); --ht-warn: #b7791f; --ht-warn-bg: rgba(237,161,0,.14); --ht-danger: #c0392f; --ht-danger-bg: rgba(227,73,72,.11); /* Shape + depth — soft radii and layered shadows instead of hard 1px boxes. */ --ht-r-sm: 6px; --ht-r: 10px; --ht-r-lg: 14px; --ht-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --ht-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07); --ht-shadow-lg: 0 8px 28px rgba(16,24,40,.13), 0 2px 6px rgba(16,24,40,.06); background: var(--ht-bg); color: var(--ht-ink); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Type ---------------------------------------------------------------- */ /* Deliberately NO `color` here: headings must INHERIT so they stay readable on dark surfaces (hero overlays, dark cards, the staff navbar). Setting an ink colour turned the white "For Rent" hero heading near-black. Body colour is set once on .ht-ui above and cascades. Same lesson as the nav-link/button rules: a design layer sets colour on the SURFACE, not on every element. */ .ht-ui h1, .ht-ui h2, .ht-ui h3, .ht-ui h4, .ht-ui h5 { font-weight: 700; letter-spacing: -.012em; } .ht-ui .text-muted { color: var(--ht-ink-soft) !important; } /* ...but not on a dark surface, where an ink-grey would be near-invisible. The app has 105 text-white contexts, 19 .table-dark and 2 dark navbars. */ .ht-ui .bg-dark .text-muted, .ht-ui .table-dark .text-muted, .ht-ui .navbar-dark .text-muted, .ht-ui .text-white .text-muted, .ht-ui [data-bs-theme="dark"] .text-muted { color: rgba(255,255,255,.72) !important; } .ht-ui .small, .ht-ui small { font-size: 12.5px; } /* The exclusions matter. This rule's specificity (0,2,1) beats Bootstrap's own .navbar-nav .nav-link (0,2,0) and .dropdown-item, so without them the body link colour hijacks navigation — which is what put dark-blue text on the black staff bar. Buttons are excluded for the same reason (blue text on a green button). */ .ht-ui a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.list-group-item) { color: var(--ht-accent-ink); text-decoration: none; } .ht-ui a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.list-group-item):hover { color: var(--ht-accent); text-decoration: underline; } .ht-ui a.btn:hover { text-decoration: none; } /* ---- Staff navigation bar ------------------------------------------------ */ /* Was flat `bg-dark` (near-black) with low-contrast links. Deep slate reads as a deliberate chrome rather than a black band, and gives the icons room to breathe; links go to near-solid white with a pill hover, and the Hometime green marks the page you're on. Tuned for contrast: #fff on #16202b is ~15:1, the resting rgba(255,255,255,.86) ~12:1 — both well past WCAG AA. */ .ht-ui .navbar.bg-dark { background: #16202b !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07), 0 1px 3px rgba(16,24,40,.18); padding-top: .4rem; padding-bottom: .4rem; } .ht-ui .navbar-dark .navbar-brand { color: #fff; font-weight: 700; letter-spacing: -.01em; } .ht-ui .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.86); border-radius: var(--ht-r-sm); padding: .34rem .6rem; margin: 0 1px; transition: background-color .13s ease, color .13s ease; } .ht-ui .navbar-dark .navbar-nav .nav-link:hover, .ht-ui .navbar-dark .navbar-nav .nav-link:focus { color: #fff; background: rgba(255,255,255,.11); } .ht-ui .navbar-dark .navbar-nav .nav-link.active, .ht-ui .navbar-dark .navbar-nav .show > .nav-link { color: #fff; background: rgba(27,175,122,.26); /* brand green, tinted for a dark surface */ box-shadow: inset 0 0 0 1px rgba(27,175,122,.45); } .ht-ui .navbar-dark .navbar-nav .nav-link i { opacity: .85; } .ht-ui .navbar-dark .navbar-nav .nav-link:hover i { opacity: 1; } /* Public navbar sits on a light surface — keep its links in the ink ramp. */ .ht-ui .navbar-light .navbar-nav .nav-link { color: var(--ht-ink-soft); border-radius: var(--ht-r-sm); padding: .34rem .6rem; } .ht-ui .navbar-light .navbar-nav .nav-link:hover { color: var(--ht-ink); background: rgba(16,24,40,.05); } .ht-ui .navbar-light .navbar-brand { color: var(--ht-ink); font-weight: 700; } /* ---- Surfaces ------------------------------------------------------------ */ .ht-ui .card, .ht-ui .border, .ht-ui .border-top, .ht-ui .border-bottom { border-color: var(--ht-line) !important; } .ht-ui .card { border-radius: var(--ht-r); box-shadow: var(--ht-shadow-sm); } .ht-ui .rounded { border-radius: var(--ht-r) !important; } .ht-ui .bg-white { background: var(--ht-surface) !important; } /* ---- Buttons ------------------------------------------------------------- */ .ht-ui .btn { border-radius: var(--ht-r-sm); font-weight: 600; letter-spacing: .1px; padding: .42rem .9rem; transition: box-shadow .14s ease, transform .14s ease, background-color .14s ease, border-color .14s ease; } .ht-ui .btn:focus, .ht-ui .btn.focus { box-shadow: 0 0 0 3px var(--ht-accent-bg); } .ht-ui .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--ht-shadow-sm); } .ht-ui .btn:not(:disabled):active { transform: translateY(0); } .ht-ui .btn-sm { padding: .26rem .62rem; font-size: 12.5px; border-radius: var(--ht-r-sm); } .ht-ui .btn-success { background: var(--ht-brand); border-color: var(--ht-brand); } .ht-ui .btn-success:hover { background: var(--ht-brand-ink); border-color: var(--ht-brand-ink); } .ht-ui .btn-primary { background: var(--ht-accent); border-color: var(--ht-accent); } .ht-ui .btn-primary:hover { background: var(--ht-accent-ink); border-color: var(--ht-accent-ink); } /* Outline buttons: tinted rather than hard-bordered — far less visual noise in dense toolbars. */ .ht-ui .btn-outline-primary, .ht-ui .btn-outline-secondary, .ht-ui .btn-outline-info, .ht-ui .btn-outline-danger { background: var(--ht-surface); border-color: var(--ht-line); color: var(--ht-ink-soft); } .ht-ui .btn-outline-primary:hover, .ht-ui .btn-outline-info:hover { background: var(--ht-accent-bg); border-color: var(--ht-accent); color: var(--ht-accent-ink); } .ht-ui .btn-outline-secondary:hover { background: #eef1f4; border-color: #cfd6de; color: var(--ht-ink); } .ht-ui .btn-outline-danger:hover { background: var(--ht-danger-bg); border-color: var(--ht-danger); color: var(--ht-danger); } /* ---- Badges — soft tints, not saturated fills ---------------------------- */ /* The single biggest moderniser here: this UI carries ~56 badges, and solid blocks of colour are what makes a Bootstrap page read as "2016 admin panel". */ .ht-ui .badge { border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: .1px; padding: .32em .7em; vertical-align: 1px; } .ht-ui .badge-success { background: var(--ht-brand-bg); color: var(--ht-brand-ink); } .ht-ui .badge-primary { background: var(--ht-accent-bg); color: var(--ht-accent-ink); } .ht-ui .badge-info { background: var(--ht-accent-bg); color: var(--ht-accent-ink); } .ht-ui .badge-warning { background: var(--ht-warn-bg); color: var(--ht-warn); } .ht-ui .badge-danger { background: var(--ht-danger-bg); color: var(--ht-danger); } .ht-ui .badge-secondary { background: #eceff3; color: var(--ht-ink-soft); } .ht-ui .badge-light { background: var(--ht-surface); color: var(--ht-ink-soft); border: 1px solid var(--ht-line); } .ht-ui .badge-dark { background: #2b3846; color: #fff; } /* ---- Tables -------------------------------------------------------------- */ /* :not(.table-dark) throughout — the app has 19 .table-dark and 7 .thead-dark, and these rules outrank Bootstrap's (0,2,0 vs 0,1,0), which would paint dark ink on a dark table. Same lesson as the headings/nav-links: never colour past a variant. */ .ht-ui .table:not(.table-dark) { color: var(--ht-ink); } .ht-ui .table:not(.table-dark) thead:not(.thead-dark):not(.table-dark) th { border-bottom: 1px solid var(--ht-line); border-top: 0; color: var(--ht-ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-bottom: .45rem; } .ht-ui .table td, .ht-ui .table th { border-top-color: var(--ht-line-soft); } /* Zebra striping fights the soft-surface look; a hairline rule is enough. */ .ht-ui .table-striped tbody tr:nth-of-type(odd) { background: transparent; } .ht-ui .table-striped tbody tr:hover { background: #f7f9fb; } /* Bootstrap 5 paints striping/hover on the CELLS via --bs-table-*-bg rather than on the row, so the row-level rules above don't reach it. Neutralise the vars. */ body.ht-bs5 .ht-ui .table, .ht-ui.ht-bs5 .table { --bs-table-striped-bg: transparent; --bs-table-hover-bg: #f7f9fb; --bs-table-border-color: var(--ht-line-soft); } body.ht-bs5 .ht-ui .table > :not(caption) > * > *, .ht-ui.ht-bs5 .table > :not(caption) > * > * { border-bottom-color: var(--ht-line-soft); } body.ht-bs5 .ht-ui .table > thead > tr > th, .ht-ui.ht-bs5 .table > thead > tr > th { border-bottom-color: var(--ht-line); } /* ---- Forms --------------------------------------------------------------- */ .ht-ui .form-control, .ht-ui .custom-select { border-radius: var(--ht-r-sm); border-color: #d7dde4; color: var(--ht-ink); transition: border-color .14s ease, box-shadow .14s ease; } .ht-ui .form-control:focus, .ht-ui .custom-select:focus { border-color: var(--ht-accent); box-shadow: 0 0 0 3px var(--ht-accent-bg); } .ht-ui .form-control::placeholder { color: var(--ht-ink-faint); } .ht-ui .input-group-text { background: #f4f6f8; border-color: #d7dde4; color: var(--ht-ink-soft); } .ht-ui .input-group > .input-group-prepend > .input-group-text { border-radius: var(--ht-r-sm) 0 0 var(--ht-r-sm); } .ht-ui .input-group > .input-group-append > .input-group-text { border-radius: 0 var(--ht-r-sm) var(--ht-r-sm) 0; } /* ---- Mobile-first: stop iOS auto-zoom on focus --------------------------- */ /* Safari on iOS zooms the whole page when a focused field's text is under 16px, and does NOT zoom back out — the user is left stranded mid-form. Bootstrap's .form-control-sm (and this app's dense staff forms) sit at ~12.5–14px, so on a phone every control is bumped to 16px. Larger targets are the right call at that width anyway; desktop density is untouched. */ @media (max-width: 575.98px) { .ht-ui .form-control, .ht-ui .form-control-sm, .ht-ui .form-select, .ht-ui .custom-select, .ht-ui select, .ht-ui textarea, .ht-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 16px; } } /* ---- Alerts — tint + left accent rule ------------------------------------ */ .ht-ui .alert { border: 1px solid var(--ht-line); border-left-width: 3px; border-radius: var(--ht-r-sm); } .ht-ui .alert-success { background: var(--ht-brand-bg); border-left-color: var(--ht-brand); color: var(--ht-brand-ink); } .ht-ui .alert-info { background: var(--ht-accent-bg); border-left-color: var(--ht-accent); color: var(--ht-accent-ink); } .ht-ui .alert-warning { background: var(--ht-warn-bg); border-left-color: #eda100; color: var(--ht-warn); } .ht-ui .alert-danger { background: var(--ht-danger-bg); border-left-color: var(--ht-danger); color: var(--ht-danger); } .ht-ui .alert-light { background: var(--ht-surface); border-left-color: var(--ht-line); color: var(--ht-ink); } /* ---- Modals -------------------------------------------------------------- */ .ht-ui .modal-content { border: 0; border-radius: var(--ht-r-lg); box-shadow: var(--ht-shadow-lg); } .ht-ui .modal-header, .ht-ui .modal-footer { border-color: var(--ht-line); } .ht-ui .modal-header .close { opacity: .5; text-shadow: none; } .ht-ui .modal-header .close:hover { opacity: .9; } /* ---- App surfaces (existing view classes get the same shape/depth) -------- */ .ht-ui .il-card, .ht-ui .int-row, .ht-ui .rev-card, .ht-ui .fu-card, .ht-ui .icap-adjust { border-color: var(--ht-line) !important; border-radius: var(--ht-r); background: var(--ht-surface); box-shadow: var(--ht-shadow-sm); } .ht-ui .il-card { transition: box-shadow .16s ease, transform .16s ease; } .ht-ui .il-item:not(.il-mine) .il-card:hover { box-shadow: var(--ht-shadow); transform: translateY(-2px); } .ht-ui .int-row { transition: box-shadow .16s ease; } .ht-ui .int-row:hover { box-shadow: var(--ht-shadow); } .ht-ui .il-hero { border-color: #d8e6dc; border-radius: var(--ht-r-lg); box-shadow: var(--ht-shadow-sm); } .ht-ui .rev-summary:hover { background: #f7f9fb; } .ht-ui .rev-editor { background: #fbfcfd; } /* The GIM/CAP gauges are load-bearing data viz — leave their geometry alone, just soften the surrounding chrome. */ .ht-ui .rev-mrf-scale, .ht-ui .il-scale { box-shadow: inset 0 0 0 1px rgba(16,24,40,.04); }