<header class="n7-header border-b n7-border-gray-01" id="siteHeader" aria-label="Header del sito">
<!-- Top bar -->
<div class="n7-top-bar lg:flex items-center lg:py-1 n7-background-gray-02">
<div class="n7-top-bar__container container lg:flex items-center lg:flex-1">
<div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
<!-- LINK CERTIFICAZIONE ISO -->
<!-- Secondary nav/menu component -->
<nav aria-label="Secondaria">
<ul class="n7-secondary-navigation flex max-lg:flex-col max-lg:gap-6">
<li class="">
<a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
Notizie
</a>
</li>
<li class="">
<a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
Contatti
</a>
</li>
</ul>
</nav>
</div>
<div class="n7-top-bar__utilities-area flex items-center justify-between lg:flex-start lg:ml-auto">
<!-- Social links component -->
<ul class="n7-social-links flex items-center gap-8">
<li class="flex items-center">
<a href="facebook.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al profilo Facebook di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="instagram.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al profilo Instagram di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="youtube.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al canale YouTube di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
</ul>
<span class="hidden lg:inline w-1e h-10 mx-6 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
<!-- Language Selector component -->
<div>Lingua</div>
<!-- Search component -->
<div>
<button type="button" id="searchModalTrigger" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0 w-10 h-10">
<span class="sr-only">Cerca nel sito di OffHealth - apri la modale</span>
<svg class="inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
<!-- Search Modal - BEGIN -->
<div id="searchModal" class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="relative h-full w-full mx-auto p-6 lg:p-16 shadow-lg n7-background-gray-01">
<div class="container lg:px-16 grid gap-14">
<div class="flex justify-between items-center n7-content-01">
<h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito</h2>
<button id="closeModal" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0">
<span class="sr-only">Chiudi</span>
<svg class="inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
</button>
</div>
<div class="modal-content">
<form role="search" class="flex flex-col lg:flex-row gap-4">
<div class="n7-input-field grid gap-2 flex-1">
<label for="search" class="block text-base font-medium n7-content-01">Cerca tra i prodotti, le notizie, ecc ...</label>
<div class="n7-input flex items-center relative">
<svg class="inline-block align-middle fill-current w-6 h-6 absolute left-3 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="search" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-3 pr-3 border n7-border-gray-01 rounded-full w-full pl-10 " type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="n7-btn
n7-btn--primary
n7-btn--primary w-fit lg:self-end">
Cerca nel sito
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Search Modal - END -->
</div><!--/ END Search component -->
</div><!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<!-- Main heading -->
<div class="n7-main-heading bg-white flex items-center py-6 lg:py-1">
<div class="container flex items-center flex-1">
<div class="flex items-center n7-branding site-branding lg:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex h-9 md:flex-1 lg:max-w-[248px]" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/offhealth.svg" alt="Alt logo image" width="248" height="81" />
</a>
<span class="hidden lg:inline w-4 h-10 md:w-10 md:h-20 ml-4 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
</div>
<div class="flex-1 lg:ml-auto lg:justify-end">
<nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white max-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active">
Chi Siamo
</a>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId01">
Salute dell’Occhio<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId01">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 1</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 2</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 3</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 4</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId02">
Ricerca e Innovazione<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId02">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 1</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 2</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 3</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 4</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01">
Prodotti
</a>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
</div>
<div class="n7-action-area__container flex gap-3 ml-4 max-lg:hidden">
<div class="n7-action-area flex gap-3 items-center max-lg:flex-wrap max-lg:mt-8">
<a href="#" class="n7-btn
n7-btn--primary
max-lg:n7-btn--l max-lg:w-full max-lg:justify-center n7-btn--s">
Prontuario
</a>
</div>
<div class="n7-user-menu">
<nav class="flex" aria-label="Utente">
<!-- RP 240416 Minisite user menu - changed classes -->
<ul class="n7-primary-navigation__list w-full lg:relative lg:w-auto lg:flex lg:justify-end gap-4 xl:gap-8 has-dropdown-menu">
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="usermenu">
Massimiliano Spinosa<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80 lg:right-0 lg:z-10 border-r-0 border-l-0 " id="usermenu">
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 1</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 2</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<main id="mainContent">
<section>
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240328 Style fixes - Changed style and removed classes -->
<!-- RP 240411 Style fixes - Changed style and added classes -->
<div style="background-image: linear-gradient(rgba(3, 49, 135, 0.92), rgba(3, 49, 135, 0.92)), url(/images/page-header-2.jpg)" class="bg-top bg-no-repeat bg-cover">
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240328 Style fixes - Added style -->
<!-- RP 240411 Style fixes - Removed style and changed classes -->
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36 grid gap-6">
<nav class="n7-breadcrumb " aria-label="Breadcrumb">
<ol class="flex flex-wrap">
<li>
<a class="inline-flex items-center p-1 text-xs text-white hover:underline" href="#">
Home
<svg class="inline-block align-middle fill-current w-4 h-4 text-white/50 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="inline-flex items-center p-1 text-xs text-white hover:underline" href="#">
livello 1
<svg class="inline-block align-middle fill-current w-4 h-4 text-white/50 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="inline-flex items-center p-1 text-xs text-white font-bold hover:underline" href="#" aria-current="page">
livello 2
</a>
</li>
</ol>
</nav>
<div class="grid lg:grid-flow-col lg:auto-cols-fr gap-x-12 gap-y-6">
<!-- RP 240326 List page - Changed classes -->
<h1 class="n7-display-heading-6 lg:n7-heading-1 n7-content-inverse">Approfondimenti e consigli pratici</h1>
<div class="grid gap-4 h-fit">
<p class="text-lg lg:text-xl n7-content-inverse">Questa sezione offre maggiori dettagli in risposta agli abituali quesiti di approfondimento e consigli pratici sulla cura degli occhi.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="n7-background-primary-light border-b n7-border-gray-01">
<!-- RP 240328 Style fixes - Changed classes -->
<div class="container py-6 md:pl-10 lg:pl-16 2xl:px-36">
<nav class="flex items-center">
<h3 class="w-min xl:w-auto text-sm lg:text-base font-medium">FILTRA PER CATEGORIA</h3>
<span class="w-24 lg:w-8 xl:w-20 h-10 ml-4 bg-no-repeat bg-center bg-contain" style="background-image: url('/images/vertical-divider.svg')"></span>
<ul class="flex xl:gap-2 overflow-x-auto">
<li>
<button type="button" class="n7-btn
n7-btn--only-text max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent n7-filter--active">
Tutte
</button>
</li>
<li>
<button type="button" class="n7-btn
n7-btn--only-text max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent">
Approfondimenti
</button>
</li>
<li>
<button type="button" class="n7-btn
n7-btn--only-text max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent">
Consigli pratici
</button>
</li>
<li>
<button type="button" class="n7-btn
n7-btn--only-text max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent">
Difetti visivi
</button>
</li>
<li>
<button type="button" class="n7-btn
n7-btn--only-text max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent">
Patologie più comuni
</button>
</li>
</ul>
</nav>
</div>
</div>
<div class="n7-background-gray-02">
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36">
<ul class="grid gap-4 md:flex md:flex-wrap">
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Come funziona l’occhio?
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano. Attraverso una spiegazione chiara, illustra come i diversi componenti dell'occhio, come la cornea, l'iride, il cristallino e la retina, lavorino insieme per processare la luce e permettere la visione.
</p>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
DRUSENoff compresse a rilascio modificato
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
è un integratore alimentare a base di ESPERIDINA, MIRTILLO, titolato in ANTOCIANOSIDI, TAGETE, titolata in LUTEINA, RODIOLA, VITAMINA E e ZINCO.
</p>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
DRUSENoff compresse a rilascio modificato
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano. Attraverso una spiegazione chiara, illustra come i diversi componenti dell'occhio, come la cornea, l'iride, il cristallino e la retina, lavorino insieme per processare la luce e permettere la visione.
</p>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
DRUSENoff compresse a rilascio modificato
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
è un integratore alimentare a base di ESPERIDINA, MIRTILLO, titolato in ANTOCIANOSIDI, TAGETE, titolata in LUTEINA, RODIOLA, VITAMINA E e ZINCO.
</p>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
DRUSENoff compresse a rilascio modificato
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano.
</p>
</div>
</article>
</li>
</ul>
<nav class="n7-pagination py-6 px-3 mt-8" role="navigation" aria-label="Paginazione">
<!-- RP 240326 List page - Changed classes -->
<ul class="flex gap-2 justify-center">
<li>
<a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina iniziale">
<svg class="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina precedente">
<svg class="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full n7-background-primary n7-border-primary text-white hover:n7-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="true">2</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina successiva">
<svg class="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina finale">
<svg class="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</main>
<footer class="n7-footer">
<div class="n7-footer__navigation-row n7-background-gray-01">
<!-- RP 240322 - Changed classes -->
<div class="container grid gap-y-2 md:flex md:pr-0">
<!-- Left block -->
<div class="flex flex-col gap-6 pt-6 pb-6 md:pt-10 md:pb-12 md:pr-10">
<div class="n7-site-logo site-logo flex mb-1 w-52">
<img class="w-full h-full object-contain object-left-top" src="/images/offhealth.svg" alt="Logo alt text" width="248" height="81" />
</div>
<address class="grid gap-3 n7-content-03 text-sm">
<p>OFFHEALTH S.p.a.
<br>P.Iva – IT 06335340482
<br>Via Giovanni Paisiello, 10 – 50144 – Firenze (FI)
<br>Tel.: +39 055 016 17 71
<br><a class="n7-link n7-link--sm text-current" href="mailto:info@offhealth.it">info@offhealth.it</a>
</p>
</address>
<img src="/images/logo-certification.svg" width="155" alt="" class="" />
<div>
<a class="n7-link n7-link--sm n7-link--underline text-current" href="#">ISO 13485 IT originale IT302832</a>
<br><a class="n7-link n7-link--sm n7-link--underline text-current" href="#">ISO 9001 IT originale IT302831</a>
</div>
</div>
<!-- Center block -->
<!-- Three columns - To be implemented dynamic number of columns -->
<div class="grid xl:grid-cols-3 w-full md:pb-12">
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav01">
<h2 id="footerMainNav01" class="text-lg text-primary-900 font-medium mb-4">Chi siamo</h2>
<ul class="flex flex-col gap-2">
<li>
<a href="#" class="n7-link n7-link--sm text-current">La Nostra identità </a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Missione e Valori</a>
</li>
</ul>
<nav>
</div>
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav02">
<h2 id="footerMainNav02" class="text-lg text-primary-900 font-medium mb-4">Salute dell’Occhio</h2>
<ul class="flex flex-col gap-2">
<li>
<a href="#" class="n7-link n7-link--sm text-current">Anatomia dell'Occhio</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Condizioni e malattie dell’occhio</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">FAQ sulla Salute Oculare</a>
</li>
</ul>
<nav>
</div>
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav03">
<h2 id="footerMainNav03" class="text-lg text-primary-900 font-medium mb-4">Ricerca e Innovazione</h2>
<ul class="flex flex-col gap-3">
<li>
<a href="#" class="n7-link n7-link--sm text-current">Progetti attivi</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Attività di ricerca</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">FAQ sulla Salute Oculare</a>
</li>
</ul>
<nav>
</div>
</div>
<!-- Right block -->
<!-- RP 240322 - Changed classes and added style -->
<div class="lg:min-w-[375px] max-md:mt-6 max-md:mx-[-1rem] pt-14 pb-12 px-6" style="background: #fff url('/images/bullets-pattern-02.svg') no-repeat right bottom">
<div class="flex flex-col gap-8 justify-center h-full">
<h2 class="n7-display-heading-6">Visita<br>lo <strong>store online</strong></h2>
<p>Scopri il nostro assortimento completo di soluzioni per la cura degli occhi.</p>
<a href="#" class="n7-btn
n7-btn--primary
max-md:w-full max-md:justify-center md:n7-btn--s md:w-fit">
Visita ora
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Footer bottom bar -->
<div class="n7-footer__bottom-bar border-t n7-border-gray-01 n7-background-gray-02 py-6">
<div class="container grid gap-6 md:flex items-center">
<!-- Utilities and other -->
<nav aria-label="Utilità ">
<ul class="flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap">
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Gestione cookies</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Note legali e copyright</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Privacy e cookie</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
{% extends '@page-layout' %}
{% block content %}
<section>
{% render '@page-header--list', {title: 'Approfondimenti e consigli pratici', description: 'Questa sezione offre maggiori dettagli in risposta agli abituali quesiti di approfondimento e consigli pratici sulla cura degli occhi.'}, true %}
</section>
<section>
<div class="n7-background-primary-light border-b n7-border-gray-01">
<!-- RP 240328 Style fixes - Changed classes -->
<div class="container py-6 md:pl-10 lg:pl-16 2xl:px-36">
<nav class="flex items-center">
<h3 class="w-min xl:w-auto text-sm lg:text-base font-medium">FILTRA PER CATEGORIA</h3>
<span class="w-24 lg:w-8 xl:w-20 h-10 ml-4 bg-no-repeat bg-center bg-contain" style="background-image: url('/images/vertical-divider.svg')"></span>
<ul class="flex xl:gap-2 overflow-x-auto">
<li>{% render '@button--text', { label: 'Tutte', hasIcon: false, classes: 'max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent n7-filter--active' }, true %}</li>
<li>{% render '@button--text', { label: 'Approfondimenti', hasIcon: false, classes: 'max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent' }, true %}</li>
<li>{% render '@button--text', { label: 'Consigli pratici', hasIcon: false, classes: 'max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent' }, true %}</li>
<li>{% render '@button--text', { label: 'Difetti visivi', hasIcon: false, classes: 'max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent' }, true %}</li>
<li>{% render '@button--text', { label: 'Patologie più comuni', hasIcon: false, classes: 'max-lg:n7-btn--s whitespace-nowrap n7-filter font-normal hover:bg-transparent focus:bg-transparent' }, true %}</li>
</ul>
</nav>
</div>
</div>
<div class="n7-background-gray-02">
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36">
<ul class="grid gap-4 md:flex md:flex-wrap">
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--product', {thumb: false, alertText: false, heading: 'Come funziona l’occhio?', excerpt: "Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano. Attraverso una spiegazione chiara, illustra come i diversi componenti dell'occhio, come la cornea, l'iride, il cristallino e la retina, lavorino insieme per processare la luce e permettere la visione."}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--product', {thumb: false, alertText: false}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--product', {thumb: false, alertText: false, excerpt: "Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano. Attraverso una spiegazione chiara, illustra come i diversi componenti dell'occhio, come la cornea, l'iride, il cristallino e la retina, lavorino insieme per processare la luce e permettere la visione."}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--product', {thumb: false, alertText: false}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--product', {thumb: false, alertText: false, excerpt: "Una panoramica dettagliata e comprensibile sul meccanismo di funzionamento dell'occhio umano."}, true %}
</li>
</ul>
{% render '@pagination', {classes: 'mt-8'}, true %}
</div>
</div>
</section>
{% endblock content %}
{
"mainHidden": false,
"minisiteHidden": true
}
No notes defined.