/* ============================================================ Athestate — Design Tokens (consomme les variables --as-*) ============================================================ Ces styles consomment les variables CSS injectees dans le par `athestate_inject_design_tokens()` (functions.php). Ils appliquent les reglages du Customizer (panels "Global Layout", "Hero Defaults", "Card Hover") au site sans toucher au frontend.css de base. Patcher uniquement `design-tokens.css` isole les evolutions futures des reglages de design du corps principal. Chaque bloc ci-dessous consomme une variable ; si la variable n'est pas definie (Customizer pas encore sauvegarde, theme jamais bootte), le fallback inline (deuxieme argument de var()) prend le relais. ============================================================ */ /* Container max-width des sections (defaut 1200) */ .athestate-container, .athestate-hero__container, .athestate-featured-properties__container, .athestate-services-grid__container, .athestate-team__container, .athestate-testimonials__container, .athestate-stats-grid__container, .athestate-faq__container, .athestate-properties__container, .athestate-page-content .athestate-constrained { max-width: var(--as-container-max, 1200px); } /* Section padding top / bottom (defaut 60 60) */ .athestate-section { padding-top: var(--as-section-pad-top, 60px); padding-bottom: var(--as-section-pad-bottom, 60px); } /* Border radius (defaut 0) */ .athestate-card, .athestate-featured-properties__card, .athestate-services-grid__card, .athestate-team__card, .athestate-testimonials__card, .athestate-property-archive__card, .athestate-button { border-radius: var(--as-border-radius, 0px); } /* Card hover : lift, shadow, border (tous lus depuis --as-*) */ @media (prefers-reduced-motion: no-preference) { .athestate-featured-properties__card, .athestate-services-grid__card, .athestate-team__card, .athestate-property-archive__card, .athestate-section .wp-block-post { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .athestate-featured-properties__card:hover, .athestate-services-grid__card:hover, .athestate-team__card:hover, .athestate-property-archive__card:hover { transform: translateY(calc(-1 * var(--as-card-lift, 4px))); box-shadow: var(--as-card-shadow, 0 4px 12px rgba(15, 23, 42, .12)); border-color: var(--as-gold, #C58A3E); border-width: var(--as-card-border-width, 1px); } } /* Hero overlay : applique via var CSS */ .athestate-page-hero__overlay, .athestate-hero__overlay { background: var(--as-hero-overlay, rgba(11, 27, 45, .5)); } /* Hero text : max width + align */ .athestate-page-hero__content, .athestate-hero__content { max-width: var(--as-hero-text-max, 640px); margin-left: var(--as-hero-align, auto); margin-right: var(--as-hero-align, auto); text-align: var(--as-hero-align, center); } /* Compat : coins arrondis sur les boutons (utilise deja --as-border-radius) */ .athestate-button, button.athestate-button, a.athestate-button { border-radius: var(--as-border-radius, 0px); } /* ============================================================ Block variants (declares via block.json -> styles[]) ============================================================ */ /* Property archive : variant "compact" (cards plus petites) */ .is-style-compact.athestate-property-archive__card .athestate-property-archive__image, .athestate-property-archive__card.is-style-compact .athestate-property-archive__image { aspect-ratio: 16 / 10; } .is-style-compact .athestate-property-archive__content, .athestate-property-archive__card.is-style-compact .athestate-property-archive__content { padding: 12px; } .is-style-compact .athestate-property-archive__title, .athestate-property-archive__card.is-style-compact .athestate-property-archive__title { font-size: 0.95rem; } /* Property archive : variant "overlay" (texte sur image) */ .is-style-overlay .athestate-property-archive__card, .athestate-property-archive__card.is-style-overlay { position: relative; border: 0; background: transparent; color: #fff; } .is-style-overlay .athestate-property-archive__image, .athestate-property-archive__card.is-style-overlay .athestate-property-archive__image { position: relative; } .is-style-overlay .athestate-property-archive__image::after, .athestate-property-archive__card.is-style-overlay .athestate-property-archive__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; } .is-style-overlay .athestate-property-archive__content, .athestate-property-archive__card.is-style-overlay .athestate-property-archive__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; z-index: 1; color: #fff; } /* Services grid : variant "stacked" (1 per row) */ .is-style-stacked .athestate-services-grid, .athestate-services-grid.is-style-stacked, .is-style-stacked.athestate-section .athestate-services-grid { grid-template-columns: 1fr; } /* Services grid : variant "bordered" (cards avec bordure accent) */ .is-style-bordered .athestate-services-grid__card, .athestate-services-grid__card.is-style-bordered { border: 1px solid var(--as-border, #E2E8F0); border-left: 4px solid var(--as-gold, #C58A3E); padding: 24px; background: var(--as-offwhite, #FAFAFA); } /* Stat item : variant "light" */ .is-style-light.athestate-stat-item, .athestate-stat-item.is-style-light { background: var(--as-slate, #F0F4F8); padding: 24px; border-radius: var(--as-border-radius, 0px); } /* Stat item : variant "bordered" */ .is-style-bordered.athestate-stat-item, .athestate-stat-item.is-style-bordered { border: 1px solid var(--as-border, #E2E8F0); padding: 24px; background: #fff; }