/** * UC Law SF Magazine Blocks — shared design tokens and primitives. * * Loaded on the front end and inside the editor canvas. Everything is scoped under * `.ucm-section` (or an explicit `ucm-` class) so the host theme is never affected. * * The @font-face rules for the bundled Inter live in PHP (inter_font_face_css) because the * font URLs have to be resolved against the plugin directory. */ :root { /* Colour */ --ucm-blue: #0047bb; --ucm-navy: #002554; --ucm-yellow: #ffe22b; --ucm-gold: #eaaa00; --ucm-tint: #eaf0f8; --ucm-black: #000; --ucm-white: #fff; --ucm-overlay: rgba(0, 37, 84, 0.8); /* Type */ --ucm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --ucm-font-serif: "Georgia Pro", Georgia, "Times New Roman", Times, serif; /* Layout */ --ucm-container: 1396px; --ucm-gutter: clamp(20px, 9.6vw, 166px); --ucm-grid-gap: 20px; --ucm-section-gap: 115px; } @media (max-width: 640px) { :root { --ucm-gutter: 24px; --ucm-section-gap: 64px; } } /* -------------------------------------------------------------------------- * * Section shell * -------------------------------------------------------------------------- */ /** * The root reset also neutralises inherited typography from the host theme (Twenty Twenty-Five, * for instance, sets a global font-family, weight 300 and letter-spacing on ). */ .ucm-section { box-sizing: border-box; color: var(--ucm-black); font-family: var(--ucm-font-sans); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.444; letter-spacing: 0; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ucm-section :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .ucm-section *, .ucm-section *::before, .ucm-section *::after { box-sizing: border-box; } /* Uniform 115px rhythm between adjacent sections, matching the comp. */ .ucm-section + .ucm-section { margin-block-start: var(--ucm-section-gap); } .ucm-section:first-child { margin-block-start: 0; } /* Neutralise the theme's default heading/paragraph margins inside our sections. */ .ucm-section :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) { margin: 0; padding: 0; } .ucm-section :where(img) { max-width: 100%; height: auto; display: block; } .ucm-section.alignfull { max-width: none; } .ucm-container { box-sizing: border-box; width: 100%; max-width: calc(var(--ucm-container) + var(--ucm-gutter) * 2); margin-inline: auto; padding-inline: var(--ucm-gutter); } /** * Design-width canvas: caps a full-bleed section's contents at the 1728px Figma frame so * percentage insets taken straight off the comp resolve against the same basis the designer used. */ .ucm-canvas { box-sizing: border-box; width: 100%; max-width: 1728px; margin-inline: auto; } /* -------------------------------------------------------------------------- * * Typography primitives * -------------------------------------------------------------------------- */ .ucm-eyebrow { font-family: var(--ucm-font-sans); font-size: 16px; font-weight: 700; line-height: 19px; letter-spacing: 0.1em; text-transform: uppercase; } .ucm-eyebrow--lg { font-size: 18px; line-height: 26px; } .ucm-body { font-family: var(--ucm-font-sans); font-size: 18px; font-weight: 400; line-height: 26px; letter-spacing: 0; } .ucm-body--sm { font-size: 16px; line-height: 1.3; letter-spacing: -0.03em; } /* Standfirst / intro copy — the hero's 24/28 lede. */ .ucm-lede { font-family: var(--ucm-font-sans); font-size: clamp(1.25rem, 1.161rem + 0.37vw, 1.5rem); /* 20 → 24 */ font-weight: 400; line-height: 1.167; letter-spacing: 0; } .ucm-section-heading { font-family: var(--ucm-font-sans); font-size: clamp(1.875rem, 1.656rem + 0.9vw, 2.625rem); /* 30 → 42 */ font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; /* Comp: heading top → first content row is 90px, and the heading box is ~50px tall. */ margin-block-end: 40px; } .ucm-display { font-family: var(--ucm-font-serif); font-size: clamp(2.125rem, 1.651rem + 1.94vw, 3.75rem); /* 34 → 60 */ font-weight: 300; line-height: 1.135; letter-spacing: -0.03em; } .ucm-display--xl { font-size: clamp(2.75rem, 2.094rem + 2.69vw, 5rem); /* 44 → 80 */ line-height: 1; } .ucm-display--md { font-size: clamp(1.75rem, 1.459rem + 1.2vw, 2.75rem); /* 28 → 44 */ line-height: 1.135; } .ucm-quote { font-family: var(--ucm-font-serif); font-size: clamp(1.5rem, 1.354rem + 0.6vw, 2rem); /* 24 → 32 */ font-weight: 400; line-height: 1.135; letter-spacing: -0.02em; color: var(--ucm-navy); } .ucm-card-title { font-family: var(--ucm-font-serif); font-size: clamp(1.5rem, 1.427rem + 0.3vw, 1.75rem); /* 24 → 28 */ font-weight: 400; line-height: 1; letter-spacing: -0.01em; } .ucm-card-title--sm { font-size: clamp(1.375rem, 1.302rem + 0.3vw, 1.625rem); /* 22 → 26 */ line-height: 1.077; letter-spacing: -0.01em; } .ucm-card-title--loose { line-height: 1.135; letter-spacing: -0.03em; } /* Keep RichText placeholders from collapsing to zero height in the editor. */ .ucm-section [data-rich-text-placeholder]::after { opacity: 0.55; } /* -------------------------------------------------------------------------- * * Buttons * -------------------------------------------------------------------------- */ .ucm-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 40px; border: 0; border-radius: 0; font-family: var(--ucm-font-sans); font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: opacity 0.15s ease; } .ucm-button:hover, .ucm-button:focus-visible { opacity: 0.85; text-decoration: none; } .ucm-button--tall { min-height: 56px; } .ucm-button--blue { background-color: var(--ucm-blue); color: var(--ucm-white); } .ucm-button--navy { background-color: var(--ucm-navy); color: var(--ucm-white); } .ucm-button--yellow { background-color: var(--ucm-yellow); color: var(--ucm-black); } .ucm-button--gold { background-color: var(--ucm-gold); color: var(--ucm-black); } .ucm-button--white { background-color: var(--ucm-white); color: var(--ucm-black); } .ucm-button--outline { background-color: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; } /* Secondary CTA: white fill inside a 3px yellow rule. The border is an inset shadow so the button keeps the same box size as the solid variants and lines up with them on a row. */ .ucm-button--yellow-outline { background-color: var(--ucm-white); color: var(--ucm-black); box-shadow: inset 0 0 0 3px var(--ucm-yellow); } /* External-link CTA: the glyph is decorative and sits after the label; the meaning is carried by the `.ucm-sr-only` note that `render_button()` emits beside it. */ .ucm-button__external { flex: none; width: 0.78em; height: 0.78em; margin-block-start: -0.1em; } /* Visually hidden, still announced. Used for the external-link note on CTA buttons. */ .ucm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Any link colour the theme sets is overridden above; make sure visited matches too. */ .ucm-section a.ucm-button, .ucm-section a.ucm-button:visited { text-decoration: none; } .ucm-section a.ucm-button--blue, .ucm-section a.ucm-button--blue:visited, .ucm-section a.ucm-button--navy, .ucm-section a.ucm-button--navy:visited { color: var(--ucm-white); } .ucm-section a.ucm-button--yellow, .ucm-section a.ucm-button--yellow:visited, .ucm-section a.ucm-button--gold, .ucm-section a.ucm-button--gold:visited, .ucm-section a.ucm-button--white, .ucm-section a.ucm-button--white:visited, .ucm-section a.ucm-button--yellow-outline, .ucm-section a.ucm-button--yellow-outline:visited { color: var(--ucm-black); } /* -------------------------------------------------------------------------- * * Auto-wrapping grid * * `--ucm-cols-set` is the author's chosen column count. Items are flex children so the * last, partially-filled row grows to fill the remaining space instead of leaving holes. * -------------------------------------------------------------------------- */ .ucm-grid { --ucm-cols: var(--ucm-cols-set, 3); display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--ucm-grid-gap); /* Block-level rules centre narrower grids with `margin-inline: auto`, so only lock the block axis. */ margin-block: 0; padding: 0; list-style: none; } .ucm-grid > * { flex: 1 1 calc((100% - (var(--ucm-cols) - 1) * var(--ucm-grid-gap)) / var(--ucm-cols)); min-width: 0; margin: 0; } @media (max-width: 1280px) { .ucm-grid { --ucm-cols: min(var(--ucm-cols-set, 3), 4); } } @media (max-width: 1100px) { .ucm-grid { --ucm-cols: min(var(--ucm-cols-set, 3), 3); } } @media (max-width: 900px) { .ucm-grid { --ucm-cols: min(var(--ucm-cols-set, 3), 2); } } @media (max-width: 640px) { .ucm-grid { --ucm-cols: 1; } } /* -------------------------------------------------------------------------- * * Media * -------------------------------------------------------------------------- */ .ucm-media { display: block; overflow: hidden; position: relative; } /** * `cover` fills the frame. Almost every media slot in the magazine is a fixed aspect-ratio window * onto a photograph, so it should crop rather than letterbox, and it crops from the centre so a * subject near an edge is the only thing at risk. * * Artwork that must stay whole — cut-outs and collages that lose their edges to a crop — opts out * per block; `.ucm-hero .ucm-hero__media img` is the one such case today. * * Any opt-out MUST qualify its selector with the block root. A bare `.ucm-thing__media img` ties * this rule at (0,1,1) and loses on load order, because this sheet is enqueued after the block * styles — it reads as working while doing nothing at all. */ .ucm-media img, .ucm-media > figure, .ucm-media > figure > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; } .ucm-media--circle { aspect-ratio: 1; border-radius: 50%; } .ucm-media--circle img { border-radius: 50%; } /* -------------------------------------------------------------------------- * * Prev / Next navigation (Alumni Perspectives) * -------------------------------------------------------------------------- */ .ucm-nav { display: flex; gap: 6px; } .ucm-nav__button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 127px; height: 62px; padding: 0; border: 0; border-radius: 0; background-color: var(--ucm-tint); color: var(--ucm-blue); font-family: var(--ucm-font-serif); font-size: 20px; font-style: italic; font-weight: 400; line-height: 26px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } /* * Hover / focus darken the label along with the field rather than inverting the pair: navy on * the hover tint is 11.9:1, up from the 7:1 the resting blue-on-tint gives. * * `color` is restated here, not just on the base rule, on purpose. The base declaration is only * (0,1,0), so a host theme's `button:hover` — which most block themes ship, painting the label * with their own button foreground — outranks it and repaints the label the moment the pointer * lands. Pinning the colour in the (0,2,0) hover rule keeps the pairing the plugin guarantees. */ .ucm-nav__button:hover, .ucm-nav__button:focus-visible { background-color: #dbe6f4; color: var(--ucm-navy); } /* * The hover tint is only a ~1.1:1 shift against the resting fill — nowhere near the 3:1 WCAG * 2.4.11 asks of a focus indicator — so keyboard focus gets an outline of its own, blue on the * hover fill at 6.4:1. * * Drawn inset rather than offset outwards: in Alumni Perspectives the pair is pinned flush to * the panel's bottom-right corner inside a section that clips its overflow, so a ring outside * the button would lose the two edges that meet the corner. */ .ucm-nav__button:focus-visible { outline: 2px solid var(--ucm-blue); outline-offset: -4px; } .ucm-nav__chevron { flex: none; display: block; } @media (max-width: 640px) { .ucm-nav__button { width: 104px; height: 54px; font-size: 18px; } } /* -------------------------------------------------------------------------- * * Editor-only affordances shared by every block * -------------------------------------------------------------------------- */ .ucm-section .block-editor-media-placeholder { margin: 0; height: 100%; min-height: 160px; } .ucm-section .components-placeholder__fieldset { justify-content: center; }