/* Open Sans is loaded via + in index.html
so the request goes out in parallel with this CSS instead of being blocked behind it. */
/* ROC design tokens — the single source of truth for color, radius, spacing and the focus
ring, aligned to the official BGV brand color sheet (Dark Blue / Dark Grey primary,
Blue / Grey secondary, Light Grey / Orange tertiary) and to the ROC design system
spec (AB#8101); the --roc-severity-* group below is Bootstrap's alert palette, adopted rather
than derived from either — see its own note.
Defined on :root here (a global stylesheet) so the tokens cascade into every
scoped component stylesheet (*.razor.css). Add new shared values here rather
than hardcoding them in component CSS. Severity colour lives here too — the four levels any
surface can raise. A feature's own status colour does not: the Bonus Time green in
DayUseCalendar.razor.css and the TSW-transcription amber in RateCalculator.razor.css stay with
their components. AB#8174 records that split and the reasoning for it. */
:root {
/* Brand — BGV palette */
--roc-color-primary: #1F3956; /* BGV Dark Blue — headings, brand bar, primary text/icons */
--roc-color-primary-active: #17293D; /* BGV Dark Blue, darkened — pressed state on a primary fill */
/* Accent is 3.70:1 on white, below the 4.5:1 text threshold — use it for borders, fills and
the focus ring (3:1 non-text), and --roc-color-link for anything that carries text. */
--roc-color-accent: #5B89B4; /* BGV Blue — borders, fills, active nav states */
/* Channels of --roc-color-accent, so the translucent derivatives below compose from one source
instead of each restating the hex. Keep in step with --roc-color-accent: nothing enforces it,
and the pair drifting apart is what left the old tint on 88,137,180 against a #5889B4 accent. */
--roc-color-accent-rgb: 91, 137, 180;
--roc-color-link: #3D6E97; /* BGV Blue darkened to 5.42:1 on white — links, accent-colored text */
/* Accent-fill hover. Darkened past the obvious #4A7499 because the text on this fill is
--roc-text-light (#F2F3F4), not #fff: #4A7499 is 4.94:1 against white but only 4.45:1
against the off-white, which is the ratio that actually ships. #46708F clears AA at
4.76:1 on --roc-text-light (5.28:1 on white). */
--roc-color-accent-hover: #46708F;
--roc-color-accent-tint: rgba(var(--roc-color-accent-rgb), 0.25); /* nav link hover background */
--roc-color-secondary: #717171; /* BGV Grey — secondary buttons / secondary UI */
--roc-color-secondary-hover: #5A5A5A; /* BGV Dark Grey — secondary hover / darker border */
--roc-color-orange: #E67D37; /* BGV Orange — tertiary accent, use sparingly (1–5%) */
--roc-color-orange-tint: rgba(230, 125, 55, 0.25); /* BGV Orange @ 25% — warm subtle highlight */
/* Text — BGV greys */
--roc-text: #5A5A5A; /* BGV Dark Grey — default body text */
/* Channels of the two text greys. Only reason these exist: Bootstrap's .text-body and
.text-secondary utilities set colour with !important, so the only way to re-point them at the
BGV palette without !important of our own is to feed their rgba() the ROC channels — see the
.text-body / .text-secondary rules below. Keep in step with the hex above, as with
--roc-color-accent-rgb. */
--roc-text-rgb: 90, 90, 90;
--roc-text-muted: #717171; /* BGV Grey — secondary / muted text */
--roc-text-muted-rgb: 113, 113, 113;
--roc-text-light: #F2F3F4; /* BGV off-white — primary body text against a dark background */
--roc-text-disabled: #B4B4B4; /* disabled control / label text — 2.07:1, AA-exempt per WCAG 1.4.3 */
/* Placeholders are NOT AA-exempt. The spec's #9B9B9B is 2.8:1; #767676 is the lightest grey
that still clears 4.5:1 on white, so it reads as a hint without failing contrast. */
--roc-text-placeholder: #767676;
/* Surfaces */
--roc-surface: #FFFFFF; /* page background and card/table body fill — see html, body below */
--roc-surface-muted: #F5F5F5; /* BGV Light Grey — card / table header bands, hover chrome */
--roc-surface-hover: #F0F0F0; /* neutral light grey — hovered / selected row & tile */
/* Its one consumer is .badge below. It also held the Theater available slot until AB#8203 gave
that a solid --roc-color-accent-hover fill; .roc-time-slot (AB#8158) is where an available-slot
role would come back, so keep the name rather than folding it into a badge-only token. */
--roc-surface-tint: #EAF2F9; /* palest BGV Blue — badges */
/* The palest neutral fill — reads as barely-not-white. Zebra banding is its most visible use,
so --roc-row-alt stays the name table rules reach for, but it is an alias rather than a second
hex: anything that is not a table row (the Day Use calendar's non-rule day, for one) should
reference --roc-surface-subtle, so re-tuning table banding later cannot silently restyle
surfaces that merely happened to want the same off-white. */
--roc-surface-subtle: #FAFAFA;
--roc-row-alt: var(--roc-surface-subtle); /* zebra-striped even row */
/* Borders — neutral greys from the BGV grey family */
--roc-border: #E4E4E4; /* card / panel borders */
--roc-border-muted: #C8C8C8; /* muted / disabled icon, disabled stub */
/* Danger — validation errors and the occupied time slot */
/* Named for border/fill, and 3.93:1 on white puts it under the 4.5:1 normal-text floor — but it is
also sanctioned as a text colour on LARGE text only, where the bar is 3:1. The Day Use Parking
cards use it on their 22.75px/700 headline number for exactly that reason (both sheets pin the
size, so the number cannot shrink under 18.67px while keeping this token). Normal-size danger
text takes --roc-danger-border below. */
--roc-danger: #E24B4A; /* error border / fill; text only at >= 18.67px bold / 24px regular */
--roc-danger-rgb: 226, 75, 74; /* channels of --roc-danger — see --roc-color-accent-rgb above */
--roc-danger-bg: #F7C1C1; /* error fill behind --roc-danger-text */
--roc-danger-text: #791F1F; /* text on --roc-danger-bg */
/* The spec uses #A32D2D for two things: the occupied slot's hover border AND validation-message
text on white (7.07:1). The name reads as the former; the ratio is why it works as the latter. */
--roc-danger-border: #A32D2D;
/* Severity — the band behind a notification, one triplet per level (AB#8174).
Deliberately separate from the --roc-danger-* group above, and the discriminator is the
border, not the fill: both fills are pale (--roc-danger-bg is #F7C1C1), but
--roc-danger-border is 4.5:1 on its own fill — a visible edge, and the same value doubles as
validation text on white at 7.07:1 — where --roc-severity-danger-border is 1.17:1, a hairline
tint. Same -border suffix, opposite roles. .theater-booked is the worked example: a pale
--roc-danger-bg fill outlined in the dark --roc-danger-border, pinned by
TheaterAvailabilitySlotColourTests. So collapsing the two groups would be visible — a toast
would gain a dark rule where it now has a tint.
Values are Bootstrap 5.0-5.2's alert palette, which is what ToastContainer already rendered;
this group gave those literals a name, it did not restyle them, so there is no visual change
to diff against. Deliberately NOT the vendored 5.3.3's alert values: bootstrap.min.css is
5.3.3, whose *-bg-subtle match these four fills but whose *-border-subtle differ on all four
and whose *-text-emphasis differ on success and danger. Adopting 5.3.3 would be a restyle of
the only consumer, which is not this card's to make — so a .toast-danger and a real
.alert-danger differ in text and border colour, and CONTRIBUTING.md's severity bullet scopes
the rule to notification surfaces for that reason.
Contrast: the bg/text pairs are 7:1 or better on their own fill (success 7.21, info 7.65,
warning 7.21, danger 7.08 — AAA for normal text). The borders are tints, not boundaries:
1.06-1.17:1 on their fills, and the fills are themselves <= 1.34:1 on white, so a band is
delimited by its text and its own controls rather than by its edge. Anything that needs the
3:1 boundary of CONTRIBUTING.md's non-text rule has to supply it — which is also why the
severity bullet carries "never colour alone" forward.
Not a token for a feature's own status colour: those stay with their component (the Bonus
Time green in DayUseCalendar.razor.css, the amber in RateCalculator.razor.css). */
--roc-severity-success-bg: #D1E7DD;
--roc-severity-success-text: #0F5132;
--roc-severity-success-border: #BADBCC;
--roc-severity-info-bg: #CFF4FC;
--roc-severity-info-text: #055160;
--roc-severity-info-border: #B6EFFB;
--roc-severity-warning-bg: #FFF3CD;
--roc-severity-warning-text: #664D03;
--roc-severity-warning-border: #FFECB5;
--roc-severity-danger-bg: #F8D7DA;
--roc-severity-danger-text: #842029;
--roc-severity-danger-border: #F5C2C7;
/* The legacy dark table-header greys (#CCCCCC / #B5B5B5 / #C0C0C0) are gone. Every grid header
is now the --roc-surface-muted band, bordered with --roc-border and hovered with
--roc-surface-hover; the six consumers moved in the same change so no grid was left half
reskinned. */
/* Radii — controls (buttons, inputs, tabs, pills) vs containers (cards, tables). */
--roc-radius-control: 4px;
--roc-radius-container: 8px;
/* Spacing scale — defined ahead of the sweeps that consume it, so the per-surface PRs argue
about markup rather than re-deriving the scale. --roc-space-5 has no consumer yet; the rest
are in use, so do not read this group as unconsumed. */
--roc-space-1: 4px;
--roc-space-2: 8px;
--roc-space-3: 12px;
--roc-space-4: 16px;
--roc-space-5: 24px;
/* Control sizing — a capped action button, so a long label wraps instead of stretching the
button across its column. Not on the spacing scale: it is a control's own width, not a gap. */
--roc-size-button-cap: 160px;
/* Focus — one ring for every focusable surface, wired up in the :focus-visible block below */
--roc-focus-ring: 0 0 0 3px rgba(var(--roc-color-accent-rgb), 0.4);
--roc-focus-ring-danger: 0 0 0 3px rgba(var(--roc-danger-rgb), 0.4); /* same ring on an errored input */
/* Overlays */
--roc-modal-backdrop: rgba(0, 0, 0, 0.5); /* dim behind a statically-shown modal */
/* Elevation — a panel lifted off the page rather than a dim laid over it, which is why this is
its own group and not an "overlay". A whole box-shadow rather than just its colour, for the
same reason --roc-focus-ring is one: the offsets and blur are as much a part of the treatment
as the tint, and splitting them leaves the rgba() stranded in component CSS with nothing to
reference. One consumer today, the mobile sections dropdown. */
--roc-shadow-raised: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Bootstrap dims what is behind a modal with a SEPARATE .modal-backdrop element that only its
JS renders. ROC shows modals statically (.modal.show.d-block, no Bootstrap JS), so each one
has to supply its own dim — this is the one place it comes from. Use it on the .modal element
rather than hand-rolling an inline background-color, which also sidesteps the palette above.
AB#8058 retires the remaining hand-rolled copies. Their count is not tracked here — a
comment goes stale the moment a page converts, which is what happened when Theater took
two of them (AB#8150). RocDesignSystemMarkupTests enumerates them instead and fails if an
entry in its list stops offending, so the list can only shrink. */
.roc-modal-backdrop {
background-color: var(--roc-modal-backdrop);
}
/* On-brand highlight (BGV Orange @ 25% tint) for calling out a field row such as the
rental Level. Applied to the row's label + value cells so it reads as one continuous
bar, replacing raw Bootstrap bg-warning (off-palette). */
.roc-highlight {
background-color: var(--roc-color-orange-tint);
color: var(--roc-color-primary);
}
/* Bootstrap's .table > :not(caption) > * > * paints every cell, so the role needs table scope
to reach a grid cell. */
.table > tbody > tr > td.roc-highlight {
background-color: var(--roc-color-orange-tint);
color: var(--roc-color-primary);
}
/* Right-align the labels in the rental-detail field lists so each label sits next to its
value instead of at the far edge of its column. */
.detail-fields dt {
text-align: right;
}
/* Bootstrap's default dd bottom-margin makes the flex row taller than the dd's own box,
stretching the dt (label) cell taller than the dd (value) cell — which left the Level
highlight uneven. Zeroing it keeps the bar the same height across both cells. */
.detail-fields dd {
margin-bottom: 0;
}
/* The page is white and the #F5F5F5 bands (card headers, table headers, hover rows) read as chrome
on top of it — the reverse of the grey-page/white-card arrangement this replaces. The layout's
own .page / .main-content also paint --roc-surface-muted, so they move with this or they cover
the body and nothing changes; they are the actual page background.
The 14px → 13px base is the spec's body size, and it rescales every rem-based Bootstrap value
(heading sizes, card padding, gutters) by the same 7% — that is app-wide and intended, not a
side effect to undo per page. */
html, body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 13px;
color: var(--roc-text);
background-color: var(--roc-surface);
-webkit-font-smoothing: antialiased;
}
/* Type roles (spec §2). The element selector carries each role so a page writes
/
/
and
gets the right treatment without decorating every heading with a class; the paired .text-* class
is the same role on an element that is not a heading. Sizes stay literal px: they are absolute by
design (a 13px body against a 22px title), and putting them behind rem would re-couple them to the
root size the line above just changed. */
h1, .text-page-title {
color: var(--roc-color-primary);
font-weight: 700;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 0.04em; /* not in the spec — kept from the previous h1 so titles keep their set width */
}
h2, .text-section-heading {
color: var(--roc-color-primary);
font-weight: 600;
font-size: 15px;
}
/* The card/table-header band and a field label are byte-identical treatments. Both names are kept
because they mark different intent — a header over many values vs. the label on one — and a later
change to either should not silently move the other. */
h3, .text-card-header, .text-field-label {
color: var(--roc-color-primary);
font-weight: 600;
font-size: 13px;
}
/* A modal title sits a step above the card-header band: it titles the whole dialog, the way an h1
titles a page. Bootstrap's .modal-title carries no size of its own, so a title marked up as
used to land on the rule above and read byte-identically to a sub-heading inside the same dialog.
Sizing the class rather than a heading level roles every at once and
leaves each page free to pick the level its own document outline needs — the same decoupling
.card-header already relies on further down. */
.modal-title {
color: var(--roc-color-primary);
font-weight: 600;
font-size: 15px;
}
/* An alert rendered as the whole page body — MainLayout's error boundary, NotYetPorted,
LegacyBackofficeNotice, PendingPortNotice, and TourReferralResults' empty state. Every one of them
wants
, because the notice is the only heading on the page and the outline has to open
somewhere; none of them is a page title. That is a problem here and nowhere else, because h1 is the
only type role carrying text-transform and letter-spacing (.roc-nav-pill carries both, but no
heading wears it), so a notice left on the level renders "SOMETHING WENT WRONG" in 22px caps
(AB#8274). MainLayout is the app's global failure screen, though not the only screen that reads in
caps: App.razor and NotFound.razor are
, and .display-5 sets no
text-transform, so both keep the uppercase this rule removes here.
Like .modal-title above, sizing the class frees the level to follow the outline. Unlike it, this
role has to *replace* the page-title role rather than sit beside it: whatever property it leaves
undeclared keeps leaking down from h1. Three of the five notices used to carry Bootstrap's .h5,
which bought the size alone — exactly how the caps survived a fix aimed at them — while MainLayout
was already a bare
and TourReferralResults was an
.
So every property THIS SHEET's h1 rule declares is answered below, and RocTypeRoleTests holds that
true. Bootstrap's own h1 also sets margin-top, margin-bottom and line-height; those keep applying
and are deliberately left alone, being layout rather than role.
Only those three moved to the 15px section step from 16.25px (Bootstrap's .h5 at 1.25rem against
the 13px root). MainLayout fell further, 22px to 15px, since it was reading at the h1 step that
made this a bug; TourReferralResults did not move at all, because an
was already 15px.
colour is the one deliberately handed back: `inherit` takes the surrounding alert's colour, so a
danger notice reads danger rather than navy. */
.alert-heading {
color: inherit;
font-weight: 600;
font-size: 15px;
text-transform: none;
letter-spacing: normal;
}
/* One step below the card/table header, for a grouping inside a card body or a dialog where an
would collide with the header band directly above it. h4-h6 carried no rule at all before this, so
they took Bootstrap's weight 500 and heading colour instead of the system's 600 and navy, and their
sizes came off Bootstrap's rem/vw scale while every other role here is absolute px: a bare
sat
around 19.5-20.2px against the 13px root — between the h2 and h1 steps, owning neither, and moving
with the viewport because the sub-1200px size is calc(1.275rem + .3vw).
A page-level message that wants the section-heading size takes