/** * wyg-css-page * * WHAT: The site's STANDARD PAGE -- the treatment shared by the Letter from * Cardinal Pizzaballa and, when their text arrives, Terms of Use, the * Accessibility Statement, the Privacy Policy and the Cookie Policy. * * THE SHAPE: a crumb bar, a solid navy title band, one prose column at a real * measure. NO HERO PHOTOGRAPH, by design -- none of the five pages has one or * wants one, and a legal page with a hero would be an asset requirement * invented by the design. Supporting media goes INSIDE the prose flow (the * Cardinal's portrait), never above it. * * WHY A COMPONENT FILE AND NOT A THEME BUILDER SINGLE: a Single would put one * document in charge of five pages, and page-build-conventions.md 8a records * that translated Theme Builder documents are hand-maintained and revert on a * WPML job -- 11b-i measured that happening three times in one session. Each * page keeps its own markup, so WPML reads its strings natively with no * per-language patching; this file keeps the look, so a retune reaches all * five at once. The empty skeleton is the saved template WYG Standard Page. * * SPECIFICITY, the three that bite here: * - containers need `.e-con` plus a doubled class to clear `.e-con.e-flex` * at 0,2,0 * - headings need a doubled class to clear the per-post rule tying every * heading to the Primary global at 0,2,0 * - anything on the PROSE widget needs Elementor's own selector SHAPE to * clear the 0,4,0 framework rule in custom-frontend.min.css */ /* ========================================================================== 1. Crumb bar ========================================================================== */ /* Yoast supplies the trail. The separator is switched to the design's angle quote in wyg-page-breadcrumbs; Yoast's global setting stays as it is. */ .wyg-page-crumb { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); letter-spacing: 0.02em; color: var( --e-global-color-d89acb7d ); /* Wraps rather than truncates: on a legal page the current crumb IS the page title, and it has to stay legible at 390px. */ overflow-wrap: break-word; } .wyg-page-crumb.wyg-page-crumb a { color: var( --e-global-color-accent ); text-decoration: none; } .wyg-page-crumb.wyg-page-crumb a:hover, .wyg-page-crumb.wyg-page-crumb a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .wyg-page-crumb .breadcrumb_last { color: var( --e-global-color-d89acb7d ); } /* ========================================================================== 2. Title band ========================================================================== */ /* The eyebrow is TWO widgets, not one string with a dot typed into it: the separator is presentational, and WPML should receive two clean words to translate rather than one carrying punctuation. */ .wyg-page-eyebrow.wyg-page-eyebrow .elementor-heading-title { font-family: var( --wyg-mono ); font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.14em; margin: 0; } .wyg-page-eyebrow + .wyg-page-eyebrow .elementor-heading-title::before { content: "\00B7"; margin-inline-end: 0.6rem; opacity: 0.65; } /* The title binds WYG / Display wholesale, which already carries weight 900, line-height 1.1 and the tracking. Only the measure is left. */ .wyg-page-masthead__title.wyg-page-masthead__title .elementor-heading-title { max-inline-size: 20ch; margin: 0; } /* One slot, two jobs. On the Letter it carries the Cardinal's office; on a legal page it carries the LAST UPDATED line. Same widget, same position, different text -- which is the whole point of the pattern. */ .wyg-page-masthead__by.wyg-page-masthead__by .elementor-heading-title { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-a66c1ed1-font-size ); letter-spacing: 0.03em; margin: 0.75rem 0 0; } /* ========================================================================== 3. The column and its measure ========================================================================== */ /* `ch` resolves against the ELEMENT's own font (HO-41 9c), so this cap is on the column, which inherits the body face, and not on any widget inside it whose font differs. */ .e-con.wyg-page-column.wyg-page-column { max-inline-size: 66ch; margin-inline: auto; } /* ========================================================================== 4. Prose -- this section is what the four legal pages will live on ========================================================================== */ /* Elementor's framework ships `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` at 0,4,0 and loads after the snippets, so a doubled class loses here. Mirror the SHAPE rather than repeating a class four times. */ .elementor.elementor .e-con .elementor-widget.wyg-page-prose { font-size: var( --e-global-typography-a66c1ed1-font-size ); line-height: 1.75; color: var( --e-global-color-text ); overflow-wrap: break-word; } /* Paragraph rhythm is the widget's own Paragraph Spacing control (5-i), which emits at 0,3,1. Only the reset no control can express lives here, and it needs 0,4,1 to clear that. */ /* 🚨 DESCENDANT, NOT CHILD. The EDITOR wraps a text editor's content in `div.elementor-text-editor.elementor-inline-editing`; the front end, with Optimized Markup on, does not. A `>` selector against a text editor's own paragraphs therefore matches on the site and silently fails in the editor. Measured 2026-08-20 on this page: the salutation rendered bold blue live and plain in the editor, which is exactly the §5-i failure mode from the other direction. Never use `>` against text-editor content. */ .elementor.elementor .e-con .elementor-widget.wyg-page-prose p:last-child { margin-block-end: 0; } /* Headings inside the prose cannot bind a typography global -- a text editor's markup is content, not widgets -- so they read the same tokens the globals are built from. That keeps them responsive, because the kit redefines these variables inside its own tablet and mobile queries. */ .wyg-page-prose.wyg-page-prose h2 { font-size: var( --e-global-typography-922575d2-font-size ); font-weight: var( --e-global-typography-922575d2-font-weight ); line-height: var( --e-global-typography-922575d2-line-height ); letter-spacing: var( --e-global-typography-922575d2-letter-spacing ); color: var( --e-global-color-primary ); margin: 3rem 0 1.125rem; } .wyg-page-prose.wyg-page-prose h3 { font-size: var( --e-global-typography-95a228b0-font-size ); font-weight: 800; line-height: 1.3; color: var( --e-global-color-primary ); margin: 2.25rem 0 0.75rem; } .wyg-page-prose.wyg-page-prose :is( h2, h3 ):first-child { margin-block-start: 0; } /* In-page anchors. A terms document cross-references its own clauses, and site-wide smooth scrolling was turned off on 19 August, so the jump is instant -- it still has to land clear of the FIXED header. The variable is `--wyg-chrome-bottom`, defined once in wyg-css-global section 6, which is unconditional; the fallback is the launch desktop value in case it is ever scoped. */ /* 🚨 CORRECTED BY HO-49, 23 August 2026. This file used to define its own `--wyg-page-chrome`, deliberately NOT reusing `--wyg-chrome-bottom`, on two grounds that were both wrong: "that file does not load on a plain page" -- true when the token lived in `wyg-css-publication-single`. HO-46 moved it to `wyg-css-global`, which is unconditional, so it resolves on every page. Verified here. "170 under-measures the 202 measured today" -- the 202 was measured while signed in, and 32px of it was the WordPress admin bar. `--wyg-chrome-bottom` composes the admin bar in through `wyg-review-gate`'s own live custom properties, so it is correct for both an admin and a visitor; a hardcoded 202 is correct for neither. AND THE COMMENT THAT USED TO SIT HERE WAS WRONG ABOUT MOBILE. It said the header stops being fixed below 768px and only the review-gate bar remains, so this file shipped `--wyg-page-chrome: 46px` at 390px. Measured on the Letter, scrolled to 1200px, 23 August 2026: `.wyg-header` is `position: fixed` at every width, and its bottom edge sits at 1718px gate 40 + header 130 = 170px 900px gate 40 + header 110 = 150px 390px gate 46 + header 102 = 148px `--wyg-chrome-bottom` resolves to exactly those three numbers. An anchor jump on a legal page at 390px would have landed 102px under the header. Latent until now only because no `[id]` heading exists on the Letter yet; Terms of Use cross-references its own clauses and would have hit it. Nothing to edit at launch: the token's `:has( .wyg-review-gate )` selector stops matching when the development bar goes, and the base values (130 / 110 / 102) take over on their own. */ .wyg-page-prose.wyg-page-prose :is( h2, h3 )[id] { scroll-margin-block-start: calc( var( --wyg-chrome-bottom, 170px ) + 1.5rem ); } .wyg-page-prose.wyg-page-prose :is( ul, ol ) { margin: 0 0 1.75rem; padding-inline-start: 1.5rem; } .wyg-page-prose.wyg-page-prose li { margin-block-end: 0.5rem; } .wyg-page-prose.wyg-page-prose li:last-child { margin-block-end: 0; } .wyg-page-prose.wyg-page-prose :is( ul, ol ) :is( ul, ol ) { margin: 0.5rem 0 0; } .wyg-page-prose.wyg-page-prose ul { list-style: disc; } .wyg-page-prose.wyg-page-prose ul ul { list-style: circle; } .wyg-page-prose.wyg-page-prose ol { list-style: decimal; } .wyg-page-prose.wyg-page-prose ol ol { list-style: lower-alpha; } /* Legal text arrives with tables -- retention periods, cookie inventories. `overflow-wrap: anywhere` on the cells is what stops a long value pushing the table past the measure. */ .wyg-page-prose.wyg-page-prose table { inline-size: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: var( --e-global-typography-fd54d4a4-font-size ); } .wyg-page-prose.wyg-page-prose :is( th, td ) { text-align: start; vertical-align: top; padding: 0.6rem 0.8rem; border-block-end: 1px solid var( --e-global-color-3e660e4c ); overflow-wrap: anywhere; } .wyg-page-prose.wyg-page-prose th { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.08em; color: var( --e-global-color-d89acb7d ); border-block-end: 1px solid var( --e-global-color-5f8039f0 ); } /* A policy's own URLs are long and unbreakable, and a link color cannot be set on a text editor through the UI. */ .wyg-page-prose.wyg-page-prose a { color: var( --e-global-color-accent ); overflow-wrap: anywhere; text-underline-offset: 3px; } .wyg-page-prose.wyg-page-prose a:hover, .wyg-page-prose.wyg-page-prose a:focus-visible { color: var( --e-global-color-primary ); } /* ========================================================================== 5. The Letter's own furniture -- NOT part of the shared pattern ========================================================================== */ /* Everything below the next rule is specific to a letter and must not be copied onto a legal page. It is filed here rather than in a wyg-css-letter of its own because it is small, and because keeping it beside the pattern is what stops the next person mistaking it FOR the pattern. */ .wyg-page-epigraph.wyg-page-epigraph { border-inline-start: 4px solid var( --e-global-color-accent ); padding-inline-start: clamp( 1rem, 2vw, 1.4rem ); padding-block: 0.15rem; } .wyg-page-epigraph.wyg-page-epigraph .elementor-heading-title { font-size: var( --e-global-typography-95a228b0-font-size ); line-height: 1.45; font-style: italic; font-weight: 600; margin: 0; } /* The portrait sits INSIDE the letter, beside the opening paragraphs, at Gabi's request on 16 August after she asked for a banner -- this template has no banner to give her. A float has to share a containing block with the text it wraps, so the figure is inside the prose widget's own markup; no arrangement of sibling Elementor widgets can produce a wrap. */ .wyg-page-figure.wyg-page-figure { float: inline-end; inline-size: clamp( 160px, 26%, 260px ); margin-block: 0.3rem 1.75rem; margin-inline-start: 1.75rem; } .wyg-page-figure.wyg-page-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: 3px; } .wyg-page-figure.wyg-page-figure figcaption { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); color: var( --e-global-color-d89acb7d ); line-height: 1.45; margin-block-start: 0.55rem; } /* The salutation. Scoped to the letter modifier, because on a legal page the first paragraph is ordinary prose and must not come out bold and blue. */ .wyg-page-prose--letter.wyg-page-prose--letter p:first-of-type { font-weight: 700; color: var( --e-global-color-primary ); } .wyg-page-signoff__sig.wyg-page-signoff__sig .elementor-heading-title { font-size: var( --e-global-typography-95a228b0-font-size ); font-weight: 800; letter-spacing: -0.01em; margin: 0; } .wyg-page-signoff__role.wyg-page-signoff__role .elementor-heading-title { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } .wyg-page-signoff__lead.wyg-page-signoff__lead .elementor-heading-title { margin: 0; } /* ========================================================================== 6. Back button ========================================================================== */ /* Color, border, padding, size and radius are on the widget's own controls. The arrow is drawn rather than typed because it is decorative: a character in the label would be read out as part of the button's accessible name, and Elementor's icon control would put a real element there too. THE SITE'S BUTTON-ARROW PATTERN, matched exactly -- see wyg-css-homepage (.wyg-hero__cta, .wyg-essays__cta) and wyg-css-contact (.wyg-contact__form): a pseudo-element on `.elementor-button-content-wrapper`, 0.5rem from the label, 1.05em, line-height 1, and `align-self: center` -- the wrapper is a flex container, so the glyph is a flex item and vertical-align does nothing. wyg-css-homepage carries the measurement that established this. ::before and margin-inline-END here, mirrored, because the action is a RETURN. Every forward action on the site trails its arrow; this one leads. RTL swaps the glyph, since U+2190 points left in any writing direction. THREE wrong glyphs shipped here before this one, all from the same bad check: a sweep of ::before/::after on `.elementor-button` and `.elementor-button-text` -- neither of which is where the site puts them. Grep the cached stylesheets for `content:` before asserting what this site does or does not do. */ .wyg-page-back.wyg-page-back .elementor-button-content-wrapper::before { content: "\2190"; align-self: center; margin-inline-end: 0.5rem; font-size: 1.05em; line-height: 1; } [dir="rtl"] .wyg-page-back.wyg-page-back .elementor-button-content-wrapper::before { content: "\2192"; } /* ========================================================================== 7. Mobile ========================================================================== */ @media ( max-width: 1000px ) { /* At this width the column IS the measure. */ .e-con.wyg-page-column.wyg-page-column { max-inline-size: none; } .wyg-page-masthead__title.wyg-page-masthead__title .elementor-heading-title { max-inline-size: none; } } @media ( max-width: 767px ) { /* The desktop proportion carried into a third of the width reads as a hole between the crumb bar and the chips -- Userback #8241163 on the essay page, and the same band. */ .e-con.wyg-page-masthead__inner.wyg-page-masthead__inner { padding-block-start: 1.75rem; } /* No chrome override here any more. The old rule claimed the header stops being fixed below 768px; it does not -- measured `position: fixed`, 102px tall, at 390px on 23 August 2026. `--wyg-chrome-bottom` carries the correct 148px for this breakpoint on its own. */ } @media ( max-width: 640px ) { /* A 260px float inside a 350px column leaves a two-word ragged gutter. Centred above the text instead. */ .wyg-page-figure.wyg-page-figure { float: none; inline-size: min( 240px, 60% ); margin-inline: auto; margin-block-start: 0; } .wyg-page-figure.wyg-page-figure figcaption { text-align: center; } } /* ========================================================================== 8. Legal-page type scale -- pages 3 (Privacy), 121 (Terms), 320 (Cookie), 122 (Accessibility) ONLY. Approved by Todd, 31 August 2026 (HO-97): body 16px/28, H2 26px, H3 20px. H1, column width and masthead are UNCHANGED -- they already match across all four. Scoped to these four page IDs so the Letter from Cardinal Pizzaballa (page 123) and every other page keeps the 19px editorial scale section 4 defines. Selector shape mirrors section 4's own rules exactly, with the page-ID scope added in front -- needed to OUTRANK section 4's specificity rather than lose to it on the cascade. ========================================================================== */ body:is( .page-id-3, .page-id-121, .page-id-320, .page-id-122 ) .elementor.elementor .e-con .elementor-widget.wyg-page-prose { font-size: 1rem; line-height: 1.75rem; } body:is( .page-id-3, .page-id-121, .page-id-320, .page-id-122 ) .wyg-page-prose.wyg-page-prose h2 { font-size: 1.625rem; margin: 3rem 0 1.125rem; } body:is( .page-id-3, .page-id-121, .page-id-320, .page-id-122 ) .wyg-page-prose.wyg-page-prose h3 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; } /* The Cookie Policy's Complianz shortcode carries its OWN stylesheet inside the same prose column. Measured in the plugin's own document.css: an ID selector, #cmplz-document, at 14px, with h2 AND h3 both bundled at 22px. Lifted to the same scale here rather than left as the one page still off it. DO NOT edit Complianz's own files or settings -- a plugin update would revert that. Both the measured `#cmplz-document` ID and a `.cmplz-document` class are targeted defensively; whichever the shortcode actually emits on a given render, the body page-ID class scope adds enough specificity to outrank Complianz's own rule either way. Page 320 only -- these selectors do nothing on the other three legal pages, which never carry this markup. */ body.page-id-320 #cmplz-document, body.page-id-320 .cmplz-document { font-size: 1rem; line-height: 1.75rem; } body.page-id-320 #cmplz-document :is( p, li, td ), body.page-id-320 .cmplz-document :is( p, li, td ) { font-size: 1rem; } body.page-id-320 #cmplz-document h2, body.page-id-320 .cmplz-document h2 { font-size: 1.625rem; } body.page-id-320 #cmplz-document h3, body.page-id-320 .cmplz-document h3 { font-size: 1.25rem; }