/*
RetirementCare central brand theme.
This is the single source of truth for brand colours, typography, spacing,
radius and shadow tokens. The public website, the future Admin Portal and the
future Resident Portal must all consume these variables instead of redefining
their own hard-coded values.
The values below currently match the SenoCare template palette exactly, so the
public website renders identically to the source template. Rebranding is done
by changing the values here - public-website.css maps the template's own
variables onto these tokens, so nothing else needs editing.
Do not copy these values into portal-specific or component-isolated CSS.
*/
/*
Minimal global reset.
⚠️ Do not remove. The shells (login, admin, resident) deliberately load NO CSS
framework, which also means they get no framework reset - so the browser's
default `body { margin: 8px }` applies. That 8px is invisible until something is
position:fixed: the admin sidebar then sits at 0 while the content column beside
it starts at 8, which showed up as an unexplained gap down the left AND as the
top bar's bottom border sitting 8px below the sidebar's, making two panels of
identical height look mismatched. Measured and fixed 2026-07-29.
The public website is unaffected - Bootstrap's own reset already zeroes this.
*/
body {
margin: 0;
}
/*
Global border-box.
⚠️ Do not remove, and do not "fix" a width bug by adding box-sizing locally instead.
Content-box has now caused the same bug three times in this shell: an element given
`max-width` or `height` renders WIDER or TALLER than that value, because padding and
border are added on top. It produced a sidebar brand block 1.2rem taller than the top
bar beside it, and a portal hero card 50px wider than the content column it was meant
to line up with. Both looked like careless design; both were this.
Applied globally rather than per-component because the shells deliberately load no CSS
framework and therefore inherit no reset. The public website is unaffected - Bootstrap
already sets exactly this.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
/*
Brand palette (product owner, 2026-07-29). Taken from the real logo rather than
inherited from the SenoCare template, and the ROLES WERE SWAPPED at the same time:
primary = the teal (was secondary, #00ADB8)
secondary = the coral (was primary, #FF7A7C)
The swap corrects a long-standing wart: every shell already led with teal, so
"secondary" was doing the primary's job. If you find CSS that reads
--rc-color-secondary expecting teal, it predates this and is a bug.
⚠️ CONTRAST. Both hues sit near 3.5:1 against white:
#0197a1 on white = 3.53:1 #f34d59 on white = 3.49:1
That clears the 3:1 floor for LARGE text, buttons, badges, borders and focus
rings - but NOT the 4.5:1 floor for normal-size text. For coloured text at body
size use --rc-color-primary-dark (5.11:1). Do not put small white text on a
primary/secondary fill.
(Both are still a clear improvement: the old #00ADB8 managed only 2.74:1, which
failed even the large-text floor despite a code comment claiming otherwise.)
*/
--rc-color-primary: #0197a1;
/*
Darker teal. Two jobs: the hover/pressed fill under a primary button, and the
AA-safe colour for coloured TEXT at body size (5.11:1 on white).
⚠️ This used to be #2C374B - a navy, identical to --rc-color-dark and unrelated
to the primary. Use --rc-color-dark if you want the navy.
*/
--rc-color-primary-dark: #017a82;
--rc-color-secondary: #f34d59;
/* Surfaces and text */
--rc-color-background: #ffffff;
--rc-color-surface: #F6F6F6;
--rc-color-dark: #2C374B;
--rc-color-text: #2C374B;
--rc-color-muted: #757F95;
--rc-color-on-primary: #ffffff;
--rc-color-on-dark: #F5FAFF;
/* Accents carried over from the template */
--rc-color-green: #15D4C9;
--rc-color-blue: #0049D0;
--rc-color-yellow: #FBA707;
--rc-color-red: #F05454;
--rc-color-border: rgba(0, 0, 0, 0.08);
/* Typography - SenoCare --body-font / --heading-font */
--rc-font-family-base: 'Roboto', sans-serif;
--rc-font-family-heading: 'Ubuntu', sans-serif;
/* Radius */
--rc-radius-sm: 0.375rem;
--rc-radius-md: 0.75rem;
--rc-radius-lg: 1.25rem;
/* Elevation */
--rc-shadow-soft: 0 0 40px 5px rgb(0 0 0 / 5%);
--rc-shadow-card: 0 2px 16px rgb(44 55 75 / 8%);
/* ------------------------------------------------------------------
Shell layout tokens (Login / Admin / Resident).
CHANGE THE WIDTH AND PADDING HERE AND NOWHERE ELSE. Every shell sizes
its content from these, so adjusting the feel of the whole application
is a one-line edit rather than a hunt through layout files.
The public website is NOT sized from these - it keeps the SenoCare
template's own container widths.
------------------------------------------------------------------ */
/* Maximum width of a shell's content column. */
--rc-shell-content-max-width: 1400px;
/* Gutter between the content column and the viewport edge, so admin and
resident pages never run edge to edge. */
--rc-shell-gutter-x: 2rem;
--rc-shell-gutter-x-sm: 1rem;
/* Vertical breathing room above and below page content. */
--rc-shell-gutter-y: 2rem;
/* Admin/resident chrome. Sidebar width and top bar height are here rather than
in the layouts so the two panels stay aligned with each other by construction. */
--rc-shell-sidebar-width: 16rem;
--rc-shell-topbar-height: 4rem;
/* Spacing scale used by shell chrome. */
--rc-space-xs: 0.25rem;
--rc-space-sm: 0.5rem;
--rc-space-md: 1rem;
--rc-space-lg: 1.5rem;
--rc-space-xl: 2.5rem;
/* ------------------------------------------------------------------
Tabular data.
APPLICATION-WIDE STANDARD (product owner, 2026-07-29): the outer edge
padding for any tabular data anywhere in the product - Syncfusion grids,
plain HTML tables, list rows. Set here so every table in every feature
indents identically and one edit re-spaces all of them.
It equals --rc-space-lg on purpose: that is the card's own padding, so a
grid sitting flush inside a card lines its first column up with the text
of every ordinary card on the page.
------------------------------------------------------------------ */
--rc-table-edge-padding: var(--rc-space-lg);
/* Inner padding between columns. Smaller than the edge, so the outer margin
reads as deliberate rather than as one more column gap. */
--rc-table-cell-padding-x: 0.75rem;
/* ------------------------------------------------------------------
Resident portal.
The portal is read by residents and their family - often elderly, often on a
phone or tablet - whereas the admin portal is read by staff at a desk. It
therefore runs a LARGER type scale and BIGGER tap targets than the admin
shell, deliberately, rather than sharing one scale across the product
(product owner, 2026-07-29).
Change these to re-tune the whole portal; the admin shell does not read them.
------------------------------------------------------------------ */
/* Body text. Admin runs 0.9375rem. */
--rc-portal-font-size: 1.0625rem;
--rc-portal-line-height: 1.65;
/* Minimum height for anything tappable. 44px is the long-standing accessibility
floor for a finger, and it is the reason the nav items are not simply links. */
--rc-portal-tap-target: 2.75rem;
/* The portal is a single centred column, much narrower than the admin content
cap - it is reading material, not a data grid. */
--rc-portal-content-max-width: 60rem;
/* Height of the brand bar. Sized around the logo it contains: the portal runs the
wordmark at 4rem, and this leaves ~0.75rem of air above and below it. Changing
the logo height without changing this makes the bar look crammed. */
--rc-portal-brandbar-height: 5.5rem;
}
/* ======================================================================
The page heading's focus ring.
`Routes.razor` uses , which stamps tabindex="-1"
on the page's and focuses it after every navigation so a screen-reader user
lands on the heading rather than at the top of the chrome. That is worth keeping.
The side effect is that the browser then paints its DEFAULT focus ring around the
heading — a black box across the full content width, on every page, after every
navigation. It looks like a rendering fault and was reported as one.
⚠️ Removing the ring here is safe, and ONLY here. tabindex="-1" means the element
cannot be reached by tabbing, so this focus is always programmatic — there is no
keyboard user whose position is being hidden. Do NOT generalise this rule to
:focus on other elements; every genuinely tabbable control must keep a visible
focus indicator.
====================================================================== */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
outline: none;
}