j.foucher
6f62082dc4
Initial child theme structure inheriting from Bricks parent. Token-driven, RGPD-native, mobile-first foundation ready for component and template work. What's in this commit - style.css: WP theme metadata (Template: bricks, v0.1.0) - functions.php: enqueue cascade tokens -> utilities -> components, defer-loaded main.js, font preload, theme support, image sizes (av-hero 2400x1350, av-card 800x600, av-thumb 400x300), Gutenberg default styles dequeued - theme.json: Gutenberg color/typo palette mirroring tokens - assets/css/tokens.css: full design system per Design Handoff section 2 (brand colors, neutrals, semantics, type scale + line-heights, 8pt spacing, radii, shadows, z-index, motion, prefers-reduced-motion) - assets/css/utilities.css: modern reset + .av-container, .av-skip-link, .av-sr-only, .av-stack, .av-section helpers, opinionated heading scale - assets/css/components.css: index of planned components + buttons (5 variants x 4 sizes per Design Handoff section 3.1) and links - assets/js/main.js: vanilla skeleton with header scroll, IntersectionObserver reveal, count-up, mobile drawer; respects prefers-reduced-motion - inc/cpt.php: register_post_type case_study (slug /customers/) + scenario (slug /scenarios/) + shared 'industry' taxonomy - inc/seo.php: Organization JSON-LD on home; placeholders for Product, Article, FAQPage, BreadcrumbList - assets/fonts/: Inter Variable + Italic WOFF2 self-hosted (RGPD; no Google Fonts CDN). Inter Display @font-face commented — Inter 4+ uses opsz axis from the same file. Out of scope (intentionally deferred) - Component fills: cards, forms, navigation, alerts, modals, tabs (placeholders) - Page templates: home and beyond - Bricks JSON template exports - Schema.org Product / Article / FAQPage / BreadcrumbList implementations Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
235 lines
8.1 KiB
CSS
235 lines
8.1 KiB
CSS
/**
|
|
* Asterion Bricks — Design tokens
|
|
*
|
|
* Source of truth for the design system. Every component, every utility,
|
|
* every Bricks override references variables defined here.
|
|
*
|
|
* Reference : Design Handoff Specification (livrable 2/2), section 2.
|
|
*
|
|
* Hard rule : NEVER hardcode a color, spacing, radius, or duration in any
|
|
* other file. If it's not yet a token, add it here first, then use it.
|
|
*/
|
|
|
|
/* ============================================================================
|
|
Self-hosted fonts (RGPD — no Google Fonts CDN)
|
|
Drop the .woff2 files into ../fonts/ and these declarations pick them up.
|
|
See ../fonts/README.md for download instructions.
|
|
============================================================================ */
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
|
|
url("../fonts/Inter-Variable.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Variable-Italic.woff2") format("woff2-variations"),
|
|
url("../fonts/Inter-Variable-Italic.woff2") format("woff2");
|
|
}
|
|
|
|
/*
|
|
Inter Display is intentionally NOT registered as its own @font-face here.
|
|
Since Inter 4.x, "Display" optical sizing is baked into the main variable
|
|
font via the `opsz` axis. The CSS stack `"Inter Display", "Inter", ...`
|
|
in --font-display falls through to "Inter" (registered above), so headlines
|
|
pick up the correct file with no 404 noise.
|
|
|
|
If a separate InterDisplay-Variable.woff2 is dropped into ../fonts/ later
|
|
(e.g. from the rsms.me extras package), uncomment the block below.
|
|
|
|
@font-face {
|
|
font-family: "Inter Display";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("../fonts/InterDisplay-Variable.woff2") format("woff2-variations"),
|
|
url("../fonts/InterDisplay-Variable.woff2") format("woff2");
|
|
}
|
|
*/
|
|
|
|
/* ============================================================================
|
|
Tokens
|
|
============================================================================ */
|
|
|
|
:root {
|
|
|
|
/* ---- BRAND COLORS ---- */
|
|
--color-brand-navy: #0B1F3A;
|
|
--color-brand-navy-deep: #081427;
|
|
--color-brand-gold: #C9A45A;
|
|
--color-brand-gold-soft: #E0C892;
|
|
--color-alert-red: #C8102E;
|
|
|
|
/* ---- NEUTRALS ---- */
|
|
--color-text-primary: #0B1F3A;
|
|
--color-text-secondary: #3E4C5E;
|
|
--color-text-muted: #6B7785;
|
|
--color-text-on-dark: #FFFFFF;
|
|
--color-text-on-dark-muted: #B6BFCC;
|
|
|
|
--color-bg-default: #FFFFFF;
|
|
--color-bg-subtle: #F5F7FA;
|
|
--color-bg-elevated: #FFFFFF;
|
|
--color-bg-dark: #0B1F3A;
|
|
--color-bg-dark-elevated: #13294B;
|
|
|
|
--color-border-default: #CCD3DC;
|
|
--color-border-subtle: #E5E9EE;
|
|
--color-border-on-dark: #1F3252;
|
|
|
|
/* ---- SEMANTIC COLORS ---- */
|
|
--color-success: #1F8B4C;
|
|
--color-warning: #C29327;
|
|
--color-error: #C8102E;
|
|
--color-info: #1E5BA8;
|
|
|
|
/* ---- TYPOGRAPHY: families ---- */
|
|
--font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
/* ---- TYPOGRAPHY: sizes (rem-based, root = 16px) ---- */
|
|
--text-overline: 0.75rem; /* 12px */
|
|
--text-body-sm: 0.875rem; /* 14px */
|
|
--text-body-md: 1rem; /* 16px */
|
|
--text-body-lg: 1.25rem; /* 20px */
|
|
--text-h4: 1.125rem; /* 18px */
|
|
--text-h3: 1.375rem; /* 22px */
|
|
--text-h2: 1.75rem; /* 28px */
|
|
--text-h1: 2.25rem; /* 36px */
|
|
--text-display-md: 2.75rem; /* 44px */
|
|
--text-display-lg: 3.5rem; /* 56px */
|
|
--text-display-xl: 4.5rem; /* 72px */
|
|
|
|
/* ---- TYPOGRAPHY: line heights (per Design Handoff section 2.2) ---- */
|
|
--leading-display-xl: 1.05;
|
|
--leading-display-lg: 1.10;
|
|
--leading-display-md: 1.15;
|
|
--leading-h1: 1.20;
|
|
--leading-h2: 1.25;
|
|
--leading-h3: 1.30;
|
|
--leading-h4: 1.35;
|
|
--leading-body-lg: 1.55;
|
|
--leading-body-md: 1.60;
|
|
--leading-body-sm: 1.50;
|
|
--leading-overline: 1.40;
|
|
|
|
/* ---- TYPOGRAPHY: weights ---- */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* ---- TYPOGRAPHY: tracking ---- */
|
|
--tracking-tight: -0.02em; /* display */
|
|
--tracking-snug: -0.01em; /* headings */
|
|
--tracking-normal: 0; /* body */
|
|
--tracking-overline: 0.08em; /* eyebrows, all-caps */
|
|
|
|
/* ---- SPACING (8-pt grid) ---- */
|
|
--space-0: 0;
|
|
--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 */
|
|
--space-20: 5rem; /* 80px */
|
|
--space-24: 6rem; /* 96px */
|
|
--space-32: 8rem; /* 128px */
|
|
|
|
/* ---- LAYOUT: container & grid ---- */
|
|
--container-max: 1280px;
|
|
--container-padding-mobile: 1.5rem; /* 24px */
|
|
--container-padding-tablet: 2rem; /* 32px */
|
|
--container-padding-desktop: 4rem; /* 64px */
|
|
|
|
--gutter-mobile: 1rem; /* 16px */
|
|
--gutter-tablet: 1rem; /* 16px */
|
|
--gutter-desktop: 1.5rem; /* 24px */
|
|
|
|
/* ---- BORDER RADIUS ---- */
|
|
--radius-none: 0;
|
|
--radius-sm: 2px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 8px;
|
|
--radius-pill: 9999px;
|
|
--radius-full: 50%;
|
|
|
|
/* ---- BORDER WIDTHS ---- */
|
|
--border-thin: 1px;
|
|
--border-default: 2px;
|
|
--border-thick: 3px;
|
|
|
|
/* ---- SHADOWS ---- */
|
|
--shadow-none: none;
|
|
--shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.05);
|
|
--shadow-sm: 0 2px 4px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(11, 31, 58, 0.10), 0 2px 4px rgba(11, 31, 58, 0.06);
|
|
--shadow-lg: 0 12px 24px rgba(11, 31, 58, 0.14), 0 4px 8px rgba(11, 31, 58, 0.08);
|
|
--shadow-glow-gold: 0 0 24px rgba(201, 164, 90, 0.35);
|
|
|
|
/* ---- Z-INDEX SCALE ---- */
|
|
--z-base: 1;
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1100;
|
|
--z-fixed: 1200;
|
|
--z-modal-backdrop: 1300;
|
|
--z-modal: 1310;
|
|
--z-popover: 1400;
|
|
--z-toast: 1500;
|
|
|
|
/* ---- MOTION: easing ---- */
|
|
--ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* premium snap */
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-linear: linear;
|
|
|
|
/* ---- MOTION: durations ---- */
|
|
--duration-instant: 100ms; /* micro-interactions */
|
|
--duration-fast: 150ms; /* button hover, focus */
|
|
--duration-default: 250ms; /* card hover, accordion */
|
|
--duration-slow: 400ms; /* modal, drawer */
|
|
--duration-deliberate: 600ms; /* hero animations */
|
|
|
|
/* ---- A11Y / TOUCH ---- */
|
|
--tap-target-min: 44px; /* WCAG AA + Apple HIG */
|
|
--focus-ring-width: 2px;
|
|
--focus-ring-offset: 2px;
|
|
--focus-ring-color: var(--color-info);
|
|
|
|
/* ---- BREAKPOINTS (used in @media; here for reference) ----
|
|
xs: 0 — mobile portrait (375px reference)
|
|
sm: 640px — mobile landscape, small tablets
|
|
md: 768px — tablet portrait
|
|
lg: 1024px — tablet landscape, small laptop
|
|
xl: 1280px — desktop default
|
|
2xl: 1536px — large desktop
|
|
*/
|
|
}
|
|
|
|
/* ============================================================================
|
|
Reduced motion — respect user preference (Design Handoff section 5.5)
|
|
============================================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|