/* Extracted Styles from homepage-design.html */
/* Base Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Sora', sans-serif;
background: #fff;
color: #1a3c34;
}
/* Utility */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Placeholder for Blocks */
#homepage-content {
display: flex;
flex-direction: column;
gap: 0;
}
.elvora-coupon-bar {
background: linear-gradient(90deg, #1a1a1a 0%, #3a3a3a 100%);
color: #fff;
text-align: center;
padding: 8px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 9999;
position: relative;
}
.elvora-coupon-code {
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border: 1px dashed rgba(255, 255, 255, 0.5);
border-radius: 4px;
font-weight: 700;
margin-left: 5px;
}
.elvora-coupon-text-mobile {
display: none;
}
@media(max-width: 600px) {
.elvora-coupon-bar {
flex-direction: row;
padding: 6px 4px;
font-size: 11px;
gap: 6px;
white-space: nowrap;
}
.elvora-coupon-bar .desktop-only {
display: none !important;
}
.elvora-coupon-bar .mobile-hide {
display: none !important;
}
.elvora-coupon-text-mobile {
display: inline;
}
}
.elvora-s1 {
--green-primary: #1F4D2B;
--green-soft: #E6F1EA;
--text-main: #3A3A3A;
--border-soft: rgba(31, 77, 43, .10);
background: var(--green-soft);
color: var(--green-primary);
width: 100%;
padding: clamp(8px, 1.6vw, 12px) 0;
border-bottom: 1px solid var(--border-soft);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.elvora-s1__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(14px, 3vw, 24px);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(10px, 2.2vw, 22px);
text-align: center;
}
.elvora-s1__item {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: clamp(11px, 2.2vw, 13px);
font-weight: 500;
letter-spacing: .02em;
line-height: 1.35;
white-space: nowrap;
}
/* separators that never appear at the start of a wrapped line */
.elvora-s1__item+.elvora-s1__item {
padding-left: clamp(12px, 2.2vw, 18px);
}
.elvora-s1__item+.elvora-s1__item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: rgba(31, 77, 43, .35);
}
/* tiny icons */
.elvora-s1__icon {
width: 14px;
height: 14px;
display: inline-block;
flex: 0 0 auto;
opacity: .9;
}
.elvora-s1__icon svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
/* WhatsApp link styling (subtle, premium) */
.elvora-s1__link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(31, 77, 43, .25);
padding-bottom: 1px;
transition: border-color .18s ease, opacity .18s ease;
}
.elvora-s1__link:hover {
border-color: rgba(31, 77, 43, .55);
}
.elvora-s1__link:focus-visible {
outline: 2px solid rgba(31, 77, 43, .45);
outline-offset: 3px;
border-bottom-color: transparent;
border-radius: 6px;
}
@media (max-width: 480px) {
.elvora-s1__item {
white-space: normal;
}
.elvora-s1__item+.elvora-s1__item {
padding-left: 14px;
}
}
/* =========================================
HEADER ACTIONS REFACTOR (CART + BOUTIQUE)
========================================= */
/* CSS Variables for Mini Cart */
:root {
--green-primary: #1F4D2B;
--green-soft: rgba(31, 77, 43, 0.08);
--text-main: #1f1f1f;
--text-muted: #6b7280;
--border-soft: #e7e9e7;
}
.elvora-header-right {
position: relative;
/* For mini cart absolute positioning */
display: flex;
align-items: center;
gap: 12px;
}
/* 1. Cart Icon */
.elvora-cart-icon {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--text-main);
background: transparent;
transition: all 0.2s ease;
cursor: pointer;
text-decoration: none;
}
.elvora-cart-icon:hover,
.elvora-header-cart.active .elvora-cart-icon {
background: var(--green-soft);
color: var(--green-primary);
}
.elvora-icon-cart {
width: 24px;
height: 24px;
}
/* Badge */
.elvora-cart-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--green-primary);
color: #fff;
font-size: 10px;
font-weight: 800;
height: 18px;
width: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/* 2. Boutique Button (Desktop) */
.elvora-hd__btn--boutique {
background: #1F4D2B;
color: #fff;
border: none;
font-weight: 700;
border-radius: 8px;
height: 40px;
padding: 0 18px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.elvora-hd__btn--boutique:hover {
background: #163a20;
transform: translateY(-1px);
}
/* 3. Mini Cart Dropdown */
.elvora-mini-cart {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: 360px;
background: #fff;
border-radius: 16px;
border: 1px solid var(--border-soft);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.2s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.elvora-header-cart.active .elvora-mini-cart {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Header */
.elvora-mc-header {
padding: 16px;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
}
.elvora-mc-title {
font-weight: 800;
font-size: 15px;
color: var(--text-main);
}
.elvora-mc-close {
background: none;
border: none;
font-size: 18px;
color: var(--text-muted);
cursor: pointer;
}
/* Body */
.elvora-mc-body {
max-height: 320px;
overflow-y: auto;
padding: 16px;
}
.elvora-mc-empty {
text-align: center;
color: var(--text-muted);
font-size: 14px;
padding: 20px 0;
}
/* List */
.elvora-mc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 16px;
}
.elvora-mc-item {
display: flex !important;
gap: 12px;
align-items: center;
position: relative;
padding: 0 !important;
margin: 0 !important;
}
.elvora-mc-item::before {
display: none !important;
}
.elvora-mc-thumb {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: #f9f9f9;
flex-shrink: 0;
}
.elvora-mc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.elvora-mc-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.elvora-mc-name {
font-weight: 700;
font-size: 13px;
color: var(--text-main);
text-decoration: none;
line-height: 1.3;
}
.elvora-mc-meta {
font-size: 12px;
color: var(--text-muted);
}
.elvora-mc-price {
font-weight: 700;
color: var(--green-primary);
}
.elvora-mc-remove {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f1f1;
color: #666;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transition: all 0.2s;
}
.elvora-mc-remove:hover {
background: #ffe5e5;
color: #d32f2f;
}
/* Footer */
.elvora-mc-footer {
padding: 16px;
border-top: 1px solid var(--border-soft);
background: #fafafa;
}
.elvora-mc-total {
display: flex;
justify-content: space-between;
font-weight: 800;
font-size: 16px;
margin-bottom: 12px;
color: var(--text-main);
}
.elvora-mc-actions {
display: flex;
gap: 10px;
}
.elvora-btn-ghost {
flex: 1;
text-align: center;
background: #fff;
border: 1px solid var(--border-soft);
color: var(--text-main);
padding: 10px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.elvora-btn-primary {
flex: 1.5;
text-align: center;
background: var(--green-primary);
color: #fff;
border: none;
padding: 10px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.elvora-btn-primary:hover {
background: #163a20;
}
/* Responsive */
@media (max-width: 600px) {
.elvora-header-right {
gap: 8px;
}
/* Hide Boutique button on mobile if space is tight, or keep it */
.elvora-hd__btn--boutique {
display: none;
/* User image shows only Cart on mobile header usually, Boutique in drawer? */
}
.elvora-mini-cart {
position: fixed;
top: 60px;
/* Header height approx */
left: 0;
right: 0;
width: 100%;
margin: 0;
border-radius: 0 0 16px 16px;
transform: translateY(-10px);
}
}
/* =========================================
CUSTOM HEADER (MEGA MENU + DRAWER)
========================================= */
.elvora-hd {
--green-primary: #1F4D2B;
--green-soft: #E6F1EA;
--black-charcoal: #121212;
--bg-main: #FAFAFA;
--text-main: #3A3A3A;
--text-muted: #6F6F6F;
--border-soft: #E2E6E3;
position: sticky;
top: 0;
z-index: 999;
background: rgba(250, 250, 250, .90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-soft);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.elvora-hd__wrap {
max-width: 1200px;
margin: 0 auto;
padding: 14px clamp(14px, 3vw, 24px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
/* Logo */
.elvora-hd__logo {
display: flex;
align-items: baseline;
gap: 10px;
text-decoration: none;
color: var(--black-charcoal);
min-width: 140px;
}
.elvora-hd__mark {
font-family: Sora, Inter, system-ui, sans-serif;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 16px;
line-height: 1;
}
.elvora-hd__tag {
display: none;
font-size: 12px;
color: var(--text-muted);
line-height: 1;
transform: translateY(-1px);
}
/* Desktop nav */
nav.elvora-hd__nav {
display: none;
align-items: center;
gap: clamp(12px, 2vw, 22px);
}
/* SVG visibility fix */
.elvora-hd__burger svg,
.elvora-hd__burger svg path {
fill: none !important;
stroke: currentColor !important;
}
.elvora-hd__link {
position: relative;
text-decoration: none;
color: var(--text-main);
font-weight: 500;
font-size: 14px;
padding: 10px 2px;
outline: none;
white-space: nowrap;
}
.elvora-hd__link::after {
content: "";
position: absolute;
left: 0;
bottom: 6px;
width: 0%;
height: 2px;
background: var(--green-primary);
transition: width .18s ease;
border-radius: 2px;
}
.elvora-hd__link:hover::after,
.elvora-hd__link:focus-visible::after {
width: 100%;
}
.elvora-hd__link:focus-visible {
outline: 2px solid rgba(31, 77, 43, .35);
outline-offset: 3px;
border-radius: 10px;
}
/* Mega menu */
.elvora-hd__hasmega {
position: relative;
}
.elvora-hd__mega {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 8px);
width: min(760px, 92vw);
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
padding: 18px;
display: none;
}
.elvora-hd__hasmega:hover .elvora-hd__mega,
.elvora-hd__hasmega:focus-within .elvora-hd__mega {
display: block;
}
.elvora-hd__megaGrid {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 16px;
align-items: start;
}
.elvora-hd__megaIntro {
background: var(--green-soft);
border-radius: 12px;
padding: 14px;
}
.elvora-hd__megaTitle {
font-family: Sora, Inter, sans-serif;
font-weight: 650;
margin: 0 0 6px 0;
color: var(--black-charcoal);
font-size: 14px;
}
.elvora-hd__megaText {
margin: 0;
color: var(--text-muted);
font-size: 13px;
line-height: 1.55;
}
.elvora-hd__megaList {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.elvora-hd__megaList a {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: var(--text-main);
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
transition: background .18s ease, border-color .18s ease;
font-weight: 500;
font-size: 13.5px;
}
.elvora-hd__megaList a:hover {
background: rgba(230, 241, 234, .65);
border-color: rgba(31, 77, 43, .18);
}
.elvora-hd__chev {
opacity: .55;
font-size: 14px;
}
/* Actions */
.elvora-hd__actions {
display: flex;
align-items: center;
gap: 10px;
min-width: 160px;
justify-content: flex-end;
}
.elvora-hd__btn {
height: 38px;
padding: 0 14px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 600;
font-size: 13px;
border: 1px solid rgba(31, 77, 43, .18);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
white-space: nowrap;
}
.elvora-hd__btn--primary {
background: var(--green-primary);
color: #fff;
border-color: transparent;
}
.elvora-hd__btn--ghost {
background: transparent;
color: var(--text-main);
}
.elvora-hd__btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.elvora-hd__btn:focus-visible {
outline: 2px solid rgba(31, 77, 43, .35);
outline-offset: 3px;
border-radius: 12px;
}
/* Hide Boutique button in header on mobile */
.elvora-hd__btn--boutique {
display: none;
}
/* Burger */
/* Visible MENU Button Styling */
.elvora-hd__burger {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--green-soft);
/* Light green background */
color: var(--green-primary) !important;
border: 1.5px solid var(--green-primary);
padding: 8px 16px;
border-radius: 99px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
box-shadow: 0 4px 12px rgba(31, 77, 43, 0.1);
}
.elvora-hd__burger:hover {
background: var(--green-primary);
color: #fff !important;
box-shadow: 0 6px 16px rgba(31, 77, 43, 0.2);
}
.elvora-hd__burger-text {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
}
.elvora-burger-icon {
display: block;
}
/* Drawer */
.elvora-hd__drawerMask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
display: none;
z-index: 998;
}
.elvora-hd__drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(360px, 92vw);
background: #fff;
border-left: 1px solid var(--border-soft);
transform: translateX(102%);
transition: transform .22s ease;
z-index: 999;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.elvora-hd__drawerHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.elvora-hd__close {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border-soft);
background: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.elvora-hd__close svg,
.elvora-hd__close svg path {
fill: var(--text-main) !important;
stroke: var(--text-main) !important;
}
.elvora-hd__mnav a {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: var(--text-main);
padding: 12px 12px;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 600;
}
.elvora-hd__mnav a:hover {
background: rgba(230, 241, 234, .6);
border-color: rgba(31, 77, 43, .18);
}
.elvora-hd__mSub {
margin-top: 6px;
padding-left: 8px;
border-left: 2px solid rgba(31, 77, 43, .12);
display: flex;
flex-direction: column;
gap: 6px;
}
.elvora-hd__mSub a {
font-weight: 500;
font-size: 13.5px;
padding: 10px 12px;
}
@media (min-width: 960px) {
nav.elvora-hd__nav {
display: flex;
}
.elvora-hd__burger {
display: none;
}
.elvora-hd__tag {
display: block;
}
/* Show Boutique button in header on desktop */
.elvora-hd__btn--boutique {
display: inline-flex;
}
}
@media (prefers-reduced-motion: reduce) {
.elvora-hd__btn,
.elvora-hd__drawer {
transition: none !important;
}
.elvora-hd__btn:hover {
transform: none;
}
}
.elvora-s2-hero {
--black: #121212;
--green: #1F4D2B;
--white: #FFFFFF;
--soft: #FAFAFA;
--muted: rgba(255, 255, 255, .78);
--muted2: rgba(255, 255, 255, .62);
--border: rgba(255, 255, 255, .12);
--font-heading: 'Sora', sans-serif;
--font-body: 'Inter', sans-serif;
background:
radial-gradient(1000px 560px at 74% 35%, rgba(31, 77, 43, .36) 0%, rgba(31, 77, 43, 0) 60%),
radial-gradient(820px 520px at 22% 28%, rgba(31, 77, 43, .18) 0%, rgba(31, 77, 43, 0) 58%),
radial-gradient(700px 420px at 18% 18%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(180deg, #121212 0%, #0F0F0F 100%);
color: var(--soft);
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(72px, 10vw, 122px) clamp(16px, 4vw, 28px) clamp(140px, 16vw, 240px);
padding-top: calc(clamp(72px, 10vw, 122px) + 52px);
min-height: clamp(740px, 95vh, 1000px);
}
.elvora-s2-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .08;
mix-blend-mode: overlay;
pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
z-index: 0;
}
.elvora-s2-fadeBottom {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 140px;
background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #121212 88%);
pointer-events: none;
z-index: 2;
}
.elvora-s2-wrap {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(20px, 4vw, 56px);
align-items: center;
position: relative;
z-index: 1;
}
/* LEFT */
.elvora-s2-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(18, 18, 18, .22);
color: rgba(255, 255, 255, .74);
font-family: var(--font-body);
font-size: 12.5px;
user-select: none;
}
.elvora-s2-kdot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(31, 77, 43, .92);
box-shadow: 0 0 0 6px rgba(31, 77, 43, .16);
}
.elvora-s2-title {
margin: 16px 0 0;
font-family: var(--font-heading);
font-weight: 650;
font-size: clamp(38px, 5.8vw, 66px);
line-height: 1.03;
letter-spacing: -0.03em;
color: var(--white);
max-width: 18ch;
text-shadow: 0 2px 44px rgba(0, 0, 0, .32);
}
.elvora-s2-sub {
margin: 14px 0 0;
font-family: var(--font-body);
font-size: clamp(16px, 2vw, 20px);
line-height: 1.65;
color: var(--muted);
max-width: 56ch;
}
.elvora-s2-actions {
margin-top: 22px;
}
.elvora-s2-ctaPrimary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 14px;
background: var(--white);
color: #121212;
font-family: var(--font-body);
font-weight: 750;
font-size: 14px;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, .18);
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
will-change: transform;
}
.elvora-s2-ctaPrimary:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
background: rgba(255, 255, 255, .92);
}
.elvora-s2-ctaPrimary:focus-visible {
outline: 2px solid rgba(255, 255, 255, .55);
outline-offset: 4px;
}
.elvora-s2-proof {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--muted2);
user-select: none;
}
.elvora-s2-proof span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(18, 18, 18, .18);
max-width: 100%;
}
.elvora-s2-proof svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
opacity: .95;
}
/* RIGHT */
.elvora-s2-visual {
position: relative;
border-radius: 22px;
border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
box-shadow: 0 26px 64px rgba(0, 0, 0, .28);
min-height: 480px;
overflow: hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
isolation: isolate;
}
.elvora-s2-visual::before {
content: "";
position: absolute;
inset: -22%;
background:
radial-gradient(circle at 55% 25%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 52%),
radial-gradient(circle at 65% 52%, rgba(31, 77, 43, .26) 0%, rgba(31, 77, 43, 0) 60%);
opacity: .95;
pointer-events: none;
z-index: 0;
}
.elvora-s2-visualHead {
position: absolute;
top: 14px;
left: 14px;
right: 14px;
display: flex;
justify-content: space-between;
gap: 10px;
z-index: 3;
flex-wrap: wrap;
}
.elvora-s2-miniTag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(18, 18, 18, .20);
font-size: 12px;
color: rgba(255, 255, 255, .78);
white-space: nowrap;
max-width: 100%;
}
.elvora-s2-miniTag b {
color: rgba(255, 255, 255, .92);
font-weight: 750;
}
.elvora-s2-pack {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
z-index: 1;
}
.elvora-s2-pack svg {
width: min(420px, 92%);
max-width: 100%;
height: auto;
filter: drop-shadow(0 30px 55px rgba(0, 0, 0, .35));
}
/* FLOATING CHIPS DESKTOP */
.elvora-s2-floats {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.elvora-s2-chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(18, 18, 18, .22);
color: rgba(255, 255, 255, .82);
font-family: var(--font-body);
font-size: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
max-width: calc(100% - 22px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.elvora-s2-chip i {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(31, 77, 43, .92);
box-shadow: 0 0 0 6px rgba(31, 77, 43, .14);
flex: 0 0 auto;
}
.c1 {
top: 18%;
left: 8%;
}
.c2 {
top: 38%;
right: 8%;
}
.c3 {
bottom: 18%;
left: 14%;
}
@media (prefers-reduced-motion: no-preference) {
.elvora-s2-chip {
animation: elvFloat 6.5s ease-in-out infinite;
}
.c2 {
animation-delay: -2.2s;
}
.c3 {
animation-delay: -3.8s;
}
@keyframes elvFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.elvora-s2-pack svg {
animation: elvBreath 7.2s ease-in-out infinite;
}
@keyframes elvBreath {
0%,
100% {
transform: translateY(10px);
}
50% {
transform: translateY(4px);
}
}
}
/* TABLET */
@media(max-width:1024px) {
.elvora-s2-wrap {
grid-template-columns: 1fr;
}
.elvora-s2-visual {
min-height: 420px;
}
.elvora-s2-title {
max-width: 22ch;
}
.c1 {
top: 20%;
left: 10%;
}
.c2 {
top: 46%;
right: 10%;
}
.c3 {
bottom: 14%;
left: 10%;
}
}
/* MOBILE – UTILISER L’ESPACE + CENTRER + CHIPS EN BAS (plus d’espace vide) */
@media (max-width:520px) {
/* hero global: moins de padding bas inutile */
.elvora-s2-hero {
min-height: 760px;
padding-bottom: 140px;
/* réduit */
}
/* card: utilise la hauteur dispo */
.elvora-s2-visual {
border-radius: 18px;
min-height: 520px;
/* plus haut pour remplir */
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* tags du haut: restent en haut */
.elvora-s2-visualHead {
position: relative;
top: auto;
left: auto;
right: auto;
padding: 14px 14px 6px 14px;
margin: 0;
}
/* packshot: prend l’espace du milieu */
.elvora-s2-pack {
position: relative;
inset: auto;
flex: 1;
/* IMPORTANT: prend l’espace restant */
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px 10px 16px;
/* moins de padding bas */
}
.elvora-s2-pack svg {
width: min(360px, 86%);
max-height: 320px;
/* empêche d’être trop haut */
height: auto;
}
/* chips: en bas, stack, pas de chevauchement */
.elvora-s2-floats {
position: relative;
inset: auto;
left: auto;
right: auto;
bottom: auto;
top: auto;
padding: 10px 14px 14px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.elvora-s2-chip {
position: static;
width: 100%;
justify-content: flex-start;
font-size: 11.5px;
padding: 9px 11px;
max-width: 100%;
}
/* neutralise les positions desktop */
.c1,
.c2,
.c3 {
top: auto;
left: auto;
right: auto;
bottom: auto;
}
/* option: plus clean sur mobile */
@media (prefers-reduced-motion: no-preference) {
.elvora-s2-chip {
animation: none;
}
.elvora-s2-pack svg {
animation: none;
}
}
}
/* =========================
AJUSTEMENTS DEMANDÉS
- Mobile/Tablet: carte plus bas
- Desktop: éléments plus grands
========================= */
/* DESKTOP: agrandir un peu la carte + packshot + tags/chips */
@media (min-width: 1025px) {
.elvora-s2-visual {
min-height: 520px;
/* un peu plus haut */
}
.elvora-s2-pack svg {
width: min(460px, 92%);
/* packshot plus grand */
}
.elvora-s2-miniTag {
font-size: 12.5px;
/* tags plus lisibles */
padding: 9px 12px;
}
.elvora-s2-chip {
font-size: 12.5px;
/* chips un peu plus grandes */
padding: 11px 14px;
}
}
/* TABLET: descendre la carte un peu */
@media (max-width: 1024px) {
.elvora-s2-visual {
transform: translateY(14px);
/* descend la carte */
}
}
/* MOBILE: descendre encore un peu la carte (sans créer trop d’espace bas) */
@media (max-width: 520px) {
.elvora-s2-visual {
transform: translateY(16px);
}
/* option: garder le hero bien “tight” */
.elvora-s2-hero {
padding-bottom: 130px;
/* évite trop d’espace vide */
}
}
}
/* Mobile Sizing Override for Visual */
@media (max-width: 600px) {
.elvora-s2-pack svg {
width: 100% !important;
max-width: none !important;
/* Bigger on mobile */
transform: scale(1.35);
/* Major zoom */
margin-top: 20px;
margin-bottom: 20px;
}
}
.elvora-s3-statement {
--bg: #FAFAFA;
--bg-tint: #F3F7F4;
--text: #3A3A3A;
--muted: #6A6A6A;
--green: #1F4D2B;
--fontH: 'Sora', sans-serif;
position: relative;
overflow: hidden;
width: 100%;
background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 55%);
text-align: center;
padding: clamp(46px, 8vw, 86px) clamp(16px, 4vw, 28px) clamp(18px, 4vw, 26px);
}
.elvora-s3-statement::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 80px;
background: linear-gradient(180deg,
rgba(18, 18, 18, 0.50) 0%,
rgba(18, 18, 18, 0.14) 38%,
rgba(250, 250, 250, 0) 100%);
pointer-events: none;
z-index: 0;
}
.elvora-s3-statement::after {
content: "";
position: absolute;
inset: -20%;
background:
radial-gradient(circle at 30% 15%, rgba(31, 77, 43, 0.08) 0%, transparent 55%),
radial-gradient(circle at 80% 60%, rgba(31, 77, 43, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
opacity: .95;
}
.elvora-s3-motif {
position: absolute;
inset: -12%;
pointer-events: none;
z-index: 0;
filter: blur(12px);
opacity: 1;
transform: translateZ(0);
}
.elvora-s3-motif svg {
width: 100%;
height: 100%;
display: block;
}
.elvora-s3-container {
max-width: 860px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.elvora-s3-card {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(226, 230, 227, 0.92);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
padding: clamp(18px, 4vw, 34px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.elvora-s3-card::after {
content: "";
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 20% 10%, rgba(31, 77, 43, 0.10) 0%, transparent 55%),
radial-gradient(circle at 90% 70%, rgba(31, 77, 43, 0.08) 0%, transparent 60%);
pointer-events: none;
opacity: .9;
}
.elvora-s3-accent {
width: 44px;
height: 2px;
margin: 0 auto 14px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(31, 77, 43, 0), rgba(31, 77, 43, 0.70), rgba(31, 77, 43, 0));
opacity: .9;
position: relative;
z-index: 1;
}
.elvora-s3-text {
font-family: var(--fontH);
font-weight: 400;
font-size: clamp(18px, 4.6vw, 30px);
/* ✅ smaller on mobile */
line-height: 1.55;
color: var(--text);
margin: 0;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.elvora-s3-text strong {
font-weight: 650;
color: var(--green);
white-space: normal;
/* ✅ allow wrap on mobile */
}
.elvora-s3-foot {
margin-top: 14px;
font-family: var(--fontH);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
opacity: .72;
user-select: none;
position: relative;
z-index: 1;
}
.elvora-s35-bridge {
--bg: #FAFAFA;
--bg-tint: #F3F7F4;
--text: #2F2F2F;
--muted: #6A6A6A;
--green: #1F4D2B;
--border: #E2E6E3;
--font: 'Inter', sans-serif;
--fontH: 'Sora', sans-serif;
/* Gradient: Start from #F3F7F4 (Tint) to match previous section's overlay better */
background: linear-gradient(180deg, #F3F7F4 0%, #FFFFFF 100%);
/* Pull up slightly to ensure no white line gap */
margin-top: -2px;
/* Add breathing room between sections */
padding: 80px clamp(16px, 4vw, 28px) clamp(58px, 8vw, 88px);
position: relative;
overflow: hidden;
}
.elvora-s35-wrap {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 2.5vw, 18px);
align-items: stretch;
}
.elvora-s35-card {
border-radius: 18px;
border: 1px solid rgba(226, 230, 227, .95);
background: rgba(255, 255, 255, .86);
box-shadow: 0 16px 34px rgba(0, 0, 0, .06);
padding: 18px 18px 16px;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
transform: translateY(0);
}
.elvora-s35-card::after {
content: "";
position: absolute;
inset: -35%;
background: radial-gradient(circle at 25% 20%, rgba(31, 77, 43, .10) 0%, transparent 58%);
opacity: .65;
pointer-events: none;
transition: opacity .18s ease;
}
.elvora-s35-card:hover {
transform: translateY(-2px);
box-shadow: 0 22px 46px rgba(0, 0, 0, .08);
border-color: rgba(31, 77, 43, .18);
}
.elvora-s35-card:hover::after {
opacity: .85;
}
.elvora-s35-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
z-index: 1;
}
.elvora-s35-title {
margin: 0;
font-family: var(--fontH);
font-size: 13px;
font-weight: 750;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text);
}
.elvora-s35-ico {
width: 36px;
height: 36px;
border-radius: 13px;
border: 1px solid rgba(31, 77, 43, .16);
background: rgba(31, 77, 43, .06);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
position: relative;
z-index: 1;
}
.elvora-s35-ico svg {
width: 18px;
height: 18px;
stroke: var(--green);
fill: none;
stroke-width: 2;
opacity: .9;
}
.elvora-s35-text {
margin: 12px 0 0 0;
font-family: var(--font);
font-size: 14px;
line-height: 1.65;
color: var(--muted);
position: relative;
z-index: 1;
}
.elvora-s35-link {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font);
font-weight: 750;
font-size: 13px;
color: var(--green);
text-decoration: none;
position: relative;
z-index: 1;
}
.elvora-s35-arrow {
display: inline-block;
transition: transform .18s ease;
}
.elvora-s35-card:hover .elvora-s35-arrow {
transform: translateX(3px);
}
/* ✅ mobile fix: full-width, comfortable spacing */
@media (max-width: 980px) {
.elvora-s35-wrap {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.elvora-s35-card,
.elvora-s35-arrow {
transition: none;
}
.elvora-s35-card:hover {
transform: none;
}
}
.elvora-s5-wrap {
--green: #1F4D2B;
--green-soft: #E6F1EA;
--bg: #FFFFFF;
/* ✅ blanc */
--card: #FFFFFF;
--text: #1F1F1F;
--muted: #646A66;
--border: rgba(31, 31, 31, .10);
--shadow: 0 22px 54px rgba(0, 0, 0, .08);
--font: 'Inter', sans-serif;
--fontH: 'Sora', sans-serif;
background: var(--bg);
width: 100%;
position: relative;
overflow: hidden;
padding: clamp(44px, 6vw, 70px) 0 clamp(34px, 5vw, 66px);
}
/* (optionnel) petite ligne séparatrice douce */
.elvora-s5-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(0, 0, 0, .06);
pointer-events: none;
}
.elvora-s5-head {
max-width: 1600px;
margin: 0 auto 28px;
padding: 0 clamp(16px, 4vw, 40px);
text-align: center;
position: relative;
z-index: 1;
}
.elvora-s5-head h2 {
margin: 0;
font-family: var(--fontH);
font-weight: 850;
letter-spacing: -0.03em;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
color: var(--text);
}
.elvora-s5-head h2 .elvora-s5-green {
color: var(--green);
}
.elvora-s5-head p {
margin: 14px auto 0;
font-family: var(--font);
font-size: 15px;
color: var(--muted);
max-width: 70ch;
line-height: 1.6;
}
/* ===== GRID (DESKTOP KEEP) ===== */
.elvora-s5-grid {
max-width: 1600px;
/* ✅ Wider / Full Width feel */
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 40px);
position: relative;
z-index: 1;
display: grid;
/* 4 items => 4 columns */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
/* ✅ Bigger gap */
}
/* CARD */
.elvora-s5-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 26px;
/* ✅ Rounder */
box-shadow: var(--shadow);
padding: 30px;
/* ✅ Bigger padding */
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
min-height: 280px;
/* ✅ Bigger height */
}
.elvora-s5-card:hover {
transform: translateY(-3px);
border-color: rgba(31, 77, 43, .22);
box-shadow: 0 30px 78px rgba(0, 0, 0, .10);
}
/* glow */
.elvora-s5-card::before {
content: "";
position: absolute;
inset: -45%;
background:
radial-gradient(circle at 25% 25%, rgba(31, 77, 43, .12) 0%, transparent 55%),
radial-gradient(circle at 80% 85%, rgba(31, 77, 43, .07) 0%, transparent 60%);
pointer-events: none;
opacity: .95;
}
.elvora-s5-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: relative;
z-index: 1;
}
.elvora-s5-ic {
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(230, 241, 234, .75);
border: 1px solid rgba(31, 77, 43, .16);
flex: 0 0 auto;
}
.elvora-s5-ic svg {
width: 30px;
height: 30px;
stroke: var(--green);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.elvora-s5-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(31, 77, 43, .08);
border: 1px solid rgba(31, 77, 43, .14);
color: rgba(31, 77, 43, .96);
font-family: var(--font);
font-weight: 800;
font-size: 12px;
white-space: nowrap;
}
.elvora-s5-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(31, 77, 43, .95);
box-shadow: 0 0 0 6px rgba(31, 77, 43, .12);
}
.elvora-s5-title {
margin: 0;
font-family: var(--fontH);
font-weight: 850;
letter-spacing: -0.02em;
font-size: 17px;
/* Slightly smaller for 4-col */
position: relative;
z-index: 1;
}
.elvora-s5-desc {
margin: 0;
font-family: var(--font);
font-size: 13.5px;
line-height: 1.55;
color: rgba(31, 31, 31, .68);
position: relative;
z-index: 1;
max-width: 56ch;
}
.elvora-s5-cta {
margin-top: auto;
/* Push to bottom */
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 900;
color: var(--green);
position: relative;
z-index: 1;
}
.elvora-s5-cta svg {
width: 18px;
height: 18px;
stroke: var(--green);
fill: none;
stroke-width: 2;
}
/* =========================
✅ TABLET: 2 COLONNES CLEAN
========================= */
@media (max-width: 1024px) {
.elvora-s5-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.elvora-s5-card {
grid-column: auto;
/* on laisse le grid faire */
min-height: 200px;
border-radius: 20px;
}
.elvora-s5-ic {
width: 52px;
height: 52px;
border-radius: 16px;
}
.elvora-s5-title {
font-size: 18px;
}
.elvora-s5-desc {
font-size: 13.5px;
}
}
/* =========================
✅ MOBILE: CAROUSEL PREMIUM (1 CARD / écran)
========================= */
@media (max-width: 640px) {
.elvora-s5-grid {
display: flex;
overflow-x: auto;
overflow-y: hidden;
gap: 14px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 20px;
}
.elvora-s5-grid::-webkit-scrollbar {
display: none;
}
.elvora-s5-card {
flex: 0 0 85%;
scroll-snap-align: center;
min-height: 210px;
border-radius: 20px;
padding: 16px 16px 14px;
}
.elvora-s5-top {
gap: 10px;
}
.elvora-s5-badge {
font-size: 11.5px;
padding: 7px 10px;
}
.elvora-s5-title {
font-size: 18px;
}
.elvora-s5-desc {
font-size: 13.3px;
}
}
.elvora-s5-swipeHint {
max-width: 1200px;
margin: 14px auto 0;
padding: 0 clamp(16px, 4vw, 24px);
display: flex;
justify-content: flex-end;
font-family: var(--font);
font-size: 12px;
color: rgba(58, 58, 58, .62);
position: relative;
z-index: 1;
}
.elvora-s5-swipeHint span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(226, 230, 227, .95);
box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}
@media (min-width: 641px) {
.elvora-s5-swipeHint {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.elvora-s5-card {
transition: none;
}
.elvora-s5-card:hover {
transform: none;
}
}
.elvora-s7-products {
--bg: rgba(250, 250, 250, 0.5);
/* Reduced opacity gray as requested */
--text: #2F2F2F;
--muted: #6A6A6A;
--green: #1F4D2B;
--price: #1F4D2B;
--card-bg: #FFFFFF;
--border: #E5E5E5;
--font: 'Inter', sans-serif;
--fontH: 'Sora', sans-serif;
background: var(--bg);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
}
.elvora-s7-head {
text-align: center;
margin-bottom: clamp(30px, 5vw, 50px);
padding: 0 20px;
}
.elvora-s7-head h2 {
font-family: var(--fontH);
font-size: clamp(28px, 4vw, 42px);
color: var(--text);
margin: 0 0 10px;
font-weight: 700;
}
.elvora-s7-head p {
font-family: var(--font);
color: var(--muted);
font-size: 15px;
margin: 0;
}
.elvora-s7-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 40px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.elvora-s7-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.elvora-s7-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.elvora-s7-img-wrap {
background: #F4F4F4;
border-radius: 12px;
padding-bottom: 100%;
/* Square aspect ratio */
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.elvora-s7-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* In a real scenario, product image goes here */
opacity: 0.6;
/* Placeholder effect */
}
.elvora-s7-add {
position: absolute;
bottom: 12px;
right: 12px;
width: 40px;
height: 40px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
color: var(--green);
transition: transform 0.2s ease, background 0.2s ease;
}
.elvora-s7-card:hover .elvora-s7-add {
transform: scale(1.1);
background: var(--green);
color: #FFFFFF;
}
.elvora-s7-add svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
}
.elvora-s7-info {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.elvora-s7-cat {
font-family: var(--font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-weight: 600;
}
.elvora-s7-title {
font-family: var(--fontH);
font-size: 16px;
color: var(--text);
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.elvora-s7-price {
font-family: var(--font);
font-size: 16px;
color: var(--price);
font-weight: 700;
margin-top: auto;
padding-top: 10px;
}
.elvora-s7-foot {
text-align: center;
margin-top: 50px;
}
.elvora-s7-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 99px;
color: var(--text);
font-family: var(--font);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.elvora-s7-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: var(--green);
color: var(--green);
}
/* Responsive */
@media (max-width: 1024px) {
.elvora-s7-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.elvora-s7-grid {
display: flex;
overflow-x: auto;
gap: 16px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.elvora-s7-card {
min-width: 260px;
scroll-snap-align: center;
}
.elvora-s7-head h2 {
font-size: 28px;
}
}
.elvora-s4-steps {
--bg: rgba(250, 250, 250, 0.5);
/* Matching previous section's opacity */
--card: #F3F5F4;
--text: #2F2F2F;
--muted: #6F6F6F;
--green: #1F4D2B;
--border: #E6E8E6;
--fontH: 'Sora', sans-serif;
--fontB: 'Inter', sans-serif;
background: var(--bg);
padding: clamp(36px, 6vw, 70px) 0;
}
.elvora-s4-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 24px);
}
.elvora-s4-title {
margin: 0 0 clamp(18px, 3vw, 26px);
font-family: var(--fontH);
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(20px, 2.6vw, 34px);
color: var(--text);
}
.elvora-s4-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2.8vw, 22px);
align-items: stretch;
}
@media (max-width: 980px) {
.elvora-s4-grid {
grid-template-columns: 1fr;
}
.elvora-s4-title {
text-align: center;
}
}
.elvora-s4-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.elvora-s4-visual {
background: var(--card);
border: 1px solid rgba(0, 0, 0, .04);
border-radius: 18px;
overflow: hidden;
position: relative;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.elvora-s4-visual::after {
content: "";
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 30% 35%, rgba(31, 77, 43, .16) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(31, 77, 43, .10) 0%, transparent 60%);
filter: blur(14px);
opacity: .75;
pointer-events: none;
}
.elvora-s4-visual svg {
width: 86%;
max-width: 380px;
height: auto;
position: relative;
z-index: 1;
}
.elvora-s4-stepTitle {
margin: 0;
font-family: var(--fontH);
font-weight: 900;
letter-spacing: -0.01em;
font-size: 15px;
text-transform: uppercase;
color: var(--text);
}
.elvora-s4-stepTitle .n {
color: var(--green);
margin-right: 8px;
}
.elvora-s4-desc {
margin: 0;
font-family: var(--fontB);
font-size: 14.5px;
line-height: 1.65;
color: var(--muted);
max-width: 46ch;
}
@media (hover:hover) {
.elvora-s4-card:hover .elvora-s4-visual {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
transition: transform .18s ease, box-shadow .18s ease;
}
}
@media (prefers-reduced-motion: reduce) {
.elvora-s4-card:hover .elvora-s4-visual {
transform: none;
box-shadow: none;
}
}
.elvora-s9-packs {
--bg: rgba(250, 250, 250, 0.5);
/* Same as s7 */
--text: #2F2F2F;
--muted: #6A6A6A;
--green: #1F4D2B;
--price: #1F4D2B;
--card-bg: #FFFFFF;
--border: #E5E5E5;
--font: 'Inter', sans-serif;
--fontH: 'Sora', sans-serif;
background: var(--bg);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
}
/* Reusing classes from s7 where possible would be efficient,
but for isolation we copy the necessary layout styles
or just reuse the classes if they were global.
Since s7 styles were scoped, we duplicate for safety. */
.elvora-s9-head {
text-align: center;
margin-bottom: clamp(30px, 5vw, 50px);
padding: 0 20px;
}
.elvora-s9-head h2 {
font-family: var(--fontH);
font-size: clamp(28px, 4vw, 42px);
color: var(--text);
margin: 0 0 10px;
font-weight: 700;
}
.elvora-s9-head p {
font-family: var(--font);
color: var(--muted);
font-size: 15px;
margin: 0;
}
.elvora-s9-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 40px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Reuse card styles by copying logic */
.elvora-s9-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.elvora-s9-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.elvora-s9-img-wrap {
background: #F4F4F4;
border-radius: 12px;
padding-bottom: 100%;
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.elvora-s9-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
}
.elvora-s9-add {
position: absolute;
bottom: 12px;
right: 12px;
width: 40px;
height: 40px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
color: var(--green);
transition: transform 0.2s ease, background 0.2s ease;
}
.elvora-s9-card:hover .elvora-s9-add {
transform: scale(1.1);
background: var(--green);
color: #FFFFFF;
}
.elvora-s9-add svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
}
.elvora-s9-info {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.elvora-s9-cat {
font-family: var(--font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-weight: 600;
}
.elvora-s9-title {
font-family: var(--fontH);
font-size: 16px;
color: var(--text);
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.elvora-s9-price {
font-family: var(--font);
font-size: 16px;
color: var(--price);
font-weight: 700;
margin-top: auto;
padding-top: 10px;
}
.elvora-s9-foot {
text-align: center;
margin-top: 50px;
}
/* Reuse btn style */
.elvora-s9-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 99px;
color: var(--text);
font-family: var(--font);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.elvora-s9-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: var(--green);
color: var(--green);
}
@media (max-width: 1024px) {
.elvora-s9-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.elvora-s9-grid {
display: flex;
overflow-x: auto;
gap: 16px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.elvora-s9-card {
min-width: 260px;
scroll-snap-align: center;
}
.elvora-s9-head h2 {
font-size: 28px;
}
}
.elvora-s-trust {
--bg-trust: #FFFFFF;
/* White background for contrast */
--text-main: #2F2F2F;
--text-muted: #6A6A6A;
--green-primary: #1F4D2B;
--icon-bg: #F2F7F4;
/* Soft Green for icon circle */
--font-body: 'Inter', sans-serif;
--font-head: 'Sora', sans-serif;
background-color: var(--bg-trust);
color: var(--text-main);
width: 100%;
padding: clamp(50px, 6vw, 80px) 24px;
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;
}
.elvora-s-trust-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
text-align: center;
}
.elvora-s-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 20px;
border-radius: 16px;
transition: transform 0.3s ease;
}
.elvora-s-trust-item:hover {
transform: translateY(-5px);
}
.elvora-s-trust-icon {
width: 64px;
height: 64px;
background: var(--icon-bg);
color: var(--green-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.elvora-s-trust-icon svg {
width: 28px;
height: 28px;
stroke-width: 1.5;
}
.elvora-s-trust-content h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 17px;
color: var(--text-main);
margin: 0 0 8px;
}
.elvora-s-trust-content p {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
max-width: 280px;
margin-inline: auto;
}
@media (max-width: 768px) {
.elvora-s-trust-container {
grid-template-columns: 1fr;
gap: 30px;
}
.elvora-s-trust-item {
flex-direction: row;
text-align: left;
padding: 10px;
gap: 20px;
}
.elvora-s-trust-content p {
margin-inline: 0;
}
}
.elvora-s10-products {
--bg: rgba(250, 250, 250, 0.5);
/* Same as s7/s9 */
--text: #2F2F2F;
--muted: #6A6A6A;
--green: #1F4D2B;
--price: #1F4D2B;
--card-bg: #FFFFFF;
--border: #E5E5E5;
--font: 'Inter', sans-serif;
--fontH: 'Sora', sans-serif;
background: var(--bg);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
}
.elvora-s10-head {
text-align: center;
margin-bottom: clamp(30px, 5vw, 50px);
padding: 0 20px;
}
.elvora-s10-head h2 {
font-family: var(--fontH);
font-size: clamp(28px, 4vw, 42px);
color: var(--text);
margin: 0 0 10px;
font-weight: 700;
}
.elvora-s10-head p {
font-family: var(--font);
color: var(--muted);
font-size: 15px;
margin: 0;
}
.elvora-s10-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 40px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Reuse card styles by copying logic */
.elvora-s10-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.elvora-s10-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.elvora-s10-img-wrap {
background: #F4F4F4;
border-radius: 12px;
padding-bottom: 100%;
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.elvora-s10-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
}
.elvora-s10-add {
position: absolute;
bottom: 12px;
right: 12px;
width: 40px;
height: 40px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
color: var(--green);
transition: transform 0.2s ease, background 0.2s ease;
}
.elvora-s10-card:hover .elvora-s10-add {
transform: scale(1.1);
background: var(--green);
color: #FFFFFF;
}
.elvora-s10-add svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
}
.elvora-s10-info {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.elvora-s10-cat {
font-family: var(--font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-weight: 600;
}
.elvora-s10-title {
font-family: var(--fontH);
font-size: 16px;
color: var(--text);
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.elvora-s10-price {
font-family: var(--font);
font-size: 16px;
color: var(--price);
font-weight: 700;
margin-top: auto;
padding-top: 10px;
}
.elvora-s10-foot {
text-align: center;
margin-top: 50px;
}
/* Reuse btn style */
.elvora-s10-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 99px;
color: var(--text);
font-family: var(--font);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.elvora-s10-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: var(--green);
color: var(--green);
}
@media (max-width: 1024px) {
.elvora-s10-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.elvora-s10-grid {
display: flex;
overflow-x: auto;
gap: 16px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.elvora-s10-card {
min-width: 260px;
scroll-snap-align: center;
}
.elvora-s10-head h2 {
font-size: 28px;
}
}
/* Scoped Variables for Section 10/11 */
.elvora-s10-faq {
--bg-secondary: #F3F5F4;
--text-main: #3A3A3A;
--text-muted: #6F6F6F;
--green-primary: #1F4D2B;
--border-soft: #E2E6E3;
--font-heading: 'Sora', sans-serif;
--font-body: 'Inter', sans-serif;
background-color: var(--bg-secondary);
color: var(--text-main);
width: 100%;
padding: clamp(60px, 8vw, 100px) 24px;
}
.elvora-s10-container {
max-width: 800px;
margin: 0 auto;
}
.elvora-s10-header {
text-align: center;
margin-bottom: clamp(32px, 5vw, 48px);
}
.elvora-s10-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: clamp(24px, 4vw, 32px);
margin: 0;
color: var(--text-main);
}
/* Accordion Items */
.elvora-s10-details {
border-bottom: 1px solid var(--border-soft);
margin-bottom: 0;
padding: 0;
}
.elvora-s10-details:first-of-type {
border-top: 1px solid var(--border-soft);
}
.elvora-s10-summary {
list-style: none;
/* Hide default marker */
cursor: pointer;
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
outline: none;
}
/* Remove default marker for Webkit */
.elvora-s10-summary::-webkit-details-marker {
display: none;
}
.elvora-s10-q {
font-family: var(--font-body);
font-size: clamp(16px, 2.5vw, 18px);
font-weight: 500;
color: var(--text-main);
margin: 0;
text-align: left;
padding-right: 16px;
}
/* Animated Icon (CSS only) */
.elvora-s10-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
position: relative;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.elvora-s10-icon::before,
.elvora-s10-icon::after {
content: '';
position: absolute;
background-color: var(--green-primary);
border-radius: 2px;
/* Center alignment */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Horizontal bar */
.elvora-s10-icon::before {
width: 14px;
height: 2px;
}
/* Vertical bar */
.elvora-s10-icon::after {
width: 2px;
height: 14px;
transition: transform 0.3s ease;
}
/* Open State Styling */
.elvora-s10-details[open] .elvora-s10-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.elvora-s10-details[open] .elvora-s10-icon {
transform: rotate(180deg);
/* Optional overall rotation */
}
.elvora-s10-content {
padding-bottom: 24px;
padding-top: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
text-align: left;
animation: elvora-fade 0.3s ease-out;
}
@keyframes elvora-fade {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scoped Variables for Section 11/12 */
.elvora-s11-cta {
--green-primary: #1F4D2B;
--white-pure: #FFFFFF;
--white-soft: #FAFAFA;
--text-main: #1F4D2B;
/* Dark Text for Light Top */
--text-muted: #4A4A4A;
--font-heading: 'Sora', sans-serif;
--font-body: 'Inter', sans-serif;
/* Vertical Gradient: Light for 80%, then subtle fade to Green at the very bottom */
/* Starts well below the button */
background: linear-gradient(180deg, #F3F5F4 0%, #F3F5F4 80%, #1F4D2B 100%);
color: var(--text-main);
width: 100%;
padding: clamp(80px, 12vw, 120px) 24px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
margin-bottom: -1px;
/* Ensure seamless merge with footer */
z-index: 2;
/* Sit above footer slightly if needed, or footer sits above */
}
}
.elvora-s11-container {
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
z-index: 1;
}
.elvora-s11-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(28px, 5vw, 42px);
margin: 0;
color: var(--green-primary);
line-height: 1.15;
letter-spacing: -0.02em;
}
.elvora-s11-desc {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 16px;
max-width: 520px;
}
/* Inverted Button Style */
.elvora-s11-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 42px;
background-color: var(--green-primary);
/* Solid Green */
color: var(--white-pure);
/* White Text */
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
border-radius: 99px;
/* Pill shape */
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 24px rgba(31, 77, 43, 0.15);
/* Soft green shadow */
}
.elvora-s11-btn:hover,
.elvora-s11-btn:focus {
background-color: #163a20;
/* Darker Green on Hover */
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(31, 77, 43, 0.25);
}
/* Scoped Variables for Footer */
.nyrale-footer {
--bg-footer: #1F4D2B;
/* Brand Deep Green */
--text-footer: #FFFFFF;
--text-muted: #A3C6B0;
/* Soft green-white */
--border-footer: rgba(255, 255, 255, 0.1);
background-color: var(--bg-footer);
color: var(--text-footer);
padding: 80px 0 24px;
font-family: 'Inter', sans-serif;
margin-top: 0;
/* Ensure no gap after CTA */
}
.nyrale-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}
.nyrale-footer-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.nyrale-footer-brand p {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
max-width: 300px;
}
.nyrale-footer-title {
font-family: 'Sora', sans-serif;
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
color: var(--text-footer);
}
.nyrale-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.nyrale-footer-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 15px;
transition: color 0.2s ease;
}
.nyrale-footer-links a:hover {
color: var(--text-footer);
}
.nyrale-footer-newsletter p {
font-size: 15px;
line-height: 1.5;
color: var(--text-muted);
margin: 0 0 16px;
}
/* Fake Forminator Style */
.nyrale-newsletter-form {
display: flex;
gap: 8px;
}
.nyrale-newsletter-input {
flex: 1;
padding: 12px 16px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-family: inherit;
}
.nyrale-newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.nyrale-newsletter-btn {
padding: 12px 20px;
border-radius: 6px;
border: none;
background: #FFFFFF;
color: var(--bg-footer);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.nyrale-footer-bottom {
border-top: 1px solid var(--border-footer);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text-muted);
flex-wrap: wrap;
gap: 16px;
}
.nyrale-legal a {
color: var(--text-muted);
text-decoration: none;
}
.nyrale-legal a:hover {
color: #fff;
}
@media (max-width: 1024px) {
.nyrale-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 600px) {
.nyrale-footer-grid {
grid-template-columns: 1fr;
}
.nyrale-footer-bottom {
flex-direction: column;
text-align: center;
}
}