/** * Réalisons Design Tokens — Neumorphic * Source: Figma "Web — Neumorphic" variable collection * Generated from design system page 567:2 */ :root { /* ─── Layout chrome (header + footer height) ───────────────── The actual values are measured at runtime by chrome-measure.js and pushed back as --r-header-h / --r-footer-h / --r-admin-bar-h. The fallbacks below are 0 so the cascade is robust if JS is off and the cascade still works thanks to flex layout. ───────────────────────────────────────────────────────────── */ --r-header-h: 0px; --r-footer-h: 0px; --r-admin-bar-h: 0px; --r-chrome-h: calc(var(--r-header-h) + var(--r-footer-h)); /* ─── Container widths (centralized — no magic numbers in modules) */ --r-container-shell: 100%; --r-container-page: 1080px; /* footer-link cards + main page sections */ --r-container-standard: 1100px; /* legal, compte, service singles */ --r-container-prose: 760px; /* legal long-form line length */ --r-container-prose-narrow: 720px; /* single CPT body / lead */ /* ─── Colors ─── */ --r-bg: #F3F5F8; --r-dark: #2D3748; --r-teal: #28A8BF; --r-teal-dark: #1E7F8E; --r-teal-light: #CAEEF4; --r-orange: #EEA32A; --r-orange-dark: #BC770B; --r-green: #48BB78; --r-text-dark: #2D3748; --r-text-body: #718096; --r-text-muted: #9AA5B4; --r-separator: #C8D0D8; --r-purple: #805AD5; --r-dot-inactive: #B0BEC5; --r-white: #FFFFFF; /* ─── Alpha variants (border strokes at 20%/40% opacity) ─── */ --r-teal-a20: rgba(40, 168, 191, 0.2); --r-teal-a30: rgba(40, 168, 191, 0.3); --r-teal-a40: rgba(40, 168, 191, 0.4); --r-orange-a20: rgba(238, 163, 42, 0.2); --r-orange-a40: rgba(238, 163, 42, 0.4); --r-green-a20: rgba(72, 187, 120, 0.2); /* ─── Neumorphic Shadows (tuned for #F3F5F8 off-white bg) ─── */ --r-neu-card: -6px -6px 9px rgba(255, 255, 255, 0.95), 6px 6px 9px rgba(174, 184, 202, 0.45); --r-neu-btn: -4px -4px 6px rgba(255, 255, 255, 0.95), 4px 4px 6px rgba(174, 184, 202, 0.4); --r-neu-btn-sm: -3px -3px 4.5px rgba(255, 255, 255, 0.95), 3px 3px 4.5px rgba(174, 184, 202, 0.4); --r-neu-inner: inset -4px -4px 8px rgba(255, 255, 255, 0.95), inset 4px 4px 8px rgba(174, 184, 202, 0.4); /* ─── Hover Shadows ─── */ --r-neu-btn-hover: -6px -6px 10px rgba(255, 255, 255, 1), 6px 6px 10px rgba(174, 184, 202, 0.5); --r-neu-card-hover: -8px -8px 14px rgba(255, 255, 255, 1), 8px 8px 14px rgba(174, 184, 202, 0.5); --r-neu-btn-active: inset 3px 3px 5px rgba(174, 184, 202, 0.45), inset -3px -3px 5px rgba(255, 255, 255, 0.95); /* ─── Border Radius ─── */ --r-radius-card: 20px; --r-radius-carousel: 24px; --r-radius-btn: 23px; --r-radius-input: 12px; --r-radius-badge: 16px; --r-radius-pill: 12px; --r-radius-dot: 11px; /* ─── Spacing ─── */ --r-page-margin: 80px; --r-card-padding: 26px; --r-section-gap: 12px; --r-btn-padding-h: 32px; --r-btn-padding-v: 15px; /* ─── Typography ─── */ --r-font-heading: 'Kulim Park', Arial, sans-serif; --r-font-body: 'Lato', Arial, sans-serif; /* ─── Glows ─── */ --r-glow-teal: 0 0 8px rgba(40, 168, 191, 0.4); /* ─── Transitions ─── */ --r-transition: 0.2s ease-in-out; --r-transition-slow: 0.4s ease-in-out; /* ─── Z-index ─── */ --r-z-skip: 99999; --r-z-nav: 1000; --r-z-overlay: 500; --r-z-hero: 1; } /* ─── Dark Mode ─── */ @media (prefers-color-scheme: dark) { :root { /* Colors — inverted for dark surfaces */ --r-bg: #1A202C; --r-dark: #E2E8F0; --r-teal: #4FD1C5; --r-teal-dark: #38B2AC; --r-teal-light: #1D3D3D; --r-orange: #F6AD55; --r-orange-dark: #ED8936; --r-green: #68D391; --r-text-dark: #E2E8F0; --r-text-body: #A0AEC0; --r-text-muted: #718096; --r-separator: #2D3748; --r-purple: #B794F4; --r-dot-inactive: #4A5568; --r-white: #FFFFFF; /* Alpha variants */ --r-teal-a20: rgba(79, 209, 197, 0.2); --r-teal-a30: rgba(79, 209, 197, 0.3); --r-teal-a40: rgba(79, 209, 197, 0.4); --r-orange-a20: rgba(246, 173, 85, 0.2); --r-orange-a40: rgba(246, 173, 85, 0.4); --r-green-a20: rgba(104, 211, 145, 0.2); /* Neumorphic Shadows — adapted for dark surfaces */ --r-neu-card: -6px -6px 9px rgba(255, 255, 255, 0.04), 6px 6px 9px rgba(0, 0, 0, 0.5); --r-neu-btn: -4px -4px 6px rgba(255, 255, 255, 0.04), 4px 4px 6px rgba(0, 0, 0, 0.5); --r-neu-btn-sm: -3px -3px 4.5px rgba(255, 255, 255, 0.04), 3px 3px 4.5px rgba(0, 0, 0, 0.5); --r-neu-inner: inset -4px -4px 8px rgba(255, 255, 255, 0.04), inset 4px 4px 8px rgba(0, 0, 0, 0.5); /* Hover Shadows — dark mode */ --r-neu-btn-hover: -6px -6px 10px rgba(255, 255, 255, 0.06), 6px 6px 10px rgba(0, 0, 0, 0.6); --r-neu-card-hover: -8px -8px 14px rgba(255, 255, 255, 0.06), 8px 8px 14px rgba(0, 0, 0, 0.6); --r-neu-btn-active: inset 3px 3px 5px rgba(0, 0, 0, 0.5), inset -3px -3px 5px rgba(255, 255, 255, 0.04); /* Glow — brighter in dark mode */ --r-glow-teal: 0 0 12px rgba(79, 209, 197, 0.5); } } /* ════════════════════════════════════════════════════════════════════════ #178 — Responsive foundation tokens Mobile-first breakpoints — every override in the site CSS uses @media (min-width: …) with one of the values below. Never max-width. The 4 tiers (sm/md/lg/xl) map to phones / tablets / laptops / desktops. ════════════════════════════════════════════════════════════════════════ */ :root { /* Breakpoints (reference — CSS media queries inline the numeric value because CSS custom properties do not work inside @media conditions). */ --r-bp-sm: 480px; /* phone landscape / large phone */ --r-bp-md: 768px; /* tablet portrait */ --r-bp-lg: 1024px; /* tablet landscape / small laptop */ --r-bp-xl: 1280px; /* desktop */ /* Container widths — progressively wider on larger screens */ --r-container-sm: 100%; --r-container-md: 720px; --r-container-lg: 960px; --r-container-xl: 1200px; --r-container-page: 1400px; /* widest admissible page shell */ --r-container-standard: 1100px; /* legal, compte, service singles */ --r-container-prose: 720px; /* long-form reading column */ --r-container-prose-narrow: 560px; /* intro body / hero copy */ /* Gutters — horizontal padding outside the container */ --r-gutter-sm: 16px; --r-gutter-md: 32px; --r-gutter-lg: 48px; --r-gutter-xl: clamp(48px, 5vw, 80px); }