/** * Tacticalia Business Discovery * * Layout generale Homepage Retailers & Technicians. * * Questo file definisce: * * - override mirato del container Astra; * - larghezza generale della homepage; * - matrice cromatica ufficiale Tacticalia; * - stati interattivi comuni; * - protezione dagli hover/focus blu ereditati da Astra; * - responsive generale. */ /* * ============================================================ * ASTRA * ============================================================ * * Astra applica normalmente una larghezza massima * al container principale. * * Sulla sola pagina Retailers & Technicians (ID 493) * lasciamo invece che sia Business Discovery * a governare la larghezza del contenuto. * * Header e footer non vengono modificati. */ body.page-id-493 #content.site-content>.ast-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* * ============================================================ * REMOVE ASTRA TOP SPACING * ============================================================ * * Elimina lo spazio verticale tra header Tacticalia * e Hero della pagina Retailers. */ body.page-id-493 #primary { margin-top: 0 !important; padding-top: 0 !important; } /* * ============================================================ * BUSINESS DISCOVERY HOME * ============================================================ * * MATRICE CROMATICA UFFICIALE TACTICALIA / TFM * * Le variabili mantengono il prefisso tbdc all'interno * del plugin Discovery, ma i valori corrispondono * alla palette master Tacticalia. */ body.page-id-493 .tbdc-home { /* * -------------------------------------------------------- * BRAND / PRIMARY * -------------------------------------------------------- */ --tbdc-primary: #5B6F40; --tbdc-primary-hover: #405733; --tbdc-primary-dark: #2F3D29; --tbdc-primary-deep: #273321; --tbdc-primary-deep-alt: #3C4B2F; --tbdc-primary-soft: #F2F4EF; --tbdc-accent: #8C9470; /* * -------------------------------------------------------- * SURFACE / LAYOUT * -------------------------------------------------------- */ --tbdc-background: #F6F7F4; --tbdc-surface: #FFFFFF; --tbdc-surface-muted: #F2F4EF; --tbdc-border: #E5E9E3; --tbdc-border-strong: #CFD8CC; /* * -------------------------------------------------------- * TYPOGRAPHY * -------------------------------------------------------- */ --tbdc-text: #101820; --tbdc-text-secondary: #6D7480; --tbdc-text-muted: #9CA3AF; /* * -------------------------------------------------------- * STATES * -------------------------------------------------------- */ --tbdc-success: #3F7652; --tbdc-success-soft: #E6F2E6; --tbdc-warning: #B78632; --tbdc-warning-soft: #FFF3CD; --tbdc-danger: #B64D49; --tbdc-danger-soft: #F7E6E5; /* * -------------------------------------------------------- * INFO * -------------------------------------------------------- */ --tbdc-info: #527A91; --tbdc-info-soft: #E6EFF3; /* * -------------------------------------------------------- * COMPATIBILITÀ NOMI PRECEDENTI * -------------------------------------------------------- * * Manteniamo temporaneamente alcuni alias, * così i CSS delle sezioni già realizzate * continuano a funzionare durante la migrazione. */ --tbdc-bg: var(--tbdc-background); --tbdc-green: var(--tbdc-primary); --tbdc-green-dark: var(--tbdc-primary-dark); --tbdc-green-soft: var(--tbdc-primary-soft); --tbdc-muted: var(--tbdc-text-secondary); /* * -------------------------------------------------------- * LAYOUT * -------------------------------------------------------- * * Desktop: * wrapper principale ristretto * per aumentare lo spazio laterale. */ width: 84% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding: 0; min-height: 100vh; background: var(--tbdc-background); color: var(--tbdc-text); } /* * ============================================================ * BOX SIZING * ============================================================ */ body.page-id-493 .tbdc-home, body.page-id-493 .tbdc-home *, body.page-id-493 .tbdc-home *::before, body.page-id-493 .tbdc-home *::after { box-sizing: border-box; } /* * ============================================================ * TYPOGRAPHY BASE * ============================================================ */ body.page-id-493 .tbdc-home { color: var(--tbdc-text); font-family: "Inter", sans-serif; } body.page-id-493 .tbdc-home p { color: inherit; } /* * ============================================================ * LINKS * ============================================================ * * Gli stati interattivi Business Discovery non devono * utilizzare il blu predefinito di Astra. */ body.page-id-493 .tbdc-home a { color: var(--tbdc-primary); text-decoration-color: currentColor; } body.page-id-493 .tbdc-home a:hover, body.page-id-493 .tbdc-home a:focus { color: var(--tbdc-primary-hover); } /* * ============================================================ * BUTTONS * ============================================================ * * Reset mirato degli stati colore Astra. * * I singoli componenti possono successivamente * definire background, border e dimensioni specifiche. */ body.page-id-493 .tbdc-home button { font: inherit; } body.page-id-493 .tbdc-home button:hover, body.page-id-493 .tbdc-home button:focus, body.page-id-493 .tbdc-home button:focus-visible { border-color: inherit; outline-color: var(--tbdc-accent); } /* * ============================================================ * FORM CONTROLS * ============================================================ * * Nessun focus blu Astra. */ body.page-id-493 .tbdc-home input, body.page-id-493 .tbdc-home select, body.page-id-493 .tbdc-home textarea, body.page-id-493 .tbdc-home button { accent-color: var(--tbdc-primary); } body.page-id-493 .tbdc-home input:focus, body.page-id-493 .tbdc-home select:focus, body.page-id-493 .tbdc-home textarea:focus { outline-color: var(--tbdc-accent); } /* * Focus accessibile Tacticalia. * * Il componente può sovrascrivere questo stile * con un focus più specifico, purché rimanga * nella palette ufficiale. */ body.page-id-493 .tbdc-home a:focus-visible, body.page-id-493 .tbdc-home button:focus-visible, body.page-id-493 .tbdc-home input:focus-visible, body.page-id-493 .tbdc-home select:focus-visible, body.page-id-493 .tbdc-home textarea:focus-visible { outline: 2px solid var(--tbdc-accent); outline-offset: 2px; } /* * ============================================================ * TEXT SELECTION * ============================================================ */ body.page-id-493 .tbdc-home ::selection { background: var(--tbdc-primary); color: #FFFFFF; } /* * ============================================================ * UTILITY STATES * ============================================================ * * Classi disponibili per i componenti futuri. */ body.page-id-493 .tbdc-state--success { background: var(--tbdc-success-soft); color: var(--tbdc-success); } body.page-id-493 .tbdc-state--warning { background: var(--tbdc-warning-soft); color: var(--tbdc-warning); } body.page-id-493 .tbdc-state--danger { background: var(--tbdc-danger-soft); color: var(--tbdc-danger); } body.page-id-493 .tbdc-state--info { background: var(--tbdc-info-soft); color: var(--tbdc-info); } /* * ============================================================ * TABLET * ============================================================ * * 40px esterni per lato. */ @media (max-width: 1200px) { body.page-id-493 .tbdc-home { width: calc(100% - 80px) !important; font-family: "Inter", sans-serif; } } /* * ============================================================ * MOBILE * ============================================================ * * 12px esterni per lato. */ @media (max-width: 768px) { body.page-id-493 .tbdc-home { width: calc(100% - 24px) !important; font-family: "Inter", sans-serif; } } /* * ============================================================ * REMOVE HEADER DIVIDER * ============================================================ * * Elimina la linea di separazione tra header Tacticalia * e contenuto della pagina Retailers. */ body.page-id-493 .site-header, body.page-id-493 .main-header-bar, body.page-id-493 .ast-primary-header-bar { border-bottom: 0 !important; box-shadow: none !important; }