/* * CommonLynk — Canonical Design Tokens * Always reference via var(--cl-*). Never hardcode hex values in new code. * * Token roles: * --cl-ink primary text, headings, navbar (was old navy hex) * --cl-paper page and card background (was old cream hex) * --cl-accent CTAs, active states, highlights (was old gold hex) * --cl-teal secondary actions, success states (tokenised teal) * --cl-danger destructive actions, delete buttons, error states * (replaces the retired burgundy where it was used for danger) * --cl-muted muted body text, hints, secondary labels * --cl-sidebar sidebar background — defaults to --cl-ink; tenant base.html * may override per OrgProfile.nav_color * --cl-border subtle 1px border / divider — derived from --cl-ink * * Per-template :root blocks in templates/base.html and templates/landing/base.html * still declare local aliases (--navy, --teal, --gold, --burgundy etc.). The * legacy hex literals they used to hold have been swept to var(--cl-*) refs. */ /* Global scrollbar — gold thumb on neutral track. Overridden in templates/base.html for the .sidebar (translucent white on the navy sidebar background reads cleaner than gold). */ ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#C4A875;border-radius:999px} ::-webkit-scrollbar-thumb:hover{background:#0B1F3A} *{scrollbar-width:thin;scrollbar-color:#C4A875 transparent} :root{ /* Core palette */ --cl-ink: #0B1F3A; /* Dark navy — primary text, headings, navbar */ --cl-paper: #F5F2EC; /* Off-white — page & card backgrounds */ --cl-accent: #C4A875; /* Warm gold — CTAs, active states, highlights */ --cl-teal: #3FA68D; /* Teal — secondary actions, success states */ --cl-teal-dark: #0F6E56; /* Dark teal — done/complete text on teal-tinted fills */ --cl-danger: #C0392B; /* Destructive actions, delete buttons, error states */ --cl-muted: #6B7280; /* Muted body text, hints, secondary labels */ /* Extended status palette */ --cl-info: #1565C0; /* Informational accents, info banners, links */ --cl-warning: #B45309; /* Warning/attention text & badges (amber) */ --cl-purple: #7C3AED; /* Category/tag accents */ --cl-white: #FFFFFF; /* True white card surfaces & inverse text */ --cl-page: #FDFCF9; /* Marketing ground — a lighter paper. The PRODUCT (tenant + Platform Admin) stays on --cl-paper; this is the landing site's airier surface, deliberately a separate token so restyling marketing can never move the workspace ground. */ --cl-warm: #F5F1E9; /* Marketing rhythm band — a warm fill one step darker than --cl-page, used to separate marketing sections without introducing a second ground colour. The PRODUCT does not use it. */ --cl-accent-deep: #A6884F; /* Deep gold — accent hover/pressed and gold text that must clear contrast on a light ground (--cl-accent alone does not). */ --cl-shadow: rgba(11, 31, 58, 0.15); /* Ink-tinted drop shadow */ /* Comma-separated RGB triplets of the core colors, for translucency. rgba() cannot take a hex custom property as its color argument, so rgba(var(--cl-accent), .1) silently fails — use rgba(var(--cl-accent-rgb), .1). Keep each triplet in sync with the hex above it. */ --cl-ink-rgb: 11, 31, 58; --cl-paper-rgb: 245, 242, 236; --cl-accent-rgb: 196, 168, 117; --cl-danger-rgb: 192, 57, 43; --cl-white-rgb: 255, 255, 255; /* Light tint backgrounds — paired with their status colors */ --cl-teal-bg: #EAF6F2; /* success/teal state backgrounds */ --cl-danger-bg: #FDECEA; /* error/danger state backgrounds */ --cl-info-bg: #EEF4FB; /* info state backgrounds */ --cl-warning-bg: #FEF3E2; /* warning state backgrounds */ /* ── Attention banners (the amber "act on your subscription" family) ── A SEPARATE ramp from --cl-warning / --cl-warning-bg above, which is the inline warning TEXT + badge pair. These three are the filled banner treatment: a tinted card with its own hairline and high-contrast body copy. Keeping them apart is deliberate — folding the banner into --cl-warning would restyle every warning badge on the platform. Two severities, because the tenant app shell renders two different messages: --cl-warn-* is the workspace-is-read-only grace banner (and the .cl-badge-gold pair, which was a verbatim second copy of it), while --cl-warn-soft-* is the dismissible "renews in N days" heads-up. */ --cl-warn-bg: #FEF3C7; /* grace banner + gold badge fill */ --cl-warn-text: #92400E; /* grace banner + gold badge copy */ --cl-warn-border: #FDE68A; /* grace banner hairline */ --cl-warn-soft-bg: #FEF9C3; /* expiry-soon banner fill */ --cl-warn-soft-text: #854D0E; /* expiry-soon banner copy */ --cl-warn-soft-border: #FEF08A; /* expiry-soon banner hairline */ /* Derived semantic tokens */ --cl-text: var(--cl-ink); --cl-bg: var(--cl-paper); --cl-sidebar: var(--cl-ink); /* Sidebar background — overridden per-tenant in base.html */ --cl-surface: #0B1F3A; /* Dark navy surface (buttons, badges, popovers) — pinned, never follows tenant text color */ /* D1 (2026-08-27) — the PRIMARY button is NAVY, not gold. Gold is now the ACCENT role plus the on-navy inversion only. These two tokens had ZERO consumers when the decision landed (`.cl-btn-primary` in commonlynk.components.css already hardcoded var(--cl-ink)), so flipping them changed no pixel — it makes the token layer AGREE with the component layer, which is what stops the next author reading `--cl-btn-primary` and building a gold button that no longer matches anything. */ --cl-btn-primary: var(--cl-ink); --cl-btn-text: var(--cl-white); --cl-success: var(--cl-teal); --cl-border: #E8E8E5; /* Subtle 1px border / divider */ /* Focus / selection halo — the ring drawn behind a focused control, as `box-shadow: 0 0 0 3px var(--cl-focus-ring)`. A COLOUR rather than a whole shadow, because that is the shape every caller already uses. It was REFERENCED here and defined nowhere: an undefined custom property makes the whole declaration invalid, so any template that did not alias it locally rendered no focus ring at all. Keyboard operators have to be able to see which field they are in, and some of those fields hold credentials. */ --cl-focus-ring: rgba(var(--cl-accent-rgb), 0.35); /* Typography */ --cl-font-sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif; --cl-font-mono:"JetBrains Mono",ui-monospace,Menlo,Monaco,Consolas,monospace; --cl-fs-display:56px; --cl-fs-h1:36px; --cl-fs-h2:22px; --cl-fs-h3:15px; --cl-fs-body:14px; --cl-fs-small:12px; --cl-fs-label:10px; --cl-fw-light:300; --cl-fw-regular:400; --cl-fw-medium:500; --cl-fw-semibold:600; --cl-fw-bold:700; --cl-track-display:-0.03em; --cl-track-heading:-0.02em; --cl-track-label:0.18em; /* === Component Tokens === */ /* Buttons */ --cl-btn-padding-y: 0.5rem; --cl-btn-padding-x: 1.1rem; --cl-btn-padding-y-sm: 0.3rem; --cl-btn-padding-x-sm: 0.75rem; --cl-btn-padding-y-lg: 0.65rem; --cl-btn-padding-x-lg: 1.5rem; --cl-btn-font-size: 0.875rem; --cl-btn-font-size-sm: 0.8rem; --cl-btn-font-weight: 600; --cl-btn-radius: 6px; --cl-btn-transition: background 150ms ease, opacity 150ms ease, box-shadow 150ms ease; /* Surfaces */ --cl-radius-sm: 4px; --cl-radius-md: 8px; --cl-radius-lg: 12px; --cl-radius-card: 10px; --cl-radius-modal: 14px; --cl-radius-badge: 999px; /* Elevation */ --cl-shadow-sm: 0 1px 3px var(--cl-shadow); --cl-shadow-md: 0 4px 12px var(--cl-shadow); --cl-shadow-lg: 0 8px 24px var(--cl-shadow); /* Named ROLE, not a fourth size: the lift a Hub card takes on hover (design system 9.3). Aliased so the card never names a raw shadow. */ --cl-shadow-lift: var(--cl-shadow-md); /* Transitions */ --cl-transition-fast: 120ms ease; --cl-transition: 200ms ease; --cl-transition-slow: 350ms ease; } /* ── Phone input widget (templates/components/phone_input.html) ─────────── The tenant portal does not load Bootstrap, so the widget can't rely on .input-group / .form-select. These rules render the country-code select and the number field as one cohesive input group: [🇪🇬 +20][ number … ]. */ /* NB: `overflow: hidden` here used to clip the country-code dropdown. The dropdown is position:absolute inside .phone-picker (position:relative), and that containing block is a DESCENDANT of this box, so the clip applied (CSS 2.1 §11.1.1). Worse, this box then became a scroll container, so the picker's search.focus() scrolled the clipped dropdown into view — dragging a search box into the pill where the number input had been. The rounded corners it was there for are now done with logical radii on the end children. */ .phone-input-group { display: flex; border: 1px solid var(--cl-border); border-radius: 6px; overflow: visible; background: #fff; } /* Logical, so the pill stays correct when the row flips under [dir=rtl]. `.phone-picker` covers the current core/_phone_field.html markup (which does not use the --embedded modifier); only the left-corner radii are ported — not min-width — so the +20 button stays content-width. */ .phone-input-group > .phone-picker--embedded, .phone-input-group > .phone-picker { border-start-start-radius: 6px; border-end-start-radius: 6px; } .phone-input-group > .phone-status { border-start-end-radius: 6px; border-end-end-radius: 6px; } .phone-input-group:focus-within { border-color: var(--cl-accent); box-shadow: 0 0 0 3px rgba(196, 168, 117, 0.15); } .phone-code-select { border: none; border-inline-end: 1px solid var(--cl-border); background: var(--cl-paper); padding: 0.5rem 0.625rem; font-size: 0.875rem; min-width: 84px; max-width: 120px; cursor: pointer; outline: none; appearance: auto; /* keep the native dropdown arrow */ color: var(--cl-ink); } .phone-number-input { border: none; flex: 1; padding: 0.5rem 0.75rem; font-size: 0.875rem; outline: none; background: transparent; color: var(--cl-ink); min-width: 0; /* let the field shrink inside the flex group */ } .phone-number-input::placeholder { color: var(--cl-muted); } /* Live E.164 validation badge appended by static/js/localization.js. It toggles the d-none / text-* classes the script already emits. */ .phone-status { display: flex; align-items: center; padding: 0 0.625rem; font-size: 0.85rem; background: var(--cl-paper); border-inline-start: 1px solid var(--cl-border); } .phone-status.d-none { display: none; } .phone-status.text-success { color: var(--cl-teal); } .phone-status.text-danger { color: var(--cl-danger); } .phone-status.text-muted { color: var(--cl-muted); } /* ── Flag-button country-code picker (P04, 2026-05-26) ───────────────────── Used standalone (templates/core/_phone_picker.html) and as the country-code half of templates/components/phone_input.html. Drop-in replacement for the prior native