/* Theme Name: Evok Shop Theme URI: https://shop.evokcollection.com Description: Thème enfant Storefront pour la boutique de bons cadeaux Evok Collection. Le visuel définitif sera intégré depuis la maquette Figma (Dario) — ce squelette pose les tokens (couleurs, typographies, espacements) et la structure de surcharge. Author: Milk Digital Template: storefront Version: 0.1.0 Requires PHP: 8.1 Text Domain: evok-shop */ /* ========================================================================= 1. TOKENS — à ajuster avec la charte définitive / maquette Figma ========================================================================= */ :root { /* Palette de base (placeholder sobre "maison de luxe") */ --evok-ink: #1a1a1a; /* texte principal, quasi-noir du voucher */ --evok-paper: #fcfbf9; /* fond, blanc légèrement chaud */ --evok-stone: #6b6b66; /* texte secondaire */ --evok-line: #e4e1db; /* filets, bordures */ --evok-accent: #8a7350; /* accent bronze discret — sera remplacé par la charte */ /* Accent décliné par hôtel : surchargé via la classe body .evok-hotel-{slug} (voir functions.php). Valeurs placeholder en attendant la charte. */ --hotel-accent: var(--evok-accent); /* Typographies. Placeholder Google-free : on charge les vraies fontes Evok en @font-face dès réception des fichiers licenciés (Dario). */ --font-display: Georgia, 'Times New Roman', serif; /* → serif maison (italique sur les éléments dynamiques) */ --font-body: 'Helvetica Neue', Arial, sans-serif; /* → sans-serif maison */ /* Échelle typo */ --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.7rem; --text-2xl: 2.4rem; /* Espacements */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 2rem; --space-4: 4rem; } /* Déclinaisons d'accent par hôtel — valeurs provisoires, à caler sur la charte de chaque maison. La classe est posée automatiquement sur . */ body.evok-hotel-brap { --hotel-accent: #7d6a4f; } body.evok-hotel-nolp { --hotel-accent: #4f5d6b; } body.evok-hotel-cdv { --hotel-accent: #6b4f5d; } body.evok-hotel-bram { --hotel-accent: #8a5a3c; } body.evok-hotel-nolv { --hotel-accent: #3c5a5a; } /* ========================================================================= 2. FONDATIONS ========================================================================= */ body { background: var(--evok-paper); color: var(--evok-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .site-title, .woocommerce-products-header__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; color: var(--evok-ink); } a { color: var(--evok-ink); text-decoration-color: var(--evok-line); text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover { color: var(--hotel-accent); text-decoration-color: currentColor; } /* ========================================================================= 3. HEADER / FOOTER — épurés en attendant la maquette ========================================================================= */ .site-header { background: var(--evok-paper); border-bottom: 1px solid var(--evok-line); } .storefront-primary-navigation, .main-navigation ul li a { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; } .site-footer { background: var(--evok-ink); color: var(--evok-paper); font-size: var(--text-sm); } .site-footer a { color: var(--evok-paper); } /* ========================================================================= 4. WOOCOMMERCE — boutons, fiches, panier ========================================================================= */ /* Boutons : rectangles nets, pas d'arrondi, respiration généreuse — registre luxe */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--evok-ink); color: var(--evok-paper); border-radius: 0; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.9em 2.2em; transition: background 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--hotel-accent); color: var(--evok-paper); } /* Prix : le serif maison, comme les éléments "précieux" du voucher */ .woocommerce div.product p.price, .woocommerce ul.products li.product .price { font-family: var(--font-display); font-style: italic; color: var(--evok-ink); font-size: var(--text-lg); } /* Grille produits aérée */ .woocommerce ul.products li.product { text-align: center; margin-bottom: var(--space-4); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; } /* Messages / notices (dont le verrou panier mono-hôtel) : ton discret, filet accent */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--evok-paper); border-top-color: var(--hotel-accent); color: var(--evok-ink); } /* ========================================================================= 5. ACCESSIBILITÉ & MOTION ========================================================================= */ :focus-visible { outline: 2px solid var(--hotel-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }