/* The shell. Load order: colours.css -> shell.css -> the current space's stylesheet. Follows ui-guidelines.md: flat, no shadows anywhere, white cards on a gray-50 page, gray-200 borders, gray-100 dividers, 12px radius, SVG icons at gray-400. The four brand tokens come from colours.css; the neutrals are the documented gray scale. */ :root { /* Neutrals — ui-guidelines.md colour palette */ --page-bg: #f9fafb; /* gray-50 app background */ --card-bg: #ffffff; /* white all tiles */ --border: #e5e7eb; /* gray-200 tile borders */ --divider: #f3f4f6; /* gray-100 internal separators */ --text: #374151; /* gray-700 body text */ --text-strong: #1f2937; /* gray-800 emphasised inline values */ --text-muted: #9ca3af; /* gray-400 labels, icons, secondary info */ --text-mid: #6b7280; /* gray-500 section-header icons */ /* Brand, from colours.css */ --primary: var(--sky-blue); /* #1640FF actions, links, active */ --brand-dark: var(--night-blue); /* #02023A headings, sidebar bg */ /* The brand gradient, for a page that wants a full-colour moment instead of the flat page background — currently the launcher. Same palette as the sign-in hero panel (--night-blue through an orange glow), on the diagonal rather than sign-in's near-vertical: the launcher's hero is a wide, short box, not a tall narrow one, and a near-vertical angle reads as flat horizontal bands at that aspect ratio instead of a diagonal. */ --brand-gradient: linear-gradient(225deg, rgba(242, 107, 17, 0.85) 0%, rgba(9, 5, 92, 0.95) 55%, rgba(2, 2, 58, 1) 100%); /* A second full-colour moment, for the People screens and the two "set up a company" forms — same night-blue-and-orange palette as --brand-gradient, plus a cyan highlight. */ --gradient-alt: linear-gradient(5deg, rgba(9, 5, 92, 1) 56%, rgba(242, 107, 17, 0.82) 100%, rgba(0, 212, 255, 1) 50%); /* Tints, built from the documented chip recipe */ --primary-wash: #eff6ff; --primary-edge: #bfdbfe; --focus-soft: 0 0 0 2px #1640ff33; --focus-hard: 0 0 0 2px #1640ff; /* Overridden per space on . Platform pages keep brand dark. */ --app-accent: var(--night-blue); --app-accent-rgb: var(--night-blue-rgb); --radius: 12px; /* rounded-xl */ --radius-sm: 8px; /* rounded-lg — buttons, chips */ --rail-width: 15rem; --rail-width-collapsed: 4.25rem; --topbar-height: 3.25rem; --measure: 68ch; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.55; color: var(--text); background: var(--page-bg); } h1, h2, h3 { color: var(--brand-dark); line-height: 1.25; margin: 0 0 0.5rem; font-weight: 700; } h1 { font-size: 1.5rem; letter-spacing: -0.01em; } h2 { font-size: 0.875rem; } h3 { font-size: 0.8125rem; } p { margin: 0 0 0.875rem; max-width: var(--measure); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Soft ring is the default. ui-guidelines.md reserves the hard ring for prominent forms and modals — see .centred__card input below. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-soft); border-radius: var(--radius-sm); } /* Section label. Sentence case at gray-400 — ui-guidelines.md rules out uppercase tracking-wide labels. */ .eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; } .muted { color: var(--text-muted); } .faint { color: var(--text-muted); } /* SVG icons: 13px inline, 14px in a tile header, gray-400, never emoji. */ .icon { flex: 0 0 auto; color: var(--text-muted); vertical-align: -0.125em; } /* --- Topbar ------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.875rem; height: var(--topbar-height); padding: 0 1rem; background: var(--card-bg); border-bottom: 1px solid var(--border); } /* Opens the mobile sidebar overlay. Only ever visible below the tablet breakpoint (see Responsive, below) — the desktop rail is always on screen, so there is nothing for this button to do there. */ .topbar__menu-toggle { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-mid); cursor: pointer; } .topbar__menu-toggle:hover { background: var(--page-bg); color: var(--brand-dark); } .topbar__menu-toggle .icon { color: currentColor; } .brand { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 700; font-size: 0.9375rem; color: var(--brand-dark); } .brand:hover { text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; padding: 0.2rem; border-radius: 6px; background: var(--white); border: 1px solid var(--border); } .brand-mark img { width: 100%; height: 100%; object-fit: contain; } .brand__tenant { display: inline-flex; align-items: center; font-weight: 600; font-size: 0.75rem; color: var(--text-mid); padding: 0.2rem 0.6rem; margin-left: 0.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--page-bg); } .topbar__spacer { flex: 1 1 auto; } /* --- Space switcher ---------------------------------------------------- */ .switcher { display: flex; gap: 0.25rem; } .switcher__item { padding: 0.3rem 0.7rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; } .switcher__item:hover { background: var(--page-bg); color: var(--brand-dark); text-decoration: none; } /* The active space also gets the accent wash in the chrome, on top of its own icon colour below. */ .switcher__item[aria-current="true"] { color: var(--primary); background: var(--primary-wash); border-color: var(--primary-edge); } /* Each application's own bright, mutually distinct colour for its topbar icon — deliberately not `Application.accent` (apps/core/applications.py), which is one of the three fixed brand tokens and is reused across more than one application by design (see ui-guidelines.md). This is a purely visual aid for telling the switcher's tabs apart at a glance, so it is a topbar-only palette, keyed by the `data-app` attribute set in _topbar.html rather than by the shared token. */ .switcher__item[data-app="crm"] .icon, .switcher-dropdown__toggle[data-app="crm"] .icon, .switcher-dropdown__item[data-app="crm"] .icon { color: #1640ff; } .switcher__item[data-app="hr"] .icon, .switcher-dropdown__toggle[data-app="hr"] .icon, .switcher-dropdown__item[data-app="hr"] .icon { color: #f69400; } .switcher__item[data-app="recruitment"] .icon, .switcher-dropdown__toggle[data-app="recruitment"] .icon, .switcher-dropdown__item[data-app="recruitment"] .icon { color: #ec4899; } .switcher__item[data-app="procurement"] .icon, .switcher-dropdown__toggle[data-app="procurement"] .icon, .switcher-dropdown__item[data-app="procurement"] .icon { color: #10b981; } .switcher__item[data-app="projects"] .icon, .switcher-dropdown__toggle[data-app="projects"] .icon, .switcher-dropdown__item[data-app="projects"] .icon { color: #8b5cf6; } .switcher__item[data-app="sandbox"] .icon, .switcher-dropdown__toggle[data-app="sandbox"] .icon, .switcher-dropdown__item[data-app="sandbox"] .icon { color: #06b6d4; } /* Same entries as `.switcher`, collapsed into one dropdown. Hidden on desktop; swapped in below the tablet breakpoint (see Responsive, below) in place of the flat row, which would otherwise need to scroll sideways to fit every application a person can open. */ .switcher-dropdown { display: none; position: relative; } .switcher-dropdown__toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); font-size: 0.75rem; font-weight: 600; color: var(--text-mid); cursor: pointer; white-space: nowrap; } .switcher-dropdown__toggle:hover { color: var(--brand-dark); } .switcher-dropdown__toggle .icon { color: currentColor; } /* `position: fixed`, not `absolute` — its top/left come from the toggle button's own bounding rect (see _topbar.html), so it floats above the page instead of being clipped by the topbar's horizontal scrolling. */ .switcher-dropdown__panel { position: fixed; z-index: 30; min-width: 12rem; /* Both panels only ever open on a narrow screen. Cap them against the viewport so a long list of applications cannot run off the side or past the bottom of a short phone — it scrolls inside itself instead. */ max-width: calc(100vw - 1rem); max-height: calc(100vh - var(--topbar-height) - 1.5rem); overflow-y: auto; padding: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); } .switcher-dropdown__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; } .switcher-dropdown__item:hover { background: var(--page-bg); color: var(--brand-dark); text-decoration: none; } .switcher-dropdown__item[aria-current="true"] { color: var(--primary); background: var(--primary-wash); } /* Separates the application entries from the Applications/People admin shortcuts folded into the same panel below the tablet breakpoint. */ .switcher-dropdown__divider { height: 1px; margin: 0.3rem 0.2rem; background: var(--divider); } /* The account dropdown, the second of the two controls the topbar shrinks to below the tablet breakpoint. Icon only, and right-aligned: its panel is placed from the viewport's right edge (see _topbar.html) so the last control in the bar cannot open a panel off the side of the screen. */ .switcher-dropdown__toggle--icon { padding: 0.3rem 0.45rem; } .switcher-dropdown__panel--right { right: 0; } /* Who you are and where you are — the two things the narrow bar stops spelling out, said once at the top of the panel instead. */ .switcher-dropdown__who { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem 0.35rem; max-width: 14rem; } .switcher-dropdown__who strong { font-size: 0.8125rem; color: var(--brand-dark); } .switcher-dropdown__who span { font-size: 0.6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; } .switcher-dropdown__company { color: var(--text-mid); font-weight: 600; } /* Sign out is a POST, so it is a button in a form rather than a link. It still reads as one more row of the panel. */ .switcher-dropdown__form { margin: 0; } button.switcher-dropdown__item { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } .who { font-size: 0.75rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; } .divider-v { height: 0.875rem; width: 1px; background: var(--border); flex-shrink: 0; } .logout { margin: 0; } .logout button { font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--white); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 0.3rem 0.65rem; cursor: pointer; } .logout button:hover { filter: brightness(1.06); } /* --- Body layout ------------------------------------------------------- */ .shell-body { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); align-items: stretch; min-height: calc(100vh - var(--topbar-height)); } .shell-body--bare { grid-template-columns: minmax(0, 1fr); } /* Sidebar background is brand dark, per the colour palette table. Fixed to the full height of the viewport below the topbar — not just as tall as its own content — so it reads as a permanent rail rather than a box that happens to float above the page background. It scrolls internally once its content outgrows that height; the scrollbar itself stays hidden (still scrollable by wheel, touch or keyboard) so it does not compete with the topbar's own hairline border. */ .shell-rail { position: sticky; top: var(--topbar-height); align-self: stretch; height: calc(100vh - var(--topbar-height)); overflow-y: auto; padding: 1rem 0.625rem; background: var(--brand-dark); scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ } .shell-rail::-webkit-scrollbar { display: none; } /* Chrome, Safari */ .shell-content { padding: 1.5rem; min-width: 0; } /* Full-bleed brand gradient behind a page's content, rather than the flat page background — the launcher is the one page that gets this. The content inside stays exactly as wide as everywhere else (.content-wrap is unaffected); only the colour behind it changes, edge to edge. */ .shell-content--gradient { background: var(--brand-gradient); } .shell-content--gradient-alt { background: var(--gradient-alt); } .content-wrap { max-width: 72rem; margin: 0 auto; } /* The launcher family (Your applications, People, Applications settings) sets its own, wider max-width via .launcher — this stops the generic content wrapper from re-capping it back down to 72rem. Every other page (an application's own placeholder or panel content) never has a .launcher inside it, so this is scoped to exactly the pages that need it rather than widening the whole shell. */ .content-wrap:has(.launcher) { max-width: 96rem; } /* --- Sidebar ----------------------------------------------------------- */ .rail__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: rgb(var(--white-rgb) / 0.45); cursor: pointer; } .rail__toggle:hover { background: rgb(var(--white-rgb) / 0.07); color: var(--white); } .rail__toggle .icon { color: currentColor; } /* Collapsing points the arrow left (fold this way); collapsed, it points right (unfold this way). */ .rail__toggle .icon { transform: scaleX(-1); } body.sidebar-collapsed .rail__toggle .icon { transform: none; } /* The Dashboard link: every application's own home page, always the very first row, styled exactly like any other row in the rail — a .rail__link like any other. The collapse toggle shares this row, pinned to the far right, so it never takes a row of its own. */ .rail__home-row { display: flex; align-items: center; gap: 0.375rem; padding-bottom: 0.875rem; margin-bottom: 0.625rem; border-bottom: 1px solid rgb(var(--white-rgb) / 0.08); } .rail__home-row .rail__link { flex: 1 1 auto; min-width: 0; } /* Closes the mobile sidebar overlay from inside it. Desktop already has the fold-away arrow (.rail__toggle) for the same row; this is its mobile-only counterpart, shown instead of that button below the tablet breakpoint. */ .rail__close { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: rgb(var(--white-rgb) / 0.45); cursor: pointer; } .rail__close:hover { background: rgb(var(--white-rgb) / 0.07); color: var(--white); } .rail__close .icon { color: currentColor; } /* Every menu is a flat section: an uppercase label, then its pages — no per-menu disclosure. ui-guidelines.md rules out uppercase tracking-wide labels everywhere else; the sidebar section label is the one deliberate exception, so it reads at a glance against the dark rail. */ .rail__section + .rail__section { margin-top: 1.125rem; } .rail__section-label { margin: 0 0 0.375rem; padding: 0 0.625rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--mustard-yellow-rgb) / 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail__section-items { list-style: none; margin: 0; padding: 0; } .rail__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.4rem 0.625rem; font-size: 0.8125rem; color: rgb(var(--white-rgb) / 0.65); border-radius: var(--radius-sm); } /* Every application shares this one sidebar renderer (_sidebar.html), so one rule here covers every application's menu icons. */ .rail__link .icon { color: rgb(17 230 250 / 45%); } .rail__link:hover { color: var(--white); background: rgb(var(--white-rgb) / 0.07); text-decoration: none; } /* The current page, in every application's sidebar alike — fixed to the brand's mustard yellow rather than the per-app accent, unlike the rest of the chrome (§2.6 normally puts the app's own accent here). */ .rail__link[aria-current="page"] { color: var(--brand-dark); font-weight: 600; background: var(--mustard-yellow); } .rail__link[aria-current="page"] .icon { color: var(--brand-dark); } /* --- Collapsed sidebar -------------------------------------------------- Collapses to the left: the rail column shrinks, the content column takes the freed space. Every row is already flat, so collapsing only drops the text and centres the icon — nothing needs to hide behind a disclosure. Desktop only — below the breakpoint the rail is a full-screen overlay (see Responsive, below), so collapsing it would fight that instead. */ @media (min-width: 64.0625rem) { body.sidebar-collapsed .shell-body { grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr); } /* The home row's link and toggle stack instead of sitting side by side — there is no room for both at icon width. */ body.sidebar-collapsed .rail__home-row { flex-direction: column; gap: 0.375rem; } body.sidebar-collapsed .rail__section-label, body.sidebar-collapsed .rail__link-label { display: none; } body.sidebar-collapsed .rail__link { justify-content: center; padding: 0.55rem 0.25rem; } } /* --- Panels and rows --------------------------------------------------- */ /* A page's own heading beside its one primary action — "People" and "Add somebody", "Applications" and "Save". Wraps below the heading on a narrow viewport rather than squeezing the button against the text. */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .page-head__text { min-width: 0; } .page-head__text .launcher__lede { margin-bottom: 0; } /* A small colour-washed icon tile in a panel header, in place of the plain inline icon — a record-detail page's sections read as distinct blocks, not a settings list. */ .panel__icon-box { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--primary-wash); color: var(--primary); } /* A read-only value, styled like a disabled input — a record-detail page reading data back, not asking for it. */ .info-field { display: flex; flex-direction: column; gap: 0.35rem; } .info-field__label { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); } .info-field__value { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page-bg); font-size: 0.8125rem; color: var(--text); } .info-field__value .icon { color: var(--text-muted); } .info-field__value--muted { color: var(--text-muted); font-style: italic; } .panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel__header { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--divider); } .panel__header .icon { color: var(--text-mid); } .panel__header h2 { margin: 0; } .panel__body { padding: 1.25rem; } .panel__body > p:last-child { margin-bottom: 0; } /* A heading that reads as a label for the box it sits in, not a toolbar over a divider — a form's section heading, rather than a panel with actions of its own. */ .panel--seamless .panel__header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.25rem; } .panel--seamless .panel__header h2 { color: #243fba; } .panel--seamless .panel__body { padding-top: 0; } /* A left-aligned run of buttons — "submit" beside "cancel" — as opposed to .signup__actions, which spreads a submit button from a note on its right. */ .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .rows { border-top: 1px solid var(--divider); } .rows > * + * { border-top: 1px solid var(--divider); } /* Server-side pagination — see includes/_pagination.html. Sits at the foot of the panel it paginates, not floating below it. */ .pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--divider); } .pagination__summary { margin: 0; font-size: 0.75rem; color: var(--text-muted); } .pagination__controls { display: flex; align-items: center; gap: 1rem; } .pagination__page { font-size: 0.75rem; color: var(--text-mid); } .pagination__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--primary); } .pagination__link:hover { text-decoration: none; color: var(--brand-dark); } .pagination__link .icon { color: currentColor; } .pagination__link--disabled { color: var(--text-muted); cursor: default; } /* Both link states share one arrow-right icon; the "previous" one is just that icon mirrored, the same trick the sidebar's collapse toggle uses. */ .pagination__arrow--prev { display: inline-flex; transform: scaleX(-1); } /* --- Messages ---------------------------------------------------------- */ .messages { list-style: none; margin: 0 0 1rem; padding: 0; } .messages li { padding: 0.625rem 0.875rem; border: 1px solid var(--primary-edge); border-radius: var(--radius-sm); background: var(--primary-wash); color: var(--primary); font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.5rem; } /* Warning / error chip colours, from ui-guidelines.md */ .messages li.error, .messages li.warning { border-color: #fecaca; background: #fef2f2; color: #dc2626; } .messages li.success { border-color: #bbf7d0; background: #f0fdf4; color: #059669; } .errorlist { list-style: none; margin: 0 0 0.875rem; padding: 0.625rem 0.875rem; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; } .errorlist li + li { margin-top: 0.25rem; } /* --- Forms ------------------------------------------------------------- */ .field { margin-bottom: 0.875rem; } .field label { display: block; font-size: 0.75rem; font-weight: 600; color: #000; margin-bottom: 0.3rem; } .field input { width: 100%; font: inherit; font-size: 0.8125rem; padding: 0.5rem 0.7rem; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } /* A multi-line field. The same box as `.field input`; the only difference is that it can grow. `.code-input` is the variant for a field holding markup rather than prose — an email template's body — where a proportional face hides a stray tag and a wrapped line hides the indentation that makes the markup readable. */ .field textarea { width: 100%; font: inherit; font-size: 0.8125rem; padding: 0.5rem 0.7rem; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; min-height: 8rem; } .field textarea.code-input { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; white-space: pre; overflow-x: auto; tab-size: 2; } .field .helptext { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } /* A compound "https://." input — prefix and suffix flank the one part the visitor actually types. The inner input drops its own border so the group reads as one field. */ .field-domain { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); overflow: hidden; } .field-domain:focus-within { border-color: var(--primary); } .field-domain__prefix { display: flex; align-items: center; padding-left: 0.7rem; color: var(--text-muted); font-size: 0.8125rem; white-space: nowrap; } .field-domain input { flex: 1 1 auto; min-width: 0; width: auto; border: 0; background: transparent; padding: 0.5rem 0.4rem; font: inherit; font-size: 0.8125rem; color: var(--text); } .field .field-domain input:focus-visible { outline: none; box-shadow: none; } .field-domain__suffix { display: flex; align-items: center; padding: 0 0.7rem; background: var(--page-bg); border-left: 1px solid var(--border); color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } /* A preview standing in for a text input — click anywhere in the column to open the file picker. */ .photo-input { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; cursor: pointer; } .photo-input__frame { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: var(--radius); border: 1px dashed var(--border); background: var(--page-bg); color: var(--text-muted); overflow: hidden; } .photo-input__frame img { width: 100%; height: 100%; object-fit: cover; } .photo-input:hover .photo-input__frame { border-color: var(--primary); color: var(--primary); } .photo-input__text { display: flex; flex-direction: column; align-items: center; } .photo-input__action { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; color: var(--primary); } .photo-input__action .icon { color: inherit; } /* Primary action */ .button { display: inline-block; font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 0.75rem; color: var(--white); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); cursor: pointer; } .button:hover { filter: brightness(1.06); text-decoration: none; } /* Ghost / secondary — same fill as the primary action, per the button colour rule: every button is #1640FF with white text. */ .button--ghost { color: var(--white); background: var(--primary); border-color: var(--primary); } .button--ghost:hover { background: var(--primary); filter: brightness(1.06); } .button--block { display: block; width: 100%; text-align: center; } /* --- Centred pages: login, errors -------------------------------------- */ .centred { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1.25rem; background: var(--page-bg); } .centred__brand-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1rem; color: var(--brand-dark); margin-bottom: 1.5rem; } /* Signup and "add a company" sit on --gradient-alt instead of the flat page background; the brand row is directly on it, outside the card, so it needs the same light-on-dark treatment the gradient pages use elsewhere (see .shell-content--gradient-alt in launcher.css). */ .centred--gradient-alt { background: var(--gradient-alt); } .centred--gradient-alt .centred__brand-row { color: var(--white); } .centred__brand-row .brand-mark { width: 2.25rem; height: 2.25rem; } /* --- Sign in: brand panel beside the form, not a floating card --------- */ .split { display: flex; min-height: 100vh; } /* The gradient lives on the left panel only — the form side carries no background of its own, so it stays whatever the page behind it is. */ .split__hero { flex: 1 1 75%; display: flex; align-items: center; justify-content: center; padding: 3rem; text-align: center; color: var(--white); background: #09055c; background: linear-gradient(4deg, rgba(9, 5, 92, 1) 33%, rgba(242, 107, 17, 0.82) 100%, rgba(0, 212, 255, 1) 50%); } .split__hero-inner { max-width: 26rem; } .split__hero h1 { color: var(--white); font-size: 2rem; letter-spacing: -0.02em; } .split__hero p { color: rgb(var(--white-rgb) / 0.78); margin-bottom: 0; } .split__form { flex: 0 0 25%; min-width: 22rem; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; } .split__form-inner { width: 100%; max-width: 20rem; } /* Hard focus ring: this is a prominent form, same treatment as the other standalone pages' .centred__card. */ .split__form-inner input:focus-visible { box-shadow: var(--focus-hard); } .split__title { margin-bottom: 0.375rem; } .split__subtitle { color: var(--text-mid); font-size: 0.8125rem; margin-bottom: 1.5rem; } /* A secondary way out of a form, sitting above its main action rather than below it — "forgotten your password?" is read while looking at the password field, not after deciding to submit. Right-aligned so it reads as attached to the field above rather than as a second heading. */ .split__aside { margin: -0.375rem 0 1rem; text-align: right; font-size: 0.75rem; } /* A label icon inside the field, left of the text — email and password on the sign-in form only. Composes with the reveal toggle shell.js adds on the right: that wraps the input in its own .reveal, this stays outside it, so both sit in the same relatively-positioned .field-icon. Two things kept the password field's padlock off the screen, and both are fixed here. Direct child only: the reveal toggle's own eye icon is a descendant of .field-icon too, and a plain `.field-icon .icon` dragged it over to the left edge on top of the padlock. And a z-index: .reveal is positioned and comes after this icon in the document, so without one the wrapped input's own background painted straight over it. */ .field-icon { position: relative; } .field-icon > .icon { position: absolute; z-index: 1; top: 50%; left: 0.75rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .field-icon input { padding-left: 2.25rem; } @media (max-width: 64rem) { .split { flex-direction: column; min-height: 0; } .split__hero { flex: 0 0 auto; padding: 2.5rem 1.5rem; } .split__form { flex: 1 1 auto; min-width: 0; } } .centred__card { width: 100%; max-width: 23rem; background: var(--card-bg); border: 1px solid #7e859357; border-radius: var(--radius); padding: 1.75rem; } /* --- A two-column form grid, for a page with many short fields --------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .form-grid .field { min-width: 0; margin-bottom: 0; } @media (max-width: 34rem) { .form-grid { grid-template-columns: 1fr; } } /* Hard focus ring: this is a prominent form. */ .centred__card input:focus-visible { box-shadow: var(--focus-hard); } .centred__brand { font-size: 1.25rem; font-weight: 700; color: #d3dff7; margin: 0 0 0.25rem; } /* --- Responsive -------------------------------------------------------- Breakpoint scale: https://stackoverflow.com/a/7354648 — 320 / 481 / 641 / 961 / 1025 / 1281. "Big landscape tablets, laptops and desktops" starts at 1025px, so that is where the persistent desktop rail starts too: a landscape iPad (1024px) still gets the phone's full-screen overlay, not the desktop column. */ @media (max-width: 64rem) { .shell-body { grid-template-columns: minmax(0, 1fr); } .shell-content { padding: 1rem; } .divider-v, .rail__toggle { display: none; } /* The flat row is replaced, not shrunk. Application tabs and the Applications/People admin shortcuts become one dropdown; the person's name and sign out become a second. Nothing is dropped — both panels hold every entry the desktop row spells out, plus the company name and the signed-in address the narrow bar no longer has room to show. */ .switcher, .switcher__item--admin, .who, .logout { display: none; } .switcher-dropdown { display: block; } .topbar__menu-toggle { display: inline-flex; } /* The desktop rail sits in the grid and is always on screen; here it becomes a full-screen overlay instead — off canvas and taking no space at all while closed, covering the whole viewport below the topbar the moment it opens. `visibility` is delayed on the way in and applied at once on the way out, so a closed drawer's links are never tab-reachable even though the transform alone would already put them off screen. */ .shell-rail { position: fixed; top: var(--topbar-height); left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 30; transform: translateX(-100%); visibility: hidden; transition: transform 220ms ease, visibility 0s linear 220ms; } body.mobile-sidebar-open .shell-rail { transform: translateX(0); visibility: visible; transition: transform 220ms ease; } .rail__close { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .shell-rail { transition-duration: 0.01ms; } } /* By now the bar is four controls at most: the menu button, the brand, the application dropdown and the account dropdown. It must fit as it is — the topbar never scrolls sideways (a control you have to swipe to reach is a control most people never find) and never wraps (that would grow the bar taller and push every page down). Only the brand flexes: it is the one item that can give up width, and it truncates rather than pushing a control off the end. */ @media (max-width: 64rem) { .topbar__menu-toggle, .switcher-dropdown, .switcher__item { flex-shrink: 0; } .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; } .brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Phone. The two dropdowns drop their labels and stand as their icons — which application you are in is already named by the page itself, and the account button is a person icon everywhere it appears. The company name moves into the account panel, which is where it now lives. */ @media (max-width: 40rem) { .topbar { padding: 0 0.75rem; gap: 0.5rem; } .brand__tenant { display: none; } .switcher__item { padding: 0.3rem 0.5rem; } .switcher-dropdown__label { display: none; } .switcher-dropdown__toggle { padding: 0.3rem 0.45rem; } } /* --- Chips ------------------------------------------------------------- */ /* A small factual label: a tenant role, an entitlement. Not a status. */ .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page-bg); font-size: 0.6875rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; } /* The topbar identity link doubles as the way to your other companies. */ a.who { color: var(--text-mid); } a.who:hover { color: var(--brand-dark); text-decoration: none; } .launcher__foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-muted); max-width: var(--measure); } /* --- Password reveal --------------------------------------------------- */ .reveal { position: relative; display: block; } .reveal input { padding-right: 2.5rem; } .reveal__toggle { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; } .reveal__toggle:hover { color: var(--brand-dark); background: var(--page-bg); } .reveal__toggle .icon { color: currentColor; } /* --- Busy state ------------------------------------------------------- */ /* Signing up provisions a schema, so the wait is real. A disabled button that says what it is doing beats a dead one that invites a second click. */ .button.is-busy { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.75; cursor: progress; } .button:disabled { cursor: not-allowed; } .spinner { display: inline-block; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 600ms linear infinite; flex: 0 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } } /* While a form is busy, stop the rest of it looking clickable. */ form.is-busy .picker__label, form.is-busy .field { opacity: 0.65; pointer-events: none; } /* --- A credential shown once ------------------------------------------ */ /* The temporary password an admin reads out. Deliberately loud: it is on screen once and never again. */ .credential { border: 1px solid var(--primary-edge); background: var(--primary-wash); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: 0.75rem; } .credential h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .credential__pair { display: grid; gap: 0.4rem; margin: 0.75rem 0; } .credential__row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .credential__key { font-size: 0.6875rem; font-weight: 600; color: var(--text-mid); min-width: 5.5rem; } .credential__value { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--brand-dark); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; user-select: all; } /* A button that reads as a link. For a destructive-free action that must be a POST, like signing out. */ .linkish { font: inherit; font-size: inherit; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; text-decoration: underline; }