/* * EU harmonised notice on the legal guarantee of conformity. * * Mandatory from 27.09.2026 - Directive (EU) 2024/825, design laid down by * Implementing Regulation (EU) 2025/1960, transposed in Romania by GEO no. 18/2026. * * Markup: modules/OneShop/Resources/views/components/notice-guarantee.blade.php * Behavior: modules/oneshop/js/notice-guarantee.js */ /* The sentence that opens the notice. The Commission guidelines (2.3) require "a sentence informing consumers about their legal guarantee rights" which reveals the notice on first click or hover. */ .nagl-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0; padding: 0; font-size: 13px; line-height: 1.45; color: #6c757d; background: none; border: 0; } .nagl-line svg { flex: 0 0 auto; width: 15px; height: 15px; color: #0da487; } /* Must not grow: with flex:1 the text would span the whole container and push the link to the far right edge of the page. Keep icon, text and link together. */ .nagl-line-txt { flex: 0 1 auto; min-width: 0; } .nagl-line a { color: #0da487; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; cursor: pointer; } .nagl-line a:hover { color: #0a8069; } /* Modal holding the official notice. Rendered as a direct child of (see layouts/master.blade.php) so it is never trapped inside a stacking context created by page content - otherwise the sticky header and nav paint on top of it despite the high z-index. */ .nagl-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: none; background: rgba(0, 0, 0, .72); overflow: auto; -webkit-overflow-scrolling: touch; padding: 20px; } .nagl-modal.nagl-open { display: block; } .nagl-box { position: relative; max-width: 820px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 16px; } .nagl-close { position: absolute; top: 4px; right: 8px; width: 36px; height: 36px; border: 0; background: none; font: 400 30px/36px Arial, Helvetica, sans-serif; color: #333; cursor: pointer; } .nagl-close:hover { color: #c00; } /* The notice must stay legible at default display size (Commission guidelines, 2.3). Below ~520px the text of an A4 sheet becomes too small, so we keep a minimum width and let the container scroll horizontally instead of shrinking it. */ .nagl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nagl-notice { display: block; width: 100%; min-width: 520px; height: auto; margin: 10px 0; } .nagl-legal { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: #6c757d; } .nagl-legal a { color: #0da487; font-weight: 600; text-decoration: underline; } @media (max-width: 575px) { .nagl-line { font-size: 12px; gap: 6px; } .nagl-box { padding: 10px; } .nagl-modal { padding: 8px; } } @media print { .nagl-line, .nagl-modal { display: none !important; } }