/**
* Homepage CSS — full bundle including sm-zone home overrides + home sections
* (hm-collection, hm-coll-card, hm-safease-feature, hm-pcod-strip, pregnancy combo,
* philosophy, hero split, faq).
*
* Ported verbatim from test.html blocks 1+2.
* Loads ONLY on front page (is_front_page).
*/
/* ===== TEST.HTML BLOCK 1 — sm-zone + shared home styles ===== */
.sm-zone {
--primary-color: #1B2A5B;
--secondary-color: #F5EEE4;
--accent-color: #D4A84B;
--text-color: #5A5A5A;
--white-color: #FFFFFF;
--divider-color: rgba(27, 42, 91, 0.1);
--default-font: 'Plus Jakarta Sans', sans-serif;
--accent-font: 'Lora', serif;
}
/* Scroll reveal — hidden default, reveal via JS (IntersectionObserver) */
.sm-zone .wow,
.sm-zone .text-anime-style-2,
.sm-zone [class*="fadeIn"],
.sm-zone .image-anime {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.sm-zone .wow.is-visible,
.sm-zone .text-anime-style-2.is-visible,
.sm-zone [class*="fadeIn"].is-visible,
.sm-zone .image-anime.is-visible {
opacity: 1;
transform: translateY(0);
}
.sm-zone [data-wow-delay="0.2s"] { transition-delay: 0.1s; }
.sm-zone [data-wow-delay="0.4s"] { transition-delay: 0.2s; }
.sm-zone [data-wow-delay="0.6s"] { transition-delay: 0.3s; }
.sm-zone [data-wow-delay="0.8s"] { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
.sm-zone .wow,
.sm-zone .text-anime-style-2,
.sm-zone [class*="fadeIn"],
.sm-zone .image-anime {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Hero + trust-strip + philosophy + triband reveal */
.reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Hard reset typography inside sm-zone — matches sellsmart expectations exactly */
.sm-zone {
font-family: var(--default-font);
font-size: 16px;
line-height: 1em;
color: #606060;
}
.sm-zone h1, .sm-zone h2, .sm-zone h3, .sm-zone h4, .sm-zone h5, .sm-zone h6 {
font-family: var(--default-font);
font-weight: 600; /* was 700 — sellsmart uses 600 */
line-height: 1.2em;
color: var(--primary-color);
margin: 0;
}
.sm-zone p,
.sm-zone li {
font-size: 16px;
line-height: 1.7em;
margin-bottom: 1.57em;
color: #161616;
}
.sm-zone li { margin-bottom: 8px; }
.sm-zone a { text-decoration: none; }
.sm-zone ul, .sm-zone ol { list-style: none; padding: 0; margin: 0; }
.sm-zone * { box-sizing: border-box; }
/* Section title — EXACT sellsmart spec */
.sm-zone .section-title { margin-bottom: 40px; }
.sm-zone .section-title h3 {
position: relative;
display: inline-block;
font-family: var(--accent-font);
font-style: italic;
font-size: 17px;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
color: var(--primary-color);
padding-left: 18px;
margin-bottom: 15px;
}
.sm-zone .section-title h3::before {
content: '';
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
background: var(--accent-color); /* gold dot */
border-radius: 50%;
width: 8px; height: 8px;
}
.sm-zone .section-title h2 {
font-size: 44px;
font-weight: 600;
line-height: 1.1em; /* was 1.15 — matches theme tight */
letter-spacing: -0.015em; /* tighter for post-anim look */
color: var(--primary-color);
margin: 0;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
}
/* H2 span italic — inherits parent color for unified tone */
.sm-zone .section-title h2 span {
font-family: var(--accent-font);
font-style: italic;
font-weight: 400;
color: inherit;
letter-spacing: -0.01em;
}
.sm-zone .section-title p {
margin-top: 20px;
margin-bottom: 0;
line-height: 1.7em;
font-size: 15px;
}
@media (max-width: 767px) {
.sm-zone .section-title h2 { font-size: 32px; }
}
/* About — tuned to match 2.png exactly */
.sm-zone .about-us { background: #FAF6F1; }
.sm-zone .about-us .section-title h2 { font-size: 38px; line-height: 1.1em; letter-spacing: -0.015em; }
/* Shrink bottle image, align height to content */
.sm-zone .about-us .about-images {
max-width: 420px;
margin-inline: auto;
}
.sm-zone .about-us .about-images figure img {
max-width: 100%;
height: auto;
}
@media (min-width: 1024px) {
.sm-zone .about-us .about-images { max-width: 460px; }
}
/* Two organic cards — side-by-side grid */
.sm-zone .about-us .about-body-item-btn {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 22px;
width: 100%;
}
@media (max-width: 575px) {
.sm-zone .about-us .about-body-item-btn { grid-template-columns: 1fr; }
}
.sm-zone .about-us .about-organic-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: #d4d4d457;
border-radius: 14px;
border: 0;
height: 100%;
transition: background 0.3s, transform 0.3s;
}
.sm-zone .about-us .about-organic-item:hover {
background: #d4d4d480;
transform: translateY(-2px);
}
.sm-zone .about-us .about-body-item-btn { align-items: stretch; }
.sm-zone .about-us .about-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.sm-zone .about-us .about-col .about-organic-item { flex: 1; }
.sm-zone .about-us .about-col .sm-shop-link { align-self: flex-start; margin-left: 10px; }
.sm-zone .about-us .about-organic-item .icon-box {
width: 44px; height: 44px;
flex-shrink: 0;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.sm-zone .about-us .about-organic-item .icon-box img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.sm-zone .about-us .about-organic-content h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 3px;
line-height: 1.25em;
color: var(--primary-color);
}
.sm-zone .about-us .about-organic-content p {
font-size: 12.5px;
line-height: 1.5em;
color: #161616;
margin: 0;
}
.sm-zone .about-us .section-title p { font-size: 15px; line-height: 1.7em; margin-top: 16px; max-width: 46ch; }
.sm-zone .about-us-list ul li { font-size: 14px; line-height: 1.6em; margin-bottom: 8px; }
.sm-zone .about-us-list { margin-bottom: 28px; }
/* Shop links — minimal underlined text style (matches tri-panel__link) */
.sm-zone .sm-shop-links {
display: flex;
gap: clamp(1.5rem, 3vw, 2.5rem);
flex-wrap: wrap;
align-items: center;
margin-top: 4px;
}
.sm-zone .sm-shop-link {
display: inline-block;
padding-bottom: 4px;
border-bottom: 1.5px solid;
font-family: var(--default-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: letter-spacing 0.3s, color 0.3s;
}
.sm-zone .sm-shop-link:hover { letter-spacing: 0.2em; }
.sm-zone .sm-shop-link--safease { color: #3B1053; }
.sm-zone .sm-shop-link--limark { color: var(--primary-color); }
/* Legacy chip styles (kept but not used on about) */
.sm-zone .sm-shop-chips { display: flex; gap: 12px; flex-wrap: nowrap; align-items: center; }
.sm-zone .sm-shop-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 22px 8px 8px;
border-radius: 999px;
font-family: var(--default-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
min-height: 46px;
transition: transform 0.25s, box-shadow 0.25s;
text-decoration: none;
}
.sm-zone .sm-shop-chip--safease { background: #3B1053; color: #fff; box-shadow: 0 8px 20px rgba(59, 16, 83, 0.25); }
.sm-zone .sm-shop-chip--safease:hover { background: #4A2366; transform: translateY(-2px); }
.sm-zone .sm-shop-chip--limark { background: var(--accent-color); color: var(--primary-color); box-shadow: 0 8px 20px rgba(212, 168, 75, 0.3); }
.sm-zone .sm-shop-chip--limark:hover { background: #E8C872; transform: translateY(-2px); }
.sm-zone .sm-shop-chip__circle {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
padding: 3px;
}
.sm-zone .sm-shop-chip--safease .sm-shop-chip__circle { background: #F8DC4A; }
.sm-zone .sm-shop-chip--limark .sm-shop-chip__circle { background: #fff; }
.sm-zone .sm-shop-chip__circle img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sm-zone .sm-shop-chip::after { content: '→'; font-size: 14px; margin-left: 2px; transition: transform 0.25s; }
.sm-zone .sm-shop-chip:hover::after { transform: translateX(3px); }
/* Limark icon in trust-card */
.sm-zone .about-body-item img.sm-limark-mini { width: 44px; height: 44px; object-fit: contain; max-width: none; }
.sm-zone .about-body-item h3 { font-size: 15px; line-height: 1.35em; }
/* Card heading sizes across sections — match 2.png rhythm */
.sm-zone .why-choose-item-content h3,
.sm-zone .what-we-item h3,
.sm-zone .key-points-item-content h3,
.sm-zone .benefit-item-content h3,
.sm-zone .benefit-list-item-content h3,
.sm-zone .footer-links h3 { font-size: 18px; font-weight: 600; line-height: 1.3em; margin-bottom: 8px; letter-spacing: -0.005em; }
.sm-zone .why-choose-item-content p,
.sm-zone .what-we-item p,
.sm-zone .key-points-item-content p,
.sm-zone .benefit-item-content p,
.sm-zone .benefit-list-item-content p { font-size: 14px; line-height: 1.6em; margin: 0; }
.sm-zone .product-content h3 { font-size: 17px; line-height: 1.3em; margin-bottom: 6px; }
.sm-zone .product-content p { font-size: 17px; font-weight: 700; color: var(--accent-color); margin: 0; line-height: 1.2em; }
.sm-zone .about-organic-content h3 { font-size: 16px; margin-bottom: 4px; }
.sm-zone .about-organic-content p { font-size: 13px; line-height: 1.55em; margin: 0; }
/* Brand CTA button override — deep Safease purple replacing gold */
.sm-zone .btn-default,
.sm-zone a.btn-default {
background: #3B1053;
color: #fff;
border-color: #3B1053;
padding: 14px 30px;
font-weight: 600;
letter-spacing: 0.1em;
}
.sm-zone .btn-default:hover,
.sm-zone a.btn-default:hover {
background: #4A2366;
border-color: #4A2366;
color: #F8DC4A;
}
/* Explore-chip (hero style, ported into sm-zone) */
.sm-zone .sm-explore-chip {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 22px 8px 10px;
border-radius: 999px;
backdrop-filter: blur(12px);
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
}
.sm-zone .sm-explore-chip:hover { transform: translateY(-2px); }
.sm-zone .sm-explore-chip--safease {
background: rgba(59, 16, 83, 0.92);
color: #fff;
border: 1px solid rgba(248, 220, 74, 0.35);
box-shadow: 0 10px 24px rgba(59, 16, 83, 0.28);
}
.sm-zone .sm-explore-chip--safease:hover { box-shadow: 0 14px 30px rgba(59, 16, 83, 0.38); }
.sm-zone .sm-explore-chip__circle {
width: 34px; height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #F8DC4A;
color: #3B1053;
}
.sm-zone .sm-explore-chip__circle svg { width: 16px; height: 16px; }
.sm-zone .sm-explore-chip__text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.1;
}
.sm-zone .sm-explore-chip__text span:first-child {
font-family: var(--accent-font);
font-weight: 400;
font-style: italic;
font-size: 11px;
letter-spacing: 0;
text-transform: none;
opacity: 0.85;
}
.sm-zone .sm-explore-chip__text span:last-child {
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
gap: 6px;
align-items: center;
}
.sm-zone .sm-explore-chip__text span:last-child::after {
content: '→';
font-size: 13px;
transition: transform 0.3s;
}
.sm-zone .sm-explore-chip:hover .sm-explore-chip__text span:last-child::after { transform: translateX(3px); }
/* Limark ring icon — replaces sellsmart icon-box in why-choose */
.sm-zone .limark-ring-icon {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
}
.sm-zone .limark-ring-icon--lg { width: 92px; height: 92px; }
.sm-zone .limark-ring-icon .limark-ring-outer,
.sm-zone .limark-ring-icon .limark-ring-inner {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.sm-zone .limark-ring-icon .limark-ring-outer {
inset: 0;
border: 1.5px dashed var(--accent-color);
animation: limarkRingSpin 16s linear infinite;
}
.sm-zone .limark-ring-icon .limark-ring-inner {
inset: 8px;
border: 1px solid rgba(212, 168, 75, 0.35);
animation: limarkRingSpin 22s linear infinite reverse;
}
.sm-zone .limark-ring-icon img {
position: relative;
z-index: 2;
width: 60%;
height: 60%;
object-fit: contain;
transition: transform 0.5s;
}
.sm-zone .limark-ring-icon:hover img { transform: scale(1.08); }
@keyframes limarkRingSpin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
/* Why-choose icons — limark navy bg + gold icon */
.sm-zone .why-choose-item-box .icon-box {
background: var(--primary-color) !important;
width: 68px;
height: 68px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px;
flex-shrink: 0;
transition: background 0.3s;
}
.sm-zone .why-choose-item-box .icon-box img {
filter: brightness(0) saturate(100%) invert(72%) sepia(42%) saturate(600%) hue-rotate(12deg) brightness(92%);
width: 100%;
height: 100%;
object-fit: contain;
}
.sm-zone .why-choose-item:hover .icon-box { background: #0F1D42 !important; }
/* Limark text-ring icon — symbol + rotating gold text circle */
.sm-zone .limark-text-ring {
position: relative;
width: 110px; height: 110px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
}
.sm-zone .limark-text-ring--lg { width: 140px; height: 140px; }
.sm-zone .limark-text-ring__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: limarkRingSpin 22s linear infinite;
}
.sm-zone .limark-text-ring__svg text {
font-family: var(--default-font);
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
fill: var(--primary-color); /* navy, not gold */
text-transform: uppercase;
}
.sm-zone .limark-text-ring img {
position: relative;
z-index: 2;
width: 52%;
height: 52%;
object-fit: contain;
}
.sm-zone .dark-section .limark-text-ring__svg text { fill: #fff; }
/* What We Do — HIDDEN for now */
.sm-zone .what-we-do.dark-section { display: none !important; }
/* What We Do — classic ayurvedic forest green (sellsmart original) */
.sm-zone .dark-section { background: #0A2C0F; }
.sm-zone .dark-section .section-title h2,
.sm-zone .dark-section .section-title h3,
.sm-zone .dark-section .what-we-item h3 { color: #fff; }
.sm-zone .dark-section p,
.sm-zone .dark-section .what-we-item p { color: rgba(245, 238, 228, 0.78); }
.sm-zone .dark-section .section-title h3::before { background: #D4A84B; }
.sm-zone .dark-section .section-title h2 span { color: #E8C872; }
/* What-we-circle with Limark ring — proper size */
.sm-zone .what-we-circle.limark-ring-icon { width: 120px; height: 120px; }
.sm-zone .what-we-circle.limark-ring-icon .limark-ring-outer { border-color: #D4A84B; }
.sm-zone .what-we-circle.limark-ring-icon .limark-ring-inner { border-color: rgba(212, 168, 75, 0.45); }
/* Footer — editorial compact redesign */
.sm-zone .main-footer {
position: relative;
background: #14204A;
color: rgba(255,255,255,0.78);
padding: 72px 0 0;
overflow: hidden;
}
.sm-zone .main-footer::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 72px; height: 1px;
background: var(--accent-color);
opacity: 0.9;
}
.sm-zone .footer-manifesto {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
padding: 0 20px;
}
.sm-zone .footer-manifesto .fm-eyebrow {
font-family: var(--accent-font);
font-style: italic;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: capitalize;
color: var(--accent-color);
display: block;
margin-bottom: 18px;
}
.sm-zone .footer-manifesto h2 {
font-family: var(--accent-font);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 3.4vw, 34px);
line-height: 1.2em;
color: #fff;
letter-spacing: -0.01em;
margin: 0;
}
.sm-zone .footer-manifesto h2 span { color: var(--accent-color); }
.sm-zone .footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sm-zone .footer-grid .fg-col h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-color);
margin: 0 0 18px;
}
.sm-zone .footer-grid .fg-brand img {
max-height: 60px; width: auto;
margin-bottom: 18px;
}
.sm-zone .footer-grid .fg-brand p {
font-size: 14px;
line-height: 1.7em;
color: rgba(255,255,255,0.62);
margin: 0 0 20px;
max-width: 320px;
}
.sm-zone .footer-grid .fg-brand .fg-signoff {
font-family: var(--accent-font);
font-style: italic;
font-size: 14px;
color: var(--accent-color);
letter-spacing: 0.01em;
}
.sm-zone .footer-grid ul { margin: 0; padding: 0; }
.sm-zone .footer-grid ul li {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.5em;
}
.sm-zone .footer-grid ul li a {
color: rgba(255,255,255,0.75);
transition: color 0.2s, padding-left 0.2s;
display: inline-block;
position: relative;
}
.sm-zone .footer-grid ul li a:hover {
color: var(--accent-color);
padding-left: 6px;
}
.sm-zone .footer-grid .fg-contact li {
margin-bottom: 14px;
}
.sm-zone .footer-grid .fg-contact .fc-label {
display: block;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 3px;
}
.sm-zone .footer-grid .fg-contact .fc-value {
font-size: 15px;
color: #fff;
transition: color 0.2s;
}
.sm-zone .footer-grid .fg-contact .fc-value:hover { color: var(--accent-color); }
.sm-zone .fg-socials {
display: flex;
gap: 8px;
margin-top: 22px;
}
.sm-zone .fg-socials a {
width: 36px; height: 36px;
display: inline-flex;
align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50%;
color: rgba(255,255,255,0.75);
font-size: 13px;
transition: all 0.25s ease;
}
.sm-zone .fg-socials a:hover {
border-color: var(--accent-color);
color: var(--accent-color);
transform: translateY(-2px);
}
.sm-zone .sm-footer-bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 24px 0 28px;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.5);
}
.sm-zone .sm-footer-bottom > p { margin: 0; color: rgba(255,255,255,0.5); }
.sm-zone .sm-footer-bottom .sm-legal-links {
justify-self: end;
display: flex; gap: 22px;
list-style: none; padding: 0; margin: 0;
}
.sm-zone .sm-footer-bottom .sm-legal-links li { margin: 0; }
.sm-zone .sm-footer-bottom .sm-legal-links a {
color: rgba(255,255,255,0.5);
transition: color 0.2s;
}
.sm-zone .sm-footer-bottom .sm-legal-links a:hover { color: var(--accent-color); }
.sm-zone .sm-footer-tagline {
justify-self: center;
font-family: var(--accent-font);
font-style: italic;
font-size: 13px;
color: var(--accent-color);
letter-spacing: 0.01em;
white-space: nowrap;
}
@media (max-width: 991px) {
.sm-zone .footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.sm-zone .footer-grid .fg-brand { grid-column: 1 / -1; }
}
/* Footer toggle (mobile only) */
.sm-zone .footer-toggle { display: none; }
@media (max-width: 767px) {
.sm-zone .main-footer { padding-top: 44px; }
.sm-zone .footer-manifesto { margin-bottom: 28px; }
.sm-zone .footer-manifesto h2 { font-size: clamp(22px, 5.5vw, 28px); }
.sm-zone .footer-grid {
display: flex !important;
flex-direction: column;
gap: 22px;
padding-bottom: 22px;
}
.sm-zone .footer-grid .fg-brand {
order: 1;
text-align: center;
}
.sm-zone .footer-grid .fg-brand img { margin: 0 auto 16px; }
.sm-zone .footer-grid .fg-brand p { margin-left: auto; margin-right: auto; }
.sm-zone .footer-grid .fg-contact {
order: 2;
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sm-zone .footer-grid .fg-contact h4 { margin-bottom: 14px; }
.sm-zone .footer-grid .fg-contact ul {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 12px 24px;
}
.sm-zone .footer-grid .fg-contact li { margin: 0; }
.sm-zone .footer-grid .fg-contact .fc-value { font-size: 14px; }
.sm-zone .fg-socials { justify-content: center; margin-top: 18px; }
.sm-zone .footer-toggle {
order: 3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: auto;
align-self: center;
padding: 10px 22px;
background: transparent;
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
font-family: var(--default-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
}
.sm-zone .footer-toggle::after {
content: '';
width: 8px; height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.3s;
margin-top: -3px;
}
.sm-zone .footer-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.sm-zone .footer-grid .fg-col--links {
order: 4;
display: none;
text-align: center;
padding-top: 8px;
}
.sm-zone .footer-grid .fg-col--links.is-open { display: block; }
.sm-zone .footer-grid .fg-col--links h4 { margin-bottom: 10px; }
.sm-zone .footer-grid .fg-col--links ul { display: flex; flex-direction: column; gap: 8px; }
.sm-zone .sm-footer-bottom {
grid-template-columns: 1fr;
text-align: center;
gap: 10px;
padding: 18px 0;
}
.sm-zone .sm-footer-bottom .sm-legal-links {
justify-self: center;
flex-wrap: wrap; justify-content: center;
gap: 10px 16px;
}
}
.sm-zone .sm-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.sm-zone .sm-nav-list a {
color: #fff;
font-size: 15px;
font-weight: 500;
transition: color 0.2s;
}
.sm-zone .sm-nav-list a:hover { color: var(--accent-color); }
.sm-zone .sm-legal-links {
display: inline-flex;
gap: 22px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.sm-zone .sm-legal-links li { margin: 0; }
.sm-zone .sm-legal-links a {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
transition: color 0.2s;
}
.sm-zone .sm-legal-links a:hover { color: var(--accent-color); }
/* FAQ — soft grey bg + Limark-themed accordion */
.sm-zone .our-faqs { background: #F5F5F5; }
/* Pregnancy combo image — soft ground shadow */
.sm-zone .our-benefits .bemefit-img {
position: relative;
z-index: 1;
}
.sm-zone .our-benefits .bemefit-img::after {
content: '';
position: absolute;
bottom: 8px; left: 50%;
transform: translateX(-50%);
width: 66%; height: 22px;
background: radial-gradient(ellipse at center, rgba(27,42,91,0.28) 0%, rgba(27,42,91,0.12) 40%, transparent 75%);
filter: blur(7px);
pointer-events: none;
z-index: -1;
}
.sm-zone .our-benefits .bemefit-img figure { margin: 0; position: relative; z-index: 1; }
.sm-zone .about-footer-content { text-align: left; }
.sm-zone .about-footer { text-align: left; }
.sm-zone .our-faqs .accordion-item {
background: #fff !important;
border: 1px solid rgba(27, 42, 91, 0.08) !important;
border-radius: 14px !important;
margin-bottom: 12px;
overflow: hidden;
transition: border-color 0.3s, box-shadow 0.3s;
}
.sm-zone .our-faqs .accordion-item:hover {
border-color: rgba(212, 168, 75, 0.35) !important;
}
.sm-zone .our-faqs .accordion-button {
background: #fff !important;
color: var(--primary-color) !important;
font-size: 16px;
font-weight: 600;
padding: 18px 22px;
border: 0 !important;
box-shadow: none !important;
}
.sm-zone .our-faqs .accordion-button:not(.collapsed) {
background: var(--primary-color) !important;
color: #fff !important;
}
.sm-zone .our-faqs .accordion-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.sm-zone .our-faqs .accordion-body {
background: #FBF8F3;
color: #161616;
padding: 18px 22px;
font-size: 14.5px;
line-height: 1.7em;
border-top: 1px solid rgba(212, 168, 75, 0.18);
}
/* Override Bootstrap display:none — use max-height for smooth transitions */
.sm-zone .our-faqs .accordion-collapse {
display: block !important;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sm-zone .our-faqs .accordion-collapse.show {
max-height: 800px;
}
.sm-zone .our-faqs .accordion-button { cursor: pointer; }
.sm-zone .our-faqs .accordion-button::after,
.sm-zone .our-faqs .faq-accordion .accordion-item .accordion-button::after,
.sm-zone .our-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after {
content: '' !important;
font-family: inherit !important;
font-size: 0 !important;
position: static !important;
transform: none !important;
width: 14px !important;
height: 14px !important;
margin-left: auto !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
transition: transform 0.3s !important;
color: transparent !important;
}
.sm-zone .our-faqs .accordion-button:not(.collapsed)::after,
.sm-zone .our-faqs .faq-accordion .accordion-button:not(.collapsed)::after {
transform: rotate(180deg) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
filter: none !important;
}
/* ============ PHILOSOPHY / FOUNDER SECTION ============ */
.sm-zone .philosophy {
background:
radial-gradient(ellipse 60% 80% at 18% 10%, rgba(212,168,75,0.10) 0%, transparent 55%),
radial-gradient(ellipse 70% 80% at 88% 92%, rgba(59, 16, 83, 0.07) 0%, transparent 55%),
linear-gradient(168deg, #FBF6EC 0%, #F5EEE4 45%, #EDE2CF 100%);
padding: clamp(48px, 6vw, 80px) 0;
min-height: 90vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* Giant lotus watermark behind headline */
.sm-zone .philosophy::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -48%);
width: clamp(340px, 42vw, 620px);
height: clamp(340px, 42vw, 620px);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.09;
pointer-events: none;
z-index: 0;
}
/* Top + bottom hairlines */
.sm-zone .philosophy::after {
content: '';
position: absolute;
bottom: 44px;
left: 50%; transform: translateX(-50%);
width: 72px; height: 1px;
background: var(--accent-color);
opacity: 0.45;
}
.sm-zone .philosophy__inner {
max-width: 1080px;
width: 100%;
margin: 0 auto;
padding: 0 32px;
text-align: center;
position: relative;
z-index: 1;
}
.sm-zone .philosophy__crest {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 14px;
}
.sm-zone .philosophy__crest .crest-line {
width: 36px; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-color));
}
.sm-zone .philosophy__crest .crest-line + .crest-line {
background: linear-gradient(90deg, var(--accent-color), transparent);
}
.sm-zone .philosophy__crest svg {
width: 22px; height: 22px;
color: var(--accent-color);
}
.sm-zone .philosophy__eyebrow {
font-family: var(--accent-font);
font-style: italic;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--accent-color);
margin: 0 0 16px;
display: block;
}
.sm-zone .philosophy__head {
font-family: var(--accent-font);
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 4.6vw, 46px);
line-height: 1.14em;
letter-spacing: -0.018em;
color: var(--primary-color);
margin: 0 0 20px;
}
.sm-zone .philosophy__head span {
color: var(--accent-color);
position: relative;
display: inline-block;
}
.sm-zone .philosophy__head span::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--accent-color);
opacity: 0.3;
}
.sm-zone .philosophy__lead {
max-width: 620px;
margin: 0 auto 36px;
font-size: 15.5px;
line-height: 1.75em;
color: #3b3b3b;
}
/* Quote — compact editorial, no box, decorative gold glyphs flanking */
.sm-zone .philosophy__quote {
max-width: 720px;
margin: 0 auto 44px;
padding: 0 32px;
position: relative;
font-family: var(--accent-font);
font-style: italic;
font-size: clamp(16px, 1.75vw, 19px);
line-height: 1.6em;
color: var(--primary-color);
text-align: center;
border: 0;
background: transparent;
}
.sm-zone .philosophy__quote::before {
content: '\201C';
display: block;
font-family: var(--accent-font);
font-size: 54px;
line-height: 0.6;
color: var(--accent-color);
margin-bottom: 10px;
font-style: italic;
opacity: 0.85;
}
.sm-zone .philosophy__quote cite {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-style: normal;
font-family: var(--default-font);
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-color);
margin-top: 16px;
font-weight: 600;
}
.sm-zone .philosophy__quote cite::before,
.sm-zone .philosophy__quote cite::after {
content: '';
width: 18px; height: 1px;
background: var(--accent-color);
opacity: 0.5;
}
/* Pillars — with roman numerals + icons + hover lift */
.sm-zone .philosophy__pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: left;
}
.sm-zone .philosophy__pillar {
padding: 26px 22px 22px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(212, 168, 75, 0.18);
border-radius: 4px;
position: relative;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s ease,
border-color 0.45s ease,
background 0.45s ease;
overflow: hidden;
}
.sm-zone .philosophy__pillar::before {
content: attr(data-numeral);
position: absolute;
top: 10px; right: 18px;
font-family: var(--accent-font);
font-style: italic;
font-size: 34px;
font-weight: 400;
color: var(--accent-color);
opacity: 0.2;
line-height: 1;
transition: opacity 0.45s ease, transform 0.45s ease;
}
.sm-zone .philosophy__pillar:hover {
transform: translateY(-6px);
border-color: rgba(212, 168, 75, 0.5);
background: rgba(255,255,255,0.85);
box-shadow: 0 18px 42px -18px rgba(27, 42, 91, 0.22);
}
.sm-zone .philosophy__pillar:hover::before {
opacity: 0.35;
transform: translateY(-2px);
}
.sm-zone .philosophy__pillar .pillar-icon {
width: 38px; height: 38px;
display: inline-flex;
align-items: center; justify-content: center;
color: var(--accent-color);
margin-bottom: 14px;
border: 1px solid rgba(212,168,75,0.45);
border-radius: 50%;
background: rgba(255,255,255,0.6);
transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s ease;
}
.sm-zone .philosophy__pillar:hover .pillar-icon {
background: #FFFFFF;
border-color: var(--accent-color);
transform: rotate(-4deg) scale(1.04);
}
.sm-zone .philosophy__pillar .pillar-icon svg { width: 18px; height: 18px; }
.sm-zone .philosophy__pillar span.pillar-label {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-color);
font-weight: 600;
display: block;
margin-bottom: 8px;
}
.sm-zone .philosophy__pillar h3 {
font-family: var(--accent-font);
font-style: italic;
font-weight: 500;
font-size: 19px;
line-height: 1.25em;
color: var(--primary-color);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.sm-zone .philosophy__pillar p {
font-size: 13.5px;
line-height: 1.7em;
color: #3a3a3a;
margin: 0;
}
@media (max-width: 900px) {
/* Mobile — compact philosophy, no pillar cards */
.sm-zone .philosophy { padding: 48px 0 !important; min-height: auto !important; }
.sm-zone .philosophy__pillars { display: none !important; }
.sm-zone .philosophy__inner { max-width: 540px; }
.sm-zone .philosophy__head {
font-size: clamp(24px, 6vw, 32px) !important;
margin-bottom: 16px !important;
}
.sm-zone .philosophy__lead {
font-size: 14.5px !important;
line-height: 1.7em !important;
margin-bottom: 30px !important;
}
.sm-zone .philosophy__quote {
padding: 32px 20px 24px !important;
margin-bottom: 0 !important;
font-size: 15px !important;
line-height: 1.6em !important;
}
.sm-zone .philosophy__quote::before { font-size: 70px !important; top: -14px !important; left: 12px !important; }
.sm-zone .philosophy__quote cite { font-size: 10px !important; margin-top: 18px !important; }
.sm-zone .philosophy::before { width: 260px !important; height: 260px !important; opacity: 0.06 !important; }
.sm-zone .philosophy::after { display: none; }
.sm-zone .philosophy__crest svg { width: 18px !important; height: 18px !important; }
.sm-zone .philosophy__crest .crest-line { width: 28px !important; }
}
/* Benefits — compact cards, icon+title inline, navy icon, Limark theming */
.sm-zone .our-benefits { background: linear-gradient(180deg, #FBF8F3 0%, #F5EDE4 100%); }
.sm-zone .our-benefits .benefit-item,
.sm-zone .our-benefits .benefit-item-box:nth-child(odd) .benefit-item:nth-child(even),
.sm-zone .our-benefits .benefit-item-box:nth-child(even) .benefit-item:nth-child(odd) {
background: #EFE6D8 !important;
border: 1px solid rgba(212, 168, 75, 0.22) !important;
border-radius: 16px;
padding: 18px 20px !important;
transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.sm-zone .our-benefits .benefit-item:hover {
background: #E5D8C2 !important;
border-color: var(--accent-color) !important;
transform: translateY(-2px);
}
/* Icon + title side-by-side, description below */
.sm-zone .our-benefits .benefit-item {
display: grid !important;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 6px;
align-items: center;
}
.sm-zone .our-benefits .benefit-item .icon-box {
background: transparent !important;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.sm-zone .our-benefits .benefit-item-content {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.sm-zone .our-benefits .benefit-item-content p {
grid-column: 1 / 3;
grid-row: 2 / 3;
margin-top: 4px;
}
.sm-zone .our-benefits .benefit-item .icon-box img {
filter: brightness(0) saturate(100%) invert(13%) sepia(80%) saturate(1400%) hue-rotate(215deg) brightness(92%) contrast(95%);
width: 100%;
height: 100%;
object-fit: contain;
}
.sm-zone .our-benefits .benefit-item .icon-box svg,
.sm-zone .our-benefits .benefit-list-item .icon-box svg {
width: 100%;
height: 100%;
color: #D4A84B;
display: block;
}
.sm-zone .our-benefits .benefit-list-item .icon-box {
width: 42px; height: 42px;
display: inline-flex;
align-items: center; justify-content: center;
padding: 0;
background: transparent !important;
border-radius: 0;
flex-shrink: 0;
}
.sm-zone .our-benefits .benefit-item-content h3 {
font-size: 16px !important;
margin-bottom: 4px;
line-height: 1.3em;
}
.sm-zone .our-benefits .benefit-item-content p {
font-size: 13.5px;
line-height: 1.55em;
}
.sm-zone .our-benefits .benefits-list { display: none !important; }
/* Pregnancy combo — compact, fits 90vh */
.sm-zone .our-benefits { padding: clamp(40px, 5vw, 64px) 0 !important; }
.sm-zone .our-benefits .section-title { margin-bottom: 14px !important; }
.sm-zone .our-benefits .section-title h3 { margin-bottom: 8px !important; font-size: 14px !important; }
.sm-zone .our-benefits .section-title h2 { font-size: clamp(22px, 3.2vw, 32px) !important; line-height: 1.15em !important; }
.sm-zone .our-benefits .benefit-body { margin-bottom: 14px; }
.sm-zone .our-benefits .benefit-item { margin-bottom: 10px !important; padding: 10px 12px !important; }
.sm-zone .our-benefits .benefit-item-content h3 { font-size: 14.5px !important; margin-bottom: 2px !important; }
.sm-zone .our-benefits .benefit-item-content p { font-size: 12.5px !important; line-height: 1.5em !important; }
.sm-zone .our-benefits .benefit-image { padding-right: 10px; }
.sm-zone .our-benefits .bemefit-img figure img { max-height: 440px; object-fit: contain; width: auto; margin: 0 auto; display: block; }
.sm-zone .preg-cta-row {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
margin-top: 14px;
background: rgba(212, 168, 75, 0.1);
border: 1px solid rgba(212, 168, 75, 0.28);
border-radius: 8px;
}
.sm-zone .preg-cta-row .price-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sm-zone .preg-cta-row .price-block .mrp {
font-size: 12px;
color: #9a8a70;
text-decoration: line-through;
line-height: 1;
}
.sm-zone .preg-cta-row .price-block strong {
font-family: var(--accent-font);
font-weight: 600;
font-size: 26px;
color: var(--primary-color);
letter-spacing: -0.01em;
line-height: 1;
}
.sm-zone .preg-cta-row .save-tag {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #2D7D46;
font-weight: 700;
padding: 5px 10px;
background: rgba(45, 125, 70, 0.1);
border-radius: 4px;
}
.sm-zone .preg-cta-row .shop-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
background: var(--primary-color);
color: var(--accent-color) !important;
border-radius: 999px;
font-family: var(--default-font);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
}
.sm-zone .preg-cta-row .shop-btn:hover {
background: var(--accent-color);
color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: 0 18px 36px -14px rgba(212,168,75,0.5);
}
@media (max-width: 640px) {
.sm-zone .preg-cta-row { flex-wrap: wrap; gap: 12px; }
.sm-zone .preg-cta-row .shop-btn { margin-left: 0; width: 100%; }
}
/* PCOD Combo — compact horizontal strip below pregnancy combo */
.sm-zone .pcod-strip {
padding: 0 0 40px;
}
.sm-zone .pcod-strip > .container { padding-left: 15px; padding-right: 15px; }
/* Kill sellsmart's hover blue circle on benefit-item icon-box */
.sm-zone .our-benefits .benefit-item .icon-box::before,
.sm-zone .our-benefits .benefit-item:hover .icon-box::before {
display: none !important;
content: none !important;
}
.sm-zone .pcod-strip__inner {
display: grid;
grid-template-columns: 140px 1fr 220px;
gap: 28px;
align-items: center;
background: linear-gradient(135deg, #FDF6EE 0%, #FAF0E8 100%);
border: 1px solid rgba(158, 42, 109, 0.18);
border-radius: 10px;
padding: 20px 26px;
position: relative;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.sm-zone .pcod-strip__inner::before {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 50%; height: 180%;
background: radial-gradient(circle, rgba(158,42,109,0.08), transparent 60%);
filter: blur(40px);
pointer-events: none;
}
.sm-zone .pcod-strip__inner:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -20px rgba(158,42,109,0.22);
border-color: var(--accent-color);
}
.sm-zone .pcod-strip__img {
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.6);
border-radius: 6px;
position: relative;
overflow: visible;
}
.sm-zone .pcod-strip__img img {
max-height: 110px;
max-width: 88%;
object-fit: contain;
}
.sm-zone .pcod-strip__badge {
position: absolute;
top: -8px; left: -8px;
background: #9E2A6D;
color: #fff;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 10px;
border-radius: 3px;
box-shadow: 0 6px 14px -4px rgba(158,42,109,0.5);
z-index: 2;
}
.sm-zone .pcod-strip__img::after {
content: '';
position: absolute;
bottom: 6px; left: 50%;
transform: translateX(-50%);
width: 58%; height: 12px;
background: radial-gradient(ellipse at center, rgba(27,42,91,0.2) 0%, transparent 75%);
filter: blur(5px);
}
.sm-zone .pcod-strip__body { min-width: 0; position: relative; z-index: 1; }
.sm-zone .pcod-strip__body .eyebrow {
font-family: var(--accent-font);
font-style: italic;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: #9E2A6D;
margin: 0 0 4px;
display: block;
}
.sm-zone .pcod-strip__body h3 {
font-family: var(--default-font);
font-size: 22px !important;
font-weight: 600;
letter-spacing: -0.018em;
color: var(--primary-color) !important;
margin: 0 0 6px !important;
line-height: 1.2em !important;
}
.sm-zone .pcod-strip__body p {
font-size: 13.5px !important;
line-height: 1.55em !important;
color: #4a4a4a !important;
margin: 0 0 10px !important;
}
.sm-zone .pcod-strip__body .components {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.sm-zone .pcod-strip__body .components li {
font-size: 12px !important;
color: #5a4055 !important;
margin: 0 !important;
padding-left: 12px !important;
position: relative;
}
.sm-zone .pcod-strip__body .components li {
display: flex;
align-items: center;
gap: 8px;
padding-left: 0 !important;
}
.sm-zone .pcod-strip__body .components li::before {
content: '';
position: static;
flex-shrink: 0;
width: 8px; height: 1.5px;
background: #9E2A6D;
}
.sm-zone .pcod-strip__action {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
position: relative;
z-index: 1;
width: 100%;
}
.sm-zone .pcod-strip__action .save-tag { text-align: right; }
.sm-zone .pcod-strip__action .price-row {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 10px;
}
.sm-zone .pcod-strip__action .mrp {
font-size: 12.5px;
color: #9a8a70;
text-decoration: line-through;
}
.sm-zone .pcod-strip__action strong {
font-family: var(--accent-font);
font-weight: 600;
font-size: 26px;
color: var(--primary-color);
letter-spacing: -0.01em;
line-height: 1;
}
.sm-zone .pcod-strip__action .save-tag {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #2D7D46;
font-weight: 700;
}
.sm-zone .pcod-strip__action .shop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
background: #9E2A6D;
color: #fff !important;
border-radius: 999px;
font-family: var(--default-font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.sm-zone .pcod-strip__action .shop-btn:hover {
background: var(--primary-color);
transform: translateY(-2px);
}
@media (max-width: 760px) {
.sm-zone .pcod-strip__inner {
grid-template-columns: 1fr;
padding: 20px;
gap: 16px;
}
.sm-zone .pcod-strip__img { height: 140px; }
.sm-zone .pcod-strip__action {
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
}
/* Key Points — full Safease feel: lavender→cream gradient + yellow glow */
.sm-zone .our-key-points {
background: linear-gradient(180deg, #EADBF1 0%, #F5EAFA 55%, #FBF6E8 100%);
position: relative;
overflow: hidden;
}
.sm-zone .our-key-points::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 720px; height: 720px;
border-radius: 50%;
background: radial-gradient(circle, rgba(248, 220, 74, 0.35) 0%, transparent 55%);
filter: blur(50px);
pointer-events: none;
z-index: 0;
}
.sm-zone .our-key-points > .container { position: relative; z-index: 2; }
.sm-zone .our-key-points .section-title h3::before { background: #F8DC4A; }
.sm-zone .our-key-points .section-title h2 span { color: #3B1053; }
.sm-zone .our-key-points .key-points-item .icon-box {
background: #3B1053 !important;
width: 68px; height: 68px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px;
flex-shrink: 0;
transition: background 0.3s;
}
.sm-zone .our-key-points .key-points-item .icon-box img {
filter: brightness(0) saturate(100%) invert(92%) sepia(32%) saturate(800%) hue-rotate(359deg) brightness(102%);
width: 100%;
height: 100%;
object-fit: contain;
}
.sm-zone .our-key-points .key-points-item:hover .icon-box { background: #4A2366 !important; }
.sm-zone .our-key-points .section-footer-text p a { color: #3B1053; }
.sm-zone .our-key-points .section-footer-text p a:hover { color: #9E2A6D; }
/* Pad ring overlay — Safease logo + rotating text circle on pad image */
.sm-zone .our-key-points .key-points-image { position: relative; }
.sm-zone .pad-ring {
position: absolute;
bottom: 4%;
right: -2%;
width: clamp(80px, 11vw, 110px);
aspect-ratio: 1 / 1;
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 8px 20px rgba(59, 16, 83, 0.2));
}
.sm-zone .pad-ring__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: limarkRingSpin 18s linear infinite;
}
.sm-zone .pad-ring__svg text {
font-family: var(--default-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
fill: #3B1053;
text-transform: uppercase;
}
.sm-zone .pad-ring__core {
position: absolute;
inset: 16%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #F8DC4A;
overflow: hidden;
}
.sm-zone .pad-ring__core img { width: 100%; height: 100%; object-fit: contain; }
/* Key-points center image (Safease pad) — 30% larger */
.sm-zone .our-key-points .key-points-image figure { margin: 0; }
.sm-zone .our-key-points .key-points-image figure img {
width: 130%;
max-width: none;
margin-left: -15%;
display: block;
}
@media (max-width: 991px) {
.sm-zone .our-key-points .key-points-image figure img { width: 100%; margin-left: 0; }
}
/* Product image box — transparent bg, image fits centered */
.sm-zone .product-item .product-image,
.sm-zone .product-item .product-image figure {
background: transparent !important;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
}
.sm-zone .product-item .product-image figure { margin: 0; padding: 0; width: 100%; height: 100%; }
.sm-zone .product-item .product-image figure img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 0;
background: transparent;
display: block;
}
/* ============ HOME — CURATED COLLECTION (replaces 4-product grid) ============ */
.sm-zone .hm-collection {
padding: clamp(44px, 5vw, 72px) 0 clamp(32px, 4vw, 56px);
background: #fff;
}
.sm-zone .hm-collection__head {
text-align: center;
margin-bottom: clamp(24px, 3vw, 40px);
padding: 0 24px;
}
.sm-zone .hm-collection__head .eyebrow {
display: inline-block;
font-family: var(--accent-font);
font-style: italic;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--accent-color);
margin: 0 0 14px;
padding-left: 18px;
position: relative;
}
.sm-zone .hm-collection__head .eyebrow::before {
content: '';
position: absolute;
top: 50%; left: 0;
width: 8px; height: 8px;
background: var(--accent-color);
border-radius: 50%;
transform: translateY(-50%);
}
.sm-zone .hm-collection__head h2 {
font-family: var(--default-font);
font-size: clamp(24px, 3.6vw, 38px);
font-weight: 600;
color: var(--primary-color);
letter-spacing: -0.02em;
margin: 0 0 10px;
line-height: 1.15em;
}
.sm-zone .hm-collection__head h2 span {
font-family: var(--accent-font);
font-style: italic;
font-weight: 400;
color: var(--accent-color);
}
.sm-zone .hm-collection__head p {
max-width: 620px;
margin: 0 auto;
font-size: 15px;
line-height: 1.7em;
color: #5a5a5a;
}
.sm-zone .hm-collection__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.sm-zone .hm-coll-card {
background: #FBF6EC;
border-radius: 6px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
border: 1px solid rgba(212,168,75,0.12);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
.sm-zone .hm-coll-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
opacity: 0;
transition: opacity 0.4s;
}
.sm-zone .hm-coll-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 56px -22px rgba(27,42,91,0.22);
border-color: var(--accent-color);
}
.sm-zone .hm-coll-card:hover::after { opacity: 1; }
.sm-zone .hm-coll-card--ayurveda {
background:
radial-gradient(ellipse 70% 55% at 85% 5%, rgba(212,168,75,0.42) 0%, transparent 55%),
radial-gradient(ellipse 60% 55% at 10% 100%, rgba(158,42,109,0.15) 0%, transparent 55%),
linear-gradient(160deg, #FEFAEF 0%, #F5EBD0 55%, #ECDFBC 100%);
}
.sm-zone .hm-coll-card--pcod {
background:
radial-gradient(ellipse 70% 55% at 85% 5%, rgba(158,42,109,0.32) 0%, transparent 55%),
radial-gradient(ellipse 60% 55% at 10% 100%, rgba(248,220,74,0.22) 0%, transparent 55%),
linear-gradient(160deg, #FFF6F0 0%, #FBE5D8 55%, #F3CFBE 100%);
}
.sm-zone .hm-coll-card--preg {
background:
radial-gradient(ellipse 70% 55% at 85% 5%, rgba(74,35,102,0.32) 0%, transparent 55%),
radial-gradient(ellipse 60% 55% at 10% 100%, rgba(212,168,75,0.2) 0%, transparent 55%),
linear-gradient(160deg, #FAF0FB 0%, #EED7F1 55%, #DEC2E4 100%);
}
.sm-zone .hm-coll-card .coll-img {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: visible;
position: relative;
}
.sm-zone .hm-coll-card .coll-img::after {
content: '';
position: absolute;
bottom: -2px; left: 50%;
transform: translateX(-50%);
width: 62%; height: 14px;
background: radial-gradient(ellipse at center, rgba(27,42,91,0.32) 0%, rgba(27,42,91,0.14) 40%, transparent 75%);
filter: blur(5px);
pointer-events: none;
z-index: 0;
}
.sm-zone .hm-coll-card .coll-img img {
max-height: 134px;
max-width: 78%;
object-fit: contain;
position: relative;
z-index: 1;
}
.sm-zone .hm-coll-card .coll-pill {
font-family: var(--accent-font);
font-style: italic;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--accent-color);
margin: 0;
}
.sm-zone .hm-coll-card h3 {
font-family: var(--default-font);
font-size: 18px !important;
font-weight: 600;
line-height: 1.2em;
letter-spacing: -0.015em;
color: var(--primary-color) !important;
margin: 0 !important;
}
.sm-zone .hm-coll-card .coll-desc {
font-size: 13px !important;
line-height: 1.55em !important;
color: #4a4a4a !important;
margin: 0 !important;
}
.sm-zone .hm-coll-card .coll-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(27,42,91,0.08);
}
.sm-zone .hm-coll-card .coll-price {
display: flex;
flex-direction: column;
gap: 2px;
}
.sm-zone .hm-coll-card .coll-price .mrp {
font-size: 11px;
color: #9a9a9a;
text-decoration: line-through;
}
.sm-zone .hm-coll-card .coll-price strong {
font-family: var(--accent-font);
font-weight: 600;
font-size: 18px;
color: var(--primary-color);
letter-spacing: -0.01em;
}
.sm-zone .hm-coll-card .coll-cta {
font-family: var(--default-font);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary-color);
transition: color 0.25s, transform 0.25s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sm-zone .hm-coll-card:hover .coll-cta { color: var(--accent-color); transform: translateX(4px); }
@media (max-width: 900px) {
.sm-zone .hm-collection__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
.sm-zone .hm-collection__grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ============ HOME — SAFEASE FEATURE STRIP (full-width editorial) ============ */
.sm-zone .hm-safease-feature {
padding: 0;
background: #fff;
}
.sm-zone .hm-safease-feature__inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px clamp(50px, 6vw, 80px);
}
.sm-zone .hm-safease-feature__card {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(135deg, #4A2366 0%, #3B1053 55%, #2A0A3E 100%);
border-radius: 10px;
overflow: hidden;
min-height: 340px;
isolation: isolate;
}
.sm-zone .hm-safease-feature__card::before {
content: '';
position: absolute;
top: -20%; right: -10%;
width: 60%; height: 140%;
background: radial-gradient(circle, rgba(248,220,74,0.22), transparent 60%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.sm-zone .hm-safease-feature__card::after {
content: '';
position: absolute;
bottom: -20%; left: -10%;
width: 50%; height: 100%;
background: radial-gradient(circle, rgba(158,42,109,0.3), transparent 60%);
filter: blur(45px);
pointer-events: none;
z-index: 0;
}
.sm-zone .hm-safease-feature__visual {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 28px 32px;
}
/* Soft ambient halo (subtle, behind image) */
.sm-zone .hm-safease-feature__visual::before {
content: '';
position: absolute;
left: 50%; top: 48%;
transform: translate(-50%, -50%);
width: 70%; height: 70%;
background: radial-gradient(ellipse, rgba(248,220,74,0.2) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
/* Ground shadow — wider, softer, floor-like (two layers for depth) */
.sm-zone .hm-safease-feature__visual::after {
content: '';
position: absolute;
bottom: 22px; left: 50%;
transform: translateX(-50%);
width: 88%; height: 32px;
background:
radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 60%, transparent 85%);
filter: blur(14px);
pointer-events: none;
z-index: 0;
}
/* Subtle floor line — atmospheric base */
.sm-zone .hm-safease-feature__visual {
--floor-top: 70%;
}
.sm-zone .hm-safease-feature__visual::before {
background:
radial-gradient(ellipse 72% 50% at 50% 42%, rgba(248,220,74,0.2) 0%, rgba(255,255,255,0.08) 45%, transparent 72%),
linear-gradient(180deg,
transparent var(--floor-top),
rgba(255,255,255,0.06) calc(var(--floor-top) + 1%),
rgba(0,0,0,0.15) 100%
);
}
.sm-zone .hm-safease-feature__visual img {
max-width: 88%;
max-height: 360px;
object-fit: contain;
position: relative;
z-index: 1;
}
.sm-zone .hm-safease-feature__text {
position: relative;
z-index: 2;
padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
justify-content: center;
color: #F8F4FB;
}
.sm-zone .hm-safease-feature__text .eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--accent-font);
font-style: italic;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: #F8DC4A;
margin: 0 0 12px;
}
.sm-zone .hm-safease-feature__text .eyebrow::before {
content: '';
width: 22px; height: 1px;
background: #F8DC4A;
}
.sm-zone .hm-safease-feature__text h2 {
font-family: var(--default-font);
font-style: normal;
font-weight: 700;
font-size: clamp(26px, 3.8vw, 40px) !important;
line-height: 1.1em;
letter-spacing: -0.02em;
color: #FFFFFF !important;
margin: 0 0 22px !important;
}
.sm-zone .hm-safease-feature__text h2 em {
color: #F8DC4A;
font-style: normal;
font-weight: 700;
}
.sm-zone .hm-safease-feature__text p {
font-size: 14.5px !important;
line-height: 1.7em !important;
color: rgba(248, 244, 251, 0.82) !important;
margin: 0 0 18px !important;
max-width: 480px;
}
.sm-zone .hm-safease-feature__points {
list-style: none !important;
padding: 0 !important;
margin: 0 0 18px !important;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
}
.sm-zone .hm-safease-feature__points li {
font-family: var(--default-font);
font-size: 12.5px !important;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: rgba(248, 220, 74, 0.85);
margin: 0 !important;
padding-left: 16px !important;
position: relative;
}
.sm-zone .hm-safease-feature__points li::before {
content: '';
position: absolute;
left: 0; top: 0.6em;
width: 8px; height: 1px;
background: #F8DC4A;
}
.sm-zone .hm-safease-feature__price {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0;
margin: 0 0 16px;
border-top: 1px solid rgba(248,220,74,0.25);
border-bottom: 1px solid rgba(248,220,74,0.15);
}
.sm-zone .hm-safease-feature__price .price-label {
font-family: var(--accent-font);
font-style: italic;
font-size: 13.5px;
color: rgba(248,220,74,0.75);
margin: 0;
}
.sm-zone .hm-safease-feature__price .price-amt {
font-family: var(--accent-font);
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1;
}
.sm-zone .hm-safease-feature__price .price-sizes {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(248,244,251,0.72);
margin: 0;
padding-left: 18px;
border-left: 1px solid rgba(248,220,74,0.2);
line-height: 1.4em;
}
.sm-zone .hm-safease-feature__price .price-sizes strong {
color: #F8DC4A;
font-weight: 600;
display: block;
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 2px;
}
@media (max-width: 560px) {
.sm-zone .hm-safease-feature__price {
flex-wrap: wrap;
gap: 10px 14px;
}
.sm-zone .hm-safease-feature__price .price-sizes {
padding-left: 0;
border-left: 0;
width: 100%;
}
}
.sm-zone .hm-safease-feature__cta {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-height: 54px;
padding: 0 32px;
background: #F8DC4A;
color: #3B1053 !important;
border-radius: 999px;
font-family: var(--default-font);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 14px 32px -12px rgba(248,220,74,0.5);
}
.sm-zone .hm-safease-feature__cta:hover {
background: #FFFFFF;
color: #3B1053 !important;
transform: translateY(-2px);
box-shadow: 0 22px 44px -14px rgba(248,220,74,0.7);
}
@media (max-width: 900px) {
.sm-zone .hm-safease-feature__card {
grid-template-columns: 1fr;
min-height: auto;
}
.sm-zone .hm-safease-feature__visual { padding: 40px 24px 20px; }
.sm-zone .hm-safease-feature__visual img { max-height: 350px; }
.sm-zone .hm-safease-feature__text { padding: 20px 28px 44px; }
.sm-zone .hm-safease-feature__cta {
min-height: 46px;
padding: 0 22px;
font-size: 12px;
letter-spacing: 0.06em;
}
/* Why Choose — stack + center on mobile */
.sm-zone .why-choose-item-box {
justify-content: center;
text-align: center;
gap: 20px !important;
}
.sm-zone .why-choose-item {
width: 100% !important;
max-width: 360px;
}
.sm-zone .why-choose-item .icon-box { margin-left: auto; margin-right: auto; }
.sm-zone .why-choose-body {
text-align: center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sm-zone .why-choose-body .icon-box,
.sm-zone .why-choose-body .limark-text-ring {
margin-left: auto !important; margin-right: auto !important;
margin-bottom: 16px;
}
.sm-zone .why-choose-body-content {
text-align: center;
max-width: 420px;
margin: 0 auto;
}
/* Pad ring (key-points image) mobile center */
.sm-zone .our-key-points .key-points-image {
text-align: center;
margin: 0 auto;
}
.sm-zone .our-key-points .key-points-image figure { margin: 0 auto; display: block; }
.sm-zone .pad-ring {
right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 4%;
}
}
/* Tighten Our Products spacing */
.sm-zone .our-products { padding: 60px 0; background: #fff; }
.sm-zone .why-choose-us { background: #F5EDE4; }
.sm-zone .why-choose-us .why-choose-box { background: #F5EDE4; }
.sm-zone .our-products .section-row { margin-bottom: 30px !important; }
.sm-zone .our-products .section-title { margin-bottom: 0; }
.sm-zone .our-products .section-title h2 { font-size: 38px; line-height: 1.1em; }
.sm-zone .product-item { margin-bottom: 20px; }
.sm-zone .section-footer-text { margin-top: 20px; }
/* ===== TEST.HTML BLOCK 2 — homepage-specific sections ===== */
/* ============================================================
TEST.HTML — Step 1f (award-grade)
- Fluid type scale: clamp(min, vw-based, max) — best practice
- Safease bg: flower.jpg + WHITE gradient overlay (fallback gradient)
- Limark: flat navy (no radar)
- Nav: subtle white glass (T2.png) — menu always readable
- Content vertically centered in each side, stats removed (cleaner)
- Bottom side-CTA: Safease left, Limark right
- Girl image removed (unnecessary)
============================================================ */
:root {
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-accent: 'Lora', Georgia, serif;
/* Type scale — Healia-style breakpoint approach (discrete, not clamp) */
--fs-xs: 0.8125rem; /* 13 — mobile a11y floor */
--fs-sm: 0.875rem; /* 14 */
--fs-base: 1rem; /* 16 */
--fs-md: 1.0625rem; /* 17 — hero sub */
--fs-lg: 1.125rem; /* 18 */
--fs-xl: 1.25rem; /* 20 */
--fs-2xl: 1.5rem; /* 24 */
--fs-3xl: 1.875rem; /* 30 */
--fs-nav: 0.8125rem; /* 13 */
/* Radius tokens */
--r-card: 14px;
--r-pill: 999px;
--r-soft: 8px;
/* Hero title — breakpoint-overridden below */
--fs-hero: 1.75rem; /* 28 mobile default */
--lh-tight: 1.05;
--lh-snug: 1.15;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
/* ============================================================
ADAPTIVE TONAL PALETTE (HSL-derived via color-mix)
Each brand = 1 base + 10-step tonal scale computed from white/black.
Enables visual rhythm across sections without redesign.
============================================================ */
/* SAFEASE base */
--s-base: #3B1053; /* hsl(276, 67%, 20%) */
--s-accent: #9E2A6D; /* berry */
--s-spark: #F8DC4A; /* yellow spark */
/* Tonal scale — auto-derived from base */
--s-50: color-mix(in oklch, var(--s-base) 5%, white); /* bg tint softest */
--s-75: color-mix(in oklch, var(--s-base) 10%, white); /* section bg */
--s-100: color-mix(in oklch, var(--s-base) 18%, white); /* card bg */
--s-200: color-mix(in oklch, var(--s-base) 28%, white); /* border */
--s-300: color-mix(in oklch, var(--s-base) 40%, white); /* subtle accent */
--s-400: color-mix(in oklch, var(--s-base) 58%, white); /* muted */
--s-500: color-mix(in oklch, var(--s-base) 75%, white); /* mid */
--s-600: color-mix(in oklch, var(--s-base) 90%, white); /* base-adjacent */
--s-700: var(--s-base); /* base */
--s-800: color-mix(in oklch, var(--s-base) 85%, black); /* CTA hover */
--s-900: color-mix(in oklch, var(--s-base) 70%, black); /* deepest */
/* Legacy aliases (maintain) */
--s-deep: var(--s-700);
--s-purple: var(--s-800);
--s-berry: var(--s-accent);
--s-yellow: var(--s-spark);
--s-yellow-soft: color-mix(in oklch, var(--s-spark) 60%, white);
--s-lavender: var(--s-100);
--s-lavender-soft: var(--s-75);
/* LIMARK base */
--l-base: #1B2A5B; /* hsl(222, 54%, 23%) */
--l-accent: #D4A84B; /* gold */
--l-warm: #C66B4A; /* terracotta */
/* Tonal scale */
--l-50: color-mix(in oklch, var(--l-base) 5%, white);
--l-75: color-mix(in oklch, var(--l-base) 10%, white);
--l-100: color-mix(in oklch, var(--l-base) 18%, white);
--l-200: color-mix(in oklch, var(--l-base) 30%, white);
--l-300: color-mix(in oklch, var(--l-base) 45%, white);
--l-400: color-mix(in oklch, var(--l-base) 60%, white);
--l-500: color-mix(in oklch, var(--l-base) 75%, white);
--l-600: color-mix(in oklch, var(--l-base) 90%, white);
--l-700: var(--l-base);
--l-800: color-mix(in oklch, var(--l-base) 85%, black);
--l-900: color-mix(in oklch, var(--l-base) 70%, black);
--l-gold-shimmer: color-mix(in oklch, var(--l-accent) 70%, white);
/* Legacy aliases */
--l-navy: var(--l-700);
--l-navy-deep: var(--l-800);
--l-gold: var(--l-accent);
--l-terracotta:var(--l-warm);
--l-cream: color-mix(in oklch, var(--l-accent) 15%, white);
--white: #FFFFFF;
--off-white: #FBF8F3;
--text: #1A1A1A;
--text-dim: #6B6B6B;
/* Spacing scale (rem + vw fluid) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: clamp(1.25rem, 1vw + 1rem, 1.75rem);
--sp-6: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
--sp-8: clamp(2rem, 2vw + 1.25rem, 3rem);
--sp-10: clamp(2.5rem, 3vw + 1.5rem, 4rem);
--sp-12: clamp(3rem, 4vw + 1.75rem, 5rem);
--r-pill: 999px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ticker-h, 38px) + 80px); }
body {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--text);
background: var(--off-white);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; font: inherit; background: none; }
.container {
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
/* ============================================================
NAV — subtle white glass, always readable
============================================================ */
.nav-wrap {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: clamp(12px, 1.6vw, 20px) clamp(16px, 4vw, 40px);
pointer-events: none;
}
.nav-capsule {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
padding: 8px 8px 8px 24px;
background: var(--white); /* solid pure white, Healia-clean */
border: 0;
border-radius: var(--r-pill);
max-width: 1280px;
margin-inline: auto;
pointer-events: auto;
transition: box-shadow 0.35s;
min-height: 64px;
box-shadow:
0 1px 2px rgba(59, 16, 83, 0.06),
0 8px 28px -10px rgba(59, 16, 83, 0.18);
}
.nav-capsule.scrolled {
box-shadow:
0 1px 2px rgba(59, 16, 83, 0.08),
0 16px 44px -14px rgba(59, 16, 83, 0.25);
}
.nav-logo {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
width: 140px;
flex-shrink: 0;
}
.nav-logo img {
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
height: auto;
width: auto;
max-height: 30px;
transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
}
.nav-logo img.safease { animation: fadeSafease 6s ease-in-out infinite; }
.nav-logo img.limark { animation: fadeLimark 6s ease-in-out infinite; max-height: 26px; }
/* Safease: visible ~20% of cycle, Limark: visible ~65% of cycle */
@keyframes fadeSafease {
0%, 18% { opacity: 1; transform: translateY(-50%) scale(1); }
25%, 92% { opacity: 0; transform: translateY(-50%) scale(0.94); }
100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes fadeLimark {
0%, 18% { opacity: 0; transform: translateY(-50%) scale(0.94); }
28%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
95%, 100%{ opacity: 0; transform: translateY(-50%) scale(0.94); }
}
.nav-menu {
display: none;
flex: 1;
align-items: center;
justify-content: center;
gap: 4px;
}
@media (min-width: 1024px) { .nav-menu { display: flex; } }
.nav-menu a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
font-size: var(--fs-nav);
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--s-deep);
transition: color 0.25s, background 0.25s;
border-radius: var(--r-pill);
}
.nav-menu a:hover { color: var(--s-accent); background: var(--s-50); }
.nav-menu a.active { color: var(--s-accent); }
.nav-menu svg { width: 18px; height: 18px; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }
/* Shop Now — same visual language as explore-chip (circle + 2-line text) */
.nav-shop {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 18px 7px 8px;
background: var(--s-deep);
color: var(--white);
border: 0;
border-radius: var(--r-pill);
font-family: var(--font-body);
text-decoration: none;
line-height: 1;
min-height: 48px;
box-shadow: 0 8px 20px -4px rgba(59, 16, 83, 0.32);
transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s;
}
.nav-shop:hover {
transform: translateY(-2px);
background: var(--s-accent);
box-shadow: 0 14px 28px -6px rgba(158, 42, 109, 0.4);
}
.nav-shop__circle {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--s-spark);
color: var(--s-deep);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nav-shop__circle svg { width: 14px; height: 14px; }
.nav-shop__main {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
padding-right: 4px;
line-height: 1;
}
.nav-shop__main::after { content: '→'; font-size: 14px; transition: transform 0.25s; }
.nav-shop:hover .nav-shop__main::after { transform: translateX(3px); }
.nav-burger {
display: none;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
color: var(--s-deep);
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@media (max-width: 1023px) { .nav-burger { display: inline-flex; } }
.nav-burger svg { width: 17px; height: 17px; }
/* Mobile nav compacting — single-line Shop Now, burger visible */
@media (max-width: 1023px) {
.nav-wrap { padding: 10px 14px; }
.nav-capsule { padding: 5px 12px 5px 14px; min-height: 54px; gap: 12px; }
.nav-actions { gap: 14px !important; }
.nav-logo img { max-height: 22px; }
.nav-logo img.limark { max-height: 22px; }
.nav-shop { gap: 8px; padding: 4px 14px 4px 4px; min-height: 40px; }
.nav-shop__circle { width: 32px; height: 32px; }
.nav-shop__main {
font-size: 11px;
letter-spacing: 0.08em;
white-space: nowrap;
padding-right: 0;
gap: 6px;
}
.nav-shop__main::after { display: none; }
.nav-burger { width: 40px; height: 40px; flex-shrink: 0; margin-left: 2px; }
.explore-chip { align-self: center; }
}
@media (max-width: 440px) {
.nav-capsule { padding: 5px 6px 5px 10px; min-height: 52px; }
.nav-shop { padding: 3px 10px 3px 3px; min-height: 36px; }
.nav-shop__circle { width: 30px; height: 30px; }
.nav-shop__main { font-size: 10.5px; letter-spacing: 0.04em; }
.nav-burger { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
.nav-shop__main { display: none; }
.nav-shop { padding: 3px; }
}
/* Mobile ticker — continuous smooth marquee */
.ticker-bar__marquee {
display: none;
white-space: nowrap;
will-change: transform;
}
.ticker-bar__marquee span {
display: inline-block;
padding: 0 28px;
font-family: 'Lora', serif;
font-style: italic;
font-size: 12.5px;
color: #EFD79A;
letter-spacing: 0.01em;
}
.ticker-bar__marquee em {
font-style: normal;
color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
margin-right: 6px;
letter-spacing: 0.08em;
font-size: 11px;
text-transform: uppercase;
}
@keyframes tbMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.ticker-bar__label,
.ticker-bar__aside,
.ticker-bar__marquee { display: none !important; }
.ticker-bar__inner { padding: 0 14px; display: flex; align-items: center; justify-content: center; }
.ticker-bar__stage { display: block !important; flex: 1; height: 100%; }
.ticker-bar__slide {
font-size: 11.5px !important;
padding: 0 8px !important;
overflow: hidden;
text-overflow: ellipsis;
}
.ticker-bar__slide em {
font-size: 10px !important;
margin-right: 5px !important;
letter-spacing: 0.08em !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ticker-bar__marquee { animation: none; }
}
/* ============ MOBILE DRAWER ============ */
.drawer-backdrop {
position: fixed; inset: 0;
background: rgba(20, 32, 74, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
z-index: 998;
}
.drawer-backdrop.is-open {
opacity: 1; visibility: visible;
transition: opacity 0.3s ease;
}
.mobile-drawer {
position: fixed;
top: 0; right: 0;
width: min(360px, 88vw);
height: 100dvh;
background: #FFFFFF;
z-index: 999;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: -20px 0 60px rgba(20,32,74,0.18);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(27,42,91,0.08);
}
.mobile-drawer__brand {
font-family: 'Lora', serif;
font-style: italic;
font-size: 15px;
color: #1B2A5B;
letter-spacing: 0.02em;
}
.mobile-drawer__close {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(27,42,91,0.12);
background: transparent;
color: #1B2A5B;
display: inline-flex;
align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.mobile-drawer__close:hover { background: #F5EEE4; border-color: #D4A84B; }
.mobile-drawer__close svg { width: 18px; height: 18px; }
.mobile-drawer__nav {
padding: 12px 0;
list-style: none;
margin: 0;
}
.mobile-drawer__nav li { margin: 0; }
.mobile-drawer__nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 500;
color: #1B2A5B;
min-height: 52px;
border-bottom: 1px solid rgba(27,42,91,0.05);
transition: background 0.2s, color 0.2s, padding-left 0.2s;
text-decoration: none;
}
.mobile-drawer__nav a::after {
content: '→';
color: rgba(27,42,91,0.25);
transition: transform 0.2s, color 0.2s;
}
.mobile-drawer__nav a:hover,
.mobile-drawer__nav a:focus-visible {
background: #FAF5EC;
padding-left: 30px;
color: #3B1053;
}
.mobile-drawer__nav a:hover::after { transform: translateX(4px); color: #D4A84B; }
.mobile-drawer__nav .md-eyebrow {
display: block;
padding: 18px 24px 8px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(27,42,91,0.5);
font-weight: 600;
}
.mobile-drawer__foot {
margin-top: auto;
padding: 22px 24px 28px;
border-top: 1px solid rgba(27,42,91,0.08);
background: #FAF5EC;
}
.mobile-drawer__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
background: #1B2A5B;
color: #fff;
border-radius: 999px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.mobile-drawer__cta:hover { background: #3B1053; transform: translateY(-1px); }
.mobile-drawer__contact {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 14px;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(27,42,91,0.6);
}
.mobile-drawer__contact a {
color: rgba(27,42,91,0.75);
text-decoration: none;
transition: color 0.2s;
}
.mobile-drawer__contact a:hover { color: #D4A84B; }
body.no-scroll { overflow: hidden; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.9em 1.6em;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--r-pill);
transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s;
line-height: 1;
white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn--purple { background: var(--s-deep); color: var(--white); box-shadow: 0 8px 20px rgba(59, 16, 83, 0.22); }
.btn--purple:hover { background: var(--s-purple); transform: translateY(-2px); }
.btn--gold { background: var(--l-gold); color: var(--l-navy-deep); box-shadow: 0 8px 20px rgba(212, 168, 75, 0.3); }
.btn--gold:hover { background: var(--l-gold-shimmer); transform: translateY(-2px); }
/* ============================================================
HERO — 2-part split, content CENTERED, proper rhythm
============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__split {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.hero__split {
grid-template-columns: 1fr 1fr;
height: 70vh;
min-height: 620px;
max-height: 820px;
}
}
.hero__side {
position: relative;
display: flex;
flex-direction: column;
justify-content: center; /* vertically CENTERED */
padding: clamp(7rem, 14vh, 9rem) clamp(2rem, 5vw, 4.5rem) clamp(5rem, 10vh, 6.5rem);
overflow: hidden;
isolation: isolate;
min-height: 600px;
}
@media (max-width: 899px) {
.hero__side {
min-height: 78vh;
padding: calc(clamp(5rem, 10vh, 6.5rem) + 45px) 1.5rem clamp(3.5rem, 6vh, 4.5rem);
justify-content: center;
align-items: center;
text-align: center;
}
.hero__content {
gap: 16px !important;
align-items: center !important;
text-align: center !important;
}
.hero__eyebrow { align-self: center !important; }
.explore-chip { align-self: center !important; }
.hero__title { text-align: center; }
.hero__sub { text-align: center; margin-left: auto; margin-right: auto; }
.hero__eyebrow {
padding: 5px 12px !important;
font-size: 10.5px !important;
letter-spacing: 0.14em !important;
gap: 0.45em !important;
}
.hero__eyebrow::before { width: 5px !important; height: 5px !important; }
.hero__title { font-size: 30px !important; }
.hero__sub { font-size: 14.5px !important; line-height: 1.6em !important; }
}
@media (max-width: 420px) {
.hero__side { min-height: 74vh; padding: 4.5rem 1.25rem 3rem; }
.hero__eyebrow { font-size: 10px !important; padding: 4px 11px !important; letter-spacing: 0.12em !important; }
.hero__title { font-size: 28px !important; }
}
.hero__content {
position: relative;
z-index: 3;
max-width: 500px;
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 7px 14px;
background: rgba(255,255,255,0.55);
border: 1px solid currentColor;
border-radius: var(--r-pill);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-self: flex-start;
}
.hero__eyebrow::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--s-yellow);
box-shadow: 0 0 0 3px rgba(248,220,74,0.45);
animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(248,220,74,0.45); }
50% { box-shadow: 0 0 0 6px rgba(248,220,74,0.15); }
}
.hero__title {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-hero); /* 28 default, ups at breakpoints */
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
@media (min-width: 768px) { :root { --fs-hero: 2rem; /* 32 tablet */ } }
@media (min-width: 1024px) { :root { --fs-hero: 2.25rem; /* 36 desktop */ } }
@media (min-width: 1280px) { :root { --fs-hero: 2.625rem; /* 42 large */ } }
.hero__title span { display: block; }
.hero__title em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
display: block;
letter-spacing: -0.01em;
}
.hero__sub {
font-size: 14px;
line-height: 1.55;
max-width: 42ch;
opacity: 0.88;
font-weight: 500;
margin: 0;
}
@media (min-width: 1024px) { .hero__sub { font-size: 15px; } }
/* ============================================================
SAFEASE — LEFT — flower.jpg + WHITE overlay (brightens)
============================================================ */
.hero__side--safease {
/* Lavender-dominant overlay (not pure white — keeps brand tone, nav pops) */
background:
linear-gradient(160deg,
color-mix(in oklch, var(--s-75) 82%, transparent) 0%,
color-mix(in oklch, var(--s-100) 78%, transparent) 45%,
color-mix(in oklch, var(--s-200) 74%, transparent) 100%),
url('../images/flower.jpg') center/cover no-repeat,
linear-gradient(160deg, var(--s-75) 0%, var(--s-100) 55%, var(--s-200) 100%);
color: var(--s-deep);
filter: brightness(1.05) saturate(1.1); /* permanent — hover vibrancy as default */
transition: filter 0.6s var(--ease);
}
.hero__side--safease:hover { filter: brightness(1.06) saturate(1.12); }
/* ============ HERO — LUXURY HOVER ============
Subtle ken-burns scale on bg, content lifts 4px,
gold underline grows under eyebrow, chip glows.
No petals, no kitsch. */
.hero__side { transition: filter 0.6s var(--ease); }
.hero__side .hero__content {
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__side:hover .hero__content { transform: translateY(-6px); }
/* Eyebrow pill shifts on hover — side-specific bg to preserve contrast */
.hero__eyebrow { transition: border-color 0.5s var(--ease), background 0.5s var(--ease), color 0.5s var(--ease), letter-spacing 0.5s var(--ease); }
.hero__side:hover .hero__eyebrow {
border-color: #D4A84B;
letter-spacing: 0.18em;
}
.hero__side--safease:hover .hero__eyebrow {
background: rgba(255,255,255,0.72);
}
.hero__side--limark:hover .hero__eyebrow {
background: rgba(212, 168, 75, 0.22);
color: #F5E3A8;
}
.hero__side:hover .hero__eyebrow::before {
background: #D4A84B;
box-shadow: 0 0 0 4px rgba(212,168,75,0.4), 0 0 12px rgba(212,168,75,0.55);
}
/* Title subtle color shift on hover */
.hero__title { transition: color 0.6s var(--ease); }
/* Explore chip — softer lift */
.hero__side:hover .explore-chip {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(59,16,83,0.28);
letter-spacing: 0.005em;
}
/* Keep petals block (markup retained but hidden) */
.petals { display: none !important; }
/* ============================================================
HERO LOAD ANIMATION — staggered rise with blur
============================================================ */
@keyframes heroRise {
from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroSlide {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__eyebrow,
.hero__title,
.hero__sub,
.explore-chip {
opacity: 0;
animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
will-change: opacity, transform;
}
.explore-chip { animation-name: heroSlide; }
.hero__side--safease .hero__eyebrow { animation-delay: 0.15s; }
.hero__side--safease .hero__title { animation-delay: 0.3s; }
.hero__side--safease .hero__sub { animation-delay: 0.5s; }
.hero__side--safease .explore-chip { animation-delay: 0.7s; }
.hero__side--limark .hero__eyebrow { animation-delay: 0.35s; }
.hero__side--limark .hero__title { animation-delay: 0.5s; }
.hero__side--limark .hero__sub { animation-delay: 0.7s; }
.hero__side--limark .explore-chip { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
.hero__eyebrow, .hero__title, .hero__sub, .explore-chip { opacity: 1; animation: none; }
}
/* ============================================================
HERO HOVER — editorial ken-burns + gold edge accents
Replaces diagonal shine sweep with refined premium motion
============================================================ */
.hero__shine {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
overflow: hidden;
}
/* Gold hairline at bottom — grows from center outward on hover */
.hero__shine::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0; height: 1px;
background: linear-gradient(90deg, transparent, #D4A84B, transparent);
transform: translateX(-50%);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__side:hover .hero__shine::before { width: 70%; }
/* Corner brackets — fade in on hover (editorial viewfinder) */
.hero__shine::after {
content: '';
position: absolute;
top: 24px; left: 24px;
width: 24px; height: 24px;
border-top: 1px solid rgba(212, 168, 75, 0.55);
border-left: 1px solid rgba(212, 168, 75, 0.55);
opacity: 0;
transform: translate(-4px, -4px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__side:hover .hero__shine::after {
opacity: 1;
transform: translate(0, 0);
}
/* Matching corner bracket — top right */
.hero__side .hero__corner-tr {
position: absolute;
top: 24px; right: 24px;
width: 24px; height: 24px;
border-top: 1px solid rgba(212, 168, 75, 0.55);
border-right: 1px solid rgba(212, 168, 75, 0.55);
opacity: 0;
transform: translate(4px, -4px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 3;
}
.hero__side:hover .hero__corner-tr {
opacity: 1;
transform: translate(0, 0);
}
.hero__side--safease::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(59,16,83,0.04) 1px, transparent 1.5px);
background-size: 22px 22px;
opacity: 0.4;
mix-blend-mode: multiply;
z-index: 1;
pointer-events: none;
}
.hero__side--safease .hero__eyebrow { color: var(--s-deep); }
.hero__side--safease .hero__title { color: var(--s-deep); }
.hero__side--safease .hero__title em { color: var(--s-deep); }
/* ============================================================
LIMARK — RIGHT — flat navy
============================================================ */
.hero__side--limark {
background:
/* Soft wide cobalt wash — long transparency tail, no visible edge */
radial-gradient(ellipse 120% 90% at 20% 20%, rgba(52, 86, 180, 0.35) 0%, rgba(52, 86, 180, 0.12) 40%, transparent 95%),
/* Deep bottom-right wash */
radial-gradient(ellipse 130% 100% at 85% 90%, rgba(4, 10, 30, 0.6) 0%, rgba(4, 10, 30, 0.2) 50%, transparent 98%),
/* Smooth rich blue linear base */
linear-gradient(148deg,
#0A1638 0%,
#14224E 35%,
#1C2D66 55%,
#142254 80%,
#0A1638 100%);
color: var(--l-cream);
filter: brightness(1.12) saturate(1.2) contrast(1.05); /* permanent */
transition: filter 0.6s var(--ease);
isolation: isolate;
}
.hero__side--limark:hover { filter: brightness(1.16) saturate(1.25) contrast(1.08); }
/* SAND/GRAIN texture via SVG fractal noise — natural organic feel */
.hero__side--limark::before {
content: '';
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.32;
mix-blend-mode: overlay;
z-index: 1;
pointer-events: none;
}
/* Second layer: finer grain for sand detail */
.hero__side--limark::after {
content: '';
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.14;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
/* ============================================================
LIMARK — Nature animation: floating leaves
============================================================ */
.leaves {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.leaf {
position: absolute;
width: 32px;
height: 32px;
color: var(--l-gold);
opacity: 0.55;
animation-name: leafDrift;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.leaf svg { width: 100%; height: 100%; display: block; }
.leaf:nth-child(1) { top: 12%; left: 8%; animation-duration: 12s; animation-delay: 0s; color: var(--l-gold-shimmer); }
.leaf:nth-child(2) { top: 30%; left: 75%; animation-duration: 15s; animation-delay: -3s; color: var(--l-warm); width: 26px; height: 26px; }
.leaf:nth-child(3) { top: 55%; left: 14%; animation-duration: 14s; animation-delay: -6s; color: var(--l-gold); width: 22px; height: 22px; opacity: 0.45; }
.leaf:nth-child(4) { top: 72%; left: 62%; animation-duration: 18s; animation-delay: -9s; color: var(--l-gold-shimmer); width: 28px; height: 28px; }
.leaf:nth-child(5) { top: 22%; left: 45%; animation-duration: 16s; animation-delay: -4s; color: var(--l-warm); width: 20px; height: 20px; opacity: 0.5; }
.leaf:nth-child(6) { top: 80%; left: 32%; animation-duration: 20s; animation-delay: -12s; color: var(--l-gold); width: 24px; height: 24px; opacity: 0.4; }
@keyframes leafDrift {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(18px, -12px) rotate(25deg); }
50% { transform: translate(-8px, -24px) rotate(-15deg); }
75% { transform: translate(12px, -14px) rotate(18deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* On hover Limark side, leaves speed up */
.hero__side--limark:hover .leaf { animation-duration: 6s; opacity: 0.75; }
.hero__side--limark .hero__eyebrow {
background: rgba(212, 168, 75, 0.14);
border-color: var(--l-gold);
color: var(--l-gold-shimmer);
}
.hero__side--limark .hero__eyebrow::before {
background: var(--l-gold-shimmer);
box-shadow: 0 0 0 3px rgba(232,200,114,0.3);
}
.hero__side--limark .hero__title { color: var(--l-cream); }
.hero__side--limark .hero__title em { color: var(--l-cream); }
.hero__side--limark .hero__sub { color: rgba(245, 238, 228, 0.82); }
/* Single subtle sparkle — NO radar rings */
.hero__deco--sparkle {
position: absolute;
top: clamp(7rem, 12vh, 9rem);
right: clamp(2rem, 4vw, 3.5rem);
width: clamp(44px, 5vw, 64px);
color: var(--l-gold-shimmer);
opacity: 0.8;
z-index: 2;
animation: twinkle 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes twinkle {
0%, 100% { opacity: 0.8; transform: scale(1) rotate(0); }
50% { opacity: 1; transform: scale(1.1) rotate(20deg); }
}
/* ============================================================
BOTTOM EXPLORE CHIP — circle + 2-line text (earlier style)
Same-brand per side.
============================================================ */
.explore-chip {
position: absolute;
bottom: clamp(1.25rem, 3vh, 2rem);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 18px 8px 10px;
border-radius: var(--r-pill);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 4;
transition: transform 0.3s var(--ease);
text-decoration: none;
}
.explore-chip:hover { transform: translateY(-2px); }
.explore-chip--safease {
left: clamp(2rem, 5vw, 4.5rem);
background: rgba(59, 16, 83, 0.92);
color: var(--white);
border: 1px solid rgba(248, 220, 74, 0.35);
box-shadow: 0 10px 24px rgba(59,16,83,0.28);
}
.explore-chip--limark {
right: clamp(2rem, 5vw, 4.5rem);
background: rgba(212, 168, 75, 0.95);
color: var(--l-navy-deep);
border: 1px solid rgba(27, 42, 91, 0.2);
box-shadow: 0 10px 24px rgba(212,168,75,0.35);
}
@media (max-width: 899px) {
.explore-chip {
position: static;
margin-top: 1.25rem;
align-self: flex-start;
bottom: auto;
left: auto !important;
right: auto !important;
}
}
.explore-chip__circle {
width: 30px; height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.explore-chip--safease .explore-chip__circle {
background: var(--s-yellow);
color: var(--s-deep);
}
.explore-chip--limark .explore-chip__circle {
background: var(--l-navy-deep);
color: var(--l-gold-shimmer);
}
.explore-chip__text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.1;
}
.explore-chip__text span:first-child {
font-family: var(--font-accent);
font-weight: 400;
font-style: italic;
font-size: 11px;
letter-spacing: 0;
text-transform: none;
opacity: 0.85;
}
.explore-chip__text span:last-child {
font-weight: 600;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
gap: 6px;
align-items: center;
}
.explore-chip__text span:last-child::after {
content: '→';
font-size: 13px;
transition: transform 0.3s;
}
.explore-chip:hover .explore-chip__text span:last-child::after { transform: translateX(4px); }
/* ============================================================
TRIBAND below hero
============================================================ */
.triband {
position: relative;
background: linear-gradient(180deg, #D8BFE4 0%, var(--l-cream) 100%);
padding: var(--sp-8) 0;
overflow: hidden;
}
.triband::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(248, 220, 74, 0.3) 0%, transparent 55%);
filter: blur(40px);
pointer-events: none;
}
.triband__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
align-items: center;
}
@media (min-width: 1024px) {
.triband__grid { grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
}
.tri-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
.tri-panel--safease { align-items: flex-start; text-align: left; }
.tri-panel--limark { align-items: flex-end; text-align: right; }
@media (max-width: 1023px) {
.tri-panel--safease, .tri-panel--limark { align-items: center; text-align: center; }
}
.tri-panel__eyebrow {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
font-size: var(--fs-md);
}
.tri-panel--safease .tri-panel__eyebrow { color: var(--s-deep); }
.tri-panel--limark .tri-panel__eyebrow { color: var(--l-navy); }
.tri-panel__title {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
letter-spacing: -0.015em;
}
.tri-panel--safease .tri-panel__title { color: var(--s-deep); }
.tri-panel--limark .tri-panel__title { color: var(--l-navy); }
.tri-panel__title em { font-family: var(--font-accent); font-style: italic; font-weight: 500; }
.tri-panel__text {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--text-dim);
max-width: 32ch;
margin-bottom: var(--sp-4);
}
.tri-panel__stats { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.tri-panel--limark .tri-panel__stats { justify-content: flex-end; }
@media (max-width: 1023px) { .tri-panel__stats { justify-content: center; } }
.tri-stat strong {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-xl);
line-height: 1;
}
.tri-panel--safease .tri-stat strong { color: var(--s-deep); }
.tri-panel--limark .tri-stat strong { color: var(--l-navy); }
.tri-stat span {
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 2px;
display: inline-block;
}
.tri-panel__link {
padding-bottom: 3px;
border-bottom: 1.5px solid;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: gap 0.3s;
display: inline-flex;
gap: 8px;
align-items: center;
}
.tri-panel__link:hover { gap: 14px; }
.tri-panel--safease .tri-panel__link { color: var(--s-deep); }
.tri-panel--limark .tri-panel__link { color: var(--l-navy); }
.tri-circle {
position: relative;
width: clamp(160px, 20vw, 220px);
aspect-ratio: 1/1;
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
}
.tri-circle__ring { position: absolute; inset: 0; animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tri-circle__ring svg { width: 100%; height: 100%; overflow: visible; }
.tri-circle__ring text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 5px;
fill: var(--s-deep);
text-transform: uppercase;
}
.tri-circle__solid {
position: absolute;
inset: 18%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--s-yellow-soft) 0%, var(--s-yellow) 60%, #E5B82E 100%);
box-shadow:
inset 0 -12px 24px rgba(59,16,83,0.15),
0 14px 32px rgba(248, 220, 74, 0.38);
}
.tri-circle__glyph {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
}
.tri-circle__glyph .top {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
color: var(--s-deep);
line-height: 1;
}
.tri-circle__glyph .x {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
font-size: 12px;
color: var(--s-berry);
line-height: 1;
}
.tri-circle__glyph .bottom {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
color: var(--l-navy);
line-height: 1;
}
/* A11y helper */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ============ TOP TICKER BAR (promise / credibility) ============ */
:root { --ticker-h: 38px; }
.ticker-bar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--ticker-h);
background: #14204A;
color: #D4A84B;
z-index: 101;
overflow: hidden;
border-bottom: 1px solid rgba(212, 168, 75, 0.18);
}
.ticker-bar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(212,168,75,0.45) 50%, transparent 100%);
}
.ticker-bar__inner {
max-width: 1280px;
height: 100%;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 32px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.ticker-bar__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(212, 168, 75, 0.9);
font-weight: 600;
flex-shrink: 0;
}
.ticker-bar__label svg { width: 12px; height: 12px; }
.ticker-bar__label .tb-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #D4A84B;
box-shadow: 0 0 6px rgba(212,168,75,0.7);
animation: tbPulse 2.2s ease-in-out infinite;
}
@keyframes tbPulse {
0%,100% { opacity: 0.5; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.ticker-bar__stage {
position: relative;
flex: 1;
height: 100%;
overflow: hidden;
}
.ticker-bar__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Lora', serif;
font-style: italic;
font-size: 14px;
line-height: 1;
color: #EFD79A;
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
white-space: nowrap;
padding: 0 12px;
}
.ticker-bar__slide.is-active {
opacity: 1;
transform: translateY(0);
}
.ticker-bar__slide.is-leaving {
opacity: 0;
transform: translateY(-14px);
}
.ticker-bar__slide em {
font-style: normal;
color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
margin-right: 6px;
letter-spacing: 0.04em;
font-size: 12.5px;
text-transform: uppercase;
}
.ticker-bar__aside {
display: inline-flex;
align-items: center;
gap: 18px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
flex-shrink: 0;
}
.ticker-bar__aside span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ticker-bar__aside svg { width: 11px; height: 11px; color: #D4A84B; }
/* Push nav below ticker */
.nav-wrap { top: var(--ticker-h) !important; }
@media (max-width: 768px) {
:root { --ticker-h: 34px; }
.ticker-bar__label { font-size: 9.5px; gap: 6px; }
.ticker-bar__label .tb-label-text { display: none; }
.ticker-bar__slide { font-size: 12.5px; }
.ticker-bar__slide em { font-size: 10.5px; }
.ticker-bar__aside { display: none; }
}
@media (max-width: 420px) {
.ticker-bar__slide { font-size: 11.5px; }
}
/* tri-panel__link = sm-shop-link hover: letter-spacing only, no transform, no colour change */
.tri-panel__link {
transition: letter-spacing 0.3s, gap 0.3s;
}
.tri-panel__link:hover {
letter-spacing: 0.2em;
}
/* Chip hover — elevate shadow, keep original bg colour */
.explore-chip--safease:hover {
box-shadow: 0 18px 36px rgba(59,16,83,0.42);
}
.explore-chip--limark:hover {
background: #FFFFFF !important;
color: var(--l-navy-deep, #1B2A5B) !important;
border-color: var(--l-navy-deep, #1B2A5B) !important;
box-shadow: 0 18px 36px rgba(27, 42, 91, 0.32) !important;
}
.explore-chip--limark:hover .explore-chip__text span:first-child,
.explore-chip--limark:hover .explore-chip__text span:last-child {
color: var(--l-navy-deep, #1B2A5B) !important;
opacity: 1;
}
.explore-chip--limark:hover .explore-chip__text span:last-child::after {
color: var(--l-navy-deep, #1B2A5B) !important;
}
/* Keep circle navy with gold L on hover */
.explore-chip--limark:hover .explore-chip__circle {
background: var(--l-navy-deep, #1B2A5B) !important;
color: var(--l-gold-shimmer, #D4A84B) !important;
}
/* Mirror the side-wide hover trigger so direct chip hover + side hover behave identically */
.hero__side--limark:hover .explore-chip--limark {
background: #FFFFFF !important;
color: var(--l-navy-deep, #1B2A5B) !important;
border-color: var(--l-navy-deep, #1B2A5B) !important;
box-shadow: 0 18px 36px rgba(27, 42, 91, 0.32) !important;
}
.hero__side--limark:hover .explore-chip--limark .explore-chip__text span:first-child,
.hero__side--limark:hover .explore-chip--limark .explore-chip__text span:last-child {
color: var(--l-navy-deep, #1B2A5B) !important;
opacity: 1;
}
/* ===== All home-page amounts in sans-serif (override Lora usage on prices) ===== */
.sm-zone .hm-coll-card .coll-price strong,
.sm-zone .hm-safease-feature__price .price-amt,
.sm-zone .hm-safease-feature__price .price-sizes strong,
.sm-zone .preg-cta-row .price-block strong,
.sm-zone .preg-cta-row .price-block .mrp,
.sm-zone .pcod-strip__action .price-row strong,
.sm-zone .pcod-strip__action .mrp,
.sm-zone .preg-cta-row .price-block,
.sm-zone .hm-collection strong,
.sm-zone [class*="price"] strong,
.sm-zone [class*="-amt"],
.sm-zone [class*="mrp"] {
font-family: 'Plus Jakarta Sans', var(--default-font), sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
.sm-zone [class*="mrp"] {
font-weight: 500 !important;
letter-spacing: 0.01em !important;
}