/* ============================================================ MVSD Core — Paragraph block styles Each paragraph type is a self-contained visual block. All layouts are responsive — they stack to a single column at narrow viewports without any editor intervention. ============================================================ */ /* ── Shared spacing between blocks ───────────────────────────── */ .para { margin: var(--space-10) 0; } /* :first-child trim removed — every paragraph is first/last child of its own .field__item wrapper, so this stripped EVERY paragraph margin. Edge trimming now done via .field--name-field-content > * scope below. */ .field--name-field-content > .field__item:first-child .para { margin-top: 0; } .field--name-field-content > .field__item:last-child .para { margin-bottom: 0; } /* ── Rich Text ──────────────────────────────────────────────── * Standard prose block. Inherits body typography from base.css. * Headings inside content start at h2 (h1 is the page title). */ .para--rich-text { /* prose rhythm */ line-height: var(--line-height-base); } .para--rich-text h2 { font-size: var(--font-size-2xl); margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--color-primary); border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); } .para--rich-text h3 { font-size: var(--font-size-xl); margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--color-primary); } .para--rich-text h4 { font-size: var(--font-size-lg); margin-top: var(--space-6); margin-bottom: var(--space-2); color: var(--color-primary); } .para--rich-text p { margin-bottom: var(--space-4); } .para--rich-text ul, .para--rich-text ol { margin-bottom: var(--space-4); padding-left: var(--space-6); } .para--rich-text li { margin-bottom: var(--space-1); } .para--rich-text blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--color-accent); background: var(--color-bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--color-text-muted); } .para--rich-text a { color: var(--color-primary-mid); text-underline-offset: 3px; } .para--rich-text a:hover { color: var(--color-primary); } /* ── Image ──────────────────────────────────────────────────── * Four variants: full | narrow | float-left | float-right */ .para--image { margin: var(--space-10) 0; } /* Shared: image fills its container, caption below */ .para--image img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; } /* Neutralise Drupal field wrapper margins inside image paragraphs */ .para--image > div, .para--image .field--type-image, .para--image .field__item { margin: 0; padding: 0; } .para-caption { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; text-align: center; } /* Full width — image spans the full content column. width: auto (block-level natural fill) so margins reduce the box width instead of adding to it. */ .para--image--full { width: auto; } /* Narrow — 60% wide, centred */ .para--image--narrow { width: 60%; margin-inline: auto; } /* Float left — wraps text to the right. Small left inset so the image doesn't sit flush against an adjacent decorated paragraph's left rule / background tint. */ .para--image--float-left { float: left; width: 40%; margin: 0 var(--space-6) var(--space-4) 0.5rem; } /* Float right — wraps text to the left. Symmetric right inset. */ .para--image--float-right { float: right; width: 40%; margin: 0 0.5rem var(--space-4) var(--space-6); } /* Full image paragraphs sit at the article-body edge by default. With the bg-tint padding now providing 2.5rem of horizontal breathing room when decoration is applied, the previous 0.5rem nudge is no longer needed (and made decorated wrappers visually narrower than non-decorated ones). */ /* Clearfix after floated images */ .para--image--float-left + *, .para--image--float-right + * { /* handled by page-content overflow context */ } .field--name-field-content::after { content: ''; display: table; clear: both; } /* ── Image + Text ───────────────────────────────────────────── * Two-column: image on one side, text on the other. * Stacks to single column on narrow viewports. */ .para--image-text { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: start; } /* Reverse column order when image is on the right */ .para--image-text--right { grid-template-columns: 2fr 1fr; } .para--image-text--right .para-image-text__image { order: 2; } .para--image-text--right .para-image-text__body { order: 1; } .para-image-text__image img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; } .para-image-text__body { /* prose inside the text column */ line-height: var(--line-height-base); } .para-image-text__body > *:first-child { margin-top: 0; } .para-image-text__body > *:last-child { margin-bottom: 0; } /* Drop floated images earlier (480px) — at phone widths the 40% float collapses the text column to an unreadable strip. Image stacks above text. */ @media (max-width: 480px) { .para--image--float-left, .para--image--float-right { float: none; width: 100%; margin: 0 0 var(--space-4) 0; } } /* Stack on mobile */ @media (max-width: 640px) { .para--image-text, .para--image-text--right { grid-template-columns: 1fr; } .para--image-text--right .para-image-text__image, .para--image-text--right .para-image-text__body { order: unset; } .para--image--narrow { width: 100%; } .para--image--float-left, .para--image--float-right { float: none; width: 100%; margin: 0 0 var(--space-4) 0; } } /* ── Callout Box ────────────────────────────────────────────── * Highlighted box with an icon area and body text. * Four styles: info (blue) | tip (green) | important (amber) | event (gold) */ .para--callout { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border-left: 4px solid; } /* Info — blue */ .para--callout--info { background: #eff6ff; border-left-color: #3b82f6; color: #1e3a5f; } .para--callout--info .para-callout__icon::before { background-color: #3b82f6; } /* Tip — green */ .para--callout--tip { background: #f0fdf4; border-left-color: #22c55e; color: #14532d; } .para--callout--tip .para-callout__icon::before { background-color: #22c55e; } /* Important — amber */ .para--callout--important { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; } .para--callout--important .para-callout__icon::before { background-color: #f59e0b; } /* Event — district gold */ .para--callout--event { background: #fdf8ec; border-left-color: var(--color-accent); color: #5c3d00; } .para--callout--event .para-callout__icon::before { background-color: var(--color-accent); } /* Icon pseudo-element — SVG via mask-image, one per style */ .para-callout__icon { display: flex; align-items: flex-start; padding-top: 0.15em; } .para-callout__icon::before { content: ''; display: block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } /* Info icon — circle with i */ .para--callout--info .para-callout__icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 4a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } /* Tip icon — checkmark circle */ .para--callout--tip .para-callout__icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.707 7.293-6 6a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L10 13.172l5.293-5.293a1 1 0 0 1 1.414 1.414z'/%3E%3C/svg%3E"); } /* Important icon — warning triangle */ .para--callout--important .para-callout__icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2a1 1 0 0 1 .894.553l9 18A1 1 0 0 1 21 22H3a1 1 0 0 1-.894-1.447l9-18A1 1 0 0 1 12 2zm0 4.236L4.618 20H19.38L12 6.236zM12 10a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1zm0 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); } /* Event icon — calendar */ .para--callout--event .para-callout__icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 2a1 1 0 0 1 1 1v1h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 1 1 2 0v1h8V3a1 1 0 0 1 1-1zM5 10v10h14V10H5zm2 2h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z'/%3E%3C/svg%3E"); } .para-callout__body > *:first-child { margin-top: 0; } .para-callout__body > *:last-child { margin-bottom: 0; } .para-callout__body a { color: inherit; font-weight: var(--font-weight-medium); } /* Stack icon + body on tiny screens */ @media (max-width: 480px) { .para--callout { grid-template-columns: 1fr; } } /* ── Accordion ──────────────────────────────────────────────── * Built on native
/ — keyboard accessible and * screen-reader friendly with no extra ARIA needed. * paragraphs.js enforces one-panel-at-a-time behaviour. */ .para--accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); /* overflow: visible (was: hidden) — lets the badge overhang escape the wrapper. Round corners are preserved on individual children below. */ overflow: visible; } .para-accordion__heading { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-primary); padding: var(--space-4) var(--space-6); margin: 0; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); /* Round the top corners so the heading sits cleanly inside the wrapper's border-radius (replaces the old overflow:hidden clipping behavior). */ border-top-left-radius: calc(var(--radius-md) - 1px); border-top-right-radius: calc(var(--radius-md) - 1px); } /* Round the bottom corners on the last accordion item so the wrapper's border-radius is visually preserved without overflow:hidden. */ .para-accordion__item:last-child .para-accordion__trigger, .para-accordion__item:last-child .para-accordion__body { border-bottom-left-radius: calc(var(--radius-md) - 1px); border-bottom-right-radius: calc(var(--radius-md) - 1px); } /* Each
panel */ .para-accordion__item { border-bottom: 1px solid var(--color-border); } .para-accordion__item:last-child { border-bottom: none; } /* Remove the native disclosure triangle */ .para-accordion__item summary { list-style: none; } .para-accordion__item summary::-webkit-details-marker { display: none; } /* The clickable trigger row */ .para-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); cursor: pointer; background: var(--color-bg); color: var(--color-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); transition: background var(--transition-fast), color var(--transition-fast); user-select: none; } .para-accordion__trigger:hover { background: var(--color-bg-subtle); color: var(--color-primary-dark); } .para-accordion__trigger:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; } /* Custom chevron icon — rotates when panel is open */ .para-accordion__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; background-color: var(--color-primary); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; transition: transform var(--transition-fast); } /* Rotate chevron when open */ .para-accordion__item[open] .para-accordion__trigger { background: var(--color-primary-light); color: var(--color-primary-dark); } .para-accordion__item[open] .para-accordion__icon { transform: rotate(180deg); background-color: var(--color-primary-dark); } /* Panel body */ .para-accordion__body { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-bg); line-height: var(--line-height-base); } .para-accordion__body > *:first-child { margin-top: 0; } .para-accordion__body > *:last-child { margin-bottom: 0; } /* Drupal wraps each paragraph in a div — make it transparent */ .para-accordion__list > .field--name-field-para-items > .field__items, .para-accordion__list > div { display: contents; } /* ── Two Columns ────────────────────────────────────────────── * Side-by-side text columns. Three split variants: * equal — 50 / 50 * wide-left — 2/3 left + 1/3 right * wide-right — 1/3 left + 2/3 right * Stacks to single column on mobile. */ .para--columns { display: grid; gap: var(--space-8); align-items: start; } /* Default / equal split */ .para--columns--equal { grid-template-columns: 1fr 1fr; } /* Wider left column */ .para--columns--wide-left { grid-template-columns: 2fr 1fr; } /* Wider right column */ .para--columns--wide-right { grid-template-columns: 1fr 2fr; } .para-columns__left, .para-columns__right { line-height: var(--line-height-base); } .para-columns__left > *:first-child, .para-columns__right > *:first-child { margin-top: 0; } .para-columns__left > *:last-child, .para-columns__right > *:last-child { margin-bottom: 0; } /* Stack on mobile */ @media (max-width: 640px) { .para--columns--equal, .para--columns--wide-left, .para--columns--wide-right { grid-template-columns: 1fr; } } /* ── Data Table ─────────────────────────────────────────────── * Scrollable wrapper ensures the table never breaks the layout * on narrow viewports. role="region" + aria-label on wrapper * tells screen readers what the scroll region contains. */ .para--table { /* inherits .para margin-block */ } .para-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */ border-radius: var(--radius-md); border: 1px solid var(--color-border); } /* Base table styles */ .para--table table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); line-height: var(--line-height-base); } .para--table caption { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-align: left; padding: var(--space-3) var(--space-4); caption-side: top; border-bottom: 1px solid var(--color-border); } /* Header row (thead > th) */ .para--table thead th { background: var(--color-bg-subtle); color: var(--color-primary); font-weight: var(--font-weight-semibold); text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-border); white-space: nowrap; } /* Data cells */ .para--table tbody td, .para--table tbody th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; } /* Zebra striping */ .para--table tbody tr:nth-child(even) td, .para--table tbody tr:nth-child(even) th { background: var(--color-bg-subtle); } /* Header column — first cell in each body row styled as a header */ .para--table--header-col tbody th { background: var(--color-bg-subtle); font-weight: var(--font-weight-semibold); color: var(--color-primary); border-right: 2px solid var(--color-border); white-space: nowrap; } /* No border-bottom on last row */ .para--table tbody tr:last-child td, .para--table tbody tr:last-child th { border-bottom: none; } /* Hover row highlight */ .para--table tbody tr:hover td, .para--table tbody tr:hover th { background: color-mix(in srgb, var(--color-primary-light) 40%, transparent); } /* ══════════════════════════════════════════════════════════════ STYLE PRESET FRAMEWORK — paragraph decoration system ══════════════════════════════════════════════════════════════ Wrapper classes added by hook_preprocess_paragraph based on the style preset (field_para_style) + per-aspect override fields. The "default" / "none" / "normal" values are CSS no-ops so paragraphs without decoration emit no extra weight. Architecture: - .para--style--{standard|sidebar|featured|spotlight|quiet} preset hook - .para--spacing--{tight|normal|loose} margin below - .para--bg--{none|subtle-gray|brand-light|accent-light} background - .para--accent--{none|top|bottom|both|left} accent rule - .para--emphasis--{default|muted|lead} type weight - [data-badge="{featured|new|important|event}"] corner pill - id="{anchor}" in-page link ══════════════════════════════════════════════════════════════ */ /* === SPACING (bottom margin) — generous defaults; tighter only on request */ .para--spacing--none { margin-bottom: 0; } .para--spacing--tight { margin-bottom: 2rem; } .para--spacing--normal { margin-bottom: 4rem; } .para--spacing--loose { margin-bottom: 6rem; } /* Baseline: any paragraph without an explicit spacing class still gets a comfortable bottom gap. */ .para { margin-bottom: 3rem; } /* === BACKGROUND TINT — compact interior padding so the colored block stays visually distinct from the surrounding whitespace. The GAP between blocks is what separates them, not the colored area itself. */ .para--bg--subtle-gray, .para--bg--brand-light, .para--bg--accent-light { padding: 1rem 1.5rem; border-radius: 6px; /* Explicit margin so the gap around colored blocks is guaranteed (independent of any sibling's margin). */ margin-block: 3rem; } .para--bg--subtle-gray { background: rgba(0, 0, 0, 0.04); } .para--bg--brand-light { background: color-mix(in srgb, var(--color-primary, #01491f) 8%, transparent); } .para--bg--accent-light { background: color-mix(in srgb, var(--color-accent, #f5a623) 12%, transparent); } /* === ACCENT RULES — small interior padding to clear the rule line. Accent rules also imply this paragraph stands out, so we add explicit block margin for visual separation. */ .para--accent--top { border-top: 3px solid var(--color-primary, #01491f); padding-top: 1rem; margin-top: 3rem; } .para--accent--bottom { border-bottom: 3px solid var(--color-primary, #01491f); padding-bottom: 1rem; margin-bottom: 3rem; } .para--accent--both { border-top: 3px solid var(--color-primary, #01491f); border-bottom: 3px solid var(--color-primary, #01491f); padding-block: 1rem; margin-block: 3rem; } .para--accent--left { border-left: 4px solid var(--color-primary, #01491f); padding-left: 1.5rem; } /* === TEXT EMPHASIS ───────────────────────────────────────────── */ .para--emphasis--muted { color: rgba(0, 0, 0, 0.6); font-size: 0.92em; } .para--emphasis--lead { font-size: 1.15em; line-height: 1.5; color: rgba(0, 0, 0, 0.85); } /* === BADGE (corner pill via data-attribute + ::before) ───────── Badge overhangs the wrapper at the top-right — sits ABOVE the colored bg edge so it reads as an attached tag, not painted on the box. The paragraph gets extra top margin to give the overhanging pill clearance from the previous paragraph's content. */ .para[data-badge-label] { position: relative; margin-top: 2.25rem; /* Force a new block-formatting context so a badged paragraph never visually collides with a preceding floated image. */ clear: both; } .para[data-badge-label]::before { content: attr(data-badge-label); position: absolute; top: -0.85rem; right: 1rem; z-index: 3; padding: 0.32rem 0.75rem; font-size: 0.72rem; font-weight: 800; letter-spacing: var(--ls-tracked); text-transform: uppercase; border-radius: 3px; white-space: nowrap; pointer-events: none; background: var(--color-primary, #01491f); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .para[data-badge="featured"]::before { background: var(--color-primary, #01491f); } .para[data-badge="new"]::before { background: var(--color-primary-mid, #0b8545); } .para[data-badge="important"]::before { background: #c0392b; } .para[data-badge="event"]::before { background: var(--color-accent, #f5a623); color: #1a1a1a; } /* === STYLE PRESET combination tweaks (subtle refinements where the sum of individual rules needs a little more polish) ─────────── */ /* Sidebar: textbook info-panel feel — slightly softer text, subtle shadow on the left rule for depth. */ .para--style--sidebar { box-shadow: inset 4px 0 0 var(--color-primary, #01491f); border-left: none; /* shadow takes over; avoids double-rule with bg */ padding-left: 1.25rem; } .para--style--sidebar.para--bg--subtle-gray { border-radius: 0 6px 6px 0; } /* Quiet: pull in slightly to feel set-apart. */ .para--style--quiet { margin-left: 1rem; margin-right: 1rem; } /* Spotlight: a touch more visual weight in the badge. */ .para--style--spotlight[data-badge]::before { font-size: 0.78rem; padding: 0.35rem 0.85rem; } /* ══════════════════════════════════════════════════════════════ PER-TYPE ADVANCED — image / table / accordion ══════════════════════════════════════════════════════════════ */ /* === IMAGE FRAME styles ────────────────────────────────────── */ .para--image-frame--shadow img { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10); } .para--image-frame--rounded img { border-radius: var(--radius-md); } /* Image-as-link: hint cursor + subtle hover lift. */ .para-image__link { display: block; transition: transform 220ms ease, box-shadow 220ms ease; } .para-image__link:hover img { transform: translateY(-2px); } /* Visible focus ring for keyboard users (WCAG 2.4.7). */ .para-image__link:focus-visible { outline: 3px solid var(--color-accent, #f5a623); outline-offset: 4px; border-radius: var(--radius-md); } /* === TABLE options ────────────────────────────────────────── */ .para--table--striped tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.025); } .para--table--compact th, .para--table--compact td { padding: var(--space-2) var(--space-3); font-size: 0.92em; } /* Sticky header — scoped to the scroll wrapper so it releases past the table. The .para-table__scroll wrapper has overflow-x: auto; native sticky honors that as the scroll container. */ .para--table--sticky .para-table__scroll { overflow-y: visible; } .para--table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg, #fff); box-shadow: 0 1px 0 var(--color-border, #ddd); } /* === COLUMNS per-column color + emphasis ────────────────────── Color applies a left accent rule + subtle background tint. Emphasis applies a typographic / structural treatment. */ /* Per-column COLOR — a colored left accent + matching tint. Same palette as accordion bar colors for visual consistency. */ .para-columns__left[class*="--color-"], .para-columns__right[class*="--color-"] { padding: 1rem 1.25rem; border-radius: 4px; border-left: 4px solid; } .para-columns__left--color-brand, .para-columns__right--color-brand { border-left-color: var(--color-primary, #01491f); background: color-mix(in srgb, var(--color-primary, #01491f) 6%, transparent); } .para-columns__left--color-accent, .para-columns__right--color-accent { border-left-color: var(--color-accent, #f5a623); background: color-mix(in srgb, var(--color-accent, #f5a623) 8%, transparent); } .para-columns__left--color-info, .para-columns__right--color-info { border-left-color: #2563eb; background: rgba(37, 99, 235, 0.06); } .para-columns__left--color-success, .para-columns__right--color-success { border-left-color: #16a34a; background: rgba(22, 163, 74, 0.06); } .para-columns__left--color-warning, .para-columns__right--color-warning { border-left-color: #d97706; background: rgba(217, 119, 6, 0.07); } .para-columns__left--color-danger, .para-columns__right--color-danger { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.06); } /* Per-column EMPHASIS — typographic treatments. */ .para-columns__left--emp-sidebar, .para-columns__right--emp-sidebar { background: rgba(0, 0, 0, 0.035); padding: 1rem 1.25rem; border-radius: 4px; font-size: 0.95em; color: rgba(0, 0, 0, 0.78); } .para-columns__left--emp-quote, .para-columns__right--emp-quote { font-style: italic; font-size: 1.1em; line-height: 1.5; /* Clamp inset so the giant quote mark doesn't crowd narrow columns (e.g. 320px stacked viewport). */ padding-left: clamp(1.25rem, 6vw, 2.5rem); position: relative; color: rgba(0, 0, 0, 0.85); } .para-columns__left--emp-quote::before, .para-columns__right--emp-quote::before { content: '\201C'; /* opening curly quote */ position: absolute; left: 0.25rem; top: -0.5rem; font-size: clamp(2.25em, 8vw, 3.5em); line-height: 1; color: var(--color-primary, #01491f); opacity: 0.45; font-style: normal; font-family: Georgia, serif; } .para-columns__left--emp-pull-out, .para-columns__right--emp-pull-out { font-size: 1.2em; line-height: 1.45; font-weight: 500; padding: 1.25rem 1.5rem; border-block: 2px solid var(--color-primary, #01491f); } /* === SECTION DIVIDER — thematic break between sections ──────── The DIVIDER element itself contains its own breathing room (transparent space above + below the visible line) instead of relying on margin. This sidesteps margin-collapse / wrapper-div issues entirely — the gap is guaranteed by the element's own height. */ .para--divider { border: none; background: transparent; margin-block: 0; width: 100%; } .para--divider--line { height: 5rem; background: linear-gradient( to bottom, transparent 0, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.20) calc(50% - 0.5px), rgba(0, 0, 0, 0.20) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100% ); } .para--divider--thick { height: 7rem; background: linear-gradient( to bottom, transparent 0, transparent calc(50% - 2px), var(--color-primary, #01491f) calc(50% - 2px), var(--color-primary, #01491f) calc(50% + 2px), transparent calc(50% + 2px), transparent 100% ); } .para--divider--ornamental { display: flex; align-items: center; justify-content: center; border: 0; margin-block: 0; height: 7rem; text-align: center; position: relative; } .para--divider--ornamental::before, .para--divider--ornamental::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--color-text, #1a1a1a) 18%, transparent); max-width: 30%; } .para--divider--ornamental::after { margin-left: 1rem; } .para--divider--ornamental::before { margin-right: 1rem; } /* The center motif is added via a span on the hr's pseudo-element since
can't have child elements. Use a CSS-only diamond cluster. */ .para--divider--ornamental { background: linear-gradient(to right, color-mix(in srgb, var(--color-text, #1a1a1a) 18%, transparent) 0, color-mix(in srgb, var(--color-text, #1a1a1a) 18%, transparent) calc(50% - 1.5rem), transparent calc(50% - 1.5rem), transparent calc(50% + 1.5rem), color-mix(in srgb, var(--color-text, #1a1a1a) 18%, transparent) calc(50% + 1.5rem), color-mix(in srgb, var(--color-text, #1a1a1a) 18%, transparent) 100%) center / 100% 1px no-repeat; position: relative; } .para--divider--ornamental::before { content: '\2756'; /* black diamond minus white x — typographic flourish */ display: block; flex: 0 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; background: var(--color-bg, #fff); padding: 0 0.6rem; font-size: 1.1rem; color: var(--color-primary, #01491f); height: auto; max-width: none; } .para--divider--ornamental::after { display: none; /* the linear-gradient handles both sides; remove the fallback */ } .para--divider--spacer { height: 2.5rem; margin-block: 0; /* No visible line; semantically still a thematic break. */ } /* === ACCORDION bar color — overrides the default heading bg ── */ .para--accordion-bar--brand .para-accordion__heading { background: var(--color-primary, #01491f); color: #fff; } .para--accordion-bar--accent .para-accordion__heading { background: var(--color-accent, #f5a623); color: #1a1a1a; } .para--accordion-bar--info .para-accordion__heading { background: #2563eb; color: #fff; } /* WCAG AA contrast — bumped to deeper shades so white text clears 4.5:1 on each colored bar. Previously: success ~3.0:1, warning ~2.85:1 (FAIL), danger ~4.1:1 (FAIL for normal text). */ .para--accordion-bar--success .para-accordion__heading { background: #15803d; color: #fff; } .para--accordion-bar--warning .para-accordion__heading { background: #b45309; color: #fff; } .para--accordion-bar--danger .para-accordion__heading { background: #b91c1c; color: #fff; } /* ── Reduced motion: kill paragraph-level transitions for users who prefer minimal animation (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { .para-accordion__trigger, .para-accordion__icon, .para-image__link { transition: none; } .para-image__link:hover img { transform: none; } } /* ══════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════ BUTTON GROUP paragraph (button_group + button_item) ────────────────────────────────────────────────────────────── Wrapper: .para.para--button-group + layout: .para--btn-layout--{row|grid|stacked} + variant: .para--btn-variant--{filled|outlined|subtle} + size: .para--btn-size--{small|medium|large} + alignment: .para--btn-align--{left|center|right} (row only) Inner list: .para-btn-group__list (role="group") ⚠ Drupal's field formatter inserts two intermediate
wrappers between the list and each . We use `display: contents` to make those wrappers layout-transparent so the flex/grid `gap` actually reaches the buttons. Buttons: ══════════════════════════════════════════════════════════════ */ /* spacing inherited from .para + .para--spacing--{value} system */ /* ── List layout containers + Drupal-wrapper bypass ─────────── */ .para--button-group .para-btn-group__list { display: flex; flex-wrap: wrap; gap: 1rem; } .para--btn-layout--grid .para-btn-group__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; } .para--btn-layout--stacked .para-btn-group__list { display: flex; flex-direction: column; gap: 0.75rem; } .para--btn-align--center .para-btn-group__list { justify-content: center; } .para--btn-align--right .para-btn-group__list { justify-content: flex-end; } /* Make Drupal's field/field__items/field__item wrappers transparent to layout so flex/grid + gap apply directly to the buttons. */ .para--button-group .para-btn-group__list > div, .para--button-group .para-btn-group__list > div > div { display: contents; } /* ── Base button (shared structure) ─────────────────────────── */ .para--button-group .para-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.75em 1.4em; font-family: inherit; font-weight: var(--font-weight-semibold, 600); font-size: 1rem; letter-spacing: var(--ls-snug); line-height: 1.25; text-decoration: none; border-radius: 0.65rem; border: 1.5px solid transparent; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease; min-height: 44px; text-align: center; white-space: normal; position: relative; overflow: hidden; } .para--button-group .para-btn::after { /* Subtle inner highlight line for "lifted" feel — only on filled. */ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); opacity: 0; transition: opacity 180ms ease; } .para--button-group .para-btn--filled::after { opacity: 1; } .para--button-group .para-btn:focus-visible { outline: 3px solid var(--color-accent, #f5a623); outline-offset: 3px; } .para--button-group .para-btn:active { transform: translateY(1px); transition-duration: 60ms; } .para--btn-layout--grid .para-btn, .para--btn-layout--stacked .para-btn { width: 100%; } /* ── Sizes ──────────────────────────────────────────────────── */ .para--button-group .para-btn--small { font-size: 0.875rem; padding: 0.55em 1.05em; min-height: 40px; border-radius: 0.5rem; } .para--button-group .para-btn--medium { font-size: 1rem; padding: 0.75em 1.4em; } .para--button-group .para-btn--large { font-size: 1.125rem; padding: 0.95em 1.8em; min-height: 54px; border-radius: 0.8rem; } /* ── Variant: FILLED (primary action) ──────────────────────── */ /* Linear gradient gives the button depth even before hover. Border + double shadow + inset highlight reads as "raised". */ .para--button-group .para-btn--filled { background: linear-gradient(180deg, var(--color-primary-mid, #0b8545) 0%, var(--color-primary, #01491f) 100%); color: #fff; border-color: rgba(0,0,0,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(0,0,0,0.10), 0 4px 10px rgba(1,73,31,0.22); } .para--button-group .para-btn--filled:hover, .para--button-group .para-btn--filled:focus { background: linear-gradient(180deg, var(--color-primary, #01491f) 0%, #013317 100%); color: #fff; border-color: rgba(0,0,0,0.30); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 4px rgba(0,0,0,0.14), 0 8px 18px rgba(1,73,31,0.32); transform: translateY(-2px); } /* ── Variant: OUTLINED (secondary) ─────────────────────────── */ .para--button-group .para-btn--outlined { background-color: #fff; color: var(--color-primary, #01491f); border-color: var(--color-primary, #01491f); border-width: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.06); } .para--button-group .para-btn--outlined:hover, .para--button-group .para-btn--outlined:focus { background: linear-gradient(180deg, var(--color-primary-mid, #0b8545) 0%, var(--color-primary, #01491f) 100%); color: #fff; border-color: #013317; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 4px rgba(0,0,0,0.12), 0 8px 18px rgba(1,73,31,0.28); transform: translateY(-2px); } /* ── Variant: SUBTLE (tertiary, still visibly button-shaped) ─ */ .para--button-group .para-btn--subtle { background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%); color: var(--color-primary, #01491f); border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.6) inset; } .para--button-group .para-btn--subtle:hover, .para--button-group .para-btn--subtle:focus { background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%); color: var(--color-primary, #01491f); border-color: #94a3b8; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.08); transform: translateY(-1px); } /* ── Icon (mask-based, monochrome, inherits currentColor) ──── */ .para-btn__icon { flex: 0 0 auto; display: inline-block; width: 1.05em; height: 1.05em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .para-btn--icon-download .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M5%2020h14v-2H5v2zM12%204a1%201%200%200%201%201%201v8.585l3.293-3.292a1%201%200%201%201%201.414%201.414l-5%205a1%201%200%200%201-1.414%200l-5-5a1%201%200%201%201%201.414-1.414L11%2013.585V5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M5%2020h14v-2H5v2zM12%204a1%201%200%200%201%201%201v8.585l3.293-3.292a1%201%200%201%201%201.414%201.414l-5%205a1%201%200%200%201-1.414%200l-5-5a1%201%200%201%201%201.414-1.414L11%2013.585V5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E"); } .para-btn--icon-external .para-btn__icon, .para-btn--external:not(.para-btn--has-icon) .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14%203h7v7h-2V6.414l-9.293%209.293-1.414-1.414L17.586%205H14V3zM5%205h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14%203h7v7h-2V6.414l-9.293%209.293-1.414-1.414L17.586%205H14V3zM5%205h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E"); } .para-btn--icon-audio .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M3%209v6h4l5%204V5L7%209H3zm13.54.12a4%204%200%200%201%200%205.76l-1.42-1.42a2%202%200%200%200%200-2.92l1.42-1.42zm2.83-2.83a8%208%200%200%201%200%2011.42l-1.41-1.41a6%206%200%200%200%200-8.6l1.41-1.41z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M3%209v6h4l5%204V5L7%209H3zm13.54.12a4%204%200%200%201%200%205.76l-1.42-1.42a2%202%200%200%200%200-2.92l1.42-1.42zm2.83-2.83a8%208%200%200%201%200%2011.42l-1.41-1.41a6%206%200%200%200%200-8.6l1.41-1.41z'/%3E%3C/svg%3E"); } .para-btn--icon-video .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M4%204h12a2%202%200%200%201%202%202v3l4-3v12l-4-3v3a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M4%204h12a2%202%200%200%201%202%202v3l4-3v12l-4-3v3a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z'/%3E%3C/svg%3E"); } .para-btn--icon-document .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%207V3.5L19.5%209H14z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%207V3.5L19.5%209H14z'/%3E%3C/svg%3E"); } .para-btn--icon-language .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M12.87%2015.07l-2.54-2.51.03-.03A17.52%2017.52%200%200%200%2014.07%206H17V4h-7V2H8v2H1v2h11.17C11.5%207.92%2010.44%209.75%209%2011.35%208.07%2010.32%207.3%209.19%206.69%208h-2c.73%201.63%201.73%203.17%202.98%204.56l-5.09%205.02L4%2019l5-5%203.11%203.11.76-2.04zM18.5%2010h-2L12%2022h2l1.12-3h4.75L21%2022h2l-4.5-12zm-2.62%207l1.62-4.33L19.12%2017h-3.24z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M12.87%2015.07l-2.54-2.51.03-.03A17.52%2017.52%200%200%200%2014.07%206H17V4h-7V2H8v2H1v2h11.17C11.5%207.92%2010.44%209.75%209%2011.35%208.07%2010.32%207.3%209.19%206.69%208h-2c.73%201.63%201.73%203.17%202.98%204.56l-5.09%205.02L4%2019l5-5%203.11%203.11.76-2.04zM18.5%2010h-2L12%2022h2l1.12-3h4.75L21%2022h2l-4.5-12zm-2.62%207l1.62-4.33L19.12%2017h-3.24z'/%3E%3C/svg%3E"); } .para-btn--icon-arrow-right .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14.293%205.293a1%201%200%200%201%201.414%200l6%206a1%201%200%200%201%200%201.414l-6%206a1%201%200%200%201-1.414-1.414L18.586%2013H3a1%201%200%201%201%200-2h15.586l-4.293-4.293a1%201%200%200%201%200-1.414z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M14.293%205.293a1%201%200%200%201%201.414%200l6%206a1%201%200%200%201%200%201.414l-6%206a1%201%200%200%201-1.414-1.414L18.586%2013H3a1%201%200%201%201%200-2h15.586l-4.293-4.293a1%201%200%200%201%200-1.414z'/%3E%3C/svg%3E"); } .para-btn--icon-info .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M12%202C6.477%202%202%206.477%202%2012s4.477%2010%2010%2010%2010-4.477%2010-10S17.523%202%2012%202zm0%204a1%201%200%201%201%200%202%201%201%200%200%201%200-2zm0%204a1%201%200%200%201%201%201v5a1%201%200%201%201-2%200v-5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M12%202C6.477%202%202%206.477%202%2012s4.477%2010%2010%2010%2010-4.477%2010-10S17.523%202%2012%202zm0%204a1%201%200%201%201%200%202%201%201%200%200%201%200-2zm0%204a1%201%200%200%201%201%201v5a1%201%200%201%201-2%200v-5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E"); } .para-btn--icon-mail .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm0%204v.01L12%2013l8-4.99V8H4zm0%202.236V18h16v-7.764l-7.445%204.653a1%201%200%200%201-1.11%200L4%2010.236z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm0%204v.01L12%2013l8-4.99V8H4zm0%202.236V18h16v-7.764l-7.445%204.653a1%201%200%200%201-1.11%200L4%2010.236z'/%3E%3C/svg%3E"); } .para-btn--icon-phone .para-btn__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M19.23%2015.26l-2.54-.29a1.99%201.99%200%200%200-1.64.57l-1.84%201.84a15.045%2015.045%200%200%201-6.59-6.59l1.85-1.85a2%202%200%200%200%20.57-1.64l-.29-2.52A2%202%200%200%200%206.76%203H4.03c-1.13%200-2.07.94-2%202.07.53%208.54%207.36%2015.36%2015.89%2015.89%201.13.07%202.07-.87%202.07-2v-2.73a2%202%200%200%200-1.76-1.97z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='currentColor'%3E%3Cpath%20d='M19.23%2015.26l-2.54-.29a1.99%201.99%200%200%200-1.64.57l-1.84%201.84a15.045%2015.045%200%200%201-6.59-6.59l1.85-1.85a2%202%200%200%200%20.57-1.64l-.29-2.52A2%202%200%200%200%206.76%203H4.03c-1.13%200-2.07.94-2%202.07.53%208.54%207.36%2015.36%2015.89%2015.89%201.13.07%202.07-.87%202.07-2v-2.73a2%202%200%200%200-1.76-1.97z'/%3E%3C/svg%3E"); } /* ── App store badges (full-color, replace label entirely) ─── */ .para--button-group .para-btn--icon-app-store-ios, .para--button-group .para-btn--icon-app-store-android { padding: 0; border: 0; background: transparent; min-height: 0; box-shadow: none; } .para--button-group .para-btn--icon-app-store-ios::after, .para--button-group .para-btn--icon-app-store-android::after { display: none; } .para--button-group .para-btn--icon-app-store-ios:hover, .para--button-group .para-btn--icon-app-store-android:hover { background: transparent; filter: brightness(0.92); transform: none; box-shadow: none; } .para--button-group .para-btn--icon-app-store-ios .para-btn__label, .para--button-group .para-btn--icon-app-store-android .para-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .para--button-group .para-btn--icon-app-store-ios .para-btn__icon, .para--button-group .para-btn--icon-app-store-android .para-btn__icon { display: block; width: 135px; height: 40px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-mask-image: none; mask-image: none; } .para-btn--icon-app-store-ios .para-btn__icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20135%2040'%3E%3Crect%20width='135'%20height='40'%20rx='6'%20fill='%23000'/%3E%3Ctext%20x='67.5'%20y='17'%20fill='%23fff'%20font-family='Helvetica,Arial,sans-serif'%20font-size='9'%20text-anchor='middle'%3EDownload%20on%20the%3C/text%3E%3Ctext%20x='67.5'%20y='32'%20fill='%23fff'%20font-family='Helvetica,Arial,sans-serif'%20font-size='14'%20font-weight='600'%20text-anchor='middle'%3EApp%20Store%3C/text%3E%3C/svg%3E"); } .para-btn--icon-app-store-android .para-btn__icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20135%2040'%3E%3Crect%20width='135'%20height='40'%20rx='6'%20fill='%23000'/%3E%3Ctext%20x='67.5'%20y='17'%20fill='%23fff'%20font-family='Helvetica,Arial,sans-serif'%20font-size='9'%20text-anchor='middle'%3EGET%20IT%20ON%3C/text%3E%3Ctext%20x='67.5'%20y='32'%20fill='%23fff'%20font-family='Helvetica,Arial,sans-serif'%20font-size='14'%20font-weight='600'%20text-anchor='middle'%3EGoogle%20Play%3C/text%3E%3C/svg%3E"); } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .para--button-group .para-btn { transition: none; } .para--button-group .para-btn:hover { transform: none; } } /* ── Mobile: grid collapses to single column ────────────────── */ @media (max-width: 480px) { .para--btn-layout--grid .para-btn-group__list { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ MULTIMEDIA paragraphs (image / image_text bundles, expanded) ────────────────────────────────────────────────────────────── Wrapper class fragment: .para--media-type--{image|audio|video|qr-code} Per-type containers: .para-media__audio — wraps