/* ========================================================================== css/tokens.css — Shared design values (CSS Custom Properties) ========================================================================== Values are divided into: 1. AUTHORITATIVE VALUES: explicitly specified in AGENTS.md. 2. PROVISIONAL / ESTIMATED VALUES: sampled from /reference/ screenshots or proposed as a baseline scale (TO VERIFY with the owner). ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. AUTHORITATIVE COLOURS & GRADIENTS (from AGENTS.md sections 5, 6, 9, 12) ------------------------------------------------------------------------ */ /* Navigation bar: #545454 at 50% transparency (AGENTS.md section 5.1) */ --color-nav-bg: rgba(84, 84, 84, 0.5); /* Green accent colour for Notre équipe section headings & modal close icon (AGENTS.md section 9) */ --color-green-accent: #95B134; /* Dark green used only in the Objectif principal gradient (AGENTS.md sections 6.1, 9, 12) */ --color-green-dark: #526953; --color-objectif-start: rgba(82, 105, 83, 0.55); /* #526953 at 55% opacity */ /* Flat grey footer background on all 4 pages, and bottom stop of Activités gradient (AGENTS.md sections 5.3, 12) */ --color-footer: #E1E1E1; /* Pure white and black used in sections, cards, and headings (AGENTS.md section 12) */ --color-white: #FFFFFF; --color-black: #000000; /* Authoritative section gradients on Accueil (AGENTS.md sections 6.1, 12) Note: The 70% white stop in --gradient-activites is estimated from Framer's slider and remains TO VERIFY visually against /reference/. */ --gradient-objectif: linear-gradient( to bottom, var(--color-objectif-start) 0%, var(--color-white) 100% ); --gradient-activites: linear-gradient( to bottom, var(--color-white) 0%, var(--color-white) 70%, var(--color-footer) 100% ); /* Authoritative Objectif section padding & gap (AGENTS.md section 6.1: ~60/40/50/40 px, gap ~5 px) */ --space-objectif-padding: 60px 40px 50px 40px; --space-objectif-gap: 5px; /* ------------------------------------------------------------------------ 2. PROVISIONAL COLOURS (estimated from /reference/ — TO VERIFY) ------------------------------------------------------------------------ */ /* Body & secondary text colours (TO VERIFY) */ --color-text-primary: #111111; /* Provisional: near-black body copy */ --color-text-muted: #595959; /* Provisional: form labels, photo credits (4.5:1+ contrast on #E1E1E1) */ /* Hero dark overlay for white heading legibility (TO VERIFY) */ --color-hero-overlay: rgba(0, 0, 0, 0.30); /* Provisional: dark tint over hero image */ /* Subtle horizontal dividers and thin line above Accueil counters (TO VERIFY) */ --color-border-subtle: rgba(0, 0, 0, 0.12); /* Provisional: sampled from 01_detail-compteurs-accueil.png */ /* Footer contact form controls (TO VERIFY against 01_accueil_pleine_page.png) */ --color-input-bg: #D5D5D5; /* Provisional: light grey input field fill over #E1E1E1 footer */ --color-button-dark: #2B2B2B; /* Provisional: dark charcoal "Soumettre" button background */ --color-button-dark-hover: #000000; /* Provisional: hover state for "Soumettre" button */ /* Carousel controls: arrows and pagination dot pill (TO VERIFY) */ --color-carousel-control: rgba(110, 110, 110, 0.85); /* Provisional: round arrow & dot pill background */ --color-carousel-dot-inactive: rgba(255, 255, 255, 0.45); /* Provisional: inactive dot inside pill */ /* Pathogen modal () colours & gradient (TO VERIFY against 02_b01_popup-fletrissement.png and 02_phytopathogenes.md: ~#8AB661 top to ~#2E3548 bottom) */ --color-dialog-top: rgba(138, 182, 97, 0.94); /* Provisional: translucent green top */ --color-dialog-bottom: rgba(46, 53, 72, 0.96); /* Provisional: translucent slate-blue bottom */ --color-dialog-btn-bg: #1F2430; /* Provisional: dark circle for modal 'X' & arrows */ --color-dialog-backdrop: rgba(0, 0, 0, 0.35); /* Provisional: page backdrop dim when dialog is open */ --gradient-dialog: linear-gradient( to bottom, var(--color-dialog-top) 0%, var(--color-dialog-bottom) 100% ); /* Accessible status colours for contact form validation & feedback (TO VERIFY) */ --color-error: #B91C1C; /* Provisional: dark red with >5.5:1 contrast on #E1E1E1 */ --color-status-bg: #FFFFFF; /* Provisional: background for form status message box */ /* Two-colour keyboard focus ring tokens (chosen for high contrast on all backgrounds) */ --color-focus-inner: #FFFFFF; /* Inner 2px white ring (>8:1 contrast on dark nav/hero/modals) */ --color-focus-outer: #111111; /* Outer 2px near-black ring (>11:1 contrast on white & #E1E1E1) */ /* ------------------------------------------------------------------------ 3. PROVISIONAL TYPOGRAPHY SCALE & WEIGHTS (TO VERIFY) ------------------------------------------------------------------------ */ /* Self-hosted Manrope variable font (AGENTS.md section 3) */ --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font weights available in Manrope variable font (200 to 800) (PROVISIONAL) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Fluid / responsive type scale (PROVISIONAL — to verify against /reference/) */ --text-xs: 0.75rem; /* 12px — small credits, footer note */ --text-sm: 0.875rem; /* 14px — form labels, captions, student descriptions */ --text-base: 1rem; /* 16px — default body copy */ --text-md: 1.125rem; /* 18px — lead paragraphs (Objectif, intros) */ --text-lg: 1.25rem; /* 20px — card titles (h3), person names */ --text-xl: 1.5rem; /* 24px — sub-section headings, modal h3 */ --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* 28px -> 36px — section headings (h2) */ --text-counter: clamp(2.25rem, 1.8rem + 2vw, 3rem); /* 36px -> 48px — animated counter numbers */ --text-hero: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); /* 36px -> 56px — page hero titles (h1) */ /* Line heights (PROVISIONAL) */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; /* ------------------------------------------------------------------------ 4. PROVISIONAL SPACING, LAYOUT WIDTHS, RADII & SHADOWS (TO VERIFY) ------------------------------------------------------------------------ */ /* Spacing scale (4px / 8px base — PROVISIONAL) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Layout dimensions (PROVISIONAL — 1200px matches "Desktop 1200" in reference/04_documents_pleine_page.png) */ --container-max: 1200px; --container-narrow: 960px; --nav-height: 64px; /* Reference breakpoints (AGENTS.md section 3: around 600px and 900px) Note: CSS media queries cannot use var(), so these are documented here for reference: - Tablet breakpoint: 600px (37.5rem) - Desktop breakpoint: 900px (56.25rem) */ /* Corner radii (PROVISIONAL — to verify against cards, images & inputs in /reference/) */ --radius-sm: 6px; /* Form inputs and "Soumettre" button */ --radius-md: 12px; /* Illustrations and inner card images */ --radius-lg: 20px; /* Activités stacking cards, video card, and pathogen modal */ --radius-pill: 9999px; /* Pagination dot pill */ --radius-full: 50%; /* Circular student photos, round logo, round carousel arrows */ /* Shadows (PROVISIONAL — soft shadow separating white Activités cards from white upper background) */ --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-dialog: 0 20px 50px rgba(0, 0, 0, 0.30); /* Transitions (PROVISIONAL) */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; }