/* ==========================================================================
Cris Barros app
tokens -> base -> components -> areas -> responsive -> print
Two colourways from the printed identity. The public booking pages use the
blue and pink one, matching crisbarros.com.au, so a family arriving from the
website sees no seam. Cris's own area uses the lilac and teal one, so she
always knows which side of the app she is on.
Components only ever refer to the --brand and --accent roles, so an area is
re-skinned by the data-area attribute on and nothing else.
Every colour pair here is listed in src/ui/tokens.ts and checked by
`npm run contrast`, which runs as part of the test suite.
========================================================================== */
/* ---------- Tokens ---------- */
:root {
color-scheme: light;
/* Blue and pink: the public colourway */
--blue: #327EC1; /* large shapes, the road, headings >= 24px only */
--blue-deep: #1F5D96; /* buttons, links, anything at body size */
--blue-hover: #174A7A;
--blue-wash: #E7F0F8;
--pink: #E778AF; /* the circle, the last road stop: shapes only */
--pink-deep: #A83A74; /* pink as text */
--pink-pale: #FFD0E6;
/* Lilac and teal: Cris's area */
--lilac: #8C7BB9;
--lilac-deep: #5B4B8A;
--lilac-hover: #4F3F7E;
--lilac-wash: #EFEDF6;
--teal: #6FCCD7; /* accent shapes only: 1.9:1 on white */
--teal-deep: #0E6B75; /* when the accent has to carry text */
/* Shared */
--ink: #231F20;
--ink-soft: #4B5360;
--mist: #F3F5F5;
--stone: #E7E6E5;
--white: #FFFFFF;
/* Status. Always with words, never colour alone. */
--danger: #B3261E;
--ok: #1E7F5C;
/* Roles the components use. Swapped per area, below. */
--brand: var(--blue);
--brand-deep: var(--blue-deep);
--brand-hover: var(--blue-hover);
--brand-wash: var(--blue-wash);
--accent: var(--pink);
--accent-deep: var(--pink-deep);
--accent-pale: var(--pink-pale);
--font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
/* Type. 19px body, because most of the people reading this are over 70. */
--text-small: 1rem; /* 16 */
--text-body: 1.1875rem; /* 19 */
--text-lead: 1.3125rem; /* 21 */
--text-h3: 1.375rem; /* 22 */
--text-state: 1.5rem; /* 24 the statement line */
--text-h2: 2.375rem; /* 38 */
--text-h1: 3.5rem; /* 56 */
--text-clock: 4rem; /* 64 the countdown */
--gutter: clamp(20px, 5vw, 40px);
--container: 1120px;
--narrow: 620px;
--section: 72px;
--radius-s: 8px;
--radius-m: 16px;
--radius-l: 28px;
--tap: 52px; /* every button, everywhere */
--tap-big: 64px; /* the two actions on the running visit card */
--shadow-card: 0 20px 50px rgba(31, 93, 150, .14);
}
/* Cris's area: the same components, the other colourway. */
[data-area='nurse'] {
--brand: var(--lilac);
--brand-deep: var(--lilac-deep);
--brand-hover: var(--lilac-hover);
--brand-wash: var(--lilac-wash);
--accent: var(--teal);
--accent-deep: var(--teal-deep);
--accent-pale: #D7F2F6;
--shadow-card: 0 20px 50px rgba(91, 75, 138, .16);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font);
font-size: var(--text-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -.015em; max-width: 16ch; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -.01em; max-width: 22ch; }
h3 { font-size: var(--text-h3); line-height: 1.3; }
p { max-width: 62ch; }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: 56ch; }
.small { font-size: var(--text-small); color: var(--ink-soft); }
a {
color: var(--brand-deep);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2.5px; }
/* There is no focus style by default in any browser worth relying on. */
:focus-visible {
outline: 3px solid var(--brand-deep);
outline-offset: 3px;
border-radius: 4px;
}
.shell { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.shell-narrow { width: min(var(--narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link {
position: absolute; left: 16px; top: -100px; z-index: 100;
padding: 12px 18px; border-radius: var(--radius-s);
background: var(--brand-deep); color: var(--white);
font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }
/* Visible to a screen reader, not on the screen. */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The brand's own device: a pink italic sentence, from the flyer. */
.statement {
font-size: var(--text-state);
font-style: italic;
font-weight: 500;
line-height: 1.35;
color: var(--accent-deep);
max-width: 34ch;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--tap); padding: 0 26px;
border-radius: 999px; border: 2px solid transparent;
font: 600 1.0625rem/1 var(--font);
text-decoration: none; cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
/* No lift, no shadow, no arrow in the label: the printed identity is flat. */
.btn-primary { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--white); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-secondary { background: var(--white); border-color: var(--brand-deep); color: var(--brand-deep); }
.btn-secondary:hover { background: var(--brand-wash); }
.btn-on-brand { background: var(--white); border-color: var(--white); color: var(--brand-deep); }
.btn-on-brand:hover { background: var(--brand-wash); border-color: var(--brand-wash); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn-block { width: 100%; }
.btn-big { min-height: var(--tap-big); font-size: 1.25rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
/* A link that should read as plain text until it is wanted. */
.link-quiet { color: var(--ink-soft); font-size: var(--text-small); }
/* ---------- Panels and cards ---------- */
.panel {
background: var(--mist);
border-radius: var(--radius-m);
padding: 32px;
}
[data-area='nurse'] .panel { background: var(--brand-wash); }
.card {
background: var(--white);
border: 1px solid var(--stone);
border-radius: var(--radius-m);
padding: 28px;
}
.card-link {
display: block;
text-decoration: none;
color: inherit;
background: var(--mist);
border-radius: var(--radius-m);
padding: 28px;
transition: background-color .15s;
}
.card-link:hover, .card-link:focus-visible { background: var(--brand-wash); }
.card-link h3 { color: var(--brand-deep); margin-bottom: 8px; }
.card-link p { margin-bottom: 12px; }
.card-meta {
font-size: var(--text-small);
color: var(--ink-soft);
font-weight: 500;
}
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
grid-auto-rows: 1fr;
}
/* ---------- Fields ---------- */
.field { display: grid; gap: 8px; margin-bottom: 24px; }
.field > label { font-weight: 500; font-size: 1.0625rem; }
.field-hint { font-size: var(--text-small); color: var(--ink-soft); }
.input {
min-height: var(--tap);
width: 100%;
padding: 12px 16px;
font: 400 var(--text-body)/1.4 var(--font);
color: var(--ink);
background: var(--white);
border: 1px solid var(--ink-soft);
border-radius: var(--radius-s);
}
.input:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 1px; border-color: var(--brand-deep); }
.input[aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
.field-error {
color: var(--danger);
font-size: var(--text-small);
font-weight: 500;
}
/* A one-time code: wide, spaced, numeric keypad on a phone. */
.input-code {
font-size: 1.75rem;
letter-spacing: .3em;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* ---------- Chips (a single choice that works without JavaScript) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
position: absolute; inset: 0;
opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.chip span {
display: flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 20px;
border: 2px solid var(--stone); border-radius: 999px;
font-weight: 500; background: var(--white);
transition: background-color .15s, border-color .15s;
}
.chip input:checked + span {
background: var(--brand-wash);
border-color: var(--brand-deep);
color: var(--brand-deep);
font-weight: 600;
}
.chip input:focus-visible + span { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
/* ---------- Status bands ---------- */
.band {
display: flex; align-items: flex-start; gap: 12px;
padding: 16px 20px;
border-radius: var(--radius-s);
font-weight: 500;
margin-bottom: 20px;
}
.band-info { background: var(--brand-wash); color: var(--ink); }
.band-ok { background: var(--white); border: 2px solid var(--ok); color: var(--ink); }
.band-warn { background: var(--pink-deep); color: var(--white); }
.band-danger { background: var(--danger); color: var(--white); }
.band a { color: inherit; }
.band-icon { flex: none; font-weight: 700; }
/* ---------- The road ---------- */
/* One path, a wide round stroke, with numbered stops on it. The last stop is
the accent colour, as the road on the printed flyer ends in pink. */
.road { display: grid; gap: 0; margin: 32px 0; }
.road-stop {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
padding-bottom: 28px;
position: relative;
}
.road-stop:last-child { padding-bottom: 0; }
/* The ribbon between the stops. */
.road-stop:not(:last-child)::before {
content: '';
position: absolute;
left: 21px; top: 44px; bottom: 0;
width: 2px;
background: var(--brand-wash);
}
.road-marker {
width: 44px; height: 44px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--white);
border: 2px solid var(--brand);
color: var(--brand-deep);
font-weight: 700;
font-size: 1.0625rem;
}
.road-stop:last-child .road-marker {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}
[data-area='nurse'] .road-stop:last-child .road-marker { color: var(--ink); }
.road-body h3 { font-size: 1.125rem; margin-bottom: 4px; }
.road-body p { font-size: 1.0625rem; color: var(--ink-soft); max-width: 46ch; }
/* ---------- The circular badge, and the ghost wordmark ---------- */
.badge-circle { width: 96px; height: 96px; color: var(--accent-deep); }
.badge-circle text { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; }
/* The brochure's back-panel device: the wordmark, very large and very faint,
clipped by the edge of the band it sits on. */
.ghost-wordmark {
position: absolute;
right: -40px; bottom: -30px;
width: 420px;
aspect-ratio: 164.8 / 54.62;
background-color: var(--white);
-webkit-mask: url('/logo.svg') no-repeat center / contain;
mask: url('/logo.svg') no-repeat center / contain;
opacity: .08;
pointer-events: none;
}
/* ---------- Header ---------- */
.site-header {
background: var(--white);
border-bottom: 1px solid var(--stone);
}
.header-bar {
min-height: 76px;
display: flex; align-items: center; gap: 24px;
padding-block: 12px;
}
.brand-mark { flex: none; display: block; }
/* The wordmark is 20 KB of paths. Painting it as a mask keeps it one cached
file while still letting it take the colour of whatever it sits on, which
an ![]()
could not do and an inline copy would pay for on every page. */
.logo {
display: block;
width: 168px;
aspect-ratio: 164.8 / 54.62;
background-color: currentColor;
-webkit-mask: url('/logo.svg') no-repeat center / contain;
mask: url('/logo.svg') no-repeat center / contain;
}
.logo-sm { width: 140px; }
.logo-lg { width: 260px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.area-label {
font-size: var(--text-small);
font-weight: 500;
color: var(--ink-soft);
padding-left: 16px;
border-left: 1px solid var(--stone);
}
.phone-link {
display: inline-flex; align-items: center; gap: 8px;
/* A header link is aimed at with a thumb, so it gets a thumb-sized box. */
min-height: 44px;
color: var(--ink); text-decoration: none; font-weight: 600;
}
.phone-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Layout ---------- */
main { padding-block: var(--section); }
.stack > * + * { margin-top: 24px; }
.stack-tight > * + * { margin-top: 12px; }
.section-intro { display: grid; gap: 20px; margin-bottom: 40px; }
.site-footer {
background: var(--stone);
padding-block: 40px;
font-size: var(--text-small);
color: var(--ink-soft);
}
.site-footer a { color: var(--brand-deep); }
.site-footer p { max-width: 70ch; }
.site-footer > * + * { margin-top: 12px; }
/* ---------- Facts list ---------- */
.facts { display: grid; gap: 0; }
.fact {
display: grid;
grid-template-columns: 190px 1fr;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--stone);
}
.fact:last-child { border-bottom: 1px solid var(--stone); }
.fact dt { font-weight: 500; color: var(--ink-soft); font-size: 1.0625rem; }
.fact dd { margin: 0; }
/* ---------- The Halaxy booking frame ---------- */
/* A white panel with a real border, so the widget's own white background does
not read as a hole in the page. */
.booking-frame {
background: var(--white);
border: 1px solid var(--stone);
border-radius: var(--radius-m);
padding: 8px;
margin-block: 32px;
min-height: 760px;
position: relative;
}
.booking-frame iframe { width: 100%; min-height: 744px; border: 0; border-radius: var(--radius-s); display: block; }
.booking-skeleton {
position: absolute; inset: 8px;
display: grid; place-items: center;
background: var(--mist);
border-radius: var(--radius-s);
color: var(--ink-soft);
font-weight: 500;
}
.booking-fallback {
display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
margin-top: 8px;
}
/* ---------- Cris's area: the running visit ---------- */
.visit-clock {
font-size: var(--text-clock);
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
color: var(--ink);
}
.visit-clock-over { color: var(--pink-deep); }
.visit-due { font-size: var(--text-lead); color: var(--ink-soft); margin-top: 8px; }
.visit-actions { display: grid; gap: 12px; margin-top: 28px; }
.outcome {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 12px;
border-radius: 999px;
font-size: var(--text-small);
font-weight: 600;
}
.outcome-checked_out { background: var(--brand-wash); color: var(--brand-deep); }
.outcome-resolved { background: var(--white); border: 2px solid var(--ok); color: var(--ok); }
.outcome-cancelled { background: var(--mist); color: var(--ink-soft); }
.outcome-active,
.outcome-overdue,
.outcome-alerting { background: var(--danger); color: var(--white); }
.history-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
align-items: center;
padding: 18px 0;
border-top: 1px solid var(--stone);
text-decoration: none;
color: inherit;
}
.history-row:last-child { border-bottom: 1px solid var(--stone); }
.history-row:hover { background: var(--brand-wash); }
.history-when { font-weight: 600; }
.history-detail { font-size: var(--text-small); color: var(--ink-soft); }
.message-log { display: grid; gap: 0; margin-top: 12px; }
.message-log li {
padding: 14px 0;
border-top: 1px solid var(--stone);
font-size: 1.0625rem;
}
.message-log li:last-child { border-bottom: 1px solid var(--stone); }
.message-to { font-weight: 600; }
.message-body { color: var(--ink-soft); margin-top: 4px; }
.message-failed { color: var(--danger); font-weight: 600; }
/* ---------- The login screen ---------- */
.auth-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--gutter);
background: var(--brand-deep);
position: relative;
overflow: hidden;
}
.auth-card {
position: relative;
z-index: 1;
width: min(460px, 100%);
background: var(--white);
border-radius: var(--radius-l);
padding: 40px;
}
.auth-card h1 { font-size: 1.75rem; max-width: none; margin-bottom: 8px; }
.auth-card .lead { font-size: 1.0625rem; margin-bottom: 28px; }
.auth-brand { margin-bottom: 28px; color: var(--ink); }
.qr { display: grid; place-items: center; padding: 20px; background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius-m); }
.secret-manual {
font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
font-size: 1.125rem;
letter-spacing: .08em;
word-break: break-all;
background: var(--mist);
padding: 12px 16px;
border-radius: var(--radius-s);
}
.recovery-codes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
font-size: 1.125rem;
background: var(--mist);
padding: 20px;
border-radius: var(--radius-m);
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
:root {
--text-h1: 2.375rem; /* 38 */
--text-h2: 1.875rem; /* 30 */
--text-h3: 1.25rem; /* 20 */
--text-body: 1.125rem; /* 18 */
--text-lead: 1.1875rem;/* 19 */
--text-state: 1.25rem; /* 20 */
--section: 56px;
}
.header-bar { min-height: 64px; gap: 16px; }
.brand-mark svg { width: 140px; }
.panel { padding: 22px; }
.card, .card-link { padding: 22px; }
.fact { grid-template-columns: 1fr; gap: 4px; }
.auth-card { padding: 28px 22px; }
.recovery-codes { grid-template-columns: 1fr; }
.area-label { padding-left: 0; border-left: 0; }
}
/* Cris's header on a phone.
Two rows rather than a menu button: there are only three places to go, and
a panel that has to be opened is one more tap between her and the timer. */
@media (max-width: 700px) {
[data-area='nurse'] .header-bar {
flex-wrap: wrap;
row-gap: 8px;
padding-block: 10px;
}
/* The lilac colourway and the nav already say where she is. */
[data-area='nurse'] .area-label { display: none; }
[data-area='nurse'] .header-right {
margin-left: auto;
}
[data-area='nurse'] .header-right nav,
[data-area='nurse'] nav.header-right {
order: 3;
width: 100%;
margin-left: 0;
justify-content: space-between;
gap: 8px;
}
}
/* The public header at phone width: a full email address will not sit beside
the wordmark, so let it take its own line rather than shrink to unreadable
or slide off the side. */
@media (max-width: 560px) {
.header-bar { flex-wrap: wrap; row-gap: 6px; padding-block: 10px; }
.header-right { width: 100%; margin-left: 0; }
.phone-link { font-size: var(--text-small); }
}
@media (max-width: 560px) {
.header-right { gap: 12px; }
.actions .btn { width: 100%; }
.booking-frame { min-height: 620px; padding: 4px; }
.booking-frame iframe { min-height: 612px; }
.ghost-wordmark { width: 300px; right: -60px; }
}
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ---------- Print ---------- */
/* Families print pages for a parent. Keep the words, drop the furniture. */
@media print {
.site-header, .site-footer, .btn, .visit-actions, .skip-link, .booking-frame { display: none !important; }
body { font-size: 12pt; color: #000; background: #fff; }
a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10pt; }
.panel, .card { border: 1px solid #999; background: #fff; }
}
/* ==========================================================================
Utilities
--------------------------------------------------------------------------
These exist because the app sends `style-src 'self'` with no
'unsafe-inline'. Under that policy a browser silently discards every inline
style attribute, so a layout built with them looks subtly wrong in
production and perfectly fine in a page opened from disk. Keeping the
policy strict and the styling in here is the trade this app makes.
========================================================================== */
/* A heading inside a card or panel: the size of an h3, whatever the tag. */
.h-sub {
font-size: var(--text-h3);
line-height: 1.3;
max-width: none;
}
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 28px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 28px; }
.strong { font-weight: 600; }
/* A fieldset carrying no visual box of its own. */
.fieldset-plain { border: 0; padding: 0; margin: 0; margin-inline: 0; }
.legend-plain {
font-weight: 500;
font-size: 1.0625rem;
padding: 0;
margin-bottom: 8px;
}
/* A used as a collapsible section inside a card. */
.disclosure { border-top: 1px solid var(--stone); padding: 14px 0; }
.disclosure > summary { cursor: pointer; font-weight: 600; }
.disclosure > summary::marker { color: var(--brand-deep); }
.checkbox-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 24px;
min-height: 44px;
}
.checkbox-row input { width: 22px; height: 22px; }
/* A button that should read as a link (cancel, and nothing else). */
.btn-link {
background: none;
border: 0;
padding: 0;
color: var(--ink-soft);
font: 500 var(--text-small)/1.5 var(--font);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.btn-link:hover { color: var(--ink); }
.nav-link { color: var(--ink); font-weight: 500; }
/* The three extend options stay on one line: they are a set of small
choices, not three separate calls to action, and stacking them pushes the
honest note about how the alert works below the fold on a phone. */
.extend-options { display: flex; flex-wrap: wrap; gap: 10px; }
.extend-options .btn { flex: 1 1 0; min-width: 96px; padding-inline: 12px; }
.inline-form { display: inline; }
.btn-compact { min-height: 44px; padding-inline: 18px; }