:root {
--light: #f8f4e6;
--black: #0f0701;
--dark: #291000;
--yellow: #fab500;
--accent: #f7ca50;
--cream: #e4d59f;
--terracotta: #e69a60;
--terracotta-light: #f6c39c;
--current-color: var(--light);
--base: 1440;
--primary-font: 'Cabinet Grotesk', sans-serif;
--secondary-font: 'Bricolage Grotesque', sans-serif; --fnt-size-huge: calc(110 / 1440 * 100vw);
--fnt-size-big: calc(50 / 1440 * 100vw);
--fnt-size-medium: calc(42 / 1440 * 100vw);
--fnt-size-small: calc(35 / 1440 * 100vw);
--fnt-size-body: calc(18 / 1440 * 100vw);
--fnt-size-tiny: calc(14 / 1440 * 100vw);
--fnt-size-smaller: calc(28 / 1440 * 100vw);
--fnt-size-body-bigger: calc(20 / 1440 * 100vw);
}
@media (max-width: 1000px) {
:root {
--fnt-size-huge: calc(46 / 390 * 100vw);
--fnt-size-big: calc(46 / 390 * 100vw);
--fnt-size-medium: calc(24 / 390 * 100vw);
--fnt-size-small: calc(22 / 390 * 100vw);
--fnt-size-body: calc(16 / 390 * 100vw);
--fnt-size-tiny: calc(14 / 390 * 100vw);
--fnt-size-smaller: calc(28 / 390 * 100vw);
--fnt-size-body-bigger: calc(20 / 390 * 100vw);
}
}
::selection {
background-color: var(--dark);
color: var(--light);
text-shadow: none;
}
@font-face {
font-family: 'Bricolage Grotesque';
src:
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/BricolageGrotesque-Bold.woff) format('woff'),
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/BricolageGrotesque-Bold.ttf) format('ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cabinet Grotesk';
src:
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/CabinetGrotesk-Regular.woff) format('woff'),
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/CabinetGrotesk-Regular.ttf) format('ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cabinet Grotesk';
src:
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/CabinetGrotesk-Bold.woff) format('woff'),
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/CabinetGrotesk-Bold.ttf) format('ttf');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Serif';
src:
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/IBMPlexSerif-Italic.woff) format('woff'),
url(//naturavena.es/wp-content/themes/naturavena-child/fonts/IBMPlexSerif-Italic.ttf) format('ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
} @media (min-width: 1000px) {
.full-width-content:not(.no-padding, .special-padding) > .row_col_wrap_12 {
padding-left: 8vw !important;
padding-right: 8vw !important;
}
.full-width-content.special-padding > .row_col_wrap_12 {
padding-left: 28px !important;
padding-right: 28px !important;
}
.full-width-content.no-padding-right > .row_col_wrap_12 {
padding-right: 0 !important;
}
.no-padding {
padding: 0 !important;
}
.no-padding > .row_col_wrap_12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
#header-outer[data-full-width='true'] header > .container,
body[data-slide-out-widget-area-style='simple'] #header-outer[data-full-width='true'] #mobile-menu {
padding: 0 8vw;
}
#header-outer.transparent .menu-item a:hover .nectar-text-reveal-button__text {
color: var(--accent) !important;
}
#header-outer:not(.transparent) .menu-item a:hover .nectar-text-reveal-button__text {
color: var(--terracotta) !important;
}
}
@media (max-width: 1000px) {
.full-width-content:not(.no-padding) > .row_col_wrap_12 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.no-padding > .row_col_wrap_12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
} #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a,
#slide-out-widget-area.fullscreen-alt .inner .widget.widget_nav_menu li a {
color: #fff !important;
}
#header-outer.transparent #top nav > ul > li > a,
#header-outer.transparent #top nav > .sf-menu > li > a {
opacity: 1 !important;
}
body #header-outer,
body[data-header-color='dark'] #header-outer {
background-color: var(--light) !important;
}
#top nav ul li a,
body[data-header-color='light'] .mobile-header,
body[data-header-color='light'] .span_9 > .slide-out-widget-area-toggle a .label {
color: var(--dark);
} .custom-title *,
.custom-title {
margin-bottom: 0 !important;
}
.custom-title {
margin-bottom: 20px !important;
}
.custom-title.small-margin {
margin-bottom: 10px !important;
}
.custom-title strong {
font-weight: 600;
}
.custom-title.regular,
.custom-title.regular * {
font-weight: 400;
}
.custom-title.semibold,
.custom-title.semibold * {
font-weight: 500;
}
.custom-title.bold,
.custom-title.bold * {
font-weight: 600;
}
.custom-title.uppercase .custom-title.uppercase * {
text-transform: uppercase !important;
}
.custom-title.lowercase,
.custom-title.lowercase * {
text-transform: initial !important;
}
.custom-title.black,
.custom-title.black * {
color: var(--black);
}
.custom-title.light,
.custom-title.light * {
color: var(--light);
}
.custom-title.dark,
.custom-title.dark * {
color: var(--dark);
}
.custom-title.accent,
.custom-title.accent * {
color: var(--accent);
}
.custom-title.white,
.custom-title.white * {
color: #fff;
}
a.toggle-heading {
font-family: var(--secondary-font) !important;
text-transform: uppercase !important;
line-height: 1.1 !important;
color: var(--dark) !important;
}
.custom-title.space-bottom {
margin-bottom: 40px !important;
}
.custom-title.huge *,
.custom-title.huge {
font-size: var(--fnt-size-huge) !important;
line-height: 0.95 !important;
}
.custom-title.big *,
.custom-title.big {
font-size: var(--fnt-size-big) !important;
line-height: 0.95 !important;
}
.custom-title.medium *,
.custom-title.medium {
font-size: var(--fnt-size-medium) !important;
line-height: 1.1 !important;
}
.custom-title.small *,
.custom-title.small {
font-size: var(--fnt-size-small) !important;
line-height: 1.1 !important;
}
.custom-title.body *,
.custom-title.body {
font-size: var(--fnt-size-body) !important;
line-height: 1.2 !important;
}
.custom-title.tiny *,
.custom-title.tiny,
.nectar-button.medium {
font-size: var(--fnt-size-tiny) !important;
line-height: 1.1 !important;
}
.custom-title.body.bigger *,
.custom-title.body.bigger {
font-size: var(--fnt-size-body-bigger) !important;
line-height: 1.1 !important;
}
a.toggle-heading {
font-size: var(--fnt-size-tiny) !important;
}
.custom-title.primary,
.custom-title.primary * {
font-family: var(--primary-font) !important;
}
.custom-title.mono,
.custom-title.mono * {
font-family: var(--mono-font) !important;
}
.custom-title.ibm,
.custom-title.ibm * {
font-family: 'IBM Plex Serif', serif !important;
}
.custom-title.light,
.custom-title.light * {
color: var(--light) !important;
}
.custom-title.accent,
.custom-title.accent * {
color: var(--accent) !important;
}
.custom-title.secondary,
.custom-title.secondary *,
.nectar-button.medium {
font-family: var(--secondary-font) !important;
}
.custom-title.margin_bottom_title {
margin-bottom: 24px !important;
} .custom-card {
display: flex;
flex-flow: column;
gap: 12px;
background-color: var(--cream);
border: 1px solid rgba(41, 16, 0, 0.1);
border-radius: 10px;
padding: 2.2em;
margin-bottom: 0 !important;
}
.custom-card.yellow-card {
background-color: var(--accent);
flex-grow: 1;
justify-content: space-between;
}
.custom-card.terracotta-card {
background-color: var(--terracotta);
flex-grow: 1;
justify-content: space-between;
}
.custom-card.terracotta-light-card {
background-color: var(--terracotta-light);
}
.cards-wrapper .wpb_wrapper {
display: flex;
flex-flow: column;
flex-wrap: nowrap;
height: 100%;
gap: 20px;
}
.custom-card__title {
margin: 0;
font-family: var(--secondary-font);
font-size: var(--fnt-size-small);
font-weight: 600;
line-height: 1.1;
color: var(--dark);
}
.custom-card__content {
font-family: var(--primary-font);
font-size: var(--fnt-size-body);
line-height: 1.2;
color: var(--dark);
}
.custom-card__content p {
margin: 0;
}
.custom-card.dark {
background-color: var(--dark);
}
.custom-card.dark .custom-card__title,
.custom-card.dark .custom-card__content {
color: var(--light);
}
.custom-card.accent {
background-color: var(--accent);
}
.custom-card.outline {
background-color: transparent;
border-color: var(--dark);
}
@media (max-width: 1000px) {
h3.custom-card__title {
font-size: var(--fnt-size-small) !important;
}
}  .animated.lines:before,
.animated.lines:after,
.splitting-lines.lines:after,
.splitting.lines:before {
display: none !important;
}
.splitting-lines.lines {
background-color: transparent;
width: fit-content;
height: auto !important;
}
.animated.lines {
width: auto !important;
height: auto;
background-color: transparent;
}
.splitting-lines {
opacity: 0;
}
.line-wrapper {
display: block;
}
.line {
display: block;
}
.word {
display: inline-block;
}
.char {
display: inline-block;
will-change: transform, opacity;
} .legals .wpb_wrapper {
display: flex;
padding: 3rem 0 1rem 0;
gap: 2rem;
}
#footer a:hover {
color: #ffffff;
}
#footer ul {
margin-left: 0 !important;
margin-bottom: 0 !important;
}
#footer ul li {
margin-bottom: 10px !important;
list-style: none !important;
font-size: var(--fnt-size-tiny) !important;
}
@media (max-width: 1000px) {
.legals .wpb_wrapper {
flex-flow: column;
}
} body[data-button-style*='rounded_shadow'] .woocommerce.add_to_cart_inline a.button.add_to_cart_button:hover,
body[data-button-style*='rounded_shadow'].material .nectar-button.see-through:hover {
box-shadow: none !important;
}
body[data-button-style='slightly_rounded_shadow'] .nectar-button:hover {
box-shadow: none !important;
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translateY(0);
}
a.nectar-button.medium.see-through {
overflow: hidden;
text-transform: uppercase;
}
a.nectar-button.medium.see-through.extra-color-2:before,
a.nectar-button.medium.see-through.accent-color:before {
content: '';
height: 0;
background: var(--accent);
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
transition: all 0.3s cubic-bezier(0.7, 0, 0.2, 1);
z-index: -1;
}
a.nectar-button.medium.see-through.accent-color:before {
background: var(--terracotta);
}
a.nectar-button.see-through.extra-color-2,
a.nectar-button.see-through.accent-color {
background-color: var(--terracotta) !important;
border: none !important;
padding: 0.8em 1.8em !important;
}
a.nectar-button.medium.see-through.accent-color {
background-color: var(--accent) !important;
}
a.nectar-button.medium.see-through.extra-color-2.light:before {
background: var(--light);
}
.submit-wrapper {
position: relative;
}
a.nectar-button.medium.see-through.extra-color-2,
a.nectar-button.medium.see-through.accent-color {
position: relative;
z-index: 99;
transition: all 0.3s cubic-bezier(0.7, 0, 0.2, 1);
border-width: 1px;
color: var(--dark);
border: 1px solid var(--dark);
}
a.nectar-button.medium.see-through.extra-color-2.light {
color: var(--light);
border: 1px solid var(--light);
}
a.nectar-button.medium.see-through.extra-color-2 span {
color: var(--dark);
}
a.nectar-button.medium.see-through.accent-color span {
color: var(--dark);
} a.nectar-button.medium.see-through.extra-color-2.light span {
color: var(--light);
}
a.nectar-button.medium.see-through.extra-color-2.light:hover span {
color: var(--dark);
}
a.nectar-button.medium.see-through.extra-color-2:hover:before,
a.nectar-button.medium.see-through.accent-color:hover:before,
.submit-wrapper:hover .submit-hover {
height: 100%;
}
.footer-bottom-social .wpb_wrapper {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1000px) {
span.not-break {
white-space: nowrap;
}
}
.nectar-fancy-box {
border-radius: 4px !important;
}
.nectar-fancy-box h3 {
font-size: var(--fnt-size-tiny) !important;
color: var(--dark) !important;
line-height: 1.1 !important;
} .custom-process-timeline {
width: 100%;
max-width: 50vw;
margin-left: auto;
margin-right: auto;
padding-top: 10em;
padding-bottom: 10em;
}
.custom-process-timeline__header {
display: flex;
flex-flow: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1em;
margin-bottom: 4em;
}
.custom-process-timeline__eyebrow {
color: var(--terracotta);
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: var(--primary-font);
font-size: var(--fnt-size-tiny);
font-weight: 600;
}
.custom-process-timeline__h2 {
margin: 0;
font-family: var(--secondary-font);
font-size: var(--fnt-size-medium);
font-weight: 400;
line-height: 1;
color: var(--dark);
letter-spacing: -0.02em;
}
.custom-process-timeline__wrapper {
position: relative;
}
.custom-process-timeline__list {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: flex-start;
row-gap: 10em;
}
.custom-process-timeline__item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
column-gap: 2em;
position: relative;
}
.custom-process-timeline__line {
pointer-events: none;
background-color: rgba(41, 16, 0, 0.14);
width: 2px;
position: absolute;
top: 0;
bottom: 0;
left: 1.5em;
}
.custom-process-timeline__fill {
transform-origin: 50% 0;
background-color: var(--terracotta);
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.custom-process-timeline__marker {
color: var(--dark);
background-color: var(--light);
border: 1px solid rgb(206 198 184);
border-radius: 100em;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 3em;
height: 3em;
font-family: var(--secondary-font);
transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
position: relative;
} [data-process-timeline-item][data-status='active'] [data-process-timeline-marker] {
background: var(--terracotta);
color: var(--light);
border-color: var(--terracotta);
} [data-process-timeline-item][data-current] [data-process-timeline-marker] {
box-shadow: 0 0 0 0.5em rgba(230, 154, 96, 0.2);
}
.custom-process-timeline__content {
display: flex;
flex-flow: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.6em;
max-width: 50%;
padding-top: 0.3em;
transition: opacity 0.25s;
} [data-process-timeline-item] .custom-process-timeline__content {
opacity: 0.3;
}
[data-process-timeline-item][data-status='active'] .custom-process-timeline__content {
opacity: 0.55;
}
[data-process-timeline-item][data-current] .custom-process-timeline__content {
opacity: 1;
}
.custom-process-timeline__content-h {
margin: 0;
font-family: var(--secondary-font);
font-size: var(--fnt-size-smaller);
font-weight: 600;
line-height: 1.1;
color: var(--dark);
letter-spacing: -0.01em;
}
.custom-process-timeline__p {
margin: 0;
font-family: var(--primary-font);
font-size: var(--fnt-size-body);
line-height: 1.2;
color: var(--dark);
}
@media (max-width: 1000px) {
.custom-process-timeline {
max-width: 90vw;
}
.custom-process-timeline__content {
max-width: 100%;
}
.custom-process-timeline__list {
row-gap: 10.5em;
}
.custom-process-timeline__item {
column-gap: 1.2em;
}
}
.gradient-top {
background: linear-gradient(to top, var(--light) 0%, var(--terracotta) 100%);
}
.gradient-top-yellow {
background: linear-gradient(to top, var(--light) 0%, var(--accent) 100%);
}
.info-pill {
background-color: var(--cream);
padding: 0.5em 1em;
border-radius: 4px;
margin-bottom: 0px !important;
}
#products .nectar-fancy-box {
padding: 20px;
}
#products .nectar-fancy-box h3 {
color: var(--light) !important;
}
#products .nectar-fancy-box .box-bg:after {
background-color: transparent !important;
}
@media only screen and (max-width: 999px) {
.nectar-flickity[data-controls*='arrows_overlaid'][data-overflow='visible'] .flickity-prev-next-button {
opacity: 1;
visibility: visible;
z-index: 9999999;
pointer-events: all;
}
#products .nectar-fancy-box h3 {
font-size: 30px !important;
}
.nectar-sticky-media-section__content-section {
display: flex;
flex-flow: column-reverse;
gap: 2rem;
}
.nectar-sticky-media-section__media,
.nectar-sticky-media-section__media-wrap {
border-radius: 10px;
}
}
@media only screen and (max-width: 690px) {
.nectar-flickity[data-controls*='arrows_overlaid'] .flickity-prev-next-button {
transform: scale(1);
}
}  .contact-form {
width: 100%;
} .contact-form .form-row {
display: flex;
width: 100%;
gap: 24px;
margin-bottom: 24px;
}
.contact-form .form-row-full {
display: block;
} .contact-form .form-col {
flex: 1 1 0;
min-width: 0;
} .contact-form .form-col > label,
.contact-form .form-file > label {
display: block;
margin-bottom: 14px;
font-size: 25px;
line-height: 1.2;
} .contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'] {
display: block;
width: 100%;
padding: 15px;
margin: 0;
border: 1.5px solid var(--dark);
border-radius: 6px;
background: transparent;
box-sizing: border-box;
font-size: 18px;
outline: none;
}
.contact-form input[type='text']:focus,
.contact-form input[type='email']:focus,
.contact-form input[type='tel']:focus {
outline: none;
} .contact-form .form-file {
width: 100%;
margin-top: 42px;
}
.form-file__input {
border: 1.5px solid var(--dark);
border-radius: 6px;
}
.contact-form .form-file__input p {
display: flex;
align-items: center;
gap: 24px;
position: relative;
}
.contact-form .form-file__button {
display: flex !important;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin: 0 !important;
border-radius: 4px;
font-size: 28px !important;
line-height: 1;
cursor: pointer;
box-sizing: border-box;
background-color: var(--dark);
color: var(--light);
transition: background-color 0.3s ease;
}
.contact-form .form-file__button:hover {
background-color: var(--terracotta);
}
.contact-form .form-file__name {
font-size: 24px;
line-height: 1.2;
} .contact-form .form-file__native {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
pointer-events: none;
} .contact-form .form-privacy {
margin-top: 28px;
}
.contact-form .form-privacy .wpcf7-list-item {
margin: 0;
}
.contact-form .form-privacy label {
display: flex;
align-items: center;
gap: 22px;
cursor: pointer;
font-size: 24px;
line-height: 1.3;
}
.contact-form .form-privacy input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 27px;
height: 27px;
margin: 0;
border: 2px solid var(--dark);
border-radius: 7px;
background: transparent;
cursor: pointer;
}
.contact-form .form-privacy input[type='checkbox']:checked {
background: var(--dark);
box-shadow: inset 0 0 0 5px #f8f4e9;
} .contact-form .form-submit {
width: 100%;
margin-top: 48px;
}
.contact-form input[type='submit'] {
display: block;
width: 100%;
height: fit-content;
padding: 8px 25px;
border: 0;
border-radius: 8px;
background: #f9c94d;
color: var(--dark);
font-size: 25px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: opacity 0.3s ease;
}
.contact-form input[type='submit']:hover {
opacity: 0.85;
} .contact-form .wpcf7-not-valid {
border-color: var(--dark);
}
.contact-form .wpcf7-not-valid-tip {
margin-top: 8px;
font-size: 14px;
}
.contact-form .wpcf7-response-output {
margin: 25px 0 0;
}
.contact-form textarea {
display: block;
width: 100%;
height: 220px;
padding: 18px;
margin: 0;
border: 1.5px solid var(--dark);
border-radius: 6px;
background: transparent;
box-sizing: border-box;
font-size: 18px;
line-height: 1.4;
resize: vertical;
outline: none;
} @media (max-width: 767px) {
.contact-form .form-row {
flex-direction: column;
gap: 28px;
margin-bottom: 28px;
}
.contact-form .form-col {
width: 100%;
}
.contact-form .form-col > label,
.contact-form .form-file > label {
font-size: 21px;
margin-bottom: 10px;
}
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'] {
height: 58px;
}
.contact-form .form-file {
margin-top: 20px;
}
.contact-form .form-file__name {
font-size: 19px;
}
.contact-form .form-privacy label {
gap: 16px;
font-size: 19px;
}
.contact-form input[type='submit'] {
height: 68px;
font-size: 21px;
}
.contact-form .form-submit {
margin-top: 30px;
}
}
@media (min-width: 1000px) {
.nectar-sticky-media-section__featured-media {
background-color: var(--dark) !important;
}
.nectar-sticky-media-section__media-wrap {
position: absolute;
inset: 0;
overflow: hidden !important;
opacity: 1 !important; clip-path: inset(0 0 0 0);
transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1) !important;
} .nectar-sticky-media-section__media-wrap:nth-child(1) {
z-index: 1;
}
.nectar-sticky-media-section__media-wrap:nth-child(2) {
z-index: 2;
}
.nectar-sticky-media-section__media-wrap:nth-child(3) {
z-index: 3;
}
.nectar-sticky-media-section__media-wrap:nth-child(4) {
z-index: 4;
}
.nectar-sticky-media-section__media-wrap:nth-child(5) {
z-index: 5;
} .nectar-sticky-media-section__media-wrap.active ~ .nectar-sticky-media-section__media-wrap {
clip-path: inset(100% 0 0 0);
}
.nectar-sticky-media-section__media-wrap .nectar-sticky-media-section__media {
transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1) !important;
}
.nectar-sticky-media-section__media-wrap.active .nectar-sticky-media-section__media {
transform: scale(1.1);
}
}
.nectar-sticky-media-section__featured-media {
border-radius: 10px;
overflow: hidden;
}
.cream-cards-wrapper .vc_column-inner {
padding: 2em;
background-color: var(--cream);
border-radius: 10px;
overflow: hidden;
}
.custom-card.image-card {
padding: 0;
overflow: hidden;
border: none;
aspect-ratio: 3 / 4;
}
.custom-card-img-wrap {
aspect-ratio: 1.1 / 1;
}
.custom-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.custom-card.image-card h3.custom-card__title {
font-size: var(--fnt-size-body-bigger);
font-family: var(--primary-font);
line-height: 1.1;
font-weight: 600;
padding: 2rem;
}
@media only screen and (min-width: 1000px) {
.nectar-sticky-media-sections {
gap: 11%;
}
.custom-card.image-card {
flex-flow: row-reverse;
aspect-ratio: 4 / 2.3;
}
} .process-infographic {
width: 100%;
max-width: 85em;
margin-left: auto;
margin-right: auto;
}
.npi-svg {
display: block;
width: 100%;
height: auto;
} .npi-shape {
transition:
fill 0.4s ease,
stroke 0.4s ease;
}
.npi-shape[data-role='terracotta'] {
fill: var(--terracotta);
stroke: var(--terracotta);
}
.npi-shape[data-role='terracotta-light'] {
fill: #edb596;
stroke: #edb596;
}
.npi-shape[data-role='accent'] {
fill: var(--accent);
stroke: var(--accent);
}
.npi-shape[data-role='panel-animal'] {
fill: var(--light);
stroke: var(--accent);
mix-blend-mode: multiply;
}
.npi-shape[data-role='panel-human'] {
fill: #edb596;
fill-opacity: 0.5;
stroke: var(--terracotta);
}
.npi-shape[data-role='subpanel'] {
fill: var(--light);
stroke: var(--terracotta);
}
.npi-shape-path {
fill: #d3c494;
stroke: #d3c494;
transition:
fill 0.4s ease,
stroke 0.4s ease;
} .npi-junction-outer,
.npi-junction-inner,
.npi-junction-inner-muted {
transition: fill 0.4s ease;
}
.npi-junction-outer {
fill: #f1e9cf;
}
.npi-junction-inner {
fill: var(--accent);
}
.npi-junction-inner-muted {
fill: #d3c494;
} .npi-edge {
fill: none;
stroke: var(--accent);
stroke-width: 2px;
transition: stroke 0.4s ease;
}
.npi-edge--trunk {
stroke: var(--terracotta);
stroke-width: 4px;
}
.npi-edge--dashed {
stroke: #d3c494;
stroke-width: 2px;
stroke-dasharray: 11.7 11.7;
}
.npi-arrow {
fill: var(--terracotta);
transition: fill 0.4s ease;
} .npi-icon-fill {
fill: var(--dark);
transition: fill 0.4s ease;
} .npi-label-text {
font-family: var(--primary-font);
font-weight: 700;
fill: var(--dark);
transition: fill 0.4s ease;
}
.npi-label-text[data-fs='title'] {
font-size: 28px;
}
.npi-label-text[data-fs='lg'] {
font-size: 24px;
}
.npi-label-text[data-fs='lg-light'] {
font-size: 24px;
fill: var(--light);
}
.npi-label-text[data-fs='md'] {
font-size: 18px;
}
.npi-label-text[data-fs='sm-head'] {
font-size: 16px;
text-transform: uppercase;
}
.npi-label-text[data-fs='xs-eyebrow'] {
font-size: 10px;
} [data-npi-step][data-status='inactive'] .npi-shape,
[data-npi-step][data-status='inactive'] .npi-shape-path {
fill: transparent;
stroke: rgb(206 198 184);
stroke-width: 1.5px;
mix-blend-mode: normal;
}
[data-npi-step][data-status='inactive'] .npi-edge {
stroke: rgb(206 198 184);
}
[data-npi-step][data-status='inactive'] .npi-arrow {
fill: rgb(206 198 184);
}
[data-npi-step][data-status='inactive'] .npi-icon-fill {
fill: rgb(206 198 184);
}
[data-npi-step][data-status='inactive'] .npi-label-text {
fill: rgb(206 198 184) !important;
} #npi-junctions {
isolation: isolate;
}