/* ========================================================================== IDSP portal design system -------------------------------------------------------------------------- Loads on every page: this file is a web file parented to the Home page, and the portal runtime injects every CSS web file under Home into the head. Load order is bootstrap.min.css, thumbnail.css, idsp-intake.css, this file, theme.css. theme.css wins ties, but it turns out to carry no rule at all for most of what is styled here. A `body` prefix is therefore used only where theme.css genuinely competes, and each of those places says so. Everywhere else source order alone beats bootstrap. Lengths are px on purpose. The generated bootstrap.min.css sets html { font-size: 10px }, so every rem here would render at 62.5% of its declared value. That file is not ours to edit. No rule in this file changes text content. Design only. ========================================================================== */ :root { --idsp-white: #ffffff; --idsp-ink: #1c2733; --idsp-ink-soft: #4a5a6a; --idsp-ink-faint: #7d8b99; --idsp-paper: #fdfcfa; --idsp-surface: #f5f2ec; --idsp-line: #d8d2c8; --idsp-line-soft: #e8e3da; --idsp-accent: #1a4f8b; --idsp-accent-deep: #123a68; --idsp-accent-ink: var(--idsp-white); --idsp-gold: #d9a318; --idsp-ok: #2e6b3f; --idsp-warn: #a33c2e; --idsp-bar: #16202b; /* Derived colours, kept as tokens so retuning the palette does not leave hand-expanded rgba() values behind at the old hue. */ --idsp-tint: rgba(26, 79, 139, 0.05); --idsp-warn-surface: #fdf3f1; --idsp-warn-line: rgba(163, 60, 46, 0.35); --idsp-nav-ink: #e6ebf0; --idsp-nav-line: rgba(230, 235, 240, 0.4); --idsp-shadow-menu: 0 6px 20px rgba(22, 32, 43, 0.14); --idsp-shadow-modal: 0 18px 50px rgba(22, 32, 43, 0.28); --idsp-radius: 4px; --idsp-container: 1600px; --idsp-gutter: 48px; --idsp-measure: 1100px; --idsp-control-h: 44px; --idsp-font-display: Georgia, "Times New Roman", serif; --idsp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --idsp-fs-body: 17px; --idsp-fs-prose: 18px; --idsp-fs-label: 16px; --idsp-fs-ui: 16px; --idsp-fs-ui-sm: 15px; --idsp-fs-input: 17px; --idsp-fs-cell: 15px; --idsp-fs-small: 13px; --idsp-fs-section: 24px; } /* Inter latin subset, variable weight axis 100-900. Served from the site root as a web file. No preload: adding one needs a edit and this rollout stays CSS-only. `swap` rather than `optional` is deliberate. `optional` would remove the font-swap layout shift entirely, but it also lets the browser skip Inter on a cold first visit, and a type rollout that sometimes does not appear is a worse outcome here than a small first-paint reflow. The 100-900 range must stay wide: bootstrap and theme.css declare 200, 300, 700 and bold on elements that inherit this stack, and clamping would synthesize them. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/inter-latin-var.woff2") format("woff2"); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { font-family: var(--idsp-font-body); font-size: var(--idsp-fs-body); line-height: 1.55; color: var(--idsp-ink); background: var(--idsp-paper); padding-bottom: 96px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, legend, .tab-title, .section-title { font-family: var(--idsp-font-display); font-weight: 400; letter-spacing: -0.01em; color: var(--idsp-ink); } a { color: var(--idsp-accent); text-underline-offset: 2px; } a:hover, a:focus { color: var(--idsp-accent-deep); } a:focus-visible { outline: 3px solid var(--idsp-accent); outline-offset: 2px; } /* Prose gets a readable measure. Tables and grids deliberately do not, so a wide window is spent on data rather than on 200-character lines. The cap sits on the copy block as well as its children because some approved copy is loose text in a div rather than paragraphs. */ .page-copy, .page-copy p, .page-copy ul, .page-copy ol, .page-copy blockquote { font-size: var(--idsp-fs-prose); line-height: 1.65; max-width: var(--idsp-measure); } .page-copy:has(.entitylist), .page-copy:has(table) { max-width: none; } /* Approved legacy copy on the intake, service request and profile pages carries inline 11pt Calibri spans. Keep the wording, normalize the rendering to the page scale. */ .page-copy span[style] { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; } /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ /* `.wrapper-body` is the studio template's main element, which has no container of its own. Including it keeps every page on one width system. */ .container, #mainContent.wrapper-body { width: auto; max-width: var(--idsp-container); padding-left: var(--idsp-gutter); padding-right: var(--idsp-gutter); } /* Studio section blocks nest .container inside .container. The outermost one owns the shell, otherwise the gutter compounds. */ .container .container { max-width: none; padding-left: 0; padding-right: 0; } /* The wide-left page template leaves its aside empty on both pages that use it, which costs a third of the width for nothing. Reclaim it without touching the template, and stand down the moment the aside holds anything. The col-sm-8/col-sm-4 qualifiers pin this to the wide-left layout, because `.right-column` carries the main content in the wide-right layout and a second aside in the three-column one. :has() cannot nest inside :has(), so the empty test is written as :not() of a single :has(). */ #mainContent:not(:has(> .col-sm-4.right-column > *)) > .col-sm-4.right-column { display: none; } #mainContent:not(:has(> .col-sm-4.right-column > *)) > .col-sm-8.left-column { width: 100%; float: none; } /* -------------------------------------------------------------------------- Navbar theme.css carries competing rules for every selector in this block. -------------------------------------------------------------------------- */ .navbar-static-top.navbar { background: var(--idsp-bar); } .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { font-size: var(--idsp-fs-ui-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--idsp-nav-ink); padding: 20px 18px; border-bottom: 3px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover, .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { color: var(--idsp-white); background: transparent; border-bottom-color: var(--idsp-gold); } .navbar a:focus-visible { outline: 2px solid var(--idsp-gold); outline-offset: -2px; } /* The vertical pipes between links are the most dated thing on the page. */ .navbar-static-top.navbar .menu-bar > .navbar-nav > .divider-vertical { display: none; } .navbar-inverse .dropdown-menu { background: var(--idsp-white); border: 1px solid var(--idsp-line); border-radius: 0 0 var(--idsp-radius) var(--idsp-radius); box-shadow: var(--idsp-shadow-menu); padding: 6px 0; } .navbar-inverse .dropdown-menu > li > a { color: var(--idsp-ink); font-size: var(--idsp-fs-ui-sm); padding: 9px 18px; } .navbar-inverse .dropdown-menu > li > a:hover, .navbar-inverse .dropdown-menu > li > a:focus { background: var(--idsp-surface); color: var(--idsp-accent-deep); } .navbar-inverse .navbar-toggle { border-color: var(--idsp-nav-line); } .navbar-inverse .navbar-toggle:focus-visible { outline: 2px solid var(--idsp-gold); outline-offset: 2px; } /* -------------------------------------------------------------------------- Breadcrumb and page header -------------------------------------------------------------------------- */ .breadcrumb { background: transparent; padding: 26px 0 0; margin: 0; border-radius: 0; font-size: var(--idsp-fs-small); letter-spacing: 0.02em; } .breadcrumb > li + li::before { content: "/"; color: var(--idsp-line); padding: 0 8px; } /* theme.css styles these two directly. */ .breadcrumb > li > a { color: var(--idsp-ink-soft); } .breadcrumb > .active { color: var(--idsp-ink-faint); } .page-header { border-bottom: 1px solid var(--idsp-line); margin: 14px 0 28px; padding-bottom: 18px; } /* Most pages title with h1, the ASP.NET profile page with h2, and the intake pages with an injected header that replaces the stock furniture. */ .page-header h1, .page-header h2, .idsp-shell-header h1 { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; margin: 0; } /* -------------------------------------------------------------------------- Entity lists The grid element carries both .entity-grid and .entitylist, so one class is enough to reach it. -------------------------------------------------------------------------- */ /* On the account dashboard each grid is introduced by a bolded one-word paragraph. Promote those to real section headings, and only those: the selector requires the paragraph to hold nothing but the bold text and to be followed immediately by a grid. */ .page-copy p:has(> b:only-child):has(+ .entitylist) { font-family: var(--idsp-font-display); font-size: var(--idsp-fs-section); line-height: 1.2; color: var(--idsp-ink); border-bottom: 2px solid var(--idsp-ink); padding-bottom: 8px; margin: 52px 0 18px; max-width: none; } .page-copy p:has(> b:only-child):has(+ .entitylist) > b { font-weight: 400; } .page-copy p:has(> b:only-child):has(+ .entitylist):first-child { margin-top: 0; } .entitylist .view-grid { overflow-x: auto; } .entity-grid table.table { width: 100%; margin: 0; border: none; font-variant-numeric: tabular-nums; } .entity-grid table.table > thead > tr > th { font-size: var(--idsp-fs-cell); font-weight: 600; color: var(--idsp-ink-soft); background: transparent; border: none; border-bottom: 2px solid var(--idsp-ink); padding: 0 14px 10px; vertical-align: bottom; white-space: normal; } .entity-grid table.table > thead > tr > th > a { color: inherit; text-decoration: none; } .entity-grid table.table > thead > tr > th > a:hover, .entity-grid table.table > thead > tr > th > a:focus { color: var(--idsp-accent); text-decoration: underline; } .entity-grid table.table > thead > tr > th .fa { color: var(--idsp-accent); margin-left: 4px; } .entity-grid table.table > tbody > tr > td { font-size: var(--idsp-fs-cell); color: var(--idsp-ink); border: none; border-bottom: 1px solid var(--idsp-line-soft); padding: 13px 14px; vertical-align: middle; } .entity-grid table.table > tbody > tr:hover > td { background: var(--idsp-tint); } .entity-grid table.table > tbody > tr > td a { font-weight: 500; } .entity-grid .message { font-size: var(--idsp-fs-cell); color: var(--idsp-ink-faint); background: var(--idsp-surface); border: 1px solid var(--idsp-line-soft); border-radius: var(--idsp-radius); padding: 22px 18px; margin: 14px 0 0; } .entity-grid .message > p { margin: 0; max-width: none; } .entity-grid .grid-actions, .entitylist-search { margin-bottom: 14px; } .entity-grid .pagination > li > a, .entity-grid .pagination > li > span { color: var(--idsp-accent); border-color: var(--idsp-line); } .entity-grid .pagination > .active > a, .entity-grid .pagination > .active > span { background: var(--idsp-accent); border-color: var(--idsp-accent); color: var(--idsp-accent-ink); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .crmEntityFormView { max-width: var(--idsp-measure); } /* The section table sizes to its content by default, so the form ends up narrower than the column it sits in. */ .crmEntityFormView table.section { width: 100%; } /* Basic forms head their sections with h2.tab-title, the intake wizard with .section-title. Both exist in this portal. */ .crmEntityFormView h2.tab-title, .crmEntityFormView .section-title { font-size: var(--idsp-fs-section); line-height: 1.2; border-bottom: 2px solid var(--idsp-ink); padding-bottom: 8px; margin: 40px 0 20px; } .crmEntityFormView h2.tab-title:first-child { margin-top: 0; } .crmEntityFormView h2.tab-title:empty { display: none; } .crmEntityFormView td.cell { padding-bottom: 20px; padding-right: 24px; } .crmEntityFormView label { font-size: var(--idsp-fs-label); font-weight: 600; color: var(--idsp-ink); line-height: 1.4; margin-bottom: 6px; } body .form-control { font-size: var(--idsp-fs-input); min-height: var(--idsp-control-h); height: auto; padding: 9px 12px; color: var(--idsp-ink); background: var(--idsp-white); border: 1px solid var(--idsp-line); border-radius: var(--idsp-radius); box-shadow: none; transition: border-color 120ms ease; } textarea.form-control { min-height: 108px; line-height: 1.5; } body .form-control:hover { border-color: var(--idsp-ink-faint); } body .form-control:focus { border-color: var(--idsp-accent); outline: 3px solid var(--idsp-accent); outline-offset: 1px; box-shadow: none; } /* Native radios and checkboxes paint no border, so they take the ring only. */ input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--idsp-accent); outline-offset: 1px; } /* Bootstrap greys every [readonly] field at (0,2,0), which `body .form-control` does not outrank. Both rules below therefore carry the attribute selector deliberately. Do not "simplify" them back to a bare class: lookups are readonly by design and driven by their search button, so greying them makes the whole service request form look disabled. */ body .form-control[readonly].lookup { background: var(--idsp-white); color: var(--idsp-ink); } body .form-control[readonly]:not(.lookup), body .form-control[disabled] { background: var(--idsp-surface); color: var(--idsp-ink-soft); } .crmEntityFormView .input-group .btn { min-height: var(--idsp-control-h); border-color: var(--idsp-line); background: var(--idsp-surface); color: var(--idsp-ink-soft); } .crmEntityFormView .input-group .btn:hover { background: var(--idsp-line-soft); color: var(--idsp-ink); } /* theme.css already colours .validators and the required asterisk at a specificity this file does not try to beat, so only the type is set here. */ .crmEntityFormView .validators, .field-validation-error { font-size: var(--idsp-fs-small); font-weight: 500; } .validation-summary, .alert-danger { background: var(--idsp-warn-surface); border: 1px solid var(--idsp-warn-line); border-left: 4px solid var(--idsp-warn); border-radius: var(--idsp-radius); color: var(--idsp-warn); padding: 16px 18px; margin-bottom: 26px; } .validation-summary ul { margin: 6px 0 0; padding-left: 20px; } /* -------------------------------------------------------------------------- Buttons .idsp-btn-* are the consent dialog's buttons, which are built by the Step 12 script and so cannot take Bootstrap's classes without a JS change. -------------------------------------------------------------------------- */ .btn, .idsp-btn-primary, .idsp-btn-secondary { font-size: var(--idsp-fs-ui); font-weight: 500; min-height: var(--idsp-control-h); padding: 10px 22px; border-radius: var(--idsp-radius); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .btn-primary, .idsp-btn-primary, input[type="submit"].btn { background: var(--idsp-accent); border: 1px solid var(--idsp-accent); color: var(--idsp-accent-ink); } .btn-primary:hover, .btn-primary:focus, .idsp-btn-primary:hover, .idsp-btn-primary:focus, input[type="submit"].btn:hover { background: var(--idsp-accent-deep); border-color: var(--idsp-accent-deep); color: var(--idsp-accent-ink); } .btn-default, .idsp-btn-secondary { background: transparent; border: 1px solid var(--idsp-line); color: var(--idsp-ink); } .btn-default:hover, .btn-default:focus, .idsp-btn-secondary:hover, .idsp-btn-secondary:focus { background: var(--idsp-surface); border-color: var(--idsp-ink-faint); color: var(--idsp-ink); } .btn:focus-visible, .idsp-btn-primary:focus-visible, .idsp-btn-secondary:focus-visible { outline: 3px solid var(--idsp-accent); outline-offset: 2px; } /* Dense toolbars want a smaller control than a form's submit button. */ .modal, .grid-actions, .pagination { --idsp-control-h: 38px; } .modal .btn, .grid-actions .btn, .pagination .btn { padding: 7px 16px; font-size: var(--idsp-fs-ui-sm); } /* -------------------------------------------------------------------------- Modals, panels, tabs -------------------------------------------------------------------------- */ .modal-content { border: none; border-radius: var(--idsp-radius); box-shadow: var(--idsp-shadow-modal); } .modal-header { border-bottom: 1px solid var(--idsp-line); padding: 20px 24px; } .modal-title { font-family: var(--idsp-font-display); font-size: 22px; } .modal-body { padding: 24px; } .modal-footer { border-top: 1px solid var(--idsp-line); padding: 18px 24px; } /* theme.css carries a bare .panel rule. */ body .panel, .well { background: transparent; border: 1px solid var(--idsp-line-soft); border-radius: var(--idsp-radius); } .nav-tabs { border-bottom: 1px solid var(--idsp-line); } .nav-tabs > li > a { color: var(--idsp-ink-soft); font-size: var(--idsp-fs-ui); border: none; border-bottom: 3px solid transparent; border-radius: 0; margin: 0 4px -1px 0; padding: 12px 18px; } .nav-tabs > li > a:hover { background: var(--idsp-surface); border-bottom-color: var(--idsp-line); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--idsp-ink); font-weight: 600; background: transparent; border: none; border-bottom: 3px solid var(--idsp-accent); } /* -------------------------------------------------------------------------- Auth and system pages -------------------------------------------------------------------------- */ .form-horizontal { max-width: var(--idsp-measure); } .form-horizontal .control-label { font-size: var(--idsp-fs-label); font-weight: 600; color: var(--idsp-ink); padding-top: 12px; } .checkbox label, .radio label { font-size: var(--idsp-fs-body); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* .container and the intake shell both read the gutter, so this one has to stay on :root. */ :root { --idsp-gutter: 20px; } .crmEntityFormView td.cell { padding-right: 0; } } @media (max-width: 767px) { .page-copy { --idsp-fs-prose: 17px; } .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { padding: 13px 16px; border-bottom: none; border-left: 3px solid transparent; } .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:hover { border-bottom-color: transparent; border-left-color: var(--idsp-gold); } .page-header h1, .page-header h2, .idsp-shell-header h1 { font-size: 30px; } .btn-primary, .idsp-btn-primary, .idsp-btn-secondary, input[type="submit"].btn { width: 100%; } .crmEntityFormView td.cell { display: block; width: 100% !important; } } /* Scoped to what actually transitions in this file. The intake handoff bar carries its own reduced-motion rule alongside its animation. */ @media (prefers-reduced-motion: reduce) { .btn, .idsp-btn-primary, .idsp-btn-secondary, .form-control, .navbar a { transition-duration: 0.01ms !important; } }