/**
* Shared CSS — sm-zone customizations + ticker + nav + mobile drawer + main footer.
* Loads on EVERY page (home, brand, product, policy, account).
*
* Ported verbatim from product-toothpaste.html block 1 (19-1231) + block 2 (1235-2543).
* .sm-zone wrapper scopes sellsmart library overrides.
*
* Source of truth: product-toothpaste.html.
*/
/* ===== BLOCK 1 — sm-zone tokens + customizations ===== */
.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;
}
.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; }
}
.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; }
.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);
}
/* ============ 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: 12.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
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) {
.sm-zone .philosophy__pillars {
grid-template-columns: 1fr;
gap: 20px;
max-width: 520px;
margin: 0 auto;
}
.sm-zone .philosophy__quote { padding: 40px 24px 32px; margin-bottom: 56px; }
.sm-zone .philosophy__quote::before { font-size: 90px; top: -18px; left: 20px; }
.sm-zone .philosophy__lead { margin-bottom: 52px; font-size: 15.5px; }
.sm-zone .philosophy::before { width: 300px; height: 300px; opacity: 0.07; }
}
/* 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-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; }
/* 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;
}
/* 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; }
/* ===== BLOCK 2 — ticker + nav capsule + mobile drawer + main footer ===== */
/* ============================================================
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;
}
/* PHASE 6.4 — Kill cycling animation that produced "blurred / morphing" logo.
* Show ONE logo per page based on context:
* - Safease pages: Safease logo
* - Everywhere else: Limark logo (parent brand) */
.nav-logo img.safease { opacity: 0; }
.nav-logo img.limark { opacity: 1; max-height: 26px; }
body.page-safease .nav-logo img.safease,
body.page-template-page-safease .nav-logo img.safease,
body[class*="safease"] .nav-logo img.safease { opacity: 1; }
body.page-safease .nav-logo img.limark,
body.page-template-page-safease .nav-logo img.limark,
body[class*="safease"] .nav-logo img.limark { opacity: 0; }
.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);
color: #fff;
box-shadow: 0 14px 28px -6px rgba(158, 42, 109, 0.4);
}
.nav-shop:hover .nav-shop__main,
.nav-shop:hover .nav-shop__main::after { color: #fff; }
.nav-shop:hover .nav-shop__circle { background: #fff; color: var(--s-accent); }
.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 */
@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; }
}
@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 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: auto;
padding: clamp(6rem, 12vh, 7.5rem) 1.5rem clamp(4.5rem, 8vh, 5.5rem);
}
}
.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--safease:hover {
background: var(--s-yellow);
color: var(--s-deep);
border-color: var(--s-deep);
box-shadow: 0 14px 30px rgba(59,16,83,0.38);
}
.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);
}
.explore-chip--limark:hover {
background: var(--l-navy-deep);
color: var(--l-gold-shimmer);
border-color: var(--l-gold-shimmer);
box-shadow: 0 14px 30px rgba(27,42,91,0.45);
}
@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; }
}
/* ===================================================================
THEME-WIDE OVERRIDES — prices in sans, uniform button shine hover
=================================================================== */
/* All amounts/prices in Plus Jakarta Sans (override Lora serif) */
.sm-zone [class*="price"] strong,
.sm-zone [class*="-amt"],
.sm-zone [class*="price-amt"],
.sm-zone .prod-price,
.sm-zone .prod-price strong,
.sm-zone .coll-price strong,
.sm-zone .sf-prod-price strong,
.sm-zone .sf-combo-mini .mini-price strong,
.sm-zone .sf-combo-price-row strong,
.sm-zone .lk-prod-card .prod-price,
.sm-zone .lk-prod-card .prod-price strong,
.sm-zone .combo-price-row strong,
.sm-zone .pcod-strip__action .price-row strong,
.sm-zone .hm-safease-feature__price .price-amt,
.sm-zone .hm-safease-feature__price .price-sizes strong,
.pr-price .amt,
.pr-variant__price,
.pr-sticky__info .p {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
font-style: normal !important;
}
.sm-zone [class*="mrp"],
.sm-zone .mrp-strike,
.sm-zone .price-block .mrp {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
font-style: normal !important;
}
/* ===== Uniform shine-sweep hover on FILLED CTA buttons only ===== */
.lk-btn,
.sf-cta,
.sf-combo-btn,
.combo-cta,
.shop-btn,
.mini-cta,
.hm-safease-feature__cta,
.mobile-drawer__cta,
.pr-btn--buy,
.pr-sticky__cta,
.sf-cta-primary,
.lk-btn--primary,
.btn-primary,
.btn-main {
position: relative;
overflow: hidden;
}
/* Tri-panel __link: IDENTICAL to sm-shop-link hover — letter-spacing only, no transform, no colour change */
.tri-panel__link {
transition: letter-spacing 0.3s;
}
.tri-panel__link:hover {
letter-spacing: 0.2em;
}
/* Explore-chip: match sm-shop-link — letter-spacing only, keep original colour */
.explore-chip {
transition: letter-spacing 0.3s, box-shadow 0.3s;
}
.explore-chip:hover {
letter-spacing: 0.08em;
}
/* Lock colour — no hover colour change anywhere on these */
.tri-panel__link:hover,
.tri-panel__link:hover > *,
.explore-chip:hover,
.explore-chip:hover > *,
.explore-chip:hover .explore-chip__text,
.explore-chip:hover .explore-chip__text > * {
color: inherit !important;
}
/* ₹ currency symbol spacing (WooCommerce wraps in span) */
.woocommerce-Price-currencySymbol { margin-right: 3px; }
/* Narrow no-break space after hardcoded ₹ in static HTML */
.rupee-space::after { content: '\202F'; }
.lk-btn::before,
.sf-cta::before,
.sf-combo-btn::before,
.combo-cta::before,
.shop-btn::before,
.mini-cta::before,
.hm-safease-feature__cta::before,
.mobile-drawer__cta::before,
.pr-btn--buy::before,
.pr-sticky__cta::before,
.sf-cta-primary::before,
.lk-btn--primary::before,
.btn-primary::before,
.btn-main::before {
content: '';
position: absolute;
top: 0;
left: -80%;
width: 55%;
height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 1;
}
.lk-btn:hover::before,
.sf-cta:hover::before,
.sf-combo-btn:hover::before,
.combo-cta:hover::before,
.shop-btn:hover::before,
.mini-cta:hover::before,
.hm-safease-feature__cta:hover::before,
.mobile-drawer__cta:hover::before,
.pr-btn--buy:hover::before,
.pr-sticky__cta:hover::before,
.sf-cta-primary:hover::before,
.lk-btn--primary:hover::before,
.btn-primary:hover::before,
.btn-main:hover::before {
left: 130%;
}
/* Ensure inner content sits above the shine layer */
.lk-btn > *,
.sf-cta > *,
.combo-cta > *,
.shop-btn > *,
.mini-cta > *,
.hm-safease-feature__cta > *,
.mobile-drawer__cta > *,
.pr-btn--buy > *,
.pr-sticky__cta > *,
.lk-btn--primary > *,
.btn-primary > * {
position: relative;
z-index: 2;
}
/* ===== Footer visibility fixes ===== */
.sm-zone .main-footer,
.sm-zone .main-footer * { color: rgba(255,255,255,0.8); }
.sm-zone .main-footer .fg-contact .fc-value,
.sm-zone .main-footer .fg-contact a {
color: #fff !important;
text-decoration: none;
transition: color 0.2s;
}
.sm-zone .main-footer .fg-contact a:hover { color: var(--accent-color, #D4A84B) !important; }
.sm-zone .main-footer .fc-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
display: block;
margin-bottom: 2px;
}
.sm-zone .main-footer .fg-socials {
display: flex;
gap: 12px;
margin-top: 14px;
}
.sm-zone .main-footer .fg-socials a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff !important;
transition: background 0.25s, transform 0.25s;
}
.sm-zone .main-footer .fg-socials a:hover {
background: var(--accent-color, #D4A84B);
color: #14204A !important;
transform: translateY(-2px);
}
.sm-zone .sm-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-top: 24px;
margin-top: 0;
border-top: 0;
}
@media (max-width: 767px) {
/* Mobile keeps the hairline divider for visual separation. */
.sm-zone .sm-footer-bottom {
margin-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
}
}
.sm-zone .sm-footer-bottom p { color: rgba(255,255,255,0.68) !important; margin: 0; font-size: 13px; }
.sm-zone .sm-footer-tagline {
color: rgba(255,255,255,0.7) !important;
font-family: 'Lora', serif;
font-style: italic;
font-size: 13px;
}
.sm-zone .sm-footer-tagline .fa-heart { color: #E85A8A !important; margin: 0 3px; }
.sm-zone .sm-legal-links {
list-style: none;
display: flex;
gap: 18px;
margin: 0;
padding: 0;
}
.sm-zone .sm-legal-links a {
color: rgba(255,255,255,0.65) !important;
font-size: 12.5px;
text-decoration: none;
transition: color 0.2s;
}
.sm-zone .sm-legal-links a:hover { color: #fff !important; }
/* ===== Nav cart widget (replaces SHOP NOW) ===== */
.nav-cart-wrap {
position: relative;
}
.nav-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 18px 0 14px;
border-radius: 999px;
background: var(--s-deep, #3B1053);
color: #fff;
text-decoration: none;
transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
box-shadow: 0 8px 20px -8px rgba(59, 16, 83, 0.35);
}
.nav-cart__label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: #fff;
line-height: 1;
}
/* Hide cart text on mobile — icon-only on small screens */
@media (max-width: 767px) {
.nav-cart__label { display: none; }
.nav-cart {
width: 44px;
padding: 0;
justify-content: center;
}
}
.nav-cart:hover {
background: var(--s-accent, #9E2A6D);
transform: translateY(-2px);
box-shadow: 0 14px 28px -8px rgba(158, 42, 109, 0.45);
color: #fff;
}
.nav-cart__icon svg { width: 20px; height: 20px; }
.nav-cart__count {
position: absolute;
top: -4px; right: -4px;
min-width: 22px; height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--s-spark, #F8DC4A);
color: var(--s-deep, #3B1053);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 22px;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
/* Mini-cart dropdown — appears on hover (desktop) */
.nav-cart__dropdown {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: 380px;
max-width: 92vw;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px -18px rgba(59, 16, 83, 0.35), 0 4px 12px -4px rgba(0,0,0,0.08);
padding: 18px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
z-index: 500;
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--s-deep, #3B1053);
}
.nav-cart-wrap:hover .nav-cart__dropdown,
.nav-cart-wrap:focus-within .nav-cart__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s, transform 0.25s;
}
.nav-cart__dropdown .woocommerce-mini-cart {
list-style: none;
margin: 0 0 12px;
padding: 0;
max-height: 320px;
overflow-y: auto;
}
.nav-cart__dropdown .woocommerce-mini-cart__empty-message {
text-align: center;
padding: 24px 8px;
color: #6B6B6B;
font-size: 14px;
margin: 0;
}
.nav-cart__dropdown .mini_cart_item {
display: flex !important;
gap: 12px !important;
padding: 12px 0 !important;
border-bottom: 1px solid rgba(59,16,83,0.08);
font-size: 13px;
line-height: 1.45em;
align-items: flex-start !important;
}
.nav-cart__dropdown .mini_cart_item > a:not(.remove) {
display: flex !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 12px !important;
align-items: center !important;
color: var(--s-deep, #3B1053);
text-decoration: none;
font-weight: 600;
}
.nav-cart__dropdown .mini_cart_item img {
width: 52px !important; height: 52px !important;
border-radius: 8px !important;
object-fit: contain !important;
background: #FAF8F5 !important;
padding: 3px !important;
flex-shrink: 0 !important;
margin: 0 !important; float: none !important;
}
.nav-cart__dropdown .mini_cart_item .quantity {
display: block;
font-weight: 500;
color: #6B6B6B;
font-size: 12px;
margin-top: 2px;
}
.nav-cart__dropdown .remove_from_cart_button,
.nav-cart__dropdown a.remove,
.nav-cart__dropdown .mini_cart_item a.remove {
/* Slim circle badge — SVG centered inside via flex. Explicit size
* required: without width/height the element collapses to 0×0 since
* font-size:0 leaves no inline content to size against. */
line-height: 16px !important;
text-align: center !important;
font-size: 0 !important; /* hides leftover × if PHP filter ran */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
padding: 0 !important;
background: #FFFFFF !important;
border: 1px solid #E0DCD4 !important;
border-radius: 999px !important;
color: #9B9B9B !important;
box-shadow: none !important;
opacity: 1 !important;
float: none !important;
/* Position: top-left overlay on the product thumb (user-preferred layout
* matching pre-Phase-6 behavior). Sits as small badge on the corner of
* the image. */
position: absolute !important;
top: 6px !important;
left: 6px !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
/* Mini-cart item must be position:relative so absolute × anchors correctly. */
.nav-cart__dropdown .mini_cart_item,
.nav-cart__dropdown .woocommerce-mini-cart-item {
position: relative !important;
}
/* SVG × icon — site-wide so home popup-cart styles correctly. */
.nav-cart__dropdown .remove_from_cart_button .lm-x-svg,
.nav-cart__dropdown a.remove .lm-x-svg,
.nav-cart__dropdown .mini_cart_item a.remove .lm-x-svg {
display: block !important;
width: 11px !important;
height: 11px !important;
margin: 0 !important;
flex-shrink: 0 !important;
pointer-events: none;
}
.nav-cart__dropdown .remove_from_cart_button:hover,
.nav-cart__dropdown a.remove:hover,
.nav-cart__dropdown .mini_cart_item a.remove:hover {
background: #FCEEE9 !important;
color: #A6321C !important;
border-color: #A6321C !important;
}
.nav-cart__dropdown .woocommerce-mini-cart__total {
display: flex;
justify-content: space-between;
font-weight: 700;
padding: 12px 0;
border-top: 1px solid rgba(59,16,83,0.1);
margin: 8px 0;
}
.nav-cart__dropdown .woocommerce-mini-cart__buttons {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
}
.nav-cart__dropdown .woocommerce-mini-cart__buttons .button {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.nav-cart__dropdown .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
background: transparent;
color: var(--s-deep, #3B1053);
border: 1px solid var(--s-deep, #3B1053);
}
.nav-cart__dropdown .woocommerce-mini-cart__buttons .button.checkout,
.nav-cart__dropdown .woocommerce-mini-cart__buttons .checkout.wc-forward {
background: var(--s-deep, #3B1053);
color: #fff;
}
.nav-cart__dropdown .woocommerce-mini-cart__buttons .checkout:hover { background: var(--s-accent, #9E2A6D); }
@media (max-width: 767px) {
.nav-cart__dropdown {
position: fixed;
top: auto;
bottom: 16px;
right: 16px;
left: 16px;
width: auto;
}
}
/* ===== Nav account icon ===== */
.nav-account {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(59, 16, 83, 0.08);
color: var(--s-deep, #3B1053);
transition: background 0.25s, color 0.25s, transform 0.25s;
text-decoration: none;
}
.nav-account:hover {
background: var(--s-deep, #3B1053);
color: #fff;
transform: translateY(-2px);
}
.nav-account svg { width: 20px; height: 20px; }
/* Mobile drawer divider */
.mobile-drawer__nav .drawer-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 10px 18px;
}
/* ===== Force Serif (Lora) on ALL price/amount classes across theme ===== */
.woocommerce-Price-amount,
.woocommerce-Price-amount.amount,
.woocommerce .amount,
.woocommerce-page .amount,
.price,
.price .amount,
.price ins,
.price ins .amount,
.pr-price .amt,
.pr-variant__price,
.pr-sticky__info .p,
.sm-zone [class*="price"] strong,
.sm-zone [class*="-amt"],
.sm-zone .prod-price,
.sm-zone .prod-price strong,
.sm-zone .coll-price strong,
.sm-zone .sf-prod-price strong,
.sm-zone .sf-combo-mini .mini-price strong,
.sm-zone .sf-combo-price-row strong,
.sm-zone .lk-prod-card .prod-price,
.sm-zone .lk-prod-card .prod-price strong,
.sm-zone .combo-price-row strong,
.sm-zone .pcod-strip__action .price-row strong,
.sm-zone .hm-safease-feature__price .price-amt,
.sm-zone .hm-safease-feature__price .price-sizes strong,
.pr-cross__foot .p,
.widget_shopping_cart_content .total .amount {
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-style: normal !important;
letter-spacing: -0.01em !important;
}
/* Phase 9 — Reverted: 24px scope restricted to .sf-prod-price strong only.
* See brand-page.css for the safease-landing override. */
/* MRP strike remains light serif too */
.sm-zone [class*="mrp"],
.sm-zone .mrp-strike,
.sm-zone .price-block .mrp,
.woocommerce del .amount,
.price del .amount {
font-family: 'Lora', serif !important;
font-weight: 400 !important;
font-style: italic !important;
letter-spacing: 0 !important;
opacity: 0.7;
}
/* ===== Safease size switcher on product page (L ↔ XXL) — smooth + editorial ===== */
.pr-size-switch { margin: 18px 0 10px; }
.pr-size-switch__label {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(59,16,83,0.5);
font-weight: 700;
margin-bottom: 8px;
}
.pr-size-switch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-size-switch__opt {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px 14px 42px;
border: 1.5px solid var(--p-border, rgba(27,42,91,0.12));
border-radius: 12px;
background: rgba(255,255,255,0.8);
color: var(--p-primary-dark, #3B1053);
text-decoration: none;
transition: border-color 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.pr-size-switch__opt::before {
content: '';
position: absolute;
top: 18px; left: 14px;
width: 18px; height: 18px;
border: 1.5px solid rgba(59,16,83,0.25);
border-radius: 50%;
background: #fff;
transition: border-color 0.3s, background 0.3s;
}
.pr-size-switch__opt::after {
content: '';
position: absolute;
top: 23px; left: 19px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--p-primary, #4A2366);
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.pr-size-switch__opt:hover {
border-color: var(--p-primary, #4A2366);
background: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 28px -16px rgba(74,35,102,0.28);
}
.pr-size-switch__opt.is-active {
border-color: var(--p-primary, #4A2366);
background: #fff;
box-shadow: 0 12px 24px -14px rgba(74,35,102,0.35);
}
.pr-size-switch__opt.is-active::before { border-color: var(--p-primary, #4A2366); }
.pr-size-switch__opt.is-active::after { transform: scale(1); }
.pr-size-switch__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.pr-size-switch__name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 800;
color: var(--p-primary-dark, #3B1053);
letter-spacing: -0.015em;
}
.pr-size-switch__price {
display: inline-flex;
align-items: baseline;
gap: 4px;
flex-wrap: nowrap;
white-space: nowrap;
font-family: 'Lora', serif;
font-weight: 600;
font-size: 13px;
color: var(--p-primary, #4A2366);
opacity: 0.85;
letter-spacing: -0.01em;
}
.pr-size-switch__price .woocommerce-Price-amount,
.pr-size-switch__price bdi,
.pr-size-switch__price ins,
.pr-size-switch__price del {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.pr-size-switch__spec {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
color: rgba(59,16,83,0.7);
}
.pr-size-switch__spec .dim {
font-weight: 700;
letter-spacing: 0.02em;
color: var(--p-primary, #4A2366);
}
.pr-size-switch__spec .dot { opacity: 0.35; }
.pr-size-switch__spec .use { font-weight: 500; }
.pr-size-switch__foot {
font-size: 10.5px;
letter-spacing: 0.08em;
color: rgba(59,16,83,0.5);
text-transform: uppercase;
font-weight: 600;
padding-top: 6px;
border-top: 1px dashed rgba(59,16,83,0.1);
}
@media (max-width: 520px) {
.pr-size-switch__grid { grid-template-columns: 1fr; }
.pr-size-switch__opt { padding: 14px 16px 12px 40px; }
}
/* Hide raw pack-multiplier text dump that appears after variant buttons */
.pr-hero__variants + br,
.pr-hero__variants + p:not(.pr-hero__claim),
.pr-hero__packs + br,
.pr-variant + .woocommerce-variation-description,
.variations_form .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-price {
display: none !important;
}
/* ===== WC CHECKOUT — force 2-col layout with explicit row placement ===== */
body.woocommerce-checkout .woocommerce-checkout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px !important;
grid-template-rows: auto 1fr !important;
gap: 24px clamp(24px, 4vw, 48px) !important;
align-items: start !important;
max-width: 1240px !important;
margin: 0 auto !important;
}
body.woocommerce-checkout #customer_details {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
background: #fff !important;
padding: 28px !important;
border-radius: 14px !important;
box-shadow: 0 18px 40px -24px rgba(27,42,91,0.12) !important;
min-width: 0 !important;
}
body.woocommerce-checkout #order_review_heading {
grid-column: 2 !important;
grid-row: 1 !important;
margin: 0 !important;
}
body.woocommerce-checkout #order_review {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
background: #FAF8F5 !important;
padding: 28px !important;
border-radius: 14px !important;
position: sticky !important;
top: 110px !important;
}
@media (max-width: 900px) {
body.woocommerce-checkout .woocommerce-checkout {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading {
grid-column: 1 !important;
grid-row: auto !important;
}
body.woocommerce-checkout #order_review {
position: static !important;
}
}
/* ===== WC MY ACCOUNT — force 2-col sidebar layout when logged in ===== */
.woocommerce-account.logged-in .limark-page .limark-page__content,
.woocommerce-account.logged-in .limark-woo__content {
max-width: none !important;
width: 100% !important;
}
.woocommerce-account.logged-in .woocommerce {
display: grid !important;
grid-template-columns: 260px minmax(0, 1fr) !important;
gap: 40px !important;
align-items: start !important;
width: 100% !important;
max-width: 1240px !important;
margin: 0 auto !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
width: 100% !important;
display: block !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
width: 100% !important;
display: block !important;
list-style: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block !important;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 2 !important;
min-width: 0 !important;
background: #fff !important;
padding: 32px !important;
border-radius: 14px !important;
box-shadow: 0 18px 40px -24px rgba(27,42,91,0.12) !important;
}
@media (max-width: 820px) {
.woocommerce-account.logged-in .woocommerce {
grid-template-columns: 1fr !important;
}
}
/* ===== Active nav link indicator =====
* Clean pill background only — no floating dot below.
* Pill bg = soft brand tint, text = brand accent. */
.nav-menu .nav-link,
.nav-menu .nav-icon {
position: relative;
transition: color 0.25s, background 0.25s;
}
.nav-menu .nav-link.is-active,
.nav-menu .nav-icon.is-active {
color: var(--s-accent, #9E2A6D) !important;
font-weight: 600;
background: var(--s-50, #F8F4FB);
}
.nav-menu .nav-link.is-active::after,
.nav-menu .nav-icon.is-active::after {
display: none !important;
content: none !important;
}
/* PHASE 5 — UNIFIED NAV CLEARANCE moved to woocommerce.css end (single source). */