/* ============================================================================= Charters & Educational Tours — Portal design system Implements "AAG-AET Portal Style Guide.dc.html" (Claude Design project "AAG Charters style guide"). One core app, two host-driven themes: Educational Tours — institutional AAG umbrella — adventure sub-brand co-branding Two rules from the guide that are easy to get wrong: 1. --color-action is DERIVED, not authored. Any primary that fails 4.5:1 against white is darkened (×0.92 steps) until it passes, and that value becomes buttons and links. That is why every action below carries WHITE text — including Adventure Tours, whose orange primary takes BLACK text as a background but becomes #A85F03 as an action colour. Never put a label on --color-primary; put it on --color-action. 2. Status colour is NEVER themed. Completed / Pending / Not sent / Expired / Awaiting parent keep one fixed set across all nine palettes, so a coordinator working both brands reads rows the same way. AET's accent (#0EA5A5) reaches only 3.02:1 on white — fills, dots and progress bars only. Its action (#0B6E6E) is that hue darkened to 6.05:1. ========================================================================== */ /* ── Theme tokens ─────────────────────────────────────────────────────── */ :root, :root[data-theme="aet"] { --color-primary: #111111; --color-primary-contrast: #ffffff; --color-accent: #0ea5a5; /* provisional — read off site photography, not a brand token yet */ --color-action: #0b6e6e; --color-action-contrast: #ffffff; --color-header-bg: #111111; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #111111; --color-link: #0b6e6e; --color-focus: #0b6e6e; --color-focus-ring: rgb(11 110 110 / 20%); --font-head: Barlow; --font-body: Barlow; --weight-section: 700; --tracking-section: -0.005em; --radius: 10px; --radius-sm: 8px; --row-padding-y: 16px; /* teachers checking a list weekly — rows breathe */ } :root[data-theme="aag"] { --color-primary: #244957; --color-primary-contrast: #ffffff; --color-accent: #84cc16; --color-action: #244957; --color-action-contrast: #ffffff; --color-header-bg: #244957; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #244957; --color-link: #244957; --color-focus: #244957; --color-focus-ring: rgb(36 73 87 / 20%); --font-head: Archivo; --font-body: "Public Sans"; --weight-section: 600; --tracking-section: 0; --radius: 12px; --radius-sm: 8px; --row-padding-y: 13px; /* operators live in these lists — density is a feature */ } /* Sub-brand co-branding. --color-action is the primary darkened to clear AA on white; the derived values are precomputed here so no runtime maths is needed. */ :root[data-theme="aag"][data-brand="dingos"] { --color-primary: #258ecc; --color-primary-contrast: #ffffff; --color-accent: #f59e0b; --color-action: #1f78ad; --color-header-bg: #258ecc; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #258ecc; --color-link: #1f78ad; --color-focus: #1f78ad; } :root[data-theme="aag"][data-brand="adventuretours"] { --color-primary: #ff9004; --color-primary-contrast: #000000; --color-accent: #49c0ef; --color-action: #a85f03; --color-header-bg: #ff9004; --color-header-fg: #000000; --color-header-mark-bg: #000000; --color-header-mark-fg: #ff9004; --color-link: #a85f03; --color-focus: #a85f03; } :root[data-theme="aag"][data-brand="discoverykgari"] { --color-primary: #000000; --color-primary-contrast: #ffffff; --color-accent: #ffa007; --color-action: #000000; --color-header-bg: #000000; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #000000; --color-link: #000000; --color-focus: #000000; } :root[data-theme="aag"][data-brand="discoverytours"] { --color-primary: #21221d; --color-primary-contrast: #ffffff; --color-accent: #b99a50; --color-action: #21221d; --color-header-bg: #21221d; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #21221d; --color-link: #21221d; --color-focus: #21221d; } :root[data-theme="aag"][data-brand="northernexp"] { --color-primary: #9ccb59; --color-primary-contrast: #000000; --color-accent: #99499c; --color-action: #5f7b36; --color-header-bg: #9ccb59; --color-header-fg: #000000; --color-header-mark-bg: #000000; --color-header-mark-fg: #9ccb59; --color-link: #5f7b36; --color-focus: #5f7b36; } :root[data-theme="aag"][data-brand="territory"] { --color-primary: #d3c199; --color-primary-contrast: #375066; --color-accent: #e25f26; --color-action: #80755d; --color-header-bg: #d3c199; --color-header-fg: #375066; --color-header-mark-bg: #375066; --color-header-mark-fg: #d3c199; --color-link: #80755d; --color-focus: #80755d; } :root[data-theme="aag"][data-brand="wildtasmania"] { --color-primary: #1e2a37; --color-primary-contrast: #ffffff; --color-accent: #7e8871; --color-action: #1e2a37; --color-header-bg: #1e2a37; --color-header-fg: #ffffff; --color-header-mark-bg: #ffffff; --color-header-mark-fg: #1e2a37; --color-link: #1e2a37; --color-focus: #1e2a37; } /* ── Fixed tokens — shared by every theme ─────────────────────────────── */ :root { --color-surface: #ffffff; --color-page: #f4f6f6; --color-surface-sunken: #fafbfb; --color-border: #dde2e2; --color-border-strong: #c9d1d1; --color-rule: #f2f4f4; --color-text: #16211f; --color-text-muted: #5c6666; --color-text-faint: #7a8484; /* Status — never themed. */ --status-complete: #2e7d4f; --status-pending: #c8860d; --status-expired: #c0362f; --status-neutral: #8a9494; --space: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --shadow-raised: 0 1px 2px rgb(16 32 30 / 5%), 0 8px 24px rgb(16 32 30 / 7%); } /* ── Base ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Load-bearing: the app toggles every view and panel through the `hidden` attribute, and the `display:` rules below would otherwise beat the UA stylesheet — leaving the login card and the app shell stacked together. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font-body), system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Type roles ───────────────────────────────────────────────────────── */ .t-display { font-family: var(--font-head), system-ui, sans-serif; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; } .t-title { font-family: var(--font-head), system-ui, sans-serif; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } .t-section { font-family: var(--font-head), system-ui, sans-serif; font-size: 20px; line-height: 1.2; font-weight: var(--weight-section); letter-spacing: var(--tracking-section); } .t-row { font-size: 14.5px; line-height: 1.4; font-weight: 600; } .t-meta { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); } .t-eyebrow { font-family: var(--font-head), system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); } .muted { color: var(--color-text-muted); } .faint { color: var(--color-text-faint); } /* ── Buttons — 44px minimum everywhere, desktop included ──────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 12px 20px; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: filter 120ms ease, background-color 120ms ease; } .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .btn:disabled { cursor: not-allowed; background: #f1f3f3; color: #98a2a2; border-color: #e6eaea; filter: none; } /* One primary action per view. */ .btn--primary { background: var(--color-action); color: var(--color-action-contrast); } .btn--primary:not(:disabled):hover { filter: brightness(0.92); } /* Secondary and ghost stay neutral so a sand or orange primary never has to compete with a second coloured button on the same row. */ .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn--secondary:not(:disabled):hover { background: #f5f7f7; } .btn--ghost { background: transparent; color: var(--color-link); padding-inline: 12px; } .btn--ghost:not(:disabled):hover { background: #f1f4f4; } .btn--sm { min-height: 36px; padding: 8px 14px; font-size: 13.5px; } .btn--block { width: 100%; } /* Row-level repeated action — ghost, no box, so four of them don't fight. */ .btn--row { min-height: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link); cursor: pointer; } .btn--row:hover { text-decoration: underline; } .btn--row:disabled { background: none; color: var(--color-text-faint); text-decoration: none; } /* ── Fields ───────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; } .field__label { font-size: 13px; font-weight: 600; } .input { width: 100%; font-family: inherit; font-size: 15px; padding: 13px 14px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); } .input::placeholder { color: #98a2a2; } .input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-focus-ring); } .input--select { cursor: pointer; } /* ── Status pills — fixed palette, never themed ───────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; border: 1px solid; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: currentColor; } .pill--completed { background: #e8f5ec; color: #1b5e33; border-color: #c4e4cf; } .pill--pending { background: #fff4e0; color: #8a5a08; border-color: #f3ddb4; } .pill--notsent { background: #f1f3f3; color: #4a5555; border-color: #e1e6e6; } .pill--expired { background: #fdecea; color: #9b2c22; border-color: #f5cfc9; } .pill--parent { background: #eef1fb; color: #33417e; border-color: #d5dcf4; } /* Dots carry the stronger status hue rather than the text colour. */ .pill--completed::before { background: var(--status-complete); } .pill--pending::before { background: var(--status-pending); } .pill--notsent::before { background: var(--status-neutral); } .pill--expired::before { background: var(--status-expired); } .pill--parent::before { background: #4b5cb8; } /* The Salesforce Order stage is not a waiver status, so it stays dotless — status colour and its dot are reserved for the five waiver states. */ .pill--stage { border-color: #e1e6e6; background: #f1f3f3; color: var(--color-text-muted); font-size: 12.5px; } .pill--stage::before { display: none; } .pill--phase { border-color: #e1e6e6; background: #f1f3f3; color: var(--color-text-muted); font-family: var(--font-head), system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; } .pill--phase::before { display: none; } /* ── Login ────────────────────────────────────────────────────────────── */ .login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); } .login__card { width: 100%; max-width: 396px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .login__body { padding: 32px 28px 36px; text-align: center; } /* Brand artwork, when the theme ships it. The monogram below is the fallback for brands whose logo files haven't landed yet. */ .login__logo { display: block; height: 64px; width: auto; max-width: 100%; margin: 0 auto 20px; } .login__mark { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 20px; font-family: var(--font-head), system-ui, sans-serif; font-size: 16px; font-weight: 700; background: var(--color-primary); color: var(--color-primary-contrast); border-radius: 12px; } .login__title { font-family: var(--font-head), system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-2); } .login__body-text { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 22px; } .login__foot { font-size: 12.5px; line-height: 1.6; color: var(--color-text-faint); margin-top: 18px; } .login__section { padding: 18px 22px; background: var(--color-surface-sunken); border-top: 1px solid #e8ecec; } .login__section-title { font-size: 12px; font-weight: 700; margin-bottom: 10px; } /* OTP — six boxes, not one field. */ .otp { display: flex; gap: var(--space-2); } .otp__box { flex: 1; min-width: 0; height: 46px; font-family: var(--font-head), system-ui, sans-serif; font-size: 19px; font-weight: 700; text-align: center; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); } .otp__box:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-focus-ring); } .stack { display: flex; flex-direction: column; gap: var(--space-3); } .row { display: flex; align-items: center; gap: var(--space-3); } .row--split { justify-content: space-between; } .msg { min-height: 1.25rem; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); } .msg--ok { color: #1b5e33; } .msg--err { color: #a8231c; } /* ── App shell ────────────────────────────────────────────────────────── */ .appbar { background: var(--color-header-bg); color: var(--color-header-fg); position: sticky; top: 0; z-index: 30; } .appbar__inner { max-width: 1180px; margin-inline: auto; padding: 16px var(--space-6) 0; } .appbar__top { display: flex; align-items: center; gap: 14px; padding-bottom: var(--space-4); } /* Replaces the monogram AND the text label — the wordmark already says the name, so showing both would be the brand twice. Sized for a dark header; a theme with a light header needs the on-light variant instead. */ .appbar__logo { height: 44px; width: auto; flex: 0 0 auto; margin-right: auto; } .appbar__mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; font-family: var(--font-head), system-ui, sans-serif; font-size: 12px; font-weight: 700; background: var(--color-header-mark-bg); color: var(--color-header-mark-fg); border-radius: var(--space-2); } /* Grouped so the badge can come and go without the auto-margin moving with it. */ .appbar__identity { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; } .appbar__label { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Admin is a real capability difference — reaching every booking — so it is labelled in the header rather than left to be inferred from the switcher. */ .appbar__role { flex: 0 0 auto; font-family: var(--font-head), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--color-header-mark-bg); color: var(--color-header-mark-fg); } .appbar__avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; font-family: var(--font-head), system-ui, sans-serif; font-size: 12px; font-weight: 700; background: var(--color-header-mark-bg); color: var(--color-header-mark-fg); border-radius: 999px; } .appbar__signout { background: transparent; border: 0; padding: var(--space-2); font: inherit; font-size: 13px; font-weight: 600; color: var(--color-header-fg); opacity: 0.8; cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .appbar__signout:hover { opacity: 1; text-decoration: underline; } /* ── Booking scope bar ──────────────────────────────────────────────── Both roles can hold several bookings — an admin every one, a coordinator however many they run. Everything below this bar (tabs and all tab content) is scoped to whatever is selected here, so it sits above the tabs and reads as a heading rather than a stray control tucked in the corner. */ .booking { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-4); } .booking__eyebrow { font-family: var(--font-head), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-header-fg); opacity: 0.55; flex: 0 0 auto; } .booking__picker { display: flex; min-width: 0; max-width: 100%; } .booking__select { font-family: var(--font-head), system-ui, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; max-width: min(46rem, 100%); min-width: 0; padding: 4px 30px 4px 10px; color: var(--color-header-fg); background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--radius-sm); cursor: pointer; text-overflow: ellipsis; } .booking__select:hover { background: rgb(255 255 255 / 16%); } .booking__select:focus-visible { outline: 2px solid var(--color-header-fg); outline-offset: 2px; } /* The options list is painted by the OS on its own surface, so it needs page colours rather than the header's. */ .booking__select option { color: var(--color-text); background: var(--color-surface); font-size: 15px; font-weight: 500; } /* One booking — no control, just the name, styled to match the select. */ .booking__single { font-family: var(--font-head), system-ui, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-header-fg); min-width: 0; overflow-wrap: anywhere; } .booking__meta { font-size: 13px; color: var(--color-header-fg); opacity: 0.75; } .booking__stage { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--color-header-fg); border: 1px solid rgb(255 255 255 / 28%); background: rgb(255 255 255 / 10%); } .booking__count { flex: 0 0 auto; font-size: 12px; color: var(--color-header-fg); opacity: 0.6; margin-left: auto; } .tabs { display: flex; gap: 26px; } .tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 0 0 var(--space-3); font: inherit; font-size: 14px; font-weight: 600; color: var(--color-header-fg); opacity: 0.62; cursor: pointer; } .tab:hover { opacity: 0.85; } .tab:focus-visible { outline: 2px solid var(--color-header-fg); outline-offset: 3px; } .tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--color-header-fg); } /* ── Page ─────────────────────────────────────────────────────────────── */ .page { max-width: 1180px; margin-inline: auto; padding: var(--space-6); } .banner { display: flex; gap: var(--space-3); padding: 14px 18px; margin-bottom: var(--space-4); font-size: 13.5px; line-height: 1.6; background: #fff9e8; color: #4a4331; border: 1px solid #f0dfae; border-radius: var(--radius); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .card + .card { margin-top: var(--space-4); } /* Toolbar above a list */ .toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid #edefef; } .toolbar__count { font-size: 15px; font-weight: 700; margin-right: auto; } /* Group header inside a list */ .group__head { display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: var(--color-surface-sunken); border-bottom: 1px solid #edefef; } .group__title { font-family: var(--font-head), system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .group__count { font-size: 11.5px; color: var(--color-text-faint); } /* Rows — density is the theme's job, via --row-padding-y */ .row-item { display: grid; grid-template-columns: 1.4fr 1.6fr auto; gap: var(--space-4); align-items: center; padding: var(--row-padding-y) 22px; border-bottom: 1px solid var(--color-rule); } .row-item--waiver { grid-template-columns: 1.5fr auto auto; } .row-item__name { font-size: 14.5px; font-weight: 600; } .row-item__sub { font-size: 12.5px; color: var(--color-text-faint); margin-top: 2px; } .row-item__email { font-size: 13px; color: var(--color-text-muted); overflow-wrap: anywhere; } .row-item__actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } /* Waiver completion header */ .completion { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid #edefef; } .completion__figure { margin-right: auto; } .completion__count { font-family: var(--font-head), system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .completion__sub { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; } .meter { height: 8px; margin: 0 22px 16px; background: #edf0f0; border-radius: 999px; overflow: hidden; } /* The accent carries no text here, so the bright value is safe. */ .meter__fill { height: 100%; background: var(--color-accent); } .meter + .row-item { border-top: 1px solid var(--color-rule); } /* Copy-link control — confirms in place, no toast */ .copylink { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; max-width: 24rem; } .copylink__url { flex: 1; min-width: 0; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #3d4a48; background: var(--color-surface-sunken); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .copylink__btn { flex: 0 0 auto; padding: 0 18px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-link); background: var(--color-surface); border: 0; border-left: 1px solid var(--color-border-strong); cursor: pointer; } .copylink__btn:hover { background: #f1f4f4; } /* Empty + placeholder states */ .empty { padding: 64px 22px; text-align: center; } .empty__title { font-family: var(--font-head), system-ui, sans-serif; font-size: 20px; font-weight: 700; margin-bottom: var(--space-2); } .empty__body { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); max-width: 46ch; margin: 0 auto; } .empty__cta { margin-top: var(--space-4); } .empty--dashed { margin: 22px; padding: 30px 22px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius); } /* ── Narrow screens ───────────────────────────────────────────────────── */ @media (max-width: 52rem) { .row-item, .row-item--waiver { grid-template-columns: 1fr; gap: var(--space-2); align-items: start; } .row-item__actions { justify-content: flex-start; } } @media (max-width: 40rem) { .appbar__inner, .page { padding-inline: var(--space-4); } .appbar__logo { height: 32px; } .login__logo { height: 52px; } .appbar__top { flex-wrap: wrap; } .appbar__label { margin-right: 0; } .tabs { gap: 20px; overflow-x: auto; } .toolbar, .completion { padding-inline: var(--space-4); } .booking__select, .booking__single { font-size: 16px; } .booking__count { margin-left: 0; width: 100%; } .row-item, .row-item--waiver, .group__head, .meter { padding-inline: var(--space-4); } .meter { margin-inline: var(--space-4); } } /* Phase-2 placeholder: the pill sits above the heading. */ .empty__title--spaced { margin-top: var(--space-4); }