/* =============================================================================
* Penlink shared design tokens
* -----------------------------------------------------------------------------
* Served from: /wp-content/uploads/penlink-pages/_shared/tokens.css
* Loaded by: WPCode snippet "Penlink per-page assets", on every page that
* has a folder under uploads/penlink-pages/. Declared as a
* dependency of each page.css, so it always loads first.
*
* This is the one file every custom page inherits. Edit a colour here and
* every page follows. Do not copy its contents into a page.css.
*
* REQUIRES A WRAPPER CLASS. Everything that could touch the theme is scoped
* under .penlink-page, which must be on the outermost element of the page's markup:
*
* ...
*
* Without that class the fonts and colours will not apply. This is deliberate:
* Tailwind is loaded site-wide and the site header and footer are on the page,
* so an unscoped `a { color: ... }` here would recolour the site nav.
*
* BEFORE CHANGING THE BRAND COLOURS, read the open decision in the playbook.
* The PL24 Brand Book (2024-10-29) and a later design handoff disagree about
* Electric Blue (#0071F6 vs #3472F4) and Midnight Navy (#092648 vs #0A1838),
* and about whether AT Aero tops out at 600 or 700. The values below follow
* the Brand Book, which is what the CoAnalyst360 build used. That is a
* default, not a ruling.
*
* A NOTE ON HOW MUCH OF THIS IS ACTUALLY IN USE. The CoAnalyst360 page
* consumes 8 of the 106 custom properties defined below and none of the
* semantic type classes -- every heading and colour in that page is a literal
* in an inline style attribute. So the type scale below is unproven: nobody
* has seen .pl-display-1 render. For pages built from here on, prefer
* var(--token) and the .pl-* classes over literals. That is the difference
* between changing the brand blue in one place and changing it in 130 KB of
* markup.
* ============================================================================= */
/* ---- Webfonts ------------------------------------------------------------
* url()s are RELATIVE TO THIS FILE. The fonts must stay in a fonts/ folder
* sitting next to tokens.css. Moving this file means moving fonts/ too.
*
* AT AERO WEIGHT LADDER. Taken from Arillatype.Studio's own At Aero font
* guide (v1.2), not guessed. The family has ten weights and the names are not
* self-explanatory -- Retina sits between Light and Regular at 350, and Super
* is heavier than Black:
*
* Air 100 | Thin 200 | Light 300 | Retina 350 | Regular 400
* Medium 500 | Semibold 600 | Bold 700 | Black 800 | Super 900
*
* All twenty faces are declared. That costs nothing: a browser only fetches
* the faces a page actually uses, so declaring the full family means future
* pages can reach for any weight without touching this file. The CoAnalyst360
* page uses three of them.
*
* SETTLES ONE OPEN QUESTION, RAISES ANOTHER. The environment brief noted a
* conflict -- one document caps AT Aero at Semibold 600 while the brand book's
* own CSS defines and uses 700. The typeface itself goes to 900, so the cap is
* a brand-guidelines decision, not a technical limit. Which one applies is
* still a question for whoever owns the brand book.
*
* WORTH ASKING: At Aero ships as a single variable font with a weight axis
* (Air to Super) and an italic axis, included with the full family licence. If
* Penlink's licence covers it, twenty static files and 2.2 MB become one file
* of roughly a couple hundred KB, and every weight in between becomes
* available. Check the licence and the original font delivery.
* ------------------------------------------------------------------------- */
/* AT Aero -- upright */
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Air.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Thin.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Retina.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Black.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-Super.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* AT Aero -- italic */
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-AirItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-ThinItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-RetinaItalic.woff2") format("woff2"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-BlackItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "AT Aero"; src: url("fonts/AtAero-SuperItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
/* DM Sans -- variable, one file covers 100-900 */
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Variable.woff2") format("woff2-variations"), url("fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Italic-Variable.woff2") format("woff2-variations"), url("fonts/DMSans-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* DM Mono -- bundled locally, no Google Fonts request. Split by unicode-range
so the extended-Latin file is only fetched when a page needs it. */
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* =====================================================================
* Penlink PL24 -- Colors & Type
* Source: PL24 Brand Book (2024-10-29)
* =====================================================================
*/
:root {
/* ============ COLOR PALETTE ============ */
/* Primary, brand-defined hexes (PL24 Brand Book p.16) */
--pl-midnight-navy: #092648; /* PMS 655c -- 30% -- primary, deep backgrounds, body text */
--pl-golden-citrus: #FFC93E; /* PMS 1225c -- 20% -- warm accent */
--pl-sky-pulse: #00DCC3; /* PMS 3265c -- 17% -- bright cyan accent */
--pl-deep-fuschia: #FF2A5D; /* PMS 1785c -- 17% -- urgent/critical accent */
--pl-electric-blue: #0071F6; /* PMS 285c -- 5% -- interactive primary, links, occasional flood */
--pl-cool-frost: #E8EBF0; /* PMS 663c -- 5% -- surface tints, dividers */
--pl-bright-lime: #D8F436; /* PMS 387c -- 3% -- high-vibrance accent (paired w/ sky pulse) */
--pl-soft-silver: #6A7592; /* PMS 7558c -- 3% -- secondary text, muted UI */
/* Tints / shades (derived for screen use) */
--pl-navy-900: #051730;
--pl-navy-800: #092648;
--pl-navy-700: #15355d;
--pl-navy-600: #1b335f; /* gradient stop */
--pl-navy-500: #1252a3; /* gradient stop */
--pl-navy-400: #3163ae; /* gradient stop */
--pl-blue-400: #1398d3; /* gradient stop */
--pl-teal-400: #50c0b4; /* gradient stop */
--pl-green-400: #78c788; /* gradient stop */
--pl-green-300: #7cc885; /* gradient stop */
/* Neutrals */
--pl-white: #ffffff;
--pl-paper: #F6F8FB; /* near-white background */
--pl-frost-50: #F2F4F8;
--pl-frost-100: #E8EBF0; /* = cool-frost */
--pl-frost-200: #D2D8E1;
--pl-silver-500: #6A7592; /* = soft-silver */
--pl-silver-700: #3B475F;
/* ============ GRADIENTS ============ */
/* Primary brand gradient -- dark navy -> electric blue -> teal -> green */
--pl-gradient-primary: linear-gradient(
105deg,
#1b335f 5%,
#1252a3 20%,
#3163ae 37%,
#1398d3 53%,
#50c0b4 80%,
#78c788 97%,
#7cc885 100%
); /* @kind color */
/* Reversed (for accents on light backgrounds, lime->sky) */
--pl-gradient-reverse: linear-gradient(
285deg,
#1b335f 5%,
#1252a3 20%,
#3163ae 37%,
#1398d3 53%,
#50c0b4 80%,
#78c788 97%
); /* @kind color */
/* Alternate -- Electric Blue -> Sky Pulse -> Lime (techy emphasis sweep) */
--pl-gradient-alt: linear-gradient(
105deg,
#0071F6 0%,
#00DCC3 55%,
#D8F436 100%
); /* @kind color */
/* Sky-Lime accent gradient (techie pop) */
--pl-gradient-skylime: linear-gradient(
105deg,
#00DCC3 0%,
#6BE34F 50%,
#D8F436 100%
); /* @kind color */
/* Subtle navy field for hero panels */
--pl-bg-navy-deep: radial-gradient(
140% 100% at 0% 0%,
#15355d 0%,
#092648 55%,
#051730 100%
); /* @kind color */
/* ============ SEMANTIC ROLES ============ */
/* Surfaces */
--bg: var(--pl-paper);
--bg-surface: var(--pl-white);
--bg-inverse: var(--pl-midnight-navy);
--bg-subtle: var(--pl-frost-50);
--bg-divider: var(--pl-frost-100);
/* Foregrounds */
--fg-1: var(--pl-midnight-navy); /* primary text */
--fg-2: var(--pl-silver-700); /* secondary text */
--fg-3: var(--pl-soft-silver); /* tertiary / metadata */
--fg-on-inverse: var(--pl-white);
--fg-on-inverse-2: rgba(255, 255, 255, 0.72);
/* Accents (interactive) */
--accent: var(--pl-electric-blue);
--accent-hover: #005ed1;
--accent-pressed: #004fab;
--accent-fg: var(--pl-white);
--accent-cyan: var(--pl-sky-pulse);
--accent-lime: var(--pl-bright-lime);
--accent-warning: var(--pl-golden-citrus);
--accent-danger: var(--pl-deep-fuschia);
/* Borders */
--border-1: var(--pl-frost-100);
--border-2: var(--pl-frost-200);
--border-strong: var(--pl-midnight-navy);
/* Focus ring */
--focus-ring: 0 0 0 3px rgba(0, 113, 246, 0.35);
/* ============ TYPOGRAPHY ============ */
/* Font stacks */
--font-display: "AT Aero", "Aptos", "DM Sans", system-ui, sans-serif;
--font-text: "DM Sans", "Aptos", system-ui, sans-serif;
--font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-hebrew: "SimplerPro", "Arial Hebrew", sans-serif;
/* Weights */
--fw-thin: 200; /* @kind font */
--fw-light: 300; /* @kind font */
--fw-regular: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
--fw-black: 800; /* @kind font */
--fw-super: 900; /* @kind font */
/* Type scale (px, line-height pairs) -- display uses tight tracking */
--type-display-1: 96px;
--type-display-2: 72px;
--type-h1: 56px;
--type-h2: 40px;
--type-h3: 28px;
--type-h4: 22px;
--type-h5: 18px;
--type-body: 16px;
--type-small: 14px;
--type-micro: 12px;
/* Tracking */
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.12em;
/* ============ SPACING (4px base) ============ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 80px;
--space-11: 120px;
/* ============ RADII ============ */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-pill: 999px;
/* ============ ELEVATION ============ */
--shadow-1: 0 1px 2px rgba(9, 38, 72, 0.06), 0 1px 1px rgba(9, 38, 72, 0.04);
--shadow-2: 0 4px 12px rgba(9, 38, 72, 0.08), 0 2px 4px rgba(9, 38, 72, 0.04);
--shadow-3: 0 12px 32px rgba(9, 38, 72, 0.10), 0 4px 8px rgba(9, 38, 72, 0.05);
--shadow-4: 0 24px 48px rgba(9, 38, 72, 0.16), 0 8px 16px rgba(9, 38, 72, 0.08);
--shadow-glow-blue: 0 0 0 1px #0071F6, 0 0 24px rgba(0, 113, 246, 0.35);
/* ============ DURATION / EASING ============ */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 400ms; /* @kind other */
}
/* ============ SEMANTIC TYPE CLASSES ============ */
.pl-display-1 { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: var(--type-display-1); line-height: 0.95; letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.pl-display-2 { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: var(--type-display-2); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.pl-h1 { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: var(--type-h1); line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.pl-h1-thin { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: var(--type-h1); line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-1); }
.pl-h2 { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: var(--type-h2); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1); }
.pl-h2-bold { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h2); line-height: 1.1; letter-spacing: -0.015em; color: var(--fg-1); }
.pl-h3 { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: var(--type-h3); line-height: 1.25; color: var(--fg-1); }
.pl-h4 { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--type-h4); line-height: 1.35; color: var(--fg-1); }
.pl-h5 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--type-h5); line-height: 1.4; color: var(--fg-1); }
.pl-eyebrow { font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--type-micro); line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.pl-body { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--type-body); line-height: 1.55; color: var(--fg-1); }
.pl-body-lg { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: 18px; line-height: 1.55; color: var(--fg-1); }
.pl-small { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--type-small); line-height: 1.5; color: var(--fg-2); }
.pl-micro { font-family: var(--font-text); font-weight: var(--fw-medium); font-size: var(--type-micro); line-height: 1.4; color: var(--fg-2); }
.pl-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--type-small); line-height: 1.5; color: var(--fg-1); }
.pl-tagline { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: 0.01em; color: var(--fg-2); }
.pl-text-gradient { background: var(--pl-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-reset { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-text); font-size: var(--type-body); line-height: 1.5; color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* ---- Page wrapper ---------------------------------------------------------
Replaces what used to be bare `html`, `body` and `a` rules. Those applied to
the whole document, which on any page carrying the site header and footer
means restyling the theme's chrome (environment brief, 5.7). :has() keeps
the two rules that genuinely need to reach `html` and `body` from applying
anywhere else.
------------------------------------------------------------------------- */
html:has(.penlink-page) { scroll-behavior: smooth; }
html:has(.penlink-page) body { margin: 0; }
.penlink-page {
font-family: var(--font-text);
color: var(--fg-1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.penlink-page a { color: var(--accent); text-decoration: none; }
.penlink-page a:hover { color: #005ED1; text-decoration: underline; }
/* Keep it at 1. Anything higher paints over the site nav and makes it
unclickable (environment brief, 5.5). */
.penlink-page { position: relative; z-index: 1; }
/* ---- Defensive reset for semantic elements --------------------------------
The theme styles header, footer, aside, section, nav and figure globally for
its own chrome, and one of them in page markup gets pulled out of flow
(environment brief, 5.2 -- that single mistake once produced four
simultaneous layout symptoms). Prefer . This is the seatbelt for the
ones already in the markup: the CoAnalyst360 page has nine s.
------------------------------------------------------------------------- */
.penlink-page header,
.penlink-page footer,
.penlink-page aside,
.penlink-page section,
.penlink-page nav,
.penlink-page figure,
.penlink-page main {
position: static;
float: none;
inset: auto;
transform: none;
width: auto;
max-width: none;
min-height: 0;
margin: 0;
padding: 0;
}
/* ---- Shared animation vocabulary ------------------------------------------
Keyframes are global regardless of selector scoping, so these are available
to any page. They are referenced from inline `animation:` declarations in
page markup. Names are prefixed pl* to avoid colliding with the theme's own
(it loads GSAP, ScrollTrigger, AOS and Lottie).
------------------------------------------------------------------------- */
@keyframes plSpin { to { transform: rotate(360deg); } }
@keyframes plSpinRev { to { transform: rotate(-360deg); } }
@keyframes plPulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes plDash { to { stroke-dashoffset: -240; } }
@keyframes plCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes plWave { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes plPopIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes plBarGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes plBarGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes plDrawIn { to { stroke-dashoffset: 0; } }
@keyframes plPan { from { transform: translate(0,0); } to { transform: translate(-24px,-14px); } }
@keyframes plFadeRow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes plFadeDash { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes plCardReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* ---- Progressive enhancement ----------------------------------------------
The house rule: no element may depend on JavaScript to become visible.
Elements that animate in carry .pl-anim and an inline opacity:0. Each
page.js adds .pl-js to as its first statement, and the observer adds
.pl-revealed as elements scroll into view.
The html:not(.pl-js) rule below is the net. If a script 404s, fails to
parse, or throws during boot, that class is absent -- or is removed again by
the try/catch in the script's boot() -- and every animated element stays
visible. A dead script then costs the animations, not the page.
DO NOT REMOVE THE SELECTOR. An earlier build shipped this rule with the
selector missing, which makes the whole block invalid and silently dropped
by the CSS parser. The page looked fine because the script happened to work;
the net was not there.
------------------------------------------------------------------------- */
.pl-revealed { opacity: 1 !important; transform: none !important; }
html:not(.pl-js) .pl-anim { opacity: 1 !important; transform: none !important; }
/* Readers who have asked for less motion get the static page. The scripts
still run their typewriter and counter effects; only the scroll-reveal
transitions are suppressed here. */
@media (prefers-reduced-motion: reduce) {
.pl-anim { opacity: 1 !important; transform: none !important; }
}