/* Theme Name: Alice Gerfault Theme URI: https://alice-gerfault.com Author: Alice Gerfault Description: Thème bloc pour alice-gerfault.com — patrons jacquard modernes. Version: 1.6.21 Requires at least: 6.6 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: alice-gerfault Tags: full-site-editing, block-themes, e-commerce */ @layer tokens, base, components, wp-overrides, utilities; @layer tokens { /* ============================================= DESIGN TOKENS — mapped from --wp--preset--* ============================================= */ :root { --ag-ink: var(--wp--preset--color--ink, #142033); --ag-ink-soft: var(--wp--preset--color--ink-soft, #4b5563); --ag-accent: var(--wp--preset--color--accent, #d0008b); --ag-paper: var(--wp--preset--color--paper, #fff); --ag-deep-navy: var(--wp--preset--color--deep-navy, #101a2a); --ag-mint: var(--wp--preset--color--mint, #ddeee8); --ag-blue-ice: var(--wp--preset--color--blue-ice, #e5f0f2); --ag-rose: var(--wp--preset--color--rose, #f8dbef); --ag-rule: var(--wp--preset--color--rule, #d8dedc); --ag-secondary: var(--wp--preset--color--secondary, #1d4a3a); --ag-on-dark: var(--wp--preset--color--on-dark, #b8c0c7); --ag-paper-deep: color-mix(in srgb, var(--ag-ink) 3%, var(--ag-paper)); --ag-rule-strong: color-mix(in srgb, var(--ag-ink) 24%, var(--ag-paper)); --ag-accent-deep: #a8006f; /* darkened accent for hover/active states */ --ag-rule-dark: #465365; /* hairline rules/borders on dark sections */ --ag-cream: #f4eee0; /* warm off-white text on dark sections */ --ag-font-display: var( --wp--preset--font-family--instrument-serif, "Instrument Serif", Georgia, serif ); --ag-font-body: var( --wp--preset--font-family--manrope, "Manrope", system-ui, sans-serif ); /* System mono on purpose: the bundled JetBrains Mono woff2 was Google's latin-ext subset — no digits, no lowercase — so every eyebrow, label and price already fell back to the system face. Dropped the face rather than shipping a second one, which keeps the rendering identical. */ --ag-font-mono: ui-monospace, "Cascadia Code", monospace; --ag-font-brand: var( --wp--preset--font-family--prata, "Prata", "Cormorant Garamond", Georgia, serif ); /* --- Type scale: sizes (mirror theme.json fontSizes presets) --- */ --ag-text-xxs: var(--wp--preset--font-size--xxs, 10.5px); --ag-text-xs: var(--wp--preset--font-size--eyebrow, 11.5px); --ag-text-cap: var(--wp--preset--font-size--cap, 12.5px); --ag-text-sm: var(--wp--preset--font-size--small, 14px); --ag-text-base: var(--wp--preset--font-size--body, 16px); --ag-text-md: var(--wp--preset--font-size--md, 18px); --ag-text-lg: var(--wp--preset--font-size--lg, 20px); --ag-text-xl: var(--wp--preset--font-size--xl, 24px); --ag-text-xxl: var(--wp--preset--font-size--xxl, 28px); --ag-text-xxxl: var(--wp--preset--font-size--xxxl, 32px); --ag-text-huge: var(--wp--preset--font-size--huge, 40px); --ag-text-lede: var( --wp--preset--font-size--lede, clamp(18px, 1.5vw, 22px) ); --ag-text-display-s: var( --wp--preset--font-size--display-s, clamp(28px, 2.6vw, 40px) ); --ag-text-display-m: var( --wp--preset--font-size--display-m, clamp(36px, 4.2vw, 64px) ); --ag-text-display-l: var( --wp--preset--font-size--display-l, clamp(44px, 5.8vw, 88px) ); --ag-text-display-xl: var( --wp--preset--font-size--display-xl, clamp(56px, 7.6vw, 124px) ); /* Named display outliers — deliberate one-offs kept off the snap scale */ --ag-text-marquee: 44px; --ag-text-hero-stat: 84px; --ag-text-shop-hero: clamp(52px, 8.4vw, 142px); --ag-text-shop-tech-tile: clamp(40px, 3.6vw, 58px); /* Brand lockup (Prata "Alice / Gerfault"): three size stops tuned per placement — nav header, mobile drawer, footer. Off-snap because the glyphs are proprietary display type, not the utility scale. */ --ag-text-brand-nav: 29px; --ag-text-brand-nav-sm: 21px; --ag-text-brand-drawer: 26px; --ag-text-brand-footer: 21px; /* --- Type scale: weights --- */ --ag-weight-normal: 400; --ag-weight-medium: 500; --ag-weight-semibold: 600; --ag-weight-bold: 700; /* --- Type scale: tracking (letter-spacing) --- */ --ag-tracking-tight: -0.02em; --ag-tracking-snug: -0.01em; --ag-tracking-brand: 0.01em; --ag-tracking-normal: 0; --ag-tracking-wide: 0.02em; --ag-tracking-label: 0.1em; --ag-tracking-eyebrow: 0.16em; --ag-tracking-eyebrow-lg: 0.18em; /* --- Type scale: leading (line-height) --- */ --ag-leading-none: 1; --ag-leading-brand: 1.05; --ag-leading-hero: 0.9; --ag-leading-display: 0.98; --ag-leading-tight: 1.1; --ag-leading-snug: 1.15; --ag-leading-base: 1.55; --ag-leading-relaxed: 1.6; /* Hors échelle nommé, comme --ag-text-marquee côté tailles : l'exergue de la page À propos tombe entre le serré des titres (1,15) et l'aéré du corps (1,55), et aucun cran existant ne rend ce registre. */ --ag-leading-exergue: 1.4; /* --- Spacing scale --- Fine numeric scale for component micro-spacing (gaps/padding/margin). The three section-level steps mirror theme.json's editor presets (md 56 / lg 80 / section 120) and alias the generated --wp--preset--spacing--* so the two scales cannot drift; the finer steps are CSS-only literals theme.json's coarse preset list cannot express. See KTD-1. */ --ag-space-3xs: 4px; --ag-space-2xs: 8px; --ag-space-xs: 12px; --ag-space-sm: 16px; --ag-space-md: 20px; --ag-space-lg: 24px; --ag-space-xl: 32px; --ag-space-2xl: 40px; --ag-space-3xl: 48px; --ag-space-4xl: 56px; --ag-space-5xl: 80px; --ag-space-tight: 46px; --ag-space-section: 30px; /* Measured height of the sticky site header on desktop: .nav-inner's 20px block padding x 2 + the 62px brand mark + .ag-nav's 1px border-bottom is only 103px -- what actually sets the height is .nav-links, whose 37.7px row plus 16px block margins outgrows the brand mark (110.7px total, rounded up). Not expressible as a calc() since the row is font-metric sized. Anything that must clear the header (sticky rails, scroll-margin on anchor targets) offsets from this rather than guessing with a spacing step. Under 900px the nav links collapse and the real header is 95px, so this overshoots there -- harmless extra breathing room. */ --ag-header-h: 112px; /* --- Radius --- */ --ag-radius-sm: 2px; --ag-radius-md: 4px; --ag-radius-pill: 999px; /* --- Z-index scale --- */ --ag-z-raised: 2; --ag-z-sticky: 50; --ag-z-overlay: 9000; --ag-z-max: 9999; /* --- Elevation (shadow) --- */ --ag-shadow-md: 0 14px 32px rgb(0 0 0 / 12%); --ag-shadow-lg: 0 40px 80px -20px rgb(20 32 51 / 25%), 0 0 0 1px rgb(20 32 51 / 6%); /* --- Motion (duration / easing) --- */ --ag-dur-fast: 0.15s; --ag-dur-base: 0.2s; --ag-dur-slow: 0.35s; --ag-ease: cubic-bezier(0.2, 0.6, 0.2, 1); } } @layer base { /* ============================================= BASE RESET ============================================= */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--ag-font-body); font-size: var(--ag-text-base); line-height: var(--ag-leading-base); color: var(--ag-ink); text-rendering: optimizelegibility; background: var(--ag-paper); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font: inherit; } img { display: block; max-width: 100%; } } @layer components { /* ============================================= LAYOUT ============================================= */ .ag-wrap { max-width: 1480px; margin-right: auto; margin-left: auto; padding-right: var(--ag-space-2xl); padding-left: var(--ag-space-2xl); } .section { padding-top: var(--ag-space-section); padding-bottom: var(--ag-space-section); } .section-tight { padding-top: var(--ag-space-tight); padding-bottom: var(--ag-space-tight); } /* --------------------------------------------------------------------------- Auto grid primitive — responsive multi-column grid that collapses 3 -> 2 -> 1 at 900 / 720. Column count via --cols (default 3), gap via --grid-gap (default xl). Shared by the editorial 3-col grids. The 4-col product grids (.reco-row / .commu-cards / .ressource-grid) use a distinct 4 -> 2 -> 1 collapse at 900 / 560 and are kept as their own group below. Container queries are the eventual fit here (deferred — see plan U6). --------------------------------------------------------------------------- */ .grid-auto, .patrons-grid, .preuves-grid, .journal-grid, .reco-row, .commu-cards, .ressource-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--grid-gap, var(--ag-space-xl)); } /* ============================================= TYPOGRAPHY ============================================= */ /* * Canonical type classes. Authors compose THESE in markup; the --ag-text-*, * --ag-weight-*, --ag-tracking-*, --ag-leading-* tokens are the layer these * classes consume. Do not reintroduce raw px / weight / em literals here. */ /* Eyebrow — mono uppercase kicker */ .eyebrow { font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow-lg); } .eyebrow-ink { color: var(--ag-ink); } .eyebrow-accent { color: var(--ag-accent); } /* Label — mono uppercase tracked label (tags, hints, switches) */ .label { font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); text-transform: uppercase; letter-spacing: var(--ag-tracking-label); } .label-sm { font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); text-transform: uppercase; letter-spacing: var(--ag-tracking-label); } /* Body copy */ .body { font-family: var(--ag-font-body); font-size: var(--ag-text-base); line-height: var(--ag-leading-base); } .body-sm { font-family: var(--ag-font-body); font-size: var(--ag-text-sm); line-height: var(--ag-leading-base); } .caption { font-family: var(--ag-font-body); font-size: var(--ag-text-cap); line-height: var(--ag-leading-base); } .lede { max-width: 56ch; font-family: var(--ag-font-body); font-size: var(--ag-text-lede); line-height: var(--ag-leading-base); color: var(--ag-ink-soft); } .display { font-family: var(--ag-font-display); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-display); color: var(--ag-ink); letter-spacing: var(--ag-tracking-snug); } .display-xl { font-size: var(--ag-text-display-xl); } .display-l { font-size: var(--ag-text-display-l); } .display-m { font-size: var(--ag-text-display-m); } .display-s { font-size: var(--ag-text-display-s); } .serif-it { font-family: var(--ag-font-display); font-style: italic; } .price-tag { font-family: var(--ag-font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ag-tracking-snug); } .muted { color: var(--ag-ink-soft); } .note-hand { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-text-base); font-style: italic; color: var(--ag-accent); } .scroll-hint { display: flex; gap: var(--ag-space-xs); align-items: center; margin-top: var(--ag-space-4xl); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } .scroll-hint::before { content: ""; display: inline-block; flex-shrink: 0; width: 24px; height: 1px; background: currentcolor; } /* ============================================= BUTTONS ============================================= */ /* --------------------------------------------------------------------------- Button system — single source of truth. Appearance is driven by --btn-* custom properties so all three entry points share ONE recipe: standalone .btn, the core block button (.wp-block-button.btn .wp-block-button__link, see BLOCK BUTTON GLOBAL), and the nav Panier pill (.ag-nav .btn). Variant classes only flip the --btn-* values; because custom properties inherit, setting them on the .wp-block-button WRAPPER (which always also carries .btn) propagates to the inner .wp-block-button__link. The colour/size literals therefore live here once, not in three recipes. --------------------------------------------------------------------------- */ /* Default (primary) values — set on the standalone element and the block wrapper */ .btn, .wp-block-button.btn { --btn-bg: var(--ag-ink); --btn-fg: var(--ag-paper); --btn-border: var(--ag-ink); --btn-bg-hover: var(--ag-accent); --btn-fg-hover: var(--ag-paper); --btn-border-hover: var(--ag-accent); --btn-pad: var(--ag-space-sm) var(--ag-space-lg); --btn-gap: var(--ag-space-xs); --btn-font-size: var(--ag-text-sm); } /* Ghost variant */ .btn-ghost, .wp-block-button.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ag-ink); --btn-border: var(--ag-ink); --btn-bg-hover: var(--ag-ink); --btn-fg-hover: var(--ag-paper); --btn-border-hover: var(--ag-ink); } /* Accent variant */ .btn-accent, .wp-block-button.btn-accent { --btn-bg: var(--ag-accent); --btn-fg: var(--ag-paper); --btn-border: var(--ag-accent); --btn-bg-hover: var(--ag-accent-deep); --btn-border-hover: var(--ag-accent-deep); } /* Small variant */ .btn-sm, .wp-block-button.btn-sm { --btn-pad: var(--ag-space-xs) var(--ag-space-sm); --btn-font-size: var(--ag-text-cap); } /* Ghost variant on dark bands — value-flips inherit to both standalone and block */ .band-dark .btn-ghost, .band-dark .wp-block-button.btn-ghost { --btn-border: rgb(255 255 255 / 40%); --btn-fg: var(--ag-paper); --btn-bg-hover: var(--ag-paper); --btn-fg-hover: var(--ag-deep-navy); --btn-border-hover: var(--ag-paper); } /* Standalone button appearance — reads the --btn-* values above */ .btn { cursor: pointer; display: inline-flex; gap: var(--btn-gap); align-items: center; padding: var(--btn-pad); border: 1px solid var(--btn-border); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--btn-font-size); font-weight: var(--ag-weight-medium); color: var(--btn-fg); text-decoration: none; letter-spacing: var(--ag-tracking-wide); background: var(--btn-bg); transition: transform var(--ag-dur-base) ease, background var(--ag-dur-base) ease, border-color var(--ag-dur-base) ease, color var(--ag-dur-base) ease; } .btn:hover { transform: translateY(-1px); border-color: var(--btn-border-hover); color: var(--btn-fg-hover); background: var(--btn-bg-hover); } .btn-arrow { display: inline-block; transition: transform var(--ag-dur-base) ease; } .btn:hover .btn-arrow { transform: translateX(4px); } /* ============================================= CHIPS ============================================= */ .chip { cursor: pointer; display: inline-flex; gap: var(--ag-space-2xs); align-items: center; padding: var(--ag-space-2xs) var(--ag-space-xs); border: 1px solid var(--ag-rule); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); color: var(--ag-ink); text-transform: uppercase; letter-spacing: var(--ag-tracking-label); background: transparent; transition: all var(--ag-dur-base) ease; } .chip:hover, .chip-active { border-color: var(--ag-ink); color: var(--ag-paper); background: var(--ag-ink); } .chip-soft { border-color: rgb(208 0 139 / 35%); color: var(--ag-accent); background: var(--ag-blue-ice); } .chip-sage { border-color: rgb(29 74 58 / 25%); color: var(--ag-secondary); background: var(--ag-mint); } /* ============================================= IMAGE SLOT ============================================= */ .slot { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--ag-radius-sm); background: repeating-linear-gradient( 135deg, rgb(43 37 32 / 4%) 0, rgb(43 37 32 / 4%) 1px, transparent 1px, transparent 14px ), var(--ag-paper); } .slot img { position: absolute; inset: 0; width: 100%; /* WooCommerce ships an unlayered `.woocommerce img { height: auto }` (woocommerce-layout.css) that outranks any @layer rule, collapsing the image to its intrinsic ratio and exposing the hatch below a non-square slot. !important is the documented escape hatch (see DESIGN.md). */ height: 100% !important; object-fit: cover; } /* --------------------------------------------------------------------------- Overlay label primitive — mono-uppercase pill on imagery (tags, counts, timestamps). The shared recipe lives once here; each use adds only its position offsets and, for light-on-image variants, its colour/background. .u-overlay-label is the canonical name for new markup; the existing component classes compose the same recipe to avoid pattern churn (KTD-3). --------------------------------------------------------------------------- */ .u-overlay-label, .slot-tag, .gallery-label, .preuve-num { position: absolute; padding: var(--ag-space-3xs) var(--ag-space-2xs); border-radius: var(--ag-radius-sm); font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-paper); text-transform: uppercase; letter-spacing: var(--ag-tracking-label); background: rgb(0 0 0 / 45%); } /* Slot tag — light pill, bottom-left */ .slot-tag { bottom: 12px; left: 14px; color: var(--ag-ink-soft); background: rgb(255 255 255 / 90%); backdrop-filter: blur(4px); } /* ============================================= CARD LINK ============================================= */ .card-link { display: block; color: inherit; text-decoration: none; transition: transform var(--ag-dur-slow) var(--ag-ease); } .card-link:hover { transform: translateY(-4px); } .card-link .slot { transition: filter var(--ag-dur-slow) ease; } .card-link:hover .slot { filter: brightness(0.96) contrast(1.02); } .card-link:hover .journal-post-title, .card-link:hover .journal-post-title a { color: var(--ag-accent); } /* ============================================= BANDS (full-width color sections) ============================================= */ .band { width: 100%; padding-top: var(--ag-space-section); padding-bottom: var(--ag-space-section); } .band-dark { color: var(--ag-paper); background-color: var(--ag-deep-navy); } .band-dark .eyebrow { color: var(--ag-on-dark); } .band-dark .eyebrow-accent { color: var(--ag-accent); } .band-dark .lede { color: var(--ag-on-dark); } .band-dark .display { color: var(--ag-paper); } .band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--ag-paper); } .band-dark .chip { border-color: var(--ag-rule-dark); color: var(--ag-on-dark); } .band-dark .chip:hover, .band-dark .chip-active { border-color: var(--ag-paper); color: var(--ag-deep-navy); background: var(--ag-paper); } .band-dark .btn-ghost { border-color: rgb(255 255 255 / 40%); color: var(--ag-paper); } .band-dark .btn-ghost:hover { border-color: var(--ag-paper); color: var(--ag-deep-navy); background: var(--ag-paper); } /* Solid button on a dark band — value-flips the --btn-* contract rather than adding a variant class, as .band-dark .btn-ghost already does. No dark band carried a solid button before the home vedette block; cream-on-ink keeps it readable, and the accent hover matches the light-background behaviour. The :not() exclusions are load-bearing: every variant also carries .btn, so an unscoped `.band-dark .btn` (0,2,0) would outrank `.btn-ghost` (0,1,0) and fill the seven ghost buttons on the home — and two more on /jacquard-moderne/ — with cream. */ .band-dark .btn:not(.btn-ghost, .btn-accent), .band-dark .wp-block-button.btn:not(.btn-ghost, .btn-accent) { --btn-bg: var(--ag-cream); --btn-fg: var(--ag-ink); --btn-border: var(--ag-cream); --btn-bg-hover: var(--ag-accent); --btn-fg-hover: var(--ag-paper); --btn-border-hover: var(--ag-accent); } /* Vedette block on a dark band. The block is shared verbatim with /boutique/, so only the colours that assume a paper background are re-pointed here — --ag-ink-soft is unreadable on deep navy. Values transcribed from the mockup's .on-ink block; its --text-on-dark-secondary is #B8C0C7, i.e. this theme's --ag-on-dark. The cream tints stay literal rather than introducing an --ag-cream-rgb token (KTD6), as .marquee-dot already does. */ .band-dark .shop-icon-badge { color: var(--ag-accent); } .band-dark .shop-icon-title { color: var(--ag-cream); } .band-dark .shop-icon-text { color: var(--ag-on-dark); } .band-dark .shop-icon-others-label, .band-dark .shop-icon-other-reason { color: rgb(244 238 224 / 60%); } .band-dark .shop-icon-other-arrow { color: rgb(244 238 224 / 50%); } .band-dark .shop-icon-other-item { border-bottom-color: rgb(244 238 224 / 16%); color: var(--ag-cream); } .band-dark .shop-icon-other-item:first-child { border-top-color: rgb(244 238 224 / 16%); } /* :focus-visible doubles :hover throughout the theme (.hub-porte, .hub-frise-item) so keyboard users get the same affordance the mockup only gave the mouse. */ .band-dark .shop-icon-other-item:hover, .band-dark .shop-icon-other-item:focus-visible { color: var(--ag-accent); } .band-dark .shop-icon-other-item:hover .shop-icon-other-arrow, .band-dark .shop-icon-other-item:focus-visible .shop-icon-other-arrow { color: var(--ag-accent); } .band-dark a { color: var(--ag-paper); } .band-mint { background-color: var(--ag-mint); } /* ============================================= NAVIGATION ============================================= */ /* The header template part renders as
. Sticky must live on that wrapper — if it lives on .ag-nav, the nav's containing block is exactly its own height, leaving no room to stick. Target the
tag directly (only the header part uses it) rather than :has(.ag-nav), so stickiness doesn't depend on :has() support on mobile. */ header.wp-block-template-part { position: sticky; /* Must outrank .patron-catalog__filterbar (also z-sticky): both are sticky siblings at the same stacking level, so without this the mega-menu panel — which overflows below the header — would be painted under the later-in-DOM filter bar. */ z-index: var(--ag-z-overlay); top: 0; } .ag-nav { position: relative; width: 100%; border-bottom: 1px solid var(--ag-rule); background: color-mix(in srgb, var(--ag-paper) 86%, transparent); backdrop-filter: blur(14px); } .ag-nav .nav-inner { display: flex; gap: var(--ag-space-lg); align-items: center; justify-content: space-between; max-width: 1480px; margin: 0 auto; padding: var(--ag-space-md) var(--ag-space-2xl); } /* Brand lockup: [SVG mark] | [Alice / Gerfault stacked in Prata] */ .nav-brand, .footer-brand { display: inline-flex; flex-shrink: 0; gap: 18px; align-items: center; color: var(--ag-ink); text-decoration: none; } .nav-brand .nav-brand-mark, .footer-brand .nav-brand-mark { display: block; width: 62px; height: 62px; } /* Thin pink separator drawn in CSS — stays razor-crisp at any size. */ .nav-brand .nav-brand-sep, .footer-brand .nav-brand-sep { flex: none; width: 2px; height: 57px; background: var(--ag-accent); } .nav-brand .nav-brand-text, .footer-brand .nav-brand-text { display: inline-flex; flex-direction: column; gap: 0; font-family: var(--ag-font-brand); font-size: var(--ag-text-brand-nav); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-brand); letter-spacing: var(--ag-tracking-brand); } /* Nav links */ .nav-links { display: flex; gap: var(--ag-space-xl); align-items: center; } .nav-item { display: flex; align-items: center; } .nav-item .nav-link { display: inline-flex; gap: var(--ag-space-2xs); align-items: center; } .nav-link { position: relative; padding: var(--ag-space-2xs) 0; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); color: var(--ag-ink); text-decoration: none; } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--ag-ink); transition: width var(--ag-dur-base) ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.nav-icon::after { display: none; } .nav-icon { display: inline-flex; align-items: center; } .nav-caret { transform: rotate(45deg) translateY(-2px); display: inline-block; width: 8px; height: 8px; border-right: 1.4px solid currentcolor; border-bottom: 1.4px solid currentcolor; transition: transform var(--ag-dur-base) ease; } .nav-item:hover .nav-caret { transform: rotate(225deg) translateY(-1px); } /* Right cluster */ .nav-cta { display: flex; gap: var(--ag-space-sm); align-items: center; } /* Account icon — logged-in dot + dropdown. The icon itself is a plain .nav-icon; .nav-account only owns the positioning context and the two states assets/js/nav.js toggles after hydration (the server markup is identical for every visitor — see inc/account-state.php). */ .nav-account { position: relative; } .ag-account-dot { position: absolute; top: 6px; right: 6px; transform: scale(0.6); width: 7px; height: 7px; border: 1.5px solid var(--ag-paper); border-radius: 50%; opacity: 0; background: var(--ag-accent); transition: opacity var(--ag-dur-base) var(--ag-ease), transform var(--ag-dur-base) var(--ag-ease); } .nav-account.is-logged .ag-account-dot { transform: scale(1); opacity: 1; } .ag-account-dropdown { position: absolute; z-index: var(--ag-z-sticky); top: calc(100% + var(--ag-space-sm)); right: 0; width: 220px; padding: var(--ag-space-2xs); border: 1px solid var(--ag-rule-strong); border-radius: var(--ag-radius-md); background: var(--ag-paper); box-shadow: var(--ag-shadow-md); } .ag-account-hello { margin: 0 0 var(--ag-space-3xs); padding: var(--ag-space-2xs) var(--ag-space-xs) var(--ag-space-3xs); border-bottom: 1px solid var(--ag-rule); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); color: var(--ag-ink); } .ag-account-dropdown a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--ag-space-xs); border-radius: var(--ag-radius-sm); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink); text-decoration: none; transition: background var(--ag-dur-fast) ease; } .ag-account-dropdown a:hover { background: var(--ag-paper-deep); } .ag-account-dropdown a.ag-account-logout { margin-top: var(--ag-space-3xs); padding-top: var(--ag-space-3xs); border-top: 1px solid var(--ag-rule); font-weight: var(--ag-weight-medium); color: var(--ag-accent-deep); } /* Header search: icon-sized at rest, expanding into a real field. `:focus-within` carries the keyboard path on its own, so the field stays reachable without JS; nav.js adds `.is-open` for the pointer path. It replaced a link to `/?s=`, which is a search for the empty string and returns no results. */ .nav-search { display: flex; align-items: center; border: 1px solid transparent; border-radius: var(--ag-radius-pill); transition: border-color var(--ag-dur-base) var(--ag-ease), background-color var(--ag-dur-base) var(--ag-ease); } .nav-search:focus-within, .nav-search.is-open { border-color: var(--ag-rule-strong); background: var(--ag-paper); } .nav-search-input { width: 0; min-width: 0; padding: 0; border: 0; border-radius: 0; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink); appearance: none; opacity: 0; background: transparent; transition: width var(--ag-dur-base) var(--ag-ease), padding var(--ag-dur-base) var(--ag-ease), opacity var(--ag-dur-base) var(--ag-ease); } .nav-search-input::-webkit-search-decoration, .nav-search-input::-webkit-search-cancel-button, .nav-search-input::-webkit-search-results-button, .nav-search-input::-webkit-search-results-decoration { appearance: none; } .nav-search:focus-within .nav-search-input, .nav-search.is-open .nav-search-input { width: 200px; padding: var(--ag-space-3xs) 0 var(--ag-space-3xs) var(--ag-space-sm); opacity: 1; background: var(--ag-paper); } .nav-search-input:focus { background: var(--ag-paper); outline: none; box-shadow: none; } .nav-search-input::placeholder { color: var(--ag-ink-soft); } .nav-search-btn { cursor: pointer; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--ag-ink); background: transparent; } .lang-switch { display: inline-flex; gap: var(--ag-space-2xs); align-items: center; padding: var(--ag-space-3xs) var(--ag-space-xs); border: 1px solid var(--ag-rule); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); letter-spacing: var(--ag-tracking-eyebrow); } .lang-switch button, .lang-switch a { cursor: pointer; padding: var(--ag-space-3xs) 0; border: 0; font: inherit; color: var(--ag-ink-soft); text-decoration: none; letter-spacing: inherit; background: none; transition: color var(--ag-dur-fast) ease; } .lang-switch button.on, .lang-switch a.on { font-weight: var(--ag-weight-semibold); color: var(--ag-ink); } .lang-switch button:hover, .lang-switch a:hover { color: var(--ag-ink); } .lang-sep { color: var(--ag-ink-soft); } /* Panier pill — nav delta only: tighter gap. Full recipe + ghost/sm variants inherit from the .btn system above (.btn-sm / .btn-ghost set their own --btn-*). */ .ag-nav .btn { --btn-gap: var(--ag-space-2xs); } /* ============================================= PRIMARY NAV — mega-menu (desktop) + drawer (mobile) ============================================= */ /* Mega parent stays static so the panel spans the whole nav width; the positioning context is .ag-nav (position: relative, set above). */ .nav-item.has-mega { position: static; } .nav-mega { pointer-events: none; position: absolute; z-index: var(--ag-z-sticky); top: 100%; right: 0; left: 0; transform: translateY(-6px); border-top: 1px solid var(--ag-rule); border-bottom: 1px solid var(--ag-rule); opacity: 0; background: var(--ag-paper); box-shadow: var(--ag-shadow-md); transition: opacity var(--ag-dur-base) ease, transform var(--ag-dur-base) ease; } /* Invisible hover bridge: fills the vertical gap between the trigger and the panel so the cursor never leaves the hover region on its way down. Only active while the panel is open (it inherits the panel's pointer-events). */ .nav-item.has-mega .nav-mega::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: var(--ag-space-2xl); } .nav-item.has-mega:hover .nav-mega, .nav-item.has-mega:focus-within .nav-mega { pointer-events: auto; transform: none; opacity: 1; } /* Columns grid and promo feature sit side-by-side inside the wrap so their widths and heights stay decoupled: the feature has a fixed width and its height comes from the columns' natural height (align-items: stretch), not the other way around. */ .nav-mega-wrap { display: flex; gap: var(--ag-space-2xl); align-items: stretch; /* Enough vertical room that a promo image + text feels substantial and the columns' link lists breathe. Panel height auto-grows if content is taller. */ min-height: 340px; } .nav-mega-inner { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; flex: 1 1 auto; gap: var(--ag-space-2xl); padding: var(--ag-space-lg) 0 var(--ag-space-xl); } .nav-mega-col h6 { margin: 0 0 var(--ag-space-sm); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } .nav-mega-links { margin: 0; padding: 0; list-style: none; } .nav-mega-links li { border-bottom: 1px solid var(--ag-rule); } .nav-mega-links li:last-child { border-bottom: none; } .nav-mega-links a { display: block; padding: var(--ag-space-2xs) 0; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink); text-decoration: none; transition: padding var(--ag-dur-fast) ease, color var(--ag-dur-fast) ease; } .nav-mega-links a:hover { padding-left: var(--ag-space-xs); color: var(--ag-accent-deep); } .nav-mega-feature { /* Sibling of .nav-mega-inner via flex on the wrap: fixed width, stretched to the columns' height. The negative right margin bleeds the promo past the wrap's right padding to the panel edge. */ position: relative; overflow: hidden; flex: 0 0 340px; margin-right: calc(var(--ag-space-2xl) * -1); color: inherit; text-decoration: none; background: var(--ag-paper-deep); } a.nav-mega-feature { cursor: pointer; display: block; } a.nav-mega-feature:hover .nav-mega-feature-img { transform: scale(1.03); } a.nav-mega-feature:hover .feat-cta { border-bottom-color: var(--ag-accent); color: var(--ag-accent); } a.nav-mega-feature:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: -2px; } .nav-mega-feature-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ag-dur-slow) var(--ag-ease); } .nav-mega-feature-scrim { /* Cream-toned book covers leave the mockup's soft scrim too weak at the text band. Deepen the gradient so the bottom third reaches near-solid ink well before the title sits on it, guaranteeing contrast on any image. */ pointer-events: none; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgb(20 32 51 / 55%) 62%, rgb(20 32 51 / 92%) 82%, rgb(20 32 51 / 96%) 100% ); } .nav-mega-feature-content { position: absolute; right: 0; bottom: var(--ag-space-md); left: 0; display: flex; flex-direction: column; gap: var(--ag-space-3xs); padding: 0 var(--ag-space-lg); color: var(--ag-cream); } .nav-mega-feature .feat-eyebrow { font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); color: var(--ag-cream); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); opacity: 0.9; } .nav-mega-feature .feat-title { margin: 0 0 var(--ag-space-2xs); font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-tight); color: var(--ag-cream); } /* Description is not part of the overlay in the desktop mockup — kept in markup so the mobile drawer can still render it. */ .nav-mega-feature > .nav-mega-feature-content > p { display: none; } .nav-mega-feature .feat-cta { align-self: flex-start; margin-top: var(--ag-space-2xs); padding-bottom: var(--ag-space-3xs); border-bottom: 1px solid var(--ag-cream); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); color: var(--ag-cream); text-decoration: none; text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } /* Plain dropdown — a top item with children not flagged as a mega. */ .nav-item.has-dropdown { position: relative; } .nav-item.has-dropdown .sub-menu { pointer-events: none; position: absolute; z-index: var(--ag-z-sticky); top: 100%; left: 0; transform: translateY(-6px); min-width: 220px; margin: 0; padding: var(--ag-space-2xs) 0; border: 1px solid var(--ag-rule); list-style: none; opacity: 0; background: var(--ag-paper); box-shadow: var(--ag-shadow-md); transition: opacity var(--ag-dur-base) ease, transform var(--ag-dur-base) ease; } .nav-item.has-dropdown .sub-menu::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: var(--ag-space-2xl); } .nav-item.has-dropdown:hover .sub-menu, .nav-item.has-dropdown:focus-within .sub-menu { pointer-events: auto; transform: none; opacity: 1; } .nav-item.has-dropdown .sub-menu a { display: block; padding: var(--ag-space-2xs) var(--ag-space-md); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink); text-decoration: none; } .nav-item.has-dropdown .sub-menu a:hover { color: var(--ag-accent-deep); } /* Active page indicator on the desktop bar. */ .nav-inner > .nav-links .current-menu-item > .nav-link::after, .nav-inner > .nav-links .current-menu-ancestor > .nav-link::after { width: 100%; background: var(--ag-accent); } /* Hamburger — hidden while the desktop bar is shown. */ .nav-burger { cursor: pointer; position: relative; display: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; } .nav-burger span { position: absolute; right: 3px; left: 3px; height: 1.6px; background: var(--ag-ink); transition: transform var(--ag-dur-base) var(--ag-ease), opacity var(--ag-dur-base) ease; } .nav-burger span:nth-child(1) { top: 9px; } .nav-burger span:nth-child(2) { top: 14px; } .nav-burger span:nth-child(3) { top: 19px; } /* ============================================= MOBILE DRAWER (full-screen accordion) ============================================= */ body.ag-nav-lock { overflow: hidden; } .nav-drawer { position: fixed; z-index: var(--ag-z-overlay); inset: 0; display: flex; flex-direction: column; color: var(--ag-cream); visibility: hidden; opacity: 0; background: var(--ag-deep-navy); transition: opacity var(--ag-dur-base) ease; } .nav-drawer.is-open { visibility: visible; opacity: 1; } .nav-drawer-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: var(--ag-space-sm) var(--ag-space-lg); border-bottom: 1px solid var(--ag-rule-dark); } .nav-drawer-head .nav-brand { color: var(--ag-cream); } .nav-drawer-head .nav-brand-mark { width: 57px !important; height: 57px !important; } .nav-drawer-head .nav-brand-sep { height: 52px !important; } .nav-drawer-head .nav-brand-text { font-size: var(--ag-text-brand-drawer) !important; } .nav-drawer-close { cursor: pointer; position: relative; width: 44px; height: 44px; border: 0; background: none; } .nav-drawer-close::before, .nav-drawer-close::after { content: ""; position: absolute; top: 21px; right: 10px; left: 10px; height: 1.6px; background: var(--ag-cream); } .nav-drawer-close::before { transform: rotate(45deg); } .nav-drawer-close::after { transform: rotate(-45deg); } .nav-drawer-search { flex: 0 0 auto; padding: var(--ag-space-sm) var(--ag-space-lg); } .nav-drawer-search input { width: 100%; min-height: 44px; padding: var(--ag-space-xs) var(--ag-space-sm); border: 1px solid var(--ag-rule-dark); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--ag-text-base); color: var(--ag-cream); background: rgb(255 255 255 / 6%); } .nav-drawer-body { overflow-y: auto; flex: 1 1 auto; } /* The drawer reuses the mega markup, presented as an inline accordion. */ .nav-drawer .nav-links { display: flex; flex-direction: column; /* Override the desktop bar's align-items:center, which would otherwise centre and shrink the stacked items instead of filling the width. */ align-items: stretch; margin: 0; padding: 0; list-style: none; } .nav-drawer .nav-item { display: block; border-bottom: 1px solid var(--ag-rule-dark); } .nav-drawer .nav-item .nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--ag-space-sm) var(--ag-space-lg); font-family: var(--ag-font-display); font-size: var(--ag-text-xl); color: var(--ag-cream); } /* A parent row is a link plus a disclosure button, so the label can lead to the section's own page while the caret opens the accordion. */ .nav-drawer-row { display: flex; align-items: stretch; } .nav-drawer-row .nav-link { flex: 1 1 auto; justify-content: flex-start; } .nav-drawer-toggle { cursor: pointer; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 56px; padding: 0; border: 0; border-left: 1px solid var(--ag-rule-dark); color: var(--ag-on-dark); background: none; } .nav-drawer .nav-caret { border-color: var(--ag-on-dark); } .nav-drawer .nav-item.is-open > .nav-drawer-row .nav-caret, .nav-drawer .nav-item.is-open > .nav-link .nav-caret { transform: rotate(225deg) translateY(-1px); border-color: var(--ag-accent); } /* Mega panel becomes a collapsed accordion inside the drawer. */ .nav-drawer .nav-mega { pointer-events: auto; position: static; transform: none; overflow: hidden; max-height: 0; border: 0; opacity: 1; background: rgb(0 0 0 / 14%); box-shadow: none; transition: max-height var(--ag-dur-slow) ease; } .nav-drawer .nav-item.is-open .nav-mega { max-height: 1600px; } /* The desktop hover bridge is meaningless in the accordion drawer. */ .nav-drawer .nav-mega::before, .nav-drawer .sub-menu::before { content: none; } /* Plain dropdown inside the drawer: same collapse/expand as the mega. */ .nav-drawer .sub-menu { pointer-events: auto; position: static; transform: none; overflow: hidden; max-height: 0; margin: 0; padding: 0; border: 0; list-style: none; opacity: 1; background: rgb(0 0 0 / 14%); box-shadow: none; transition: max-height var(--ag-dur-slow) ease; } .nav-drawer .nav-item.is-open > .sub-menu { max-height: 800px; } .nav-drawer .sub-menu a { display: block; min-height: 44px; padding: var(--ag-space-xs) var(--ag-space-lg); font-size: var(--ag-text-base); color: var(--ag-cream); text-decoration: none; } /* Accordion, not a hover panel: no flex row to lay a promo column beside, and no 340px floor reserved for a promo image the drawer never shows. */ .nav-drawer .nav-mega-wrap { display: block; min-height: 0; } .nav-drawer .nav-mega-inner { display: block; padding: 0 var(--ag-space-lg) var(--ag-space-md); } .nav-drawer .nav-mega-col { padding: var(--ag-space-sm) 0; border-bottom: 1px solid var(--ag-rule-dark); } .nav-drawer .nav-mega-col:last-child { border-bottom: none; } .nav-drawer .nav-mega-col h6 { color: var(--ag-on-dark); } .nav-drawer .nav-mega-links li { border-bottom: none; } .nav-drawer .nav-mega-links a { min-height: 44px; font-size: var(--ag-text-base); color: var(--ag-cream); } .nav-drawer .nav-mega-links a:hover { color: var(--ag-cream); } /* No promo block in the drawer: on a phone it buried the link columns under a full-width image card. The desktop hover panel keeps it. Hiding the container also stops the lazy image being fetched — it has no box to intersect — so the drawer costs nothing extra on mobile. */ .nav-drawer .nav-mega-feature { display: none; } .nav-drawer-foot { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: var(--ag-space-lg); border-top: 1px solid var(--ag-rule-dark); } /* ============================================= HERO ============================================= */ .hero-image-col { position: relative; } /* Le visuel héro est un lien vers sa fiche produit. `.slot img` est en position absolue dans le `.slot`, donc l'ancre — statique et inline — n'aurait aucune surface cliquable : on l'étire sur tout le slot. */ .hero-image-col .slot > a { position: absolute; inset: 0; display: block; } .hero { padding-top: var(--ag-space-4xl); padding-bottom: var(--ag-space-5xl); } .hero-title { letter-spacing: var(--ag-tracking-tight); } .hero-trust { display: flex; flex-wrap: wrap; gap: var(--ag-space-md); margin: var(--ag-space-xl) 0 0; padding: 0; list-style: none; } .hero-trust li { display: flex; gap: var(--ag-space-xs); align-items: center; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink-soft); } .hero-trust-mark { display: flex; align-items: center; } .hero-trust-flag { overflow: hidden; display: inline-flex; width: 22px; height: 15px; border-radius: var(--ag-radius-sm); } .hero-trust-flag span { flex: 1; } .sticky-note { pointer-events: none; position: absolute; z-index: var(--ag-z-raised); transform: rotate(-2.5deg); padding: var(--ag-space-xs) var(--ag-space-md); border: 1px solid rgb(208 0 139 / 25%); border-radius: var(--ag-radius-md); font-family: var(--ag-font-display); font-size: var(--ag-text-md); font-style: italic; color: var(--ag-ink); background: var(--ag-paper); box-shadow: var(--ag-shadow-md); } .sticky-note .sn-eyebrow { display: block; margin-bottom: var(--ag-space-3xs); font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); font-style: normal; color: var(--ag-accent); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } /* ============================================= MARQUEE STRIP ============================================= */ .float-marquee { overflow: hidden; display: flex; gap: var(--ag-space-4xl); align-items: center; width: 100%; padding: var(--ag-space-sm) 0; color: var(--ag-cream); background-color: var(--ag-secondary); } .marquee-track { display: flex; gap: var(--ag-space-4xl); align-items: center; font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); font-style: italic; white-space: nowrap; animation: marquee 38s linear infinite; } .marquee-track span { display: inline-flex; flex-shrink: 0; gap: var(--ag-space-xl); align-items: center; } .marquee-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: rgb(244 238 224 / 50%); } /* ============================================= COLLECTIONS — PORTES D'ENTRÉE ============================================= */ /* Five full-bleed doors: photo, title, sentence, and an "Explorer →" that surfaces on interaction. A fourth "door or photo card" family alongside .hub-porte*, .shop-collection-card and .hub-frise-* — none of which carries a full-bleed image under a title *and* a sentence. The naming deliberately echoes them (.door-go after .hub-porte-go, .door-photo::after after .hub-frise-overlay) so a new family does not also mean a new convention. Cream tints stay literal rather than adding an --ag-cream-rgb token (KTD6), matching .marquee-dot just above. */ .doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ag-space-xs); } .door { position: relative; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 2/3.2; border-radius: var(--ag-radius-sm); color: var(--ag-cream); text-decoration: none; } .door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ag-dur-slow) var(--ag-ease); } /* :focus-visible doubles :hover — the mockup only reveals the zoom and the "Explorer →" on hover, which leaves keyboard and touch visitors with no affordance at all. .hub-porte and .hub-frise-item already pair the two. */ .door:hover img, .door:focus-visible img { transform: scale(1.04); } .door-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(16 26 42 / 88%), rgb(16 26 42 / 0%) 58%); } .door-cap { position: relative; z-index: var(--ag-z-raised); padding: var(--ag-space-lg); } /* The mockup's 25px/1.08 and 13.5px/1.45 are off the theme's snap scale, which Stylelint enforces. Snapped to the nearest stops — xl (24px)/tight (1.1) and sm (14px)/base (1.55). Sub-pixel differences; the token scale is the authority the project asks the mockup to be confronted with. */ .door-cap h3 { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-text-xl); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-tight); color: var(--ag-cream); } .door-cap p { max-width: 24ch; margin: var(--ag-space-2xs) 0 0; font-size: var(--ag-text-sm); line-height: var(--ag-leading-base); color: rgb(244 238 224 / 72%); } .door-go { transform: translateY(6px); display: inline-block; margin-top: var(--ag-space-sm); font-family: var(--ag-font-mono); font-size: var(--ag-text-xs); color: var(--ag-cream); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); opacity: 0; transition: opacity var(--ag-dur-base) var(--ag-ease), transform var(--ag-dur-base) var(--ag-ease); } .door:hover .door-go, .door:focus-visible .door-go { transform: none; opacity: 1; } /* ============================================= PATRONS / PRODUCTS GRID ============================================= */ /* Patrons grid — .grid-auto (3->2->1) + bottom spacing */ .patrons-grid { margin-bottom: var(--ag-space-4xl); } .filters { display: flex; flex-wrap: wrap; gap: var(--ag-space-2xs); align-items: center; margin-bottom: var(--ag-space-2xl); padding-bottom: var(--ag-space-lg); border-bottom: 1px solid var(--ag-rule-dark); } .patron-card-meta { display: grid; grid-template-columns: 1fr auto; column-gap: var(--ag-space-sm); align-items: end; margin-top: var(--ag-space-lg); } .patron-card-title { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); line-height: var(--ag-leading-none); color: var(--ag-paper); text-transform: uppercase; letter-spacing: var(--ag-tracking-wide); } /* Cream-on-dark was this rule's only color, written for the .band-dark carousel (patrons-selection.php) content-product.php first shipped in. The same card also renders on the light catalogue/hub grids, where that cream at 60% opacity on paper was near-illegible (anomalie Alice du 2026-08-16, point 9); .band-dark below restores it for the dark band. */ .patron-card-type { margin-top: var(--ag-space-2xs); font-family: var(--ag-font-display); font-size: var(--ag-text-sm); font-style: italic; color: var(--ag-ink-soft); } .band-dark .patron-card-type { color: rgb(244 238 224 / 60%); } .patron-card-price { font-family: var(--ag-font-mono); font-size: var(--ag-text-lg); color: var(--ag-ink-soft); white-space: nowrap; } .patron-card-chips { display: flex; gap: var(--ag-space-2xs); margin-top: var(--ag-space-sm); } /* Dark-band price keeps the white text; light-bg catalog card (below) uses the default --ag-ink-soft set on .patron-card-price above. */ .band-dark .patron-card-price { color: var(--ag-paper); } /* Sur une landing, le fil d'Ariane ouvre la page et pose déjà l'espace du haut : le header n'a plus à le poser une seconde fois. Même geste que la fiche patron, où .fiche-hero se resserre sous le fil d'Ariane. */ .patron-landing-page .patron-catalog__header { padding-top: var(--ag-space-lg); } /* The count-and-reset aside that answered the title from the other column is gone, and so is the eyebrow above it: the title now runs alone. */ .patron-catalog__header-grid { display: grid; grid-template-columns: minmax(0, 1fr); } /* La maquette pose 132px (styles.css:2367), dessinés pour « Patrons de tricot » — trois mots. Le titre réel monte à 45 caractères sur une landing (« Patrons de bonnets et petits projets au tricot »), que ce corps casse en quatre ou cinq lignes avant même la grille. Ramené sur l'échelle du thème : display-l ici, display-m sur les landings, dont les H1 sont les plus longs du site parce qu'ils portent la requête. */ .patron-catalog__title { margin: 0; font-size: var(--ag-text-display-l); line-height: var(--ag-leading-none); letter-spacing: var(--ag-tracking-tight); } .patron-landing-page .patron-catalog__title { font-size: var(--ag-text-display-m); } /* Le mot distinctif du titre — « tricot » sur le hub, la facette sur une landing. Seul emploi de l'accent dans cette vue, cf. DESIGN.md. */ .patron-catalog__title em { color: var(--ag-accent); letter-spacing: var(--ag-tracking-snug); } /* Le texte passe sous la grille et court sur toute la largeur du contenu : il prolonge le titre au lieu de lui répondre depuis l'autre bord. Le `56ch` de `.lede` est donc levé ici — c'est la seule position du site où la mesure est volontairement large. */ .patron-catalog__lede { max-width: none; margin-top: var(--ag-space-lg); } /* Le texte SEO d'une landing fait deux paragraphes là où le catalogue tient en une phrase : au corps `lede` (jusqu'à 22px) il pèse autant que le titre. Il redescend au corps de lecture. */ .patron-landing-page .patron-catalog__lede { font-size: var(--ag-text-base); } .patron-catalog__lede p + p { margin-top: var(--ag-space-sm); } /* --- Sticky filter bar --- */ .patron-catalog__filterbar { position: sticky; z-index: var(--ag-z-sticky); top: 110px; /* sits under the fixed nav — intentional one-off */ padding: var(--ag-space-lg) 0; border-top: 1px solid var(--ag-rule); border-bottom: 1px solid var(--ag-rule); background: color-mix(in srgb, var(--ag-paper-deep) 35%, var(--ag-paper)); backdrop-filter: blur(10px); } /* Two main columns: Niveau + Technique on the left, Type de vêtement + Public on the right. Columns size to their content and spread apart so the chip rows are not artificially squeezed into a 50% track. */ .patron-catalog__filters { display: grid; grid-template-columns: auto auto; gap: var(--ag-space-sm) var(--ag-space-2xl); justify-content: space-between; } /* Each main column is its own label|chips sub-grid; the filter rows use display:contents so their label and chips align across the two rows. The chips track prefers one line (max-content) but may shrink and wrap when the viewport is tight. */ .patron-catalog__filter-col { display: grid; grid-template-columns: max-content minmax(0, max-content); gap: var(--ag-space-sm) var(--ag-space-md); align-content: start; align-items: center; } .patron-catalog__filter-row { display: contents; } .patron-catalog__filter-label { font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } .patron-catalog__filter-chips { display: flex; flex-wrap: wrap; gap: var(--ag-space-2xs); } /* --- Desktop facet pastilles + band --- One pill per axis; opening one drops a full-width band under the row of pills rather than a floating menu. Nothing overlays the grid, so there is no shadow to dose, no z-index to lose and no menu running off the bottom of the viewport — and it repeats the gesture of the header's mega-menu. Unlike the mobile sheet below, this layout hangs on no JS flag: keying it on a class patron-filters.js adds meant the expanded grid painted first and then visibly collapsed into pastilles, since that file is deferred. Plain CSS is the only presentation that costs nothing at first paint. The deferred script is left with the opening and closing alone. */ .patron-catalog__filter-toggle { display: none; /* the sheet carries the labels under 900px */ } /* The wrapper is the band; under 900px it must not exist as a box, or it would nest the sheet's label and chips one level deeper than its own layout expects. */ .patron-catalog__filter-drawer { display: contents; } /* The sheet already ends on « Tout effacer » — a second reset inside it would be the same link twice. */ .patron-catalog__filter-reset { display: none; } /* --- Compact filter bar + bottom sheet --- Every control below belongs to the mobile presentation and stays out of the flow until the `scripting: enabled` regime claims them: with no script the panel is the expanded grid itself, and a « Filtrer » button would open nothing. Laid out under `width <= 900px` further down. */ .patron-catalog__filterbar-compact, .patron-catalog__filter-actives, .patron-catalog__filter-scrim, .patron-catalog__filter-panel-head, .patron-catalog__filter-panel-foot { display: none; } body.ag-filter-lock { overflow: hidden; } /* --- Footer note --- */ .patron-catalog__footer { display: flex; flex-wrap: wrap; gap: var(--ag-space-sm); align-items: center; justify-content: space-between; margin-top: var(--ag-space-4xl); padding: var(--ag-space-2xl) 0; border-top: 1px solid var(--ag-rule); } /* --- Grid: symmetric top spacing below the filter bar --- */ .patron-catalog__grid { margin-top: var(--ag-space-2xl); } /* --- Filter chip (pill selector) --- Distinct from .chip: body-weight, sentence-case, larger hit area. Reusable wherever a pill-style filter control is needed. */ .filter-chip { cursor: pointer; padding: 9px 18px; /* generous hit area — pill control */ border: 1px solid var(--ag-rule-strong); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); line-height: var(--ag-leading-snug); color: var(--ag-ink); background: transparent; transition: color var(--ag-dur-base) ease, border-color var(--ag-dur-base) ease, background var(--ag-dur-base) ease, transform var(--ag-dur-base) ease; } .filter-chip:hover { transform: translateY(-1px); border-color: var(--ag-ink); } .filter-chip--active { border-color: var(--ag-ink); color: var(--ag-paper); background: var(--ag-ink); } /* --- Catalog product card (light bg) --- New BEM elements on the existing .patron-card block. The dark-band card in patrons-selection.php uses the older .patron-card-* element classes. */ .patron-card__photo { position: relative; margin-bottom: var(--ag-space-lg); } /* Square slot: patron photos are uploaded 1:1 (1000x1000). A 4/5 slot with object-fit: cover silently cropped ~20% off the top and bottom of every card. Keep this in sync with the source aspect ratio. */ .patron-card__photo .slot { aspect-ratio: 1/1; width: 100%; } .patron-card__num { position: absolute; right: 16px; /* image-corner offsets — mockup */ bottom: 14px; padding: var(--ag-space-3xs) 9px; /* 9px corner-pill inline padding — intentional one-off */ border-radius: var(--ag-radius-sm); font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-paper); letter-spacing: var(--ag-tracking-eyebrow); background: color-mix(in srgb, var(--ag-deep-navy) 60%, transparent); backdrop-filter: blur(6px); } .patron-card__body { display: flex; flex-direction: column; gap: var(--ag-space-2xs); } .patron-card__row { display: grid; grid-template-columns: 1fr auto; gap: var(--ag-space-sm); align-items: baseline; } .patron-card__name { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-none); text-transform: uppercase; letter-spacing: var(--ag-tracking-snug); } /* ============================================= YOUTUBE SECTION ============================================= */ .yt-card { position: relative; overflow: hidden; display: block; border-radius: var(--ag-radius-sm); background: #0f1015; } .yt-card .slot { aspect-ratio: 16/9; width: 100%; } /* Le ratio vit sur la carte et pas seulement sur son .slot : l'iframe posée par video-facade.js est en position absolue, elle ne participe donc pas au dimensionnement. Sans cette règle la carte s'effondrerait si le .slot venait à manquer. Ciblé sur [data-video-embed] : toute carte du site est aujourd'hui rendue par ag_youtube_facade(), le sélecteur laisse la porte ouverte à une vignette purement décorative qui garderait son .slot. */ .yt-card[data-video-embed] { aspect-ratio: 16/9; } .yt-card[data-video-embed] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Le lecteur se superpose à la vignette et n'apparaît qu'une fois chargé. Posé visible d'emblée, il montrait le fond #0f1015 de la carte pendant la seconde ou deux que YouTube met à peindre son poster — un rectangle noir en plein article. La vignette reste dessous et tient la place jusque-là. */ .yt-card__player { opacity: 0; transition: opacity var(--ag-dur-slow) var(--ag-ease); } .yt-card.is-player-ready .yt-card__player { opacity: 1; } /* Le lecteur chargé recouvre la façade, mais recouvrir n'est pas retirer : le bouton et le lien restaient atteignables au clavier alors qu'ils ne font plus rien — une tabulation dans le vide. Le lecteur de YouTube apporte les siens. Le titre et la chaîne, eux, ne sont pas focusables et restent en place : c'est le texte qui entoure le lecteur dans le DOM. Le sélecteur du CTA doit rester aussi armé que celui qui le met en inline-flex plus haut (`.yt-card[data-video-embed] a.yt-card-cta`) : à spécificité moindre, `display: none` était simplement ignoré et le lien restait dans l'ordre de tabulation. */ .yt-card.is-player-ready .yt-card-play, .yt-card[data-video-embed].is-player-ready a.yt-card-cta { display: none; } @media (prefers-reduced-motion: reduce) { .yt-card__player { transition: none; } } /* R3 : le contrôle de lecture est un vrai bouton, il lui faut un focus visible — l'habillage existant ne stylise que :hover. */ .yt-card-play:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; } /* Play button primitive — centered circular play control over video imagery. Size and background are per-use deltas. */ .u-play-button { cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; /* Le reset global ne pose que cursor et font sur `button` : sans cette remise à zéro, une façade rendue par ag_youtube_facade() hérite de la bordure et du padding par défaut du navigateur sur son contrôle. */ padding: 0; border: 0; border-radius: 50%; color: var(--ag-ink); background: var(--ag-paper); transition: background var(--ag-dur-base) ease, transform var(--ag-dur-base) ease; } /* YouTube badge play — la marque rouge officielle rend le contrôle reconnaissable comme lecteur YouTube. Le lecteur intégré de YouTube pose la même vignette (viewBox 67×60, fond #f00, flèche blanche) au cœur d'un carré de 72 px : reproduire ces mêmes constantes évite qu'un visiteur habitué au vrai lecteur hésite sur ce qu'il regarde. */ .yt-card-play { --yt-brand-red: #f00; --yt-brand-red-pressed: #c00; --yt-brand-arrow: #fff; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 72px; height: 72px; padding: 0; border: 0; background: transparent; transition: transform var(--ag-dur-base) ease; } .yt-card-play svg { display: block; width: 100%; height: 100%; } .yt-card-play__bg { fill: var(--yt-brand-red); transition: fill var(--ag-dur-base) ease; } .yt-card-play__arrow { fill: var(--yt-brand-arrow); } .yt-card:hover .yt-card-play { transform: translate(-50%, -50%) scale(1.08); } .yt-card:hover .yt-card-play__bg { fill: var(--yt-brand-red-pressed); } .yt-card-play.yt-card-play-sm { width: 56px; height: 56px; } /* Top overlay et CTA « Regarder sur YouTube » — l'habillage du vrai lecteur. Rendus derrière le bouton central (z-index) mais devant l'aperçu, et `pointer-events: none` sur l'entête pour que le clic sur la zone du titre retombe sur la carte et lance la lecture — sauf sur l'ancre YouTube elle-même, qui reste cliquable (voir video-facade.js). */ /* * `.yt-card-header` reste en block (pas flex) : un enfant flex voit son * `display: -webkit-box` "blockifié" par le moteur, qui le remplace par * `flow-root`. Sans `-webkit-box`, `-webkit-line-clamp` n'a plus d'effet * et le titre restait à la première ligne écrasée en une seule. */ .yt-card-header { pointer-events: none; position: absolute; top: 0; right: 0; left: 0; padding: 12px 16px 24px; color: var(--ag-paper); background: linear-gradient( to bottom, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 36%) 50%, rgb(0 0 0 / 0%) 100% ); } .yt-card-header__title { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* Standard property not yet Baseline in Aug 2026, but pairing it with the -webkit- form keeps the IDE's vendorPrefix diagnostic quiet and future- proofs the rule the day it lands. */ /* stylelint-disable-next-line plugin/use-baseline */ line-clamp: 2; font-family: var(--ag-font-body); font-size: var(--ag-text-md); font-weight: var(--ag-weight-semibold, 600); line-height: var(--ag-leading-snug); text-shadow: 0 1px 4px rgb(0 0 0 / 60%); } .yt-card-header__channel { margin-top: 2px; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: rgb(255 255 255 / 85%); text-shadow: 0 1px 4px rgb(0 0 0 / 60%); } /* * Le CTA vit dans le flux de l'article, donc sous la règle prose qui teinte * toute ancre en `--ag-accent-deep` avec un liseré rose. Gagner en * spécificité ne suffit pas : la règle prose porte `:not(…, .btn)`, ce qui * la remonte elle aussi à (0,3,1) — à égalité, l'ordre source la fait * gagner, et le CTA relisait en rose souligné. `.yt-card-cta` est donc * exclu du `:not()` de la règle prose (comme `.btn`) : c'est un bouton * posé sur la vignette, pas un lien de texte. */ .yt-card[data-video-embed] a.yt-card-cta { position: absolute; right: 12px; bottom: 12px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 0; border-radius: 999px; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); color: var(--ag-paper); text-decoration: none; text-shadow: 0 1px 4px rgb(0 0 0 / 60%); background: rgb(0 0 0 / 60%); backdrop-filter: blur(6px); transition: background var(--ag-dur-base) ease; } .yt-card[data-video-embed] a.yt-card-cta:hover, .yt-card[data-video-embed] a.yt-card-cta:focus-visible { color: var(--ag-paper); background: rgb(0 0 0 / 80%); } .yt-card-cta__brand { display: inline-flex; gap: 4px; align-items: center; font-weight: var(--ag-weight-bold, 700); } .yt-card-cta__brand-mark { display: block; width: 32px; height: auto; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 40%)); } .yt-card-cta__brand-bg { fill: var(--ag-paper); } .yt-card-cta__brand-word { letter-spacing: var(--ag-tracking-snug, -0.01em); } /* Habillage lecteur sur une vignette secondaire (~440×248 sur l'accueil) : aux tailles pleines, entête et CTA mangeaient la moitié de l'aperçu et se rejoignaient au milieu. Le titre tombe à une ligne — deux lignes de 18 px plus la signature couvraient le tiers haut de la vignette. */ .yt-card-compact .yt-card-header { padding: 8px 12px 20px; } .yt-card-compact .yt-card-header__title { -webkit-line-clamp: 1; /* stylelint-disable-next-line plugin/use-baseline */ line-clamp: 1; font-size: var(--ag-text-sm); } .yt-card-compact .yt-card-header__channel { font-size: var(--ag-text-xs); } .yt-card[data-video-embed].yt-card-compact a.yt-card-cta { right: 8px; bottom: 8px; padding: 5px 10px; font-size: var(--ag-text-xs); } .yt-card-compact .yt-card-cta__brand-mark { width: 24px; } .yt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ag-space-md); } .yt-col-right { display: flex; flex-direction: column; gap: var(--ag-space-md); } /* ============================================= LIVRE / BOOK ============================================= */ .livre-stats { display: flex; flex-wrap: wrap; gap: var(--ag-space-3xl); align-items: baseline; padding-top: var(--ag-space-xl); border-top: 1px solid var(--ag-rule); } .livre-stat-number { font-family: var(--ag-font-display); font-size: var(--ag-text-huge); line-height: var(--ag-leading-none); color: var(--ag-ink); } .livre-cover-wrap { position: relative; } .livre-cover-accent { position: absolute; z-index: 0; inset: 8% -6% 8% 14%; border-radius: var(--ag-radius-sm); background: var(--ag-blue-ice); } .livre-cover-wrap img { position: relative; z-index: var(--ag-z-raised); width: 100%; height: auto; border-radius: var(--ag-radius-sm); box-shadow: var(--ag-shadow-lg); } .blue-ice-card { display: flex; flex-direction: column; gap: var(--ag-space-md); height: 100%; padding: clamp(32px, 3.6vw, 56px); border-radius: var(--ag-radius-md); background: var(--ag-blue-ice); } /* ============================================= PREUVES SOCIALES / TESTIMONIALS ============================================= */ /* Preuves grid — .grid-auto (3->2->1) + bottom spacing */ .preuves-grid { margin-bottom: var(--ag-space-2xl); } .preuve-card { margin: 0; } .preuve-photo { position: relative; } /* Preuve number — dark pill (primitive default), top-right */ .preuve-num { top: 14px; right: 14px; } .preuve-quote { margin: var(--ag-space-md) 0 var(--ag-space-xs); font-family: var(--ag-font-display); font-size: var(--ag-text-md); font-style: italic; line-height: var(--ag-leading-base); color: var(--ag-ink); } .preuve-credit { display: flex; flex-direction: column; gap: var(--ag-space-3xs); } .preuve-name { font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); color: var(--ag-ink); } .preuve-meta { font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: var(--ag-tracking-label); } .preuves-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--ag-space-2xs); margin-top: 0; } .preuves-strip .slot { aspect-ratio: 1/1; border-radius: var(--ag-radius-sm); } .preuves-more { display: flex; flex-direction: column; gap: var(--ag-space-2xs); align-items: center; justify-content: center; border-radius: var(--ag-radius-sm); color: var(--ag-ink); text-decoration: none; background: var(--ag-blue-ice); transition: background var(--ag-dur-base); } .preuves-more:hover { background: var(--ag-mint); } .preuves-more-num { font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); line-height: var(--ag-leading-none); } .preuves-more-label { font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-align: center; text-transform: uppercase; letter-spacing: var(--ag-tracking-eyebrow); } /* ============================================= JOURNAL / QUERY LOOP POSTS ============================================= */ /* Journal grid — .grid-auto with a wider gap */ .journal-grid { --grid-gap: var(--ag-space-2xl); } .journal-post-image .slot { aspect-ratio: 16/9; } .journal-post-meta { display: flex; flex-wrap: wrap; gap: var(--ag-space-2xs); align-items: center; } .journal-post-title { margin: var(--ag-space-xs) 0 0; font-family: var(--ag-font-display); font-size: var(--ag-text-xxl); line-height: var(--ag-leading-snug); color: var(--ag-ink); transition: color var(--ag-dur-base) var(--ag-ease); } /* ============================================= FOOTER ============================================= */ .ag-footer { padding: 96px 0 var(--ag-space-2xl); /* 96px top: intentional footer offset, off the snap scale */ color: var(--ag-cream); background: var(--ag-deep-navy); } /* --- Newsletter block ------------------------------------------------ */ /* * !important on the block-rhythm margins below is required for the same * reason as the button section (KTD-2): the footer's top-level rows are * direct children of flow-layout group blocks, and WordPress emits * `:where(.is-layout-flow) > * { margin-block-start: ; * margin-block-end: 0 }` UNLAYERED — which outranks any @layer rule * whatever its specificity. Without it every row collapses to the generic * 24px block gap and the footer loses its vertical composition. */ .footer-news { margin-block: 0 var(--ag-space-4xl) !important; } /* L'écran mot de passe oublié/réinitialisation n'a rien à voir avec la newsletter, et l'inscription y détourne l'attention d'un geste déjà technique (anomalie Alice du 2026-08-14, point 8). */ .compte-page--no-newsletter .footer-news { display: none; } /* 7fr/5fr rather than a symmetric split: the left column carries a display heading that needs the extra measure, the right one a single form row. */ .footer-news-top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--ag-space-4xl); align-items: start; margin-bottom: var(--ag-space-3xl); } .footer-news-eyebrow { margin: 0 0 var(--ag-space-md); } .footer-news-title { max-width: 15ch; margin: 0 0 var(--ag-space-xs); color: var(--ag-cream); } .footer-news-subhead { max-width: 34ch; margin: 0; font-size: var(--ag-text-lg); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-tight); color: var(--ag-cream); } .footer-news-form-col { display: flex; flex-direction: column; align-items: flex-start; } .footer-news-announce { margin: 0 0 var(--ag-space-2xs); font-size: var(--ag-text-xl); font-weight: var(--ag-weight-semibold); color: var(--ag-cream); } .footer-news-proof { max-width: 34ch; margin: 0 0 var(--ag-space-sm); font-size: var(--ag-text-sm); color: color-mix(in srgb, var(--ag-cream) 72%, transparent); } /* In-article newsletter encart (articles 502 and 519, where a native MailPoet block used to sit). Unlike the footer and the Livre page, this surface has no mockup: the reference is what production renders today, so every value below is transcribed from that page — MailPoet's own inline styles for the card and the field, the theme's `.btn.btn-accent` for the button (production already carried those classes on the submit paragraph). Off-scale lengths (33px, 5px, 42px, 44px) are kept raw and named as transcriptions rather than rounded to a token. Two knowing departures, both because production's value comes from MailPoet's own machinery rather than from this site: the title's Cormorant — a Google font MailPoet injected, which leaves with it — becomes the theme's display serif, and its 42px snaps to `--ag-text-huge` (40px) because the linter refuses raw font sizes. */ .ag-inline-news { margin: var(--ag-space-lg) 0 0; padding: 33px; /* transcribed */ border-radius: 5px; /* transcribed */ color: var(--ag-paper); background: var(--ag-deep-navy); } /* Accent on deep-navy, same pairing as the footer's eyebrow. The title's own top margin below supplies the gap, so this one only cancels the default. */ .ag-inline-news-eyebrow { margin: 0; } /* `.display` is deliberately NOT used in the markup: it would also impose its 0.98 leading and negative tracking, where production's title rides a 1.4 leading. Only the family is borrowed. */ .ag-inline-news-title { margin: 42px 0; /* transcribed */ font-family: var(--ag-font-display); font-size: var(--ag-text-huge); line-height: var(--ag-leading-exergue); color: var(--ag-paper); } .ag-inline-news-title em { font-style: italic; } .ag-inline-news-lede { margin: var(--ag-space-sm) 0; font-family: var(--ag-font-body); font-size: var(--ag-text-base); line-height: var(--ag-leading-relaxed); color: var(--ag-paper); } .ag-inline-news-mention { margin: 13px 0; /* transcribed */ font-family: var(--ag-font-body); font-size: var(--ag-text-cap); line-height: var(--ag-leading-exergue); color: var(--ag-paper); } /* Same shrink-to-fit trap as the footer: the plugin's three wrapper divs carry no width of their own. */ .ag-inline-news > [id^="mailerlite-form_"], .ag-inline-news .mailerlite-form, .ag-inline-news .mailerlite-form form { width: 100%; } /* The plugin nests the submit button INSIDE `.mailerlite-form-inputs`, so the 20px production leaves between the field and the button belongs to the field, and the one before the legal mention to the button. Hanging it on the wrapper instead stacks both gaps after the button. */ .ag-inline-news .mailerlite-form-inputs { margin-bottom: 0; } .ag-inline-news .mailerlite-form-field { margin-bottom: var(--ag-space-md); } .ag-inline-news .mailerlite-form-field input { box-sizing: border-box; width: 100%; height: 44px; /* transcribed */ padding: 10px; /* transcribed */ border: 1px solid var(--ag-on-dark); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-paper); background: transparent; } .ag-inline-news .mailerlite-form-field input::placeholder { color: var(--ag-paper); opacity: 1; } .ag-inline-news .mailerlite-form-field input:focus-visible { border-color: var(--ag-paper); outline: none; } /* Hidden until the plugin's script reveals them inline — the plugin stylesheet that used to do this is dequeued. */ .ag-inline-news .mailerlite-form-loader, .ag-inline-news .mailerlite-form-response { display: none; } /* The label is the field's accessible name; production shows none. */ .ag-inline-news .mailerlite-form-field label { position: absolute; overflow: hidden; width: 1px; height: 1px; white-space: nowrap; clip-path: inset(50%); } .ag-inline-news .mailerlite-form-description:empty { display: none; } /* Mirrors `.btn.btn-accent` — the plugin's button markup can't carry those classes, so the same tokens are read here rather than re-invented. */ .ag-inline-news .mailerlite-subscribe-submit { display: inline-flex; align-items: center; justify-content: center; height: 44px; /* transcribed */ margin-bottom: var(--ag-space-md); padding: 0 var(--ag-space-lg); border: 1px solid var(--ag-accent); border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); color: var(--ag-paper); letter-spacing: var(--ag-tracking-wide); background: var(--ag-accent); cursor: pointer; transition: background var(--ag-dur-base) ease, border-color var(--ag-dur-base) ease; } .ag-inline-news .mailerlite-subscribe-submit:hover { border-color: var(--ag-accent-deep); background: var(--ag-accent-deep); } .ag-inline-news .mailerlite-form-response h4 { margin: 0; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-normal); line-height: var(--ag-leading-base); color: var(--ag-paper); } .ag-inline-news .mailerlite-form-error { margin-top: var(--ag-space-3xs); font-family: var(--ag-font-body); font-size: var(--ag-text-xs); color: var(--ag-paper); } /* Below 500px production flattens EVERY paragraph of the encart to 16px — MailPoet's own mobile stylesheet — so the title comes out the same size as the body copy and reads as a stray line rather than a heading. That is a defect of the plugin being replaced, not a design decision, so it is not reproduced: the title steps down the type scale instead, and only production's full-width button is kept. Flagged for Alice. */ @media (width <= 560px) { .ag-inline-news { padding: var(--ag-space-lg); } .ag-inline-news-title { margin: var(--ag-space-lg) 0; font-size: var(--ag-text-xxl); } .ag-inline-news .mailerlite-subscribe-button-container, .ag-inline-news .mailerlite-subscribe-submit { width: 100%; } .ag-inline-news .mailerlite-subscribe-submit { justify-content: center; } } /* The plugin wraps its form in three unstyled divs. `.footer-news-form-col` is a column flex container with `align-items: flex-start`, so each of them shrinks to fit its content and the pill's `max-width` below never gets a chance to apply — the field came out 86px narrower than the design. The old theme markup put the form directly in the column, which is why this rule had no reason to exist before. */ .footer-news-form-col > [id^="mailerlite-form_"], .footer-news-form-col .mailerlite-form, .footer-news-form-col .mailerlite-form form { width: 100%; } /* Pill-in-pill: the submit button nests inside the field's own border, so the padding here is the visual gap between the two radii. The markup is the MailerLite plugin's, not the theme's — hence the `.mailerlite-*` hooks. Its own stylesheet only sets margins and a centred button, all overridden here; the rules live in the theme's sheet so a plugin update can't wipe them. */ .footer-news-form-col .mailerlite-form-inputs { display: flex; align-items: stretch; width: 100%; max-width: 420px; margin-bottom: var(--ag-space-xs); padding: var(--ag-space-3xs); border: 1px solid var(--ag-rule-dark); border-radius: var(--ag-radius-pill); } .footer-news-form-col .mailerlite-form-field input { flex: 1; width: 100%; min-width: 0; padding: var(--ag-space-xs) var(--ag-space-md); border: none; font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-cream); background: transparent; outline: none; } .footer-news-form-col .mailerlite-form-field input::placeholder { color: var(--ag-on-dark); } .footer-news-form-col .mailerlite-subscribe-submit { padding: var(--ag-space-xs) 18px; border: none; border-radius: var(--ag-radius-pill); font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); color: var(--ag-paper); white-space: nowrap; background: var(--ag-accent); transition: color var(--ag-dur-base) var(--ag-ease), background var(--ag-dur-base) var(--ag-ease); } .footer-news-form-col .mailerlite-subscribe-submit:hover { color: var(--ag-deep-navy); background: var(--ag-paper); } /* The plugin renders a visible