/* Theme Name: FMATIK Theme URI: https://www.fmatik.com Author: FMATIK Description: Tema WordPress minimale e indipendente per il catalogo/vetrina F-MATIK. Nessuna dipendenza da Avada, Fusion Builder o WooCommerce. Version: 1.15.1 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: fmatik */ /* ========================================================================== DESIGN TOKENS Sistema chiaro: bianco/grigio chiaro di base, blu profondo istituzionale, verde brillante riservato a CTA/stati attivi, antracite per i testi. ========================================================================== */ :root { --fm-bg: #ffffff; --fm-bg-elevated: #f3f5f7; --fm-bg-card: #ffffff; --fm-bg-card-hover: #f3f5f7; --fm-border: #e4e8ec; --fm-border-strong: #d9dee3; --fm-text: #1a1f24; --fm-text-secondary: #48525c; --fm-text-tertiary: #667180; --fm-blue: #0b1f3a; --fm-blue-light: #16305a; --fm-accent: #0b1f3a; --fm-accent-light: #16305a; --fm-cta: #39d353; --fm-cta-dark: #1fa83e; --fm-success: #16803d; --fm-radius-sm: 10px; --fm-radius: 18px; --fm-radius-lg: 24px; --fm-shadow: 0 20px 50px rgba(15,23,42,0.10); --fm-shadow-sm: 0 8px 24px rgba(15,23,42,0.08); --fm-ease: cubic-bezier(0.16, 1, 0.3, 1); --fm-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* --- Reset minimo --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Un plugin di terze parti (visa-acceptance-solutions, CSS dei suoi blocchi) definisce ".woocommerce { display: grid }" per un proprio wrapper interno, ma questa classe e' la STESSA che WooCommerce aggiunge automaticamente al (e al div contenuto nativo) di OGNI pagina WooCommerce: la regola del plugin finiva quindi per rendere anche stesso una CSS Grid con un'unica colonna "auto". Una grid track "auto" si dimensiona sul min/max-content del suo contenuto: bastava un'immagine prodotto con risoluzione nativa grande (es. 1024px) per far crescere l'intera pagina fino a quella larghezza, indipendente dal viewport reale — la causa esatta per cui il sito richiedeva uno zoom-out su mobile per essere leggibile ("desktop compresso"). Override scoped con selettori piu' specifici (elemento + classe), che non tocca nessun'altra regola: ripristina solo il comportamento a blocco normale che questi due elementi hanno sempre avuto in questo tema. */ body.woocommerce, div.woocommerce { display: block; } body { margin: 0; font-family: var(--fm-font); color: var(--fm-text); background: var(--fm-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3 { letter-spacing: -0.02em; } /* ========================================================================== HEADER â€” vetro sfumato, minimale ========================================================================== */ .fm-site-header { background: rgba(11,31,58,0.96); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,0.12); position: sticky; top: 0; z-index: 1000; /* Header istituzionale blu profondo: testi bianchi, scoped solo qui */ --fm-text: #ffffff; --fm-text-secondary: rgba(255,255,255,0.78); --fm-text-tertiary: rgba(255,255,255,0.6); } .fm-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .fm-logo img { height: 34px; width: 224px; display: block; object-fit: contain; } .fm-logo { flex-shrink: 0; transition: opacity 0.2s var(--fm-ease); } .fm-logo:hover { opacity: 0.75; } .fm-nav { display: flex; align-items: center; gap: 32px; } .fm-nav > ul { display: flex; align-items: center; gap: 32px; } .fm-nav a { color: var(--fm-text-secondary); text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: 0.01em; transition: color 0.2s var(--fm-ease); } .fm-nav a:hover { color: var(--fm-cta); } a.fm-nav-cta, .fm-nav-cta > a { background: var(--fm-cta); color: var(--fm-blue) !important; padding: 8px 18px; border-radius: 100px; font-weight: 600 !important; transition: background 0.2s var(--fm-ease), transform 0.2s var(--fm-ease); } a.fm-nav-cta:hover, .fm-nav-cta > a:hover { background: var(--fm-cta-dark); transform: translateY(-1px); } /* Dropdown Katalog e sottomenu WordPress */ .fm-has-dropdown, .menu-item-has-children { position: relative; } .fm-dropdown, .sub-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 12px; background: #ffffff; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 10px; min-width: 280px; max-height: 70vh; overflow-y: auto; z-index: 1001; /* Pannello chiaro sospeso sotto l'header blu: testo scuro, scoped qui */ --fm-text: #1a1f24; --fm-text-secondary: #48525c; } .fm-has-dropdown:hover::after, .fm-has-dropdown:focus-within::after, .menu-item-has-children:hover::after, .menu-item-has-children:focus-within::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; z-index: 1001; } .fm-has-dropdown:hover .fm-dropdown, .fm-has-dropdown:focus-within .fm-dropdown, .menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus-within .sub-menu { display: block; } .fm-dropdown a, .sub-menu a { color: var(--fm-text) !important; display: block; padding: 10px 12px; border-radius: var(--fm-radius-sm); font-weight: 500 !important; font-size: 13px; transition: background 0.15s var(--fm-ease); } .fm-dropdown a:hover, .sub-menu a:hover { background: var(--fm-bg-elevated); color: var(--fm-blue) !important; } /* Hamburger mobile */ .fm-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .fm-burger span { width: 22px; height: 2px; background: var(--fm-text); border-radius: 2px; } @media (max-width: 880px) { .fm-nav { display: none; } .fm-burger { display: flex; } /* Ordine icone header su mobile: logo, ricerca, carrello, hamburger (hamburger resta ultimo, come prima dello spostamento del carrello dopo "ZA MONTERE" richiesto solo per desktop). */ .fm-search-toggle { order: 1; } #fm-cart-link { order: 2; } .fm-burger { order: 3; } /* Fix overflow orizzontale mobile: il logo (rapporto 6.6:1) a 34px di altezza occupava ~225px, non lasciando spazio per ricerca/carrello/hamburger e spingendo quest'ultimo fuori dal viewport visibile. Ridotto a 24px (~159px di larghezza) e spaziature/padding dell'header ristretti solo su mobile. */ .fm-header-inner { gap: 12px; padding: 16px 16px; } .fm-logo img { height: 24px; width: 158px; } .fm-nav.fm-nav-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border-bottom: 1px solid var(--fm-border); padding: 20px 24px; gap: 18px; /* Pannello mobile chiaro sotto l'header blu: testo scuro, scoped qui */ --fm-text: #1a1f24; --fm-text-secondary: #48525c; --fm-text-tertiary: #667180; } .fm-nav.fm-nav-open > ul { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; } .fm-has-dropdown .fm-dropdown, .menu-item-has-children .sub-menu { display: none; position: static; box-shadow: none; border: none; background: var(--fm-bg-elevated); margin-top: 10px; width: 100%; } .fm-has-dropdown.fm-dropdown-open .fm-dropdown, .menu-item-has-children.fm-dropdown-open .sub-menu { display: block; } .fm-has-dropdown:hover::after, .fm-has-dropdown:focus-within::after, .menu-item-has-children:hover::after, .menu-item-has-children:focus-within::after { content: none; } /* ZA FIRME / PRIJAVA nel pannello mobile: le classi fm-nav-monteri e fm-nav-prijava hanno di base un pill bianco traslucido con testo bianco, pensato per la navbar blu scura del desktop. Sul pannello mobile aperto (sfondo bianco) risultavano invisibili. Qui riusiamo gli stessi colori già previsti per l'hover desktop, resi permanenti su mobile (dove l'hover non esiste), e le separiamo dai link di categoria con un divider. */ .fm-nav.fm-nav-open .fm-nav-monteri { width: 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--fm-border); } .fm-nav.fm-nav-open a.fm-nav-monteri, .fm-nav.fm-nav-open .fm-nav-monteri > a { background: var(--fm-cta); border-color: var(--fm-cta); color: var(--fm-blue) !important; } .fm-nav.fm-nav-open a.fm-nav-prijava, .fm-nav.fm-nav-open .fm-nav-prijava > a { background: #0071e3; border-color: #0071e3; color: #ffffff !important; } } /* ========================================================================== CONTENUTO ========================================================================== */ .fm-content { min-height: 60vh; } .fm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .fm-eyebrow { display: inline-block; color: var(--fm-accent-light); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; margin-bottom: 10px; } .fm-breadcrumb { font-size: 13px; color: var(--fm-text-tertiary); margin: 28px 0 12px; } .fm-breadcrumb a { color: var(--fm-text-tertiary); text-decoration: none; transition: color 0.15s var(--fm-ease); } .fm-breadcrumb a:hover { color: var(--fm-text-secondary); } .fm-h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; margin: 0 0 18px; color: var(--fm-text); } .fm-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0 0 28px; color: var(--fm-text); } .fm-lead { font-size: 17px; line-height: 1.65; color: var(--fm-text-secondary); max-width: 720px; margin: 0 0 24px; } .fm-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(11,31,58,0.08); color: var(--fm-blue); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; padding: 9px 18px; border-radius: 100px; margin-bottom: 36px; } /* --- Griglia e card prodotto/categoria --- */ .fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 56px; } .fm-grid--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fm-card { background: var(--fm-bg-card); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); box-shadow: var(--fm-shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s var(--fm-ease), border-color 0.35s var(--fm-ease), box-shadow 0.35s var(--fm-ease); } .fm-card:hover { transform: translateY(-4px); border-color: var(--fm-border-strong); box-shadow: var(--fm-shadow); } .fm-card-media { display: block; background: var(--fm-bg-elevated); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 20px; } .fm-card-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.4s var(--fm-ease); } .fm-card:hover .fm-card-media img { transform: scale(1.04); } /* Centratura esplicita delle immagini "Slični proizvodi" SOLO su mobile (≤600px), come richiesto: su desktop/tablet il comportamento resta quello di sempre (flex già centra .fm-card-media con justify-content/align-items, invariati qui). Rinforza qui la centratura orizzontale in modo esplicito e imposta object-position:center per escludere qualunque comportamento di default non centrato del browser sull'object-fit, senza toccare dimensioni, proporzioni o i file immagine stessi. */ @media (max-width: 600px) { .fm-card-media { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .fm-card-media img { margin: 0 auto; object-position: center center; } /* Alcuni file immagine hanno il soggetto fotografato non centrato all'interno del proprio canvas (verificato via analisi pixel: il "tag " risultava già geometricamente centrato nel suo box, ma il prodotto visibile al suo interno era spostato di circa il 12-22% rispetto al centro) — un problema del file sorgente, non del layout, quindi non risolvibile con justify-content/object-position da soli. ".fm-card-media" usa aspect-ratio:4/3 mentre queste immagini sono 1:1: l'immagine "contain" risultante è naturalmente più stretta della larghezza del box, lasciando margini laterali ampi — margini sufficienti per ri-centrare il soggetto con un semplice traslazione orizzontale (senza scalare né ritagliare nulla) selezionando le immagini interessate per nome file, scoped SOLO qui (Slični proizvodi, solo mobile). Se in futuro si aggiungono altre immagini con lo stesso problema, si puo' estendere l'elenco di selettori qui sotto con lo stesso pattern. */ .fm-card-media img[src*="BFT-MITTO-C2"], .fm-card-media img[src*="BFT-MITTO-C4"] { transform: translateX(20%); } .fm-card-media img[src*="BFT-COMPACTA-A20-180"] { transform: translateX(11%); } } .fm-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; } .fm-card-brand { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fm-accent-light); margin-bottom: 8px; } .fm-card-name { color: var(--fm-text); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.4; margin-bottom: 6px; display: block; } .fm-card-sku { font-size: 12px; color: var(--fm-text-tertiary); margin-bottom: 14px; } .fm-card-price { font-size: 19px; font-weight: 700; color: var(--fm-blue); } .fm-card-vat { font-size: 11px; color: var(--fm-text-tertiary); margin-bottom: 10px; } .fm-card-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fm-success); font-weight: 600; margin-bottom: 2px; } .fm-card-delivery { font-size: 12px; color: var(--fm-text-secondary); margin-bottom: 16px; } .fm-card-cta { margin-top: auto; display: block; text-align: center; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); color: var(--fm-text) !important; text-decoration: none; padding: 11px; border-radius: var(--fm-radius-sm); font-size: 13px; font-weight: 600; transition: background 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } .fm-card-cta:hover { background: var(--fm-cta); border-color: var(--fm-cta); color: var(--fm-blue) !important; } /* --- Bottoni / CTA generiche --- */ .fm-btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .fm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 100px; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform 0.2s var(--fm-ease), opacity 0.2s var(--fm-ease), background 0.2s var(--fm-ease); } .fm-btn:hover { transform: translateY(-2px); } .fm-btn-primary { background: var(--fm-cta); color: var(--fm-blue) !important; } .fm-btn-primary:hover { background: var(--fm-cta-dark); } .fm-btn-whatsapp { background: #25d366; color: #fff !important; } .fm-btn-ghost { background: #ffffff; color: var(--fm-blue) !important; border: 1.5px solid var(--fm-blue); } .fm-btn-ghost:hover { background: var(--fm-blue); color: #fff !important; } /* --- Azioni pagina prodotto (fm-pdp-*): classi dedicate, scoped SOLO a questa zona. Non riusano .fm-btn-primary/.fm-btn-whatsapp/.fm-btn-ghost apposta, per non cambiare il colore dei pulsanti condivisi in checkout/Moj nalog/ZA FIRME/ZA MONTERE/login/registrazione. */ .fm-pdp-actions { margin-top: 4px; } .fm-pdp-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--fm-border-strong); border-radius: var(--fm-radius-sm); overflow: hidden; width: fit-content; } .fm-pdp-qty-btn { background: #f5f6f8; border: none; width: 42px; height: 44px; font-size: 18px; font-weight: 600; line-height: 1; color: var(--fm-text); cursor: pointer; transition: background .15s; } .fm-pdp-qty-btn:hover { background: #eceef1; } .fm-pdp-qty-input { width: 56px; height: 44px; border: none; border-left: 1.5px solid var(--fm-border-strong); border-right: 1.5px solid var(--fm-border-strong); text-align: center; font-size: 15px; font-weight: 600; color: var(--fm-text); -moz-appearance: textfield; } .fm-pdp-qty-input::-webkit-outer-spin-button, .fm-pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fm-pdp-btn-cart { background: var(--fm-blue); color: #fff !important; border: none; } .fm-pdp-btn-cart:hover { background: var(--fm-blue-light); } .fm-pdp-btn-whatsapp { background: #fff; color: #25d366 !important; border: 1.5px solid #25d366; } .fm-pdp-btn-whatsapp:hover { background: #25d366; color: #fff !important; } /* --- Condivisione prodotto (fm-pdp-share) --- */ .fm-pdp-share { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--fm-border); } .fm-pdp-share-label { display: block; font-size: 13px; font-weight: 600; color: var(--fm-text-tertiary); margin-bottom: 12px; } .fm-pdp-share-icons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fm-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative; transition: transform .2s var(--fm-ease), background .2s var(--fm-ease), color .2s var(--fm-ease); } .fm-share-icon svg { width: 19px; height: 19px; fill: currentColor; } .fm-share-icon:hover { transform: translateY(-2px); } .fm-share-icon:focus-visible { outline: 2px solid var(--fm-blue); outline-offset: 2px; } .fm-share-whatsapp { background: rgba(37,211,102,.12); color: #25d366; } .fm-share-whatsapp:hover { background: #25d366; color: #fff; } .fm-share-facebook { background: rgba(24,119,242,.12); color: #1877f2; } .fm-share-facebook:hover { background: #1877f2; color: #fff; } .fm-share-viber { background: rgba(124,93,250,.12); color: #7c5dfa; } .fm-share-viber:hover { background: #7c5dfa; color: #fff; } .fm-share-telegram { background: rgba(34,158,217,.12); color: #229ed9; } .fm-share-telegram:hover { background: #229ed9; color: #fff; } .fm-share-email, .fm-share-copy { background: #f0f1f3; color: var(--fm-text-tertiary); } .fm-share-email:hover, .fm-share-copy:hover { background: var(--fm-text-tertiary); color: #fff; } .fm-share-copy-feedback { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--fm-blue); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s var(--fm-ease), transform .2s var(--fm-ease); } .fm-share-copy-feedback.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* --- Sezioni card scure di supporto --- */ .fm-panel { background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 48px; margin-bottom: 56px; } .fm-panel--accent { background: linear-gradient(135deg, var(--fm-blue) 0%, var(--fm-blue-light) 100%); border: none; } .fm-panel--accent .fm-h2, .fm-panel--accent p { color: #fff; } /* --- Pagina prodotto --- */ .fm-product { display: flex; flex-wrap: wrap; gap: 56px; margin-bottom: 64px; } .fm-product-media { flex: 1 1 420px; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); display: flex; align-items: center; justify-content: center; padding: 40px; aspect-ratio: 1/1; max-width: 560px; box-shadow: var(--fm-shadow-sm); } .fm-product-info { flex: 1 1 360px; min-width: 0; padding-top: 8px; } /* ========================================================================== GALERIJA SLIKA PROIZVODA (glavna slika + minijature + lightbox) ========================================================================== */ .fm-product-media.fm-gallery { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 24px; gap: 16px; } .fm-gallery-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; cursor: zoom-in; min-height: 0; } .fm-gallery-main img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--fm-radius-sm); transition: opacity 0.15s var(--fm-ease); } .fm-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .fm-gallery-thumb { width: 64px; height: 64px; padding: 4px; background: var(--fm-bg-card); border: 2px solid var(--fm-border); border-radius: var(--fm-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s var(--fm-ease), transform 0.2s var(--fm-ease); } .fm-gallery-thumb:hover { border-color: var(--fm-border-strong); } .fm-gallery-thumb.is-active { border-color: var(--fm-cta); } .fm-gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .fm-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(11, 31, 58, 0.94); display: flex; align-items: center; justify-content: center; padding: 40px; } .fm-lightbox[hidden] { display: none; } .fm-lightbox-img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: var(--fm-radius-sm); box-shadow: var(--fm-shadow); } .fm-lightbox-close, .fm-lightbox-prev, .fm-lightbox-next { position: absolute; background: rgba(255,255,255,0.12); border: none; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--fm-ease); } .fm-lightbox-close:hover, .fm-lightbox-prev:hover, .fm-lightbox-next:hover { background: rgba(255,255,255,0.24); } .fm-lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; } .fm-lightbox-prev, .fm-lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1; } .fm-lightbox-prev { left: 20px; } .fm-lightbox-next { right: 20px; } .fm-lightbox-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #ffffff; font-size: 13px; background: rgba(255,255,255,0.12); padding: 6px 14px; border-radius: 20px; } @media (max-width: 640px) { .fm-lightbox { padding: 16px; } .fm-lightbox-prev, .fm-lightbox-next { width: 42px; height: 42px; font-size: 24px; } .fm-lightbox-prev { left: 8px; } .fm-lightbox-next { right: 8px; } .fm-lightbox-close { top: 10px; right: 10px; } .fm-gallery-thumb { width: 52px; height: 52px; } } .fm-product-price { font-size: 36px; font-weight: 700; margin: 6px 0 2px; color: var(--fm-blue); } .fm-product-vat { font-size: 13px; color: var(--fm-text-tertiary); margin-bottom: 20px; } .fm-product-meta { display: flex; gap: 22px; margin-bottom: 30px; flex-wrap: wrap; } .fm-description { border-top: 1px solid var(--fm-border); padding-top: 40px; margin-bottom: 56px; } .fm-description h2 { font-size: 20px; font-weight: 700; margin: 0 0 16px; } /* "Opis proizvoda" specifico: titolo piu' vicino al testo della descrizione, senza toccare la spaziatura condivisa con SadrÅ¾aj kompleta / TehniÄke informacije. */ .fm-description--intro h2 { margin-bottom: 12px; } .fm-description-text { font-size: 15px; line-height: 1.8; color: var(--fm-text-secondary); white-space: pre-line; max-width: 760px; } /* --- SadrÅ¾aj kompleta: riga intestazione, riusa .fm-tech-row esistente --- */ .fm-kit-content .fm-tech-row--head .fm-tech-label, .fm-kit-content .fm-tech-row--head .fm-tech-value { font-weight: 700; color: var(--fm-text); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; } /* --- TehniÄke informacije (scheda tecnica prodotto) --- */ .fm-tech-list { display: flex; flex-direction: column; gap: 1px; background: var(--fm-border); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); overflow: hidden; max-width: 900px; margin: 0; padding: 0; list-style: none; } .fm-tech-row { background: #ffffff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .fm-tech-row .fm-tech-label { margin: 0; font-size: 13px; color: var(--fm-text-secondary); font-weight: 500; } .fm-tech-row .fm-tech-value { margin: 0; font-size: 14px; color: var(--fm-blue); font-weight: 700; text-align: right; } @media (max-width: 600px) { .fm-tech-list { grid-template-columns: 1fr; } } /* --- Correzione larghezza Sadržaj kompleta / Tehničke informacije per i 4 prodotti con le liste spostate dentro il WooCommerce description (per l'analisi Yoast). Scoped esclusivamente al caso in cui queste sezioni sono annidate dentro .fm-description-text: ripristina la stessa larghezza disponibile che avevano da sezioni sorelle dirette di .fm-wrap (fino a 1152px), invece di restare limitate ai 760px di .fm-description-text. La lista interna (.fm-tech-list) mantiene il proprio max-width:900px gia' esistente e si autolimita di conseguenza, senza bisogno di ulteriori regole. Nessun'altra pagina/prodotto e' interessata: fuori da questo contesto annidato il selettore non trova nulla. */ .fm-description-text .fm-kit-content, .fm-description-text .fm-tech { width: calc(100vw - 48px); max-width: 1152px; } /* --- TehniÄke informacije, layout verticale (per ora solo prodotti BFT) --- Una riga per campo, a tutta larghezza: label a sinistra, valore a destra su desktop; impilati (label sopra, valore sotto) quando lo spazio non basta su mobile. */ .fm-tech-list--vertical { grid-template-columns: 1fr; } .fm-tech-list--vertical .fm-tech-row { flex-wrap: wrap; gap: 6px 24px; } .fm-tech-list--vertical .fm-tech-row .fm-tech-label { flex: 0 0 auto; } .fm-tech-list--vertical .fm-tech-row .fm-tech-value { flex: 1 1 auto; min-width: 0; text-align: right; } @media (max-width: 640px) { .fm-tech-list--vertical .fm-tech-row { flex-direction: column; align-items: flex-start; gap: 4px; } .fm-tech-list--vertical .fm-tech-row .fm-tech-value { text-align: left; } } @media (max-width: 600px) { .fm-panel { padding: 32px 24px; } } /* ========================================================================== PAGINA PRODOTTO — riordino mobile/tablet dedicato, senza duplicare il markup. Il DOM resta identico al desktop: ".fm-product-info" diventa "display:contents" (il suo box sparisce dal layout, ma i suoi figli diventano item flex diretti di ".fm-product", esattamente come ".fm-product-media") cosi' da poter assegnare un "order" indipendente a ciascun blocco e ottenere la sequenza mobile-first richiesta: Titolo e informazioni principali -> Immagine -> Prezzo -> Quantita/CTA/WhatsApp -> Informazioni di acquisto. Opis/Tehnicke informacije/Slicni proizvodi restano fuori da ".fm-product" e sono gia' nell'ordine corretto nel DOM, nessun riordino necessario per quelli. Tutto scoped sotto ".fm-product": nessun'altra pagina (checkout, Moj nalog, ZA FIRME, ZA MONTERE, login, registrazione) usa questa classe, zero rischio di regressioni altrove. Breakpoint a 880px (non 600px) cosi' che anche il tablet in verticale (768px) segua lo stesso ordine corretto invece di ricadere sul semplice "flex-wrap" desktop (che impila comunque, ma con l'immagine per prima). Le riduzioni di font/padding sotto restano invece scoped a 600px: il tablet mantiene proporzioni piu' "spaziose", solo l'ordine cambia. */ @media (max-width: 880px) { .fm-product { display: flex; flex-direction: column; gap: 28px; } .fm-product > .fm-product-info { display: contents; } .fm-product .fm-eyebrow, .fm-product > .fm-product-info > h1.fm-h1, .fm-product .fm-pdp-kod-top, .fm-product .fm-pdp-meta-bottom { order: 1; } .fm-product .fm-product-media { order: 2; margin: 0; max-width: 100%; padding: 24px; } .fm-product .fm-product-price, .fm-product .fm-product-vat { order: 3; } .fm-product .fm-pdp-actions { order: 4; } .fm-product .fm-pdp-share { order: 4; } .fm-product .fm-product-meta { order: 5; margin-bottom: 0; } .fm-product .fm-pdp-meta-bottom { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--fm-border); } /* Blocchi 5-6 (CTA): Dodaj u korpu impilato SOPRA WhatsApp, non affiancati — l'azione primaria usa tutta la larghezza disponibile ed e' inequivocabilmente la piu' importante; WhatsApp resta un'azione secondaria, ben riconoscibile ma piu' piccola. */ .fm-product .fm-btn-row { flex-direction: column; gap: 10px; } .fm-product .fm-pdp-btn-cart, .fm-product .fm-pdp-btn-whatsapp { width: 100%; justify-content: center; } .fm-product .fm-pdp-btn-cart { padding: 16px 26px; font-size: 15.5px; } } @media (max-width: 600px) { /* Blocco 1 (titolo/informazioni principali): compatto, niente spazio verticale eccessivo. */ .fm-product > .fm-product-info > h1.fm-h1 { font-size: 24px; margin-bottom: 6px; } .fm-product .fm-pdp-kod-top { margin-bottom: 0; } /* Blocco 3 (prezzo): importante ma equilibrato, non enorme. */ .fm-product .fm-product-price { font-size: 28px; margin: 0 0 2px; } .fm-product .fm-product-vat { margin-bottom: 4px; } /* Blocco 7 (info acquisto: stato/consegna), ora dopo le CTA. */ .fm-product .fm-product-meta { gap: 16px; } /* Blocco 4 (quantita): pulsanti piu' grandi, comodi con il pollice. */ .fm-product .fm-pdp-qty-btn { width: 52px; height: 48px; font-size: 20px; } .fm-product .fm-pdp-qty-input { height: 48px; } .fm-product .fm-pdp-btn-whatsapp { padding: 12px 26px; font-size: 14px; } .fm-product .fm-share-icon { width: 40px; height: 40px; } .fm-product .fm-share-icon svg { width: 17px; height: 17px; } } /* Tehnicke informacije: su schermi molto stretti, etichetta sopra e valore sotto invece di affiancati, cosi' i valori piu' lunghi restano sempre leggibili senza affollare la riga. */ @media (max-width: 480px) { .fm-tech-row { flex-direction: column; align-items: flex-start; gap: 4px; } .fm-tech-row .fm-tech-value { text-align: left; } } /* ========================================================================== FOOTER ========================================================================== */ .fm-site-footer { background: var(--fm-blue); border-top: none; color: rgba(255,255,255,0.72); padding: 56px 24px 28px; margin-top: 60px; /* Footer istituzionale blu profondo: testi bianchi, scoped solo qui */ --fm-text: #ffffff; --fm-text-secondary: rgba(255,255,255,0.72); --fm-text-tertiary: rgba(255,255,255,0.55); } .fm-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-bottom: 36px; } .fm-footer-inner .fm-footer-title { color: var(--fm-text); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 16px; } .fm-footer-inner p, .fm-footer-inner a { font-size: 13px; color: var(--fm-text-secondary); text-decoration: none; line-height: 1.9; transition: color 0.2s var(--fm-ease); } .fm-footer-inner a:hover { color: var(--fm-cta); } .fm-footer-social { display: flex; gap: 12px; margin-top: 4px; } .fm-footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); transition: background 0.2s var(--fm-ease), color 0.2s var(--fm-ease); } .fm-footer-social a:hover { background: var(--fm-cta); color: #ffffff; } .fm-footer-social svg { width: 18px; height: 18px; fill: currentColor; } .fm-footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 22px; font-size: 12px; color: var(--fm-text-tertiary); text-align: center; } /* ========================================================================== ZA MONTERE â€” voce di menu (pill raffinato, integrato nel menu) ========================================================================== */ a.fm-nav-monteri, .fm-nav-monteri > a { display: inline-flex; align-items: center; background: rgba(255,255,255,0.12); color: #fff !important; border: 1px solid rgba(255,255,255,0.28); padding: 6px 15px; border-radius: 100px; font-weight: 600 !important; font-size: 13px; transition: background 0.2s var(--fm-ease), color 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } a.fm-nav-monteri:hover, .fm-nav-monteri > a:hover { background: var(--fm-cta); border-color: var(--fm-cta); color: var(--fm-blue) !important; } /* ========================================================================== PRIJAVA — voce di menu (stessa struttura "pill" di ZA FIRME/ZA MONTERE sopra, ma con azzurro distintivo #0071e3 invece del verde --fm-cta, per distinguere visivamente l'area clienti classici dall'area ZA FIRME). ========================================================================== */ a.fm-nav-prijava, .fm-nav-prijava > a { display: inline-flex; align-items: center; background: rgba(255,255,255,0.12); color: #fff !important; border: 1px solid rgba(255,255,255,0.28); padding: 6px 15px; border-radius: 100px; font-weight: 600 !important; font-size: 13px; transition: background 0.2s var(--fm-ease), color 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } a.fm-nav-prijava:hover, .fm-nav-prijava > a:hover { background: #0071e3; border-color: #0071e3; color: #ffffff !important; } /* ========================================================================== ZONA ZA MONTERE â€” area chiara "premium", scoped sotto .fm-monteri. Riusa i token F-MATIK esistenti (accento, radius, font, easing) ma con una palette chiara dedicata: la zona monteri e' pensata come una vera area applicativa riservata, distinta dal sito vetrina scuro. Nessuna variabile globale toccata: tutto e' scoped su .fm-monteri, niente fuoriesce da qui. ========================================================================== */ .fm-monteri { --fma-bg: #f5f5f7; --fma-surface: #ffffff; --fma-border: rgba(0,0,0,0.08); --fma-border-strong: rgba(0,0,0,0.14); --fma-text: #1d1d1f; --fma-text-secondary: #6e6e73; --fma-text-tertiary: #98989d; --fma-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.06); --fma-shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); background: var(--fma-bg); } .fma-section { padding: 72px 0 100px; } .fma-section--dash { padding-top: 0; } .fma-wrap { max-width: 460px; margin: 0 auto; padding: 0 24px; } .fma-wrap--wide { max-width: 960px; } .fma-eyebrow { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--fm-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; margin-bottom: 16px; } .fma-title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--fma-text); text-align: center; } .fma-subtitle { font-size: 16px; line-height: 1.6; color: var(--fma-text-secondary); text-align: center; margin: 0 auto 40px; max-width: 520px; } .fma-card { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); padding: 44px 40px; box-shadow: var(--fma-shadow); } /* --- Campi form --- */ .fma-field { margin-bottom: 18px; } .fma-label { display: block; font-size: 13px; font-weight: 600; color: var(--fma-text); margin-bottom: 7px; } .fma-input-wrap { position: relative; display: flex; align-items: center; } .fma-input-icon { position: absolute; left: 14px; color: var(--fma-text-tertiary); pointer-events: none; display: flex; } .fma-input { width: 100%; background: var(--fma-surface); border: 1.5px solid var(--fma-border); border-radius: var(--fm-radius-sm); padding: 13px 14px 13px 42px; font-size: 14.5px; color: var(--fma-text); font-family: var(--fm-font); transition: border-color 0.2s var(--fm-ease), box-shadow 0.2s var(--fm-ease); } .fma-input--toggle { padding-right: 44px; } .fma-input--plain { padding-left: 14px; } .fma-input:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(11,31,58,0.12); } .fma-input::placeholder { color: var(--fma-text-tertiary); } /* Select nativo (es. "Država" nei dati di spedizione, /zona-kupaca/): riusa i token .fma-input esistenti, con freccia personalizzata al posto di quella nativa del browser per coerenza visiva con gli altri campi. */ select.fma-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .fma-pass-toggle { position: absolute; right: 6px; background: none; border: none; cursor: pointer; padding: 8px; color: var(--fma-text-tertiary); display: flex; border-radius: 8px; transition: color 0.15s var(--fm-ease), background 0.15s var(--fm-ease); } .fma-pass-toggle:hover { color: var(--fma-text); background: rgba(0,0,0,0.04); } .fma-pass-toggle svg:last-child { display: none; } .fma-pass-toggle.is-visible svg:first-child { display: none; } .fma-pass-toggle.is-visible svg:last-child { display: block; } .fma-forgot { display: block; text-align: right; font-size: 13px; color: var(--fma-text-secondary); text-decoration: none; margin: -6px 0 26px; transition: color 0.15s var(--fm-ease); } .fma-forgot:hover { color: var(--fm-accent); } .fma-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 30px; } .fma-checkbox-row input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--fm-cta); flex-shrink: 0; cursor: pointer; } .fma-checkbox-row label { font-size: 13px; line-height: 1.6; color: var(--fma-text-secondary); cursor: pointer; } /* --- Bottoni --- */ .fma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-weight: 600; font-size: 14.5px; text-decoration: none; border: none; cursor: pointer; font-family: var(--fm-font); transition: transform 0.2s var(--fm-ease), background 0.2s var(--fm-ease), box-shadow 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } .fma-btn-block { width: 100%; } .fma-btn-primary { background: var(--fm-cta); color: var(--fm-blue); box-shadow: 0 10px 22px rgba(57,211,83,0.3); } .fma-btn-primary:hover { background: var(--fm-cta-dark); transform: translateY(-1px); } .fma-btn-secondary { background: var(--fma-surface); color: var(--fm-accent); border: 1.5px solid var(--fma-border-strong); } .fma-btn-secondary:hover { border-color: var(--fm-accent); background: rgba(11,31,58,0.04); } /* --- Google OAuth (prijava/registracija kupaca) --- */ .fma-oauth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--fma-text-tertiary); font-size: 13px; } .fma-oauth-divider::before, .fma-oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--fma-border); } .fma-btn-google { background: #fff; color: #1d2733; border: 1.5px solid var(--fma-border-strong); } .fma-btn-google:hover { border-color: var(--fma-border-strong); background: rgba(11,31,58,0.03); transform: translateY(-1px); } .fma-btn-google svg { flex-shrink: 0; } /* ========================================================================== PRIJAVA / REGISTRACIJA (clienti classici, /prijava/ e /registracija/) — pulsante principale azzurro invece del verde standard di .fma-btn-primary, coerente con l'azzurro #0071e3 gia' usato per la voce di menu PRIJAVA. Scoped SOLO al wrapper .fm-customer-auth (presente esclusivamente nei template page-prijava.php e page-registracija.php): ZA FIRME e ogni altra pagina che condivide .fma-btn-primary restano verdi, invariate. ========================================================================== */ .fm-customer-auth .fma-btn-primary { background: #0071e3; color: #ffffff; box-shadow: 0 10px 22px rgba(0,113,227,0.3); } .fm-customer-auth .fma-btn-primary:hover { background: #0058b3; transform: translateY(-1px); } .fm-customer-auth .fma-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,0.35); } .fm-customer-auth .fma-btn-primary:active { background: #00458c; transform: translateY(0); } /* --- Switch (link alla pagina opposta login/registrazione) --- */ .fma-switch { text-align: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--fma-border); } .fma-switch-label { font-size: 14px; color: var(--fma-text-secondary); margin: 0 0 14px; } /* --- Messaggi di stato --- */ .fma-message { border-radius: var(--fm-radius-sm); padding: 13px 16px; font-size: 13.5px; margin-bottom: 24px; font-weight: 500; } .fma-message--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .fma-message--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } /* --- Pagine legali (Uslovi koriÅ¡Ä‡enja / Politika privatnosti) e nota informativa AI --- */ .fma-legal-notice, .fma-ai-disclaimer { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; line-height: 1.65; padding: 14px 18px; border-radius: 12px; margin: 24px 0 40px; } .fma-ai-disclaimer { margin: 0 0 24px; } .fma-legal { max-width: 760px; } .fma-legal h2 { font-size: 19px; margin: 40px 0 14px; color: var(--fma-text); } .fma-legal h2:first-of-type { margin-top: 0; } .fma-legal p { font-size: 14.5px; line-height: 1.75; color: var(--fma-text-secondary); margin: 0 0 14px; } .fma-legal a { color: var(--fm-accent); text-decoration: underline; } .fma-checkbox-row label a { color: var(--fm-accent); text-decoration: underline; } /* --- Registrazione: benefici Profesionalne zone --- */ .fma-benefits { margin: 28px 0 36px; padding: 20px 22px; background: var(--fma-bg); border: 1px solid var(--fma-border); border-radius: 14px; } .fma-benefits h2 { font-size: 16px; margin: 0 0 12px; color: var(--fma-text); } .fma-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fma-benefits li { font-size: 13.5px; line-height: 1.5; color: var(--fma-text-secondary); padding-left: 22px; position: relative; } .fma-benefits li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background-color: var(--fm-accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; } /* --- Registrazione: griglia a 2 colonne --- */ .fma-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; } .fma-col { display: flex; flex-direction: column; } /* --- Dashboard "Zona za firme" --- */ .fma-dash-hero { padding: 56px 0 44px; border-bottom: 1px solid var(--fma-border); } .fma-dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .fma-dash-hero .fma-title, .fma-dash-hero .fma-subtitle { text-align: left; margin-left: 0; margin-right: 0; } .fma-dash-hero .fma-eyebrow { justify-content: flex-start; } .fma-dash-hero .fma-subtitle { margin-bottom: 0; } .fma-logout { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 100px; font-weight: 600; font-size: 13.5px; color: var(--fma-text-secondary); background: var(--fma-surface); border: 1.5px solid var(--fma-border-strong); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease), background 0.2s var(--fm-ease); } .fma-logout:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; } .fma-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; } .fma-dash-card { position: relative; background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); padding: 28px 26px; display: flex; flex-direction: column; min-height: 190px; text-decoration: none; color: inherit; transition: transform 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease), border-color 0.25s var(--fm-ease); } .fma-dash-card:hover { transform: translateY(-4px); box-shadow: var(--fma-shadow); border-color: var(--fma-border-strong); } .fma-dash-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(11,31,58,0.08); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .fma-dash-badge { position: absolute; top: 24px; right: 24px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fm-accent); background: rgba(11,31,58,0.08); padding: 5px 10px; border-radius: 100px; } .fma-dash-card h3 { font-size: 17px; font-weight: 700; color: var(--fma-text); margin: 0 0 8px; } .fma-dash-card p { font-size: 13.5px; line-height: 1.6; color: var(--fma-text-secondary); margin: 0; } /* --- Responsive --- */ @media (max-width: 880px) { .fma-grid-2col { grid-template-columns: 1fr; gap: 0; } .fma-dash-top { flex-direction: column; } } @media (max-width: 600px) { .fma-section { padding: 48px 0 64px; } .fma-card { padding: 32px 24px; } .fma-wrap { padding: 0 20px; } .fma-dash-grid { grid-template-columns: 1fr; margin-top: 36px; } .fma-dash-hero { padding: 40px 0 32px; } } /* ========================================================================== ZONA KUPACA — dashboard cliente PRIJAVA, layout compatto a card (19/08/2026). Classi .fmc-* dedicate ESCLUSIVAMENTE a page-zona-kupaca.php: NON sono le .fma-dash-* (griglia a card con icone) condivise con page-zona-za-montere.php (ZA FIRME) — quelle restano invariate, non toccate da nessuna regola qui sotto. Riusa i token --fma-* e --fm-radius-lg gia' esistenti, nessuna nuova palette. ========================================================================== */ .fmc-dash-subtitle { max-width: none; } .fmc-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 8px; } .fmc-card { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fma-shadow-sm); padding: 20px 22px; } .fmc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .fmc-card-head h2 { margin: 0; } .fmc-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; width: auto; padding: 9px 18px; font-size: 12.5px; } /* --- Podaci naloga: griglia compatta label/valore, vista consolidata --- */ .fmc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } .fmc-info-item { min-width: 0; } /* Riga intera per i campi piu' soggetti a testo lungo (E-mail, Adresa): niente riga condivisa con un campo breve che ne subirebbe l'altezza. overflow-wrap gia' presente su .fmc-info-value gestisce comunque un a capo elegante per valori eccezionalmente lunghi, senza mai tagliare il testo (nessuna informazione dell'utente viene troncata). */ .fmc-info-item--full { grid-column: 1 / -1; } .fmc-info-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fma-text-tertiary); margin-bottom: 4px; } .fmc-info-value { display: block; font-size: 14.5px; font-weight: 600; color: var(--fma-text); overflow-wrap: anywhere; } .fmc-info-value--empty { color: var(--fma-text-tertiary); font-weight: 400; } /* --- Modulo di modifica (dentro la card Podaci naloga, mostrato al posto della vista consolidata quando si clicca "Izmeni podatke") --- */ .fmc-edit-form .fma-grid-2col { margin-top: 2px; } .fmc-edit-form .fma-field { margin-bottom: 12px; } .fmc-edit-actions { display: flex; align-items: center; gap: 18px; margin-top: 2px; } .fmc-cancel-link { font-size: 13px; font-weight: 600; color: var(--fma-text-secondary); text-decoration: none; } .fmc-cancel-link:hover { color: #0071e3; } /* --- Moje porudžbine: righe compatte al posto di una tabella --- */ .fmc-orders-list { display: flex; flex-direction: column; } .fmc-orders-list--scroll { max-height: 420px; overflow-y: auto; padding-right: 6px; } .fmc-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--fma-border); font-size: 13.5px; } .fmc-order-row:last-child { border-bottom: 0; } .fmc-order-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fmc-order-number { font-weight: 700; color: var(--fma-text); } .fmc-order-date { font-size: 12px; color: var(--fma-text-tertiary); } .fmc-order-status { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 100px; background: rgba(0,113,227,0.08); color: #0071e3; white-space: nowrap; } .fmc-order-total { font-weight: 700; color: var(--fma-text); text-align: right; white-space: nowrap; } .fmc-orders-empty { margin: 0 0 16px; text-align: left; } .fmc-orders-toggle { display: block; margin-top: 16px; text-align: center; font-size: 13px; font-weight: 600; color: #0071e3; text-decoration: none; } .fmc-orders-toggle:hover { text-decoration: underline; } @media (max-width: 880px) { .fmc-dash-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .fmc-card { padding: 16px 16px; } .fmc-card-head { margin-bottom: 10px; } .fmc-info-grid { grid-template-columns: 1fr; gap: 10px; } .fmc-card-head { flex-wrap: wrap; } .fmc-order-row { flex-wrap: wrap; row-gap: 6px; } .fmc-edit-form .fma-field { margin-bottom: 10px; } .fmc-dash-grid { gap: 16px; } } /* ========================================================================== KONTAKT â€” pagina contatti, palette chiara scoped (indipendente da .fm-monteri, stessa filosofia: token dedicati cosi' nessuna delle due sezioni dipende dall'altra). ========================================================================== */ .fm-kontakt { --fmk-surface: #ffffff; --fmk-border: rgba(0,0,0,0.08); --fmk-border-strong: rgba(0,0,0,0.14); --fmk-text: #1d1d1f; --fmk-text-secondary: #6e6e73; --fmk-text-tertiary: #98989d; --fmk-shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); --fmk-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.07); background: #ffffff; } .fmk-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .fmk-wrap--narrow { max-width: 560px; } .fmk-hero { text-align: center; padding: 84px 0 8px; } .fmk-eyebrow { display: inline-block; color: var(--fm-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; margin-bottom: 16px; } .fmk-h1 { font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fmk-text); } .fmk-lead { font-size: 17px; line-height: 1.65; color: var(--fmk-text-secondary); max-width: 640px; margin: 0 auto; } .fmk-section { padding: 56px 0; } .fmk-section--tight { padding: 32px 0 56px; } .fmk-h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 32px; color: var(--fmk-text); text-align: center; } /* --- 4 card contatto --- */ .fmk-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .fmk-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: var(--fmk-surface); border: 1px solid var(--fmk-border); border-radius: var(--fm-radius-lg); padding: 28px 24px; text-decoration: none; box-shadow: var(--fmk-shadow-sm); transition: transform 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease), border-color 0.25s var(--fm-ease); } .fmk-contact-card:hover { transform: translateY(-4px); box-shadow: var(--fmk-shadow); border-color: var(--fmk-border-strong); } .fmk-contact-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(11,31,58,0.08); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fmk-contact-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fmk-text-tertiary); } .fmk-contact-value { font-size: 17px; font-weight: 700; color: var(--fmk-text); line-height: 1.35; word-break: break-word; } /* --- Dati aziendali --- */ .fmk-info-card { background: var(--fmk-surface); border: 1px solid var(--fmk-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fmk-shadow-sm); padding: 36px 40px; } .fmk-info-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--fmk-border); } .fmk-info-row:last-child { border-bottom: none; padding-bottom: 0; } .fmk-info-row:first-child { padding-top: 0; } .fmk-info-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fmk-text-tertiary); } .fmk-info-value { font-size: 15px; color: var(--fmk-text); line-height: 1.6; } .fmk-info-value a { color: var(--fmk-text); text-decoration: none; } .fmk-info-value a:hover { color: var(--fm-accent); } /* --- Gde se nalazimo --- */ .fmk-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .fmk-location-card { background: var(--fmk-surface); border: 1px solid var(--fmk-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fmk-shadow-sm); padding: 28px 24px; display: flex; flex-direction: column; } .fmk-location-badge { display: inline-block; align-self: flex-start; background: rgba(11,31,58,0.08); color: var(--fm-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; } .fmk-location-title { font-size: 17px; font-weight: 700; color: var(--fmk-text); margin: 0 0 8px; } .fmk-location-address { font-size: 14px; color: var(--fmk-text-secondary); line-height: 1.6; margin: 0 0 22px; flex: 1; } /* --- Bottoni Kontakt (portabili, nessuna dipendenza da token di altre sezioni) --- */ .fmk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 100px; font-weight: 600; font-size: 14px; text-decoration: none; border: none; cursor: pointer; font-family: var(--fm-font); transition: transform 0.2s var(--fm-ease), background 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } .fmk-btn:hover { transform: translateY(-1px); } .fmk-btn-primary { background: var(--fm-cta); color: var(--fm-blue) !important; } .fmk-btn-primary:hover { background: var(--fm-cta-dark); } .fmk-btn-ghost { background: rgba(255,255,255,0.12); color: #fff !important; border: 1.5px solid rgba(255,255,255,0.4); } .fmk-btn-ghost:hover { background: rgba(255,255,255,0.2); } .fmk-btn-outline { background: transparent; color: var(--fm-accent) !important; border: 1.5px solid var(--fm-accent); padding: 10px 20px; font-size: 13px; } .fmk-btn-outline:hover { background: rgba(11,31,58,0.06); } /* --- CTA finale --- */ .fmk-cta-final { background: var(--fm-accent); border-radius: var(--fm-radius-lg); padding: 56px 40px; text-align: center; } .fmk-cta-final h2 { color: #fff; margin: 0 0 12px; } .fmk-cta-final p { color: rgba(255,255,255,0.85); font-size: 15.5px; margin: 0 0 30px; } .fmk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* CTA principale dentro il blocco blu: verde brillante, ben distinguibile e coerente con il resto del sito. */ .fmk-cta-final .fmk-btn-primary { background: var(--fm-cta); color: var(--fm-blue) !important; } .fmk-cta-final .fmk-btn-primary:hover { background: var(--fm-cta-dark); } @media (max-width: 900px) { .fmk-contact-grid { grid-template-columns: repeat(2, 1fr); } .fmk-info-card { padding: 28px 24px; } } @media (max-width: 600px) { .fmk-hero { padding: 48px 0 4px; } .fmk-section { padding: 40px 0; } .fmk-contact-grid { grid-template-columns: 1fr; } .fmk-info-row { grid-template-columns: 1fr; gap: 4px; } .fmk-cta-final { padding: 40px 24px; } } /* ========================================================================== KORPA â€” carrello prodotti (senza WooCommerce, senza pagamento online). Usa i token globali del tema scuro (--fm-*), stessa lingua visiva di catalogo/pagine prodotto: nessuna nuova palette introdotta. ========================================================================== */ /* --- Bottone "DODAJ U KORPU" sulle pagine prodotto --- */ .fm-btn-cart { background: var(--fm-cta); color: var(--fm-blue) !important; border: none; cursor: pointer; } .fm-btn-cart:hover { background: var(--fm-cta-dark); } /* --- Icona + badge carrello nell'header (sempre visibile, anche a menu mobile chiuso) --- */ .fm-cart-link { display: inline-flex; align-items: center; gap: 7px; position: relative; color: var(--fm-text-secondary); text-decoration: none; font-weight: 600; font-size: 13px; padding: 8px 4px; transition: color 0.2s var(--fm-ease); flex-shrink: 0; } .fm-cart-link:hover { color: var(--fm-text); } .fm-cart-link svg { width: 20px; height: 20px; display: block; } .fm-cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--fm-cta); color: var(--fm-blue); font-size: 11px; font-weight: 700; line-height: 1; } .fm-cart-badge[hidden] { display: none; } @media (max-width: 480px) { .fm-cart-text { display: none; } } /* Language switcher (Google Language Translator): dropdown compatto (sostituisce le 6 bandierine sempre visibili). Il nodo #flags generato dal plugin resta nel DOM (spostato via JS in footer.php, mai clonato) ma nascosto: e' ancora lui a fare la traduzione vera, il dropdown si limita a "cliccarlo" per conto dell'utente. */ #glt-translate-trigger, #glt-toolbar { display: none !important; } .fm-lang-switcher { display: inline-flex; align-items: center; flex-shrink: 0; position: relative; } .fm-lang-switcher-flags#flags { display: none !important; } .fm-lang-dd { position: relative; } .fm-lang-dd-toggle { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; color: var(--fm-text-secondary); font-size: 13px; font-weight: 600; font-family: inherit; padding: 6px 10px; cursor: pointer; transition: background 0.2s var(--fm-ease), color 0.2s var(--fm-ease); } .fm-lang-dd-toggle:hover, .fm-lang-dd-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.16); color: var(--fm-text); } .fm-lang-dd-flag { font-size: 15px; line-height: 1; } .fm-lang-dd-caret { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s var(--fm-ease); } .fm-lang-dd-toggle[aria-expanded="true"] .fm-lang-dd-caret { transform: rotate(180deg); } .fm-lang-dd-menu { position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: 6px; list-style: none; min-width: 170px; background: #ffffff; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); z-index: 1002; /* Pannello chiaro sospeso sotto l'header blu: testo scuro, scoped qui (stesso pattern gia' usato da .fm-dropdown / .sub-menu piu' sopra in questo file). */ --fm-text: #1a1f24; --fm-text-secondary: #48525c; } .fm-lang-dd-menu[hidden] { display: none; } .fm-lang-dd-menu li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--fm-radius-sm); font-size: 13px; font-weight: 500; color: var(--fm-text); cursor: pointer; } .fm-lang-dd-menu li:hover, .fm-lang-dd-menu li:focus { background: var(--fm-bg-elevated); outline: none; } .fm-lang-dd-menu li[aria-selected="true"] { font-weight: 700; color: var(--fm-blue); } @media (max-width: 880px) { .fm-lang-switcher { order: 2; } #fm-cart-link { order: 3; } .fm-burger { order: 4; } } @media (max-width: 480px) { /* Chiuso, il dropdown mostra solo bandiera + freccia (niente testo lingua) per restare compatto accanto a carrello e hamburger sugli schermi piu' stretti. */ .fm-lang-dd-label { display: none; } .fm-lang-dd-toggle { padding: 6px 8px; gap: 4px; } .fm-lang-dd-menu { right: -8px; min-width: 160px; } } /* --- Toast di conferma "Proizvod je dodat u korpu" (non invasivo, angolo schermo) --- */ .fm-toast { position: fixed; right: 20px; bottom: 20px; z-index: 2000; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 18px 20px; max-width: 300px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s var(--fm-ease), transform 0.25s var(--fm-ease); } .fm-toast.fm-toast-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .fm-toast p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--fm-text); } .fm-toast-actions { display: flex; gap: 8px; flex-wrap: wrap; } .fm-toast-actions a, .fm-toast-actions button { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 100px; text-decoration: none; cursor: pointer; border: none; font-family: var(--fm-font); } .fm-toast-actions .fm-toast-primary { background: var(--fm-cta); color: var(--fm-blue); } .fm-toast-actions .fm-toast-ghost { background: #ffffff; border: 1px solid var(--fm-border-strong); color: var(--fm-text); } /* --- Pagina /korpa/ --- */ .fm-cart-page { padding-bottom: 80px; } .fm-cart-empty { text-align: center; padding: 72px 24px; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); } .fm-cart-empty[hidden] { display: none; } .fm-cart-empty-icon { color: var(--fm-text-tertiary); margin-bottom: 18px; } .fm-cart-empty-icon svg { width: 52px; height: 52px; } .fm-cart-empty h2 { font-size: 22px; margin: 0 0 12px; color: var(--fm-text); } .fm-cart-empty p { color: var(--fm-text-secondary); max-width: 420px; margin: 0 auto 28px; line-height: 1.6; } .fm-cart-filled[hidden], .fm-cart-request[hidden], .fm-cart-thanks[hidden] { display: none; } .fm-cart-table-wrap { background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); overflow: hidden; margin-bottom: 28px; } .fm-cart-head { display: grid; grid-template-columns: 2.6fr 1fr 1fr 1.2fr 1fr 40px; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--fm-border); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fm-text-tertiary); } .fm-cart-item { display: grid; grid-template-columns: 2.6fr 1fr 1fr 1.2fr 1fr 40px; gap: 14px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--fm-border); } .fm-cart-item:last-child { border-bottom: none; } .fm-cart-item-product { display: flex; align-items: center; gap: 14px; min-width: 0; } .fm-cart-item-media { width: 56px; height: 56px; flex-shrink: 0; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; } .fm-cart-item-media img { max-width: 100%; max-height: 100%; object-fit: contain; } .fm-cart-item-name { font-size: 14px; font-weight: 600; color: var(--fm-text); text-decoration: none; line-height: 1.4; display: block; overflow-wrap: anywhere; } .fm-cart-item-name:hover { color: var(--fm-accent-light); } .fm-cart-item-code, .fm-cart-item-price { font-size: 13px; color: var(--fm-text-secondary); } .fm-cart-item-subtotal { font-size: 14.5px; font-weight: 700; color: var(--fm-text); } .fm-cart-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--fm-border-strong); border-radius: 100px; overflow: hidden; width: fit-content; } .fm-cart-qty button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(11,31,58,0.05); border: none; color: var(--fm-text); font-size: 15px; cursor: pointer; font-family: var(--fm-font); } .fm-cart-qty button:hover { background: rgba(11,31,58,0.1); } .fm-cart-qty input { width: 38px; height: 30px; border: none; background: transparent; color: var(--fm-text); text-align: center; font-size: 13px; font-family: var(--fm-font); -moz-appearance: textfield; } .fm-cart-qty input::-webkit-outer-spin-button, .fm-cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fm-cart-remove { background: none; border: none; color: var(--fm-text-tertiary); cursor: pointer; padding: 8px; border-radius: var(--fm-radius-sm); display: flex; align-items: center; justify-content: center; transition: color 0.2s var(--fm-ease), background 0.2s var(--fm-ease); } .fm-cart-remove:hover { color: #dc2626; background: #fef2f2; } .fm-cart-remove svg { width: 17px; height: 17px; } .fm-cart-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 28px 32px; } .fm-cart-total { font-size: 15px; color: var(--fm-text-secondary); } .fm-cart-total strong { display: block; font-size: 28px; color: var(--fm-text); margin-top: 4px; } .fm-cart-cta { white-space: nowrap; } /* --- Upit za porudÅ¾binu --- */ .fm-cart-review { background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 28px 30px; margin-bottom: 28px; } .fm-cart-review h3 { margin: 0 0 18px; font-size: 15px; color: var(--fm-text); } .fm-cart-review-item { padding: 14px 0; border-bottom: 1px solid var(--fm-border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fm-cart-review-item:last-child { border-bottom: none; } .fm-cart-review-item-name { font-weight: 600; color: var(--fm-text); font-size: 14px; margin-bottom: 4px; } .fm-cart-review-item-meta { font-size: 12.5px; color: var(--fm-text-tertiary); } .fm-cart-review-item-total { font-weight: 700; color: var(--fm-text); font-size: 14px; white-space: nowrap; } .fm-cart-review .fm-cart-total { margin-top: 12px; text-align: right; } .fm-cart-review .fm-cart-total strong { font-size: 22px; } .fm-cart-form { background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 30px 32px; display: grid; gap: 18px; min-width: 0; } .fm-cart-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fm-text-secondary); } .fm-cart-form input, .fm-cart-form textarea { width: 100%; min-width: 0; font-family: var(--fm-font); font-size: 14px; color: var(--fm-text); background: #ffffff; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius-sm); padding: 12px 14px; resize: vertical; } .fm-cart-form input:focus, .fm-cart-form textarea:focus { outline: none; border-color: var(--fm-accent); } .fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fm-cart-form-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: var(--fm-radius-sm); padding: 12px 14px; font-size: 13px; margin: 0; } .fm-cart-form-error[hidden] { display: none; } .fm-cart-form-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .fm-cart-thanks { text-align: center; padding: 72px 24px; background: var(--fm-bg-elevated); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); } .fm-cart-thanks h2 { font-size: 24px; margin: 0 0 14px; color: var(--fm-text); } .fm-cart-thanks p { color: var(--fm-text-secondary); max-width: 480px; margin: 0 auto 28px; line-height: 1.6; } @media (max-width: 780px) { .fm-cart-head { display: none; } .fm-cart-item { grid-template-columns: 1fr; gap: 10px; padding: 20px; position: relative; } .fm-cart-item-code::before { content: "Å ifra: "; color: var(--fm-text-tertiary); } .fm-cart-item-price::before { content: "Cena: "; color: var(--fm-text-tertiary); } .fm-cart-item-subtotal::before { content: "Ukupno: "; color: var(--fm-text-tertiary); font-weight: 400; } .fm-cart-item-qty-row { display: flex; align-items: center; justify-content: space-between; } .fm-cart-remove { position: absolute; top: 16px; right: 16px; } .fm-cart-summary { flex-direction: column; align-items: stretch; text-align: center; } .fm-cart-cta { width: 100%; justify-content: center; } .fm-cart-form { padding: 24px 20px; } .fm-cart-form-actions { justify-content: stretch; } .fm-cart-form-actions .fm-btn { flex: 1; justify-content: center; } } @media (max-width: 600px) { .fm-checkout-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 420px) { .fm-cart-empty, .fm-cart-thanks { padding: 48px 18px; } .fm-cart-review, .fm-cart-table-wrap, .fm-cart-summary { border-radius: var(--fm-radius); } } /* ========================================================================== TEHNIÄŒKA DOKUMENTACIJA (ZA MONTERE) â€” scoped sotto .fm-monteri, riusa i token --fma-* gia' definiti per la zona riservata. Nessuna nuova palette. ========================================================================== */ /* --- Hub brand (per ora solo la card BFT) --- */ .fma-brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 48px; max-width: 700px; } .fma-brand-card { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); padding: 36px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; transition: transform 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease), border-color 0.25s var(--fm-ease); } .fma-brand-card:hover { transform: translateY(-4px); box-shadow: var(--fma-shadow); border-color: var(--fma-border-strong); } .fma-brand-logo { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 20px; } .fma-brand-logo img { max-height: 100%; max-width: 160px; object-fit: contain; } .fma-brand-card h3 { font-size: 19px; font-weight: 700; color: var(--fma-text); margin: 0 0 6px; } .fma-brand-card p { font-size: 13.5px; color: var(--fma-text-secondary); margin: 0; } /* --- Ricerca documentazione --- */ .fma-doc-search-wrap { position: relative; max-width: 460px; margin: 40px 0 36px; } .fma-doc-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fma-text-tertiary); pointer-events: none; } .fma-doc-search-input { width: 100%; background: var(--fma-surface); border: 1.5px solid var(--fma-border); border-radius: var(--fm-radius-sm); padding: 13px 16px 13px 42px; font-size: 14.5px; color: var(--fma-text); font-family: var(--fm-font); transition: border-color 0.2s var(--fm-ease), box-shadow 0.2s var(--fm-ease); } .fma-doc-search-input:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(11,31,58,0.12); } .fma-doc-search-input::placeholder { color: var(--fma-text-tertiary); } /* --- Gruppi prodotto + elenco documenti --- */ .fma-doc-group { margin-bottom: 36px; } .fma-doc-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .fma-doc-group-title { font-size: 18px; font-weight: 700; color: var(--fma-text); margin: 0; } .fma-doc-group-category { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fm-accent); background: rgba(11,31,58,0.08); padding: 4px 11px; border-radius: 100px; } .fma-doc-list { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); overflow: hidden; } .fma-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 26px; border-bottom: 1px solid var(--fma-border); } .fma-doc-row:last-child { border-bottom: none; } .fma-doc-row-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1 1 320px; } .fma-doc-row-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(11,31,58,0.08); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; } .fma-doc-row-body { min-width: 0; } .fma-doc-row-title { font-size: 15px; font-weight: 600; color: var(--fma-text); margin: 0 0 6px; line-height: 1.4; } .fma-doc-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--fma-text-tertiary); margin: 0; } .fma-doc-open { white-space: nowrap; flex-shrink: 0; } .fma-doc-empty { text-align: center; color: var(--fma-text-secondary); font-size: 14.5px; padding: 40px 0; } @media (max-width: 600px) { .fma-brand-grid { grid-template-columns: 1fr; margin-top: 32px; } .fma-doc-search-wrap { margin: 28px 0 28px; } .fma-doc-row { padding: 18px 20px; flex-direction: column; align-items: stretch; } .fma-doc-open { width: 100%; justify-content: center; } .fma-doc-group-title { font-size: 16.5px; } } /* ========================================================================== KATALOZI (ZA MONTERE) â€” sezione indipendente da TehniÄka dokumentacija, scoped sotto .fm-monteri, riusa i token --fma-* gia' esistenti. ========================================================================== */ .fma-katalog-grid { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 48px; } .fma-katalog-card { width: 300px; background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); overflow: hidden; box-shadow: var(--fma-shadow-sm); display: flex; flex-direction: column; transition: transform 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease), border-color 0.25s var(--fm-ease); } .fma-katalog-card:hover { transform: translateY(-4px); box-shadow: var(--fma-shadow); border-color: var(--fma-border-strong); } .fma-katalog-cover { background: var(--fma-bg); aspect-ratio: 3/4.25; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--fma-border); } .fma-katalog-cover img { width: 100%; height: 100%; object-fit: cover; } .fma-katalog-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .fma-katalog-brand { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fm-accent); background: rgba(11,31,58,0.08); padding: 4px 11px; border-radius: 100px; margin-bottom: 12px; } .fma-katalog-title { font-size: 17px; font-weight: 700; color: var(--fma-text); margin: 0 0 8px; line-height: 1.35; } .fma-katalog-desc { font-size: 13.5px; color: var(--fma-text-secondary); line-height: 1.6; margin: 0 0 20px; flex: 1; } .fma-katalog-actions { display: flex; gap: 10px; } .fma-katalog-actions .fma-btn { flex: 1; padding-left: 0; padding-right: 0; text-align: center; justify-content: center; } @media (max-width: 1020px) { .fma-katalog-card { width: calc(50% - 14px); } } @media (max-width: 600px) { .fma-katalog-grid { margin-top: 32px; gap: 20px; } .fma-katalog-card { width: 100%; } } /* ========================================================================== F-MATIK TECHNICAL ASSISTANT (ZA MONTERE) â€” scoped sotto .fm-monteri, riusa i token --fma-* esistenti. Nessuna grafica da "chatbot generico": card tecnica pulita, risposte ben separate, fonte sempre in evidenza. ========================================================================== */ .fma-ai-card { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fma-shadow-sm); padding: 30px 32px; margin-top: 44px; } .fma-ai-form { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .fma-ai-textarea { flex: 1 1 360px; min-width: 0; resize: vertical; min-height: 52px; background: var(--fma-surface); border: 1.5px solid var(--fma-border); border-radius: var(--fm-radius-sm); padding: 14px 16px; font-size: 14.5px; color: var(--fma-text); font-family: var(--fm-font); line-height: 1.5; transition: border-color 0.2s var(--fm-ease), box-shadow 0.2s var(--fm-ease); } .fma-ai-textarea:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(11,31,58,0.12); } .fma-ai-textarea::placeholder { color: var(--fma-text-tertiary); } .fma-ai-submit { white-space: nowrap; align-self: flex-start; } .fma-ai-suggestions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .fma-ai-chip { background: rgba(11,31,58,0.06); color: var(--fm-accent); border: 1px solid rgba(11,31,58,0.16); border-radius: 100px; padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: var(--fm-font); cursor: pointer; transition: background 0.2s var(--fm-ease), border-color 0.2s var(--fm-ease); } .fma-ai-chip:hover { background: rgba(11,31,58,0.12); border-color: rgba(11,31,58,0.3); } /* --- Thread (domande + risposte) --- */ .fma-ai-thread { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .fma-ai-msg-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fma-text-tertiary); margin-bottom: 8px; } .fma-ai-msg--question { align-self: flex-start; max-width: 640px; background: rgba(11,31,58,0.06); border: 1px solid rgba(11,31,58,0.16); border-radius: var(--fm-radius); padding: 16px 20px; } .fma-ai-msg--question .fma-ai-msg-label { color: var(--fm-accent); } .fma-ai-msg-text { margin: 0; font-size: 15px; color: var(--fma-text); font-weight: 600; line-height: 1.5; } .fma-ai-msg--loading { display: flex; gap: 6px; padding: 6px 4px; } .fma-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fma-text-tertiary); animation: fmaAiPulse 1.2s infinite ease-in-out; } .fma-ai-dot:nth-child(2) { animation-delay: 0.15s; } .fma-ai-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes fmaAiPulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } .fma-ai-answer { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fma-shadow-sm); padding: 26px 28px; } .fma-ai-answer--empty p { margin: 0 0 6px; font-size: 14.5px; color: var(--fma-text); } .fma-ai-answer--empty .fma-ai-hint { color: var(--fma-text-secondary); font-size: 13.5px; } .fma-ai-error-text { color: #b91c1c; } .fma-ai-passage-intro { font-size: 14px; color: var(--fma-text-secondary); margin: 0 0 14px; } .fma-ai-passage-quote { margin: 0 0 22px; padding: 16px 20px; background: var(--fma-bg); border-left: 3px solid var(--fm-accent); border-radius: 0 var(--fm-radius-sm) var(--fm-radius-sm) 0; font-size: 14.5px; line-height: 1.7; color: var(--fma-text); white-space: pre-line; word-break: break-word; } .fma-ai-sources { border-top: 1px solid var(--fma-border); padding-top: 18px; } .fma-ai-sources-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fma-text-tertiary); margin-bottom: 12px; } .fma-ai-sources-list { display: flex; flex-direction: column; gap: 12px; } .fma-ai-source { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--fma-bg); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-sm); padding: 14px 18px; } .fma-ai-source-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--fma-text); } .fma-ai-source-meta { margin: 0; font-size: 12px; color: var(--fma-text-tertiary); } .fma-ai-source-open { white-space: nowrap; padding: 9px 18px; font-size: 12.5px; } @media (max-width: 600px) { .fma-ai-card { padding: 22px 20px; margin-top: 32px; } .fma-ai-form { flex-direction: column; } .fma-ai-submit { width: 100%; justify-content: center; } .fma-ai-answer { padding: 20px 18px; } .fma-ai-msg--question { max-width: 100%; } .fma-ai-source { flex-direction: column; align-items: stretch; } .fma-ai-source-open { width: 100%; justify-content: center; } } /* ========================================================================== POSEBNE PONUDE (ZA MONTERE) â€” programma di livelli/sconti, scoped sotto .fm-monteri, riusa i token --fma-* esistenti. Design B2B premium: numeri grandi, molto spazio bianco, nessuna animazione/colore vistoso. ========================================================================== */ .fmp-summary-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fma-shadow-sm); padding: 36px 40px; margin-top: 44px; } .fmp-summary-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fma-text-tertiary); margin-bottom: 10px; } .fmp-summary-amount { font-size: clamp(36px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; color: var(--fma-text); line-height: 1; } .fmp-summary-year { display: block; margin-top: 8px; font-size: 14px; color: var(--fma-text-secondary); font-weight: 600; } .fmp-summary-badge { flex-shrink: 0; padding: 12px 22px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .fmp-summary-badge--nivo0 { background: rgba(0,0,0,0.05); color: var(--fma-text-secondary); } .fmp-summary-badge--nivo1 { background: rgba(11,31,58,0.1); color: var(--fm-accent); } .fmp-summary-badge--nivo2 { background: var(--fm-blue); color: #fff; } .fmp-progress-card { background: var(--fma-surface); border: 1px solid var(--fma-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fma-shadow-sm); padding: 32px 40px; margin-top: 20px; } .fmp-progress-bar { height: 12px; border-radius: 100px; background: var(--fma-bg); border: 1px solid var(--fma-border); overflow: hidden; } .fmp-progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--fm-cta), var(--fm-cta-dark)); transition: width 0.6s var(--fm-ease); } .fmp-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13.5px; color: var(--fma-text-secondary); font-weight: 600; } .fmp-progress-percent { color: var(--fma-text); font-weight: 700; } .fmp-next-goal { margin: 20px 0 0; font-size: 15px; color: var(--fma-text); } .fmp-next-goal strong { color: var(--fm-accent); } .fmp-proximity { margin: 6px 0 0; font-size: 13.5px; color: var(--fma-text-secondary); font-style: italic; } .fmp-status { margin-top: 20px; padding: 20px 24px; border-radius: var(--fm-radius); text-align: center; } .fmp-status strong { display: block; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 6px; } .fmp-status p { margin: 0; font-size: 14px; line-height: 1.6; } .fmp-status--achieved { background: rgba(11,31,58,0.06); color: var(--fma-text); } .fmp-status--achieved strong { color: var(--fm-accent); } .fmp-status--max { background: var(--fm-blue); color: #fff; } .fmp-status--max strong { color: #fff; } .fmp-status--max p { color: rgba(255,255,255,0.8); } .fmp-levels-grid { display: flex; align-items: center; gap: 20px; max-width: 720px; } .fmp-level-connector { flex: 0 0 40px; height: 2px; background: var(--fma-border-strong); } .fmp-level-card { position: relative; flex: 1; background: var(--fma-surface); border: 1.5px solid var(--fma-border); border-radius: var(--fm-radius-lg); padding: 28px 24px; text-align: center; transition: border-color 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease); } .fmp-level-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fma-text-tertiary); margin-bottom: 12px; } .fmp-level-amount { font-size: 24px; font-weight: 800; color: var(--fma-text); margin-bottom: 10px; } .fmp-level-discount { font-size: 17px; font-weight: 700; color: var(--fm-accent); } .fmp-level-discount span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--fma-text-tertiary); margin-top: 4px; } .fmp-level-check { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700; color: #16a34a; background: rgba(22,163,74,0.1); padding: 4px 12px; border-radius: 100px; } .fmp-level-card--current { border-color: var(--fm-cta-dark); box-shadow: 0 0 0 3px rgba(57,211,83,0.18); } .fmp-level-card--reached { border-color: rgba(22,163,74,0.35); background: rgba(22,163,74,0.03); } .fmp-disclaimer { margin: 32px 0 0; font-size: 12px; color: var(--fma-text-tertiary); line-height: 1.6; max-width: 640px; } @media (max-width: 780px) { .fmp-levels-grid { flex-direction: column; } .fmp-level-connector { width: 2px; height: 30px; flex-basis: auto; } .fmp-level-card { width: 100%; } } /* ========================================================================== HOMEPAGE â€” Card categorie "KATALOG" Il markup viene generato dal filtro fmatik_restyle_katalog_section() in functions.php (il contenuto della home Ã¨ HTML salvato nel database, senza classi proprie): qui solo la presentazione. Card premium bianche, accento verde brillante come barra laterale discreta, niente piÃ¹ arancione. ========================================================================== */ .fm-kat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 4px; } .fm-kat-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: #ffffff; border: 1px solid var(--fm-border); border-radius: 14px; padding: 22px 22px 22px 24px; min-height: 84px; text-decoration: none; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 6px 16px rgba(15,23,42,0.045); transition: transform 0.22s var(--fm-ease), box-shadow 0.22s var(--fm-ease), border-color 0.22s var(--fm-ease); } .fm-kat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fm-cta); opacity: 0.5; transition: opacity 0.22s var(--fm-ease), width 0.22s var(--fm-ease); } .fm-kat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(15,23,42,0.06), 0 16px 32px rgba(15,23,42,0.09); border-color: var(--fm-border-strong); } .fm-kat-card:hover::before { opacity: 1; width: 4px; } .fm-kat-name { color: var(--fm-blue); font-size: 16px; font-weight: 700; line-height: 1.35; transition: color 0.22s var(--fm-ease); } .fm-kat-card:hover .fm-kat-name { color: var(--fm-success); } .fm-kat-count { color: var(--fm-text-tertiary); font-size: 12.5px; font-weight: 500; } @media (max-width: 980px) { .fm-kat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fm-kat-grid { grid-template-columns: 1fr; } .fm-kat-card { padding: 20px 20px 20px 22px; min-height: auto; } } @media (max-width: 600px) { .fmp-summary-card { padding: 26px 24px; flex-direction: column; align-items: flex-start; } .fmp-progress-card { padding: 24px 20px; } } /* ========================================================================== LANDING PAGE BRAND (es. /bft/) â€” card di navigazione verso categorie/pagine. Stessa identitÃ visiva delle card "Katalog": bordo leggero, ombra discreta, barra verde a sinistra che diventa piÃ¹ evidente in hover, titolo che passa dal blu profondo a un verde leggibile. Qui con spazio per una descrizione. ========================================================================== */ .fm-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; } .fm-hub-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 32px 28px; text-decoration: none; box-shadow: var(--fm-shadow-sm); overflow: hidden; transition: transform 0.25s var(--fm-ease), box-shadow 0.25s var(--fm-ease), border-color 0.25s var(--fm-ease); } .fm-hub-card-link { position: absolute; inset: 0; z-index: 1; } .fm-hub-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fm-cta); opacity: 0.55; transition: opacity 0.25s var(--fm-ease), width 0.25s var(--fm-ease); } .fm-hub-card:hover { transform: translateY(-4px); box-shadow: var(--fm-shadow); border-color: var(--fm-border-strong); } .fm-hub-card:hover::before { opacity: 1; width: 5px; } .fm-hub-card h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--fm-blue); transition: color 0.25s var(--fm-ease); } .fm-hub-card:hover h3 { color: var(--fm-success); } .fm-hub-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fm-text-secondary); } .fm-hub-card-cta { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--fm-cta-dark); } @media (max-width: 900px) { .fm-hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .fm-hub-grid { grid-template-columns: 1fr; } } /* ROGER hub page (bozza): 4 card, layout 2x2 su desktop per evitare la riga orfana che si avrebbe riusando la griglia a 3 colonne di .fm-hub-grid (usata da BFT, invariata). A tablet e mobile le regole gia' esistenti di .fm-hub-grid (2 colonne / 1 colonna) restano corrette anche per 4 card, nessuna modifica necessaria a quei breakpoint. */ @media (min-width: 901px) { .fm-hub-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* Pagine categoria ROGER (bozza) con inventario ancora ridotto: evita che 1-2 card si allarghino a riempire tutta la riga della griglia standard .fm-grid. */ .fm-grid--tight { grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); } /* --- Card "Katalog" come