/* * Ummah Directory, theme "Modern professional" (r1233, Oct 2 2026). * * ONE stylesheet. It restyles the markup the Editorial theme already uses. Every rule is * scoped under html[data-ud-theme="modern"], so it changes nothing until that attribute is * on . The layout loads it after /css/directory.css, and only for this theme. * * This file is GENERATED from tools/ud-theme-modern.src.css by `python3 tools/build.py` * (the build writes the contrast table below and one small data URI). Edit the source. * * ── FONT: one added family, two weights, Bunny Fonts only ───────────────────────────── * Instrument Sans 400 and 600, for text and for display. Nothing else is added. The one * serif moment (a source's quoted words) uses Fraunces 500, which the base stylesheet * already declares; this file adds no serif of its own. * The live response header, read Oct 2 2026 from https://ummah.directory/ : * content-security-policy: default-src 'self'; script-src 'self' 'unsafe-inline' * 'unsafe-eval' https://analytics.ummahmediagroup.com; style-src 'self' 'unsafe-inline' * https://fonts.bunny.net https://ummah.city; font-src 'self' data: * https://fonts.bunny.net; img-src 'self' data: https:; (the rest does not bear on type) * So fonts.bunny.net is allowed in BOTH style-src and font-src. This file declares the * faces itself with @font-face, which needs font-src only and saves the extra request an * @import would make before any text can paint. The files: * https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-400-normal.woff2 * https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-600-normal.woff2 * https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-ext-400-normal.woff2 * https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-ext-600-normal.woff2 * (latin-ext is fetched only on a page that has a letter outside Latin-1) * The same two weights as a Bunny CSS URL, if an @import is preferred: * https://fonts.bunny.net/css?family=instrument-sans:400,600&display=swap * Both faces are font-display: swap, each with a metric-matched local fallback (size-adjust * and ascent/descent overrides measured on the live pages' own words), so the swap keeps * the same words on the same lines. * * ── TOKENS ──────────────────────────────────────────────────────────────────────────── * Lapis, turquoise and gilt: the colours of Iznik tile and manuscript illumination, used * the way a clinic or a law firm would use them. One warm metal, and only as line. * grounds (5) --m-ground #F4F6F9 --m-card #FFFFFF --m-wash #EBEFF4 * --m-deep #0B2545 --m-deep-2 #081B33 * text (5) --m-ink #0B1A2E --m-ink-2 #45546A --m-teal-deep #074E52 * --m-on-deep #F3F6FA --m-on-deep-2 #B9C6D8 (+ --m-gilt-light #E5CB8C, * the small capitals on the deep ground only) * action --m-teal #0A6468 (fill, white label) --m-tint #E3F1F0 (selected ground) * line --m-line #DEE4EC --m-line-strong #C5CEDA --m-edge #76839A (controls) * --m-on-deep-edge #6E82A0 --m-gilt #C6A04A --m-gilt-deep #8F6B1A * status warn ground #FFF7E8 / ink #5F3B00 / bar #D9A441 · danger #A11A1A * radii 6 (tags) · 8 (controls, chips) · 12 (surfaces) · the arch (portraits) * type scale 12.5 · 14 · 16 · 18 · 22 · one fluid display size (32 to 52) * weights 400 and 600. No third weight. * The base stylesheet's own tokens (--ud-*) are re-valued from these in the first rule, so * a component this file never names still lands in the family. Everything after that rule * is composition: layout, shape, density, the masthead, the roster, the portrait. * * ── CONTRAST (WCAG 2, computed by tools/contrast.py; the tool is negative-tested) ────── * ink on ground 16.14:1 (bar 4.5, text) * ink on card/white 17.48:1 (bar 4.5, text) * ink on wash 15.14:1 (bar 4.5, text) * ink-2 on ground 7.11:1 (bar 4.5, text) * ink-2 on card/white 7.69:1 (bar 4.5, text) * ink-2 on wash 6.66:1 (bar 4.5, text) * ink-2 on tint 6.63:1 (bar 4.5, text) * teal-deep on ground 8.73:1 (bar 4.5, text) * teal-deep on card/white 9.46:1 (bar 4.5, text) * teal-deep on wash 8.19:1 (bar 4.5, text) * teal-deep on tint 8.15:1 (bar 4.5, text) * teal on card/white 6.92:1 (bar 4.5, text) * teal on ground 6.39:1 (bar 4.5, text) * card/white on teal 6.92:1 (bar 4.5, text) * card/white on teal-deep 9.46:1 (bar 4.5, text) * on-deep on deep 14.20:1 (bar 4.5, text) * on-deep on deep-2 15.95:1 (bar 4.5, text) * on-deep-2 on deep 8.89:1 (bar 4.5, text) * on-deep-2 on deep-2 9.99:1 (bar 4.5, text) * gilt-light on deep 9.71:1 (bar 4.5, text) * gilt-light on deep-2 10.91:1 (bar 4.5, text) * gilt on deep 6.25:1 (bar 3, line or control shape) * edge on card/white 3.83:1 (bar 3, line or control shape) * edge on ground 3.54:1 (bar 3, line or control shape) * edge on wash 3.32:1 (bar 3, line or control shape) * on-deep-edge on deep 3.93:1 (bar 3, line or control shape) * teal on wash 5.99:1 (bar 3, line or control shape) * warn ink on warn ground 9.34:1 (bar 4.5, text) * danger on card/white 7.84:1 (bar 4.5, text) * danger on wash 6.79:1 (bar 4.5, text) * gilt-deep on card/white 4.90:1 (bar 3, line or control shape) * gilt-deep on ground 4.53:1 (bar 3, line or control shape) * gilt-deep on wash 4.24:1 (bar 3, line or control shape) */ /* ── Faces ──────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Names with marks outside Latin-1 (for example Ş, ā, ḥ). Fetched only when a page has one. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.bunny.net/instrument-sans/files/instrument-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallbacks: the local face is resized so a line holds the same words before and after the web font arrives. The values come from measuring the live pages' own words in both faces, per weight (tools/fallback-tune.cjs). */ @font-face { font-family: 'UD Modern Sans Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 102.6%; ascent-override: 94.5%; descent-override: 24.4%; line-gap-override: 0%; } @font-face { font-family: 'UD Modern Sans Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'); size-adjust: 98.4%; ascent-override: 98.6%; descent-override: 25.4%; line-gap-override: 0%; } /* ── Tokens ─────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] { --m-ground: #f4f6f9; --m-card: #ffffff; --m-wash: #ebeff4; --m-deep: #0b2545; --m-deep-2: #081b33; --m-ink: #0b1a2e; --m-ink-2: #45546a; --m-teal: #0a6468; --m-teal-deep: #074e52; --m-tint: #e3f1f0; --m-tint-line: #a9d3d0; --m-on-deep: #f3f6fa; --m-on-deep-2: #b9c6d8; --m-on-deep-edge: #6e82a0; --m-gilt: #c6a04a; --m-gilt-light: #e5cb8c; --m-gilt-deep: #8f6b1a; --m-line: #dee4ec; --m-line-strong: #c5ceda; --m-edge: #76839a; --m-danger: #a11a1a; --m-focus: var(--m-teal); --m-sans: 'Instrument Sans', 'UD Modern Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* The base stylesheet's serif, for one thing only: a source's quoted words. */ --m-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --m-shadow-1: 0 1px 2px rgba(11, 26, 46, 0.05); /* The base theme's tokens, re-valued. */ --ud-paper: var(--m-ground); --ud-card: var(--m-card); --ud-wash: var(--m-wash); --ud-ink: var(--m-ink); --ud-ink-2: var(--m-ink-2); --ud-ink-3: var(--m-ink-2); --ud-line: var(--m-line); --ud-line-strong: var(--m-line-strong); --ud-edge: var(--m-edge); --ud-forest: var(--m-teal); --ud-forest-deep: var(--m-teal-deep); --ud-forest-tint: var(--m-tint); --ud-forest-line: var(--m-tint-line); --ud-on-action: #ffffff; --ud-plate: var(--m-deep); --ud-plate-ink: var(--m-on-deep); --ud-plate-well: var(--m-deep-2); --ud-brass: var(--m-gilt); --ud-brass-light: var(--m-gilt-light); --ud-brass-ink: var(--m-ink-2); --ud-brass-edge: var(--m-gilt-deep); --ud-warn-ground: #fff7e8; --ud-warn-line: #ebd5a6; --ud-warn-ink: #5f3b00; --ud-danger: var(--m-danger); --ud-danger-tint: #fbf1f1; --ud-mark-ground: var(--m-teal); --ud-mark-star: #ffffff; --ud-display: var(--m-sans); --ud-sans: var(--m-sans); --ud-t-xl: 22px; --ud-t-d: clamp(2rem, 1.35rem + 2.8vw, 3.25rem); --ud-w-display: 600; --ud-w-name: 600; --ud-w-strong: 600; --ud-track-caps: 0.1em; --ud-r-xs: 6px; --ud-r-s: 8px; --ud-r-m: 12px; --ud-r-pill: 8px; --ud-arch: 999px 999px 8px 8px; --ud-arch-inner: 999px 999px 4px 4px; --ud-shadow: 0 1px 2px rgba(11, 26, 46, 0.05), 0 14px 32px -18px rgba(11, 26, 46, 0.28); --font-display: var(--m-sans); color-scheme: light; } /* ── Base and type ──────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] body, html[data-ud-theme="modern"] .ud-page, html[data-ud-theme="modern"] .ud-header, html[data-ud-theme="modern"] .ud-footer { font-family: var(--m-sans); } /* Figures line up where they are compared (counts, the pager), not in running text. */ html[data-ud-theme="modern"] .ud-page { font-variant-numeric: normal; } /* The deep bands run edge to edge from inside the centred column; clip the overhang so the page never scrolls sideways. `clip` (not `hidden`) keeps the sticky header working. */ html[data-ud-theme="modern"] main > .ud-page { overflow-x: clip; } html[data-ud-theme="modern"] .ud-wrap { max-width: 1200px; } html[data-ud-theme="modern"] .ud-wrap.ud-wrap--narrow { max-width: 720px; } html[data-ud-theme="modern"] .ud-page :focus-visible, html[data-ud-theme="modern"] .ud-header :focus-visible, html[data-ud-theme="modern"] .ud-footer :focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; } /* The skip link lands on the deep header. */ html[data-ud-theme="modern"] body > a.sr-only:focus { --m-focus: var(--m-gilt-light); background: #ffffff; color: var(--m-ink); border-radius: 8px; font-weight: 600; } html[data-ud-theme="modern"] .ud-header, html[data-ud-theme="modern"] .ud-hero, html[data-ud-theme="modern"] .ud-crumbs, html[data-ud-theme="modern"] .ud-plate, html[data-ud-theme="modern"] .ud-footer { --m-focus: var(--m-gilt-light); } html[data-ud-theme="modern"] .ud-kicker { letter-spacing: 0.12em; } html[data-ud-theme="modern"] .ud-h1 { line-height: 1.06; letter-spacing: -0.024em; } html[data-ud-theme="modern"] .ud-h2 { letter-spacing: -0.015em; } html[data-ud-theme="modern"] .ud-h3 { letter-spacing: -0.01em; text-wrap: balance; } html[data-ud-theme="modern"] .ud-lead { max-width: 56ch; line-height: 1.5; } html[data-ud-theme="modern"] .ud-link, html[data-ud-theme="modern"] .ud-rowlink, html[data-ud-theme="modern"] .ud-share__link, html[data-ud-theme="modern"] .ud-facts dd a { text-decoration-color: rgba(7, 78, 82, 0.45); } html[data-ud-theme="modern"] .ud-link:hover, html[data-ud-theme="modern"] .ud-rowlink:hover, html[data-ud-theme="modern"] .ud-share__link:hover, html[data-ud-theme="modern"] .ud-facts dd a:hover { text-decoration-color: currentColor; } html[data-ud-theme="modern"] .ud-rowlink { font-weight: 600; font-size: 14px; } /* ── Buttons and fields ─────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-btn { border-radius: 8px; letter-spacing: -0.005em; transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease; } html[data-ud-theme="modern"] .ud-btn:active { transform: translateY(1px); } html[data-ud-theme="modern"] .ud-btn.ud-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(7, 78, 82, 0.35); } html[data-ud-theme="modern"] .ud-btn.ud-btn--quiet { color: var(--m-ink); border-color: var(--m-edge); box-shadow: var(--m-shadow-1); } html[data-ud-theme="modern"] .ud-btn.ud-btn--quiet:hover { background: var(--m-ground); border-color: var(--m-ink); } html[data-ud-theme="modern"] .ud-btn.ud-btn--small { padding: 0 14px; } html[data-ud-theme="modern"] .ud-field { border-radius: 8px; } html[data-ud-theme="modern"] select.ud-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2345546A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── Header ─────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-header { background: var(--m-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.09); color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-brand { color: var(--m-on-deep); letter-spacing: -0.015em; } html[data-ud-theme="modern"] .ud-header__link, html[data-ud-theme="modern"] .ud-header__signin { color: var(--m-on-deep-2); font-weight: 400; } html[data-ud-theme="modern"] .ud-header__link:hover, html[data-ud-theme="modern"] .ud-header__signin:hover { color: var(--m-on-deep); background: rgba(255, 255, 255, 0.08); } html[data-ud-theme="modern"] .ud-header .ud-btn.ud-btn--primary { background: #ffffff; color: var(--m-ink); box-shadow: none; } html[data-ud-theme="modern"] .ud-header .ud-btn.ud-btn--primary:hover { background: #dfe7f1; } html[data-ud-theme="modern"] .ud-menu__button { color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-menu__button:hover { background: rgba(255, 255, 255, 0.08); } html[data-ud-theme="modern"] .ud-menu__initial { background: #ffffff; color: var(--m-ink); border-radius: 8px; font-size: 14px; } html[data-ud-theme="modern"] .ud-menu__list { --m-focus: var(--m-teal); color: var(--m-ink); } /* ── The deep masthead ──────────────────────────────────────────────────────────────── */ /* Layout this theme depends on is declared here in full, never inherited from the base stylesheet, so a change there cannot move the band. */ html[data-ud-theme="modern"] .ud-hero { position: relative; isolation: isolate; padding: 28px 0 32px; color: var(--m-on-deep); } /* The band: lapis, edge to edge. */ html[data-ud-theme="modern"] .ud-hero::before, html[data-ud-theme="modern"] .ud-entry > .ud-plate::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); border: 0; border-radius: 0; pointer-events: none; background: var(--m-deep); } @media (min-width: 720px) { html[data-ud-theme="modern"] .ud-hero { padding: 56px 0 56px; } } /* ── The window: the site's one ornament, in this theme's hand ────────────────────────── The same window of khatam stars, the same single draw (the base stylesheet's own animation, untouched: once, then still; still from the start with reduced motion). Here it is gilt line on lapis, and it never shares a line with the headline, so the headline can be balanced at every width and never ends on one word alone. phone a small window at the top right, level with the small capitals tablet beside the headline, top right wide architecture: a tall arch standing on the band's own floor at the right */ html[data-ud-theme="modern"] .ud-window { float: none; shape-outside: none; position: absolute; z-index: -1; top: 22px; right: 0; width: 66px; margin: 0; color: var(--m-gilt); opacity: 0.9; } html[data-ud-theme="modern"] .ud-window__frame { stroke: var(--m-gilt-light); } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-kicker { padding-top: 64px; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-h1 { text-wrap: balance; } @media (min-width: 720px) { html[data-ud-theme="modern"] .ud-window { top: 56px; width: 168px; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-kicker { padding-top: 0; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-h1, html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-lead { max-width: calc(100% - 200px); } } @media (min-width: 1100px) { html[data-ud-theme="modern"] .ud-window { top: auto; bottom: 0; width: 288px; } html[data-ud-theme="modern"] .ud-window__svg { stroke-width: 0.85; } html[data-ud-theme="modern"] .ud-window__fine { stroke-width: 0.6; } html[data-ud-theme="modern"] .ud-window__frame { stroke-width: 1.3; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero { min-height: 472px; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-h1 { max-width: 13.5em; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-lead { max-width: 56ch; } html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-chips { max-width: calc(100% - 336px); } } html[data-ud-theme="modern"] .ud-hero .ud-kicker { color: var(--m-gilt-light); } html[data-ud-theme="modern"] .ud-hero .ud-h1 { color: var(--m-on-deep); margin-top: 14px; max-width: 17em; } html[data-ud-theme="modern"] .ud-hero .ud-lead { color: var(--m-on-deep-2); margin-top: 14px; max-width: 56ch; } /* ── Search: one bar, three parts ───────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-search { --m-focus: var(--m-teal); gap: 0; margin-top: 24px; max-width: 720px; padding: 6px; background: var(--m-card); border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 28px 48px -28px rgba(2, 8, 20, 0.85); } html[data-ud-theme="modern"] .ud-search > div:first-child { border-bottom: 1px solid var(--m-line); padding-bottom: 6px; } html[data-ud-theme="modern"] .ud-search__row { gap: 6px; padding-top: 6px; } html[data-ud-theme="modern"] .ud-search .ud-field { border-color: transparent; background-color: transparent; border-radius: 9px; font-weight: 400; } html[data-ud-theme="modern"] .ud-search .ud-field::placeholder { font-weight: 400; } html[data-ud-theme="modern"] .ud-search .ud-field:hover { background-color: var(--m-ground); border-color: transparent; } html[data-ud-theme="modern"] .ud-search .ud-field:focus-visible { outline: 2px solid var(--m-teal); outline-offset: -2px; background-color: var(--m-card); border-radius: 9px; } html[data-ud-theme="modern"] .ud-search .ud-btn, html[data-ud-theme="modern"] .ud-search .ud-btn:focus-visible { border-radius: 9px; padding: 0 24px; } @media (min-width: 720px) { html[data-ud-theme="modern"] .ud-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); margin-top: 32px; } html[data-ud-theme="modern"] .ud-search > div:first-child { border-bottom: 0; padding: 0 6px 0 0; border-right: 1px solid var(--m-line); } html[data-ud-theme="modern"] .ud-search__row { padding: 0 0 0 6px; } } html[data-ud-theme="modern"] .ud-chip, html[data-ud-theme="modern"] .ud-chip:focus-visible { border-radius: 8px; } html[data-ud-theme="modern"] .ud-chip { padding: 0 14px; border-color: var(--m-on-deep-edge); background: rgba(255, 255, 255, 0.04); color: var(--m-on-deep); font-weight: 400; } html[data-ud-theme="modern"] .ud-chip:hover { border-color: var(--m-gilt-light); color: #ffffff; background: rgba(255, 255, 255, 0.09); } html[data-ud-theme="modern"] .ud-chip.ud-chip--on { border-color: #ffffff; background: #ffffff; color: var(--m-ink); font-weight: 600; } /* ── Directory layout: the masthead, then a rail of professions beside the roster ───── */ html[data-ud-theme="modern"] .ud-directory__board { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--m-line); } html[data-ud-theme="modern"] .ud-directory__board .ud-kicker { margin-bottom: 8px; } html[data-ud-theme="modern"] .ud-board__row { align-items: center; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--m-line); line-height: 1.3; } /* The base theme's dotted leader becomes plain space: name left, count right. */ html[data-ud-theme="modern"] .ud-board__dots { border-bottom: 0; flex: 1 1 8px; min-width: 8px; transform: none; } html[data-ud-theme="modern"] .ud-board__count { font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; } html[data-ud-theme="modern"] .ud-board__row:hover .ud-board__name { text-decoration: none; } html[data-ud-theme="modern"] .ud-board__row.ud-board__row--on .ud-board__count { color: var(--m-teal-deep); font-weight: 600; } @media (min-width: 1000px) { html[data-ud-theme="modern"] .ud-directory { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 48px; grid-template-areas: "hero hero" "board results" "board how"; } html[data-ud-theme="modern"] .ud-directory__board { margin-top: 0; padding: 28px 0 16px; border-top: 0; } html[data-ud-theme="modern"] .ud-directory__board .ud-kicker { margin-bottom: 6px; } html[data-ud-theme="modern"] .ud-directory__board .ud-board { columns: 1; margin: 0 -10px; } html[data-ud-theme="modern"] .ud-directory__board .ud-board__row { min-height: 44px; padding: 6px 10px; border-bottom: 0; border-radius: 8px; transition: background-color 0.12s ease; } html[data-ud-theme="modern"] .ud-directory__board .ud-board__row:hover { background: var(--m-wash); } html[data-ud-theme="modern"] .ud-directory__board .ud-board__row:hover .ud-board__name { color: var(--m-ink); } html[data-ud-theme="modern"] .ud-directory__board .ud-board__row.ud-board__row--on { background: var(--m-tint); } html[data-ud-theme="modern"] .ud-directory__board .ud-board__row.ud-board__row--on:hover .ud-board__name { color: var(--m-teal-deep); } html[data-ud-theme="modern"] .ud-directory .ud-directory__results { border-top: 0; padding-top: 28px; } html[data-ud-theme="modern"] .ud-directory__results .ud-grid.ud-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── How it works: after the people, never before them ──────────────────────────────── */ html[data-ud-theme="modern"] .ud-directory .ud-how { margin-top: 48px; padding: 28px 0 0; border-top: 1px solid var(--m-line); border-bottom: 0; } html[data-ud-theme="modern"] .ud-how__step::before { color: var(--m-teal-deep); border-top: 1px solid var(--m-gilt-deep); padding-top: 8px; font-variant-numeric: tabular-nums; } html[data-ud-theme="modern"] .ud-how__title { letter-spacing: -0.01em; padding-top: 8px; text-wrap: balance; } /* ── Results ────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-results { padding-top: 20px; } html[data-ud-theme="modern"] .ud-notice { border-left: 3px solid #d9a441; padding: 11px 14px; } html[data-ud-theme="modern"] .ud-notice.ud-notice--done { border-left-color: var(--m-teal); } html[data-ud-theme="modern"] .ud-count { font-variant-numeric: tabular-nums; } html[data-ud-theme="modern"] .ud-section { margin-top: 48px; } /* ── The arch ───────────────────────────────────────────────────────────────────────── */ /* The brand's arch, drawn the modern way: the picture runs to the edge, with a hairline instead of a keyline and a mat. With no photo it is the star over the initials, light on lapis, so a list of photos and placeholders still reads as one set. */ html[data-ud-theme="modern"] .ud-arch { width: 64px; padding: 0; border: 0; overflow: hidden; background: var(--m-wash); box-shadow: 0 0 0 1px rgba(11, 26, 46, 0.12); } html[data-ud-theme="modern"] .ud-arch__fill { border-radius: 0; background: var(--m-wash); } html[data-ud-theme="modern"] .ud-arch--initials .ud-arch__fill { background: var(--m-deep); } html[data-ud-theme="modern"] .ud-arch--initials { box-shadow: none; } html[data-ud-theme="modern"] .ud-arch__star { width: 30%; margin-top: 10%; stroke: var(--m-gilt-light); stroke-width: 1; } html[data-ud-theme="modern"] .ud-arch__initials { font-family: var(--m-sans); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; color: var(--m-on-deep); margin-top: 12%; } /* On the plate the arch keeps a fine gilt line a little way out. */ html[data-ud-theme="modern"] .ud-arch.ud-arch--plate { width: 84px; padding: 4px; border: 1px solid rgba(229, 203, 140, 0.75); overflow: visible; background: var(--m-deep); box-shadow: none; } html[data-ud-theme="modern"] .ud-arch--plate .ud-arch__fill { border-radius: var(--ud-arch-inner); background: var(--m-deep-2); } html[data-ud-theme="modern"] .ud-arch--plate .ud-arch__initials { font-size: var(--ud-t-d); color: var(--m-on-deep); } @media (min-width: 720px) { html[data-ud-theme="modern"] .ud-arch.ud-arch--plate { width: 148px; padding: 5px; } } /* ── Cards ──────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-card { box-shadow: var(--m-shadow-1); transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease; } html[data-ud-theme="modern"] .ud-card:hover { border-color: var(--m-line-strong); box-shadow: var(--ud-shadow); transform: none; } html[data-ud-theme="modern"] .ud-card:has(.ud-card__name a:focus-visible) { outline-color: var(--m-teal); } html[data-ud-theme="modern"] .ud-card__head { gap: 14px; padding: 16px 16px 0; } /* The name leads, as on a staff list; what they do and where follow. The order in the markup is unchanged: only the order on screen. */ html[data-ud-theme="modern"] .ud-card__id { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: 2px; } html[data-ud-theme="modern"] .ud-card__name { order: -1; line-height: 1.25; letter-spacing: -0.012em; margin-bottom: 3px; } html[data-ud-theme="modern"] .ud-card__role, html[data-ud-theme="modern"] .ud-card__place { font-size: 14px; line-height: 1.45; letter-spacing: 0; text-transform: none; margin: 0; } html[data-ud-theme="modern"] .ud-card__role { font-weight: 400; color: var(--m-teal); } html[data-ud-theme="modern"] .ud-card__practice { font-weight: 400; margin-top: 4px; } html[data-ud-theme="modern"] .ud-card__body { padding: 10px 16px 14px; gap: 8px; } html[data-ud-theme="modern"] .ud-card__text { line-height: 1.5; } html[data-ud-theme="modern"] .ud-tag { border-radius: 6px; background: var(--m-ground); padding: 2px 8px; } html[data-ud-theme="modern"] .ud-tag.ud-tag--online { background: var(--m-tint); } html[data-ud-theme="modern"] .ud-card__foot { margin: 0 16px; padding: 10px 0 14px; gap: 8px; } html[data-ud-theme="modern"] .ud-card__source-link { min-width: 44px; } html[data-ud-theme="modern"] .ud-source strong { color: var(--m-ink); } /* The roster. When the results column is wide enough, the cards become the rows of one list: portrait, who and what, how to reach them. A container query, so the same rule is right beside the rail and without it. */ html[data-ud-theme="modern"] .ud-directory__results { container: ud-results / inline-size; } @container ud-results (min-width: 720px) { html[data-ud-theme="modern"] .ud-directory__results .ud-grid.ud-grid--three { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 14px; box-shadow: var(--m-shadow-1); overflow: hidden; } html[data-ud-theme="modern"] .ud-directory__results .ud-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 236px; grid-template-areas: "portrait id foot" "portrait body foot"; grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; height: auto; padding: 18px 20px 18px 22px; border: 0; border-bottom: 1px solid var(--m-line); border-radius: 0; box-shadow: none; background: transparent; } html[data-ud-theme="modern"] .ud-directory__results .ud-card:last-child { border-bottom: 0; } html[data-ud-theme="modern"] .ud-directory__results .ud-card:hover { background: #f8fafc; box-shadow: inset 2px 0 0 var(--m-teal); } html[data-ud-theme="modern"] .ud-directory__results .ud-card:has(.ud-card__name a:focus-visible) { outline-offset: -2px; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__name a::after { border-radius: 0; } /* The head is only a wrapper, so it steps aside and its two parts sit on the row's grid. */ html[data-ud-theme="modern"] .ud-directory__results .ud-card__head { display: contents; } html[data-ud-theme="modern"] .ud-directory__results .ud-arch { grid-area: portrait; width: 56px; } /* In a row there is room for "what · where" on one line. The first column is only as wide as the role, and never more than 60%, so a long role wraps inside its own column and the place never drops to a line that starts with the dot. */ html[data-ud-theme="modern"] .ud-directory__results .ud-card__id { grid-area: id; grid-template-columns: fit-content(60%) minmax(0, 1fr); column-gap: 6px; padding-top: 0; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__name, html[data-ud-theme="modern"] .ud-directory__results .ud-card__practice { grid-column: 1 / -1; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__role ~ .ud-card__place::before { content: '\00b7'; content: '\00b7' / ''; margin-right: 6px; color: var(--m-edge); } /* A card with no role keeps its place in the first column. */ html[data-ud-theme="modern"] .ud-directory__results .ud-card__id > .ud-card__place:nth-child(2) { grid-column: 1 / -1; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__body { grid-area: body; padding: 0; max-width: 62ch; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__foot { grid-area: foot; flex-direction: column-reverse; justify-content: flex-end; border-top: 0; margin: 0; padding: 0 0 0 16px; gap: 8px; } html[data-ud-theme="modern"] .ud-directory__results .ud-card__actions .ud-btn { flex: 0 0 auto; white-space: nowrap; } } /* ── Pager ──────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-pager { margin-top: 28px; } html[data-ud-theme="modern"] .ud-pager__page { transition: background-color 0.12s ease, border-color 0.12s ease; } html[data-ud-theme="modern"] .ud-pager__page, html[data-ud-theme="modern"] .ud-pager__page:focus-visible { border-radius: 8px; } html[data-ud-theme="modern"] .ud-pager__page:hover { border-color: var(--m-ink); } html[data-ud-theme="modern"] .ud-pager__pages .ud-pager__page { border-color: transparent; background: transparent; } html[data-ud-theme="modern"] .ud-pager__pages a.ud-pager__page:hover { background: var(--m-wash); border-color: transparent; } html[data-ud-theme="modern"] .ud-pager__pages .ud-pager__page.ud-pager__page--on { background: var(--m-deep); border-color: var(--m-deep); } html[data-ud-theme="modern"] .ud-pager__page.ud-pager__page--off { background: transparent; border-color: var(--m-line-strong); } /* ── A professional's page ──────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-entry { padding-top: 0; } html[data-ud-theme="modern"] .ud-crumbs { position: relative; isolation: isolate; margin: 0; padding: 6px 0 2px; color: var(--m-on-deep-2); } html[data-ud-theme="modern"] .ud-crumbs::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--m-deep); } html[data-ud-theme="modern"] .ud-crumbs a { color: var(--m-on-deep-2); text-decoration: none; } html[data-ud-theme="modern"] .ud-crumbs a:hover { color: var(--m-on-deep); text-decoration: underline; text-underline-offset: 3px; } html[data-ud-theme="modern"] .ud-crumbs span[aria-hidden] { color: var(--m-on-deep-2); } /* The plate, anywhere: a lapis card. On the person's own page it opens edge to edge. */ html[data-ud-theme="modern"] .ud-plate { position: relative; isolation: isolate; border-radius: 14px; padding: 24px; box-shadow: none; /* Phone: the portrait, and beside it what they do and where. Then the name, full width. */ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: end; } html[data-ud-theme="modern"] .ud-plate::before { border: 0; } html[data-ud-theme="modern"] .ud-plate__text { display: contents; } html[data-ud-theme="modern"] .ud-plate .ud-arch { grid-row: 1; grid-column: 1; } html[data-ud-theme="modern"] .ud-plate__kicker { grid-row: 1; grid-column: 2; margin: 0 0 6px; line-height: 1.5; letter-spacing: 0.12em; } html[data-ud-theme="modern"] .ud-plate__name, html[data-ud-theme="modern"] .ud-plate__practice, html[data-ud-theme="modern"] .ud-plate__address { grid-column: 1 / -1; } html[data-ud-theme="modern"] .ud-plate__name { margin: 18px 0 0; line-height: 1.06; letter-spacing: -0.024em; } html[data-ud-theme="modern"] .ud-plate__practice { color: var(--m-on-deep-2); opacity: 1; font-size: 18px; margin: 12px 0 0; } html[data-ud-theme="modern"] .ud-entry > .ud-plate { background: none; border-radius: 0; padding: 14px 0 30px; } @media (min-width: 720px) { /* Wide: the portrait, and the words in one block beside it. */ html[data-ud-theme="modern"] .ud-plate { display: flex; flex-direction: row; align-items: center; gap: 36px; padding: 36px; } html[data-ud-theme="modern"] .ud-plate__text { display: block; min-width: 0; } html[data-ud-theme="modern"] .ud-plate__kicker { margin: 0 0 10px; } html[data-ud-theme="modern"] .ud-plate__name { margin-top: 0; } html[data-ud-theme="modern"] .ud-entry > .ud-plate { padding: 26px 0 50px; } html[data-ud-theme="modern"] .ud-entry > .ud-plate .ud-plate__text { max-width: 840px; } } html[data-ud-theme="modern"] .ud-preview .ud-plate__name { font-size: 22px; } html[data-ud-theme="modern"] .ud-preview.ud-preview--private { border: 2px dashed var(--m-gilt-deep); } /* The credit's link keeps a full-size target without reaching up under the band. */ html[data-ud-theme="modern"] .ud-credit { display: flex; align-items: center; gap: 4px; min-height: 48px; margin: 0; } html[data-ud-theme="modern"] .ud-credit a { padding: 14px 0; margin: 0; } html[data-ud-theme="modern"] .ud-credit + .ud-notice { margin-top: 0; } html[data-ud-theme="modern"] .ud-entry > .ud-notice { margin: 14px 0 0; } html[data-ud-theme="modern"] .ud-entry__grid { margin-top: 24px; } @media (min-width: 900px) { html[data-ud-theme="modern"] .ud-entry__grid:not(.ud-entry__grid--stack) { margin-top: 28px; } } /* How to reach them is the page's job, so it sits on its own raised card. */ html[data-ud-theme="modern"] .ud-entry__main > section[aria-labelledby="ud-reach"] { background: var(--m-card); border: 1px solid var(--m-line); border-radius: 12px; padding: 20px 18px 10px; box-shadow: var(--ud-shadow); } @media (min-width: 720px) { html[data-ud-theme="modern"] .ud-entry__main > section[aria-labelledby="ud-reach"] { padding: 26px 28px 14px; } } /* The facts: label left, fact right, a hairline between rows. The dotted leader rests. */ html[data-ud-theme="modern"] .ud-facts__row { gap: 16px; padding: 12px 0; } html[data-ud-theme="modern"] .ud-facts__dots { border-bottom: 0; transform: none; } html[data-ud-theme="modern"] .ud-facts dd { font-weight: 400; } /* On a phone the label sits over its fact, so a long web address is never broken mid-word. */ @media (max-width: 559px) { html[data-ud-theme="modern"] .ud-facts__row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; } html[data-ud-theme="modern"] .ud-facts__dots { display: none; } html[data-ud-theme="modern"] .ud-facts dd { max-width: none; text-align: left; text-wrap: wrap; } } html[data-ud-theme="modern"] .ud-panel { box-shadow: var(--ud-shadow); } html[data-ud-theme="modern"] .ud-panel.ud-panel--wash { box-shadow: none; } /* A source's words: another voice, marked by the rule, not by a face. Build round, Oct 3 2026: Fraunces is Editorial's serif and the modern theme does not use it; the quote is set in the modern sans. */ html[data-ud-theme="modern"] .ud-quote { border-left: 1px solid var(--m-gilt-deep); padding: 2px 0 2px 20px; margin-top: 16px; font-family: var(--m-sans); font-weight: 400; font-size: 18px; line-height: 1.5; max-width: 36em; text-wrap: pretty; } html[data-ud-theme="modern"] .ud-dl { gap: 16px; } html[data-ud-theme="modern"] .ud-dl dt { margin-bottom: 3px; } html[data-ud-theme="modern"] .ud-dl dd { line-height: 1.5; max-width: 66ch; } html[data-ud-theme="modern"] .ud-points li::before { background: var(--m-gilt-deep); } html[data-ud-theme="modern"] .ud-panel > .ud-h3 + .ud-points { margin-top: 16px; } html[data-ud-theme="modern"] .ud-entry .ud-section { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--m-line); } /* The phone's fixed action bar. */ html[data-ud-theme="modern"] .ud-actbar, html[data-ud-theme="modern"] .ud-nextbar { background: var(--m-card); box-shadow: 0 -12px 30px -20px rgba(11, 26, 46, 0.4); } /* ── Other pages: ready, claim steps, messages ──────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-check input { accent-color: var(--m-teal); } html[data-ud-theme="modern"] .ud-value__price { letter-spacing: -0.015em; } /* The theme switch (only a browser holding the ud_theme cookie sees it). */ html[data-ud-theme="modern"] .ud-themeswitch { font-family: var(--m-sans); border-radius: 12px; background: var(--m-ink); color: var(--m-on-deep); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 28px -10px rgba(2, 8, 20, 0.6); } html[data-ud-theme="modern"] .ud-themeswitch__label { opacity: 1; color: var(--m-on-deep-2); } html[data-ud-theme="modern"] .ud-themeswitch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; } html[data-ud-theme="modern"] .ud-themeswitch a[aria-current="true"] { background: #ffffff; color: var(--m-ink); } html[data-ud-theme="modern"] .ud-themeswitch a:focus-visible { outline: 2px solid var(--m-gilt-light); outline-offset: 2px; } /* ── Footer ─────────────────────────────────────────────────────────────────────────── */ html[data-ud-theme="modern"] .ud-footer { background: var(--m-deep-2); border-top: 0; color: var(--m-on-deep-2); margin-top: 72px; padding: 44px 0 28px; } html[data-ud-theme="modern"] .ud-footer a { color: var(--m-on-deep); text-decoration-color: rgba(243, 246, 250, 0.4); } html[data-ud-theme="modern"] .ud-footer a:hover { text-decoration-color: currentColor; } html[data-ud-theme="modern"] .ud-footer__title { color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-footer__base { border-top-color: rgba(255, 255, 255, 0.14); color: var(--m-on-deep-2); margin-top: 28px; } /* ── The one moment: a person carries through ─────────────────────────────────────────── Choose someone in the roster and their portrait and name travel into their page and become its heading. A cross-document view transition: CSS only, no script, run by the browser's compositor. Where it is not supported (Firefox today), or when the browser skips it, the page simply opens. Exactly one element per page may hold each name, or the browser skips the transition. On a roster the names belong to the row in keyboard focus, or else the row under the pointer. On a person's page they belong to the plate, always. The site's own stylesheet already opts every page into view transitions and already cuts them to 1 ms for a visitor who asks for reduced motion; the names below exist only when motion is welcome. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html[data-ud-theme="modern"] .ud-header { view-transition-name: ud-header; } html[data-ud-theme="modern"] .ud-directory__results .ud-card:focus-within .ud-arch, html[data-ud-theme="modern"] .ud-directory__results .ud-grid:not(:has(.ud-card:focus-within)) .ud-card:hover .ud-arch, html[data-ud-theme="modern"] .ud-entry > .ud-plate .ud-arch { view-transition-name: ud-portrait; } html[data-ud-theme="modern"] .ud-directory__results .ud-card:focus-within .ud-card__name, html[data-ud-theme="modern"] .ud-directory__results .ud-grid:not(:has(.ud-card:focus-within)) .ud-card:hover .ud-card__name, html[data-ud-theme="modern"] .ud-entry > .ud-plate .ud-plate__name { view-transition-name: ud-name; } ::view-transition-group(ud-portrait), ::view-transition-group(ud-name) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1); } /* The name changes size and colour on the way: keep its height true, never stretch it. */ ::view-transition-old(ud-name), ::view-transition-new(ud-name) { height: 100%; width: auto; } } @media (prefers-reduced-motion: reduce) { html[data-ud-theme="modern"] .ud-btn, html[data-ud-theme="modern"] .ud-card, html[data-ud-theme="modern"] .ud-chip, html[data-ud-theme="modern"] .ud-pager__page, html[data-ud-theme="modern"] .ud-board__row { transition: none; } html[data-ud-theme="modern"] .ud-btn:active { transform: none; } } /* ── r1263 repairs (Oct 3 2026): every visitor may now pick this theme ───────────────── Design seat A's list from Oct 2, checked again live before each fix. */ /* 1. Word gaps. Instrument Sans draws its space at about 0.17em; with the negative tracking on names and headings a gap all but closed ("UmmahDirectory"). */ html[data-ud-theme="modern"] body { word-spacing: 0.07em; } /* 2. The plate's portrait: the brand's arch, built as the editorial theme builds it (a gilt keyline, a lapis mat, the photo), never a square border cut by the mask. */ html[data-ud-theme="modern"] .ud-arch.ud-arch--plate { --ud-arch-gap: 5px; padding: 0; border: 0; background: var(--m-gilt-light); } html[data-ud-theme="modern"] .ud-arch--plate::before { background: var(--m-deep); } html[data-ud-theme="modern"] .ud-arch--plate .ud-arch__fill { border-radius: 0; } /* 3. The plate's lattice sits only where it has its own room, as in the editorial theme: never over the kicker on a phone or a tablet. */ @media (max-width: 999px) { html[data-ud-theme="modern"] .ud-entry > .ud-plate::after { display: none; } } /* 4. The privacy, terms and how-we-count pages: the lapis head runs from the header to under the lead, title and all, with no pale gap. */ html[data-ud-theme="modern"] .ud-policy:has(> .ud-crumbs:first-child) { padding-top: 0; } html[data-ud-theme="modern"] .ud-policy > .ud-crumbs { padding-top: 20px; } html[data-ud-theme="modern"] .ud-policy > .ud-headplate { position: relative; isolation: isolate; margin-top: 0; margin-bottom: 32px; padding: 8px 0 32px; overflow: visible; color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-policy > .ud-headplate::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--m-deep); border: 0; border-radius: 0; -webkit-mask: none; mask: none; } html[data-ud-theme="modern"] .ud-policy > .ud-headplate .ud-h1 { color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-policy > .ud-headplate .ud-headplate__lead { color: var(--m-on-deep-2); } html[data-ud-theme="modern"] .ud-policy .ud-headplate__text { max-width: none; } /* 5. The home on a phone: no empty lapis above the greeting. */ @media (max-width: 719px) { html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-kicker { padding-top: 0; } } /* r1260 round 4: the main action under the name, light on the lapis plate. */ html[data-ud-theme="modern"] .ud-btn--onplate { background: var(--m-on-deep); color: var(--m-deep); border-color: var(--m-on-deep); } html[data-ud-theme="modern"] .ud-btn--onplate:hover { background: #fff; border-color: #fff; } html[data-ud-theme="modern"] .ud-page a.ud-btn--onplate { color: var(--m-deep); } /* r1260 round 7: why this page exists, in the modern theme. */ html[data-ud-theme="modern"] .ud-whyhere { border-left-color: var(--m-gilt); background: var(--m-card); } html[data-ud-theme="modern"] .ud-whyhere__label, html[data-ud-theme="modern"] .ud-whyhere__text { font-family: var(--m-sans); } /* Build round, Oct 3 2026: on a full-width page (/health) the professions index is not in the home's side column, so it keeps the four balanced columns. As one 1136px column, each name sat a screen away from its count. */ @media (min-width: 1000px) { html[data-ud-theme="modern"] .ud-collection .ud-board--cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; columns: auto; } html[data-ud-theme="modern"] .ud-collection .ud-board--cols > li { grid-column: var(--c); grid-row: var(--r); } }