/* * ViaggiInChiaro * Silktide Consent Manager * Versione responsive 1.3 */ /* ========================================================= BASE ========================================================= */ #stcm-wrapper { --primaryColor: #2f6554; --backgroundColor: #ffffff; --textColor: #202824; --iconColor: #2f6554; --iconBackgroundColor: #ffffff; --fontFamily: inherit; } /* ========================================================= BANNER ========================================================= */ #stcm-wrapper #stcm-banner { width: 580px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 24px 26px; background: #ffffff; color: #202824; border: 1px solid #dce5e1; border-radius: 18px; box-shadow: 0 12px 35px rgba(29, 55, 45, 0.16), 0 2px 8px rgba(29, 55, 45, 0.08); } #stcm-wrapper #stcm-banner p { margin: 0 0 15px; color: #3d4944; font-size: 15px; line-height: 1.55; } /* ========================================================= DESKTOP Centriamo noi il banner. Silktide è configurato come bottomLeft. ========================================================= */ @media (min-width: 768px) { #stcm-wrapper #stcm-banner.stcm-pos-bottom-left { left: 50% !important; right: auto !important; bottom: 18px !important; transform: translateX(-50%) !important; margin: 0 !important; } } /* ========================================================= PULSANTI Accetta e Rifiuta uguali ========================================================= */ #stcm-wrapper .stcm-button, #stcm-wrapper .stcm-button-primary, #stcm-wrapper .stcm-button-secondary { box-sizing: border-box; padding: 10px 20px; background: #2f6554; color: #ffffff; border: 2px solid #2f6554; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } #stcm-wrapper .stcm-button:hover, #stcm-wrapper .stcm-button-primary:hover, #stcm-wrapper .stcm-button-secondary:hover { background: #244f42; border-color: #244f42; color: #ffffff; transform: translateY(-1px); } /* ========================================================= PERSONALIZZA ========================================================= */ #stcm-wrapper #stcm-banner .stcm-preferences-button { background: transparent; color: #2f6554; border: 0; padding: 10px 2px; font-size: 15px; font-weight: 600; cursor: pointer; } #stcm-wrapper #stcm-banner .stcm-preferences-button:hover { color: #244f42; text-decoration: underline; } #stcm-wrapper #stcm-banner .stcm-preferences-button span { color: inherit; } /* ========================================================= AZIONI ========================================================= */ #stcm-wrapper #stcm-banner .stcm-actions { gap: 12px; margin-top: 20px; } #stcm-wrapper #stcm-banner .stcm-actions-row { gap: 12px; } /* ========================================================= MODALE PREFERENZE ========================================================= */ #stcm-wrapper #stcm-modal { box-sizing: border-box; background: #ffffff; color: #202824; border: 1px solid #dce5e1; border-radius: 18px; padding: 28px; box-shadow: 0 16px 45px rgba(29, 55, 45, 0.18), 0 3px 10px rgba(29, 55, 45, 0.08); } #stcm-wrapper #stcm-modal h1 { color: #202824; font-size: 25px; font-weight: 650; } #stcm-wrapper #stcm-modal p { color: #59645f; font-size: 15px; line-height: 1.55; opacity: 1; } #stcm-wrapper #stcm-modal legend { color: #26322d; font-size: 16px; font-weight: 700; } /* ========================================================= CATEGORIE ========================================================= */ #stcm-wrapper #stcm-modal fieldset { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid #e6ece9; } #stcm-wrapper #stcm-modal fieldset:last-of-type { border-bottom: 0; } /* ========================================================= SWITCH ========================================================= */ #stcm-wrapper #stcm-modal .stcm-toggle-track { background: #dfe5e2; } #stcm-wrapper #stcm-modal .stcm-toggle-thumb { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } #stcm-wrapper #stcm-modal .stcm-toggle input:checked + .stcm-toggle-track { background: #2f6554; } #stcm-wrapper #stcm-modal .stcm-toggle-off { color: #414a46; } #stcm-wrapper #stcm-modal .stcm-toggle-on { color: #ffffff; } #stcm-wrapper #stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track { background: #8aa297; opacity: 1; filter: none; } /* ========================================================= PULSANTE X ========================================================= */ #stcm-wrapper #stcm-modal .stcm-modal-close { color: #2f6554; background: #f5f8f6; border-radius: 10px; } #stcm-wrapper #stcm-modal .stcm-modal-close:hover { background: #e9f0ed; } #stcm-wrapper #stcm-modal .stcm-modal-close svg { fill: #2f6554; } /* ========================================================= LINK ========================================================= */ #stcm-wrapper a { color: #2f6554; } #stcm-wrapper a:hover { color: #244f42; } #stcm-wrapper #stcm-modal .stcm-credit-link { color: #77827d; font-size: 12px; opacity: 0.75; } /* ========================================================= ICONA PREFERENZE ========================================================= */ #stcm-wrapper #stcm-icon { width: 48px; height: 48px; background: #2f6554; border: 2px solid #ffffff; box-shadow: 0 4px 14px rgba(29, 55, 45, 0.22); } #stcm-wrapper #stcm-icon svg { fill: #ffffff; } /* ========================================================= ACCESSIBILITÀ ========================================================= */ #stcm-wrapper a:focus, #stcm-wrapper button:focus, #stcm-wrapper #stcm-icon:focus { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2f6554; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* * Questa è la parte decisiva. * * Il banner NON viene centrato tramite transform. * Viene semplicemente ancorato a 12px * da entrambi i lati dello schermo. */ #stcm-wrapper #stcm-banner, #stcm-wrapper #stcm-banner.stcm-pos-bottom-left, #stcm-wrapper #stcm-banner.stcm-loaded { position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; padding: 18px !important; border-radius: 14px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #stcm-wrapper #stcm-banner p { font-size: 14px; line-height: 1.45; } /* * Azioni verticali su mobile. */ #stcm-wrapper #stcm-banner .stcm-actions { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 8px !important; } #stcm-wrapper #stcm-banner .stcm-actions-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 8px !important; } #stcm-wrapper #stcm-banner .stcm-button, #stcm-wrapper #stcm-banner .stcm-button-primary, #stcm-wrapper #stcm-banner .stcm-button-secondary { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; font-size: 14px; text-align: center; } #stcm-wrapper #stcm-banner .stcm-preferences-button { display: block !important; width: 100% !important; padding: 8px 4px !important; font-size: 14px; text-align: center; } /* ===================================================== MODALE MOBILE ===================================================== */ #stcm-wrapper #stcm-modal { position: fixed !important; left: 12px !important; right: 12px !important; top: 12px !important; bottom: 12px !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: 0 !important; padding: 20px 16px !important; transform: none !important; box-sizing: border-box !important; border-radius: 14px; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #stcm-wrapper #stcm-modal h1 { padding-right: 38px; font-size: 21px; line-height: 1.2; } #stcm-wrapper #stcm-modal p { font-size: 14px; line-height: 1.45; } #stcm-wrapper #stcm-modal fieldset { margin-bottom: 16px; padding-bottom: 16px; } #stcm-wrapper #stcm-modal legend { font-size: 15px; } #stcm-wrapper #stcm-modal .stcm-consent-row { gap: 12px; } #stcm-wrapper #stcm-icon { width: 44px; height: 44px; left: 12px !important; right: auto !important; bottom: 12px !important; } } /* ========================================================= TELEFONI MOLTO PICCOLI ========================================================= */ @media (max-width: 380px) { #stcm-wrapper #stcm-banner, #stcm-wrapper #stcm-banner.stcm-pos-bottom-left, #stcm-wrapper #stcm-banner.stcm-loaded { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 15px !important; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } #stcm-wrapper #stcm-modal { left: 8px !important; right: 8px !important; top: 8px !important; bottom: 8px !important; padding: 17px 14px !important; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } #stcm-wrapper #stcm-banner p, #stcm-wrapper #stcm-modal p { font-size: 13.5px; } #stcm-wrapper #stcm-modal h1 { font-size: 20px; } }