.npg-chi-siamo-page {
--npg-cream: #f3ecde;
--npg-green: #91b508;
--npg-brown: #433126;
--npg-deep: #1f1712;
--npg-white: #ffffff;
background: var(--npg-cream);
color: var(--npg-white);
font-family: "Montserrat", Arial, sans-serif;
overflow-x: clip;
}
.npg-chi-siamo-page *,
.npg-chi-siamo-page *::before,
.npg-chi-siamo-page *::after {
box-sizing: border-box;
}
.npg-chi-siamo-page a {
color: inherit;
text-decoration: none;
}
body.page-id-802 .elementor-location-header,
body.page-id-802 header.site-header,
body.page-id-802 #site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
.npg-horizontal-story {
position: relative;
height: calc(var(--npg-panel-count, 4) * 100vh);
}
.npg-sticky-stage {
position: sticky;
top: 0;
height: 100vh;
min-height: 620px;
overflow: hidden;
background: var(--npg-deep);
}
.npg-background-stack,
.npg-bg-layer,
.npg-shade {
position: absolute;
inset: 0;
}
.npg-background-stack {
z-index: 0;
overflow: hidden;
}
.npg-bg-layer {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transform: scale(1.02);
transition: opacity 0.12s linear;
will-change: opacity;
}
.npg-bg-layer.is-active {
opacity: 1;
}
.npg-shade {
z-index: 5;
background: rgba(0, 0, 0, 0.65);
mix-blend-mode: multiply;
}
.npg-panel-track {
position: relative;
z-index: 2;
display: flex;
height: 100%;
width: 400vw;
will-change: transform;
}
.npg-panel {
flex: 0 0 100vw;
min-width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 118px 0 80px clamp(160px, 15.7vw, 226px);
}
.npg-copy {
position: relative;
transform: translateY(-32px);
}
.npg-copy-narrow,
.npg-copy-wide,
.npg-copy-split {
width: min(890px, calc(100vw - 64px));
}
.npg-copy-split {
display: block;
}
.npg-copy-split > div {
max-width: 850px;
}
.npg-copy-split > div + div {
margin-top: 34px;
}
.npg-eyebrow {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.25;
font-weight: 400;
text-transform: uppercase;
}
.npg-chi-siamo-page h1,
.npg-chi-siamo-page h2,
.npg-chi-siamo-page h3,
.npg-chi-siamo-page p {
margin-top: 0;
}
.npg-chi-siamo-page h1,
.npg-chi-siamo-page h2 {
margin-bottom: 18px;
color: var(--npg-white);
font-size: 25px;
line-height: 1.2;
font-weight: 600;
}
.npg-horizontal-story h1,
.npg-horizontal-story h2,
.npg-horizontal-story h3,
.npg-horizontal-story h4,
.npg-horizontal-story h5,
.npg-horizontal-story h6 {
color: var(--npg-white) !important;
}
.npg-chi-siamo-page h3 {
margin-bottom: 14px;
color: var(--npg-brown);
font-size: clamp(24px, 3vw, 38px);
line-height: 1;
}
.npg-hero-text h3 {
color: var(--npg-brown) !important;
}
.npg-chi-siamo-page p {
max-width: 850px;
font-size: 15px;
line-height: 1.55;
font-weight: 400;
}
.npg-button {
display: inline-flex;
align-items: center;
min-height: 42px;
margin-top: 14px;
padding: 10px 15px;
background: var(--npg-green);
color: var(--npg-white);
font-size: 15px;
font-weight: 500;
transition: background 0.2s ease, transform 0.2s ease;
}
.npg-button:hover {
background: var(--npg-brown);
color: var(--npg-white);
transform: translateY(-1px);
}
.npg-hero-tabs {
display: inline-flex;
border: 1px solid rgba(255, 255, 255, 0.46);
margin: 8px 0 22px;
}
.npg-hero-tabs button {
appearance: none;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.46);
padding: 13px 18px;
background-color: rgba(243, 236, 222, 0.92) !important;
color: var(--e-global-color-primary, var(--npg-brown)) !important;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.npg-hero-tabs button:last-child {
border-right: 0;
}
.npg-hero-tabs button.is-active {
background-color: var(--npg-green) !important;
color: var(--npg-white) !important;
}
.npg-hero-card {
display: none;
grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 0.8fr);
gap: clamp(24px, 4vw, 54px);
align-items: center;
min-height: 420px;
}
.npg-hero-card.is-active {
display: grid;
}
.npg-hero-card img {
width: min(440px, 100%);
max-height: 54vh;
object-fit: contain;
justify-self: center;
filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.35));
}
.npg-hero-text {
background: rgba(243, 236, 222, 0.92);
color: var(--npg-brown);
padding: clamp(22px, 3vw, 36px);
}
.npg-hero-text p {
font-size: 15px;
line-height: 1.58;
}
.npg-scroll-ui {
position: absolute;
z-index: 10;
left: 0;
right: 0;
bottom: 30px;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.npg-progress {
height: 3px;
background: rgba(67, 49, 38, 0.9);
}
.npg-progress span {
display: block;
height: 100%;
width: 0%;
background: var(--npg-green);
}
.npg-dots {
display: flex;
gap: 14px;
padding: 0;
margin: 0 46px 0 0;
list-style: none;
}
.npg-dots li {
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid var(--npg-white);
background: transparent;
}
.npg-dots li.is-active {
background: var(--npg-green);
border-color: var(--npg-green);
}
@media (max-width: 767px) {
.npg-horizontal-story {
--npg-panel-count: 1;
height: auto;
}
.npg-sticky-stage {
position: relative;
height: auto;
min-height: 0;
overflow: visible;
}
.npg-background-stack,
.npg-scroll-ui {
display: none;
}
.npg-panel-track {
display: block;
width: 100%;
transform: none !important;
}
.npg-panel {
display: block;
min-width: 0;
width: 100%;
min-height: 86vh;
padding: 96px 22px 56px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.npg-panel::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.64);
}
.npg-panel > * {
position: relative;
z-index: 1;
}
.npg-copy,
.npg-copy-narrow,
.npg-copy-wide,
.npg-copy-split {
width: min(318px, calc(100vw - 44px));
max-width: min(318px, calc(100vw - 44px));
margin: 0;
transform: none;
}
.npg-chi-siamo-page p,
.npg-chi-siamo-page h1,
.npg-chi-siamo-page h2,
.npg-chi-siamo-page h3 {
max-width: 100%;
overflow-wrap: break-word;
}
.npg-panel-intro {
background-image: url(https://www.newpharmgarden.it/wp-content/themes/hello-newpharmgarden/assets/chi-siamo/chi-siamo-fitoguard-mobile.jpg);
}
.npg-panel-heroes {
background-image: url(https://www.newpharmgarden.it/wp-content/themes/hello-newpharmgarden/assets/chi-siamo/chisiamo5-fitoguard.jpg);
}
.npg-panel-mission {
background-image: url(https://www.newpharmgarden.it/wp-content/themes/hello-newpharmgarden/assets/chi-siamo/chi-siamo2-fitoguard.jpg);
}
.npg-panel-future {
background-image: url(https://www.newpharmgarden.it/wp-content/themes/hello-newpharmgarden/assets/chi-siamo/chisiamo3-fitoguard.jpg);
}
.npg-chi-siamo-page h1,
.npg-chi-siamo-page h2 {
font-size: clamp(32px, 9.2vw, 42px);
line-height: 1;
}
.npg-chi-siamo-page p {
font-size: 14px;
line-height: 1.56;
}
.npg-copy-split {
display: block;
}
.npg-copy-split > div + div {
margin-top: 34px;
}
.npg-hero-tabs {
display: flex;
width: 100%;
}
.npg-hero-tabs button {
flex: 1;
padding-inline: 10px;
font-size: 12px;
}
.npg-hero-card {
display: none;
}
.npg-hero-card.is-active {
display: block;
}
.npg-hero-card img {
display: block;
max-height: 310px;
margin: 20px auto 0;
}
}
@media (prefers-reduced-motion: reduce) {
.npg-bg-layer,
.npg-button {
transition: none;
}
}