/* ===================================================================== Harvey Financial Services — global styles Only what theme.json cannot express. Design tokens come from theme.json (var(--wp--preset--*) / var(--wp--custom--*)). ===================================================================== */ :root { --hf-ease: var(--wp--custom--ease, cubic-bezier(0.16, 1, 0.3, 1)); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* --------------------------------------------------------------------- BUTTONS — base motion + the four design variants Default (mint "green" pill) colors come from theme.json elements.button. --------------------------------------------------------------------- */ .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; /* Transparent border so solid + outline buttons share the same box height */ border: 2px solid transparent; transition: transform 0.4s var(--hf-ease), background-color 0.4s var(--hf-ease), color 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); box-shadow: 0 4px 16px rgba(0, 117, 73, 0.22); } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 40, 24, 0.4); } /* Amber */ .wp-block-button.is-style-amber .wp-block-button__link { background-color: var(--wp--preset--color--amber); color: #fff; box-shadow: 0 4px 16px rgba(245, 158, 11, 0.32); } .wp-block-button.is-style-amber .wp-block-button__link:hover { background-color: var(--wp--preset--color--amber-dark); box-shadow: 0 8px 32px rgba(245, 158, 11, 0.42); } /* Outline (dark) */ .wp-block-button.is-style-outline-dark .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--green-dark); border: 2px solid var(--wp--preset--color--green-dark); box-shadow: none; } .wp-block-button.is-style-outline-dark .wp-block-button__link:hover { background-color: var(--wp--preset--color--green-dark); color: #fff; } /* Outline (white) — for dark backgrounds */ .wp-block-button.is-style-outline-white .wp-block-button__link { background-color: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: none; } .wp-block-button.is-style-outline-white .wp-block-button__link:hover { background-color: rgba(255, 255, 255, 0.15); border-color: #fff; } /* --------------------------------------------------------------------- HEADER — fixed, frosted backdrop, overlaying the hero The header template part group carries the .site-header class. Templates add top padding (hero 8rem, inner pages 7rem) to clear it. --------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; box-shadow: 0 4px 32px rgba(30, 42, 46, 0.06); transition: box-shadow 0.4s var(--hf-ease), background-color 0.4s var(--hf-ease); } /* Frosted bar via ::before — keeping backdrop-filter on .site-header itself would make it a containing block and trap the fixed mobile overlay inside the bar (it would only be as tall as the header). */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(244, 244, 240, 0.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } /* Offset the fixed header below the WordPress admin bar for logged-in users. On desktop the admin bar is fixed, so offset by its 32px height. On mobile (<=782px) the admin bar is position:absolute and scrolls away — offsetting would leave a gap above the fixed header on scroll, so keep it at 0. */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 0; } } /* Brand & accreditation images: fixed size, never rounded. Scoped to the image classes (NOT under .site-header/.site-footer) so the block editor — where the template-part wrapper class is absent — matches the front end. */ .hf-logo, .hf-footer-logo { margin: 0; } .hf-logo img, .hf-footer-logo img, .hf-bccpa img { border-radius: 0; } .hf-logo img { height: 52px; width: auto; transition: opacity 0.3s; } .hf-logo a:hover img { opacity: 0.75; } /* Desktop nav link hover */ .site-header .wp-block-navigation .wp-block-navigation-item__content { padding: 0.25rem 0; transition: color 0.3s; } .site-header .wp-block-navigation a:hover, .site-header .wp-block-navigation a:focus { color: var(--wp--preset--color--green); } /* --------------------------------------------------------------------- LANGUAGE SWITCH — FR/EN toggle (harvey-financial/lang-switch block) Designed to be slot-in adjacent to a navigation block in the header and inside the footer's social-row. The visible switch is a tiny pill-shaped track with a moving thumb; the surrounding labels show the two locales, and the link href takes the user to the same page in the other language (via Polylang). --------------------------------------------------------------------- */ .hf-lang-switch { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--wp--preset--font-family--body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: var(--wp--preset--color--slate); text-decoration: none; cursor: pointer; user-select: none; transition: color 0.3s var(--hf-ease); } .hf-lang-switch:hover, .hf-lang-switch:focus { color: var(--wp--preset--color--green); } .hf-lang-switch-track { position: relative; box-sizing: border-box; width: 38px; height: 20px; border: 1.5px solid currentColor; border-radius: 999px; flex-shrink: 0; } /* Thumb centred via top: 50% + translateY(-50%) so it always sits in the middle of the track regardless of track height (mobile uses a bigger track than desktop). The "EN" slide combines the Y centring with a horizontal translate. */ .hf-lang-switch-thumb { position: absolute; top: 50%; left: 2px; width: 13px; height: 13px; background: currentColor; border-radius: 50%; transform: translateY(-50%); transition: transform 0.3s var(--hf-ease); } .hf-lang-switch[data-current="en"] .hf-lang-switch-thumb { transform: translate(18px, -50%); } /* Footer variant — translucent white on the dark panel, smaller text. */ .hf-footer .hf-lang-switch, .hf-lang-switch-footer { color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; } .hf-footer .hf-lang-switch:hover, .hf-footer .hf-lang-switch:focus, .hf-lang-switch-footer:hover, .hf-lang-switch-footer:focus { color: var(--wp--preset--color--mint); } /* Footer social row: social-links + lang-switch on one line. */ .hf-footer-social-row { align-items: center; } /* Inside the mobile overlay menu, scale the switch up so it reads at the same visual weight as the heading-font menu items above it. The wrapping is treated as a "menu item" by the overlay's flex layout, so we just bump the font/track sizes within the overlay. */ .site-header .wp-block-navigation__responsive-container.is-menu-open .hf-lang-switch { font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; font-weight: 500; color: #fff; gap: 1rem; } .site-header .wp-block-navigation__responsive-container.is-menu-open .hf-lang-switch-track { width: 56px; height: 30px; } .site-header .wp-block-navigation__responsive-container.is-menu-open .hf-lang-switch-thumb { width: 22px; height: 22px; /* `top` + `transform` inherited from the base rule keep this vertically centred without needing a magic offset. */ } .site-header .wp-block-navigation__responsive-container.is-menu-open .hf-lang-switch[data-current="en"] .hf-lang-switch-thumb { transform: translate(27px, -50%); } .site-header .wp-block-navigation .current-menu-item > a, .site-header .wp-block-navigation .current-menu-parent > a, .site-header .wp-block-navigation .current_page_item > a, .site-header .wp-block-navigation a[aria-current="page"], .site-header .wp-block-navigation a.current-menu-item { color: var(--wp--preset--color--green); font-weight: 600; } /* Mobile overlay menu — dark-card gradient (matches the .hf-dark-card green-dark → charcoal sweep used on the home page service card). */ .site-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--green-dark); background-image: linear-gradient( 145deg, var(--wp--preset--color--green-dark) 0%, var(--wp--preset--color--charcoal) 100% ); } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; font-weight: 500; color: #fff; } .site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--green-dark); } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; /* Pin to the viewport at the hamburger's exact spot (top 28, right padding) */ position: fixed; top: 28px; right: clamp(1.25rem, 4vw, 3rem); } /* Open overlay covers the full viewport, above the header bar content */ .site-header .wp-block-navigation__responsive-container.is-menu-open { z-index: 200; min-height: 100vh; } /* While the menu is open, lift the whole header above the admin bar (z-index 99999) so the full-screen overlay — and its close button — are not covered by it for logged-in users. */ .site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { z-index: 100000; } /* Contactez-nous: a header button on desktop, an amber button in the mobile overlay (the nav's mobile breakpoint is 600px). */ @media (max-width: 599.98px) { .site-header .hf-cta-desktop { display: none; } } @media (min-width: 600px) { .wp-block-navigation-item.hf-cta-mobile { display: none; } } .wp-block-navigation__responsive-container.is-menu-open .hf-cta-mobile { margin-top: 1.5rem; } /* High specificity (incl. the content class) so core's overlay padding reset doesn't strip the button's horizontal padding. */ .site-header .wp-block-navigation__responsive-container.is-menu-open .hf-cta-mobile a.wp-block-navigation-item__content { background-color: var(--wp--preset--color--mint); color: var(--wp--preset--color--green-dark); font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 900; padding: 0.85rem 2.75rem; border-radius: 60px; } /* Tighter hero stats gap on mobile (higher specificity than the block's layout gap rule) */ @media (max-width: 781px) { .hf-hero .hf-stats { gap: 1.5rem; } } /* --------------------------------------------------------------------- FOOTER — dark green panel The dark background + text colors are scoped to .hf-footer (the footer pattern's own group, which also sets backgroundColor: green-deep), so the editor matches the front end where the .site-footer template-part wrapper is absent. .site-footer keeps the background as a front-end full-bleed safety behind the alignfull group. --------------------------------------------------------------------- */ .site-footer, .hf-footer { background-color: var(--wp--preset--color--green-deep); } .hf-footer, .hf-footer p, .hf-footer li { color: rgba(255, 255, 255, 0.6); } .hf-footer a { color: rgba(255, 255, 255, 0.6); transition: color 0.3s; } .hf-footer a:hover { color: rgba(255, 255, 255, 0.9); } .hf-footer-desc { max-width: 300px; } .hf-footer-logo img { height: 44px; width: auto; } .hf-bccpa { opacity: 0.85; } .hf-bccpa img { width: 160px; height: auto; } /* Block-gap restorations: the global default block gap is 0, so re-add vertical spacing where stacked content relies on it. */ .hf-footer .wp-block-column > * + * { margin-block-start: 1.5rem; } .hf-footer .footer-bottom { gap: 1rem; } .wp-block-post-content > * + * { margin-block-start: 1.5rem; } /* Footer social icons → subtle circles that fill green on hover */ .hf-footer .wp-block-social-link { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); transition: background-color 0.3s, color 0.3s; } .hf-footer .wp-block-social-link:hover { background: var(--wp--preset--color--green); color: #fff; } /* Footer bottom bar separator */ .hf-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); } .hf-footer .footer-bottom p, .hf-footer .footer-bottom a { font-size: 0.78rem; font-weight: 400; color: rgba(255, 255, 255, 0.3); } .hf-footer .footer-bottom a:hover { color: rgba(255, 255, 255, 0.7); } /* Footer legal navigation links (the wp:navigation cascade needs a more specific selector than a plain .footer-bottom a) */ .hf-footer .footer-bottom .wp-block-navigation, .hf-footer .footer-bottom .wp-block-navigation a, .hf-footer .footer-bottom .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.3); font-weight: 400; } .hf-footer .footer-bottom .wp-block-navigation a:hover, .hf-footer .footer-bottom .wp-block-navigation-item__content:hover { color: rgba(255, 255, 255, 0.7); } /* ===================================================================== HOME PAGE SECTIONS Content is core blocks; this layer carries the section visuals. ===================================================================== */ /* Shared section header + labels --------------------------------------- */ .hf-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--amber); letter-spacing: 0.14em; text-transform: uppercase; } .hf-label::before { content: "+"; font-size: 1rem; font-weight: 800; color: var(--wp--preset--color--green); line-height: 1; } /* Editor-selectable eyebrow symbol (block style variations) */ .hf-label.is-style-eyebrow-plus::before { content: "+"; } .hf-label.is-style-eyebrow-minus::before { content: "\2212"; /* − minus sign */ } .hf-label.is-style-eyebrow-times::before { content: "\00D7"; /* × multiplication sign */ } .hf-label.is-style-eyebrow-equals::before { content: "="; } .hf-label-light { color: var(--wp--preset--color--amber-light); } .hf-label-light::before { color: rgba(255, 255, 255, 0.5); } .hf-section-header { text-align: center; } .hf-section-header .hf-label { justify-content: center; } /* An eyebrow set to centered (e.g. the CTA) — inline-flex won't self-center via text-align, so make it a full-width flex and center its content. */ .hf-label.has-text-align-center { display: flex; justify-content: center; } .hf-section-title { color: var(--wp--preset--color--green-dark); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: break-word; } .hf-section-desc { font-size: 1.05rem; color: var(--wp--preset--color--slate); line-height: 1.7; } .hf-on-dark { color: #fff; } .hf-on-dark-muted { color: rgba(255, 255, 255, 0.65); } /* HERO ------------------------------------------------------------------ */ .hf-hero { position: relative; overflow: hidden; } .hf-hero::before { content: ""; position: absolute; top: -10%; right: -5%; width: 48%; height: 120%; background: var(--wp--preset--color--green); border-radius: 0 0 0 80px; z-index: 0; } .hf-hero::after { content: ""; position: absolute; top: 12%; right: 5%; width: 240px; height: 240px; z-index: 1; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 2px, transparent 2px); background-size: 18px 18px; } .hf-hero > .wp-block-columns { position: relative; z-index: 2; } .hf-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--amber); letter-spacing: 0.14em; text-transform: uppercase; } .hf-badge::before { content: "+"; font-size: 1rem; font-weight: 800; color: var(--wp--preset--color--green); } .hf-hero-title { overflow-wrap: break-word; } .hf-highlight { color: var(--wp--preset--color--green); position: relative; } .hf-highlight::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 8px; background: var(--wp--preset--color--amber-light); opacity: 0.5; border-radius: 4px; z-index: -1; } .hf-subtitle { color: var(--wp--preset--color--slate); max-width: 34rem; } .hf-stats { gap: 2.5rem; } .hf-stat-value { font-family: var(--wp--preset--font-family--heading); font-size: 2rem; font-weight: 900; color: var(--wp--preset--color--green); line-height: 1; } .hf-stat-label { font-size: 0.8rem; color: var(--wp--preset--color--steel); font-weight: 500; margin: 0; } .hf-hero-photo img { border-radius: 24px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2); border: 4px solid rgba(255, 255, 255, 0.1); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* SERVICE CARDS --------------------------------------------------------- */ .hf-service-card { position: relative; overflow: hidden; height: 100%; transition: transform 0.5s var(--hf-ease), box-shadow 0.5s var(--hf-ease); } .hf-service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(30, 42, 46, 0.12); } .hf-green-card { background: var(--wp--preset--color--green); } .hf-dark-card { background: linear-gradient(145deg, var(--wp--preset--color--green-dark) 0%, var(--wp--preset--color--charcoal) 100%); } .hf-card-icon { line-height: 0; } .hf-card-icon img { width: 56px; height: 56px; border-radius: 0; } .hf-card-num { font-family: var(--wp--preset--font-family--heading); font-size: 6rem; font-weight: 900; line-height: 1; opacity: 0.08; position: absolute; top: -0.5rem; right: 1.5rem; margin: 0; } .hf-card-title { color: #fff; } .hf-card-desc { font-size: 0.95rem; opacity: 0.82; } .hf-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hf-tag { font-size: 0.72rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 60px; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); } .hf-dark-card .hf-tag { background: rgba(245, 158, 11, 0.22); color: var(--wp--preset--color--amber-light); } /* Spacing now comes from the card group's blockGap; no margin override. */ .hf-card-link a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #fff; transition: gap 0.3s var(--hf-ease), color 0.3s var(--hf-ease); } /* Arrow rendered from the provided SVG, tinted to the link color via mask */ .hf-card-link a::after { content: ""; width: 1.15em; height: 1.15em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") no-repeat center / contain; mask: url("data:image/svg+xml,") no-repeat center / contain; } .hf-card-link a:hover { color: var(--wp--preset--color--mint); gap: 0.85rem; } /* HOW IT WORKS ---------------------------------------------------------- */ .hf-howitworks { position: relative; overflow: hidden; } .hf-howitworks::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(113, 226, 140, 0.4) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 10% 0%, rgba(245, 158, 11, 0.18) 0%, transparent 50%); pointer-events: none; } .hf-howitworks > * { position: relative; z-index: 1; } .hf-step-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--wp--custom--radius, 20px); padding: 2rem; height: 100%; transition: background-color 0.4s, transform 0.4s, border-color 0.4s; } .hf-step-card:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .hf-step-num { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 900; } .hf-step-1 { background: var(--wp--preset--color--amber); color: #fff; } .hf-step-2 { background: var(--wp--preset--color--mint); color: #fff; } .hf-step-3 { background: var(--wp--preset--color--amber-pale); color: var(--wp--preset--color--green-dark); } .hf-step-4 { background: #fff; color: var(--wp--preset--color--green); } .hf-step-title { color: #fff; font-size: 1.1rem; font-weight: 700; } .hf-step-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; } /* TESTIMONIALS ---------------------------------------------------------- */ .hf-testimonial-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(199, 185, 165, 0.2); border-radius: var(--wp--custom--radius, 20px); padding: 2.25rem; height: 100%; transition: transform 0.4s, box-shadow 0.4s; } .hf-testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(30, 42, 46, 0.08); } .hf-testimonial-card::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 4px; border-radius: 0 4px 4px 0; } .hf-t-1::before { background: var(--wp--preset--color--green); } .hf-t-2::before { background: var(--wp--preset--color--amber); } .hf-t-3::before { background: var(--wp--preset--color--mint); } .hf-testimonial-card .hf-quote { font-family: var(--wp--preset--font-family--heading); font-size: 3rem; line-height: 1; color: var(--wp--preset--color--green-deep); opacity: 0.8; } .hf-t-text { font-size: 0.95rem; color: var(--wp--preset--color--slate); line-height: 1.75; font-style: italic; } .hf-testimonial-card .hf-t-author { margin-top: auto; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--cloud); } .hf-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 0.8rem; color: #fff; margin: 0; } .hf-t-1 .hf-avatar { background: var(--wp--preset--color--green); } .hf-t-2 .hf-avatar { background: var(--wp--preset--color--amber); } .hf-t-3 .hf-avatar { background: var(--wp--preset--color--mint); } /* Image avatars (when the editor swaps the initials paragraph for an image block) fill the 44px circle and crop to cover. */ .hf-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .hf-t-name { font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--green-dark); margin: 0; } .hf-t-role { font-size: 0.78rem; color: var(--wp--preset--color--steel); margin: 0; } /* ABOUT / TEAM ---------------------------------------------------------- */ .hf-section-title.hf-left { text-align: left; } /* Constrain the about intro paragraph and the feature list */ .hf-about-text .hf-section-desc, .hf-about-text .hf-features { max-width: 560px; } .hf-feature { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #DBF7E2; border-radius: 14px; font-size: 0.9rem; color: var(--wp--preset--color--slate); line-height: 1.6; } .hf-feature-icon { flex-shrink: 0; margin: 0; line-height: 0; } .hf-feature-icon img { width: 40px; height: 40px; border-radius: 0; } .hf-feature-text { margin: 0; } .hf-feature strong { color: var(--wp--preset--color--green-dark); } .hf-team { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 600px) { .hf-team { flex-direction: row; } } /* Cards share the same top — clear the block-gap margin the column flow layout adds to the second card */ .hf-team > .hf-team-card { margin-block-start: 0; margin-top: 0; } .hf-team-card { position: relative; overflow: hidden; border-radius: var(--wp--custom--radius, 20px); padding: 3.5rem 2rem; text-align: center; flex: 1; transition: transform 0.4s, box-shadow 0.4s; } .hf-team-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 40, 24, 0.2); } .hf-team-1 { background: var(--wp--preset--color--green); color: #fff; } .hf-team-2 { background: linear-gradient(145deg, var(--wp--preset--color--green-dark), var(--wp--preset--color--charcoal)); color: #fff; } .hf-team-card::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px); background-size: 16px 16px; pointer-events: none; } .hf-team-card > * { position: relative; z-index: 1; } .hf-team-avatar { width: 150px; margin-left: auto; margin-right: auto; } .hf-team-avatar img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.22); } .hf-team-name { color: #fff; font-size: 28px; } .hf-team-role { font-size: 0.78rem; color: var(--wp--preset--color--amber); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .hf-team-desc { font-size: 1.05rem; line-height: 1.7; opacity: 0.85; margin-left: auto; margin-right: auto; max-width: 22rem; } /* CTA ------------------------------------------------------------------- */ .hf-cta-inner { position: relative; overflow: hidden; } /* "On Dark BG" block style — apply this style on buttons placed inside dark sections (e.g. the CTA) so the hover stays visible (the default hover background green-deep would blend into the section). */ .wp-block-button.is-style-on-dark > .wp-block-button__link:hover, .wp-block-button.is-style-on-dark > .wp-block-button__link:focus { background-color: var(--wp--preset--color--green); color: var(--wp--preset--color--mint); } .hf-cta-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 100%, rgba(0, 117, 73, 0.6) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 20% 0%, rgba(245, 158, 11, 0.3) 0%, transparent 50%); pointer-events: none; } .hf-cta-inner > * { position: relative; z-index: 1; } /* RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 781px) { .hf-hero::before, .hf-hero::after { display: none; } .hf-card-num { font-size: 4.5rem; } } /* ===================================================================== SERVICES OBNL PAGE — visuals only. Spacing (padding / margin / gap) is driven entirely by block settings in patterns/services-obnl.php so the editor mirrors the front end. ===================================================================== */ /* Inner-page hero (short, dark green) ----------------------------------- */ .hf-page-hero { position: relative; overflow: hidden; } .hf-page-hero::before { content: ""; position: absolute; top: 12%; right: 5%; width: 252px; height: 252px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 2px, transparent 2px); background-size: 18px 18px; pointer-events: none; z-index: 0; } .hf-page-hero > .wp-block-columns { position: relative; z-index: 1; } .hf-page-hero .hf-label-light { color: var(--wp--preset--color--mint); } .hf-page-hero .hf-label-light::before { color: inherit; } .hf-page-hero-title { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -0.02em; } .hf-page-hero-title em { font-style: italic; color: var(--wp--preset--color--mint); font-weight: 700; } .hf-page-hero-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 1.15rem; line-height: 1.65; max-width: 580px; } .hf-page-hero-image img { aspect-ratio: 6 / 4; object-fit: cover; border-radius: 24px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25); border: 4px solid rgba(255, 255, 255, 0.1); width: 100%; } @media (max-width: 1023.98px) { .hf-page-hero-image { display: none; } } /* Section title — italic green accent (used on inner pages) */ .hf-section-title em { font-style: italic; color: var(--wp--preset--color--green); font-weight: 700; } /* Service rows (4 alternating illustration + content) ------------------- */ .hf-service-rows { position: relative; overflow: hidden; } /* Each row is a wp:columns; rows 2 & 4 carry .is-reverse so the illustration appears on the right at desktop. We don't use flex-direction: row-reverse because columns wrap on mobile and would reverse the stacked order. Swapping column `order` only at desktop keeps mobile illustration-first regardless. */ @media (min-width: 782px) { .hf-service-row.is-reverse > .wp-block-column:first-child { order: 2; } .hf-service-row.is-reverse > .wp-block-column:last-child { order: 1; } } /* Higher specificity selector (`.wp-block-column.hf-service-illust`) and a min-height safety net so the editor canvas — where `aspect-ratio` can fail to compute a visible height on a flex column with no content in flow — still renders the gradient panel and its absolutely-positioned corner tag, glyph and big number. */ .hf-service-illust, .wp-block-column.hf-service-illust { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 280px; border-radius: var(--wp--custom--radius, 20px); box-shadow: 0 20px 60px rgba(0, 40, 24, 0.12); color: #fff; } .hf-service-illust::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px); background-size: 18px 18px; pointer-events: none; } .hf-illust-green { background: linear-gradient(145deg, var(--wp--preset--color--green) 0%, var(--wp--preset--color--green-dark) 100%); } .hf-illust-dark { background: linear-gradient(145deg, var(--wp--preset--color--green-dark) 0%, var(--wp--preset--color--charcoal) 100%); } .hf-illust-amber { background: linear-gradient(145deg, var(--wp--preset--color--amber) 0%, #b45309 100%); } .hf-illust-mint { background: linear-gradient(145deg, var(--wp--preset--color--mint) 0%, var(--wp--preset--color--green) 100%); color: var(--wp--preset--color--green-deep); } .hf-corner-tag { position: absolute; top: 1.5rem; left: 1.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 60px; background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; margin: 0; } .hf-illust-mint .hf-corner-tag { background: rgba(0, 40, 24, 0.18); color: var(--wp--preset--color--green-deep); } .hf-math-glyph { position: absolute; font-family: var(--wp--preset--font-family--heading); font-weight: 800; opacity: 0.18; pointer-events: none; line-height: 1; z-index: 0; margin: 0; } .hf-math-glyph-tr { top: 1rem; right: 1.5rem; font-size: 7rem; } .hf-math-glyph-br { bottom: 1.5rem; right: 1.5rem; font-size: 6rem; } .hf-math-glyph-amber { color: var(--wp--preset--color--amber); } /* `.hf-big-number` is a wp:paragraph, and theme.json's core/paragraph rule sets line-height: 1.7 with the same specificity as a plain class. Scope under `.hf-service-illust` (0-2-0 specificity) so our 0.85 wins reliably in the editor too, and force nowrap so a narrow column never wraps "01" onto a second line. */ .hf-service-illust .hf-big-number, .hf-big-number { font-family: var(--wp--preset--font-family--heading); font-size: clamp(8rem, 18vw, 13rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; white-space: nowrap; position: absolute; bottom: 2rem; left: 2.5rem; z-index: 1; opacity: 0.95; margin: 0; color: inherit; } /* -------- Editor ornament positioning ------------------------------ */ /* In the editor, each ornament `

` is *itself* the [data-block] element (paragraph blocks merge the wrapper into the

), and WP sets `position: relative` on every `.block-editor-block-list__block`. That `position: relative` wins over my plain `.hf-corner-tag { position: absolute }` because both have the same specificity and the editor stylesheet loads after the theme one. Higher specificity (`.hf-service-illust .hf-corner-tag`) + `width: max-content` forces the rule through and stops the paragraph from claiming the panel's full row. These rules also harmlessly re-apply the same positions on the front end, where the ornaments still need them. */ .hf-service-illust .hf-corner-tag { position: absolute; top: 1.5rem; left: 1.75rem; width: max-content; max-width: max-content; z-index: 2; } .hf-service-illust .hf-math-glyph-tr { position: absolute; top: 1rem; right: 1.5rem; width: max-content; max-width: max-content; z-index: 0; } .hf-service-illust .hf-math-glyph-br { position: absolute; bottom: 1.5rem; right: 1.5rem; width: max-content; max-width: max-content; z-index: 0; } .hf-service-illust .hf-big-number { position: absolute; bottom: 2rem; left: 2.5rem; width: max-content; max-width: max-content; z-index: 1; } /* Force line-height 1 on math-glyph too (same theme.json paragraph 1.7 line-height issue as big-number had). */ .hf-service-illust .hf-math-glyph { line-height: 1; } /* In the editor, math-glyph and big-number live inside an extra wrapper

(block-editor wraps them but doesn't merge classes the way it did for corner-tag). The inner classed

then positions absolutely against the 0-height wrapper instead of the illust panel, which is what made the big number float above the panel and the math glyph land mid-panel. Promote position: absolute onto the wrapper

so it lines up against the panel directly, and reset the inner element back to static so the two don't double-up. These selectors only match in the editor (no nested wrapper on the front end). */ .hf-service-illust > p:has(> .hf-math-glyph-tr) { position: absolute; top: 1rem; right: 1.5rem; width: max-content; max-width: max-content; margin: 0; z-index: 0; } .hf-service-illust > p:has(> .hf-math-glyph-br) { position: absolute; bottom: 1.5rem; right: 1.5rem; width: max-content; max-width: max-content; margin: 0; z-index: 0; } .hf-service-illust > p:has(> .hf-big-number) { position: absolute; bottom: 2rem; left: 2.5rem; width: max-content; max-width: max-content; margin: 0; z-index: 1; } .hf-service-illust > p > .hf-math-glyph, .hf-service-illust > p > .hf-big-number { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } .hf-illust-dark .hf-big-number { color: var(--wp--preset--color--mint); } .hf-service-row-title { color: var(--wp--preset--color--green-dark); font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; } .hf-service-row-title em { font-style: italic; color: var(--wp--preset--color--green); font-weight: 700; } .hf-service-row-desc { font-size: 1.05rem; color: var(--wp--preset--color--slate); line-height: 1.7; max-width: 520px; } /* Check-list (wp:list with .hf-check-list) — flex column with `gap` so the spacing between items is real (blockGap on the wp:list block doesn't reliably produce margin-block-start on flex `

  • ` children when the list-items themselves opt into `display: flex` for the bullet ↔ text layout). */ .hf-check-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.85rem; } .hf-check-list li { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.98rem; color: var(--wp--preset--color--green-deep); line-height: 1.55; margin: 0; } .hf-check-list li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background-color: var(--wp--preset--color--mint); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } /* Other services 3-card grid ------------------------------------------ */ .hf-other-services { position: relative; overflow: hidden; } .hf-other-service-card { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(199, 185, 165, 0.25); border-radius: var(--wp--custom--radius, 20px); transition: transform 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); height: 100%; } .hf-other-service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(30, 42, 46, 0.1); } .hf-other-service-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .hf-other-1::before { background: var(--wp--preset--color--green); } .hf-other-2::before { background: var(--wp--preset--color--amber); } .hf-other-3::before { background: var(--wp--preset--color--mint); } .hf-other-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; line-height: 0; } .hf-other-1 .hf-other-card-icon { background: var(--wp--preset--color--green); } .hf-other-2 .hf-other-card-icon { background: var(--wp--preset--color--amber); } .hf-other-3 .hf-other-card-icon { background: var(--wp--preset--color--mint); } .hf-other-card-icon img { width: 24px; height: 24px; border-radius: 0; } .hf-other-card-title { color: var(--wp--preset--color--green-dark); font-size: 1.4rem; font-weight: 800; line-height: 1.25; } .hf-other-card-desc { font-size: 0.95rem; color: var(--wp--preset--color--slate); line-height: 1.65; } /* Types d'OBNL tiles (grid of 8) -------------------------------------- */ .hf-types-section { position: relative; overflow: hidden; } /* The grid is a wp:group with layout type="grid", columnCount: 4. Force 2 columns below tablet so we always get a clean 2 or 4 layout (auto-fit would land on 3 at some sizes). */ @media (max-width: 767.98px) { .wp-block-group.is-layout-grid.hf-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hf-type-tile { position: relative; overflow: hidden; border-radius: 18px; background: var(--wp--preset--color--green); color: #fff; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); } /* Every other tile is darker (works for both 2-col mobile and 4-col desktop) */ .hf-types-grid > :nth-child(even) > .hf-type-tile, .hf-types-grid > .hf-type-tile:nth-child(even) { background: var(--wp--preset--color--green-dark); } .hf-type-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 40, 24, 0.15); } .hf-type-tile::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px); background-size: 14px 14px; pointer-events: none; } .hf-type-tile > * { position: relative; z-index: 1; } .hf-type-tile-num { font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; font-weight: 800; opacity: 0.7; letter-spacing: 0.04em; margin: 0; } .hf-type-tile-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0; } /* ===================================================================== SERVICES PME PAGE Reuses everything from Services OBNL (page hero, service rows, other services, CTA). Only the dark "Why PME" stats band is new. ===================================================================== */ .hf-why-pme { position: relative; overflow: hidden; } .hf-why-pme::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0, 117, 73, 0.6) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 10% 0%, rgba(245, 158, 11, 0.2) 0%, transparent 50%); pointer-events: none; } .hf-why-pme > .wp-block-columns { position: relative; z-index: 1; } /* Each stat is a translucent card on the dark band. Flex column with an explicit `gap` because the children carry `margin: 0` to neutralise WP block defaults — that margin: 0 would otherwise wipe the blockGap-driven margin-block-start, leaving the value / title / description flush to each other. */ .hf-why-stat { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--wp--custom--radius, 20px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 0.5rem; } .hf-why-stat-value { font-family: var(--wp--preset--font-family--heading); font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--wp--preset--color--mint); letter-spacing: -0.02em; /* Bottom margin (combines with the parent's flex `gap`) so the value has noticeable breathing room before the title — matches what the editor naturally produces from line-height. */ margin: 0 0 0.75rem 0; } .hf-why-stat-2 .hf-why-stat-value { color: var(--wp--preset--color--amber-light); } .hf-why-stat-3 .hf-why-stat-value { color: #fff; } .hf-why-stat-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; } .hf-why-stat-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); line-height: 1.55; margin: 0; } /* ===================================================================== RESSOURCES PAGE Articles grid, downloads list, link cards. Visuals only — spacing driven by block padding / margin / blockGap in patterns/ressources.php. ===================================================================== */ /* Left-aligned section header variant (Ressources sections use it) */ .hf-section-header.hf-left { text-align: left; } .hf-section-header.hf-left .hf-label { justify-content: flex-start; } /* Articles ------------------------------------------------------------ */ .hf-articles-section { position: relative; overflow: hidden; } .hf-article-card { background: #fff; border: 1px solid rgba(199, 185, 165, 0.25); border-radius: var(--wp--custom--radius, 20px); overflow: hidden; height: 100%; /* Vertical flex so the body fills the remaining card height and its own children can push the "Lire la suite" link to the bottom. */ display: flex; flex-direction: column; transition: transform 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); } .hf-article-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(30, 42, 46, 0.1); } .hf-article-thumb { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hf-article-thumb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px); background-size: 14px 14px; pointer-events: none; } /* Cycle gradients + big math glyph by card position (3-card cycle). This means a freshly-added card automatically gets the right colour without any per-post setting — works for both server-rendered and JS-appended cards from the Load more button. */ .hf-articles-grid { list-style: none; padding-left: 0; } .hf-articles-grid > * { list-style: none; margin: 0; } .hf-articles-grid > * > .hf-article-card { height: 100%; } .hf-articles-grid > *:nth-child(3n+1) .hf-article-thumb, .hf-article-thumb.hf-thumb-green { background: linear-gradient(145deg, var(--wp--preset--color--green) 0%, var(--wp--preset--color--green-dark) 100%); } .hf-articles-grid > *:nth-child(3n+2) .hf-article-thumb, .hf-article-thumb.hf-thumb-amber { background: linear-gradient(145deg, var(--wp--preset--color--amber) 0%, #b45309 100%); } .hf-articles-grid > *:nth-child(3n+3) .hf-article-thumb, .hf-article-thumb.hf-thumb-dark { background: linear-gradient(145deg, var(--wp--preset--color--green-dark) 0%, var(--wp--preset--color--charcoal) 100%); } /* Big +/=/× glyph centred on each thumb via ::before. Cycling per nth-child keeps each card's glyph in sync with its gradient. */ .hf-article-thumb::before { content: ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-size: 7rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.95); z-index: 1; pointer-events: none; } .hf-articles-grid > *:nth-child(3n+1) .hf-article-thumb::before { content: "+"; } .hf-articles-grid > *:nth-child(3n+2) .hf-article-thumb::before { content: "="; } .hf-articles-grid > *:nth-child(3n+3) .hf-article-thumb::before { content: "×"; } /* Standalone usage (e.g. static cards on other pages, if any) */ .hf-article-thumb.hf-thumb-green::before { content: "+"; } .hf-article-thumb.hf-thumb-amber::before { content: "="; } .hf-article-thumb.hf-thumb-dark::before { content: "×"; } /* Category tag — works both as a static .hf-article-tag paragraph and as the dynamic wp:post-terms block. */ .hf-article-tag, .wp-block-post-terms.hf-article-tag { position: absolute; top: 1.25rem; left: 1.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 60px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.95); color: var(--wp--preset--color--green-dark); z-index: 2; margin: 0; line-height: 1.2; } .hf-article-tag a { color: inherit; text-decoration: none; } /* Amber tile → amber tag text */ .hf-articles-grid > *:nth-child(3n+2) .hf-article-tag, .hf-articles-grid > *:nth-child(3n+2) .hf-article-tag a, .hf-thumb-amber .hf-article-tag { color: #b45309; } .hf-article-date, .wp-block-post-date.hf-article-date { font-size: 0.78rem; color: var(--wp--preset--color--steel); font-weight: 500; letter-spacing: 0.04em; margin: 0; } .wp-block-post-date.hf-article-date time { color: inherit; } .hf-article-title, .wp-block-post-title.hf-article-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; font-weight: 800; color: var(--wp--preset--color--green-dark); line-height: 1.25; letter-spacing: -0.01em; margin: 0; } .hf-article-title a { color: inherit; text-decoration: none; } .hf-article-title a:hover { color: var(--wp--preset--color--green); } /* Article body is the wp:group below the thumb — flex column so the excerpt can grow and push the link down. `gap` carries the vertical spacing between siblings because each child carries margin:0 (to neutralise WP block defaults), which would otherwise wipe blockGap's margin-block-start. */ .hf-article-body { display: flex; flex-direction: column; flex: 1; gap: 0.65rem; } .hf-article-excerpt, .wp-block-post-excerpt.hf-article-excerpt { font-size: 0.95rem; color: var(--wp--preset--color--slate); line-height: 1.65; /* No margin override — blockGap on the body gives the title→excerpt spacing. flex: 1 makes the excerpt absorb any leftover card height so "Lire la suite" lands at the same baseline across cards. */ flex: 1; margin: 0; } .wp-block-post-excerpt.hf-article-excerpt p { margin: 0; } /* Read-more link — handles both wp:read-more (which IS the ) and the older paragraph-wrapped link. */ .hf-article-link a, a.hf-article-link, a.wp-block-read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--heading); font-size: 0.95rem; font-weight: 800; color: var(--wp--preset--color--green); text-decoration: none; transition: gap 0.3s var(--hf-ease), color 0.3s var(--hf-ease); } .hf-article-link a::after, a.hf-article-link::after, a.wp-block-read-more.hf-article-link::after { content: ""; width: 1em; height: 1em; flex-shrink: 0; background-image: url("data:image/svg+xml,"); background-size: contain; background-repeat: no-repeat; background-position: center; } .hf-article-link a:hover, a.hf-article-link:hover, a.wp-block-read-more:hover { gap: 0.7rem; color: var(--wp--preset--color--green-dark); } /* Downloads ----------------------------------------------------------- */ .hf-downloads-section { position: relative; overflow: hidden; } .hf-download-row { background: #fff; border: 1px solid rgba(199, 185, 165, 0.3); border-radius: 16px; transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease); } .hf-download-row:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(30, 42, 46, 0.08); } .hf-download-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; line-height: 0; } /* The middle "meta" block grows to fill the space between the icon and the button (the parent flex layout justifies to space-between, so without this the leftover width opens as a big gap between icon and title). */ .hf-download-row > .hf-download-meta { flex: 1 1 auto; min-width: 0; } .hf-download-icon img { width: 22px; height: 22px; border-radius: 0; } .hf-dl-1 .hf-download-icon { background: var(--wp--preset--color--green-deep); } .hf-dl-2 .hf-download-icon { background: var(--wp--preset--color--amber); } .hf-dl-3 .hf-download-icon { background: var(--wp--preset--color--mint); } .hf-download-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.05rem; font-weight: 700; color: var(--wp--preset--color--green-dark); line-height: 1.3; margin: 0; } .hf-download-info { font-size: 0.78rem; color: var(--wp--preset--color--steel); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } /* Download button — smaller outline pill with a trailing arrow icon */ .wp-block-button.is-style-download .wp-block-button__link { background: transparent; color: var(--wp--preset--color--green-dark); border: 2px solid var(--wp--preset--color--green-dark); box-shadow: none; font-size: 0.88rem; padding-top: 0.65rem; padding-bottom: 0.65rem; padding-left: 1.4rem; padding-right: 1.4rem; min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; } .wp-block-button.is-style-download .wp-block-button__link::after { content: ""; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") no-repeat center / contain; mask: url("data:image/svg+xml,") no-repeat center / contain; } .wp-block-button.is-style-download .wp-block-button__link:hover { background: var(--wp--preset--color--green-dark); color: #fff; } /* Link cards ---------------------------------------------------------- */ .hf-links-section { position: relative; overflow: hidden; } .hf-link-card { background: #fff; border: 1px solid rgba(199, 185, 165, 0.25); border-radius: var(--wp--custom--radius, 20px); transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease), border-color 0.3s var(--hf-ease); height: 100%; position: relative; overflow: hidden; /* Vertical flex so the description can grow and pin "Visiter le site" to the bottom across cards with different copy lengths. */ display: flex; flex-direction: column; } .hf-link-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(30, 42, 46, 0.08); border-color: var(--wp--preset--color--green); } .hf-link-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0; line-height: 0; } .hf-link-icon img { width: 20px; height: 20px; border-radius: 0; } .hf-link-1 .hf-link-icon { background: var(--wp--preset--color--frost); } .hf-link-2 .hf-link-icon { background: var(--wp--preset--color--amber-pale); } .hf-link-3 .hf-link-icon { background: #DBF7E2; } .hf-link-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 800; color: var(--wp--preset--color--green-dark); line-height: 1.3; } .hf-link-desc { font-size: 0.92rem; color: var(--wp--preset--color--slate); line-height: 1.6; /* No margin override — blockGap on the card gives the title→description spacing. flex: 1 absorbs leftover card height so the "Visiter le site" arrow lands at the same baseline across cards. */ flex: 1; } .hf-link-arrow a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--green); } .hf-link-arrow a::after { content: ""; width: 0.9em; height: 0.9em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") no-repeat center / contain; mask: url("data:image/svg+xml,") no-repeat center / contain; } /* ===================================================================== NOUS JOINDRE PAGE Contact form card (Gravity Forms inside) + three coloured info cards. ===================================================================== */ .hf-contact-section { position: relative; overflow: hidden; } /* Form card — white panel with dotted top-right decoration */ .hf-contact-form-card { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(199, 185, 165, 0.3); border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 40, 24, 0.06); } .hf-contact-form-card::after { content: ""; position: absolute; top: -20px; right: -20px; width: 160px; height: 160px; background-image: radial-gradient(circle, rgba(0, 117, 73, 0.07) 1.5px, transparent 1.5px); background-size: 16px 16px; pointer-events: none; } .hf-contact-form-card > * { position: relative; z-index: 1; } .hf-form-card-title { color: var(--wp--preset--color--green-dark); font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; } .hf-form-card-title em { font-style: italic; color: var(--wp--preset--color--green); font-weight: 700; } .hf-form-intro { font-size: 0.98rem; color: var(--wp--preset--color--slate); line-height: 1.6; } /* Gravity Forms inside the card — match the mockup's input styling. Scoped under .hf-contact-form-card so it only affects this form, not other GF instances that might appear elsewhere later. */ .hf-contact-form-card .gform_wrapper .gfield_label { font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--green-dark); margin-bottom: 0.4rem; } .hf-contact-form-card .gform_wrapper input[type="text"], .hf-contact-form-card .gform_wrapper input[type="email"], .hf-contact-form-card .gform_wrapper input[type="tel"], .hf-contact-form-card .gform_wrapper input[type="url"], .hf-contact-form-card .gform_wrapper input[type="number"], .hf-contact-form-card .gform_wrapper textarea, .hf-contact-form-card .gform_wrapper select { font-family: var(--wp--preset--font-family--body); font-size: 1rem; padding: 0.9rem 1rem; border: 1.5px solid var(--wp--preset--color--mist); border-radius: 12px; background: #fff; color: var(--wp--preset--color--green-deep); width: 100%; transition: border-color 0.3s, box-shadow 0.3s; } .hf-contact-form-card .gform_wrapper input:focus, .hf-contact-form-card .gform_wrapper textarea:focus, .hf-contact-form-card .gform_wrapper select:focus { outline: none; border-color: var(--wp--preset--color--green); box-shadow: 0 0 0 4px rgba(0, 117, 73, 0.1); } .hf-contact-form-card .gform_wrapper textarea { min-height: 140px; resize: vertical; } /* Down-chevron on selects */ .hf-contact-form-card .gform_wrapper select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* Submit button — mint pill matching the theme button */ .hf-contact-form-card .gform_wrapper .gform_button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.8rem 2rem; font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; border: 2px solid transparent; border-radius: 60px; background-color: var(--wp--preset--color--mint); color: var(--wp--preset--color--green-dark); box-shadow: 0 4px 16px rgba(0, 117, 73, 0.22); cursor: pointer; transition: transform 0.4s var(--hf-ease), background-color 0.4s var(--hf-ease), color 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); } .hf-contact-form-card .gform_wrapper .gform_button:hover { transform: translateY(-2px); background-color: var(--wp--preset--color--green-deep); color: var(--wp--preset--color--mint); box-shadow: 0 8px 32px rgba(0, 40, 24, 0.4); } /* Required asterisks → red */ .hf-contact-form-card .gform_wrapper .gfield_required, .hf-contact-form-card .gform_wrapper .gfield_required_asterisk { color: #ff0000; } /* Hide the "* indicates required fields" legend GF adds above the form */ .hf-contact-form-card .gform_wrapper .gform_required_legend { display: none; } /* ----- Error messages ----------------------------------------------- By default Gravity Forms renders the summary as an

    and the inline field message as a header-styled paragraph, so they pick up the theme's heading element styles (Wittgenstein, big, bold). Force them back onto the body font and a flat red palette so they read as notices, not headings. ------------------------------------------------------------------ */ /* Summary banner above the form */ .hf-contact-form-card .gform_wrapper .gform_validation_errors { background: rgba(255, 0, 0, 0.05); border: 1px solid rgba(255, 0, 0, 0.28); border-radius: 14px; padding: 0.85rem 1.1rem; color: #ff0000; margin-bottom: 1.25rem; font-family: var(--wp--preset--font-family--body); box-shadow: none; } /* Make the h2 a flex container so the icon sits beside the text. GF's own .gform-icon is an absolutely-positioned CSS-shape that overlaps the text — hide it and inject our own exclamation glyph via ::before so we control size, position, and tint with one stroke. */ .hf-contact-form-card .gform_wrapper .gform_validation_errors > h2, .hf-contact-form-card .gform_wrapper .gform_validation_errors > h2 > a { display: flex; align-items: center; gap: 0.6rem; font-family: var(--wp--preset--font-family--body); font-size: 0.92rem; font-weight: 600; color: #ff0000; letter-spacing: 0; line-height: 1.5; margin: 0; padding: 0; text-transform: none; } .hf-contact-form-card .gform_wrapper .gform_validation_errors > h2 > .gform-icon, .hf-contact-form-card .gform_wrapper .gform_validation_errors > h2 > svg { display: none; } /* Red disc with a white "!" — pure CSS, no SVG mask gymnastics. */ .hf-contact-form-card .gform_wrapper .gform_validation_errors > h2::before { content: "!"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background-color: #ff0000; color: #fff; font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; font-weight: 800; line-height: 1; } /* Inline per-field message (the "This field is required" pill) */ .hf-contact-form-card .gform_wrapper .gfield_validation_message, .hf-contact-form-card .gform_wrapper .validation_message { background: rgba(255, 0, 0, 0.05); border: 1px solid rgba(255, 0, 0, 0.25); border-radius: 10px; padding: 0.55rem 0.85rem; margin-top: 0.5rem; font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; font-weight: 500; color: #ff0000; line-height: 1.45; letter-spacing: 0; } /* Error label tint — only the main field label turns red, not the sub-labels (e.g. the "Prénom" / "Nom" labels under a Name field). */ .hf-contact-form-card .gform_wrapper .gfield_error > .gfield_label, .hf-contact-form-card .gform_wrapper .gfield_error > legend.gfield_label { color: #ff0000; } /* Sub-labels (first/last name, address parts, etc.) — keep the same color and weight as the regular main labels even when the parent field is in error. */ .hf-contact-form-card .gform_wrapper .gfield_label.gfield_label_before_complex, .hf-contact-form-card .gform_wrapper .gform-field-label--type-sub, .hf-contact-form-card .gform_wrapper .ginput_complex label, .hf-contact-form-card .gform_wrapper .gfield_error .ginput_complex label, .hf-contact-form-card .gform_wrapper .gfield_error .gform-field-label--type-sub { color: var(--wp--preset--color--green-dark); font-weight: 600; font-family: var(--wp--preset--font-family--body); } /* Error input outline */ .hf-contact-form-card .gform_wrapper .gfield_error input[type="text"], .hf-contact-form-card .gform_wrapper .gfield_error input[type="email"], .hf-contact-form-card .gform_wrapper .gfield_error input[type="tel"], .hf-contact-form-card .gform_wrapper .gfield_error textarea, .hf-contact-form-card .gform_wrapper .gfield_error select { border-color: rgba(255, 0, 0, 0.5); } .hf-contact-form-card .gform_wrapper .gfield_error input:focus, .hf-contact-form-card .gform_wrapper .gfield_error textarea:focus, .hf-contact-form-card .gform_wrapper .gfield_error select:focus { border-color: #ff0000; box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.1); } /* Info column ----------------------------------------------------- */ .hf-info-card { position: relative; overflow: hidden; border-radius: var(--wp--custom--radius, 20px); color: #fff; transition: transform 0.4s var(--hf-ease), box-shadow 0.4s var(--hf-ease); } .hf-info-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 40, 24, 0.12); } .hf-info-card::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px); background-size: 16px 16px; pointer-events: none; } .hf-info-card > * { position: relative; z-index: 1; } .hf-info-green { background: var(--wp--preset--color--green); } .hf-info-dark { background: linear-gradient(145deg, var(--wp--preset--color--green-dark), var(--wp--preset--color--charcoal)); } .hf-info-amber { background: linear-gradient(145deg, var(--wp--preset--color--amber) 0%, #b45309 100%); } /* Translucent rounded-rect icon tile */ .hf-info-card-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); flex-shrink: 0; margin: 0; line-height: 0; } .hf-info-card-icon img { width: 20px; height: 20px; border-radius: 0; } .hf-info-card-title { color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .hf-info-card-body { font-size: 0.98rem; line-height: 1.65; } .hf-info-card-body p { color: rgba(255, 255, 255, 0.88); margin: 0; } .hf-info-card-body a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 1px; transition: border-color 0.3s; } .hf-info-card-body a:hover { border-bottom-color: #fff; } /* "Suivez-nous" block below the info cards — green-filled circles with white icons, matching the design. The block sets iconBackgroundColor to green via attributes; this rule guarantees the circle is a solid green disc even when WP's built-in social-link service styles try to inject their brand colour. */ .hf-social-follow-label { font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--green-dark); letter-spacing: 0.14em; text-transform: uppercase; margin: 0; } .hf-social-follow .wp-block-social-links { gap: 0.6rem; } .hf-social-follow .wp-block-social-links .wp-social-link { background-color: var(--wp--preset--color--green); color: #fff; transition: background-color 0.3s var(--hf-ease), transform 0.3s var(--hf-ease); } .hf-social-follow .wp-block-social-links .wp-social-link:hover { background-color: var(--wp--preset--color--green-dark); transform: translateY(-2px); } .hf-social-follow .wp-block-social-links .wp-social-link a, .hf-social-follow .wp-block-social-links .wp-social-link svg { color: #fff; fill: #fff; } /* ===================================================================== SINGLE ARTICLE TEMPLATE (templates/single.html) ===================================================================== */ /* Hero — same dark-green panel as inner pages but content-only (no right-side image). The content group spans `alignwide` (1416px) so its left edge sits flush with the header logo; the children inside carry the 920px readability cap. */ .hf-article-hero-content { max-width: none; } .hf-article-hero-content > * { max-width: 920px; margin-left: 0; margin-right: 0; } .hf-article-hero .wp-block-post-title { color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .hf-article-hero .wp-block-post-title em { font-style: italic; color: var(--wp--preset--color--mint); font-weight: 700; } /* Eyebrow with post-terms is a wp:div, not a paragraph — make the ::before symbol work and align inline like the other hf-labels. */ .hf-article-hero .wp-block-post-terms.hf-label { display: inline-flex; align-items: center; gap: 0.4rem; } .hf-article-hero .wp-block-post-terms a { color: inherit; text-decoration: none; } .hf-article-meta { font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); font-weight: 500; } .hf-article-meta > * { margin: 0; color: inherit; } .hf-meta-sep { opacity: 0.5; } /* Body ---------------------------------------------------------------- */ .hf-article-body { position: relative; } /* Back link (top + footer) — arrow drawn via background-image. */ .hf-article-back { margin: 0; } /* The top instance (direct child of the article body) takes the full content column so the link sits left-aligned on its own row. */ .hf-article-body > .hf-article-back { width: 100%; } /* The footer is also full-width so its inner flex row can space the meta and the back link to the two edges. The inner back link stays at its natural width so it sits inline beside the publication meta instead of wrapping to a new line. */ .hf-article-footer { width: 100%; } .hf-article-footer .hf-article-back { width: auto; } .hf-article-back a { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--green-dark); text-transform: uppercase; letter-spacing: 0.08em; transition: gap 0.3s var(--hf-ease), color 0.3s var(--hf-ease); } .hf-article-back a::before { content: ""; width: 1em; height: 1em; flex-shrink: 0; background-image: url("data:image/svg+xml,"); background-size: contain; background-repeat: no-repeat; background-position: center; } .hf-article-back a:hover { gap: 0.7rem; color: var(--wp--preset--color--green); } /* Featured image */ .hf-article-featured { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 40, 24, 0.12); } .hf-article-featured img { width: 100%; height: auto; display: block; border-radius: 0; } /* Post content typography — slate body text, heading-font headings, sized to match the mockup. Targets only children of the body region so it doesn't leak into other Post Content instances elsewhere. */ .hf-article-body .wp-block-post-content > p { color: var(--wp--preset--color--slate); font-size: 1.05rem; line-height: 1.85; margin: 0 0 1rem; } /* The first paragraph is the lead — bigger, darker. */ .hf-article-body .wp-block-post-content > p:first-of-type { color: var(--wp--preset--color--green-deep); font-size: 1.2rem; line-height: 1.7; margin-bottom: 2rem; } /* H2–H5 all use green-deep (the H2 colour) so the heading hierarchy reads as one family. H6 stays as the global theme.json eyebrow style — keeps it usable as a small label. Bottom margins increase visibly with each level so the following content has room to breathe. */ .hf-article-body .wp-block-post-content h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 800; color: var(--wp--preset--color--green-deep); letter-spacing: -0.01em; line-height: 1.2; margin: 2.75rem 0 1.5rem; } .hf-article-body .wp-block-post-content h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 700; color: var(--wp--preset--color--green-deep); line-height: 1.25; margin: 2rem 0 1.25rem; } .hf-article-body .wp-block-post-content h4 { font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 700; color: var(--wp--preset--color--green-deep); line-height: 1.3; margin: 1.75rem 0 1rem; } .hf-article-body .wp-block-post-content h5 { font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--green-deep); line-height: 1.35; margin: 1.5rem 0 0.85rem; } /* H6 keeps the amber uppercase eyebrow look from theme.json — only the vertical rhythm is added here so the following paragraph isn't glued to it. */ .hf-article-body .wp-block-post-content h6 { margin: 1.5rem 0 0.75rem; } /* Lists — bigger left indent so the markers sit clear of the body text, and ordered-list numbers tracked at weight 600 to match the design. */ .hf-article-body .wp-block-post-content ul, .hf-article-body .wp-block-post-content ol { color: var(--wp--preset--color--slate); font-size: 1.05rem; line-height: 1.8; padding-left: 2.25rem; margin: 0 0 1.25rem; } .hf-article-body .wp-block-post-content li { margin-bottom: 0.45rem; } .hf-article-body .wp-block-post-content ol > li::marker { font-weight: 600; } .hf-article-body .wp-block-post-content a { color: var(--wp--preset--color--green-dark); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s; } .hf-article-body .wp-block-post-content a:hover { color: var(--wp--preset--color--green); } /* Block quote (core/quote) — translucent-green rounded panel with the same vertical rhythm as the other content blocks. */ .hf-article-body .wp-block-post-content .wp-block-quote, .hf-article-body .wp-block-quote { background-color: rgb(0 117 73 / 10%); padding: 1rem 1.5rem; border-radius: 12px; margin: 2rem 0 2.5rem; } /* Quoted paragraph itself uses the heading family (Wittgenstein) so the pull text has the same display feel as the article headings. */ .hf-article-body .wp-block-post-content .wp-block-quote > p, .hf-article-body .wp-block-quote > p { font-family: var(--wp--preset--font-family--heading); } /* Citation under the quote — own line, bold, upright, with a clear gap between it and the quoted paragraph above. Body font keeps it discreet against the heading-family pull quote text. */ .hf-article-body .wp-block-post-content .wp-block-quote cite, .hf-article-body .wp-block-quote cite { display: block; margin-top: 0.85rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-weight: 700; } /* Pullquote — mint left rule, italic Wittgenstein */ .hf-article-body .wp-block-pullquote { border-left: 3px solid var(--wp--preset--color--mint); border-top: 0; border-bottom: 0; background: transparent; padding: 0.5rem 0 0.5rem 1.5rem; margin: 2rem 0; text-align: left; } .hf-article-body .wp-block-pullquote blockquote, .hf-article-body .wp-block-pullquote p { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; font-weight: 700; font-style: italic; line-height: 1.4; color: var(--wp--preset--color--green-deep); margin: 0; } /* Callout — wp:group with className "hf-article-callout" */ .hf-article-callout { background: var(--wp--preset--color--cream); border-radius: 16px; padding: 1.75rem 2rem; margin: 2rem 0; } .hf-article-callout > h3, .hf-article-callout .wp-block-heading { font-size: 1rem !important; font-weight: 700; margin: 0 0 0.5rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--green-dark); font-family: var(--wp--preset--font-family--body); } .hf-article-callout p { margin: 0; font-size: 1rem; color: var(--wp--preset--color--slate); } /* Article footer — date + back link, side by side at desktop */ .hf-article-footer .wp-block-post-date, .hf-article-footer .wp-block-post-terms, .hf-article-footer .hf-meta-sep { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--steel); } .hf-article-footer .wp-block-post-terms a { color: var(--wp--preset--color--steel); text-decoration: none; } .hf-article-footer .wp-block-post-terms a:hover { color: var(--wp--preset--color--green); } /* ===================================================================== LEGAL PAGES (templates/page-legal.html) Same dark-green hero treatment as inner pages, then an 820px-wide body holding the TOC + numbered sections. Typography reuses the article body rules so headings/paragraphs/lists stay consistent. ===================================================================== */ /* Hero meta — "Dernière mise à jour : 26 May 2026" inline row. */ .hf-legal-meta { font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); font-weight: 500; } .hf-legal-meta > * { margin: 0; color: inherit; } /* Eyebrow excerpt: wp:post-excerpt is a div with an inner

    . The default .hf-label::before lives on the wrapping div but doesn't sit inline with the text node inside the

    ; we hide that one and place the symbol on the inner

    via ::before instead so it tracks with the excerpt text. */ .hf-legal-hero .wp-block-post-excerpt.hf-label { display: inline-block; } .hf-legal-hero .wp-block-post-excerpt.hf-label::before { display: none; } .hf-legal-hero .wp-block-post-excerpt.hf-label p { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; } .hf-legal-hero .wp-block-post-excerpt.hf-label p::before { content: "\2212"; /* − minus sign */ font-size: 1rem; font-weight: 800; line-height: 1; color: inherit; } .hf-legal-hero .wp-block-post-title { color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .hf-legal-hero .wp-block-post-title em { font-style: italic; color: var(--wp--preset--color--mint); font-weight: 700; } /* Body container is constrained 820px — typography rules below piggyback on the article-body selectors so we don't duplicate them. */ .hf-legal-body { position: relative; } /* Table of contents ("Sommaire") — cream panel with small uppercase heading and ordered list of anchor links. */ .hf-legal-toc { background: var(--wp--preset--color--cream); border-radius: 16px; padding: 1.75rem 2rem; margin: 0 0 3rem; } .hf-legal-toc > h2, .hf-legal-toc > .wp-block-heading { font-family: var(--wp--preset--font-family--body) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--wp--preset--color--green-dark) !important; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; margin: 0 0 0.75rem !important; } .hf-legal-toc > ol, .hf-legal-toc > .wp-block-list { padding-left: 1.5rem; margin: 0; color: var(--wp--preset--color--slate); font-size: 0.95rem; line-height: 1.6; } .hf-legal-toc li { margin-bottom: 0.3rem; } .hf-legal-toc a { color: var(--wp--preset--color--green-dark); text-decoration: none; transition: color 0.3s; } .hf-legal-toc a:hover { color: var(--wp--preset--color--green); text-decoration: underline; } /* Section typography — reuse the article body rules. */ .hf-legal-body .wp-block-post-content > p { color: var(--wp--preset--color--slate); font-size: 1.05rem; line-height: 1.85; margin: 0 0 1rem; } .hf-legal-body .wp-block-post-content h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.5rem, 2.5vw, 1.85rem); font-weight: 800; color: var(--wp--preset--color--green-deep); letter-spacing: -0.01em; line-height: 1.25; margin: 2.5rem 0 1.25rem; scroll-margin-top: 6rem; /* offset for the fixed header on # jumps */ } .hf-legal-body .wp-block-post-content h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 700; color: var(--wp--preset--color--green-deep); line-height: 1.25; margin: 2rem 0 1rem; } .hf-legal-body .wp-block-post-content ul, .hf-legal-body .wp-block-post-content ol { color: var(--wp--preset--color--slate); font-size: 1.05rem; line-height: 1.8; padding-left: 2.25rem; margin: 0 0 1.25rem; } .hf-legal-body .wp-block-post-content li { margin-bottom: 0.45rem; } .hf-legal-body .wp-block-post-content ol > li::marker { font-weight: 600; } .hf-legal-body .wp-block-post-content a { color: var(--wp--preset--color--green-dark); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s; } .hf-legal-body .wp-block-post-content a:hover { color: var(--wp--preset--color--green); } /* TOC links are styled separately above; no underline on them. */ .hf-legal-toc a { text-decoration: none; } .hf-legal-toc a:hover { text-decoration: underline; }