/* ============================================================ franco-media.com - design tokens Chrome palette: Ocean Sunset (rulings V3, DV, EA). Category accents added 5 September 2026, re-derived from their content palettes in TASK-N28. Self-contained: drop into the GeneratePress child theme and enqueue before any other stylesheet. Do not invent colours. ============================================================ */ :root{ /* ---------- 1 - Ocean Sunset role tokens (TASK-N28, ruling V3 and D07 report section 2) ---------- */ --os-heading:var(--os-ink-black); /* headings on light, dark bands, footer: h1 and h2 */ --os-heading-2:var(--os-dark-teal); /* N40 (H1): h3 and h4 (h5, h6 as h4) in article, page and profile bodies. Eyebrows keep the rubrique accent. */ --os-link:var(--os-dark-teal); /* links, eyebrows, chip text, rules, secondary buttons */ --os-link-hover:var(--os-ink-black); /* hover of links and dark-teal buttons. Hover always darkens. */ --os-accent:var(--os-dark-cyan); /* icons, active strokes, hover borders. NON-TEXT ONLY (3.73:1 on white) */ --os-cta:var(--os-golden-orange); /* the ONE primary call to action per view */ --os-cta-ink:var(--os-ink-black); /* text on the CTA. Never white on golden (2.25:1) */ --os-cta-hover:var(--os-burnt-caramel); /* CTA hover, ink text kept (4.95:1) */ --os-highlight:var(--os-golden-orange); /* pull-quote rule, active tab underline, decorative rules only */ --os-tint:#E4F4EE; /* pearl aqua at 25 percent on white. Surfaces only, never type. */ --os-tint-warm:#F6EFDB; /* vanilla custard at 40 percent on white. Surfaces only. */ --os-band:linear-gradient(152deg,var(--os-dark-teal) 0%,var(--os-dark-cyan) 100%); /* hero band and flat page headers, variant B (Fabrice's choice, DY) */ --os-text:#1A2233; /* body text */ --os-bg:#F7F8FA; /* page background */ --os-card:#FFFFFF; /* cards */ --os-line:#E3E8F0; /* borders, dividers */ --os-sunken:#EEF2F4; /* photo placeholders, map, inert fills */ --os-muted:#667085; /* secondary text on white or the page ground only */ /* RGB triplets for the few places that need an alpha of a role colour (veil fallback, glow, shadows). Same colours as the roles above. */ --os-ink-rgb:0,18,25; --os-accent-rgb:10,147,150; --os-cta-rgb:238,155,0; /* On-dark text and borders */ --on-dark:#FFFFFF; --on-dark-muted:rgba(255,255,255,.78); --on-dark-hero-sub:#FFFFFF; /* solid white on band B (4.71:1 at the end of the text zone; .86 alpha measured 3.90) */ --on-dark-fill:rgba(255,255,255,.16); --on-dark-border:rgba(255,255,255,.22); /* ---------- 2 - advertising package colours (decided, ruling DV; D07 report section 3) ---------- */ --pkg-essential:#0A9396; --pkg-essential-dark:#088083; --pkg-essential-tint:#DDF0F0; /* text on the colour: ink at body sizes; white allowed at 18 px bold and above (3.73:1) */ --pkg-business:#005F73; --pkg-business-dark:#005F73; --pkg-business-tint:#E0ECEE; /* text on the colour: white */ --pkg-premium:#EE9B00; --pkg-premium-dark:#AC5A05; --pkg-premium-tint:#FCEBCC; /* text on the colour: ink, never white */ --pkg-ultimate:#BB3E03; --pkg-ultimate-dark:#BB3E03; --pkg-ultimate-tint:#F7E8E1; /* text on the colour: white (5.52:1) */ /* Prices, the only four that may appear, per year: Essential 9,900 · Business 15,900 · Premium 25,900 · Ultimate 38,900 THB */ /* ---------- 3 · category accents (annuaire) - RETIRED TASK-N17 slice 3 (24-09-2026) ---------- The 12 legacy accent tokens formerly defined here (each with a "-tint" companion) are removed, per the ruling that section 3b is now the only accent layer. Both call sites in functions.php (gpcf_category_card(), gpcf_article_chip()) were repointed to section 3b first, verified to compute the IDENTICAL hex, base and tint, then this block was deleted. Kept as a short historical note only - use section 3b below for anything new. The legacy names, by their old rubrique word, mapped one-for-one onto section 3b's names: immobilier, restaurants, shopping and education kept an exact name match; sante, maison (from the legacy "construction" word), decouvrir (from "tourisme"), loisirs (from "sport") and vie-pratique (from "transport") were a close name match; nautisme (from "services"), expatries (from "hotels") and culture (from "beaute") were a label mismatch, flagged to Brain at the time. education's and culture's legacy tokens were never referenced by any call site. */ /* ---------- 3b · rubrique accents, canonical (ruling AR2, TASK-N15, 24-09-2026) ---------- Canonical layer as of AR2, and as of TASK-N17 slice 3 the ONLY accent layer - the legacy block once above (section 3) is retired, see its historical note. -tint companions added TASK-N17 slice 3 (24-09-2026): identical hex to the retired legacy tints, no new colour decision, only closing a naming gap so gpcf_category_card() and gpcf_article_chip() keep an unbroken tint fill after the repoint. */ /* TASK-N28 (rulings DV, DY4, EA1): each accent is the darkest colour of the rubrique's own content palette that keeps 4.5:1 on white (Maison and Services aux expatries are the two Fabrice kept below that bar; they never carry text, see DY4). Tint from the same palette. Rule DY4: an accent never carries text under 18px bold. Labels and chip text use --os-heading on the tint. The accent stays on the badge, the icon, the tile edge and the veil. */ --accent-immobilier:#01497C; --accent-immobilier-tint:#F8FCFD; --accent-restaurants:#9D0208; --accent-restaurants-tint:#FEFBF8; --accent-shopping:#A53860; --accent-shopping-tint:#FFFAFA; --accent-nautisme:#0077B6; --accent-nautisme-tint:#F6FCFE; --accent-sante:#028090; --accent-sante-tint:#F4FDFB; --accent-maison:#CA6702; --accent-maison-tint:#FDFBF5; --accent-education:#3D348B; --accent-education-tint:#FAFBFE; --accent-expatries:#7678ED; --accent-expatries-tint:#FAFBFE; --accent-loisirs:#7B2CBF; --accent-loisirs-tint:#FDFAFE; --accent-decouvrir:#007F5F; --accent-decouvrir-tint:#FAFCF5; --accent-culture:#377771; --accent-culture-tint:#FFFBF8; --accent-vie-pratique:#1E6091; --accent-vie-pratique-tint:#F8FCFD; /* ---------- 4 · typography ---------- */ --font-display:'Montserrat',system-ui,sans-serif; /* 800 for all display */ --font-body:'PT Sans',system-ui,sans-serif; /* 400 body, 700 bold */ --weight-display:800; --weight-bold:700; --weight-regular:400; /* Desktop sizes, as used in the mockups */ --size-hero-h1:60px; --lh-hero-h1:1.04; --ls-hero-h1:-1.4px; --size-page-h1:52px; --lh-page-h1:1.05; --ls-page-h1:-1.3px; /* B5: matched to GATE 2 - Page header variant C approved (05-09-2026), was a 50px placeholder, no other file used it yet */ --size-profile-h1:46px; --lh-profile-h1:1.05; --ls-profile-h1:-1.1px; --size-h2:28px; --lh-h2:1.15; --size-section-h2:32px; /* home section headings */ --size-h3:20px; --lh-h3:1.25; --size-card-title:19px; --lh-card-title:1.24; --size-quote:23px; --lh-quote:1.3; --size-standfirst:20px; --lh-standfirst:1.45; --size-hero-sub:20px; --size-lead:17.5px; --size-article-body:20px; --lh-article-body:1.7; --size-body:16px; --lh-body:1.65; --size-body-sm:15.5px; --size-small:14.5px; --size-floor:14px; /* N37 (B1): no text in a page body, post or profile prints under 14px */ --size-caption:14px; /* N37c (GK): dates, widget text and other chrome captions floor at 14px */ --size-chrome:14px; /* N37c (GK): footer, top bar, language chips, breadcrumbs, sidebar widget text, .meta and time */ --size-eyebrow:13.5px; --ls-eyebrow:1.5px; --size-label:12px; --ls-label:2px; /* uppercase labels, chips; N37c (GK): 12px minimum, was 11.5px */ --size-nav:15.5px; --ls-nav:0; /* top bar nav: sentence case, body-small size (N31, ruling EU) */ --size-stamp:12px; --ls-stamp:2px; /* N37c (GK): was 11px */ --size-button:18px; /* Corail primary */ --size-button-secondary:16px; /* Mobile overrides, 390px */ --m-size-hero-h1:34px; --m-ls-hero-h1:-.8px; --m-size-page-h1:32px; --m-size-profile-h1:30px; --m-size-h2:25px; --m-size-h3:18px; --m-size-article-body:16.5px; --m-size-quote:19px; --m-size-input:16px; /* never below 16px, stops iOS zoom */ /* ---------- 5 · spacing ---------- */ --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px; --space-5:12px; --space-6:14px; --space-7:16px; --space-8:18px; --space-9:20px; --space-10:24px; --space-11:26px; --space-12:30px; --space-13:34px; --space-14:40px; --space-15:44px; --space-16:66px; --page-width:1440px; /* design width */ --content-max:1200px; /* wrapper max-width, gutters included */ --page-gutter:40px; /* desktop */ --page-gutter-mobile:18px; --sidebar-width:340px; --split-gap:40px; --section-gap:34px; --card-gap:18px; --topbar-height:74px; --topbar-height-mobile:60px; /* ---------- 6 · radius ---------- */ --radius-sm:10px; /* buttons, inputs, small badges */ --radius-md:12px; /* icon badges, chips-as-blocks, gallery tiles */ --radius-card:14px; /* every card */ --radius-band:0 0 88px 88px;/* hero band, bottom corners only (N29c: was 64px) */ --radius-phone:18px; /* mobile frame in mockups */ --radius-pill:99px; /* chips, breadcrumbs, language switch */ /* ---------- 7 · elevation ---------- */ --shadow-raised:0 1px 2px rgba(var(--os-ink-rgb),.06); /* category card hover */ --shadow-floating:0 10px 30px rgba(var(--os-ink-rgb),.14); /* contact card, card hover */ /* Default state of every card is NO shadow. The hairline does the work. */ /* ---------- 8 · motion ---------- */ --ease:cubic-bezier(.2,.6,.3,1); --duration-fast:120ms; /* colour shifts */ --duration-base:180ms; /* buttons, chips, card hover */ --press-scale:.985; /* press state. A hair, never a bounce */ /* ---------- 9 · touch ---------- */ --tap-min:44px; /* absolute minimum on mobile */ --tap-comfortable:48px; /* buttons, inputs, menu button */ /* ---------- 10 - Ocean Sunset palette (ruling V3, TASK-N15, 24-09-2026) ---------- The ten values. Wired through the role tokens in section 1 by TASK-N28. */ --os-ink-black:#001219; --os-dark-teal:#005F73; --os-dark-cyan:#0A9396; --os-pearl-aqua:#94D2BD; --os-vanilla-custard:#E9D8A6; --os-golden-orange:#EE9B00; --os-burnt-caramel:#CA6702; --os-rusty-spice:#BB3E03; --os-oxidized-iron:#AE2012; --os-brown-red:#9B2226; /* ---------- 10b - widths ---------- */ --banner-width:600px; /* the 600 x 500 banner ceiling (DS2), used by sidebars.css */ } /* N29: one token, so .hero, .pagehead and .pagehead-photo move together. */ @media (max-width:768px){ :root{ --radius-band:0 0 64px 64px; } }