/* ========================================================================== Le Taillant — COUTEAUX theme (design tokens only) The one stylesheet that is allowed to differ from the sister site (ciseaux.le-taillant.com): brand colors, fonts, and the RGB triplets the shared base.css derives its tinted shadows/glows from. Loaded BEFORE base.css in partials/head.php. ========================================================================== */ /* Strict 3-color brand system (brand_assets/Le Taillant Color Palette.pdf, 2026-08-19): white, a neutral grey, and a deep navy. Navy carries every accent, link, button and dark surface — there is no secondary hue. Grey is the one muted/secondary tone. White is paper. Semantic form feedback (success/error) stays inside this same triad, differentiated by icon and wording rather than by introducing a 4th and 5th hue. */ :root { --navy: #0A0D3D; --navy-raised: color-mix(in srgb, var(--navy) 88%, white); /* #6B6B6B, not the swatch's literal #808080 — #808080 measures 3.9:1 on white (fails WCAG AA's 4.5:1 for body text); #6B6B6B measures 5.3:1, clearing AA with margin for anti-aliasing/subpixel rendering while staying a true neutral grey (not drifting toward black or picking up the navy hue — this token is only ever used as --ink-soft on white/ paper surfaces, never as on-navy secondary text, which already goes through the lighter --secondary-fore-color color-mix below instead). */ --grey: #6B6B6B; --white: #FFFFFF; --e1-color: var(--navy); --e1-rgb: 10,13,61; /* rgb of --e1-color, for tinted shadows */ --e2-color: color-mix(in srgb, var(--navy) 40%, white); --back-color: var(--navy); --fore-color: var(--white); --secondary-fore-color: color-mix(in srgb, var(--grey) 55%, white); --secondary-back-color: var(--navy-raised); --warning-color: var(--navy); --success-color: var(--navy); --error-color: var(--grey); --paper: var(--white); --paper-raised: var(--white); --ink: var(--navy); --ink-rgb: 10,13,61; /* rgb of --ink, for neutral shadows */ --ink-soft: var(--grey); --hairline: rgba(var(--ink-rgb),0.14); --hairline-dark: rgba(255,255,255,0.14); /* Roboto everywhere, weight does the work (this brand loves thin/light weights); Times New Roman is a system font reserved for a few accent moments — see .accent-serif in base.css, applied by hand on the homepage hero and the FAQ About-section quote. No webfont import needed for Times New Roman. */ --font-body: 'Roboto', 'Inter', sans-serif; --font-display: 'Times New Roman', Times, Georgia, serif; /* fd5/fd6 (every section heading + the hero) opt OUT of --font-display here and use Roboto Light instead — see base.css's var(--heading-font, var(--font-display)) fallback. Squared-off buttons: small corner radius instead of the shared default's pill. */ --heading-font: var(--font-body); --heading-weight: 300; --btn-radius: .5rem; } /* ========================================================================== Consolidated 4-style type system (couteaux only, 2026-08-20 request): H1 (fd6, hero, one per page) → H2 (fd5, section headings) → H3 (below) → paragraph (below). Everything that used to read as fd1 eyebrow caps, fd3 sub-heads, fd4 card/step titles, and fd7 uppercase labels now shares one H3 look; fd2 lead paragraphs now match fd8 body copy exactly instead of carrying their own heavier weight. `body` prefix beats base.css's plain .fd* selectors on specificity so this wins regardless of load order, without editing the shared file (ciseaux, which never sets these overrides, is untouched). */ body .fd1, body .fd3, body .fd4, body .fd7 { font-size: calc(1.2em * 1.275); font-weight: 200; letter-spacing: -.01em; line-height: 1.25; text-transform: none; } body .fd2, body .fd8 { font-size: .85em; font-weight: 300; line-height: 1.5; letter-spacing: normal; } /* Header stays one solid dark navy at all times — base.css's #site-header (translucent at rest) and #site-header.is-scrolled (more opaque once scrolled) states normally differ; !important is the deliberate, narrow tool here since neither base rule carries it, so this wins over both without needing to out-specificity a class state defined in a file that loads after this one. */ #site-header { background-color: var(--navy) !important; } /* ========================================================================== Couteaux-only overrides of shared base.css behavior. These live here (per-site, not synced) rather than in base.css because they depend on this brand's specific choice of --e1-color === --back-color (both navy) — ciseaux uses a distinct accent (ultrasonic blue) against black, so its is--accent button/warning-color/price-table already read correctly as-is and must NOT inherit these fixes. base.css itself must stay untouched so both sites keep sharing it byte-for-byte. ========================================================================== */ /* .is--accent's fill is the same navy as every dark surface it's built for sitting on top of (see --e1-color above) — wherever it's actually placed ON one of those dark surfaces instead (header bar, mobile menu, floating dark CTA boxes, cookie banner), it needs the inverse treatment so it doesn't disappear into its own background. Each selector below already out-specifies base.css's plain `.button.is--accent`, so plain (non- !important) declarations here safely win regardless of load order. */ #site-header .button.is--accent, #mobile-menu .button.is--accent, .floating-box .button.is--accent, .cookie-consent .button.is--accent { --btn-fill: var(--fore-color); --btn-text: var(--back-color); } /* Extra breathing room between a CTA section's H2 and the button sitting right beneath it — matches the H2-to-content rhythm the hero already gives its own lead paragraph (#hero .hero-content p.fd2 in base.css). */ .floating-box a.button { margin-top: 1.25rem; } /* Google Maps pin badge — base.css's .reviews-badge .badge-icon pairs --warning-color (icon fill) with --back-color (circle bg); on couteaux both resolve to the same navy, which is exactly why the badge read as an empty circle. The pin SVG (partials/reviews-badge.php) now carries its own fixed red/white colors, so the circle just needs a plain light backdrop instead of inheriting that pairing. !important needed: same selector/specificity as base.css, which loads after this file. */ .reviews-badge .badge-icon { background: #fff !important; } /* Price table "boxed" in navy, per Arnaud's request — base.css's default is a plain paper card. Same selectors/specificity as base.css (which loads after this file), so !important is required on every overridden declaration or base.css's later rule would win the tie. */ .price-table-wrap { background: var(--back-color) !important; border-color: rgba(255,255,255,.1) !important; box-shadow: 0 1px 1px rgba(var(--ink-rgb),.04), 0 8px 16px -8px rgba(var(--ink-rgb),.16), 0 24px 48px -24px rgba(var(--ink-rgb),.28) !important; } .price-table { color: rgba(255,255,255,.85) !important; } .price-table th, .price-table td { border-bottom-color: rgba(255,255,255,.12) !important; } .price-table thead th { color: var(--secondary-fore-color) !important; background: transparent !important; } .price-table tbody tr:hover { background: rgba(255,255,255,.05) !important; } .price-table td.price-table-amount { color: var(--fore-color) !important; } /* Homepage hero H1 only — two-line fade-in on page load (400ms / 700ms), not scroll-triggered like .reveal since this content sits above the fold and is visible immediately. New class names, no base.css collision, so no !important needed. */ @keyframes hero-h1-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero-h1-line { display: inline-block; opacity: 0; animation: hero-h1-line-in .55s var(--ease-out-soft) forwards; } .hero-h1-line--1 { animation-delay: .4s; } .hero-h1-line--2 { animation-delay: .7s; } @media (prefers-reduced-motion: reduce) { .hero-h1-line { opacity: 1; transform: none; animation: none; } }