/* ===================================================================== Chairside — the stylesheet. One file, no build step, no preprocessor. Read top to bottom: 1. Tokens custom properties, including the tenant accent 2. Reset the small amount of normalising we actually need 3. Typography 4. Layout page shells, containers, the card 5. Forms 6. Buttons 7. Tables 8. Feedback alerts, badges, empty states 9. Utilities 10. Print The tenant accent colour arrives as style="--accent: #rrggbb" on , validated by safe_colour() in inc/helpers.php before it is printed. Every other colour derives from the tokens below, so a tenant only ever supplies one value. ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------- */ :root { /* Brand. Overridden per tenant on the element. The three derived shades are computed from it with color-mix, so a tenant supplies one hex value and gets a consistent set. The literal fallbacks on the line above each one are for browsers without color-mix; they match the default accent, which is close enough for a graceful degrade. */ --accent: #2f6f6b; --accent-dark: #245552; --accent-dark: color-mix(in srgb, var(--accent) 78%, #000); --accent-light: #eef4f3; --accent-light: color-mix(in srgb, var(--accent) 12%, #fff); --accent-border: #a9c8c5; --accent-border: color-mix(in srgb, var(--accent) 35%, #fff); --on-accent: #fff; /* Neutrals. Warm grey — this is a wellness product, not a bank. */ --ink: #1d2321; --ink-2: #4a544f; --ink-3: #6f7a75; --line: #dde3e0; --line-2: #eef2f0; --bg: #f6f8f7; --surface: #fff; /* Status. */ --ok: #2e7d4f; --ok-bg: #eaf5ee; --warn: #8a6100; --warn-bg: #fdf4e0; --bad: #a3282a; --bad-bg: #fbeceb; --info: #1f5d8c; --info-bg: #eaf2f9; /* Slot states on the booking grid. */ --slot-open-bg: #fff; --slot-open-border: var(--accent-border); --slot-booked-bg: #f0f2f1; --slot-booked-ink: var(--ink-3); --slot-blocked-bg: repeating-linear-gradient( 45deg, #f4f6f5, #f4f6f5 6px, #eaeeec 6px, #eaeeec 12px ); /* Spacing scale. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgb(29 35 33 / 6%), 0 4px 16px rgb(29 35 33 / 6%); --shadow-sm: 0 1px 2px rgb(29 35 33 / 8%); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --measure: 68ch; /* comfortable reading width */ --container: 74rem; } /* --------------------------------------------------------------------- 2. Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } /* Let the browser do the right thing with form control fonts. */ input, select, textarea, button { font: inherit; color: inherit; } /* A visible focus ring everywhere, because this form gets used on phones in corridors by people in a hurry. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- 3. Typography --------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.2; font-weight: 650; letter-spacing: -0.011em; text-wrap: balance; } h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); } h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } p, ul, ol, dl, table, figure { margin: 0 0 var(--s4); } p { max-width: var(--measure); } :where(h1, h2, h3, h4, p, ul, ol) :last-child { margin-bottom: 0; } a { color: var(--accent-dark); text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } small, .small { font-size: 0.875rem; } code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--line-2); padding: 0.1em 0.35em; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; } /* --------------------------------------------------------------------- 4. Layout --------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); } .container--narrow { max-width: 44rem; } /* Full-height centred shell, used by the error, access-code and login pages. */ .page-centred { min-height: 100dvh; display: grid; place-items: center; padding: var(--s4); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s5); } .card--narrow { max-width: 34rem; width: 100%; } .card + .card { margin-top: var(--s4); } .card__head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; margin-bottom: var(--s4); } .stack > * + * { margin-top: var(--s4); } .stack-sm > * + * { margin-top: var(--s2); } .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .row--end { justify-content: flex-end; } .row--between { justify-content: space-between; } /* Site header used by the authenticated apps. */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: var(--s4); min-height: 3.5rem; } .site-header__brand { display: flex; align-items: center; gap: var(--s2); font-weight: 650; text-decoration: none; color: var(--ink); } .site-header__brand img { max-height: 2rem; width: auto; } .site-nav { display: flex; flex-wrap: wrap; gap: var(--s1); margin-left: auto; } .site-nav a { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2); } .site-nav a:hover { background: var(--line-2); color: var(--ink); } .site-nav a[aria-current="page"] { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; } main { padding-block: var(--s5) var(--s7); } .site-footer { border-top: 1px solid var(--line); padding-block: var(--s4); color: var(--ink-3); font-size: 0.875rem; } /* --------------------------------------------------------------------- 5. Forms --------------------------------------------------------------------- */ .field { margin-bottom: var(--s4); } .field > label, .label { display: block; margin-bottom: var(--s1); font-weight: 600; font-size: 0.9375rem; } .field__hint { margin: var(--s1) 0 0; color: var(--ink-3); font-size: 0.875rem; } .field__error { margin: var(--s1) 0 0; color: var(--bad); font-size: 0.875rem; font-weight: 600; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { width: 100%; padding: 0.55rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: inset 0 1px 2px rgb(29 35 33 / 4%); } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); outline: none; } textarea { min-height: 6rem; resize: vertical; } /* 16px minimum on phones or iOS zooms the whole page when a field is focused. */ @media (max-width: 40rem) { input, select, textarea { font-size: 16px; } } [aria-invalid="true"] { border-color: var(--bad) !important; } .field--check { display: flex; align-items: flex-start; gap: var(--s2); } .field--check input { width: auto; margin-top: 0.28rem; flex: none; } .field--check label { font-weight: 400; margin: 0; } fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s4); margin: 0 0 var(--s4); } legend { padding-inline: var(--s2); font-weight: 650; } /* The honeypot. Hidden from people without display:none, which some form fillers check for. Kept out of the tab order and the accessibility tree by the markup in form_guard_fields(). */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------------- 6. Buttons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0.55rem 1rem; min-height: 2.75rem; /* comfortable touch target */ border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .btn:hover { background: var(--accent-dark); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn--secondary:hover { background: var(--line-2); border-color: var(--ink-3); } .btn--ghost { background: transparent; color: var(--accent-dark); } .btn--ghost:hover { background: var(--accent-light); } .btn--danger { background: var(--bad); } .btn--danger:hover { background: color-mix(in srgb, var(--bad) 82%, #000); } .btn--sm { min-height: 2.25rem; padding: 0.3rem 0.7rem; font-size: 0.875rem; } .btn--block { width: 100%; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--s2); } /* --------------------------------------------------------------------- 7. Tables --------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } table.data th, table.data td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; } table.data thead th { border-bottom: 2px solid var(--line); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; } table.data tbody tr:hover { background: var(--line-2); } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; } table.data td.nowrap { white-space: nowrap; } /* --------------------------------------------------------------------- 8. Feedback --------------------------------------------------------------------- */ .alert { padding: var(--s3) var(--s4); border: 1px solid; border-left-width: 4px; border-radius: var(--radius-sm); margin-bottom: var(--s4); } .alert p { max-width: none; } .alert--ok { background: var(--ok-bg); border-color: var(--ok); color: #1c4c30; } .alert--warn { background: var(--warn-bg); border-color: var(--warn); color: #5c4100; } .alert--bad { background: var(--bad-bg); border-color: var(--bad); color: #741d1e; } .alert--info { background: var(--info-bg); border-color: var(--info); color: #163f5e; } .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--line-2); color: var(--ink-2); white-space: nowrap; } .badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--bad { background: var(--bad-bg); color: var(--bad); } .badge--info { background: var(--info-bg); color: var(--info); } /* Transient messages, created by toast() in assets/js/app.js. */ .toasts { position: fixed; inset-block-end: var(--s4); inset-inline-end: var(--s4); z-index: 60; display: flex; flex-direction: column; gap: var(--s2); max-width: min(24rem, calc(100vw - 2rem)); } .toast { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid; border-left-width: 4px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); transition: opacity 0.3s ease; } .toast--ok { border-color: var(--ok); background: var(--ok-bg); } .toast--warn { border-color: var(--warn); background: var(--warn-bg); } .toast--bad { border-color: var(--bad); background: var(--bad-bg); } .toast--info { border-color: var(--info); background: var(--info-bg); } .toast__close { margin-left: auto; padding: 0 var(--s1); border: 0; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer; } .empty { text-align: center; padding: var(--s6) var(--s4); color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius); } /* --------------------------------------------------------------------- 9. Utilities --------------------------------------------------------------------- */ .muted { color: var(--ink-3); } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: var(--s4); } .mb-4 { margin-bottom: var(--s4); } .full { width: 100%; } .hidden, [hidden] { display: none !important; } .pre-scroll { background: var(--line-2); padding: var(--s3); border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.8125rem; line-height: 1.45; } /* Visible only to screen readers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link, revealed on focus. */ .skip-link { position: absolute; left: var(--s3); top: -3rem; z-index: 100; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); transition: top 0.15s ease; } .skip-link:focus { top: var(--s3); } /* --------------------------------------------------------------------- 10. Print --------------------------------------------------------------------- */ /* Groundwork only. The real work — the roster and the blank paper sign-up sheet, one page per chair with ruled lines — arrives with the employer portal in phase 9 and gets its own section here. */ @media print { :root { --bg: #fff; --surface: #fff; } body { background: #fff; font-size: 11pt; } .site-header, .site-footer, .site-nav, .btn, .btn-group, .no-print { display: none !important; } .print-only { display: revert !important; } main { padding: 0; } .container { max-width: none; padding: 0; } .card { border: 0; box-shadow: none; padding: 0; break-inside: avoid; } a[href]::after { content: ""; } /* no printed URLs; the links are private */ table.data { font-size: 10pt; } table.data thead { display: table-header-group; } table.data tr { break-inside: avoid; } .page-break { break-before: page; } } .print-only { display: none; }