@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ============================================================ Landing Farmaconvenienza — stili estratti dai blocchi HTML. Generato automaticamente: NON modificare a mano le .fcl-*, vengono rigenerate. Classi condivise fra le 4 landing. Font Inter: stesso meccanismo (Google Fonts) e stessi pesi gia' usati dal catalogo font del tema (modulo fc_header). ============================================================ */ /* --- Token del design delle landing --------------------------- Definiti QUI e non globalmente: restano confinati alle landing e non toccano il resto del sito. Per far ereditare invece i token del tema, basta commentare questo blocco. NB: alcuni divergono dal tema (es. --fc-blue tema #1456f0). */ .fc-landing { --fc-badge-cosmetic: #F7057E; --fc-badge-device: #10A76A; --fc-badge-supplement: #FDC804; --fc-blue: #005BFE; --fc-blue-tint: #D9E6FF; --fc-border: #E2E8F0; --fc-btn-primary-bg: #005BFE; --fc-btn-primary-fg: #FFFFFF; --fc-btn-secondary-border: #005BFE; --fc-btn-secondary-fg: #005BFE; --fc-container: 1280px; --fc-danger: #E53935; --fc-font-body: "Inter", system-ui, sans-serif; --fc-ink: #212529; --fc-ink-soft: rgba(33,37,41,0.75); --fc-pink: #F7057E; --fc-radius: 8px; --fc-radius-pill: 999px; --fc-sand: #F1E2CC; --fc-shadow-card: 0 1px 3px rgba(15,23,42,0.08); --fc-shadow-card-hover: 0 6px 18px rgba(0,91,254,0.12); --fc-shadow-float: 0 10px 30px rgba(15,23,42,0.10); --fc-success: #10A76A; --fc-surface-soft: #F6F8FB; --fc-weight-subheading: 600; --fc-white: #FFFFFF; --fc-yellow: #FDC804; } .fc-landing { max-width: 100%; overflow-x: hidden; } .fc-landing img { max-width: 100%; height: auto; } /* --- Normalizzazione vs tema ----------------------------------- Il tema colpisce direttamente h1-h6 e a (selettori di elemento), che battono l'ereditarieta' del wrapper. Qui ripristino la tipografia originale delle landing. Specificita' tenuta BASSA (0-1-1) apposta: le classi .fcl-* (0-2-0) restano piu' forti e continuano a vincere. */ .fc-landing { font-family: var(--fc-font-body); color: var(--fc-ink); line-height: normal; /* come l'originale: gli elementi che hanno un line-height proprio lo dichiarano nella .fcl-* */ } .fc-landing h1, .fc-landing h2, .fc-landing h3, .fc-landing h4, .fc-landing h5, .fc-landing h6, .fc-landing p, .fc-landing span, .fc-landing a, .fc-landing li, .fc-landing button, .fc-landing input { font-family: var(--fc-font-body); } .fc-landing a { color: var(--fc-blue); text-decoration: none; } @keyframes sc-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- stili condivisi (dedup fra tutte le landing) --- */ .fc-landing .fcl-1 { position: relative; background: rgb(255, 255, 255); overflow: hidden } .fc-landing .fcl-2 { position: absolute; left: 0px; top: 0px; width: 190px; height: 190px; background: var(--fc-blue-tint); border-radius: 0px 0px 100%; opacity: 0.7 } .fc-landing .fcl-3 { position: absolute; right: 36px; top: 30px; width: 170px; height: 110px; background-image: radial-gradient(var(--fc-blue) 1.5px, transparent 1.5px); background-size: 18px 18px; opacity: 0.35 } .fc-landing .fcl-4 { position: absolute; right: 0px; bottom: 0px; width: 150px; height: 150px; background: var(--fc-yellow); border-radius: 100% 0px 0px } .fc-landing .fcl-5 { max-width: var(--fc-container); margin: 0px auto; padding: 46px 24px 34px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; position: relative } .fc-landing .fcl-6 { max-width: 580px } .fc-landing .fcl-7 { display: flex; align-items: center; gap: 14px; font-size: 12.5px } .fc-landing .fcl-8 { display: inline-flex; align-items: center; gap: 8px; background: var(--fc-blue-tint); color: var(--fc-blue); border-radius: 999px; padding: 4px 13px; font-weight: 800; letter-spacing: 0.1em; font-size: 10.5px } .fc-landing .fcl-9 { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-yellow) } .fc-landing .fcl-10 { display: inline-flex; align-items: center; gap: 8px; color: var(--fc-ink-soft) } .fc-landing .fcl-11 { opacity: 0.6 } .fc-landing .fcl-12 { font-weight: 600; color: var(--fc-ink) } .fc-landing .fcl-13 { margin: 22px 0px 14px; font-size: 58px; line-height: 1.02; letter-spacing: -0.015em; font-weight: 900; text-transform: uppercase; color: var(--fc-blue) } .fc-landing .fcl-14 { margin: 0px; font-size: 19px; font-weight: 700; line-height: 1.4 } .fc-landing .fcl-15 { margin: 10px 0px 0px; font-size: 15px; line-height: 1.6; color: var(--fc-ink-soft); max-width: 470px } .fc-landing .fcl-16 { display: flex; gap: 14px; margin: 26px 0px 32px; flex-wrap: wrap } .fc-landing .fcl-17 { display: contents } .fc-landing .fcl-18 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 16px; padding: 14px 28px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid transparent; line-height: 1.2; background: var(--fc-btn-primary-bg); color: var(--fc-btn-primary-fg) } .fc-landing .fcl-19 { flex-shrink: 0 } .fc-landing .fcl-20 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 16px; padding: 14px 28px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border-width: 1.5px; border-style: solid; border-color: var(--fc-btn-secondary-border); border-image: initial; line-height: 1.2; background: var(--fc-white); color: var(--fc-btn-secondary-fg) } .fc-landing .fcl-21 { display: flex; gap: 44px } .fc-landing .fcl-22 { display: block; font-size: 26px; font-weight: 900; color: var(--fc-blue) } .fc-landing .fcl-23 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--fc-ink-soft) } .fc-landing .fcl-24 { position: relative; width: 450px; height: 450px; margin: 0px auto } .fc-landing .fcl-25 { position: absolute; top: 22px; left: 34px; width: 428px; height: 428px; border-radius: 50%; background: var(--fc-blue) } .fc-landing .fcl-26 { position: absolute; top: 6px; right: -8px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: var(--fc-yellow); color: var(--fc-ink); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 800; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-27 { position: absolute; top: 0px; left: 0px; width: 428px; height: 428px; border-radius: 50%; overflow: hidden; box-shadow: var(--fc-shadow-float); border: 1px solid rgba(0, 91, 254, 0.15); z-index: 1 } .fc-landing .fcl-28 { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50% } .fc-landing .fcl-29 { position: absolute; left: -26px; bottom: 30px; z-index: 2; background: rgb(255, 255, 255); color: var(--fc-ink); border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-30 { width: 38px; height: 38px; border-radius: 50%; background: var(--fc-blue-tint); display: flex; align-items: center; justify-content: center; color: var(--fc-blue) } .fc-landing .fcl-31 { line-height: 1.25 } .fc-landing .fcl-32 { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--fc-ink-soft) } .fc-landing .fcl-33 { font-size: 14px } .fc-landing .fcl-34 { max-width: var(--fc-container); margin: 0px auto; padding: 0px 24px 40px; position: relative } .fc-landing .fcl-35 { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: var(--fc-shadow-card) } .fc-landing .fcl-36 { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-right: 1px solid var(--fc-border) } .fc-landing .fcl-37 { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--fc-blue-tint); color: var(--fc-blue); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-38 { line-height: 1.3 } .fc-landing .fcl-39 { display: block; font-size: 12px; letter-spacing: 0.08em } .fc-landing .fcl-40 { font-size: 12.5px; color: var(--fc-ink-soft) } .fc-landing .fcl-41 { display: flex; align-items: center; gap: 14px; padding: 18px 24px } .fc-landing .fcl-42 { max-width: var(--fc-container); margin: 0px auto; padding: 60px 24px 0px } .fc-landing .fcl-43 { text-align: center; margin-bottom: 26px } .fc-landing .fcl-44 { display: inline-flex; align-items: center; gap: 8px; background: var(--fc-blue-tint); color: var(--fc-blue); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em } .fc-landing .fcl-45 { margin: 14px 0px 6px; font-size: 30px } .fc-landing .fcl-46 { color: var(--fc-blue) } .fc-landing .fcl-47 { margin: 0px; font-size: 13.5px; color: var(--fc-ink-soft) } .fc-landing .fcl-48 { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px } .fc-landing .fcl-49 { min-width: 46px; height: 46px; border-radius: 999px; padding: 0px 16px; border: 1.5px solid var(--fc-border); background: rgb(255, 255, 255); color: var(--fc-blue); font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s } .fc-landing .fcl-50 { min-width: 46px; height: 46px; border-radius: 999px; padding: 0px 16px; border: 1.5px solid var(--fc-blue); background: var(--fc-blue); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s } .fc-landing .fcl-51 { background: var(--fc-blue-tint); border: 1px solid rgba(0, 91, 254, 0.18); border-radius: 16px; padding: 26px 30px; display: flex; align-items: center; gap: 24px } .fc-landing .fcl-52 { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background: var(--fc-blue); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900 } .fc-landing .fcl-53 { flex: 1 1 0% } .fc-landing .fcl-54 { font-size: 18px; display: block } .fc-landing .fcl-55 { margin: 6px 0px 0px; font-size: 14px; color: var(--fc-ink-soft); line-height: 1.6 } .fc-landing .fcl-56 { margin: 6px 0px 0px; font-size: 13px; color: var(--fc-ink-soft) } .fc-landing .fcl-57 { color: var(--fc-ink) } .fc-landing .fcl-58 { flex: 0 0 auto } .fc-landing .fcl-59 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 14.5px; padding: 11px 22px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid transparent; line-height: 1.2; background: var(--fc-btn-primary-bg); color: var(--fc-btn-primary-fg) } .fc-landing .fcl-60 { margin: 12px 0px 0px; text-align: center; font-size: 12px; font-style: italic; color: var(--fc-ink-soft) } .fc-landing .fcl-61 { background: var(--fc-yellow); color: var(--fc-ink); border: 1px dashed rgba(33, 37, 41, 0.45); border-radius: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; font-style: normal; white-space: nowrap } .fc-landing .fcl-62 { max-width: var(--fc-container); margin: 0px auto; padding: 64px 24px 0px } .fc-landing .fcl-63 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px } .fc-landing .fcl-64 { margin: 14px 0px 0px; font-size: 32px; line-height: 1.15 } .fc-landing .fcl-65 { display: inline-flex; align-items: center; gap: 6px; color: var(--fc-blue); font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 14.5px; text-decoration: none; transition: color 0.15s } .fc-landing .fcl-66 { flex-shrink: 0; transform: none; transition: transform 0.15s } .fc-landing .fcl-67 { display: flex; gap: 18px; align-items: center; background: var(--fc-blue-tint); border: 1px solid rgba(0, 91, 254, 0.18); border-radius: 12px; padding: 20px 24px; margin-bottom: 22px } .fc-landing .fcl-68 { width: 72px; height: 72px; flex: 0 0 auto } .fc-landing .fcl-69 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .fc-landing .fcl-70 { font-size: 15px } .fc-landing .fcl-71 { background: var(--fc-blue); color: rgb(255, 255, 255); border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 700 } .fc-landing .fcl-72 { margin: 6px 0px 0px; font-size: 14.5px; font-style: italic; color: var(--fc-ink-soft); line-height: 1.55 } .fc-landing .fcl-73 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } .fc-landing .fcl-74 { border: 1px solid var(--fc-border); border-radius: 10px; padding: 18px 20px; cursor: pointer; background: rgb(255, 255, 255); transition: box-shadow 0.18s } .fc-landing .fcl-75 { display: flex; gap: 14px; align-items: flex-start } .fc-landing .fcl-76 { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--fc-blue-tint); color: var(--fc-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px } .fc-landing .fcl-77 { flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px } .fc-landing .fcl-78 { margin: 0px; font-size: 13.5px; color: var(--fc-ink-soft); line-height: 1.6 } .fc-landing .fcl-79 { flex: 0 0 auto; margin-top: 4px; transform: rotate(180deg); transition: transform 0.2s } .fc-landing .fcl-80 { margin: 0px; font-size: 13px; color: var(--fc-ink-soft); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden } .fc-landing .fcl-81 { flex: 0 0 auto; margin-top: 4px; transform: rotate(0deg); transition: transform 0.2s } .fc-landing .fcl-82 { margin-top: 30px; border-radius: 12px; background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255); padding: 28px 34px; display: flex; align-items: center; gap: 24px; position: relative; overflow: hidden } .fc-landing .fcl-83 { position: absolute; right: -40px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.08) } .fc-landing .fcl-84 { position: absolute; right: 120px; bottom: -90px; width: 150px; height: 150px; border-radius: 50%; background: rgba(253, 200, 4, 0.2) } .fc-landing .fcl-85 { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-86 { flex: 1 1 0%; position: relative } .fc-landing .fcl-87 { font-size: 19px; font-weight: 900 } .fc-landing .fcl-88 { margin: 4px 0px 0px; font-size: 14px; opacity: 0.92 } .fc-landing .fcl-89 { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; position: relative } .fc-landing .fcl-90 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 14.5px; padding: 11px 22px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid rgb(255, 255, 255); line-height: 1.2; background: rgb(255, 255, 255); color: var(--fc-blue) } .fc-landing .fcl-91 { font-size: 12px; color: rgba(255, 255, 255, 0.85) } .fc-landing .fcl-92 { background: var(--fc-sand); margin-top: 72px; padding: 54px 24px } .fc-landing .fcl-93 { max-width: var(--fc-container); margin: 0px auto; text-align: center } .fc-landing .fcl-94 { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); color: var(--fc-blue); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em } .fc-landing .fcl-95 { margin: 14px 0px 8px; font-size: 30px } .fc-landing .fcl-96 { margin: 0px; font-size: 14px; color: var(--fc-ink-soft) } .fc-landing .fcl-97 { display: inline-flex; background: rgb(255, 255, 255); border: 1px solid var(--fc-border); border-radius: 999px; padding: 4px; gap: 4px; margin-top: 20px } .fc-landing .fcl-98 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 9px 24px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s; background: var(--fc-blue); color: rgb(255, 255, 255) } .fc-landing .fcl-99 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 9px 24px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s; background: transparent; color: rgba(33, 37, 41, 0.65) } .fc-landing .fcl-100 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; text-align: left } .fc-landing .fcl-101 { background: rgb(255, 255, 255); border-radius: 12px; padding: 20px; box-shadow: var(--fc-shadow-card); display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.18s } .fc-landing .fcl-102 { display: flex; align-items: center; justify-content: space-between } .fc-landing .fcl-103 { width: 30px; height: 30px; border-radius: 50%; background: var(--fc-blue); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px } .fc-landing .fcl-104 { background: var(--fc-blue-tint); color: var(--fc-blue); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase } .fc-landing .fcl-105 { font-size: 16px } .fc-landing .fcl-106 { margin: 0px; font-size: 13px; color: var(--fc-ink-soft); line-height: 1.55 } .fc-landing .fcl-107 { margin: 22px 0px 0px; font-size: 12px; font-style: italic; color: var(--fc-ink-soft) } .fc-landing .fcl-108 { max-width: var(--fc-container); margin: 0px auto; padding: 72px 24px 0px } .fc-landing .fcl-109 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px } .fc-landing .fcl-110 { margin: 12px 0px 6px; font-size: 30px } .fc-landing .fcl-111 { background: var(--fc-yellow); color: var(--fc-ink); border: 1px dashed rgba(33, 37, 41, 0.45); border-radius: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; white-space: nowrap } .fc-landing .fcl-112 { display: flex; gap: 8px } .fc-landing .fcl-113 { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--fc-border); background: rgb(255, 255, 255); color: var(--fc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s, color 0.15s } .fc-landing .fcl-114 { overflow: hidden } .fc-landing .fcl-115 { display: flex; gap: 16px; transform: translateX(0px); transition: transform 0.35s } .fc-landing .fcl-116 { flex: 0 0 148px; border: 1px solid var(--fc-border); border-radius: 10px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; background: rgb(255, 255, 255); cursor: pointer; transition: box-shadow 0.18s } .fc-landing .fcl-117 { width: 46px; height: 46px; border-radius: 50%; background: var(--fc-blue-tint); color: var(--fc-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px } .fc-landing .fcl-118 { font-size: 12.5px; text-align: center } .fc-landing .fcl-119 { font-size: 11px; color: var(--fc-ink-soft) } .fc-landing .fcl-120 { width: 46px; height: 46px; border-radius: 50%; background: var(--fc-yellow); color: var(--fc-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px } .fc-landing .fcl-121 { width: 46px; height: 46px; border-radius: 50%; background: var(--fc-sand); color: var(--fc-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px } .fc-landing .fcl-122 { background: var(--fc-surface-soft); margin-top: 72px; padding: 54px 0px } .fc-landing .fcl-123 { max-width: var(--fc-container); margin: 0px auto; padding: 0px 24px } .fc-landing .fcl-124 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px } .fc-landing .fcl-125 { margin: 0px; font-size: 30px } .fc-landing .fcl-126 { margin: 6px 0px 0px; font-size: 13.5px; color: var(--fc-ink-soft) } .fc-landing .fcl-127 { position: relative } .fc-landing .fcl-128 { padding: 10px 40px 10px 18px; border-radius: 999px; border: 1.5px solid var(--fc-border); background: rgb(255, 255, 255); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fc-ink); cursor: pointer; outline: none } .fc-landing .fcl-129 { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none } .fc-landing .fcl-130 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px } .fc-landing .fcl-131 { border: 1.5px solid var(--fc-blue); background: var(--fc-blue); color: rgb(255, 255, 255); border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s } .fc-landing .fcl-132 { border: 1.5px solid var(--fc-border); background: rgb(255, 255, 255); color: var(--fc-ink); border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s } .fc-landing .fcl-133 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px } .fc-landing .fcl-134 { position: absolute; top: 10px; left: 10px; z-index: 2; border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--fc-yellow); color: var(--fc-ink) } .fc-landing .fcl-135 { width: 100%; background: var(--surface-card); border: 1px solid var(--fc-border); border-radius: var(--fc-radius); overflow: hidden; font-family: var(--fc-font-body); box-shadow: var(--fc-shadow-card); transform: none; transition: box-shadow 0.18s, transform 0.18s; position: relative } .fc-landing .fcl-136 { position: relative; height: 195px; background: rgb(246, 248, 251); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-137 { display: inline-flex; align-items: center; background: var(--fc-danger); color: rgb(255, 255, 255); border-radius: var(--fc-radius-pill); padding: 3px 10px; font-family: var(--fc-font-body); font-weight: 700; font-size: 12.5px; line-height: 1.4; position: absolute; top: 10px; right: 10px } .fc-landing .fcl-138 { display: inline-flex; align-items: center; background: var(--fc-badge-supplement); color: var(--fc-ink); border-radius: var(--fc-radius-pill); padding: 2px 9px; font-family: var(--fc-font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; position: absolute; bottom: 10px; left: 10px } .fc-landing .fcl-139 { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px } .fc-landing .fcl-140 { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-blue) } .fc-landing .fcl-141 { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--fc-ink); line-height: 1.35; min-height: 35px } .fc-landing .fcl-142 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fc-font-body); font-size: 11px; color: var(--fc-ink-soft) } .fc-landing .fcl-143 { display: inline-flex; gap: 1px } .fc-landing .fcl-144 { display: flex; align-items: center; justify-content: space-between; margin-top: 2px } .fc-landing .fcl-145 { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--fc-font-body) } .fc-landing .fcl-146 { color: var(--fc-ink-soft); font-size: 12.24px; font-weight: 400 } .fc-landing .fcl-147 { color: var(--price-color); font-size: 18px; font-weight: 700 } .fc-landing .fcl-148 { width: 34px; height: 34px; border-radius: var(--fc-radius); border: 1.5px solid var(--fc-blue); background: rgb(255, 255, 255); color: var(--fc-blue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s } .fc-landing .fcl-149 { position: absolute; top: 10px; left: 10px; z-index: 2; border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--fc-success); color: rgb(255, 255, 255) } .fc-landing .fcl-150 { text-align: center; margin-top: 26px } .fc-landing .fcl-151 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 14.5px; padding: 11px 22px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border-width: 1.5px; border-style: solid; border-color: var(--fc-btn-secondary-border); border-image: initial; line-height: 1.2; background: var(--fc-white); color: var(--fc-btn-secondary-fg) } .fc-landing .fcl-152 { max-width: var(--fc-container); margin: 0px auto; padding: 72px 24px 0px; text-align: center } .fc-landing .fcl-153 { margin: 0px auto; font-size: 13.5px; color: var(--fc-ink-soft); max-width: 520px } .fc-landing .fcl-154 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; text-align: left } .fc-landing .fcl-155 { border: 1px solid var(--fc-border); border-radius: 12px; overflow: hidden; background: rgb(255, 255, 255); display: flex; flex-direction: column; transition: box-shadow 0.18s } .fc-landing .fcl-156 { position: relative; height: 190px } .fc-landing .fcl-157 { width: 100%; height: 100%; box-sizing: border-box; background: repeating-linear-gradient(45deg, rgb(241, 245, 249) 0px, rgb(241, 245, 249) 12px, rgb(233, 238, 246) 12px, rgb(233, 238, 246) 24px); border: 1px dashed rgb(196, 208, 224); display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; color: rgb(100, 116, 139); font-size: 12.5px; font-weight: 600; line-height: 1.4 } .fc-landing .fcl-158 { position: absolute; bottom: 12px; right: 12px; background: rgba(255, 255, 255, 0.94); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--fc-ink); pointer-events: none } .fc-landing .fcl-159 { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 0% } .fc-landing .fcl-160 { display: flex; align-items: center; gap: 8px } .fc-landing .fcl-161 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--fc-blue) } .fc-landing .fcl-162 { font-size: 12px; color: var(--fc-ink-soft) } .fc-landing .fcl-163 { margin: 0px; font-size: 17px; font-weight: 800; line-height: 1.35 } .fc-landing .fcl-164 { margin: 0px; font-size: 13.5px; color: var(--fc-ink-soft); line-height: 1.55 } .fc-landing .fcl-165 { margin-top: auto; padding-top: 6px } .fc-landing .fcl-166 { margin-top: 72px; background: linear-gradient(118deg, rgb(0, 91, 254) 0%, rgb(46, 123, 254) 100%); color: rgb(255, 255, 255); text-align: center; padding: 58px 24px; position: relative; overflow: hidden } .fc-landing .fcl-167 { position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.08) } .fc-landing .fcl-168 { position: absolute; left: 6%; bottom: -110px; width: 230px; height: 230px; border-radius: 50%; background: rgba(253, 200, 4, 0.22) } .fc-landing .fcl-169 { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center; position: relative } .fc-landing .fcl-170 { margin: 18px 0px 8px; font-size: 30px; line-height: 1.2; position: relative } .fc-landing .fcl-171 { color: var(--fc-yellow) } .fc-landing .fcl-172 { margin: 0px auto 24px; font-size: 14px; opacity: 0.92; max-width: 470px; position: relative } .fc-landing .fcl-173 { display: inline-flex; background: rgb(255, 255, 255); border-radius: 999px; padding: 4px; gap: 4px; position: relative } .fc-landing .fcl-174 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; padding: 9px 18px; font-size: 13.5px; font-family: inherit; border-radius: 999px; width: 260px; color: rgb(33, 37, 41); background: transparent } .fc-landing .fcl-175 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 13px; padding: 8px 16px; border-radius: var(--fc-radius-pill); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid transparent; line-height: 1.2; background: var(--fc-yellow); color: var(--fc-ink) } .fc-landing .fcl-176 { margin: 16px auto 0px; font-size: 11.5px; color: rgba(255, 255, 255, 0.85); position: relative } .fc-landing .fcl-177 { color: rgb(255, 255, 255); text-decoration: underline } .fc-landing .fcl-178 { position: relative; background: linear-gradient(105deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 48%, rgb(234, 242, 255) 48.001%, rgb(210, 227, 255) 100%); overflow: hidden } .fc-landing .fcl-179 { position: absolute; top: -50%; right: 16%; width: 130px; height: 200%; background: var(--fc-blue); opacity: 0.06; transform: skewX(-18deg) } .fc-landing .fcl-180 { position: absolute; top: -50%; right: 30.5%; width: 26px; height: 200%; background: var(--fc-yellow); transform: skewX(-18deg) } .fc-landing .fcl-181 { position: absolute; top: -50%; right: 29%; width: 10px; height: 200%; background: var(--fc-blue); opacity: 0.85; transform: skewX(-18deg) } .fc-landing .fcl-182 { margin: 22px 0px 0px; font-size: 64px; line-height: 0.96; letter-spacing: -0.02em; font-style: italic; font-weight: 900; text-transform: uppercase; color: var(--fc-blue) } .fc-landing .fcl-183 { display: flex; gap: 6px; margin: 16px 0px 18px } .fc-landing .fcl-184 { display: inline-block; width: 74px; height: 8px; background: var(--fc-yellow); transform: skewX(-18deg) } .fc-landing .fcl-185 { display: inline-block; width: 18px; height: 8px; background: var(--fc-blue); transform: skewX(-18deg) } .fc-landing .fcl-186 { display: inline-block; width: 8px; height: 8px; background: var(--fc-blue); opacity: 0.4; transform: skewX(-18deg) } .fc-landing .fcl-187 { margin: 0px; font-size: 19px; font-weight: 800; font-style: italic; line-height: 1.35 } .fc-landing .fcl-188 { position: absolute; top: -14px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: var(--fc-yellow); color: var(--fc-ink); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 800; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-189 { height: 400px; border-radius: 16px; overflow: hidden; box-shadow: var(--fc-shadow-float); border: 1px solid rgba(0, 91, 254, 0.18); position: relative; z-index: 1 } .fc-landing .fcl-190 { width: 100%; height: 100%; object-fit: cover; display: block } .fc-landing .fcl-191 { position: absolute; left: -16px; bottom: 22px; z-index: 2; background: rgb(255, 255, 255); color: var(--fc-ink); border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-192 { background: var(--fc-yellow); color: var(--fc-ink); border: 1px dashed rgba(33, 37, 41, 0.45); border-radius: 4px; padding: 1px 7px; font-size: 10px; font-weight: 800; white-space: nowrap } .fc-landing .fcl-193 { height: 8px; background: repeating-linear-gradient(105deg,var(--fc-blue) 0 96px,var(--fc-yellow) 96px 128px) } .fc-landing .fcl-194 { margin-bottom: 24px } .fc-landing .fcl-195 { margin: 14px 0px 6px; font-size: 30px; font-style: italic; font-weight: 900; text-transform: uppercase } .fc-landing .fcl-196 { border: 1px solid var(--fc-border); border-radius: 12px; padding: 22px; background: rgb(255, 255, 255); cursor: pointer; display: flex; flex-direction: column; gap: 11px; transition: box-shadow 0.18s, border-color 0.18s } .fc-landing .fcl-197 { width: 46px; height: 46px; border-radius: 50%; background: var(--fc-blue-tint); color: var(--fc-blue); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-198 { font-size: 16px; font-style: italic; text-transform: uppercase } .fc-landing .fcl-199 { margin: 14px 0px 0px; font-size: 30px; line-height: 1.15; font-style: italic; font-weight: 900; text-transform: uppercase } .fc-landing .fcl-200 { position: absolute; top: -50%; right: 120px; width: 40px; height: 200%; background: var(--fc-yellow); opacity: 0.25; transform: skewX(-18deg) } .fc-landing .fcl-201 { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto } .fc-landing .fcl-202 { margin: 14px 0px 8px; font-size: 30px; font-style: italic; font-weight: 900; text-transform: uppercase } .fc-landing .fcl-203 { background: var(--fc-yellow); color: var(--fc-ink); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase } .fc-landing .fcl-204 { margin: 12px 0px 6px; font-size: 30px; font-style: italic; font-weight: 900; text-transform: uppercase } .fc-landing .fcl-205 { margin: 0px; font-size: 30px; font-style: italic; font-weight: 900; text-transform: uppercase } .fc-landing .fcl-206 { position: absolute; top: -50%; left: 12%; width: 34px; height: 200%; background: var(--fc-yellow); opacity: 0.3; transform: skewX(-18deg) } .fc-landing .fcl-207 { position: absolute; top: -50%; right: 14%; width: 60px; height: 200%; background: rgb(255, 255, 255); opacity: 0.07; transform: skewX(-18deg) } .fc-landing .fcl-208 { margin: 18px 0px 8px; font-size: 30px; line-height: 1.2; font-style: italic; font-weight: 900; text-transform: uppercase; position: relative } .fc-landing .fcl-209 { position: relative; background: rgb(254, 252, 247); overflow: hidden } .fc-landing .fcl-210 { position: absolute; right: 0px; top: 0px; width: 250px; height: 210px; background: var(--fc-yellow); border-radius: 0px 0px 0px 130px } .fc-landing .fcl-211 { position: absolute; right: 64px; top: 34px; width: 16px; height: 16px; border-radius: 50%; background: rgb(255, 255, 255); opacity: 0.85 } .fc-landing .fcl-212 { position: absolute; left: -90px; bottom: -60px; width: 300px; height: 300px; border-radius: 50%; background: var(--fc-blue-tint); opacity: 0.55 } .fc-landing .fcl-213 { position: absolute; left: 150px; bottom: -100px; width: 230px; height: 230px; border-radius: 50%; background: var(--fc-blue-tint); opacity: 0.4 } .fc-landing .fcl-214 { position: absolute; left: 44%; top: 52px; width: 12px; height: 12px; border-radius: 50%; background: var(--fc-blue-tint) } .fc-landing .fcl-215 { position: absolute; right: 96px; top: 6px; transform: rotate(14deg) } .fc-landing .fcl-216 { position: absolute; right: 70px; bottom: 2px; transform: rotate(-12deg) } .fc-landing .fcl-217 { height: 400px; border-radius: 24px; overflow: hidden; box-shadow: var(--fc-shadow-float); border: 1px solid rgba(0, 91, 254, 0.12); position: relative; z-index: 1 } .fc-landing .fcl-218 { position: absolute; left: -16px; bottom: 22px; z-index: 2; background: rgb(255, 255, 255); color: var(--fc-ink); border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-219 { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgb(255, 255, 255); border-radius: 14px; box-shadow: var(--fc-shadow-card) } .fc-landing .fcl-220 { display: block; width: 100%; height: 34px } .fc-landing .fcl-221 { background: var(--fc-yellow); padding: 12px 24px 16px; text-align: center } .fc-landing .fcl-222 { display: inline-flex; align-items: center; gap: 10px; color: var(--fc-blue); font-size: 15px; font-weight: 800 } .fc-landing .fcl-223 { text-align: center; margin-bottom: 24px } .fc-landing .fcl-224 { border: 1px solid var(--fc-border); border-radius: 14px; padding: 22px; background: rgb(255, 255, 255); cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; transition: box-shadow 0.18s, border-color 0.18s } .fc-landing .fcl-225 { width: 52px; height: 52px; border-radius: 50%; background: var(--fc-blue-tint); color: var(--fc-blue); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-226 { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--fc-pink) 9%, #FFFFFF); color: var(--fc-pink); display: flex; align-items: center; justify-content: center } .fc-landing .fcl-227 { display: flex; gap: 18px; align-items: center; background: var(--fc-blue-tint); border: 1px solid rgba(0, 91, 254, 0.18); border-radius: 14px; padding: 20px 24px; margin-bottom: 22px } .fc-landing .fcl-228 { border: 1px solid var(--fc-border); border-radius: 12px; padding: 18px 20px; cursor: pointer; background: rgb(255, 255, 255); transition: box-shadow 0.18s } .fc-landing .fcl-229 { margin-top: 30px; border-radius: 14px; background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255); padding: 28px 34px; display: flex; align-items: center; gap: 24px; position: relative; overflow: hidden } .fc-landing .fcl-230 { position: absolute; right: 130px; bottom: -90px; width: 150px; height: 150px; border-radius: 50%; background: rgba(253, 200, 4, 0.2) } .fc-landing .fcl-231 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 9px 28px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s; background: var(--fc-blue); color: rgb(255, 255, 255) } .fc-landing .fcl-232 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 9px 28px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s; background: transparent; color: rgba(33, 37, 41, 0.65) } .fc-landing .fcl-233 { background: rgb(255, 255, 255); border-radius: 14px; padding: 20px; box-shadow: var(--fc-shadow-card); display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.18s } .fc-landing .fcl-234 { flex: 0 0 148px; border: 1px solid var(--fc-border); border-radius: 12px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; background: rgb(255, 255, 255); cursor: pointer; transition: box-shadow 0.18s } .fc-landing .fcl-235 { display: inline-flex; align-items: center; background: var(--fc-badge-cosmetic); color: rgb(255, 255, 255); border-radius: var(--fc-radius-pill); padding: 2px 9px; font-family: var(--fc-font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; position: absolute; bottom: 10px; left: 10px } .fc-landing .fcl-236 { display: inline-flex; align-items: center; background: var(--fc-badge-device); color: rgb(255, 255, 255); border-radius: var(--fc-radius-pill); padding: 2px 9px; font-family: var(--fc-font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; position: absolute; bottom: 10px; left: 10px } .fc-landing .fcl-237 { border: 1px solid var(--fc-border); border-radius: 14px; overflow: hidden; background: rgb(255, 255, 255); display: flex; flex-direction: column; transition: box-shadow 0.18s } .fc-landing .fcl-238 { position: absolute; left: 22%; top: 56px; transform: rotate(-14deg) } .fc-landing .fcl-239 { position: absolute; right: 24%; top: 110px; transform: rotate(12deg) } .fc-landing .fcl-240 { position: relative; background: linear-gradient(118deg,var(--acc,#F7057E) 0%,#7801F1 100%); color: rgb(255, 255, 255); overflow: hidden } .fc-landing .fcl-241 { position: absolute; right: -60px; top: -90px; width: 320px; height: 320px; border-radius: 58% 42% 55% 45%; background: rgba(255, 255, 255, 0.08) } .fc-landing .fcl-242 { position: absolute; left: 38%; bottom: -120px; width: 260px; height: 260px; border-radius: 55% 45% 50% 50%; background: rgba(253, 200, 4, 0.22) } .fc-landing .fcl-243 { max-width: var(--fc-container); margin: 0px auto; padding: 46px 24px 128px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; position: relative } .fc-landing .fcl-244 { max-width: 560px } .fc-landing .fcl-245 { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 4px 13px; font-weight: 800; letter-spacing: 0.1em; font-size: 10.5px } .fc-landing .fcl-246 { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.85) } .fc-landing .fcl-247 { color: rgba(255, 255, 255, 0.85) } .fc-landing .fcl-248 { font-weight: 600; color: rgb(255, 255, 255) } .fc-landing .fcl-249 { margin: 20px 0px 14px; font-size: 62px; line-height: 1.04; letter-spacing: -0.01em } .fc-landing .fcl-250 { margin: 0px; font-size: 16.5px; line-height: 1.6; opacity: 0.93; max-width: 470px } .fc-landing .fcl-251 { display: flex; gap: 14px; margin: 28px 0px 34px; flex-wrap: wrap } .fc-landing .fcl-252 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 16px; padding: 14px 28px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid rgb(255, 255, 255); line-height: 1.2; background: rgb(255, 255, 255); color: var(--fc-ink) } .fc-landing .fcl-253 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 16px; padding: 14px 28px; border-radius: var(--fc-radius); cursor: pointer; opacity: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1.5px solid rgba(255, 255, 255, 0.75); line-height: 1.2; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255) } .fc-landing .fcl-254 { display: block; font-size: 26px; font-weight: 900; color: var(--fc-yellow) } .fc-landing .fcl-255 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.8) } .fc-landing .fcl-256 { height: 430px; border-radius: 16px; overflow: hidden; box-shadow: var(--fc-shadow-float); border: 1px solid rgba(255, 255, 255, 0.3) } .fc-landing .fcl-257 { position: absolute; left: -16px; bottom: 26px; background: rgb(255, 255, 255); color: var(--fc-ink); border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fc-shadow-float) } .fc-landing .fcl-258 { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--acc,#F7057E) 10%, #FFFFFF); display: flex; align-items: center; justify-content: center; color: var(--acc,#F7057E) } .fc-landing .fcl-259 { position: absolute; bottom: -1px; left: 0px; width: 100%; height: 72px; display: block } .fc-landing .fcl-260 { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--acc,#F7057E) 8%, #FFFFFF); color: var(--acc,#F7057E); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em } .fc-landing .fcl-261 { width: 6px; height: 6px; border-radius: 50%; background: var(--acc,#F7057E) } .fc-landing .fcl-262 { color: var(--acc,#F7057E) } .fc-landing .fcl-263 { display: inline-flex; align-items: center; gap: 6px; color: var(--acc, #F7057E); font-family: var(--fc-font-body); font-weight: var(--fc-weight-subheading); font-size: 14.5px; text-decoration: none; transition: color 0.15s } .fc-landing .fcl-264 { display: flex; gap: 18px; align-items: center; background: color-mix(in srgb, var(--acc,#F7057E) 6%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--acc,#F7057E) 18%, #FFFFFF); border-radius: 12px; padding: 20px 24px; margin-bottom: 22px } .fc-landing .fcl-265 { background: var(--acc,#F7057E); color: rgb(255, 255, 255); border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 700 } .fc-landing .fcl-266 { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--acc,#F7057E) 9%, #FFFFFF); color: var(--acc,#F7057E); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px } .fc-landing .fcl-267 { margin-top: 30px; border-radius: 12px; background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255); padding: 28px 34px; display: flex; align-items: center; gap: 24px } .fc-landing .fcl-268 { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); color: var(--acc,#F7057E); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em } .fc-landing .fcl-269 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 9px 28px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s; background: var(--acc, #F7057E); color: rgb(255, 255, 255) } .fc-landing .fcl-270 { width: 30px; height: 30px; border-radius: 50%; background: var(--acc,#F7057E); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px } .fc-landing .fcl-271 { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--acc,#F7057E) 10%, #FFFFFF); color: var(--acc,#F7057E); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px } .fc-landing .fcl-272 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--acc,#F7057E) } .fc-landing .fcl-273 { margin-top: 72px; background: linear-gradient(118deg,var(--acc,#F7057E) 0%,#7801F1 100%); color: rgb(255, 255, 255); text-align: center; padding: 58px 24px } .fc-landing .fcl-274 { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center } .fc-landing .fcl-275 { margin: 18px 0px 8px; font-size: 30px; line-height: 1.2 } .fc-landing .fcl-276 { margin: 0px auto 24px; font-size: 14px; opacity: 0.92; max-width: 470px } .fc-landing .fcl-277 { display: inline-flex; background: rgb(255, 255, 255); border-radius: 999px; padding: 4px; gap: 4px } .fc-landing .fcl-278 { margin: 16px auto 0px; font-size: 11.5px; color: rgba(255, 255, 255, 0.85) } /* --- Override contro i selettori a ID del tema -------------------- Il tema colora i link con `#main a` (specificita' 1-0-1), che batte qualunque regola a sole classi. I CTA delle landing sono con colore proprio: senza questi override finirebbero blu su blu. Prefissando con #main saliamo a 1-2-0 e le classi tornano a vincere. */ #main .fc-landing .fcl-1 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-2 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-4 { background: var(--fc-yellow) } #main .fc-landing .fcl-8 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-9 { background: var(--fc-yellow) } #main .fc-landing .fcl-10 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-12 { color: var(--fc-ink) } #main .fc-landing .fcl-13 { color: var(--fc-blue) } #main .fc-landing .fcl-15 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-18 { background: var(--fc-btn-primary-bg); color: var(--fc-btn-primary-fg) } #main .fc-landing .fcl-20 { background: var(--fc-white); color: var(--fc-btn-secondary-fg) } #main .fc-landing .fcl-22 { color: var(--fc-blue) } #main .fc-landing .fcl-23 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-25 { background: var(--fc-blue) } #main .fc-landing .fcl-26 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-29 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-30 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-32 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-35 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-37 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-40 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-44 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-46 { color: var(--fc-blue) } #main .fc-landing .fcl-47 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-49 { background: rgb(255, 255, 255); color: var(--fc-blue) } #main .fc-landing .fcl-50 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-51 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-52 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-55 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-56 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-57 { color: var(--fc-ink) } #main .fc-landing .fcl-59 { background: var(--fc-btn-primary-bg); color: var(--fc-btn-primary-fg) } #main .fc-landing .fcl-60 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-61 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-65 { color: var(--fc-blue) } #main .fc-landing .fcl-67 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-71 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-72 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-74 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-76 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-78 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-80 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-82 { background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255) } #main .fc-landing .fcl-83 { background: rgba(255, 255, 255, 0.08) } #main .fc-landing .fcl-84 { background: rgba(253, 200, 4, 0.2) } #main .fc-landing .fcl-85 { background: rgba(255, 255, 255, 0.16) } #main .fc-landing .fcl-90 { background: rgb(255, 255, 255); color: var(--fc-blue) } #main .fc-landing .fcl-91 { color: rgba(255, 255, 255, 0.85) } #main .fc-landing .fcl-92 { background: var(--fc-sand) } #main .fc-landing .fcl-94 { background: rgb(255, 255, 255); color: var(--fc-blue) } #main .fc-landing .fcl-96 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-97 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-98 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-99 { background: transparent; color: rgba(33, 37, 41, 0.65) } #main .fc-landing .fcl-101 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-103 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-104 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-106 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-107 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-111 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-113 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-116 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-117 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-119 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-120 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-121 { background: var(--fc-sand); color: var(--fc-ink) } #main .fc-landing .fcl-122 { background: var(--fc-surface-soft) } #main .fc-landing .fcl-126 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-128 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-131 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-132 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-134 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-135 { background: var(--surface-card) } #main .fc-landing .fcl-136 { background: rgb(246, 248, 251) } #main .fc-landing .fcl-137 { background: var(--fc-danger); color: rgb(255, 255, 255) } #main .fc-landing .fcl-138 { background: var(--fc-badge-supplement); color: var(--fc-ink) } #main .fc-landing .fcl-140 { color: var(--fc-blue) } #main .fc-landing .fcl-141 { color: var(--fc-ink) } #main .fc-landing .fcl-142 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-146 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-147 { color: var(--price-color) } #main .fc-landing .fcl-148 { background: rgb(255, 255, 255); color: var(--fc-blue) } #main .fc-landing .fcl-149 { background: var(--fc-success); color: rgb(255, 255, 255) } #main .fc-landing .fcl-151 { background: var(--fc-white); color: var(--fc-btn-secondary-fg) } #main .fc-landing .fcl-153 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-155 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-157 { background: repeating-linear-gradient(45deg, rgb(241, 245, 249) 0px, rgb(241, 245, 249) 12px, rgb(233, 238, 246) 12px, rgb(233, 238, 246) 24px); color: rgb(100, 116, 139) } #main .fc-landing .fcl-158 { background: rgba(255, 255, 255, 0.94); color: var(--fc-ink) } #main .fc-landing .fcl-161 { color: var(--fc-blue) } #main .fc-landing .fcl-162 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-164 { color: var(--fc-ink-soft) } #main .fc-landing .fcl-166 { background: linear-gradient(118deg, rgb(0, 91, 254) 0%, rgb(46, 123, 254) 100%); color: rgb(255, 255, 255) } #main .fc-landing .fcl-167 { background: rgba(255, 255, 255, 0.08) } #main .fc-landing .fcl-168 { background: rgba(253, 200, 4, 0.22) } #main .fc-landing .fcl-169 { background: rgba(255, 255, 255, 0.16) } #main .fc-landing .fcl-171 { color: var(--fc-yellow) } #main .fc-landing .fcl-173 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-174 { color: rgb(33, 37, 41); background: transparent } #main .fc-landing .fcl-175 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-176 { color: rgba(255, 255, 255, 0.85) } #main .fc-landing .fcl-177 { color: rgb(255, 255, 255) } #main .fc-landing .fcl-178 { background: linear-gradient(105deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 48%, rgb(234, 242, 255) 48.001%, rgb(210, 227, 255) 100%) } #main .fc-landing .fcl-179 { background: var(--fc-blue) } #main .fc-landing .fcl-180 { background: var(--fc-yellow) } #main .fc-landing .fcl-181 { background: var(--fc-blue) } #main .fc-landing .fcl-182 { color: var(--fc-blue) } #main .fc-landing .fcl-184 { background: var(--fc-yellow) } #main .fc-landing .fcl-185 { background: var(--fc-blue) } #main .fc-landing .fcl-186 { background: var(--fc-blue) } #main .fc-landing .fcl-188 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-191 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-192 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-193 { background: repeating-linear-gradient(105deg,var(--fc-blue) 0 96px,var(--fc-yellow) 96px 128px) } #main .fc-landing .fcl-196 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-197 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-200 { background: var(--fc-yellow) } #main .fc-landing .fcl-203 { background: var(--fc-yellow); color: var(--fc-ink) } #main .fc-landing .fcl-206 { background: var(--fc-yellow) } #main .fc-landing .fcl-207 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-209 { background: rgb(254, 252, 247) } #main .fc-landing .fcl-210 { background: var(--fc-yellow) } #main .fc-landing .fcl-211 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-212 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-213 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-214 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-218 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-219 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-221 { background: var(--fc-yellow) } #main .fc-landing .fcl-222 { color: var(--fc-blue) } #main .fc-landing .fcl-224 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-225 { background: var(--fc-blue-tint); color: var(--fc-blue) } #main .fc-landing .fcl-226 { background: color-mix(in srgb, var(--fc-pink) 9%, #FFFFFF); color: var(--fc-pink) } #main .fc-landing .fcl-227 { background: var(--fc-blue-tint) } #main .fc-landing .fcl-228 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-229 { background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255) } #main .fc-landing .fcl-230 { background: rgba(253, 200, 4, 0.2) } #main .fc-landing .fcl-231 { background: var(--fc-blue); color: rgb(255, 255, 255) } #main .fc-landing .fcl-232 { background: transparent; color: rgba(33, 37, 41, 0.65) } #main .fc-landing .fcl-233 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-234 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-235 { background: var(--fc-badge-cosmetic); color: rgb(255, 255, 255) } #main .fc-landing .fcl-236 { background: var(--fc-badge-device); color: rgb(255, 255, 255) } #main .fc-landing .fcl-237 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-240 { background: linear-gradient(118deg,var(--acc,#F7057E) 0%,#7801F1 100%); color: rgb(255, 255, 255) } #main .fc-landing .fcl-241 { background: rgba(255, 255, 255, 0.08) } #main .fc-landing .fcl-242 { background: rgba(253, 200, 4, 0.22) } #main .fc-landing .fcl-245 { background: rgba(255, 255, 255, 0.16) } #main .fc-landing .fcl-246 { color: rgba(255, 255, 255, 0.85) } #main .fc-landing .fcl-247 { color: rgba(255, 255, 255, 0.85) } #main .fc-landing .fcl-248 { color: rgb(255, 255, 255) } #main .fc-landing .fcl-252 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-253 { background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255) } #main .fc-landing .fcl-254 { color: var(--fc-yellow) } #main .fc-landing .fcl-255 { color: rgba(255, 255, 255, 0.8) } #main .fc-landing .fcl-257 { background: rgb(255, 255, 255); color: var(--fc-ink) } #main .fc-landing .fcl-258 { background: color-mix(in srgb, var(--acc,#F7057E) 10%, #FFFFFF); color: var(--acc,#F7057E) } #main .fc-landing .fcl-260 { background: color-mix(in srgb, var(--acc,#F7057E) 8%, #FFFFFF); color: var(--acc,#F7057E) } #main .fc-landing .fcl-261 { background: var(--acc,#F7057E) } #main .fc-landing .fcl-262 { color: var(--acc,#F7057E) } #main .fc-landing .fcl-263 { color: var(--acc, #F7057E) } #main .fc-landing .fcl-264 { background: color-mix(in srgb, var(--acc,#F7057E) 6%, #FFFFFF) } #main .fc-landing .fcl-265 { background: var(--acc,#F7057E); color: rgb(255, 255, 255) } #main .fc-landing .fcl-266 { background: color-mix(in srgb, var(--acc,#F7057E) 9%, #FFFFFF); color: var(--acc,#F7057E) } #main .fc-landing .fcl-267 { background: linear-gradient(100deg, rgb(0, 91, 254), rgb(46, 123, 254)); color: rgb(255, 255, 255) } #main .fc-landing .fcl-268 { background: rgb(255, 255, 255); color: var(--acc,#F7057E) } #main .fc-landing .fcl-269 { background: var(--acc, #F7057E); color: rgb(255, 255, 255) } #main .fc-landing .fcl-270 { background: var(--acc,#F7057E); color: rgb(255, 255, 255) } #main .fc-landing .fcl-271 { background: color-mix(in srgb, var(--acc,#F7057E) 10%, #FFFFFF); color: var(--acc,#F7057E) } #main .fc-landing .fcl-272 { color: var(--acc,#F7057E) } #main .fc-landing .fcl-273 { background: linear-gradient(118deg,var(--acc,#F7057E) 0%,#7801F1 100%); color: rgb(255, 255, 255) } #main .fc-landing .fcl-274 { background: rgba(255, 255, 255, 0.16) } #main .fc-landing .fcl-277 { background: rgb(255, 255, 255) } #main .fc-landing .fcl-278 { color: rgba(255, 255, 255, 0.85) } #main .fc-landing a { color: var(--fc-blue); text-decoration: none; } /* --- Adattamento al contenitore delle pagine CMS ----------------- templates/cms/page.tpl racchiude il contenuto in
= 768px, con un

{$cms.meta_title}

che duplica il titolo della landing. Le landing sono progettate a 1280px e hanno gia' il proprio h1. */ /* 1. tolgo il tetto di 768px al contenitore e il titolo duplicato */ article:has(.fc-landing) { max-width: none; padding: 0; } article:has(.fc-landing) > h1 { display: none; } /* niente titolo doppio */ /* 2. secondo breadcrumb: il layout ne stampa gia' uno, quello del template CMS lo duplica. Ne tengo uno solo. */ section:has(.fc-landing) > .fc-breadcrumb, section:has(.fc-landing) > [class*='breadcrumb'] { display: none; } /* 3. full-bleed SOLO dove :has() non e' supportato (browser vecchi): li' il contenitore resta a 768px e serve sfondarlo. Dove :has() funziona non serve, ed evitarlo elimina l'overflow orizzontale causato dalla larghezza della scrollbar (100vw > area visibile). */ @supports not selector(:has(*)) { .fc-landing { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } /* 4. l'editor converte
in
: le regole devono valere per entrambi (i selettori usano le classi .fcl-*, quindi ok). */ .fc-landing > div[data-sec] { display: block; } /* --- hover specifici per landing --- */ #fc-landing-vitamine .scp0:hover {box-shadow: rgba(0, 91, 254, 0.1) 0px 6px 18px;} #fc-landing-vitamine .scp1:hover {box-shadow: var(--fc-shadow-card-hover);} #fc-landing-vitamine .scp2:hover {border-color: rgb(0, 91, 254); color: rgb(0, 91, 254);} #fc-landing-vitamine .scp3:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px;} #fc-landing-vitamine .scp4:hover {border-color: rgb(253, 200, 4); color: rgb(253, 200, 4);} #fc-landing-vitamine .scp5:hover {color: rgb(255, 255, 255);} #fc-landing-sport .scp0:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px; border-color: rgb(0, 91, 254);} #fc-landing-sport .scp1:hover {box-shadow: rgba(0, 91, 254, 0.1) 0px 6px 18px;} #fc-landing-sport .scp2:hover {box-shadow: var(--fc-shadow-card-hover);} #fc-landing-sport .scp3:hover {border-color: rgb(0, 91, 254); color: rgb(0, 91, 254);} #fc-landing-sport .scp4:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px;} #fc-landing-sport .scp5:hover {border-color: rgb(253, 200, 4); color: rgb(253, 200, 4);} #fc-landing-sport .scp6:hover {color: rgb(255, 255, 255);} #fc-landing-mamma-bambino .scp0:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px; border-color: rgb(0, 91, 254);} #fc-landing-mamma-bambino .scp1:hover {box-shadow: rgba(247, 5, 126, 0.12) 0px 6px 18px; border-color: rgb(247, 5, 126);} #fc-landing-mamma-bambino .scp2:hover {box-shadow: rgba(0, 91, 254, 0.1) 0px 6px 18px;} #fc-landing-mamma-bambino .scp3:hover {box-shadow: var(--fc-shadow-card-hover);} #fc-landing-mamma-bambino .scp4:hover {border-color: rgb(0, 91, 254); color: rgb(0, 91, 254);} #fc-landing-mamma-bambino .scp5:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px;} #fc-landing-mamma-bambino .scp6:hover {border-color: rgb(253, 200, 4); color: rgb(253, 200, 4);} #fc-landing-mamma-bambino .scp7:hover {color: rgb(255, 255, 255);} #fc-landing-dermocosmetica .scp0:hover {color: rgb(255, 255, 255);} #fc-landing-dermocosmetica .scp1:hover {box-shadow: rgba(0, 91, 254, 0.1) 0px 6px 18px;} #fc-landing-dermocosmetica .scp2:hover {box-shadow: var(--fc-shadow-card-hover);} #fc-landing-dermocosmetica .scp3:hover {border-color: rgb(0, 91, 254); color: rgb(0, 91, 254);} #fc-landing-dermocosmetica .scp4:hover {box-shadow: rgba(0, 91, 254, 0.12) 0px 6px 18px;} #fc-landing-dermocosmetica .scp5:hover {border-color: rgb(253, 200, 4); color: rgb(253, 200, 4);} /* --- Icone: le forme SVG vivono qui, non nell'HTML ---------------- L'editor CMS di PrestaShop rimuove i tag dal contenuto. Spostandole nel CSS come mask-image diventano intoccabili, e mantengono il colore dinamico (background-color: currentColor). */ .fc-landing [class^='fcl-ico-']{display:inline-block;flex:0 0 auto;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:middle} .fc-landing .fcl-ico-1{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-2{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-3{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#212529} .fc-landing .fcl-ico-4{width:18px;height:18px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-5{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#FFFFFF} .fc-landing .fcl-ico-6{width:16.5px;height:16.5px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-7{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:var(--acc, #F7057E)} .fc-landing .fcl-ico-8{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:var(--acc, #F7057E)} .fc-landing .fcl-ico-9{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-10{width:18px;height:18px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-11{width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-12{width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-13{width:15px;height:15px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#212529} .fc-landing .fcl-ico-14{width:44px;height:44px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#C6CEDA} .fc-landing .fcl-ico-15{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:var(--fc-yellow)} .fc-landing .fcl-ico-16{width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-17{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#D5DBE3} .fc-landing .fcl-ico-18{width:18px;height:18px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-19{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-20{width:22px;height:22px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#FDC804} .fc-landing .fcl-ico-21{width:14px;height:14px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#8FBAFF} .fc-landing .fcl-ico-22{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-23{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-24{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-25{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#FDC804} .fc-landing .fcl-ico-26{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-27{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-28{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-29{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-30{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-31{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:var(--fc-blue)} .fc-landing .fcl-ico-32{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:var(--fc-blue)} .fc-landing .fcl-ico-33{width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:rgba(255,255,255,0.35)} .fc-landing .fcl-ico-34{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:rgba(253,200,4,0.6)} .fc-landing .fcl-ico-35{width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-36{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");background-color:#212529} .fc-landing .fcl-ico-37{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-38{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-39{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-40{width:21px;height:21px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-41{width:21px;height:21px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-42{width:21px;height:21px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-43{width:21px;height:21px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-44{width:18px;height:18px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-45{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .fc-landing .fcl-ico-46{width:18px;height:18px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} /* ============================================================ STATI :hover — nel canvas erano handler React (onMouseEnter), non regole CSS: senza questi i pulsanti restano inerti. Prefisso #main per battere `#main a` del tema (specificita' a ID). ============================================================ */ .fc-landing { --fc-blue-deep: #0047C9; } /* pulsanti primari (CTA pieno) */ #main .fc-landing .fcl-18:hover, #main .fc-landing .fcl-59:hover { background: var(--fc-blue-deep); } /* pulsanti secondari (bordo) */ #main .fc-landing .fcl-151:hover, #main .fc-landing .fcl-20:hover { background: var(--fc-blue-tint); } /* link testuali */ #main .fc-landing .fcl-222:hover, #main .fc-landing .fcl-65:hover { color: var(--fc-blue-deep); } /* card */ #main .fc-landing .fcl-101:hover, #main .fc-landing .fcl-135:hover, #main .fc-landing .fcl-219:hover, #main .fc-landing .fcl-233:hover, #main .fc-landing .fcl-35:hover { box-shadow: var(--fc-shadow-card-hover); transform: translateY(-2px); }