/* ========================================================================== RRMS — design system Pure CSS3. No framework, no CDN, no icon font. Mobile-first from 320px. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { --primary: #0f3d6e; --primary-600: #0c3159; --primary-700: #092444; --primary-100: #e5eefa; --secondary: #c8102e; --secondary-100: #fdeaed; --background: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f7; --text: #14213d; --text-2: #3d4a63; --muted: #6b7a90; --border: #dfe5ee; --border-strong: #c6d0de; --success: #0b7a5a; --success-bg: #e4f5ee; --warning: #9a6200; --warning-bg: #fdf2dd; --danger: #c0182c; --danger-bg: #fdeaec; --info: #0d5f8a; --info-bg: #e4f1f9; --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 30, 54, .06); --shadow: 0 2px 8px rgba(16, 30, 54, .08); --shadow-md: 0 8px 24px rgba(16, 30, 54, .10); --shadow-lg: 0 18px 48px rgba(16, 30, 54, .16); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --header-h: 60px; --bottomnav-h: 62px; --sidebar-w: 264px; --ease: cubic-bezier(.4, 0, .2, 1); --speed: .18s; } /* Dark mode: follows the device, or a stored preference on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #0d1320; --surface: #131b2b; --surface-2: #182234; --surface-3: #1f2b40; --text: #e8edf6; --text-2: #c2ccdd; --muted: #93a1b8; --border: #253148; --border-strong: #35435e; --primary: #4d90d8; --primary-600: #3d7cc0; --primary-100: #17273c; --secondary: #ef4a63; --secondary-100: #33161c; --success-bg: #102b23; --warning-bg: #2e2410; --danger-bg: #331419; --info-bg: #102836; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-md: 0 8px 24px rgba(0, 0, 0, .5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --background: #0d1320; --surface: #131b2b; --surface-2: #182234; --surface-3: #1f2b40; --text: #e8edf6; --text-2: #c2ccdd; --muted: #93a1b8; --border: #253148; --border-strong: #35435e; --primary: #4d90d8; --primary-600: #3d7cc0; --primary-100: #17273c; --secondary: #ef4a63; --secondary-100: #33161c; --success-bg: #102b23; --warning-bg: #2e2410; --danger-bg: #331419; --info-bg: #102836; } /* ------------------------------------------------------------------ reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: var(--font-size-base, 15px); line-height: 1.55; color: var(--text); background: var(--background); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--heading, var(--text)); } /* Any surface that sets its own text colour re-points the heading token at it, so a custom heading colour can never override white-on-brand and leave a heading unreadable on a coloured band. */ .hero, .step.is-current, .sidebar__link.is-active, .idcard, .media__overlay, .pill.is-active, .empty--inverted, .stat--inverted { --heading: currentColor; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--link, var(--primary)); text-decoration: none; } a:hover { text-decoration: underline; } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; } small { font-size: .82rem; } code, kbd, pre { font-family: var(--mono); font-size: .88em; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; } .icon { width: 20px; height: 20px; flex: none; } .icon--sm { width: 16px; height: 16px; } .icon--lg { width: 26px; height: 26px; } .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 { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); } .skip-link:focus { left: 8px; } /* ------------------------------------------------------------------ layout */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .container--narrow { max-width: 760px; } .container--wide { max-width: 1440px; } .stack > * + * { margin-top: 16px; } .stack-sm > * + * { margin-top: 8px; } .stack-lg > * + * { margin-top: 28px; } .row { display: flex; flex-wrap: wrap; gap: 12px; } .row--between { justify-content: space-between; align-items: center; } .row--center { align-items: center; } .row--end { justify-content: flex-end; } .row--tight { gap: 8px; } .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .grid--sidebar { grid-template-columns: 1fr; } @media (min-width: 900px) { .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .grid--sidebar-left { grid-template-columns: 320px minmax(0, 1fr); } } .spacer { flex: 1 1 auto; } .text-muted { color: var(--muted); } .text-small { font-size: .85rem; } .text-xs { font-size: .78rem; } .text-center { text-align: center; } .text-right { text-align: right; } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-mono { font-family: var(--mono); } .text-bold { font-weight: 700; } .text-upper { text-transform: uppercase; letter-spacing: .06em; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hide { display: none !important; } @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg, var(--surface)); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); } .site-header__inner { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); } /* min-width:0 lets the brand shrink inside the header flex row. Without it a long organisation name — or an uploaded logo — forces the header wider than the viewport on a 320px phone and the whole page scrolls sideways. */ .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text); min-width: 0; overflow: hidden; } .brand:hover { text-decoration: none; } .brand__mark { width: 36px; height: 36px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 800; letter-spacing: .02em; } .brand__mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } /* An uploaded organisation logo is usually wider than it is tall. Cropping one into the 36px square reduces it to an unreadable fragment, so when the mark holds a real logo it becomes a flexible box that shows the whole image. */ .brand__mark--image { width: auto; min-width: 36px; max-width: 148px; background: none; border-radius: 0; padding: 0; } .brand__mark--image img { width: auto; max-width: 148px; height: 36px; object-fit: contain; border-radius: 0; } @media (max-width: 480px) { .brand__mark--image, .brand__mark--image img { max-width: 104px; } } @media (max-width: 380px) { .brand__mark--image, .brand__mark--image img { max-width: 76px; } .brand__mark--image img { height: 30px; } } /* The admin sidebar is a fixed 264px and also carries the organisation name and "Control panel", so the logo gets a smaller share of it than in a page header that has the whole width to play with. */ .sidebar__head .brand__mark--image, .sidebar__head .brand__mark--image img { max-width: 96px; } .sidebar__head .brand__mark--image img { height: 32px; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand__name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand__tag { font-size: .7rem; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-nav { display: none; gap: 4px; margin-left: 12px; } @media (min-width: 900px) { .site-nav { display: flex; } } .site-nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; font-size: .92rem; transition: background var(--speed) var(--ease); } .site-nav a:hover { background: var(--surface-3); text-decoration: none; } .site-nav a.is-active { color: var(--primary); background: var(--primary-100); } /* ------------------------------------------------------------------ buttons */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 42px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--radius-button, var(--radius-sm)); cursor: pointer; text-decoration: none; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), opacity var(--speed) var(--ease); -webkit-tap-highlight-color: transparent; } .btn:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: none; } .btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; } .btn--primary { --btn-bg: var(--button-bg, var(--primary)); --btn-fg: var(--button-text, #fff); --btn-bd: var(--button-bg, var(--primary)); } .btn--secondary { --btn-bg: var(--secondary); --btn-fg: #fff; --btn-bd: var(--secondary); } .btn--success { --btn-bg: var(--success); --btn-fg: #fff; --btn-bd: var(--success); } .btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); } .btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-2); } .btn--ghost:hover { background: var(--surface-3); box-shadow: none; } .btn--outline { --btn-bg: transparent; --btn-fg: var(--primary); --btn-bd: var(--primary); } .btn--sm { padding: 6px 12px; min-height: 34px; font-size: .84rem; } .btn--lg { padding: 14px 24px; min-height: 52px; font-size: 1rem; } .btn--block { display: flex; width: 100%; } .btn--icon { padding: 8px; min-height: 38px; width: 38px; } .btn-group { display: inline-flex; flex-wrap: wrap; gap: 8px; } .btn.is-loading::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ cards */ .card { background: var(--card-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; } .card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .card__title { margin: 0; font-size: 1rem; font-weight: 700; } .card__body { padding: 18px; } .card__footer { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); } .card--flush .card__body { padding: 0; } .card--hover { transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Metric tiles */ .stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat__label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .stat__value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; } .stat__meta { font-size: .8rem; color: var(--muted); } .stat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); flex: none; } .stat--success .stat__icon { background: var(--success-bg); color: var(--success); } .stat--warning .stat__icon { background: var(--warning-bg); color: var(--warning); } .stat--danger .stat__icon { background: var(--danger-bg); color: var(--danger); } .stat--info .stat__icon { background: var(--info-bg); color: var(--info); } /* ------------------------------------------------------------------ badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--surface-3); color: var(--text-2); } .badge--success { background: var(--success-bg); color: var(--success); } .badge--warning { background: var(--warning-bg); color: var(--warning); } .badge--danger { background: var(--danger-bg); color: var(--danger); } .badge--info { background: var(--info-bg); color: var(--info); } .badge--muted { background: var(--surface-3); color: var(--muted); } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: .84rem; font-weight: 600; color: var(--text-2); } .pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ------------------------------------------------------------------ forms */ .field { margin-bottom: 16px; } .field__label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 600; color: var(--text-2); } .field__label .req { color: var(--secondary); } .field__hint { margin-top: 5px; font-size: .78rem; color: var(--muted); } .field__error { margin-top: 5px; font-size: .8rem; color: var(--danger); font-weight: 600; } .input, .select, .textarea { width: 100%; padding: 11px 13px; min-height: 44px; font: inherit; font-size: .95rem; color: var(--text); background: var(--input-bg, var(--surface)); border: 1px solid var(--input-border, var(--border-strong)); border-radius: var(--radius-sm); transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); appearance: none; } .textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); outline: none; } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); } .input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; } .input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-3); color: var(--muted); } .select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; } .input-group { display: flex; } .input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; } .field-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: repeat(3, 1fr); } } .check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; font-size: .92rem; } .check input[type="checkbox"], .check input[type="radio"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); flex: none; cursor: pointer; } .choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); font-weight: 600; font-size: .9rem; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:hover { border-color: var(--primary); } .choice:has(input:checked) { border-color: var(--primary); background: var(--primary-100); color: var(--primary); } fieldset { border: 0; margin: 0; padding: 0; } legend { font-weight: 700; padding: 0 0 8px; } /* ------------------------------------------------------------------ steps */ .steps { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } .steps::-webkit-scrollbar { display: none; } .step { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--surface-3); white-space: nowrap; } .step__num { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong); } .step.is-current { background: var(--primary); color: #fff; } .step.is-current .step__num { background: #fff; color: var(--primary); border-color: #fff; } .step.is-done { background: var(--success-bg); color: var(--success); } .step.is-done .step__num { background: var(--success); color: #fff; border-color: var(--success); } .progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-600)); transition: width .35s var(--ease); } /* ------------------------------------------------------------------ alerts */ .alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .9rem; } .alert__body { flex: 1; min-width: 0; } .alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); } .alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); } .alert--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } .alert--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); } /* Toasts */ .toast-host { position: fixed; z-index: 300; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottomnav-h) + 14px); display: flex; flex-direction: column; gap: 8px; width: min(94vw, 420px); pointer-events: none; } @media (min-width: 768px) { .toast-host { left: auto; right: 20px; bottom: 20px; transform: none; } } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: .9rem; animation: toast-in .26s var(--ease); } .toast--success { border-left: 4px solid var(--success); } .toast--danger { border-left: 4px solid var(--danger); } .toast--warning { border-left: 4px solid var(--warning); } .toast--info { border-left: 4px solid var(--info); } .toast.is-leaving { animation: toast-out .22s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } } @keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } } /* ------------------------------------------------------------------ tables */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th, .table td { padding: 11px 14px; text-align: left; vertical-align: middle; } .table thead th { background: var(--surface-2); color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; } .table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--speed) var(--ease); } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr:last-child { border-bottom: 0; } /* On a phone the title link is how a row is opened, so it needs a real hit area. inline-flex keeps it on the text baseline while the min-height gives the thumb something to land on. */ .table a { font-weight: 600; display: inline-flex; align-items: center; min-height: 24px; } /* On small screens each row becomes a card (§97). */ @media (max-width: 767px) { .table--cards thead { display: none; } .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; } .table--cards tr { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 6px 0; box-shadow: var(--shadow-xs); } .table--cards td { display: flex; justify-content: space-between; gap: 14px; padding: 8px 14px; border: 0; } .table--cards td::before { content: attr(data-label); font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; flex: none; } .table--cards td[data-label=""]::before { content: none; } } .list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 0; } .list-toolbar .input, .list-toolbar .select { min-width: 0; } .filter-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-items: end; } /* Pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 14px 0; } .pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: .88rem; font-weight: 600; } .pagination a:hover { background: var(--surface-3); text-decoration: none; } .pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; } .pagination .is-gap { border: 0; background: transparent; } /* ------------------------------------------------------------------ empty & loading */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; color: var(--muted); } .empty__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); } .empty__title { font-weight: 700; color: var(--text-2); font-size: 1rem; } .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; min-height: 14px; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--primary); animation: spin .7s linear infinite; } /* ------------------------------------------------------------------ modal */ .modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; justify-content: center; background: rgba(10, 18, 32, .55); padding: 0; backdrop-filter: blur(2px); } .modal.is-open { display: flex; animation: fade-in .18s var(--ease); } @media (min-width: 640px) { .modal { align-items: center; padding: 20px; } } .modal__panel { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); animation: sheet-up .24s var(--ease); } @media (min-width: 640px) { .modal__panel { border-radius: var(--radius-lg); animation: pop-in .2s var(--ease); } } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .modal__title { margin: 0; font-size: 1.05rem; } .modal__body { padding: 18px; } .modal__footer { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } @keyframes fade-in { from { opacity: 0; } } @keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } } @keyframes pop-in { from { transform: scale(.96); opacity: .5; } } /* ------------------------------------------------------------------ dropdown */ .dropdown { position: relative; } .dropdown__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); display: none; } .dropdown__menu.is-open { display: block; animation: pop-in .14s var(--ease); } .dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: var(--radius-sm); font: inherit; font-size: .9rem; color: var(--text-2); text-align: left; cursor: pointer; } .dropdown__item:hover { background: var(--surface-3); text-decoration: none; } .dropdown__divider { height: 1px; background: var(--border); margin: 5px 0; } /* ------------------------------------------------------------------ tabs */ .tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 11px 15px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .tab:hover { color: var(--text); text-decoration: none; } .tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } .tab-panel { display: none; padding-top: 18px; } .tab-panel.is-active { display: block; animation: fade-in .2s var(--ease); } /* ------------------------------------------------------------------ tooltip */ .tip { position: relative; display: inline-flex; } .tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 6px; font-size: .76rem; white-space: nowrap; background: var(--text); color: var(--surface); opacity: 0; pointer-events: none; transition: opacity var(--speed) var(--ease); z-index: 90; } .tip:hover::after, .tip:focus-visible::after { opacity: 1; } /* ------------------------------------------------------------------ avatars, media */ .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--primary-100); color: var(--primary); font-weight: 700; font-size: .85rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--lg { width: 68px; height: 68px; font-size: 1.2rem; } .avatar--xl { width: 104px; height: 104px; font-size: 1.6rem; } .media-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); } .media-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); aspect-ratio: 4 / 3; } .media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; } .media-item__actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; } .media-item__btn { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(12, 20, 34, .72); color: #fff; display: grid; place-items: center; } .media-item__caption { position: absolute; inset: auto 0 0 0; padding: 5px 8px; font-size: .72rem; background: linear-gradient(transparent, rgba(10, 16, 28, .8)); color: #fff; } .media-item.is-featured { outline: 3px solid var(--primary); outline-offset: -3px; } .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 26px 16px; text-align: center; color: var(--muted); background: var(--surface-2); cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .dropzone:hover, .dropzone.is-dragging { border-color: var(--primary); background: var(--primary-100); color: var(--primary); } .upload-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .upload-row__bar { flex: 1; } .upload-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } /* ------------------------------------------------------------------ timeline */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .timeline__item { position: relative; padding: 0 0 18px; } .timeline__item::before { content: ""; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--primary); } .timeline__item--success::before { border-color: var(--success); } .timeline__item--danger::before { border-color: var(--danger); } .timeline__item--warning::before { border-color: var(--warning); } .timeline__time { font-size: .76rem; color: var(--muted); } .timeline__title { font-weight: 600; font-size: .92rem; } /* Definition lists for record views */ .dl { display: grid; gap: 0; } .dl__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--border); } .dl__row:last-child { border-bottom: 0; } @media (min-width: 560px) { .dl__row { grid-template-columns: 190px 1fr; gap: 12px; align-items: baseline; } } .dl__key { font-size: .82rem; color: var(--muted); font-weight: 600; } .dl__val { font-size: .94rem; } /* ------------------------------------------------------------------ charts (§87) */ .chart { width: 100%; } .chart svg { width: 100%; height: auto; max-height: 300px; display: block; overflow: visible; } .chart__bar { transition: opacity var(--speed) var(--ease); } .chart__bar:hover { opacity: .78; } .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 10px; font-size: .8rem; color: var(--muted); } .chart-legend__key { display: inline-flex; align-items: center; gap: 6px; } .chart-legend__swatch { width: 11px; height: 11px; border-radius: 3px; } .chart-empty { padding: 30px; text-align: center; color: var(--muted); font-size: .88rem; } .bar-list { display: grid; gap: 10px; } .bar-list__row { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: .86rem; } .bar-list__track { height: 10px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .bar-list__fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width .5s var(--ease); } /* ------------------------------------------------------------------ app shell */ .app { min-height: 100dvh; display: flex; flex-direction: column; } .app__main { flex: 1; padding: 18px 0 calc(var(--bottomnav-h) + 24px); } @media (min-width: 900px) { .app__main { padding-bottom: 32px; } } .page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; } .page-head__title { margin: 0; font-size: 1.35rem; } .page-head__sub { color: var(--muted); font-size: .88rem; margin-top: 2px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); margin-bottom: 6px; } /* A breadcrumb is a row of tap targets, so each link carries its own 24px hit area (WCAG 2.5.8) without the text growing. */ .breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; } /* Bottom navigation (§27) */ .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 70; display: flex; height: var(--bottomnav-h); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(16, 30, 54, .07); } @media (min-width: 900px) { .bottom-nav { display: none; } } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .68rem; font-weight: 600; text-decoration: none; transition: color var(--speed) var(--ease); } .bottom-nav__item:hover { text-decoration: none; } .bottom-nav__item.is-active { color: var(--primary); } .bottom-nav__item.is-active .icon { transform: translateY(-1px); } .bottom-nav__item--accent .icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; margin-top: -18px; background: var(--primary); color: #fff; box-shadow: var(--shadow-md); } /* Sidebar (desktop admin) */ .shell { display: block; } @media (min-width: 900px) { .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; } } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(84vw, var(--sidebar-w)); background: var(--surface); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform .24s var(--ease); display: flex; flex-direction: column; overflow-y: auto; } .sidebar.is-open { transform: none; box-shadow: var(--shadow-lg); } @media (min-width: 900px) { .sidebar { position: sticky; top: 0; height: 100dvh; transform: none; width: auto; } } .sidebar__head { padding: 16px; border-bottom: 1px solid var(--border); } .sidebar__nav { padding: 10px; flex: 1; } .sidebar__group { margin-bottom: 12px; } .sidebar__label { padding: 8px 12px 4px; font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .sidebar__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; font-weight: 600; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .sidebar__link:hover { background: var(--surface-3); text-decoration: none; } .sidebar__link.is-active { background: var(--primary); color: #fff; } .sidebar__link .badge { margin-left: auto; } .sidebar__foot { padding: 12px; border-top: 1px solid var(--border); } .scrim { position: fixed; inset: 0; z-index: 110; background: rgba(10, 18, 32, .5); display: none; backdrop-filter: blur(1px); } .scrim.is-open { display: block; animation: fade-in .18s var(--ease); } @media (min-width: 900px) { .scrim { display: none !important; } } /* Notification bell */ .bell { position: relative; } .bell__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--secondary); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondary) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } } .notif-list { max-height: 380px; overflow-y: auto; } .notif { display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); } .notif:last-child { border-bottom: 0; } .notif.is-unread { background: var(--primary-100); } .notif__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; flex: none; } .notif__title { font-weight: 600; font-size: .88rem; } .notif__time { font-size: .74rem; color: var(--muted); } /* ------------------------------------------------------------------ rich text */ .rte { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); } .rte__toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: sticky; top: var(--header-h); z-index: 10; } .rte__btn { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; } .rte__btn:hover { background: var(--surface-3); } .rte__btn.is-active { background: var(--primary); color: #fff; } .rte__area { min-height: 220px; padding: 14px; outline: none; line-height: 1.7; font-size: 1rem; } .rte__area:empty::before { content: attr(data-placeholder); color: var(--muted); } .rte__area h2 { font-size: 1.25rem; } .rte__area h3 { font-size: 1.08rem; } .rte__area blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid var(--primary); background: var(--surface-2); color: var(--text-2); } .rte__area ul, .rte__area ol { padding-left: 22px; } .rte__count { padding: 6px 12px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted); } .prose { line-height: 1.75; font-size: 1rem; } .prose h2, .prose h3 { margin-top: 1.2em; } .prose blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid var(--primary); background: var(--surface-2); } .prose ul, .prose ol { padding-left: 22px; } .prose img { border-radius: var(--radius-sm); margin: 12px 0; } /* ------------------------------------------------------------------ public site */ .hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--primary-700), var(--primary) 55%, var(--primary-600)); color: #fff; padding: 52px 0 60px; } .hero::after { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 180px; background: var(--background); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .hero__inner { position: relative; z-index: 1; } .hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin-bottom: .35em; } .hero p { font-size: clamp(.95rem, 2.4vw, 1.1rem); opacity: .92; max-width: 620px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .hero .btn--primary { --btn-bg: #fff; --btn-fg: var(--primary-700); --btn-bd: #fff; } .hero .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); } .section { padding: 42px 0; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 28px; } .section__head p { color: var(--muted); } .feature { display: flex; gap: 14px; padding: 18px; } .feature__icon { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); } .feature h3 { font-size: 1rem; margin-bottom: .25em; } .feature p { color: var(--muted); font-size: .9rem; } .site-footer { background: var(--footer-bg, var(--surface)); border-top: 1px solid var(--border); padding: 30px 0; margin-top: 40px; color: var(--muted); font-size: .88rem; } .site-footer a { color: var(--text-2); } .footer-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .footer-links { display: flex; flex-direction: column; gap: 2px; } /* A stacked list of links is a set of tap targets, not prose, so each one has to be big enough to hit: WCAG 2.5.8 asks for 24px, and a thumb on a phone does better with a little more. The links keep their text size — only the hit area grows — so nothing about the design changes on a desktop. Links inside a sentence are exempt from the rule and are left alone. */ .footer-links a, .site-footer nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; } /* Verification result */ .verify-card { max-width: 520px; margin: 0 auto; } .verify-banner { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: var(--success); } .verify-banner--danger { background: var(--danger); } .verify-banner--warning { background: var(--warning); } .verify-banner__title { font-weight: 800; font-size: 1.05rem; } /* ------------------------------------------------------------------ ID card (§22) */ .idcard-stage { display: grid; gap: 22px; justify-items: center; } @media (min-width: 820px) { .idcard-stage { grid-template-columns: 1fr 1fr; } } .idcard { --card-primary: #0f3d6e; --card-secondary: #c8102e; width: 336px; height: 212px; position: relative; overflow: hidden; border-radius: 12px; background: #fff; color: #12203a; box-shadow: var(--shadow-md); border: 1px solid rgba(0, 0, 0, .12); font-size: 11px; line-height: 1.35; } .idcard * { box-sizing: border-box; } .idcard__top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card-primary); color: #fff; } .idcard__logo { width: 30px; height: 30px; border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; } .idcard__logo img { width: 100%; height: 100%; object-fit: contain; } .idcard__org { font-weight: 800; font-size: 12px; letter-spacing: .01em; } .idcard__type { font-size: 8.5px; text-transform: uppercase; letter-spacing: .14em; opacity: .92; } .idcard__stripe { height: 4px; background: var(--card-secondary); } .idcard__body { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 8px 10px 0; } .idcard__photo { width: 72px; height: 86px; border-radius: 5px; overflow: hidden; border: 1.5px solid var(--card-primary); background: #eef2f7; display: grid; place-items: center; color: #8592a6; font-size: 20px; font-weight: 700; } .idcard__photo img { width: 100%; height: 100%; object-fit: cover; } .idcard__name { font-size: 13px; font-weight: 800; line-height: 1.2; margin-bottom: 1px; } .idcard__desig { font-size: 9.5px; color: var(--card-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .idcard__rows { margin-top: 5px; display: grid; gap: 1.5px; } .idcard__row { display: grid; grid-template-columns: 52px 1fr; gap: 5px; font-size: 9.5px; } .idcard__row b { color: #5b6a80; font-weight: 600; } .idcard__foot { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 4px 10px 7px; } .idcard__qr { width: 46px; height: 46px; } .idcard__qr svg { width: 100%; height: 100%; } .idcard__sign { text-align: center; font-size: 8px; color: #5b6a80; } .idcard__sign img { height: 22px; margin: 0 auto 1px; object-fit: contain; } .idcard__sign b { display: block; font-size: 8.5px; color: #12203a; } .idcard__watermark { position: absolute; right: -14px; bottom: 46px; font-size: 46px; font-weight: 900; color: rgba(15, 61, 110, .045); letter-spacing: -.04em; pointer-events: none; user-select: none; } .idcard--back { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; } .idcard--back h4 { font-size: 10px; margin: 0 0 2px; text-transform: uppercase; letter-spacing: .08em; color: var(--card-primary); } .idcard--back ol { margin: 0; padding-left: 13px; font-size: 7.8px; line-height: 1.42; color: #3d4a63; } .idcard--back .idcard__contact { font-size: 7.9px; line-height: 1.35; color: #3d4a63; } .idcard__backfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .idcard-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* The card keeps its exact 336x212 geometry so it prints true to size; on very narrow phones it is scaled down visually rather than reflowed. */ @media (max-width: 400px) { .idcard { transform: scale(.82); transform-origin: top left; margin-right: -60px; margin-bottom: -38px; } } /* ------------------------------------------------------------------ misc */ .copy-field { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--mono); font-size: .86rem; word-break: break-all; } .qr-block { display: grid; gap: 10px; justify-items: center; text-align: center; } .qr-block svg { border-radius: 8px; border: 1px solid var(--border); background: #fff; } .qr-fallback { color: var(--muted); font-size: .8rem; } .kv-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--muted); } .kv-strip b { color: var(--text); font-weight: 600; } .file-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .file-preview img { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; } .doc-thumb { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); aspect-ratio: 16/10; } .doc-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .count-up { font-variant-numeric: tabular-nums; } .divider-text { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 16px 0; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ print */ @media print { body { background: #fff; } .site-header, .site-footer, .bottom-nav, .sidebar, .scrim, .no-print, .btn, .toast-host, .page-head__actions { display: none !important; } .app__main { padding: 0; } .card { border: 0; box-shadow: none; } a[href]::after { content: ""; } } /* ========================================================================== Theme toggle Show the icon for the theme the click would move you TO. Both icons are in the DOM and CSS chooses, so the button is right on first paint even before JavaScript runs and even when the server cannot know the OS preference. ========================================================================== */ .theme-toggle__light { display: none; } .theme-toggle__dark { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__light { display: inline-flex; } :root:not([data-theme="light"]) .theme-toggle__dark { display: none; } } :root[data-theme="dark"] .theme-toggle__light { display: inline-flex; } :root[data-theme="dark"] .theme-toggle__dark { display: none; } :root[data-theme="light"] .theme-toggle__light { display: none; } :root[data-theme="light"] .theme-toggle__dark { display: inline-flex; } .theme-toggle { transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .theme-toggle .icon { transition: transform var(--speed) var(--ease); } .theme-toggle:hover .icon { transform: rotate(-12deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle .icon, .theme-toggle:hover .icon { transition: none; transform: none; } } /* Each state is icon + wording, side by side and vertically centred. In the account menu the wording is visible; on the icon-only button it is sr-only and takes no space. */ .theme-toggle__dark, .theme-toggle__light { align-items: center; gap: 10px; } /* ========================================================================== Brand block An uploaded logo replaces the name entirely and keeps its own proportions: bounded by HEIGHT with width:auto, so a wide wordmark and a square emblem both sit correctly without cropping or stretching. object-fit:contain is the backstop if a logo is ever given explicit dimensions elsewhere. ========================================================================== */ .brand--logo { gap: 0; } .brand__logo { display: inline-flex; align-items: center; flex: none; max-width: 100%; } .brand__logo img { width: auto; height: var(--brand-logo-h, 36px); max-width: 100%; object-fit: contain; display: block; } .brand--sm { --brand-logo-h: 30px; } .brand--md { --brand-logo-h: 36px; } .brand--lg { --brand-logo-h: 46px; } /* However tall the logo is set to, it may never take more than its share of the bar: a wide wordmark bounded only by height still grows without limit sideways and pushes the navigation into wrapping. */ .brand__logo img { max-width: min(100%, 340px); } @media (max-width: 900px) { .brand__logo img { max-width: min(100%, 240px); } } /* Narrow screens: shrink the logo rather than letting it push the header wide. These cap the configured height; they never raise it. */ @media (max-width: 600px) { .brand--sm .brand__logo { --brand-logo-h: 26px !important; } .brand--md .brand__logo { --brand-logo-h: 30px !important; } .brand--lg .brand__logo { --brand-logo-h: 36px !important; } .brand__logo img { max-width: min(100%, 190px); } } @media (max-width: 380px) { .brand--md .brand__logo { --brand-logo-h: 26px !important; } .brand--lg .brand__logo { --brand-logo-h: 32px !important; } .brand__logo img { max-width: min(100%, 150px); } } /* The sidebar is a fixed 264px and the logo shares it with nothing else. */ .sidebar__head .brand__logo img { max-width: 200px; } .footer-brand { margin-bottom: 10px; } .footer-brand .brand { pointer-events: none; } /* ========================================================================== Dropdown panels on small screens A dropdown is anchored to its trigger with right:0 and grows leftward. The notification bell is not the rightmost control — the avatar sits beside it — so a 340px panel started ~60px off the left edge of a 320px screen, clipping the text and scrolling the whole page sideways. Below 600px the panel stops being a dropdown and becomes a sheet pinned to the viewport, which cannot overflow whatever it is anchored to. ========================================================================== */ @media (max-width: 599px) { .dropdown__menu { position: fixed; top: calc(var(--header-h) + 6px); left: 8px; right: 8px; width: auto; min-width: 0 !important; max-width: none; max-height: calc(100dvh - var(--header-h) - 16px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; z-index: 130; /* above the bottom nav (70) and the scrim (110) */ box-shadow: var(--shadow-lg); } /* The panel is fixed, so the header's stacking context must not trap it. */ .site-header { z-index: auto; } .site-header .dropdown__menu { z-index: 130; } } /* The notification list scrolls inside the panel rather than growing past it. */ .notif-list { max-height: min(380px, 52dvh); overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 599px) { .notif-list { max-height: none; } } /* Long notification text wraps instead of forcing the panel wider. */ .notif__title, .notif__text, .dropdown__item { overflow-wrap: anywhere; word-break: break-word; } .dropdown__menu { max-width: min(92vw, 380px); } @media (max-width: 599px) { .dropdown__menu { max-width: none; } } /* ========================================================================== Nothing may scroll the page sideways. A single overflow-x guard is worth more than chasing each offender, and the audit below keeps individual components honest. ========================================================================== */ html, body { max-width: 100%; overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* Tables are the usual culprit: let them scroll in their own box. */ .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap > table { min-width: 100%; } /* Long unbroken strings (URLs, codes, emails) must not widen a card. */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .break-anywhere, td, .card__body p, .alert__body { overflow-wrap: anywhere; } /* ========================================================================== Mobile menu (public header) Below the nav breakpoint the header links were simply display:none with no other way to reach them, and Sign in was hidden outright. This panel carries every link plus the auth actions. ========================================================================== */ .nav-toggle { display: inline-flex; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; } @media (min-width: 900px) { .nav-toggle { display: none; } } .mobile-menu { border-top: 1px solid var(--border); background: var(--header-bg, var(--surface)); box-shadow: var(--shadow-md); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu__inner { display: flex; flex-direction: column; padding: 10px 0 16px; } .mobile-menu a { padding: 12px 4px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border); } .mobile-menu a:last-of-type { border-bottom: 0; } .mobile-menu a.is-active { color: var(--primary); } .mobile-menu__auth { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .mobile-menu__auth a { border-bottom: 0; padding: 0; } @media (min-width: 900px) { .mobile-menu { display: none !important; } } body.has-open-menu { overflow: hidden; } /* ========================================================================== The 768-899px band .hide-desktop stopped at 768px but the sidebar only docked at 900px, so on an iPad in portrait the admin drawer was off-canvas with no control able to open it. Both now switch at the same 900px boundary. ========================================================================== */ @media (min-width: 768px) and (max-width: 899px) { .hide-desktop { display: inline-flex !important; } .hide-mobile { display: inline-flex !important; } } /* ========================================================================== Contact list and social row ========================================================================== */ .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .contact-list__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .contact-list__item:last-child { border-bottom: 0; } .contact-list__icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--primary-100); color: var(--primary); } .contact-list__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .contact-list__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .contact-list__value { font-weight: 600; color: var(--text); } a.contact-list__value:hover { color: var(--link, var(--primary)); } .social-row { display: flex; flex-wrap: wrap; gap: 10px; } .social-row__link { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-2); transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .social-row__link:hover { background: var(--primary); border-color: var(--primary); color: #fff; text-decoration: none; } .social-row__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ========================================================================== Appearance screen ========================================================================== */ .theme-grid { display: grid; gap: 4px; } .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .theme-row:last-child { border-bottom: 0; } .theme-row__label { font-weight: 600; font-size: .92rem; min-width: 0; flex: 1 1 160px; } .theme-row__inputs { display: flex; align-items: center; gap: 10px; flex: none; } .theme-row__inputs .input { width: 88px; } .theme-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .theme-swatch input[type="color"] { width: 46px; height: 34px; padding: 2px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); } .theme-swatch__tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .theme-preview { position: sticky; top: calc(var(--header-h) + 16px); } .theme-preview .card__body { background: var(--preview-bg, transparent); } @media (max-width: 900px) { .theme-preview { position: static; } } /* Compact controls inside dense admin tables. */ .input--sm, .select--sm { min-height: 34px; padding: 6px 9px; font-size: .88rem; width: auto; min-width: 84px; } .table--rules td { vertical-align: middle; } .table--rules .row--tight { flex-wrap: nowrap; align-items: center; } /* ========================================================================== ID card rendered from an uploaded template The container establishes a container-query context so a field's font size can be expressed in cqh — a percentage of the CARD's height — which is what makes one set of coordinates correct on screen, in print and at any width. ========================================================================== */ .idcard-tpl { position: relative; width: 100%; max-width: 640px; /* aspect-ratio, not a padding-top hack: container-type:size makes the element's size independent of its children, so a ::before spacer would leave the box at zero height. aspect-ratio gives it an intrinsic height from its own width, which is exactly what the template needs to keep the artwork's real proportions. */ aspect-ratio: var(--tpl-aspect, 85.6 / 54); container-type: size; overflow: hidden; border-radius: var(--radius-sm); background: #fff; } .idcard-tpl__art { position: absolute; inset: 0; width: 100%; height: 100%; /* contain, never cover: the design must not be cropped at any size. */ object-fit: contain; display: block; } .idcard-tpl__field { position: absolute; display: flex; align-items: center; overflow: hidden; } .idcard-tpl__text { line-height: 1.1; white-space: nowrap; } .idcard-tpl__photo { overflow: hidden; } .idcard-tpl__photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .idcard-tpl__qr svg { width: 100%; height: 100%; display: block; } /* Fallback for browsers without container queries: cqh resolves to 0 there, so pin a readable size rather than rendering invisible text. */ @supports not (container-type: size) { .idcard-tpl__text { font-size: 3.2vw; } @media (min-width: 700px) { .idcard-tpl__text { font-size: 20px; } } } /* The editor's drag surface. */ .tpl-editor { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 1100px) { .tpl-editor { grid-template-columns: minmax(0,1fr) 380px; } } .tpl-stage { position: relative; } .tpl-stage .idcard-tpl { max-width: 100%; box-shadow: var(--shadow-md); } .tpl-box { position: absolute; border: 1.5px dashed var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); cursor: move; border-radius: 3px; } .tpl-box.is-selected { border-style: solid; border-width: 2px; background: color-mix(in srgb, var(--primary) 18%, transparent); } .tpl-box__label { position: absolute; top: -18px; left: 0; font-size: 10px; font-weight: 700; background: var(--primary); color: #fff; padding: 1px 5px; border-radius: 3px; white-space: nowrap; } .tpl-box__handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; background: var(--primary); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; } .tpl-field { padding: 10px 0; border-bottom: 1px solid var(--border); } .tpl-field:last-child { border-bottom: 0; } .tpl-field__body { padding: 10px 0 0 26px; } .tpl-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .tpl-num { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--muted); } .tpl-num .input, .tpl-num .select { width: 100%; min-width: 0; } .choice--sm { font-size: .86rem; margin-top: 8px; } /* The editor stage matches the card exactly, so a box dragged here lands in the same place on the rendered card. */ .tpl-stage { aspect-ratio: var(--tpl-aspect, 85.6 / 54); width: 100%; max-width: 100%; } .tpl-stage .idcard-tpl { position: absolute; inset: 0; max-width: none; height: 100%; } /* ========================================================================== Dictation A row under the formatting toolbar: the microphone, the language it is listening for, and what it is doing. The dot pulses only while recording, so the state is visible without reading the label. ========================================================================== */ .rte__dictate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .rte__mic { display: inline-flex; align-items: center; gap: 8px; } .rte__mic-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); transition: background var(--speed) var(--ease); } .rte__mic.is-recording { border-color: var(--danger); color: var(--danger); } .rte__mic.is-recording .rte__mic-dot { background: var(--danger); animation: rte-pulse 1.1s ease-in-out infinite; } @keyframes rte-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .rte__mic.is-recording .rte__mic-dot { animation: none; } } .rte__lang { width: auto; min-width: 150px; padding-block: 4px; font-size: .82rem; } .rte__dictate-note { flex: 1 1 180px; min-width: 0; } /* Beside a single-line field (the headline) rather than inside the editor frame, so it needs its own spacing and no border of its own. */ .rte__dictate--inline { border: 0; background: none; padding: 8px 0 0; } /* On a phone the three parts stack rather than squeeze: a 150px language picker beside a button beside a sentence does not fit at 320px. */ @media (max-width: 480px) { .rte__dictate { gap: 8px; } .rte__mic { flex: 0 0 auto; } .rte__lang { flex: 1 1 auto; min-width: 0; } .rte__dictate-note { flex: 1 1 100%; } } /* Upload progress row: the running commentary and the way out of it. */ .upload-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 20px; } .upload-status [data-progress-text] { flex: 1 1 auto; min-width: 0; }