/* ========================================================================== Projéta - Jetons du design system « Séri Pop » -------------------------------------------------------------------------- Toutes les valeurs « de marque » vivent ici : encres, papiers, typos, rayons, traits, ombres. Modifier ce fichier suffit à re-teinter le site. ========================================================================== */ :root { /* --- Encres (aplats francs - les mélanges se font en surimpression, jamais en dégradé) ------------------------------------------------ */ --rose: #FA3C9B; /* primaire / accent */ --bleu: #2732E8; /* primaire */ --jaune: #FFD400; /* signal (prévente, panier) */ --vert: #00A95C; /* dispo / en stock */ --rouge: #FF4438; /* alerte / épuisé */ --ink: #141414; /* encre : texte, traits, fonds noirs */ /* --- Papiers ----------------------------------------------------------- */ --paper: #FBF6EC; /* fond principal */ --paper-alt: #F2EBDC; /* fond alterné de section */ /* --- Typographies ------------------------------------------------------- Syne : titres & texte. Space Mono : étiquettes & données. */ --font-titre: 'Syne', system-ui, sans-serif; --font-mono: 'Space Mono', monospace; /* --- Rayons -------------------------------------------------------------- */ --rayon-chip: 8px; --rayon-carte: 12px; --rayon-bloc: 18px; /* cartes flottantes / gros blocs */ --rayon-pill: 999px; /* --- Traits (le « trait d'atelier ») -------------------------------------- */ --trait: 2px solid var(--ink); --trait-photo: 3px solid var(--ink); /* --- Surimpression --------------------------------------------------------- Double ombre « registration » : bleu en haut-gauche, rose en bas-droite, zéro flou. Portée par les photos produit et les visuels forts. */ --ombre-top: rgba(255, 213, 0, 0.72); --ombre-bottom: rgba(250, 60, 155, 0.72); --ombre-double: -7px -7px 0 var(--ombre-top), 7px 7px 0 var(--ombre-bottom); /* Au survol les deux calques s'écartent - mêmes décalages pour les photos cadrées (box-shadow) et les détourés (filtre, ci-dessous) : la petite transition est identique dans les deux traitements. */ --ombre-double-survol: -10px -6px 0 var(--ombre-top), 10px 9px 0 var(--ombre-bottom); /* Décalage du calque bleu des titres en surimpression - en em, pour qu'il suive la taille du texte qui le porte */ --off: .05em; /* --- Contour des images détourées (PNG transparents) ----------------------- Une bordure ferait un rectangle : on fabrique le contour noir en empilant des drop-shadow qui épousent l'alpha de l'image. Quatre passes suffisent - chaque drop-shadow coûte un rendu, et elles s'animent dans la grille. */ --contour-detoure: drop-shadow(2.2px 0 0 var(--ink)) drop-shadow(-2.2px 0 0 var(--ink)) drop-shadow(0 2.2px 0 var(--ink)) drop-shadow(0 -2.2px 0 var(--ink)); /* La même double ombre couleur, en version filtre (pour les détourés) */ --ombre-double-filtre: drop-shadow(-7px -7px 0 var(--ombre-top)) drop-shadow(7px 7px 0 var(--ombre-bottom)); --ombre-double-filtre-survol: drop-shadow(-10px -6px 0 var(--ombre-top)) drop-shadow(10px 9px 0 var(--ombre-bottom)); /* --- Gabarit ----------------------------------------------------------------- */ --largeur-site: 1180px; --section-pad-y: 64px; --section-pad-x: 40px; /* Hauteur (approx.) de la barre du haut : sert à pousser le pied de page sous le bas de la fenêtre sans JS (min-height du
). */ --barre-h: 70px; /* Encre d'accent de la page courante - posée sur
par le header selon la section (voir pageMethod encre()). */ --accent: var(--bleu); /* --- Trames ----------------------------------------------------------------- Pas de la grille de trame ; les couleurs et orientations se règlent par classes utilitaires (voir base.css). */ --trame-pas: 12px; /* --- Produits ------------------------------------------------------------------ Chaque visuel (produit ou tas) vit dans un espace de même proportion et s'y loge en « contain » - les formats verticaux ne dévorent plus la grille. */ --produit-ratio: none; /* --- Logo (SVG monochrome appliqué en masque : il prend la couleur du background de l'élément qui le porte) -------------------------------- */ --logo: url("../img/logo.svg"); /* --- Hirondelle (repère de calage : rond + croix) ---------------------------- Appliquée en masque comme le logo : l'élément qui la porte lui donne sa couleur par son background. Sert aux séparateurs et aux puces. */ --hirondelle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 0v24M0 12h24' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); /* --- Surimpression des titres : deux calques + un mode de fusion ------------- --titre-top : la couleur du calque du dessus (le ::after décalé) ; --titre-bottom : celle du texte en dessous ; --titre-blend : le mode de fusion du calque du dessus (multiply = encres transparentes, normal = encre opaque). Redéfinis par encre de page ci-dessous. */ --titre-top: var(--bleu); --titre-bottom: var(--rose); --titre-blend: multiply; } /* Chaque page de premier niveau imprime ses titres avec son couple d'encres (posé par data-encre sur
, voir header.php). Les sous-pages héritent du couple de leur section. */ [data-encre="vert"] { --titre-top: var(--vert); --titre-bottom: var(--rose); --titre-blend: multiply; } [data-encre="rose"] { --titre-top: var(--rose); --titre-bottom: var(--bleu); --titre-blend: multiply; } [data-encre="bleu"] { --titre-top: var(--bleu); --titre-bottom: var(--rose); --titre-blend: multiply; } [data-encre="rouge"] { --titre-top: var(--rouge); --titre-bottom: var(--jaune); --titre-blend: multiply; } /* Jaune (Shop) : le jaune passe AU-DESSUS en encre opaque, sinon il disparaît dans le mélange. */ [data-encre="jaune"] { --titre-top: var(--jaune); --titre-bottom: var(--rose); --titre-blend: normal; } /* La barre passe à deux rangées (logo + panier, puis nav) dès que les trois éléments ne tiennent plus sur une ligne (~800px) - même seuil que la règle .barre de layout.css, d'où ce breakpoint distinct. */ @media (max-width: 820px) { :root { --barre-h: 108px; /* logo + rangée de nav */ } } @media (max-width: 700px) { :root { --section-pad-y: 44px; --section-pad-x: 20px; } }