/* * Global brand layer: design tokens, webfonts, header/footer, shared * landing primitives (buttons, eyebrows, headings). Loaded on every page * after style.css. Color + type tokens are the EXACT values pulled from the * Figma Dev Mode MCP (node 7:11). Display face is "nexa" (Nexa, Fontfabric — * the SSNY logo wordmark face) served via the client's Adobe Fonts kit, * enqueued in functions.php. Body face is self-hosted Inter * (assets/fonts/body.woff2). Nexa's companion "nexa-text" is also in the kit. */ :root { /* Brand colors from the SSNY logo master (SSNY_Logo_Color.svg). The red is DARK-ON-LIGHT ONLY (2.4:1 on navy) — on navy surfaces use --lp-red-tint for small accents/text, or white. White text on --lp-red passes AA (6.7:1). */ --lp-navy: #011f4e; --lp-navy-deep: #011432; --lp-cream: #f6f1e7; --lp-panel: #ffffff; --lp-offwhite: #fbf9f4; --lp-red: #b90e11; --lp-red-tint: #f1a8a5; /* on-navy accent (8.3:1 on --lp-navy) */ --lp-orange: var(--lp-red); /* legacy alias — .u-highlight et al. */ --lp-white: #ffffff; --lp-ink: #16181d; --lp-text: #5a6474; --lp-white-muted: #b9c0cf; /* color/on-navy */ --lp-border: #d9d2c3; /* color/hairline */ --lp-hairline-navy: #2a3a5e; --lp-font-display: "nexa", "Helvetica Neue", Arial, sans-serif; --lp-font-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", sans-serif; --lp-radius-card: 32px; --lp-radius-pill: 999px; --lp-section-pad: clamp(4rem, 9vw, 7.5rem); } @font-face { font-family: "Inter"; src: url("../assets/fonts/body.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Keep in-page anchor targets clear of the traveling sticky bar. */ #cost-of-living, #signup { scroll-margin-top: 4.75rem; } /* Brand-cream canvas so the floating signup card's inset bottom margin (which escapes below via margin-collapse) shows cream, not the default white. */ html { background-color: var(--lp-cream); } body { font-family: var(--lp-font-body); color: var(--lp-ink); } /* Announcement bar (site settings) renders inside the flow above #page. */ .announcement-bar { display: block; padding: 0.6em 1em; background: var(--lp-red); color: var(--lp-white); font-size: 0.875rem; font-weight: 600; text-align: center; text-decoration: none; } /* The landing masthead positions against #page, so it always sits below the announcement bar when one is enabled. */ #page { position: relative; } /* -------------------------------------------------------------------------- * Containers * ------------------------------------------------------------------------ */ .lp-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .lp-container--narrow { max-width: 780px; margin-inline: auto; } /* -------------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------------ */ .lp-button { display: inline-flex; align-items: center; gap: 0.75em; padding: 0.75em 1.1em; border: 0; border-radius: var(--lp-radius-pill); font-family: var(--lp-font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .lp-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(1, 31, 78, 0.18); } .lp-button:active { transform: translateY(0); box-shadow: none; } .lp-button:focus-visible { outline: 3px solid var(--lp-red); outline-offset: 2px; } /* The red ring vanishes on navy surfaces (2.4:1) and on the red signup pitch (1:1) — lift it to the tint / white there so keyboard focus stays visible. */ .site-header .lp-button:focus-visible, .lp-hero .lp-button:focus-visible, .lp-sticky-bar .lp-button:focus-visible { outline-color: var(--lp-red-tint); } .lp-signup__pitch .lp-button:focus-visible { outline-color: var(--lp-white); } /* Keyboard-only focus rings. Some browsers (notably iOS Safari) match :focus-visible on elements focused *programmatically* right after a tap — e.g. the video modal moving focus to its close button on open, then restoring it to the trigger on close — painting an outline the user never keyboard-navigated to. navigation.js adds `using-keyboard` to only while the keyboard is the live input modality (Tab / arrow keys) and drops it on any pointer input, so we hide focus outlines whenever it's absent. Genuine keyboard users keep every ring; touch and mouse users get none. */ html:not(.using-keyboard) :focus-visible { outline: none !important; } /* Pin chrome-link colours across every state. The base a:link/visited/hover rules (specificity 0,1,1) would otherwise beat these single-class colours, turning visited buttons purple and hovered links dark. */ .lp-button--red:link, .lp-button--red:visited, .lp-button--red:hover, .lp-button--red:focus, .lp-button--red:active, .lp-button--navy:link, .lp-button--navy:visited, .lp-button--navy:hover, .lp-button--navy:focus, .lp-button--navy:active, .lp-button--outline:link, .lp-button--outline:visited, .lp-button--outline:hover, .lp-button--outline:focus, .lp-button--outline:active { color: var(--lp-white); } /* Same pinning, red — "Read the Poll" is a white pill, so the inherited a:hover red would be invisible on it and a:visited navy would go off-palette. */ .lp-hero__poll:link, .lp-hero__poll:visited, .lp-hero__poll:hover, .lp-hero__poll:focus, .lp-hero__poll:active { color: var(--lp-red); } .lp-button__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; border-radius: 50%; flex: none; } .lp-button--red { background: var(--lp-red); color: var(--lp-white); } .lp-button--red .lp-button__icon { background: var(--lp-white); color: var(--lp-red); } .lp-button--navy { background: var(--lp-navy); color: var(--lp-white); } .lp-button--navy .lp-button__icon { background: var(--lp-red); color: var(--lp-white); } .lp-button--outline { background: transparent; color: var(--lp-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); } .lp-button--outline:hover { box-shadow: inset 0 0 0 1.5px var(--lp-white); } .lp-button--outline .lp-button__icon { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); color: var(--lp-white); } .lp-button--sm { font-size: 0.8125rem; } /* -------------------------------------------------------------------------- * Typography primitives * ------------------------------------------------------------------------ */ .lp-heading { margin: 0 0 0.5em; font-family: var(--lp-font-display); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; overflow-wrap: break-word; color: var(--lp-ink); } /* "New York Families Are Being Squeezed" — Nexa Black 92/100, -1.84px */ .lp-heading--xl { font-size: clamp(2.75rem, 6.4vw, 5.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; } /* Path Forward / Albany / By-the-Numbers — 56/60, -1.12px. Weight matches the --xl "Squeezed" heading (Nexa Black 900) per design direction. */ .lp-heading--lg { font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1.07; } /* Join the Movement / By-the-Numbers — Nexa Bold 40/46, -0.6px */ .lp-heading--md { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; } .lp-heading--light { color: var(--lp-white); } .u-highlight { color: var(--lp-orange); } .lp-eyebrow { display: flex; align-items: center; justify-content: inherit; gap: 0.6em; margin: 0 0 1.25em; font-size: 0.875rem; /* 14px */ font-weight: 600; letter-spacing: 0.12em; /* 1.68px on 14px */ text-transform: uppercase; color: var(--lp-red); } .lp-eyebrow__icon { display: inline-flex; color: inherit; /* red on cream, white in --light contexts */ } /* The icon is the SSNY logo mark (no intrinsic size) — size it to the label. */ .lp-eyebrow__icon svg { display: block; height: 1.35em; width: auto; } .lp-eyebrow--light { color: var(--lp-white); } .lp-pill-label { display: inline-block; margin: 0 0 1.5em; padding: 0.5em 1.4em; border: 1px solid currentcolor; border-radius: var(--lp-radius-pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-ink); } /* -------------------------------------------------------------------------- * Logo lockup (fallback when no logo image is set) * ------------------------------------------------------------------------ */ .lp-logo, .lp-logo:link, .lp-logo:visited, .lp-logo:hover, .lp-logo:focus, .lp-logo:active { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--lp-white); font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .lp-logo { transition: opacity 0.15s ease; } .lp-logo:hover, .lp-logo:focus-visible { opacity: 0.8; } .lp-logo__mark { display: inline-flex; color: var(--lp-white); /* one-colour reverse of the SSNY mark */ } /* The inlined SSNY mark SVG has only a viewBox — size it here. */ .lp-logo__mark svg { display: block; height: 1.9em; width: auto; } /* Wordmark connector shown as a flanked "AND" — short rules above and below it, echoing the logo's stacked AND band — plus the lighter, tracked "New York". Emitted by theme_ssny_wordmark(); shared by every wordmark lockup site-wide (sticky bar, hero, masthead, footer, signup). Sized in em; tune here. */ .ssny-amp { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Match the logo's stacked "AND": a smaller connector centred on the main cap height, with its rules on the cap-top and baseline of the surrounding letters — never poking above/below them. The box is exactly the parent cap height (1em in this 0.62em context ≈ 1.16em); the rules sit on its edges. font-size is 0.62em, so all values below are in that context. */ height: 1.16em; vertical-align: 0.25em; /* raise so the rules land on cap-top + baseline */ margin-inline: -0.06em; font-size: 0.62em; font-weight: 400; line-height: 1; } .ssny-amp::before, .ssny-amp::after { content: ""; position: absolute; left: 0; width: 100%; height: 0.14em; background: currentColor; } .ssny-amp::before { top: 0; } .ssny-amp::after { bottom: 0; } .ssny-ny { font-weight: 400; /* Match the logo's airy "NEW YORK" subtitle: wide tracking + a clear gap off "SAFE" (the text lockup was too tight vs. the docked SVG lockup). */ margin-left: 0.35em; letter-spacing: 0.3em; white-space: nowrap; /* never split "New York" across lines */ } /* -------------------------------------------------------------------------- * Header — landing variant * ------------------------------------------------------------------------ */ .site-header--landing { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; padding-block: 1.25rem; } /* At the top of the hero the big hero logo is the branding, so hide the masthead there; it reveals once the hero is scrolled past. JS adds .site-header--reveal (so no-JS keeps it visible) and toggles .is-hidden. */ /* Showing: visibility flips to visible instantly (0s) so the opacity fade-in is seen. */ .site-header--landing.site-header--reveal { transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s; } /* visibility: hidden (not just opacity:0) so the masthead is truly gone over the hero — opacity alone can leave a faint lockup "popping through" on mobile if the fade is interrupted. NO transition on this rule, so the initial hide (applied before .site-header--reveal) is instant, with no load flash. */ .site-header--landing.is-hidden { opacity: 0; visibility: hidden; transform: translateY(-0.6rem); pointer-events: none; } /* Hiding on scroll: instant. The masthead is absolutely positioned at top:0, so a fade-out would still be mid-fade as you scroll it back into view near the top — a brief flash. Kill it outright the moment it crosses the threshold so it's already gone before it re-enters the viewport. */ .site-header--landing.site-header--reveal.is-hidden { transition: none; } .site-header--landing .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header--landing .custom-logo-link img, .site-header--landing .custom-logo { max-height: 44px; width: auto; } /* Header CTA: full "Join the Movement" normally; just "Join" on phones so the wordmark isn't squeezed onto two lines. */ .lp-header__cta-short { display: none; } @media (max-width: 600px) { .site-header .lp-header__cta-full { display: none; } .site-header .lp-header__cta-short { display: inline; } .site-header .site-header__inner { gap: 0.6rem; } } /* Smallest phones: nudge the wordmark down a hair so it holds one line. */ @media (max-width: 400px) { .site-header .lp-logo { font-size: 1rem; } } /* -------------------------------------------------------------------------- * Header — interior pages (restyled underscores masthead) * ------------------------------------------------------------------------ */ .site-header:not(.site-header--landing) { position: sticky; top: 0; z-index: 100; background: var(--lp-navy); padding-block: 0.85rem; box-shadow: 0 2px 12px rgba(1, 20, 47, 0.18); } /* Privacy page on phones: keep the sticky nav minimal — just the logo mark. Desktop keeps the full wordmark. */ @media (max-width: 600px) { .page-template-template-privacy .site-header .lp-logo__text { display: none; } } .site-header:not(.site-header--landing) .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header:not(.site-header--landing) .custom-logo-link img, .site-header:not(.site-header--landing) .custom-logo { max-height: 40px; width: auto; } .donate-button { display: inline-flex; align-items: center; padding: 0.7em 1.5em; border-radius: var(--lp-radius-pill); background: var(--lp-red); color: var(--lp-white); font-size: 0.875rem; font-weight: 700; text-decoration: none; } /* -------------------------------------------------------------------------- * Footer * ------------------------------------------------------------------------ */ /* Cream page canvas on every page so inset cards (hero, footer) float on cream. */ #page { background: var(--lp-cream); } /* Interior footer: an inset, rounded navy card floating on cream — matching the home page's footer block (which lives inside the navy signup card). */ .site-footer { /* Same cap as the signup block: inset on smaller screens, but stop widening past 1400px on large displays (centered, cream showing on either side). */ width: min(100% - clamp(2rem, 8vw, 8rem), 87.5rem); margin: 0 auto clamp(1rem, 4vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-radius: var(--lp-radius-card); background: var(--lp-navy-deep); color: var(--lp-white-muted); font-size: 0.8125rem; } .site-footer a, .lp-block-footer a { color: inherit; } .site-footer__top, .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .site-footer .footer-logo img { max-height: 40px; width: auto; } /* Legal fine print. Styled as sentence-case fine print rather than the tracked-out caps used elsewhere in the footer: the full FEC-style disclaimer runs ~150 characters, and uppercase + wide letter-spacing made it span the footer and out-shout the copyright line. Capped at ~46ch so it stacks beside the logo. */ .site-footer .paid-for-disclaimer, .lp-block-footer .paid-for-disclaimer { display: block; /* Sized by max-width + auto margin rather than flex-basis: `.site-footer__top` flips to a column under 600px, where a basis would resolve against HEIGHT and stretch this into a tall empty block. */ max-width: 46ch; margin: 0 0 0 auto; /* clears style.css's `margin: 1em auto`, which centred it in the flex row */ border: 0; padding: 0; font-size: 0.6875rem; font-weight: 500; line-height: 1.55; letter-spacing: 0.01em; text-transform: none; text-align: right; text-wrap: pretty; color: var(--lp-red-tint); } .site-footer__divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-block: 1.5rem; } .site-footer .site-info, .lp-block-footer .site-info { font-size: 0.8125rem; } .site-footer__social { display: flex; align-items: center; gap: 1.25rem; } .footer-social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; } .footer-social-links a { color: var(--lp-white-muted); font-size: 0.8125rem; text-decoration: none; transition: color 0.15s ease; } .footer-social-links a:hover, .footer-social-links a:focus-visible { color: var(--lp-red-tint); } /* Footer logo: horizontal lockup on desktop, the full stacked lockup on phones. */ .lp-logo__stacked { display: none; } .lp-logo__stacked svg { display: block; width: clamp(118px, 40vw, 160px); height: auto; } /* Phones: full stacked footer logo + everything centred. */ @media (max-width: 600px) { .lp-logo--footer { display: block; } .lp-logo--footer .lp-logo__mark, .lp-logo--footer .lp-logo__text { display: none; } .lp-logo--footer .lp-logo__stacked { display: block; } .site-footer__top, .site-footer__bottom { flex-direction: column; justify-content: center; text-align: center; } .site-footer .paid-for-disclaimer, .lp-block-footer .paid-for-disclaimer { margin-inline: auto; /* column layout: centre instead of pushing right */ text-align: center; } .site-footer__social, .footer-social-links { justify-content: center; } /* Copyright and the legal links drop below the social row as one group, under a divider matching .site-footer__divider above. */ .site-footer .site-info, .lp-block-footer .site-info { order: 1; /* after the social row, which defaults to 0 */ align-self: stretch; /* full-bleed divider — the parent centres its items */ margin-top: 0.5rem; /* + the parent's 1rem gap = the divider's breathing room */ border-top: 1px solid rgba(255, 255, 255, 0.15); /* same hairline as .site-footer__divider */ padding-top: 1.5rem; } /* Legal links share one line under the copyright, wrapping only if they must. */ .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; margin-top: 0.5rem; } /* The flex row owns the spacing now — drop the inline desktop margins. */ .site-footer__privacy, .site-footer__memo { margin: 0; } } .back-to-top, .back-to-top:link, .back-to-top:visited { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); color: var(--lp-white); transition: box-shadow 0.15s ease, color 0.15s ease; } .back-to-top:hover, .back-to-top:focus-visible { box-shadow: inset 0 0 0 1.5px var(--lp-red-tint); color: var(--lp-red-tint); } /* -------------------------------------------------------------------------- * Legal / Privacy page (page template: Privacy Policy) * Navy hero card (the site's signature radius-card block, floating on cream * with a faint NY-flag watermark) over a single ink-on-cream reading column. * Sections are numbered "dossier" style with a red marker for scannability. * Body copy is near-black on cream (~15.7:1); red lives only in the accents. * ------------------------------------------------------------------------ */ .lp-legal { background: var(--lp-cream); padding-block: clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); color: var(--lp-ink); counter-reset: lp-legal-section; } /* Shared reading column: keeps the hero title and body copy on one ~68ch axis. Reuses .lp-container's responsive gutters, just tightening the measure. */ .lp-legal__wrap { max-width: 42rem; } /* ----- Navy hero card (inset + rounded — the site's floating-card gesture) -- */ .lp-legal__hero { position: relative; padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--lp-radius-card); background: radial-gradient(125% 140% at 88% -10%, rgba(185, 14, 17, 0.28) 0%, rgba(185, 14, 17, 0) 46%), linear-gradient(158deg, var(--lp-navy) 0%, var(--lp-navy-deep) 100%); color: var(--lp-white); overflow: hidden; isolation: isolate; } .lp-legal__hero-inner { position: relative; z-index: 1; max-width: 46rem; } /* Oversized NY-flag watermark bled off the lower-right corner and clipped by the card. Faint red tint so it never competes with the white title. Reuses the inline theme_lp_flag_icon() SVG (currentColor), so it needs no image asset. */ .lp-legal__hero-mark { position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem); z-index: 0; color: rgba(241, 168, 165, 0.14); pointer-events: none; } .lp-legal__hero-mark svg { display: block; width: clamp(8rem, 16vw, 13rem); height: auto; } /* Base .lp-eyebrow is red — too dark on navy, so lift it to the tint here — and justify-content:inherit, so pin it left too. */ .lp-legal__eyebrow { justify-content: flex-start; margin-bottom: 1.1em; color: var(--lp-red-tint); } .lp-legal__title { margin: 0; font-family: var(--lp-font-display); font-weight: 900; font-size: clamp(2.75rem, 6.4vw, 4.5rem); line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; color: var(--lp-white); } /* Effective date as a red pill badge (matches the site's pill/button family). */ .lp-legal__meta { display: inline-flex; align-items: center; gap: 0.55em; margin: 1.5rem 0 0; padding: 0.5em 1.1em; border-radius: var(--lp-radius-pill); background: rgba(185, 14, 17, 0.3); color: var(--lp-red-tint); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .lp-legal__meta::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--lp-red-tint); } /* ----- Cream reading body ----- */ .lp-legal__body { /* Horizontal padding mirrors the hero card so the copy lines up with the title's left edge; the whole page shares .lp-container's outer width. */ padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3.5rem) 0; } /* Intro reads as a lead paragraph — larger, full-strength ink. */ .lp-legal__intro { max-width: 44rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); } .lp-legal__intro p { margin: 0 0 1em; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.7; color: var(--lp-ink); } .lp-legal__intro > :last-child { margin-bottom: 0; } /* Section rhythm: a soft cream hairline + generous space between sections. */ .lp-legal__section { max-width: 44rem; margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: clamp(2.25rem, 5vw, 3.25rem); border-top: 1px solid var(--lp-border); } /* When there's no intro above it, the first section sits flush (no divider). */ .lp-legal__body > .lp-legal__section:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .lp-legal__section-head { margin-bottom: clamp(0.85rem, 2vw, 1.15rem); } /* Auto-numbered red "dossier" marker (01, 02, 03 …) + short red rule. Driven entirely by a CSS counter, so sections stay fully field-editable — add, remove or reorder them in ACF and the numbers re-sequence automatically. The marker is aria-hidden; the heading below carries the meaning. */ .lp-legal__section-num { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; font-family: var(--lp-font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--lp-red); counter-increment: lp-legal-section; } .lp-legal__section-num::before { content: counter(lp-legal-section, decimal-leading-zero); } .lp-legal__section-num::after { content: ""; width: 2.5rem; height: 2px; border-radius: var(--lp-radius-pill); background: var(--lp-red); } .lp-legal__section-title { margin: 0; font-family: var(--lp-font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--lp-navy); } /* ----- Body copy — near-black ink on warm cream for print-clean legibility -- */ .lp-legal__section-body p { margin: 0 0 1em; font-size: 1.0625rem; line-height: 1.75; color: var(--lp-ink); } .lp-legal__section-body > :last-child { margin-bottom: 0; } .lp-legal__body ul, .lp-legal__body ol { margin: 0 0 1em; padding-left: 1.35em; } .lp-legal__body li { margin-bottom: 0.4em; font-size: 1.0625rem; line-height: 1.75; color: var(--lp-ink); } .lp-legal__body li:last-child { margin-bottom: 0; } .lp-legal__body li::marker { color: var(--lp-red); } /* Author-added rich text inside a section body (the field is a WYSIWYG). */ .lp-legal__body strong, .lp-legal__body b { font-weight: 700; color: var(--lp-navy); } .lp-legal__body :is(h3, h4) { margin: 1.5em 0 0.4em; font-family: var(--lp-font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.005em; text-transform: uppercase; color: var(--lp-navy); } .lp-legal__body blockquote { margin: 1.25em 0; padding: 0.25em 0 0.25em 1.25em; border-left: 3px solid var(--lp-red); color: var(--lp-ink); font-style: italic; } /* ----- Links — navy underlined, red on hover (matches the site) ----- */ .lp-legal a { color: var(--lp-navy); text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.08em; text-decoration-color: rgba(1, 31, 78, 0.35); transition: color 0.15s ease, text-decoration-color 0.15s ease; } .lp-legal a:hover, .lp-legal a:focus-visible { color: var(--lp-red); text-decoration-color: var(--lp-red); } /* Any links printed inside the navy hero stay light. */ .lp-legal__hero a { color: var(--lp-white); text-decoration-color: rgba(255, 255, 255, 0.5); } .lp-legal__hero a:hover, .lp-legal__hero a:focus-visible { color: var(--lp-red-tint); text-decoration-color: var(--lp-red-tint); } @media (prefers-reduced-motion: reduce) { .lp-legal a { transition: none; } } /* Footer privacy link (unchanged — retained so this block is a drop-in). */ .site-footer__privacy { margin-left: 1rem; text-decoration: underline; text-underline-offset: 0.12em; } /* "Memo" link — deliberately matches the privacy link rather than reading as a button: press should find it if they scan the footer, but it shouldn't pull the eye of an ordinary visitor. Keep it fine print. */ .site-footer__memo, .site-footer__memo:link, .site-footer__memo:visited { margin-left: 1rem; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; text-decoration: underline; text-underline-offset: 0.12em; } .site-footer__memo:hover, .site-footer__memo:focus-visible { color: var(--lp-red-tint); }