/* REWYNE — Premium Editorial Skincare
Deep blue dominant, gold sparingly, red strategically. */
:root{
--rw-blue:#0B2F59;
--rw-navy:#071A34;
--rw-red:#B8283A;
--rw-red-dark:#8E1C2B;
--rw-gold:#C9A96A;
--rw-gold-soft:#E4D2A8;
--rw-ivory:#F7F3EC;
--rw-ivory-2:#EEE7DA;
--rw-charcoal:#1F2328;
--rw-mute:#6B7A90;
--rw-line:rgba(11,47,89,.12);
--rw-line-soft:rgba(11,47,89,.06);
--rw-white:#FFFFFF;
--ff-serif:"Cormorant Garamond", "Noto Serif TC", Georgia, serif;
--ff-sans:"Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
--radius-sm:4px;
--radius:8px;
--radius-lg:14px;
--container:1240px;
--container-wide:1360px;
--container-narrow:880px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[lang="zh-Hant"]{--ff-serif:"Noto Serif TC","Cormorant Garamond",serif;--ff-sans:"Noto Sans TC","Manrope",sans-serif}
body{
margin:0;
font-family:var(--ff-sans);
font-size:16px;
line-height:1.6;
color:var(--rw-charcoal);
background:var(--rw-ivory);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
/* Typography */
h1,h2,h3,h4{font-family:var(--ff-serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:0 0 .5em;color:var(--rw-navy);font-feature-settings:"lnum" 1,"tnum" 0}
h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:400;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:400}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h4{font-size:1.2rem}
p{margin:0 0 1em}
html[lang="zh-Hant"] h1,
html[lang="zh-Hant"] h2,
html[lang="zh-Hant"] h3{letter-spacing:0;font-weight:500}
.eyebrow{
font-family:var(--ff-sans);
font-size:.72rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--rw-gold);
font-weight:600;
margin:0 0 1.2rem;
display:inline-flex;
align-items:center;
gap:.6rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--rw-gold)}
html[lang="zh-Hant"] .eyebrow{letter-spacing:.18em;font-size:.78rem}
.lede{font-family:var(--ff-serif);font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--rw-navy);line-height:1.45;font-weight:400;font-style:italic}
html[lang="zh-Hant"] .lede{font-style:normal}
/* Layout */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.container-wide{max-width:var(--container-wide)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 24px}
section{padding:clamp(64px,8vw,120px) 0}
.section-tight{padding:clamp(40px,5vw,72px) 0}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
.grid-3,.grid-4{grid-template-columns:1fr}
}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.reverse{grid-template-columns:1fr 1.05fr}
.split.reverse > *:first-child{order:2}
@media(max-width:900px){.split,.split.reverse{grid-template-columns:1fr}.split.reverse > *:first-child{order:0}}
/* Announcement bar */
.announce{background:var(--rw-navy);color:var(--rw-ivory);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;text-align:center;position:relative}
.announce a{color:var(--rw-gold-soft);text-decoration:underline;text-decoration-color:rgba(228,210,168,.4);text-underline-offset:3px}
.announce .close{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--rw-ivory);opacity:.7;font-size:1rem;padding:4px}
.announce .close:hover{opacity:1}
html[lang="zh-Hant"] .announce{letter-spacing:.08em;text-transform:none}
/* Header */
.site-header{position:sticky;top:0;z-index:80;background:rgba(247,243,236,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rw-line-soft)}
.site-header.is-dark{background:rgba(7,26,52,.9);border-bottom-color:rgba(201,169,106,.15);color:var(--rw-ivory)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--container-wide);margin:0 auto;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--rw-navy)}
.is-dark .nav-logo{color:var(--rw-ivory)}
.nav-logo svg{height:26px;width:auto}
.nav-logo img{height:26px;width:auto;display:block}
.footer-brand .logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center;font-size:.85rem;letter-spacing:.04em}
.nav-links a{color:var(--rw-charcoal);position:relative;padding:6px 0;transition:color .2s var(--ease)}
.is-dark .nav-links a{color:var(--rw-ivory)}
.nav-links a:hover{color:var(--rw-blue)}
.is-dark .nav-links a:hover{color:var(--rw-gold)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--rw-gold)}
.nav-actions{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;font-size:.78rem;letter-spacing:.08em;border:1px solid var(--rw-line);border-radius:999px;overflow:hidden}
.is-dark .lang-switch{border-color:rgba(201,169,106,.3)}
.lang-switch button{padding:6px 12px;color:var(--rw-mute);font-weight:500;white-space:nowrap;line-height:1}
.is-dark .lang-switch button{color:var(--rw-ivory);opacity:.7}
.lang-switch button.active{background:var(--rw-navy);color:var(--rw-ivory)}
.is-dark .lang-switch button.active{background:var(--rw-gold);color:var(--rw-navy);opacity:1}
.cart-btn{position:relative;padding:8px;display:flex;align-items:center;gap:6px;color:inherit}
.cart-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.cart-count{position:absolute;top:0;right:0;background:var(--rw-red);color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.nav-toggle{display:none;padding:8px;color:inherit}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5}
@media(max-width:1020px){
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--rw-ivory);padding:20px 24px;border-bottom:1px solid var(--rw-line);gap:18px}
.nav-links.open{display:flex}
.nav-toggle{display:flex}
.is-dark .nav-links{background:var(--rw-navy)}
}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;transition:all .25s var(--ease);cursor:pointer;white-space:nowrap;border:1px solid transparent;line-height:1}
html[lang="zh-Hant"] .btn{letter-spacing:.08em;text-transform:none;font-weight:500}
.btn-primary{background:var(--rw-red);color:#fff}
.btn-primary:hover{background:var(--rw-red-dark);transform:translateY(-1px)}
.btn-dark{background:var(--rw-navy);color:var(--rw-ivory)}
.btn-dark:hover{background:var(--rw-blue);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--rw-navy);border-color:var(--rw-navy)}
.btn-ghost:hover{background:var(--rw-navy);color:var(--rw-ivory)}
.btn-gold{background:transparent;color:var(--rw-gold);border-color:var(--rw-gold)}
.btn-gold:hover{background:var(--rw-gold);color:var(--rw-navy)}
.btn-link{background:none;color:var(--rw-navy);padding:0;letter-spacing:.12em;border-bottom:1px solid var(--rw-gold);padding-bottom:4px;border-radius:0}
.btn-link:hover{color:var(--rw-red);border-color:var(--rw-red)}
.btn-sm{padding:10px 20px;font-size:.74rem}
.btn-block{width:100%}
/* Hero */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;background:var(--rw-navy);color:var(--rw-ivory)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.58}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,52,.35) 0%,rgba(7,26,52,.65) 60%,rgba(7,26,52,.85) 100%)}
.hero-content{position:relative;z-index:1;max-width:720px;padding:120px 0}
.hero h1{color:var(--rw-ivory);font-size:clamp(3rem,7vw,6rem);line-height:.98}
.hero h1 .italic{font-style:italic;color:var(--rw-gold-soft);font-weight:300}
.hero-sub{font-size:1.1rem;color:rgba(247,243,236,.8);max-width:520px;margin:1.5rem 0 2.5rem;line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cta .btn-ghost{color:var(--rw-ivory);border-color:rgba(247,243,236,.5)}
.hero-cta .btn-ghost:hover{background:var(--rw-ivory);color:var(--rw-navy);border-color:var(--rw-ivory)}
/* Small page header hero */
.page-hero{background:var(--rw-navy);color:var(--rw-ivory);padding:clamp(90px,12vw,160px) 0 clamp(60px,8vw,100px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--rw-gold),transparent)}
.page-hero h1{color:var(--rw-ivory)}
.page-hero .eyebrow{color:var(--rw-gold)}
.page-hero p{color:rgba(247,243,236,.75);max-width:580px;font-size:1.05rem}
/* Sections/Bands */
.band{background:var(--rw-ivory)}
.band-soft{background:var(--rw-ivory-2)}
.band-dark{background:var(--rw-navy);color:var(--rw-ivory)}
.band-dark h2,.band-dark h3,.band-dark h4{color:var(--rw-ivory)}
.band-dark p{color:rgba(247,243,236,.78)}
.band-dark .eyebrow{color:var(--rw-gold)}
.band-white{background:#fff}
/* Cards */
.card{background:#fff;border:1px solid var(--rw-line-soft);transition:all .3s var(--ease)}
.card:hover{border-color:var(--rw-line);transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(7,26,52,.25)}
.product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rw-line-soft);padding:0;transition:all .3s var(--ease);position:relative;overflow:hidden}
.product-card .img{aspect-ratio:4/5;background:var(--rw-ivory-2);overflow:hidden;position:relative}
.product-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .img img{transform:scale(1.04)}
.product-card:hover{box-shadow:0 22px 48px -28px rgba(7,26,52,.3);border-color:var(--rw-line)}
.product-card .body{padding:24px;display:flex;flex-direction:column;flex:1;gap:8px}
.product-card .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rw-gold);font-weight:600}
.product-card h3{font-size:1.35rem;margin:0}
.product-card .price{font-family:var(--ff-sans);font-weight:600;color:var(--rw-navy);letter-spacing:.02em}
.product-card .desc{font-size:.92rem;color:var(--rw-mute);margin:0;flex:1}
.product-card .actions{display:flex;gap:8px;margin-top:14px}
/* Bundle card */
.bundle-card{background:#fff;border:1px solid var(--rw-line);padding:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.bundle-card .img{aspect-ratio:3/2;background:var(--rw-ivory-2);overflow:hidden}
.bundle-card .img img{width:100%;height:100%;object-fit:cover}
.bundle-card .body{padding:32px;display:flex;flex-direction:column;flex:1}
.bundle-card h3{font-size:1.7rem;margin:0 0 10px}
.bundle-card .contents{color:var(--rw-mute);font-size:.92rem;margin-bottom:18px}
.bundle-card .prices{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.bundle-card .price-old{text-decoration:line-through;color:var(--rw-mute);font-size:1rem}
.bundle-card .price-new{font-family:var(--ff-serif);font-size:2rem;color:var(--rw-red);font-weight:500}
.bundle-card .save{color:var(--rw-red);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:20px}
.bundle-card .desc{font-style:italic;color:var(--rw-charcoal);margin-bottom:24px;font-family:var(--ff-serif);font-size:1.1rem}
html[lang="zh-Hant"] .bundle-card .desc{font-style:normal}
.best-value{position:absolute;top:22px;right:22px;background:var(--rw-gold);color:var(--rw-navy);padding:6px 14px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;z-index:2}
html[lang="zh-Hant"] .best-value{letter-spacing:.1em;font-size:.72rem}
/* Trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:48px 0;border-top:1px solid var(--rw-line);border-bottom:1px solid var(--rw-line)}
.trust .item{text-align:center}
.trust .item .num{font-family:var(--ff-serif);font-size:2rem;color:var(--rw-gold);font-weight:500;line-height:1}
.trust .item .label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rw-mute);margin-top:8px}
html[lang="zh-Hant"] .trust .item .label{letter-spacing:.08em;text-transform:none}
@media(max-width:700px){.trust{grid-template-columns:repeat(2,1fr);gap:20px}}
/* Feature list / benefits */
.benefits{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.benefits li{display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--rw-line-soft)}
.benefits li:last-child{border-bottom:0}
.benefits .num{font-family:var(--ff-serif);color:var(--rw-gold);font-size:1.4rem;line-height:1;min-width:32px}
.benefits .txt strong{display:block;font-family:var(--ff-serif);font-size:1.15rem;color:var(--rw-navy);margin-bottom:4px;font-weight:500}
.benefits .txt p{margin:0;font-size:.95rem;color:var(--rw-mute)}
/* Forms */
.form{display:grid;gap:18px;max-width:620px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rw-mute);margin-bottom:8px;font-weight:500}
html[lang="zh-Hant"] .field label{letter-spacing:.05em;text-transform:none}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--rw-line);background:#fff;font:inherit;color:var(--rw-charcoal);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rw-navy)}
.field textarea{min-height:140px;resize:vertical;font-family:inherit}
.form-msg{padding:14px 18px;font-size:.9rem;display:none}
.form-msg.show{display:block}
.form-msg.success{background:rgba(201,169,106,.15);color:var(--rw-navy);border-left:3px solid var(--rw-gold)}
.form-msg.error{background:rgba(184,40,58,.08);color:var(--rw-red-dark);border-left:3px solid var(--rw-red)}
/* Footer */
.site-footer{background:var(--rw-navy);color:rgba(247,243,236,.75);padding:80px 0 40px;font-size:.9rem}
.site-footer h4{color:var(--rw-ivory);font-family:var(--ff-sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;font-weight:600}
html[lang="zh-Hant"] .site-footer h4{letter-spacing:.08em;text-transform:none}
.site-footer a{color:rgba(247,243,236,.7);display:block;padding:5px 0;transition:color .2s}
.site-footer a:hover{color:var(--rw-gold)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:60px;border-bottom:1px solid rgba(247,243,236,.12)}
@media(max-width:860px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{margin-bottom:20px;color:var(--rw-ivory)}
.footer-brand p{max-width:320px;color:rgba(247,243,236,.55);font-size:.88rem}
.newsletter{display:flex;gap:0;margin-top:16px;max-width:340px}
.newsletter input{flex:1;padding:12px 14px;border:1px solid rgba(247,243,236,.2);background:rgba(247,243,236,.04);color:var(--rw-ivory);font-size:.88rem}
.newsletter input::placeholder{color:rgba(247,243,236,.4)}
.newsletter button{padding:12px 20px;background:var(--rw-gold);color:var(--rw-navy);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
html[lang="zh-Hant"] .newsletter button{letter-spacing:.05em;text-transform:none}
.footer-bottom{padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:.78rem;color:rgba(247,243,236,.5)}
.footer-bottom .links{display:flex;gap:24px;flex-wrap:wrap}
.footer-bottom .links a{display:inline-block;padding:0}
/* Cart drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(7,26,52,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s;z-index:100}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--rw-ivory);z-index:101;transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-header{padding:22px 26px;border-bottom:1px solid var(--rw-line);display:flex;align-items:center;justify-content:space-between}
.cart-header h3{margin:0;font-size:1.4rem}
.cart-close{font-size:1.4rem;color:var(--rw-mute);padding:4px}
.cart-body{flex:1;overflow-y:auto;padding:0 26px}
.cart-empty{text-align:center;padding:60px 20px;color:var(--rw-mute)}
.cart-empty svg{width:48px;height:48px;margin:0 auto 18px;opacity:.3}
.cart-items{padding:20px 0;display:grid;gap:18px}
.cart-item{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--rw-line-soft)}
.cart-item .thumb{width:80px;height:100px;background:#fff;border:1px solid var(--rw-line-soft);overflow:hidden}
.cart-item .thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .meta h5{font-family:var(--ff-serif);font-size:1.05rem;margin:0 0 2px;color:var(--rw-navy);font-weight:500}
.cart-item .meta .p{font-size:.85rem;color:var(--rw-mute);margin-bottom:6px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--rw-line)}
.qty button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--rw-navy)}
.qty button:hover{background:var(--rw-ivory-2)}
.qty input{width:30px;text-align:center;border:0;background:transparent;font:inherit;padding:4px 0}
.cart-item .remove{color:var(--rw-mute);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;background:none;padding:4px 0}
.cart-item .remove:hover{color:var(--rw-red)}
.cart-item .line-total{font-weight:600;color:var(--rw-navy);text-align:right;font-size:.95rem}
.cart-footer{padding:20px 26px;border-top:1px solid var(--rw-line);background:#fff}
.promo{display:flex;gap:8px;margin-bottom:14px}
.promo input{flex:1;padding:10px 12px;border:1px solid var(--rw-line);font:inherit;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.promo button{padding:10px 16px;background:var(--rw-navy);color:var(--rw-ivory);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.promo-msg{font-size:.8rem;margin-bottom:12px;min-height:1em}
.promo-msg.ok{color:var(--rw-gold)}
.promo-msg.err{color:var(--rw-red)}
.cart-totals{display:grid;gap:6px;margin-bottom:14px;font-size:.9rem}
.cart-totals .row{display:flex;justify-content:space-between}
.cart-totals .row.total{padding-top:10px;border-top:1px solid var(--rw-line-soft);font-size:1.1rem;font-weight:600;color:var(--rw-navy)}
.cart-totals .row.discount{color:var(--rw-red)}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(7,26,52,.6);backdrop-filter:blur(4px);z-index:120;opacity:0;visibility:hidden;transition:all .3s;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:var(--rw-ivory);max-width:460px;width:100%;padding:44px;position:relative;transform:translateY(10px);transition:transform .3s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-close{position:absolute;top:16px;right:16px;font-size:1.3rem;color:var(--rw-mute);padding:4px}
.modal h3{margin-top:0}
/* Misc */
.divider-gold{display:block;width:60px;height:1px;background:var(--rw-gold);margin:28px 0}
.pill{display:inline-block;padding:4px 12px;background:var(--rw-ivory-2);color:var(--rw-navy);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
html[lang="zh-Hant"] .pill{letter-spacing:.05em;text-transform:none;font-size:.74rem}
/* Product page hero */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:clamp(60px,8vw,100px) 0}
@media(max-width:900px){.product-hero{grid-template-columns:1fr;gap:40px}}
.product-hero .gallery{background:#fff;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--rw-line-soft)}
.product-hero .gallery img{width:100%;height:100%;object-fit:cover}
.product-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:14px}
.product-hero .price{font-family:var(--ff-serif);font-size:2rem;color:var(--rw-red);margin:20px 0;font-weight:500}
.product-hero .buy{display:flex;gap:14px;align-items:stretch;margin:28px 0}
.product-hero .sensory{display:flex;gap:24px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rw-line-soft)}
.product-hero .sensory div{font-size:.85rem}
.product-hero .sensory strong{display:block;font-family:var(--ff-serif);color:var(--rw-navy);margin-bottom:2px;font-weight:500;font-size:.95rem}
.product-hero .sensory span{color:var(--rw-mute)}
/* FAQ / accordion */
.faq-item{border-bottom:1px solid var(--rw-line);padding:22px 0;cursor:pointer}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--ff-serif);font-size:1.2rem;color:var(--rw-navy);font-weight:500}
.faq-q::after{content:"+";font-size:1.4rem;color:var(--rw-gold);transition:transform .3s;font-family:var(--ff-sans);font-weight:300;line-height:1}
.faq-item.open .faq-q::after{content:"−"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:16px 0 4px;color:var(--rw-mute);line-height:1.7;max-width:780px}
.faq-item.open .faq-a{max-height:800px}
/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.post-card{background:#fff;border:1px solid var(--rw-line-soft);transition:all .3s}
.post-card:hover{border-color:var(--rw-line);transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(7,26,52,.2)}
.post-card .img{aspect-ratio:5/3;overflow:hidden;background:var(--rw-ivory-2)}
.post-card .img img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:28px}
.post-card .meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rw-gold);font-weight:600;margin-bottom:10px}
.post-card h3{font-size:1.4rem;margin:0 0 10px}
.post-card p{color:var(--rw-mute);font-size:.94rem;margin:0}
.article{max-width:720px;margin:0 auto;padding:0 24px}
.article h1{font-size:clamp(2.2rem,4.5vw,3.5rem)}
.article p{font-size:1.08rem;line-height:1.8;color:var(--rw-charcoal)}
.article h2{margin-top:2em;font-size:1.8rem}
.article h3{margin-top:1.6em;font-size:1.35rem}
.article blockquote{border-left:2px solid var(--rw-gold);padding:8px 0 8px 28px;margin:2em 0;font-family:var(--ff-serif);font-style:italic;font-size:1.3rem;color:var(--rw-navy);line-height:1.4}
html[lang="zh-Hant"] .article blockquote{font-style:normal}
.article img{margin:2em 0;border-radius:2px}
.article ul{padding-left:1.2em;color:var(--rw-charcoal)}
.article ul li{margin-bottom:.5em;line-height:1.7}
.article hr{border:0;height:1px;background:var(--rw-line);margin:3em auto;width:60px}
/* Hero swap for homepage variation */
.hero-meta{display:flex;gap:40px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(247,243,236,.15);flex-wrap:wrap}
.hero-meta div{font-size:.82rem;color:rgba(247,243,236,.6);letter-spacing:.12em;text-transform:uppercase}
.hero-meta strong{display:block;font-family:var(--ff-serif);color:var(--rw-gold-soft);font-size:1.6rem;margin-bottom:6px;font-weight:400;letter-spacing:0;text-transform:none}
html[lang="zh-Hant"] .hero-meta div{letter-spacing:.04em;text-transform:none}
/* Science specifics */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0}
@media(max-width:700px){.stat-row{grid-template-columns:1fr}}
.stat-row .stat{padding:28px;background:#fff;border:1px solid var(--rw-line-soft);border-top:2px solid var(--rw-gold)}
.stat-row .stat .k{font-family:var(--ff-serif);font-size:2.4rem;color:var(--rw-navy);font-weight:400;line-height:1}
.stat-row .stat .v{font-size:.85rem;color:var(--rw-mute);margin-top:8px}
/* Utility */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.hide-mobile{display:block}
.show-mobile{display:none}
@media(max-width:700px){
.hide-mobile{display:none}
.show-mobile{display:block}
}
/* Reveal animation */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
/* Price tag */
.price-tag{font-family:var(--ff-serif);color:var(--rw-navy);font-size:1.4rem;font-weight:500}
.price-tag .curr{font-size:.9rem;color:var(--rw-mute);font-family:var(--ff-sans);margin-right:2px}
/* Section header centered */
.section-head{text-align:center;max-width:700px;margin:0 auto 60px}
.section-head .eyebrow{justify-content:center;display:inline-flex}
.section-head .eyebrow::before{width:22px}
.section-head .eyebrow::after{content:"";width:22px;height:1px;background:var(--rw-gold)}
.section-head p{color:var(--rw-mute);font-size:1.05rem}
/* Image block */
.img-frame{position:relative;overflow:hidden;background:var(--rw-ivory-2)}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}
.img-frame.portrait{aspect-ratio:3/4}
.img-frame.landscape{aspect-ratio:16/10}
.img-frame.square{aspect-ratio:1/1}
.quote-block{background:var(--rw-ivory-2);padding:clamp(40px,6vw,80px);text-align:center;border:1px solid var(--rw-line-soft)}
.quote-block .mark{color:var(--rw-gold);font-size:3rem;font-family:var(--ff-serif);line-height:.5}
.quote-block blockquote{font-family:var(--ff-serif);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--rw-navy);margin:.5em auto 1em;max-width:760px;line-height:1.35;font-weight:400}
.quote-block cite{font-style:normal;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rw-mute)}
html[lang="zh-Hant"] .quote-block cite{letter-spacing:.08em;text-transform:none}
/* Process rows */
.process{counter-reset:step;display:grid;gap:0}
.process .step{display:grid;grid-template-columns:80px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--rw-line-soft)}
.process .step:first-child{border-top:0}
.process .step::before{counter-increment:step;content:"0" counter(step);font-family:var(--ff-serif);color:var(--rw-gold);font-size:1.6rem;line-height:1}
.process .step h4{font-family:var(--ff-serif);font-size:1.3rem;margin:0 0 8px;font-weight:500;color:var(--rw-navy)}
.process .step p{margin:0;color:var(--rw-mute)}
/* Hero side image */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;min-height:88vh;align-items:stretch;padding:0!important}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;min-height:auto}.hero-split .hero-img{aspect-ratio:4/3}}
.hero-split .hero-copy{background:var(--rw-navy);color:var(--rw-ivory);padding:clamp(60px,8vw,120px) clamp(32px,5vw,80px);display:flex;align-items:center}
.hero-split .hero-img{background:var(--rw-ivory-2)}
.hero-split .hero-img img{width:100%;height:100%;object-fit:cover}
.hero-split .hero-copy-inner{max-width:560px}
.hero-split h1{color:var(--rw-ivory);font-size:clamp(3rem,6.5vw,5.8rem);margin-bottom:.4em}
.hero-split h1 .italic{font-style:italic;color:var(--rw-gold-soft);font-weight:300}
.hero-split p{color:rgba(247,243,236,.75);font-size:1.1rem;max-width:480px;margin:0 0 2rem}
/* Page title for simple content pages */
.simple-page{padding:clamp(80px,10vw,140px) 0 clamp(60px,8vw,100px)}
.simple-page h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:.4em}
.simple-page .content{max-width:720px;margin:0 auto}
.simple-page .content h2{font-size:1.5rem;margin-top:2em}
.simple-page .content h3{font-size:1.2rem;margin-top:1.6em}
/* Floating toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--rw-navy);color:var(--rw-ivory);padding:14px 24px;z-index:130;font-size:.88rem;letter-spacing:.04em;box-shadow:0 12px 28px -12px rgba(7,26,52,.35);opacity:0;transition:all .3s var(--ease)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* Form row specifically for 3 cols */
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:640px){.form-row-3{grid-template-columns:1fr}}
/* Compliance footnote */
.fine{font-size:.78rem;color:var(--rw-mute);line-height:1.6;max-width:780px}
.fine a{color:var(--rw-navy);border-bottom:1px solid var(--rw-gold)}
/* Certification band — quiet horizontal strip */
.certs-band{padding:56px 0;border-top:1px solid var(--rw-line-soft);border-bottom:1px solid var(--rw-line-soft)}
.certs-band .head{text-align:center;max-width:720px;margin:0 auto 40px}
.certs-band .head h3{font-family:var(--ff-serif);font-weight:500;font-size:1.55rem;line-height:1.3;color:var(--rw-navy);margin:.4rem 0}
.certs-band .head p{color:var(--rw-mute);font-size:.93rem;line-height:1.65;max-width:620px;margin:.8rem auto 0}
.certs-row{display:flex;gap:56px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.cert{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:170px;text-align:center}
.cert img{width:86px;height:86px;object-fit:contain;opacity:.9;transition:opacity .25s var(--ease)}
.cert:hover img{opacity:1}
.cert .cap{font-family:var(--ff-sans);font-size:.78rem;letter-spacing:.04em;color:var(--rw-mute);line-height:1.5}
.band-dark .certs-band,.certs-band.on-dark{border-color:rgba(247,243,236,.12)}
.band-dark .certs-band .head h3,.certs-band.on-dark .head h3{color:var(--rw-ivory)}
.band-dark .certs-band .head p,.certs-band.on-dark .head p{color:rgba(247,243,236,.62)}
.band-dark .cert img,.certs-band.on-dark .cert img{filter:brightness(0) invert(1);opacity:.82}
.band-dark .cert .cap,.certs-band.on-dark .cert .cap{color:rgba(247,243,236,.6)}
@media(max-width:640px){
.certs-row{gap:28px}
.cert{max-width:44%}
.cert img{width:64px;height:64px}
.cert .cap{font-size:.72rem}
}
/* =========================================================
ROUND 3 — Palette rebalance, nowrap-clause, cert row,
testimonials, currency toggle, btn-red-outline
========================================================= */
:root{
--rw-red-soft:#9E2633;
--rw-red-ink:#7A1E29;
}
/* Balanced wrap + nowrap clause spans */
h1, h2, .display{ text-wrap: balance; }
h3, h4{ text-wrap: balance; }
.nowrap-clause{ white-space: nowrap; }
@media (max-width: 640px){
.nowrap-clause{ white-space: normal; }
}
/* Cap display sizes a bit to avoid overflow */
h1{ font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2{ font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
/* Announcement bar → red */
.announce{
background: var(--rw-red-soft);
color: var(--rw-ivory);
}
.announce .close{ color: var(--rw-ivory); opacity: .8; }
.announce .close:hover{ opacity: 1; }
.announce .insider-pill{
display:inline-block;
margin-left:.75rem;
padding:.1rem .55rem;
border:1px solid rgba(247,243,236,.45);
border-radius:2px;
font-size:.62rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--rw-ivory);
}
/* Eyebrow — alternate red (use .eyebrow--red on selected spots) */
.eyebrow--red{ color: var(--rw-red); }
.eyebrow--red::before{ background: var(--rw-red); }
/* Hero red-period / red-underline accents */
.hero-accent-dot{ color: var(--rw-red); }
.hero-accent-underline{
border-bottom: 2px solid var(--rw-red);
padding-bottom: 2px;
}
/* Cert strip — 3-in-a-row, single column on mobile */
.certs-row{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: start;
justify-items: center;
margin-top: 32px;
}
.certs-row .cert{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .75rem;
max-width: 220px;
}
.certs-row .cert img{
max-width: 120px;
width: 100%;
height: auto;
object-fit: contain;
aspect-ratio: auto;
}
.certs-row .cert .cap{
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--rw-mute);
line-height: 1.35;
}
@media (max-width: 640px){
.certs-row{ grid-template-columns: 1fr; gap: 28px; }
}
/* Bundle savings red */
.bundle-card .save{ color: var(--rw-red) !important; font-weight: 600; }
/* Best Value badge + LIMITED / INSIDER badges */
.best-value, .badge-red{
background: var(--rw-red);
color: var(--rw-ivory);
padding: .28rem .8rem;
font-size: .64rem;
letter-spacing: .18em;
text-transform: uppercase;
border-radius: 2px;
font-weight: 600;
display: inline-block;
}
/* New button variant — red outline */
.btn-red-outline{
display:inline-flex; align-items:center; justify-content:center;
border: 1.5px solid var(--rw-red);
color: var(--rw-red);
background: transparent;
padding: .85rem 1.4rem;
font-weight: 600;
font-size: .82rem;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 2px;
transition: background .2s var(--ease), color .2s var(--ease);
}
.btn-red-outline:hover{ background: var(--rw-red); color: var(--rw-ivory); }
/* Inline anchor hover — red underline */
.prose a, .body-link{
color: var(--rw-navy);
border-bottom: 1.5px solid var(--rw-gold);
transition: border-color .2s var(--ease);
padding-bottom: 1px;
}
.prose a:hover, .body-link:hover{ border-bottom-color: var(--rw-red); }
/* Newsletter submit → red */
.newsletter button{
background: var(--rw-red);
color: var(--rw-ivory);
border: 0;
padding: 0 1.2rem;
border-radius: 2px;
}
.newsletter button:hover{ background: var(--rw-red-ink); }
/* Promo ok state → red check */
.promo-msg.ok{ color: var(--rw-red); }
.promo-msg.ok::before{ content:"✓ "; color: var(--rw-red); font-weight: 700; }
.promo-msg.err{ color: var(--rw-red-ink); }
/* Currency switcher */
.currency-switch{
display: inline-flex;
gap: 0;
border: 1px solid var(--rw-line);
border-radius: 2px;
overflow: hidden;
}
.currency-switch button{
padding: .42rem .7rem;
font-size: .74rem;
letter-spacing: .08em;
color: var(--rw-navy);
background: transparent;
border: 0;
border-right: 1px solid var(--rw-line);
font-weight: 500;
}
.currency-switch button:last-child{ border-right: 0; }
.currency-switch button.active{
background: var(--rw-navy);
color: var(--rw-ivory);
}
.currency-switch button:hover:not(.active){ background: var(--rw-ivory-2); }
/* Language switcher — refine */
.lang-switch{
display: inline-flex;
border: 1px solid var(--rw-line);
border-radius: 2px;
overflow: hidden;
margin-right: .75rem;
}
.lang-switch a, .lang-switch button{
padding: .42rem .7rem;
font-size: .74rem;
letter-spacing: .08em;
color: var(--rw-navy);
background: transparent;
border: 0;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.lang-switch a.active, .lang-switch button.active{
background: var(--rw-navy);
color: var(--rw-ivory);
}
/* Testimonials */
.testimonial-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 900px){ .testimonial-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial-card{
background: var(--rw-white);
border-top: 2px solid var(--rw-gold);
padding: 32px 28px;
border-radius: 2px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 1px 0 var(--rw-line-soft);
}
.testimonial-card .quote-mark{
font-family: var(--ff-serif);
color: var(--rw-gold);
font-size: 2.4rem;
line-height: 1;
margin: 0;
}
.testimonial-card .stars{
color: var(--rw-gold);
letter-spacing: .1em;
font-size: .95rem;
}
.testimonial-card blockquote{
margin: 0;
font-family: var(--ff-serif);
font-style: italic;
color: var(--rw-navy);
font-size: 1.08rem;
line-height: 1.5;
}
html[lang="zh-Hant"] .testimonial-card blockquote{ font-style: normal; }
.testimonial-card .attribution{
margin-top: auto;
font-size: .82rem;
color: var(--rw-charcoal);
font-weight: 600;
}
.testimonial-card .context{
font-size: .72rem;
color: var(--rw-mute);
letter-spacing: .05em;
}
.testimonial-card .pill{
display: inline-block;
padding: .18rem .55rem;
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
border-radius: 2px;
border: 1px solid var(--rw-line);
color: var(--rw-mute);
margin-right: .4rem;
}
.testimonial-card .pill.pro{
background: var(--rw-navy);
color: var(--rw-ivory);
border-color: var(--rw-navy);
}
.testimonial-compact{
background: var(--rw-ivory-2);
padding: 20px 24px;
border-left: 3px solid var(--rw-gold);
}
.testimonial-compact blockquote{
font-family: var(--ff-serif);
font-style: italic;
font-size: .98rem;
color: var(--rw-navy);
margin: 0 0 .5rem;
}
.testimonial-compact .attribution{ font-size: .78rem; font-weight: 600; color: var(--rw-charcoal); }
.testimonial-filters{
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 40px;
}
.testimonial-filters button{
padding: .5rem 1rem;
border: 1px solid var(--rw-line);
border-radius: 2px;
font-size: .76rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--rw-navy);
background: var(--rw-ivory);
}
.testimonial-filters button.active{
background: var(--rw-navy);
color: var(--rw-ivory);
border-color: var(--rw-navy);
}
/* Article layout */
.article-hero{
padding: 48px 0 32px;
border-bottom: 1px solid var(--rw-line);
}
.article-hero .meta{
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--rw-red);
font-weight: 600;
margin-bottom: 1rem;
}
.article-hero h1{ font-size: clamp(2.2rem, 4.5vw, 3.8rem); max-width: 900px; }
.article-body{
max-width: 720px;
margin: 48px auto;
padding: 0 24px;
font-size: 1.06rem;
line-height: 1.75;
}
.article-body p{ margin: 0 0 1.2em; color: var(--rw-charcoal); }
.article-body h2{
font-size: clamp(1.5rem, 2.6vw, 2rem);
margin-top: 2em;
color: var(--rw-navy);
}
.article-body h3{ font-size: 1.2rem; margin-top: 1.5em; }
.article-body figure{ margin: 2em 0; }
.article-body figure img{ width: 100%; border-radius: 2px; }
.article-body figure figcaption{
font-size: .82rem;
color: var(--rw-mute);
font-style: italic;
text-align: center;
margin-top: .7em;
}
.related-articles{
border-top: 1px solid var(--rw-line);
padding-top: 40px;
margin-top: 48px;
}
.related-articles h3{
font-family: var(--ff-sans);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--rw-gold);
font-weight: 600;
}
/* 404 */
.err-page{
min-height: 72vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
background: var(--rw-navy);
color: var(--rw-ivory);
}
.err-page h1{ color: var(--rw-ivory); font-size: clamp(2.5rem, 6vw, 5rem); }
.err-page .eyebrow{ color: var(--rw-gold-soft); }
.err-page .eyebrow::before{ background: var(--rw-gold-soft); }
.err-page p{ color: rgba(247,243,236,.8); max-width: 520px; margin: 0 auto 2rem; }
.err-page .err-actions{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Science-specific inline SVG containers */
.svg-frame{
background: var(--rw-ivory);
border: 1px solid var(--rw-line);
padding: 28px;
border-radius: 2px;
margin: 32px 0;
}
.svg-frame svg{ width: 100%; height: auto; display: block; }
.svg-caption{
font-size: .82rem;
color: var(--rw-mute);
text-align: center;
margin-top: 14px;
font-style: italic;
}
.svg-disclaimer{
font-size: .72rem;
color: var(--rw-mute);
text-align: center;
margin-top: 8px;
}
/* Sensory bar chart bars */
.bar-chart .bar-std{ fill: var(--rw-gold-soft); }
.bar-chart .bar-nano{ fill: var(--rw-navy); }
.bar-chart text{ font-family: var(--ff-sans); font-size: 12px; fill: var(--rw-charcoal); }
.bar-chart .axis{ stroke: var(--rw-line); stroke-width: 1; }
/* Science pillars (3-card row) */
.science-pillars{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 800px){ .science-pillars{ grid-template-columns: 1fr; } }
.science-pillars .pillar{
padding: 28px;
border-top: 2px solid var(--rw-gold);
background: var(--rw-white);
}
.science-pillars .pillar .num{
color: var(--rw-red);
font-family: var(--ff-serif);
font-size: 1.8rem;
margin-bottom: .2em;
font-weight: 500;
}
.science-pillars .pillar h3{ font-size: 1.2rem; margin-bottom: .5em; color: var(--rw-navy); }
/* Photo bands */
.photo-band{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 40px 0;
}
@media (max-width: 800px){ .photo-band{ grid-template-columns: 1fr; } }
.photo-band img{ width:100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
/* Footer legal line */
.footer-legal{
font-size: .72rem;
color: rgba(247,243,236,.55);
margin-top: 1rem;
line-height: 1.6;
}
/* Subscribe button block for accessibility of newsletter */
.newsletter{ display: flex; gap: 8px; }
.newsletter input{
flex: 1;
padding: .7rem 1rem;
border: 1px solid rgba(247,243,236,.2);
border-radius: 2px;
background: transparent;
color: var(--rw-ivory);
}
.newsletter input::placeholder{ color: rgba(247,243,236,.5); }
/* =============================================================================
ROUND 3 ADDITIONS — potency chips, HK positioning, Partners rebuild
============================================================================= */
/* Potency chip — reusable "10 BILLION" big-number component -------------------- */
.potency-chip{
display:inline-flex; flex-direction:column; align-items:flex-start;
gap:6px; padding:18px 22px;
background:var(--rw-navy); color:var(--rw-ivory);
border:1px solid rgba(201,169,106,.35);
border-radius:4px; position:relative;
line-height:1;
}
.potency-chip::before{
content:""; position:absolute; top:12px; right:12px;
width:8px; height:8px; border-radius:50%; background:var(--rw-red);
}
.potency-chip .pc-num{
font-family:'Cormorant Garamond', 'Noto Serif TC', serif;
font-weight:500; letter-spacing:-.01em;
font-size:clamp(1.8rem, 3.2vw, 2.8rem);
color:var(--rw-gold-soft);
}
.potency-chip .pc-label{
font-family:'Manrope','Noto Sans TC',sans-serif;
font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,243,236,.75);
}
.potency-chip .pc-sub{
font-size:.78rem; color:rgba(247,243,236,.6); letter-spacing:.08em;
}
.potency-chip--hero .pc-num{ font-size:clamp(3rem, 6vw, 5.5rem); }
.potency-chip--inline{
padding:10px 14px; flex-direction:row; align-items:baseline; gap:10px;
font-size:.85rem;
}
.potency-chip--inline .pc-num{ font-size:1.15rem; color:var(--rw-gold); }
.potency-chip--inline .pc-label{ font-size:.65rem; letter-spacing:.16em; }
.potency-chip--inline::before{ top:50%; right:10px; transform:translateY(-50%); }
.potency-row{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
margin-top:32px;
}
@media (max-width:760px){ .potency-row{ grid-template-columns:1fr; } }
.potency-ribbon{
position:absolute; top:14px; right:14px; z-index:2;
background:var(--rw-red); color:var(--rw-ivory);
font-family:'Manrope','Noto Sans TC',sans-serif;
font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
padding:6px 10px; border-radius:2px;
}
.potency-ribbon--navy{ background:var(--rw-navy); }
/* HK positioning chip -------------------------------------------------------- */
.hk-chip{
display:inline-flex; align-items:center; gap:8px;
padding:6px 14px; border:1px solid rgba(201,169,106,.5);
background:rgba(11,47,89,.04);
font-family:'Manrope','Noto Sans TC',sans-serif;
font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--rw-navy); border-radius:999px;
}
.hk-chip .red-word{ color:var(--rw-red); font-weight:600; }
.hk-chip--on-dark{ background:transparent; border-color:rgba(228,210,168,.4); color:var(--rw-ivory); }
.hk-chip--on-dark .red-word{ color:var(--rw-gold-soft); }
.hk-story-band{
padding:56px 0; text-align:center;
background:linear-gradient(180deg, rgba(11,47,89,.02) 0%, rgba(247,243,236,0) 100%);
}
.hk-story-band p{
font-family:'Cormorant Garamond','Noto Serif TC',serif;
font-size:clamp(1.3rem, 2.5vw, 1.9rem);
line-height:1.5; color:var(--rw-navy); text-wrap:balance;
max-width:720px; margin:0 auto;
}
/* Partners page: benefits grid & CTA band ------------------------------------ */
.partner-benefits{
display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
margin-top:40px;
}
@media (max-width:980px){ .partner-benefits{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .partner-benefits{ grid-template-columns:1fr; } }
.benefit-card{
background:var(--rw-ivory); padding:32px 28px;
border:1px solid rgba(11,47,89,.08); border-top:3px solid var(--rw-gold);
display:flex; flex-direction:column; gap:14px;
}
.benefit-card.flagship{
border-top-color:var(--rw-red);
background:linear-gradient(180deg, rgba(184,40,58,.04) 0%, var(--rw-ivory) 60%);
}
.benefit-card .b-num{
font-family:'Cormorant Garamond','Noto Serif TC',serif;
font-size:2rem; color:var(--rw-gold); line-height:1;
}
.benefit-card h3{ font-size:1.25rem; margin:0; color:var(--rw-navy); }
.benefit-card p{ color:var(--rw-navy); opacity:.85; font-size:.95rem; margin:0; }
.cta-band{
background:var(--rw-navy); color:var(--rw-ivory);
padding:72px 0; text-align:center;
}
.cta-band h2{ color:var(--rw-ivory); margin-bottom:18px; text-wrap:balance; }
.cta-band p{ color:rgba(247,243,236,.82); font-size:1.1rem; margin-bottom:32px; }
.cta-band .btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-red{ background:var(--rw-red); color:var(--rw-ivory); border:1px solid var(--rw-red); }
.cta-band .btn-red:hover{ background:var(--rw-red-ink); border-color:var(--rw-red-ink); }
.cta-band .btn-outline-ivory{
background:transparent; color:var(--rw-ivory);
border:1px solid rgba(247,243,236,.5);
}
.cta-band .btn-outline-ivory:hover{ background:var(--rw-ivory); color:var(--rw-navy); }
.wa-icon{
width:18px; height:18px; display:inline-block; vertical-align:-4px; margin-right:6px;
}
/* Partner application form --------------------------------------------------- */
.partner-form{ max-width:720px; margin:0 auto; display:grid; gap:18px; }
.partner-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .partner-form .row2{ grid-template-columns:1fr; } }
.partner-form label{
display:flex; flex-direction:column; gap:6px;
font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rw-navy);
}
.partner-form input, .partner-form select, .partner-form textarea{
padding:12px 14px; border:1px solid rgba(11,47,89,.2);
background:var(--rw-ivory); font:inherit; color:var(--rw-navy);
border-radius:2px;
}
.partner-form input:focus, .partner-form select:focus, .partner-form textarea:focus{
outline:none; border-color:var(--rw-red);
}
.partner-form textarea{ min-height:140px; resize:vertical; }
/* Merged shop page sections -------------------------------------------------- */
.shop-section-divider{
display:flex; align-items:center; gap:20px; margin:72px 0 48px; color:var(--rw-gold);
}
.shop-section-divider::before,
.shop-section-divider::after{
content:""; flex:1; height:1px; background:rgba(201,169,106,.4);
}
.shop-section-divider .motif{
width:10px; height:10px; background:var(--rw-gold); transform:rotate(45deg);
}
.bundles-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.singles-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:1080px){
.bundles-grid{ grid-template-columns:repeat(2,1fr); }
.singles-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
.bundles-grid, .singles-grid{ grid-template-columns:1fr; }
}
.product-card, .bundle-card{
position:relative; background:var(--rw-ivory);
border:1px solid rgba(11,47,89,.08);
display:flex; flex-direction:column;
}
.product-card img, .bundle-card img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; }
.product-card .card-body, .bundle-card .card-body{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.product-card h3, .bundle-card h3{ font-size:1.2rem; margin:0; color:var(--rw-navy); }
.product-card .price, .bundle-card .price{
font-family:'Cormorant Garamond','Noto Serif TC',serif;
font-size:1.4rem; color:var(--rw-navy);
}
.bundle-card .save{ color:var(--rw-red); font-weight:600; font-size:.95rem; }
.bundle-card .regular{ text-decoration:line-through; color:#8a8578; font-size:.9rem; margin-right:8px; }
.bundle-card .best-value{
position:absolute; top:14px; left:14px; z-index:2;
background:var(--rw-red); color:var(--rw-ivory);
padding:6px 12px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
}
.card-actions{ display:flex; gap:8px; margin-top:8px; }
.card-actions .btn{ flex:1; font-size:.85rem; padding:10px 12px; }
/* Clickable body-copy links -------------------------------------------------- */
.prose a, .faq-answer a, p a:not(.btn):not(.no-underline){
color:var(--rw-navy); text-decoration:underline; text-underline-offset:3px;
text-decoration-thickness:1px; transition:color .2s;
}
.prose a:hover, .faq-answer a:hover, p a:not(.btn):not(.no-underline):hover{
color:var(--rw-red);
}
/* Footer partner line -------------------------------------------------------- */
.footer-partner-line{
margin-top:12px; padding-top:12px;
border-top:1px solid rgba(247,243,236,.15);
font-size:.82rem; color:rgba(247,243,236,.75);
}
.footer-partner-line strong{ color:var(--rw-gold-soft); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; display:block; margin-bottom:4px; }
.footer-partner-line a{ color:var(--rw-ivory); text-decoration:underline; }
.footer-partner-line a:hover{ color:var(--rw-gold-soft); }
/* Redirect stub (on /bundles/) ---------------------------------------------- */
.redirect-stub{
min-height:60vh; display:flex; align-items:center; justify-content:center;
text-align:center; padding:60px 20px;
}
.redirect-stub a{ color:var(--rw-red); text-decoration:underline; }
/* Science: potency comparison bar chart -------------------------------------- */
.potency-compare{ margin-top:40px; }
.potency-bar{
display:flex; align-items:center; gap:16px; margin-bottom:14px;
font-family:'Manrope','Noto Sans TC',sans-serif; font-size:.9rem;
}
.potency-bar .pb-label{ width:220px; color:var(--rw-navy); }
.potency-bar .pb-track{ flex:1; height:24px; background:rgba(11,47,89,.06); position:relative; }
.potency-bar .pb-fill{
position:absolute; top:0; left:0; bottom:0;
background:linear-gradient(90deg, var(--rw-navy) 0%, var(--rw-red) 100%);
}
.potency-bar .pb-fill.muted{ background:rgba(11,47,89,.25); }
.potency-bar .pb-value{ width:120px; text-align:right; color:var(--rw-navy); font-weight:600; }
/* Pro Booster "For professional use" notice --------------------------------- */
.pro-notice{
background:var(--rw-red); color:var(--rw-ivory);
padding:14px 20px; border-radius:2px;
font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
text-align:center; margin:24px 0;
}
/* ============================================================================
HOTFIX SUPPLEMENT — bind HTML class names used in the rendered pages
to the design system above. Keep additive; do not rewrite existing rules.
============================================================================ */
/* Announce bar */
.announce-bar{background:var(--rw-navy);color:var(--rw-ivory);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:10px 16px;line-height:1.4}
.announce-bar .sep{opacity:.5;margin:0 .3em}
html[lang="zh-Hant"] .announce-bar{letter-spacing:.08em;text-transform:none;font-size:.82rem}
/* Header layout */
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:24px;max-width:var(--container-wide);margin:0 auto}
.site-header .logo{display:inline-flex;align-items:center;color:var(--rw-navy)}
.site-header .logo .rw-logo,
svg.rw-logo{height:22px;width:auto;display:block;max-width:160px}
/* Primary nav */
.primary-nav{display:flex;align-items:center;gap:26px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.primary-nav a{color:var(--rw-charcoal);padding:6px 0;transition:color .2s var(--ease);white-space:nowrap}
.primary-nav a:hover{color:var(--rw-blue)}
.primary-nav a.is-active{color:var(--rw-blue)}
/* Header right cluster */
.header-right{display:flex;align-items:center;gap:14px}
.header-right .lang-switch{padding:6px 10px;font-size:.78rem;letter-spacing:.08em;border:1px solid var(--rw-line);border-radius:999px;color:var(--rw-charcoal);cursor:pointer;white-space:nowrap}
.header-right .lang-switch:hover{border-color:var(--rw-navy);color:var(--rw-navy)}
/* Currency pills override to match HTML's class naming */
.currency-switch{display:inline-flex;border:1px solid var(--rw-line);border-radius:999px;overflow:hidden}
.currency-switch button{padding:6px 12px;font-size:.72rem;letter-spacing:.1em;color:var(--rw-mute);border-right:1px solid var(--rw-line);background:transparent}
.currency-switch button:last-child{border-right:0}
.currency-switch button.is-active{background:var(--rw-navy);color:var(--rw-ivory)}
/* Mobile nav */
@media(max-width:960px){
.primary-nav{display:none}
}
/* Hero full */
.hero{position:relative;background:var(--rw-ivory)}
.hero-full{min-height:min(86vh,820px);display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}
.hero-full .hero-media{position:relative;height:100%;min-height:480px}
.hero-full .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-full .hero-content{padding:80px 64px;max-width:720px}
.hero-full .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:900px){
.hero-full{grid-template-columns:1fr}
.hero-full .hero-media{min-height:320px;max-height:60vh}
.hero-full .hero-content{padding:48px 24px}
}
/* Potency band + chips — ensure layout even if partials exist */
.potency-band{padding:80px 0;background:var(--rw-ivory-2)}
.potency-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){ .potency-row{grid-template-columns:1fr} }
/* Section heads */
.section-head.center{text-align:center;max-width:780px;margin:0 auto 40px}
.section-head .sub{color:var(--rw-mute);font-size:1.05rem;margin-top:10px}
/* Journal grid */
.journal-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.j-tile{display:block;color:inherit}
.j-tile .thumb{aspect-ratio:4/3;background:var(--rw-ivory-2);overflow:hidden;border-radius:var(--radius)}
.j-tile .thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){ .journal-teaser-grid{grid-template-columns:1fr} }
/* Split layouts */
.split-body{flex:1;min-width:0}
.split-media{flex:1;min-width:0}
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
/* News / CTA row */
.news-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 0;border-top:1px solid var(--rw-line);border-bottom:1px solid var(--rw-line)}
@media(max-width:720px){ .news-row{flex-direction:column;align-items:stretch} }
/* Testimonials band fallback — populated by JS */
.testimonials-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px}
/* Footer */
.footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:48px;padding:72px 0 40px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.footer-col h5{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rw-mute);margin-bottom:14px;font-family:var(--ff-sans);font-weight:600}
.footer-col a{display:block;padding:4px 0;color:var(--rw-ivory);font-size:.9rem;opacity:.82}
.footer-col a:hover{opacity:1;color:var(--rw-gold-soft)}
.footer-blurb{font-size:.92rem;line-height:1.6;color:var(--rw-ivory);opacity:.78;max-width:28em}
.footer-brand{color:var(--rw-ivory)}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding:20px 0 36px;border-top:1px solid rgba(228,210,168,.15);font-size:.8rem;color:var(--rw-ivory);opacity:.72;flex-wrap:wrap}
.footer-legal a{color:inherit;margin-left:16px}
.footer-partner-line{color:var(--rw-ivory);opacity:.78;font-size:.88rem;margin-top:18px}
@media(max-width:900px){
.footer-top{grid-template-columns:1fr}
.footer-cols{grid-template-columns:repeat(2,1fr)}
}
.site-footer{background:var(--rw-navy);color:var(--rw-ivory)}
/* Small utility alignment */
.center{text-align:center}
.light{color:var(--rw-ivory)}
/* Hong Kong story band */
.hk-story-band{padding:60px 0;background:var(--rw-ivory);text-align:center}
.hk-story-band p{font-family:var(--ff-serif);font-size:clamp(1.25rem,1.8vw,1.6rem);color:var(--rw-navy);line-height:1.55;max-width:720px;margin:0 auto}
.hk-story-band a{border-bottom:1px solid var(--rw-gold)}
/* Cart head (overlay) */
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--rw-line)}
/* Section tints / feet */
.section-tint{background:var(--rw-ivory-2)}
.section-foot{margin-top:40px;text-align:center}
/* =============================================================================
SITE POLISH — April 2026
Fixes text layout, spacing, typography, responsive behaviour, and
defines missing button variants that were referenced but not declared.
This block is purely additive so earlier rules remain intact.
============================================================================= */
/* Define the missing .btn-outline variant used across buttons and hero CTAs */
.btn-outline{
background:transparent;
color:var(--rw-navy);
border:1px solid var(--rw-navy);
}
.btn-outline:hover{
background:var(--rw-navy);
color:var(--rw-ivory);
transform:translateY(-1px);
}
/* Global body refinements for readability */
body{
font-size:16.5px;
line-height:1.65;
letter-spacing:.005em;
}
@media(min-width:1200px){
body{ font-size:17px; }
}
/* Balanced text wrap for long headlines/leads so responsive lines break naturally */
h1, h2, h3, h4, .lede, .hero-content p{
text-wrap:balance;
}
p{ text-wrap:pretty; }
/* Tighter heading rhythm and better paragraph spacing */
h1{ margin:0 0 .4em; line-height:1.04; }
h2{ margin:0 0 .45em; line-height:1.08; }
h3{ margin:0 0 .5em; line-height:1.18; }
p{ margin:0 0 1.05em; }
p + p{ margin-top:0; }
p:last-child{ margin-bottom:0; }
/* On narrow screens, collapse hardcoded
inside headings & copy so text
reflows instead of breaking at odd places */
@media(max-width:720px){
h1 br, h2 br, h3 br, .hero-content p br, .page-hero p br,
.section-head p br, .split-body p br, .hk-story-band p br,
.footer-blurb br, .footer-legal br, .cta-band p br{
display:none;
}
}
/* Announce bar polish */
.announce-bar{
padding:11px 20px;
font-size:.74rem;
letter-spacing:.14em;
}
.announce-bar span + span{ margin-left:.1em; }
.announce-bar .sep{ color:rgba(247,243,236,.45); }
/* Site header — tighten mobile padding, improve nav wrap */
.site-header{
position:sticky;
top:0;
z-index:80;
background:rgba(247,243,236,.96);
backdrop-filter:saturate(140%) blur(12px);
border-bottom:1px solid var(--rw-line-soft);
}
.site-header .header-inner{ padding:16px 24px; }
.primary-nav{ gap:22px; }
.primary-nav a{ font-weight:500; }
@media(max-width:1100px){ .primary-nav{ gap:16px; font-size:.78rem; } }
@media(max-width:960px){
.site-header .header-inner{ padding:14px 20px; gap:14px; flex-wrap:wrap; }
.primary-nav{ order:3; width:100%; justify-content:flex-start; gap:16px; font-size:.72rem; padding-top:4px; border-top:1px solid var(--rw-line-soft); flex-wrap:wrap; }
}
/* Section rhythm — consistent vertical spacing across all content sections */
section, .section{
padding:clamp(56px, 8vw, 112px) 0;
}
.section.section-tint{ background:var(--rw-ivory-2); }
.section-head{
max-width:760px;
margin:0 auto 44px;
}
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head p.sub{
color:var(--rw-mute);
font-size:1.02rem;
line-height:1.6;
margin-top:.5em;
}
.section-head p.sub small{
display:block;
margin-top:.5em;
font-size:.78rem;
letter-spacing:.08em;
color:var(--rw-mute);
opacity:.8;
}
.section-foot{
margin-top:48px;
font-size:.92rem;
letter-spacing:.04em;
}
.section-foot a{
color:var(--rw-navy);
border-bottom:1px solid var(--rw-gold);
padding-bottom:2px;
}
.section-foot a:hover{ color:var(--rw-red); border-bottom-color:var(--rw-red); }
/* Hero refinements for the split "hero-full" hero on index.html */
.hero-full{ min-height:auto; }
.hero-full .hero-content{
padding:clamp(64px, 7vw, 96px) clamp(24px, 5vw, 64px);
max-width:640px;
}
.hero-full .hero-content .eyebrow{ margin-bottom:1rem; }
.hero-full .hero-content h1{
font-size:clamp(2.3rem, 4.6vw, 3.9rem);
line-height:1.05;
margin:0 0 .55em;
}
.hero-full .hero-content .lede{
font-size:clamp(1.1rem, 1.5vw, 1.35rem);
color:var(--rw-charcoal);
line-height:1.55;
margin:0 0 1.8em;
font-style:italic;
}
html[lang="zh-Hant"] .hero-full .hero-content .lede{ font-style:normal; }
.hero-full .hk-chip{ margin-bottom:1.25rem; }
.hero-full .hero-media img{ object-position:center center; }
@media(max-width:900px){
.hero-full .hero-content{ padding:56px 24px 40px; }
.hero-full .hero-content h1{ font-size:clamp(2rem, 7vw, 2.8rem); }
}
/* Page hero (used on about/science/etc) */
.page-hero{
padding:clamp(110px, 14vw, 170px) 0 clamp(56px, 8vw, 96px);
}
.page-hero .hk-chip{ margin-bottom:1rem; }
.page-hero .eyebrow{ margin:0 0 1.1rem; color:var(--rw-gold-soft); }
.page-hero h1{
font-size:clamp(2.3rem, 5vw, 3.8rem);
max-width:18em;
margin-bottom:.4em;
}
.page-hero p.lede, .page-hero p{
color:rgba(247,243,236,.82);
max-width:42em;
font-size:clamp(1.05rem, 1.4vw, 1.25rem);
line-height:1.6;
}
/* HK story band */
.hk-story-band{
padding:clamp(48px, 7vw, 80px) 0;
}
.hk-story-band p{
line-height:1.55;
}
/* Potency band chip row — better mobile stacking and spacing */
.potency-band{ padding:clamp(64px, 9vw, 110px) 0; }
.potency-band .section-head{ margin-bottom:36px; }
.potency-chip{
padding:28px 28px 26px;
gap:10px;
background:var(--rw-navy);
color:var(--rw-ivory);
}
.potency-chip .pc-num{ line-height:1; margin-bottom:4px; }
.potency-chip .pc-label{ line-height:1.4; }
.potency-chip .pc-sub{ line-height:1.45; margin-top:4px; }
.potency-chip--hero{ padding:36px 32px; }
.potency-chip--hero .pc-num{ font-size:clamp(2.4rem, 4.2vw, 3.8rem); }
.potency-row{ gap:20px; margin-top:36px; }
@media(max-width:760px){ .potency-chip--hero{ padding:28px 24px; } }
/* Product cards & bundle cards — tighter, more balanced card interior */
.singles-grid, .bundles-grid{ gap:24px; margin-top:16px; }
.product-card, .bundle-card{
border-radius:var(--radius);
overflow:hidden;
background:#fff;
}
.product-card .card-body, .bundle-card .card-body{
padding:22px 22px 24px;
gap:10px;
}
.product-card h3, .bundle-card h3{
font-size:1.22rem;
margin:0 0 2px;
line-height:1.25;
}
.product-card .card-body > p, .bundle-card .card-body > p{
color:var(--rw-mute);
font-size:.92rem;
line-height:1.55;
margin:0 0 4px;
}
.product-card .price, .bundle-card .price{
font-family:var(--ff-serif);
font-size:1.3rem;
color:var(--rw-navy);
margin:6px 0 0;
}
.bundle-card .price .regular{
color:var(--rw-mute);
font-size:.92rem;
margin-right:10px;
font-family:var(--ff-sans);
}
.bundle-card .save{
font-size:.78rem;
letter-spacing:.16em;
text-transform:uppercase;
margin:0;
color:var(--rw-red);
font-weight:700;
}
.card-actions{ margin-top:14px; gap:8px; }
.card-actions .btn{ flex:1; padding:11px 14px; font-size:.74rem; letter-spacing:.12em; }
.potency-ribbon{ top:12px; left:12px; right:auto; }
/* Split (image + copy) layouts — fix alignment on smaller screens */
.split{
grid-template-columns:1.1fr 1fr;
gap:clamp(28px, 5vw, 72px);
}
.split-media{ position:relative; }
.split-media img{
width:100%;
height:auto;
aspect-ratio:4/5;
object-fit:cover;
border-radius:var(--radius);
}
.split-body > .eyebrow{ margin-bottom:1rem; }
.split-body h2{ margin-bottom:.55em; }
.split-body p{ font-size:1rem; line-height:1.65; color:var(--rw-charcoal); }
.split-body .btn{ margin-top:12px; }
@media(max-width:900px){
.split, .split.reverse{ gap:32px; }
.split-media img{ aspect-ratio:3/2; }
}
/* Journal teaser grid */
.journal-teaser-grid{
gap:24px;
margin-top:32px;
}
.j-tile{
display:flex;
flex-direction:column;
gap:14px;
color:inherit;
transition:transform .3s var(--ease);
}
.j-tile:hover{ transform:translateY(-3px); }
.j-tile figure{
margin:0;
aspect-ratio:4/3;
background:var(--rw-ivory-2);
overflow:hidden;
border-radius:var(--radius);
}
.j-tile figure img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s var(--ease);
}
.j-tile:hover figure img{ transform:scale(1.04); }
.j-tile h4{
font-family:var(--ff-serif);
font-size:1.15rem;
font-weight:500;
color:var(--rw-navy);
line-height:1.3;
margin:0;
}
/* CTA band — consistent dark band typography */
.cta-band{ padding:clamp(56px, 7vw, 88px) 0; }
.cta-band .eyebrow{ color:var(--rw-gold-soft); margin-bottom:1rem; }
.cta-band h2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom:.5em; }
.cta-band p{ max-width:30em; margin-left:auto; margin-right:auto; line-height:1.6; }
.cta-band .btns{ margin-top:28px; }
.cta-band .btn-red{
background:var(--rw-red); color:var(--rw-ivory); border:1px solid var(--rw-red);
}
.cta-band .btn-red:hover{ background:var(--rw-red-ink); border-color:var(--rw-red-ink); transform:translateY(-1px); }
/* Hero CTAs + hero ctas on narrow screens should stack */
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
@media(max-width:480px){
.hero-ctas .btn{ width:100%; }
.cta-band .btns .btn{ width:100%; }
}
/* Article / journal body polish */
.article-body, .article{
font-size:1.04rem;
line-height:1.8;
color:var(--rw-charcoal);
}
.article-body p, .article p{ margin:0 0 1.2em; }
.article-body h2, .article h2{ margin-top:2.2em; margin-bottom:.6em; }
.article-body h3, .article h3{ margin-top:1.8em; margin-bottom:.5em; }
.article-body ul, .article ul{ padding-left:1.4em; margin:0 0 1.3em; }
.article-body ul li, .article ul li{ margin-bottom:.55em; line-height:1.7; }
/* Footer polish */
.site-footer{
padding:0;
color:var(--rw-ivory);
}
.footer-top{
padding:clamp(56px, 7vw, 80px) 0 clamp(40px, 5vw, 56px);
gap:clamp(32px, 5vw, 56px);
}
.footer-blurb{
font-size:.92rem;
line-height:1.7;
opacity:.78;
max-width:26em;
margin:14px 0 18px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:0; }
.footer-col a{
font-size:.88rem;
line-height:1.5;
padding:5px 0;
display:block;
opacity:.8;
}
.footer-col a:hover{ opacity:1; color:var(--rw-gold-soft); }
.footer-bottom{
padding:22px 0 36px;
font-size:.78rem;
line-height:1.6;
opacity:.72;
gap:20px;
}
.footer-legal{
font-size:.78rem;
line-height:1.65;
opacity:.72;
margin:0;
}
.footer-partner-line{
font-size:.86rem;
line-height:1.55;
opacity:.88;
margin:0;
}
.footer-partner-line strong{
display:block;
font-size:.7rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--rw-gold-soft);
margin-bottom:4px;
font-weight:600;
}
.newsletter{ gap:0; margin-top:18px; max-width:360px; }
.newsletter h5{
font-family:var(--ff-sans);
font-size:.76rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--rw-gold-soft);
margin:0 0 6px;
font-weight:600;
}
.newsletter > p{
font-size:.85rem;
margin:0 0 10px;
opacity:.72;
}
.newsletter .news-row{
display:flex;
gap:0;
padding:0;
border:0;
}
.newsletter input{
flex:1;
padding:11px 14px;
border:1px solid rgba(247,243,236,.2);
border-right:0;
background:rgba(247,243,236,.04);
color:var(--rw-ivory);
font-size:.88rem;
border-radius:2px 0 0 2px;
}
.newsletter button{
padding:11px 18px;
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:700;
border-radius:0 2px 2px 0;
}
/* Prevent horizontal overflow from any long links/strings */
html, body{ overflow-x:hidden; }
img, svg, video{ max-width:100%; height:auto; }
/* Focus states — accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
outline:2px solid var(--rw-gold);
outline-offset:2px;
}
/* Links in body copy should be visually distinct */
main a:not(.btn):not(.logo):not(.j-tile):not(.card-actions a):not(.lang-switch):not(.cart-btn):not(.product-card a):not(.bundle-card a):not(.section-foot a){
border-bottom:1px solid var(--rw-gold);
transition:border-color .2s var(--ease), color .2s var(--ease);
}
main a:not(.btn):not(.logo):not(.j-tile):not(.card-actions a):hover{
border-bottom-color:var(--rw-red);
color:var(--rw-red);
}
/* Small screen refinements */
@media(max-width:640px){
.container{ padding:0 20px; }
.section-head{ margin-bottom:32px; }
.section-foot{ margin-top:36px; }
h1{ font-size:clamp(1.9rem, 8vw, 2.5rem); }
h2{ font-size:clamp(1.55rem, 5.5vw, 2rem); }
h3{ font-size:1.15rem; }
.hero-full .hero-content h1, .page-hero h1{ font-size:clamp(1.9rem, 7vw, 2.5rem); }
.product-card .card-body, .bundle-card .card-body{ padding:18px; }
.card-actions{ flex-direction:column; }
.card-actions .btn{ width:100%; }
}
/* Reduced-motion preference */
@media(prefers-reduced-motion:reduce){
*, *::before, *::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
}
/* END SITE POLISH */
/* ============================================================================
PROFESSIONAL REFINEMENT — Round 2 (Apr 2026)
Goals: readable text, right-sized testimonial stars, tighter journal grid,
more strategic red (per brand spec #B8283A), real logo sizing, page banners,
and better link affordance across the site.
============================================================================ */
/* -- Brand tokens: make sure red is active and a soft-red tint exists -------- */
:root{
--rw-red: #B8283A;
--rw-red-deep: #9C1E2E;
--rw-red-tint: rgba(184,40,58,0.08);
--rw-red-line: rgba(184,40,58,0.22);
--rw-ink: #1A2438;
--rw-ink-soft: #3A4560;
}
/* -- Logo sizing ------------------------------------------------------------ */
/* The real brand SVGs replace the old text-SVGs. Give them the right height. */
.site-header .rw-logo,
.site-header .logo img.rw-logo{
display:block; height:34px; width:auto;
}
.site-footer .rw-logo,
.site-footer .logo img.rw-logo{
display:block; height:30px; width:auto;
}
@media (max-width: 720px){
.site-header .rw-logo{ height:28px; }
.site-footer .rw-logo{ height:26px; }
}
/* Footer brand block: tighten vertical rhythm around the ivory logo. */
.site-footer .footer-brand .logo{ margin-bottom:16px; }
/* -- Testimonial stars ------------------------------------------------------ */
/* Root cause of "big stars": the SVG had no width/height attributes, so it
inherited 100% of its container. Constrain it to a neat 14px inline glyph. */
.testimonial-card .stars,
.testimonials-grid .stars,
.stars{
display:inline-flex;
align-items:center;
gap:3px;
line-height:1;
}
.testimonial-card .stars svg,
.testimonials-grid .stars svg,
.stars svg{
width:14px;
height:14px;
display:block;
flex:0 0 auto;
}
.stars .star-on path{ fill: var(--rw-gold); }
.stars .star-off path{ fill: rgba(201,169,106,0.22); }
.t-rating{ margin:0 0 10px; line-height:1; }
/* The rendered testimonials-grid (plural) matches .testimonial-grid rules */
.testimonials-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 980px){ .testimonials-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .testimonials-grid{ grid-template-columns: 1fr; } }
.testimonials-grid .testimonial-card.editorial,
.testimonials-grid .testimonial-card{
background:#fff;
border-top:2px solid var(--rw-red); /* was gold; more strategic red */
border-radius:3px;
padding:26px 24px;
box-shadow:0 1px 0 var(--rw-line-soft), 0 8px 22px -20px rgba(11,47,89,0.12);
}
.testimonials-grid blockquote{
margin:0 0 14px;
font-family: var(--ff-serif);
font-style: italic;
color: var(--rw-navy);
font-size: 1.02rem;
line-height: 1.55;
}
.testimonials-grid footer{
margin-top:auto;
display:flex;
flex-direction:column;
gap:3px;
font-size:.82rem;
line-height:1.4;
}
.testimonials-grid cite{
font-style:normal;
font-weight:600;
color: var(--rw-navy);
font-size:.9rem;
}
.testimonials-grid .t-meta{ color: var(--rw-mute); font-size:.78rem; }
.testimonials-grid .t-ctx{
font-size:.74rem;
color: var(--rw-mute);
letter-spacing:.04em;
margin-top:4px;
padding-top:8px;
border-top:1px dashed var(--rw-line-soft);
}
/* Filter pill row */
.testimonials-filters{
display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
margin: 0 0 28px;
}
.testimonials-filters button{
appearance:none;
background:#fff;
border:1px solid var(--rw-line);
color: var(--rw-ink);
font: 500 .78rem/1 var(--ff-sans);
letter-spacing:.12em;
text-transform:uppercase;
padding: 10px 16px;
border-radius: 999px;
cursor:pointer;
transition: all .15s ease;
}
.testimonials-filters button:hover{
border-color: var(--rw-red);
color: var(--rw-red);
}
.testimonials-filters button.is-active{
background: var(--rw-red);
border-color: var(--rw-red);
color:#fff;
}
/* -- Journal / Blog grid ---------------------------------------------------- */
/* The photos were far too big. Make the grid magazine-style with tight cards. */
.journal-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px 22px;
}
@media (max-width: 1200px){ .journal-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px){ .journal-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .journal-grid{ grid-template-columns: 1fr; } }
.journal-grid .j-tile{
display:flex;
flex-direction:column;
gap: 12px;
color: var(--rw-ink);
text-decoration:none;
transition: transform .18s ease;
}
.journal-grid .j-tile:hover{ transform: translateY(-2px); }
.journal-grid .j-tile figure,
.journal-grid .j-tile .thumb{
margin:0;
overflow:hidden;
border-radius: 3px;
aspect-ratio: 4 / 3; /* smaller, tighter card photo */
background: var(--rw-ivory-2);
}
.journal-grid .j-tile figure img,
.journal-grid .j-tile .thumb img{
width:100%; height:100%; object-fit:cover;
transition: transform .35s ease;
}
.journal-grid .j-tile:hover figure img,
.journal-grid .j-tile:hover .thumb img{ transform: scale(1.03); }
.journal-grid .j-tile .cat{
display:inline-block;
font: 600 .66rem/1 var(--ff-sans);
letter-spacing:.22em;
text-transform: uppercase;
color: var(--rw-red); /* categories in red: more red presence */
padding-top: 2px;
}
.journal-grid .j-tile h4{
margin: 2px 0 0;
font-family: var(--ff-serif);
font-weight: 500;
font-size: 1.04rem;
line-height: 1.3;
color: var(--rw-navy);
letter-spacing: .005em;
}
.journal-grid .j-tile p{
margin:0;
font-size:.86rem;
line-height:1.55;
color: var(--rw-ink-soft);
}
/* -- Full-width page banner (used on each top-level section) --------------- */
.page-banner{
position: relative;
width: 100%;
min-height: clamp(220px, 34vh, 360px);
background: var(--rw-navy) center / cover no-repeat;
color: var(--rw-ivory);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin: 0 0 12px;
}
.page-banner::after{
/* Gentle navy-to-transparent overlay for readable text on any photo */
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(7,26,52,.55) 0%, rgba(7,26,52,.30) 40%, rgba(7,26,52,.60) 100%);
}
.page-banner .container{
position:relative; z-index:1;
text-align:center;
padding: 40px 24px;
}
.page-banner .eyebrow{
color: #F2C37A; /* warm gold on dark */
letter-spacing:.3em;
font-size:.7rem;
text-transform:uppercase;
display:inline-block;
padding: 4px 12px;
border:1px solid rgba(255,255,255,0.25);
border-radius: 999px;
margin-bottom: 14px;
}
.page-banner h1{
font-family: var(--ff-serif);
color: #fff;
font-size: clamp(1.9rem, 4.2vw, 3.1rem);
line-height: 1.12;
margin: 0 0 12px;
font-weight: 500;
text-wrap: balance;
}
.page-banner p{
color: rgba(255,255,255,.9);
font-size: clamp(.98rem, 1.5vw, 1.08rem);
max-width: 620px;
margin: 0 auto;
line-height:1.55;
text-wrap: pretty;
}
/* -- Announcement bar: clearly red (strategic) ------------------------------ */
.announce-bar{
background: var(--rw-red);
color: #fff;
font-size: .78rem;
letter-spacing:.1em;
}
.announce-bar a{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }
.announce-bar .sep{ color: rgba(255,255,255,.6); }
/* -- Primary buttons: saturate red, full-contrast text --------------------- */
.btn-red, .btn.btn-red, button.btn-red{
background: var(--rw-red);
border-color: var(--rw-red);
color: #fff;
}
.btn-red:hover, .btn.btn-red:hover, button.btn-red:hover{
background: var(--rw-red-deep);
border-color: var(--rw-red-deep);
color: #fff;
}
.btn-outline:hover{
color: var(--rw-red);
border-color: var(--rw-red);
}
/* -- Navigation readability ------------------------------------------------- */
.primary-nav a{
color: var(--rw-ink);
font-weight: 500;
letter-spacing: .02em;
text-decoration: none;
padding: 8px 2px;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.primary-nav a:hover{ color: var(--rw-red); border-bottom-color: var(--rw-red); }
.primary-nav a.is-active{ color: var(--rw-red); border-bottom-color: var(--rw-red); }
/* -- General link legibility in main content ------------------------------- */
main a:not(.btn):not(.logo):not(.j-tile):not(.card-actions a):not(.lang-switch):not(.cart-btn):not(.product-card a):not(.bundle-card a):not(.section-foot a){
color: var(--rw-red);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(184,40,58,0.55);
}
main a:not(.btn):not(.logo):not(.j-tile):not(.card-actions a):hover{
color: var(--rw-red-deep);
text-decoration-color: var(--rw-red-deep);
}
/* Footer link contrast on navy */
.site-footer a{ color: rgba(255,255,255,.82); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-partner-line a{ color: #F2C37A; text-decoration: underline; text-underline-offset: 3px; }
.footer-partner-line a:hover{ color: #fff; }
.footer-partner-line strong{ color: rgba(255,255,255,.95); margin-right:8px; }
/* -- Red strategic accents in product/price areas -------------------------- */
.savings-badge, .badge-value, .best-value{
display:inline-block;
background: var(--rw-red);
color: #fff;
font: 600 .68rem/1 var(--ff-sans);
letter-spacing: .16em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 2px;
}
.hk-chip{
color: var(--rw-navy);
}
.hk-chip .red-word,
.red-word{ color: var(--rw-red); font-weight: 600; }
.hk-chip--on-dark{ color: rgba(255,255,255,.9); }
.hk-chip--on-dark .red-word{ color: #F59AA4; } /* brighter red for dark bg readability */
/* -- Body text global readability pass ------------------------------------- */
body{
color: var(--rw-ink);
font-size: 16.5px;
line-height: 1.66;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p{ color: var(--rw-ink); }
.prose{ color: var(--rw-ink-soft); font-size: 1rem; line-height: 1.7; }
h1,h2,h3,h4,h5{ color: var(--rw-navy); }
/* Keep soft mute tone but bump contrast */
:root{
--rw-mute: #5A6378;
--rw-line: #DDD5C4;
--rw-line-soft: #EFE9DA;
--rw-ivory-2: #F2ECDD;
--rw-charcoal: #2B3448;
}
/* Fix tiny/low-contrast meta text that was hard to read */
.eyebrow{ color: var(--rw-red); letter-spacing: .28em; font-weight: 600; }
.section-tint .eyebrow{ color: var(--rw-red); }
.page-hero .eyebrow{ color: var(--rw-red); }
/* -- Announce bar link color override (red on white was unreadable) -------- */
.announce-bar span{ color:#fff; }
/* -- Cards and tiles spacing ----------------------------------------------- */
.product-card,
.bundle-card{
background:#fff;
border: 1px solid var(--rw-line-soft);
border-radius: 3px;
overflow:hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover,
.bundle-card:hover{
box-shadow: 0 10px 28px -22px rgba(11,47,89,0.28);
transform: translateY(-2px);
}
/* -- Page hero tightening (non-banner hero pages) -------------------------- */
/* NOTE: .page-hero has a NAVY background (var(--rw-navy)); text must be ivory. */
.page-hero{ padding: 48px 0 24px; }
.page-hero h1{
font-family: var(--ff-serif);
font-weight: 500;
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
line-height: 1.18;
color: var(--rw-ivory);
text-wrap: balance;
}
.page-hero .lede{ color: rgba(247,243,236,.85); max-width: 620px; margin: 10px auto 0; }
/* -- Ensure announce-bar contrasts cleanly with header transition ---------- */
.site-header{
background: rgba(247,243,236,.96);
backdrop-filter: saturate(140%) blur(6px);
-webkit-backdrop-filter: saturate(140%) blur(6px);
border-bottom: 1px solid var(--rw-line-soft);
}
/* Current-page nav chip */
.primary-nav a.is-active{
color: var(--rw-red);
}
/* -- Focus rings: high-contrast red for accessibility ---------------------- */
:focus-visible{
outline: 2px solid var(--rw-red);
outline-offset: 3px;
}
/* -- Mobile breakout adjustments ------------------------------------------- */
@media (max-width: 720px){
.page-hero{ padding: 32px 0 16px; }
.page-hero h1{ font-size: 1.55rem; }
.journal-grid{ gap: 22px 16px; }
.testimonials-filters button{ padding: 8px 12px; font-size: .72rem; }
}
/* -- Silence the old fat testimonial .quote-mark (we render stars only) ---- */
.testimonial-card .quote-mark{ display:none; }
/* -- Cleanup: keep the nav chip tidy on hover ------------------------------ */
.primary-nav a{ text-underline-offset: 4px; }
/* END PROFESSIONAL REFINEMENT — Round 2 */
/* ============================================================================
INQUIRY FORM — Apr 2026
============================================================================ */
.inquiry-form{
display: grid;
gap: 14px;
max-width: 760px;
margin: 0 auto;
}
.inquiry-form .row2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 620px){
.inquiry-form .row2{ grid-template-columns: 1fr; }
}
.inquiry-form label{
display:flex;
flex-direction:column;
font: 500 .78rem/1.3 var(--ff-sans);
letter-spacing:.06em;
text-transform: uppercase;
color: var(--rw-ink-soft);
gap: 6px;
}
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea{
appearance: none;
font: 400 1rem/1.4 var(--ff-sans);
text-transform: none;
letter-spacing: normal;
color: var(--rw-ink);
background: #fff;
border: 1px solid var(--rw-line);
border-radius: 3px;
padding: 12px 14px;
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.inquiry-form textarea{ resize: vertical; min-height: 120px; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus{
outline: none;
border-color: var(--rw-red);
box-shadow: 0 0 0 3px var(--rw-red-tint);
}
.inquiry-form fieldset.inquiry-type{
border: 0; padding: 0; margin: 0 0 4px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.inquiry-form fieldset.inquiry-type legend{
font: 500 .72rem/1 var(--ff-sans);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rw-ink-soft);
margin-right: 6px;
padding: 0;
}
.inquiry-form .pill-radio{
display: inline-flex;
align-items:center;
gap: 0;
cursor: pointer;
font-size:.82rem;
text-transform: none;
letter-spacing:.02em;
background: #fff;
border: 1px solid var(--rw-line);
border-radius: 999px;
padding: 9px 16px;
transition: all .15s ease;
color: var(--rw-ink);
}
.inquiry-form .pill-radio input{
position: absolute;
opacity: 0;
pointer-events:none;
}
.inquiry-form .pill-radio:hover{
border-color: var(--rw-red);
color: var(--rw-red);
}
.inquiry-form .pill-radio:has(input:checked){
background: var(--rw-red);
border-color: var(--rw-red);
color: #fff;
}
.inquiry-form .type-fields{
display: grid;
gap: 14px;
padding: 18px;
background: var(--rw-ivory-2);
border-radius: 3px;
border-left: 3px solid var(--rw-red);
}
.inquiry-form .type-fields[hidden]{ display: none !important; }
.inquiry-form .btn.btn-inquiry{
justify-self: start;
margin-top: 6px;
padding: 14px 24px;
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
}
.inquiry-form .form-note{
font-size: .78rem;
color: var(--rw-mute);
margin: 4px 0 0;
line-height: 1.55;
}
.inquiry-form .form-note a{
color: var(--rw-red);
text-decoration: underline;
text-underline-offset: 3px;
}
.inquiry-form .form-msg{
font-size: .85rem;
line-height: 1.5;
min-height: 1.2em;
}
.inquiry-form .form-msg.sending{ color: var(--rw-ink-soft); font-style: italic; }
.inquiry-form .form-msg.error{
background: var(--rw-red-tint);
border-left: 3px solid var(--rw-red);
padding: 10px 12px;
border-radius: 2px;
color: var(--rw-red-deep);
}
.inquiry-form .honeypot{
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
/* Thank-you card (replaces the form after successful submit) */
.thank-card{
max-width: 560px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--rw-line);
border-top: 3px solid var(--rw-red);
border-radius: 3px;
padding: 36px 30px;
text-align: center;
box-shadow: 0 10px 30px -24px rgba(11,47,89,.3);
}
.thank-card h3{
font-family: var(--ff-serif);
font-weight: 500;
font-size: 1.6rem;
color: var(--rw-navy);
margin: 0 0 12px;
line-height: 1.25;
}
.thank-card p{
margin: 0 0 10px;
color: var(--rw-ink-soft);
font-size: 1rem;
line-height: 1.6;
}
.thank-card p.small{
font-size: .86rem;
color: var(--rw-mute);
margin-top: 16px;
}
.thank-card .wa-cta{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 12px 22px;
border-radius: 999px;
font-size: .82rem;
letter-spacing: .08em;
font-weight: 600;
background: #25D366; /* WhatsApp green for instant recognition */
border-color: #25D366;
color: #fff;
}
.thank-card .wa-cta:hover{
background: #1EB655;
border-color: #1EB655;
color: #fff;
}
/* ============================================================================
WHATSAPP FLOAT — site-wide persistent CTA
============================================================================ */
.wa-float{
position: fixed;
right: 22px;
bottom: 22px;
z-index: 40;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px 12px 14px;
background: #25D366;
color: #fff;
border-radius: 999px;
font: 600 .82rem/1 var(--ff-sans);
letter-spacing: .04em;
text-decoration: none;
box-shadow: 0 8px 22px -10px rgba(37,211,102,.55), 0 4px 10px -4px rgba(0,0,0,.15);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wa-float:hover{
background: #1EB655;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 30px -10px rgba(37,211,102,.6), 0 6px 12px -4px rgba(0,0,0,.18);
}
.wa-float svg{ flex:0 0 auto; }
.wa-float .wa-label{ white-space: nowrap; }
@media (max-width: 520px){
.wa-float{ padding: 12px; right: 14px; bottom: 14px; }
.wa-float .wa-label{ display: none; }
}
/* ============================================================================
BTN with icon alignment
============================================================================ */
.btn .btn-ico{ margin-right: 6px; vertical-align: -3px; }
/* END INQUIRY FORM */
/* ============================================================================
ROUND 4 — READABILITY, GRID FIX, BANNER CROP, FOOTER, SCIENCE — Apr 2026
============================================================================ */
/* ---- 1. GRID FIX (this was the empty-right-side bug) ---------------------- */
/* The .grid-N classes were grid-template-columns only; without .grid's
display:grid they collapsed to single-column stacks. Make them standalone. */
.grid-2,
.grid-3,
.grid-4{
display: grid;
gap: 28px;
align-items: start;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){
.grid-3,
.grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 600px){
.grid-2,
.grid-3,
.grid-4{ grid-template-columns: 1fr; gap: 18px; }
}
.photo-band > .container{ width: 100%; }
.photo-band .grid-3 figure,
.photo-band .grid-4 figure,
.photo-band .grid-2 figure{
margin: 0;
border-radius: 14px;
overflow: hidden;
background: #f3efe6;
box-shadow: 0 8px 28px -18px rgba(11,47,89,.25);
}
.photo-band .grid-3 img,
.photo-band .grid-4 img,
.photo-band .grid-2 img{
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
/* ---- 2. READABILITY — lighten dark navy body text ------------------------- */
/* --rw-ink is deep navy #1A2438. On ivory it's dense; shift secondary text
to the softer grey-blue token and bump body line-height for comfort. */
body{
color: var(--rw-ink-soft, #3A4560);
line-height: 1.65;
}
p, li, dd, blockquote, .prose p{
color: var(--rw-ink-soft, #3A4560);
}
h1, h2, h3, h4, h5, h6,
.eyebrow, .kpi-num{
color: var(--rw-ink, #1A2438);
}
.lede, .lede.prose{
color: #2E3851;
font-weight: 400;
}
.small, .caption, .footnote, figcaption{
color: var(--rw-mute, #5A6378);
}
a{ color: var(--rw-red, #B8283A); }
a:hover{ color: #92202F; }
/* table and card body copy — readable, not inky */
.card p, .card li, .card-body p, .card-body li{ color: #3A4560; }
/* ---- 3. BANNER — tagline only, show face, softer gradient ----------------- */
.page-banner{
position: relative;
min-height: 340px;
padding: 86px 0 70px;
background-size: cover;
background-position: center 28%; /* show the face, not the torso */
background-repeat: no-repeat;
color: #fff;
overflow: hidden;
}
.page-banner::before{
content: "";
position: absolute; inset: 0;
background:
linear-gradient(115deg, rgba(11,47,89,.78) 0%, rgba(11,47,89,.45) 55%, rgba(11,47,89,.15) 100%);
}
.page-banner > .container{ position: relative; z-index: 1; max-width: 780px; }
.page-banner .eyebrow{
color: #F3D9B5;
letter-spacing: .22em;
font-size: .78rem;
margin-bottom: 14px;
display: inline-block;
}
.page-banner h1{
color: #fff;
font-family: var(--ff-serif, 'Cormorant Garamond', serif);
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
letter-spacing: -.005em;
text-wrap: balance;
margin: 0 0 18px;
max-width: 22ch;
}
.page-banner .lede,
.page-banner p{
color: rgba(255,255,255,.92);
font-size: 1.08rem;
line-height: 1.55;
max-width: 52ch;
margin: 0 0 10px;
}
.page-banner p a{ color: #F3D9B5; text-decoration: underline; text-underline-offset: 3px; }
.page-banner p a:hover{ color: #fff; }
/* Hide dense contact blocks on banners — tagline-only per brand direction */
.page-banner .banner-contact,
.page-banner .prose + .prose{ display: none; }
@media (max-width: 700px){
.page-banner{ min-height: 280px; padding: 60px 0 50px; background-position: center 22%; }
}
/* ---- 4. INQUIRY FORM — breathing room for the submit button --------------- */
.inquiry-form{
display: grid;
gap: 20px;
}
.inquiry-form label{
display: block;
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rw-ink, #1A2438);
margin-bottom: 4px;
}
.inquiry-form input[type=text],
.inquiry-form input[type=email],
.inquiry-form input[type=tel],
.inquiry-form select,
.inquiry-form textarea{
width: 100%;
margin-top: 6px;
padding: 12px 14px;
border: 1px solid #D8D2C4;
border-radius: 10px;
background: #fff;
font: 400 1rem/1.45 var(--ff-sans);
color: var(--rw-ink, #1A2438);
transition: border-color .15s ease, box-shadow .15s ease;
}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus{
outline: none;
border-color: var(--rw-red, #B8283A);
box-shadow: 0 0 0 3px rgba(184,40,58,.12);
}
.inquiry-form .row2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px){
.inquiry-form .row2{ grid-template-columns: 1fr; gap: 14px; }
}
.inquiry-form .inquiry-type{
border: 0;
padding: 0;
margin: 0 0 6px;
}
.inquiry-form .inquiry-type legend{
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rw-ink, #1A2438);
margin-bottom: 10px;
}
.inquiry-form .pill-radio{
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; margin: 0 8px 8px 0;
border: 1px solid #D8D2C4; border-radius: 999px;
background: #fff; cursor: pointer;
font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 500;
color: var(--rw-ink, #1A2438);
transition: all .15s ease;
}
.inquiry-form .pill-radio input{ accent-color: var(--rw-red, #B8283A); }
.inquiry-form .pill-radio:has(input:checked){
background: var(--rw-red, #B8283A); color: #fff; border-color: var(--rw-red, #B8283A);
}
.inquiry-form .btn-inquiry,
.inquiry-form button[type=submit]{
margin-top: 22px;
padding: 16px 34px;
font-size: 1rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
border-radius: 10px;
}
.inquiry-form .form-note{
margin-top: 14px;
font-size: .88rem;
color: var(--rw-mute, #5A6378);
}
.inquiry-form .honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
/* Thank-you card after successful submit */
.thank-card{
padding: 36px 30px;
background: #fff;
border: 1px solid #E8E1D2;
border-radius: 14px;
box-shadow: 0 10px 30px -20px rgba(11,47,89,.25);
}
.thank-card h3{ font-family: var(--ff-serif); font-weight: 500; font-size: 1.6rem; margin:0 0 10px; color: var(--rw-ink); }
.thank-card p{ margin: 0 0 10px; }
.thank-card .wa-cta{ margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background:#25D366; color:#fff; border:0; }
.thank-card .wa-cta:hover{ background:#1EB655; color:#fff; }
/* ---- 5. SCIENCE PAGE — educational layout --------------------------------- */
.science-hero{
background: linear-gradient(135deg, #0B2F59 0%, #163C69 55%, #1E4E80 100%);
color: #fff;
padding: 70px 0 60px;
}
.science-hero h1{ color:#fff; }
.science-hero .lede{ color: rgba(255,255,255,.9); max-width: 58ch; }
.layman-box{
background: #fff;
border-left: 4px solid var(--rw-red, #B8283A);
padding: 22px 26px;
border-radius: 0 12px 12px 0;
margin: 24px 0;
box-shadow: 0 6px 24px -16px rgba(11,47,89,.2);
}
.layman-box .tag{
display:inline-block; font-size:.72rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color: var(--rw-red); margin-bottom: 8px;
}
.layman-box p{ font-size: 1.05rem; color:#2E3851; margin:0; }
.science-pillars{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 24px;
margin: 40px 0;
}
@media (max-width: 900px){ .science-pillars{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .science-pillars{ grid-template-columns: 1fr; } }
.science-pillars .pillar{
background:#fff; padding: 26px; border-radius: 14px;
border: 1px solid #EEE7D8;
box-shadow: 0 6px 24px -20px rgba(11,47,89,.2);
}
.science-pillars .pillar .icon{
width: 48px; height: 48px; border-radius: 12px;
background: #F7F3EC; display: grid; place-items: center;
color: var(--rw-red); margin-bottom: 14px; font-size: 1.4rem;
}
.science-pillars .pillar h3{ font-size: 1.2rem; margin:0 0 8px; }
.science-pillars .pillar p{ font-size: .95rem; margin: 0; color:#3A4560; }
/* Potency bar-chart (CSS only) */
.potency-chart{
display:grid; gap: 14px;
background:#fff; padding: 28px;
border-radius: 14px; border: 1px solid #EEE7D8;
margin: 32px 0;
}
.potency-chart h3{ margin:0 0 8px; font-size: 1.15rem; }
.potency-chart .row{
display:grid; grid-template-columns: 160px 1fr 70px;
align-items:center; gap: 14px;
}
.potency-chart .label{ font-weight:600; color: var(--rw-ink); font-size:.95rem; }
.potency-chart .bar{
height: 14px; border-radius: 999px; background:#F1EADB; overflow:hidden;
}
.potency-chart .bar > span{
display:block; height:100%; border-radius:999px;
background: linear-gradient(90deg, #B8283A 0%, #E1455C 100%);
}
.potency-chart .bar.muted > span{ background: linear-gradient(90deg, #9AA4B6, #C2CBD9); }
.potency-chart .val{ font-variant-numeric: tabular-nums; font-weight:600; color: var(--rw-ink); text-align:right; }
@media (max-width: 600px){
.potency-chart .row{ grid-template-columns: 110px 1fr 60px; gap:10px; }
}
/* Split right-image block — never leave the right side empty */
.split{
display:grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items:center;
}
.split.split-flip{ grid-template-columns: 1fr 1.1fr; }
.split.split-flip .split-body{ order: 1; }
.split.split-flip .split-media{ order: 2; }
@media (max-width: 900px){
.split, .split.split-flip{ grid-template-columns: 1fr; gap: 28px; }
.split.split-flip .split-body{ order: 0; } .split.split-flip .split-media{ order: 0; }
}
.split-media img{
width:100%; border-radius: 16px; box-shadow: 0 18px 40px -28px rgba(11,47,89,.4);
aspect-ratio: 4/3; object-fit: cover;
}
/* ---- 6. FOOTER — spacious, readable, prominent partner CTA ---------------- */
footer, .site-footer{
background: #0B2F59;
color: rgba(255,255,255,.82);
padding: 64px 0 28px;
}
footer h4, .site-footer h4{
color: #fff;
font-family: var(--ff-sans);
font-size: .82rem;
letter-spacing: .2em;
text-transform: uppercase;
margin: 0 0 18px;
font-weight: 600;
}
footer a, .site-footer a{
color: rgba(255,255,255,.82);
text-decoration: none;
transition: color .15s ease;
}
footer a:hover, .site-footer a:hover{ color: #F3D9B5; }
.footer-grid{
display:grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 48px;
margin-bottom: 44px;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; gap: 32px; } }
.footer-brand{
display:flex; flex-direction: column; gap: 16px;
}
.footer-brand .logo{ max-width: 150px; }
.footer-brand p{
margin: 0;
color: rgba(255,255,255,.7);
font-size: .92rem;
line-height: 1.6;
max-width: 28ch;
}
.footer-brand .footer-address{
font-size: .85rem;
color: rgba(255,255,255,.6);
line-height: 1.55;
}
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; font-size:.92rem; }
.footer-col .footer-tag{ display:block; font-size:.85rem; color: rgba(255,255,255,.55); margin-bottom:6px; }
/* Partner CTA — bold red button, unmissable */
.footer-partner{
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
padding: 20px;
}
.footer-partner h4{ margin-bottom: 10px; }
.footer-partner p{ color: rgba(255,255,255,.75); font-size:.9rem; margin: 0 0 14px; line-height:1.55; }
.footer-partner-cta{
display: inline-flex; align-items: center; gap: 8px;
background: var(--rw-red, #B8283A);
color: #fff !important;
padding: 12px 20px;
border-radius: 999px;
font-weight: 600; font-size: .92rem;
letter-spacing: .04em;
box-shadow: 0 6px 18px -8px rgba(184,40,58,.6);
transition: transform .15s ease, background .15s ease;
}
.footer-partner-cta:hover{
background: #92202F; color: #fff !important;
transform: translateY(-1px);
}
.footer-partner-cta svg{ width:16px; height:16px; }
.footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 22px;
display:flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 16px;
font-size: .82rem; color: rgba(255,255,255,.55);
}
.footer-bottom a{ color: rgba(255,255,255,.65); }
/* ---- 7. "never empty right side" helper ----------------------------------- */
.section-balanced{
display:grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.section-balanced > .media img{
width:100%; border-radius: 16px; aspect-ratio: 4/3; object-fit: cover;
box-shadow: 0 18px 40px -28px rgba(11,47,89,.4);
}
@media (max-width: 900px){ .section-balanced{ grid-template-columns: 1fr; gap: 26px; } }
/* ---- 8. Factory-audit layout fix — balance certifications + image --------- */
.audit-split{
display:grid;
grid-template-columns: 1.15fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 900px){ .audit-split{ grid-template-columns: 1fr; gap: 28px; } }
.audit-split .cert-grid{
display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.audit-split .cert-grid .cert{
background:#fff; border:1px solid #EEE7D8; border-radius: 12px;
padding: 14px; display:flex; gap:12px; align-items:center;
box-shadow: 0 4px 16px -14px rgba(11,47,89,.2);
}
.audit-split .cert img{ width: 44px; height:44px; object-fit: contain; }
.audit-split .cert-body strong{ display:block; color: var(--rw-ink); font-size:.95rem; }
.audit-split .cert-body span{ font-size:.82rem; color: var(--rw-mute); }
.audit-split .media img{
width:100%; border-radius: 16px; aspect-ratio: 3/4; object-fit: cover;
box-shadow: 0 18px 40px -28px rgba(11,47,89,.4);
}
/* ---- 9. Header link visibility bump --------------------------------------- */
.site-header a, .site-nav a{
color: var(--rw-ink, #1A2438);
font-weight: 500;
}
.site-header a:hover, .site-nav a:hover{ color: var(--rw-red); }
/* END ROUND 4 */
/* ---- 10. Text-only pages: center prose, never a huge empty gutter --------- */
.container.prose{
max-width: 72ch;
margin-left: auto;
margin-right: auto;
}
.container.prose p{ font-size: 1.02rem; }
/* ---- 11. Banner chip (HK pill) readable on white and colored banners ----- */
.hk-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; margin-right: 10px;
background: rgba(255,255,255,.14);
color: #fff;
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.hk-chip .red-word{ color: #F3A0AC; }
/* ---- 12. Shop product card padding safety --------------------------------- */
.product-card, .shop-card{
display:flex; flex-direction:column; gap: 10px;
background:#fff; padding: 18px; border-radius: 14px;
border: 1px solid #EEE7D8;
box-shadow: 0 6px 20px -16px rgba(11,47,89,.2);
}
.product-card img, .shop-card img{
width:100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px;
}
/* END ROUND 4 EXTRAS */
/* ============================================================================
ROUND 5 — SPACING CLEANUP, PHOTO-BAND FIX, CARD READABILITY, NO-CART — Apr 26
============================================================================ */
/* ---- A. PHOTO-BAND — kill the inherited display:grid on the section itself.
Old rule: .photo-band{display:grid;grid-template-columns:repeat(3,1fr);}
That made its ONLY child (.container) take 1/3 of the row, clustering
photos on the left and leaving huge empty space on the right. The real
grid belongs on the .grid-3 inside. */
.photo-band{
display: block !important;
grid-template-columns: none !important;
margin: 40px 0;
}
.photo-band > .container{ width: 100%; }
.photo-band .container{ max-width: 1200px; }
.photo-band .grid-3,
.photo-band .grid-2,
.photo-band .grid-4{ width: 100%; }
/* ---- B. TESTIMONIAL CARD — light text on dark navy, restore readability --- */
.testimonial-card,
.tc,
.quote-card,
.testimonials-grid .card,
.testimonials-grid > div{
background: #0B2F59;
color: #FFFFFF;
padding: 28px;
border-radius: 16px;
box-shadow: 0 10px 30px -18px rgba(11,47,89,.45);
border: 1px solid rgba(255,255,255,.08);
}
.testimonial-card *,
.tc *,
.quote-card *,
.testimonials-grid .card *,
.testimonials-grid > div *{ color: inherit; }
.testimonial-card h3,
.testimonial-card h4,
.tc h3, .tc h4,
.testimonials-grid .card h3,
.testimonials-grid .card h4,
.testimonials-grid > div h3,
.testimonials-grid > div h4{
color: #fff;
font-family: var(--ff-serif, 'Cormorant Garamond', serif);
font-weight: 500;
margin: 0 0 4px;
}
.testimonial-card .meta,
.testimonial-card .who,
.tc .meta,
.testimonials-grid .card .meta,
.testimonials-grid > div .meta{
color: rgba(255,255,255,.65);
font-size: .86rem;
letter-spacing: .02em;
}
.testimonial-card .divider,
.testimonial-card hr,
.tc hr,
.testimonials-grid .card hr{
border: 0;
border-top: 1px dashed rgba(255,255,255,.25);
margin: 16px 0;
}
.testimonial-card blockquote,
.testimonial-card .quote,
.tc .quote,
.testimonials-grid .card .quote{
font-family: var(--ff-serif);
font-size: 1.08rem;
line-height: 1.5;
color: #F3E8D1;
margin: 0 0 14px;
}
.testimonial-card .routine,
.testimonial-card .products,
.testimonial-card .context,
.tc .context,
.testimonials-grid .card .context{
color: rgba(255,255,255,.78);
font-size: .92rem;
}
.testimonials-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;
}
@media (max-width: 1000px){ .testimonials-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .testimonials-grid{ grid-template-columns: 1fr; } }
/* ---- C. BANNER LINKS — softer than red-on-underline --------------------- */
.page-banner a,
.page-banner p a{
color: #F3D9B5;
text-decoration: underline;
text-decoration-color: rgba(243,217,181,.5);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
font-weight: 500;
}
.page-banner a:hover{
color: #fff;
text-decoration-color: #fff;
}
/* ---- D. FAQ / closing banners with dark tint — keep underline subtle ---- */
.banner-tint a, .banner-dark a, .cta-band a{
color: #F3D9B5;
text-decoration-color: rgba(243,217,181,.4);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
/* ---- E. SECTION spacing rhythm (tighten the over-generous vertical gaps) -- */
.section{ padding: 72px 0; }
.section + .section{ padding-top: 56px; }
.section-tint + .section-tint{ padding-top: 56px; }
@media (max-width: 800px){
.section{ padding: 48px 0; }
.section + .section{ padding-top: 36px; }
}
.section-head{ margin-bottom: 28px; max-width: 68ch; }
.section-head .eyebrow{ display:inline-block; margin-bottom: 8px; }
.section-head h2{ margin: 0 0 12px; }
.section-head p.sub{ margin: 0; color: var(--rw-ink-soft, #3A4560); max-width: 62ch; }
/* ---- F. HEADER-RIGHT — collapse the gap where the cart button used to be -- */
.header-right{
display: inline-flex;
align-items: center;
gap: 14px;
}
.header-right > *:empty{ display:none; }
/* ---- G. PROSE paragraph spacing — consistent rhythm --------------------- */
.prose p{ margin: 0 0 14px; }
.prose p:last-child{ margin-bottom: 0; }
.prose h2{ margin: 40px 0 18px; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin: 28px 0 12px; }
/* ---- H. Hero bands — don't let big splash text crush the banner --------- */
.page-banner h1{ margin-top: 4px; margin-bottom: 14px; }
.page-banner .lede{ margin: 0 0 0; }
/* ---- I. Card grid default spacing (when pages use .grid-3 of pillars etc.) */
.grid-3 > .pillar,
.grid-2 > .pillar,
.grid-4 > .pillar{
background:#fff; padding: 26px; border-radius: 14px;
border:1px solid #EEE7D8;
box-shadow: 0 6px 24px -20px rgba(11,47,89,.2);
}
.grid-3 > .pillar h3,
.grid-2 > .pillar h3,
.grid-4 > .pillar h3{ margin:0 0 8px; font-size: 1.15rem; color: var(--rw-ink); }
.grid-3 > .pillar p,
.grid-2 > .pillar p,
.grid-4 > .pillar p{ margin:0; color: var(--rw-ink-soft); font-size: .96rem; }
/* ---- J. Cart widgets — Round 5 scrub REMOVED in Round 26
(previously hid #cart-drawer and .cart-btn which broke the drawer). ---- */
/* END ROUND 5 */
/* ============================================================================
ROUND 6 — BANNER ALIGNMENT, PHOTO-BAND ENLARGE, FOOTER CLEANUP — Apr 26
============================================================================ */
/* ---- Banner: everything centered, consistent container ------------------ */
.page-banner{
text-align: center !important;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
}
.page-banner > .container{
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 32px !important;
text-align: center !important;
width: 100%;
}
.page-banner .eyebrow,
.page-banner .hk-chip{
display: inline-block;
margin: 0 0 18px 0 !important;
text-align: center !important;
}
.page-banner .hk-chip + .eyebrow{ margin-left: 10px !important; }
.page-banner h1{
text-align: center !important;
margin: 0 auto 18px !important;
max-width: 22ch;
text-wrap: balance;
}
.page-banner .lede,
.page-banner p,
.page-banner .prose{
text-align: center !important;
max-width: 58ch;
margin: 0 auto !important;
line-height: 1.6;
}
.page-banner .prose + .prose,
.page-banner .banner-contact{ display: none !important; }
/* ---- Photo band: force full-width grid, enlarge photos, tagline above --- */
.photo-band .container{ max-width: 1200px; }
.photo-band .band-head{
text-align: center;
margin: 0 auto 36px;
max-width: 56ch;
}
.photo-band .band-head .eyebrow{ color: var(--rw-red); }
.photo-band .band-head h2{ margin: 6px 0 12px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.photo-band .band-head p.sub{ margin: 0; color: var(--rw-ink-soft); }
.photo-band .grid-3{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
}
.photo-band .grid-3 > figure{
margin: 0;
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #f3efe6;
box-shadow: 0 12px 34px -20px rgba(11,47,89,.3);
}
.photo-band .grid-3 > figure > img{
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.photo-band .grid-3 > figure > figcaption{
padding: 14px 18px;
font-size: .9rem;
color: var(--rw-ink-soft);
background: #fff;
}
@media (max-width: 900px){
.photo-band .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px){
.photo-band .grid-3{ grid-template-columns: 1fr !important; }
}
/* ---- Footer logo: consistent size + visible on dark navy ----------------- */
.footer-brand .logo{
max-width: 160px;
height: auto;
display: block;
filter: brightness(0) invert(1) opacity(.95);
}
/* ---- Footer: Made in Hong Kong as its own pill, not under Terms --------- */
.made-in-hk{
display: inline-block;
margin-top: 14px;
padding: 6px 12px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 999px;
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
}
/* ---- Footer-bottom: clean horizontal pipe separator, no dots ------------ */
.footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-size: .82rem;
color: rgba(255,255,255,.55);
}
.footer-legal-links{
display: inline-flex;
gap: 24px;
}
.footer-legal-links a{
color: rgba(255,255,255,.7);
text-decoration: none;
}
.footer-legal-links a:hover{ color: #F3D9B5; }
/* ---- Partner CTA: comfortable spacing before envelope icon --------------- */
.footer-partner-cta{
padding: 14px 28px 14px 26px;
gap: 14px;
}
.footer-partner-cta svg{
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-left: 4px; /* breathing room against the pill's left edge */
margin-right: 6px; /* a touch of room before the email text */
}
/* END ROUND 6 */
/* ============================================================================
ROUND 7 — COMPANY NAME: REWA Limited (REWYNE is a trademark) — Apr 26
============================================================================ */
.footer-address{ color: rgba(255,255,255,.85); }
.footer-brand .footer-contact{
margin: 12px 0 0;
font-size: .94rem;
color: #ffffff;
line-height: 1.8;
}
.footer-brand .footer-contact a{
color: #ffffff !important;
border-bottom: 0 !important;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.55);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
font-weight: 500;
letter-spacing: .01em;
padding-bottom: 0;
}
.footer-brand .footer-contact a:hover{
color: #F3D9B5 !important;
text-decoration-color: #F3D9B5;
}
.trademark-line{
/* kept inline in case any page still has the old two-line markup */
display: inline;
font-size: inherit;
color: inherit;
margin: 0;
letter-spacing: inherit;
}
.footer-bottom > span:first-child{
font-size: .82rem;
line-height: 1.5;
max-width: 70ch;
}
/* END ROUND 7 */
/* ============================================================================
ROUND 8 — CARD COLOR REWRITE, LEFT-SIDE COMFORT, MOBILE POLISH — Apr 26
============================================================================ */
/* ---- A. TESTIMONIAL CARD — clean white card, navy readable text --------- */
/* Completely override every earlier testimonial-card rule so we have one
consistent, readable design: white card, navy italic quote, gold stars,
navy bold name, muted grey meta line, dashed hairline divider, routine
in soft grey. */
.testimonial-card,
.testimonial-card.editorial,
.testimonial-card.compact,
.testimonials-grid article,
.testimonials-grid .card{
background: #ffffff !important;
color: var(--rw-ink, #1A2438) !important;
border: 1px solid #EDE7D7;
border-top: 3px solid var(--rw-red, #B8283A);
border-radius: 12px;
padding: 30px 28px 26px;
box-shadow: 0 10px 28px -20px rgba(11,47,89,.25);
display: flex;
flex-direction: column;
gap: 14px;
}
.testimonial-card .t-rating,
.testimonial-card .stars{
color: #C9A96A;
font-size: .9rem;
letter-spacing: .18em;
margin: 0;
}
.testimonial-card .t-rating svg{
width: 16px; height: 16px;
fill: #C9A96A;
margin-right: 2px;
}
.testimonial-card .t-rating .star-off{ fill: #E6DECB; }
.testimonial-card blockquote{
margin: 4px 0 6px !important;
font-family: var(--ff-serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 1.12rem !important;
line-height: 1.5;
color: var(--rw-ink, #1A2438) !important;
font-weight: 500;
}
html[lang="zh-Hant"] .testimonial-card blockquote{ font-style: normal; }
.testimonial-card footer{
margin-top: 8px;
padding-top: 16px;
border-top: 1px dashed #DBD3C1;
display: flex;
flex-direction: column;
gap: 6px;
}
.testimonial-card footer cite,
.testimonial-card .attribution,
.testimonial-card .t-name{
font-style: normal !important;
font-weight: 600 !important;
font-size: .98rem !important;
color: var(--rw-ink, #1A2438) !important;
letter-spacing: .01em;
}
.testimonial-card .t-meta,
.testimonial-card .context{
font-size: .82rem !important;
color: var(--rw-mute, #5A6378) !important;
letter-spacing: .02em;
text-transform: none;
font-weight: 400;
}
.testimonial-card .t-ctx{
font-size: .84rem !important;
color: var(--rw-ink-soft, #3A4560) !important;
margin-top: 8px;
padding-top: 10px;
border-top: 1px dotted #E5DDC9;
font-style: italic;
line-height: 1.5;
}
/* ---- B. JOURNAL CARD colors — stronger hierarchy, always readable ------- */
.journal-grid .j-tile{
color: var(--rw-ink, #1A2438);
padding: 6px;
border-radius: 12px;
}
.journal-grid .j-tile .cat{
color: var(--rw-red, #B8283A) !important;
font-weight: 700;
font-size: .7rem;
letter-spacing: .2em;
margin-top: 12px;
}
.journal-grid .j-tile h4{
color: var(--rw-ink, #1A2438) !important;
font-family: var(--ff-serif);
font-weight: 500;
font-size: 1.08rem;
line-height: 1.3;
margin: 6px 0 0;
}
.journal-grid .j-tile p{ color: var(--rw-ink-soft, #3A4560) !important; }
.journal-grid .j-tile:hover h4{ color: var(--rw-red, #B8283A) !important; }
/* ---- C. CONTAINER left-side comfort spacing ----------------------------- */
.container{
padding-left: clamp(20px, 4vw, 48px);
padding-right: clamp(20px, 4vw, 48px);
}
/* content rhythm — never let text touch the left edge on mobile */
.section > .container,
.cta-band > .container,
.page-banner > .container{
padding-left: clamp(20px, 5vw, 48px);
padding-right: clamp(20px, 5vw, 48px);
}
@media (max-width: 600px){
.container{ padding-left: 22px; padding-right: 22px; }
.page-banner > .container{ padding-left: 24px; padding-right: 24px; }
}
/* ---- D. MOBILE POLISH --------------------------------------------------- */
@media (max-width: 760px){
/* Banners — tighter vertical space, single-column text */
.page-banner{
min-height: 260px;
padding: 56px 0 48px;
}
.page-banner h1{
font-size: clamp(1.6rem, 6.2vw, 2.1rem) !important;
max-width: 18ch !important;
margin: 0 auto 14px !important;
line-height: 1.15;
}
.page-banner .lede,
.page-banner p{
font-size: .98rem;
max-width: 44ch;
line-height: 1.55;
}
.page-banner .eyebrow{ font-size: .72rem; letter-spacing: .2em; }
/* Section heading — not overpowering */
.section{ padding: 44px 0; }
.section + .section{ padding-top: 32px; }
.section-head h2{ font-size: clamp(1.5rem, 5.8vw, 1.9rem); }
.section-head p.sub{ font-size: .96rem; }
/* Split layouts stack tightly */
.split, .split.split-flip, .section-balanced, .audit-split{
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
.split .split-media img,
.section-balanced .media img,
.audit-split .media img{
aspect-ratio: 4/3 !important;
}
/* Grids collapse properly */
.grid-2, .grid-3, .grid-4,
.photo-band .grid-3,
.science-pillars,
.testimonials-grid{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
/* Photo band heading */
.photo-band .band-head{ margin-bottom: 22px; }
.photo-band .band-head h2{ font-size: 1.5rem; }
/* Cards padding */
.testimonial-card{ padding: 24px 22px 22px; }
.grid-3 > .pillar, .grid-2 > .pillar, .grid-4 > .pillar{ padding: 22px 20px; }
/* Potency chart — stack label/bar/value */
.potency-chart .row{
grid-template-columns: 100px 1fr 60px !important;
gap: 10px !important;
}
.potency-chart .label{ font-size: .85rem; }
/* Footer — single column but spacious */
.footer-grid{
grid-template-columns: 1fr !important;
gap: 32px;
padding: 0 4px;
}
.footer-partner{ padding: 22px 20px; }
.footer-partner-cta{ width: 100%; justify-content: center; }
.footer-bottom{
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-top: 20px;
}
.footer-legal-links{ gap: 18px; }
/* Header — logo shrinks, nav wraps sensibly */
.site-header .header-inner{ flex-wrap: wrap; gap: 10px; }
.primary-nav{
order: 10;
width: 100%;
overflow-x: auto;
white-space: nowrap;
gap: 14px;
padding: 8px 0;
border-top: 1px solid rgba(0,0,0,.05);
}
.primary-nav a{ font-size: .92rem; }
.header-right{ gap: 10px; }
.currency-switch button{ font-size: .8rem; padding: 6px 10px; }
/* Inquiry form — full-width radios */
.inquiry-form .pill-radio{
display: block;
margin: 0 0 8px 0;
text-align: center;
}
.inquiry-form .row2{ grid-template-columns: 1fr !important; }
.inquiry-form .btn-inquiry,
.inquiry-form button[type=submit]{
width: 100%;
padding: 15px 20px;
}
/* WhatsApp float — smaller pill, label hidden */
.wa-float{ padding: 11px; right: 12px; bottom: 12px; }
.wa-float .wa-label{ display: none; }
}
@media (max-width: 420px){
.page-banner h1{ font-size: clamp(1.5rem, 7.2vw, 1.9rem) !important; max-width: 16ch !important; }
.page-banner .lede{ font-size: .94rem; }
.section-head h2{ font-size: 1.45rem; }
.testimonial-card blockquote{ font-size: 1.02rem !important; }
}
/* ---- E. Prevent wide-word overflow -------------------------------------- */
body, p, h1, h2, h3, h4, li{
overflow-wrap: anywhere;
word-break: break-word;
}
/* END ROUND 8 */
/* ============================================================================
ROUND 9 — Science-page visual upgrade
Coverage comparison panels, dose-response curve, factory-audit cards,
and Hong Kong lab photo band.
============================================================================ */
/* ---- Coverage comparison (three hex-grid panels) ------------------------ */
.coverage-compare{
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 8px 0 40px;
}
.coverage-panel{
margin: 0;
background: #FBF7EC;
border: 1px solid #E4D9BE;
border-radius: 10px;
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 2px 8px rgba(11,47,89,.04);
}
.coverage-panel svg{
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
.coverage-panel figcaption{
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 2px 0;
}
.coverage-panel figcaption strong{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.35rem;
color: var(--rw-navy);
font-weight: 600;
line-height: 1.15;
}
.coverage-panel .tier-note{
font-size: .88rem;
color: var(--rw-mute);
line-height: 1.45;
}
.coverage-panel-hero{
border-color: #D7B8BD;
background: linear-gradient(180deg, #FBF4F5 0%, #FBF7EC 70%);
box-shadow: 0 6px 20px rgba(184,40,58,.08);
}
/* Pill-style tier tag */
.tier-tag{
display: inline-block;
align-self: flex-start;
font-family: 'Manrope', sans-serif;
font-size: .7rem;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.tier-tag.tier-low{ background: #EDE6D5; color: #6B5A47; border: 1px solid #D7C9A8; }
.tier-tag.tier-mid{ background: #E8EEF6; color: var(--rw-navy); border: 1px solid #BFD1E4; }
.tier-tag.tier-high{ background: var(--rw-red); color: #fff; border: 1px solid var(--rw-red); }
/* ---- Dose-response curve block ------------------------------------------ */
.dose-curve-wrap{
display: grid !important;
grid-template-columns: 1fr 1.15fr;
gap: 32px;
align-items: center;
background: #FBF7EC;
border: 1px solid #E4D9BE;
border-radius: 12px;
padding: 28px 32px;
margin-top: 12px;
}
.dose-curve-wrap .dose-text{ padding-right: 8px; }
.dose-curve-wrap .dose-text .eyebrow{
font-size: .72rem;
letter-spacing: 2.2px;
color: var(--rw-red);
font-weight: 600;
text-transform: uppercase;
display: block;
margin-bottom: 8px;
}
.dose-curve-wrap .dose-text h3{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.7rem;
line-height: 1.2;
color: var(--rw-navy);
margin: 0 0 12px;
font-weight: 600;
}
.dose-curve-wrap .dose-text p{
font-size: .98rem;
line-height: 1.6;
color: var(--rw-ink-soft);
margin: 0;
}
.dose-curve{
width: 100%;
height: auto;
max-width: 520px;
justify-self: end;
}
/* ---- Factory-audit elaborated cards ------------------------------------- */
.audit-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 8px 0 0;
}
.audit-card{
background: #ffffff;
border: 1px solid #E4D9BE;
border-top: 3px solid var(--rw-red);
border-radius: 10px;
padding: 26px 24px 24px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 2px 10px rgba(11,47,89,.05);
}
.audit-card .audit-mark{
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.audit-card .audit-mark img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.audit-card h3{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--rw-navy);
line-height: 1.2;
margin: 0 0 2px;
}
.audit-card p{
font-size: .94rem;
line-height: 1.6;
color: var(--rw-ink-soft);
margin: 0;
}
.audit-card p strong{ color: var(--rw-navy); font-weight: 600; }
.audit-card .audit-what{ padding-bottom: 10px; border-bottom: 1px dashed #E4D9BE; }
/* ---- Lab-photo band (figure captions under each image) ------------------ */
.lab-photo{
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.lab-photo img{
width: 100%;
height: 280px;
object-fit: cover;
border-radius: 8px;
display: block;
box-shadow: 0 4px 14px rgba(11,47,89,.10);
}
.lab-photo figcaption{
font-size: .86rem;
color: var(--rw-mute);
line-height: 1.45;
padding: 0 4px;
}
/* ---- Responsive — tablet ------------------------------------------------- */
@media (max-width: 960px){
.coverage-compare{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coverage-panel{ padding: 10px 10px 12px; }
.coverage-panel figcaption strong{ font-size: 1.15rem; }
.dose-curve-wrap{ grid-template-columns: 1fr; padding: 24px 22px; gap: 18px; }
.dose-curve{ justify-self: center; max-width: 100%; }
.audit-grid{ grid-template-columns: 1fr; gap: 16px; }
.audit-card{ padding: 22px 20px; }
}
/* ---- Responsive — mobile ------------------------------------------------- */
@media (max-width: 760px){
.coverage-compare{ grid-template-columns: 1fr !important; gap: 18px; }
.coverage-panel svg{ max-width: 100%; }
.coverage-panel figcaption{ align-items: flex-start; }
.dose-curve-wrap{ padding: 20px 16px; }
.dose-curve-wrap .dose-text h3{ font-size: 1.45rem; }
.audit-card h3{ font-size: 1.25rem; }
.lab-photo img{ height: 220px; }
}
/* END ROUND 9 */
/* ============================================================================
ROUND 10 — Global link-underline hygiene
Make sure links never get a double line (default underline + border-bottom).
============================================================================ */
a[href]{ text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* If an element paints a border-bottom as its "underline", suppress the
default text-decoration so only one line is visible. */
.prose a[style*="border-bottom"],
.prose a.body-link,
.btn-link,
.section-foot a,
.hk-story-band a,
.fine a,
.primary-nav a{
text-decoration: none;
}
/* ============================================================================
ROUND 11 — Blog article split layout + share bar + 6-tile related row
============================================================================ */
/* ---- Split layout ------------------------------------------------------- */
.article-v2{ padding: 48px 0 60px; }
.article-split{
display: grid !important;
grid-template-columns: minmax(260px, 38%) 1fr;
gap: 48px;
align-items: flex-start;
}
.article-split-media{ position: sticky; top: 96px; }
.article-split-media figure{ margin: 0; }
.article-split-media img{
width: 100%;
height: auto;
max-height: 72vh;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0 8px 28px rgba(11,47,89,.10);
}
.article-split-body{ max-width: 68ch; }
.article-split-head{ margin-bottom: 28px; }
.article-split-head .eyebrow{
display: inline-block;
font-size: .72rem;
letter-spacing: 2.2px;
color: var(--rw-red);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
}
.article-split-head h1{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
line-height: 1.15;
color: var(--rw-navy);
margin: 0 0 14px;
font-weight: 600;
}
.article-split-head .lede{
font-size: 1.08rem;
line-height: 1.55;
color: var(--rw-ink-soft);
margin: 0;
}
.article-prose h2{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.5rem;
color: var(--rw-navy);
margin: 28px 0 10px;
font-weight: 600;
}
.article-prose p{
font-size: 1rem;
line-height: 1.7;
color: var(--rw-ink-soft);
margin: 0 0 14px;
}
.article-prose .article-foot{
margin-top: 28px;
padding-top: 18px;
border-top: 1px dashed #E4D9BE;
font-size: .95rem;
color: var(--rw-ink-soft);
}
/* ---- Share block -------------------------------------------------------- */
.article-share{
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid #E4D9BE;
display: flex;
flex-direction: column;
gap: 12px;
}
.article-share .share-head{
font-family: 'Manrope', sans-serif;
font-size: .72rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rw-mute);
font-weight: 600;
}
.article-share .share-row{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.article-share .share-btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-size: .85rem;
font-weight: 500;
text-decoration: none !important;
border: 1px solid transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.article-share .share-btn:hover{
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(11,47,89,.08);
}
.article-share .share-wa{
background: #25D366;
color: #ffffff !important;
border-color: #1FB054;
}
.article-share .share-x{
background: #0B2F59;
color: #ffffff !important;
border-color: #0B2F59;
}
.article-share .share-mail{
background: #F7F3EC;
color: var(--rw-navy) !important;
border-color: #E4D9BE;
}
.article-share .share-copy{
background: #ffffff;
color: var(--rw-navy) !important;
border-color: #E4D9BE;
}
.article-share .share-btn svg{ flex: 0 0 auto; }
/* ---- 6-tile one-line related row --------------------------------------- */
.related-mini{ padding: 48px 0 56px; background: #F7F3EC; }
.related-mini .section-head{ text-align: center; margin-bottom: 24px; }
.related-mini .section-head .eyebrow{
font-size: .72rem;
letter-spacing: 2.2px;
color: var(--rw-red);
font-weight: 600;
text-transform: uppercase;
}
.related-mini .section-head h2{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.9rem;
color: var(--rw-navy);
margin: 6px 0 0;
font-weight: 600;
}
.related-row{
display: grid !important;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.related-row .j-tile.mini{
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: var(--rw-ink);
transition: transform .18s ease;
}
.related-row .j-tile.mini:hover{ transform: translateY(-2px); }
.related-row .j-tile.mini figure{
margin: 0;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #EDE6D5;
}
.related-row .j-tile.mini img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.related-row .j-tile.mini:hover img{ transform: scale(1.04); }
.related-row .j-tile.mini h4{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: .98rem;
font-weight: 500;
line-height: 1.25;
color: var(--rw-navy);
margin: 0;
padding: 0 2px;
}
/* ---- Responsive — tablet ------------------------------------------------- */
@media (max-width: 1100px){
.related-row{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-row .j-tile.mini:nth-child(n+7){ display: none; }
}
@media (max-width: 900px){
.article-split{ grid-template-columns: 1fr; gap: 24px; }
.article-split-media{ position: static; top: auto; }
.article-split-media img{ max-height: 420px; }
.article-split-body{ max-width: none; }
}
@media (max-width: 700px){
.related-row{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
.related-row .j-tile.mini:nth-child(n+5){ display: none; }
.article-share .share-btn span{ display: none; }
.article-share .share-btn{ padding: 10px; border-radius: 50%; }
}
/* END ROUND 11 */
/* ============================================================================
ROUND 13 — Product SKU page layout, pro-notice 1-line, help-line,
breathable spacing across product hero & section-tint CTA.
============================================================================ */
/* Product hero: let it breathe, and prevent the 1.1/1 split from crushing the
right column when combined with upstream `.split` rules. Lock a reasonable
left column so the headline always has room. */
.product-hero{
padding-top: clamp(56px, 7vw, 96px) !important;
padding-bottom: clamp(48px, 6vw, 80px) !important;
}
.product-hero > .container.split{
display: grid !important;
grid-template-columns: minmax(320px, 44%) 1fr !important;
column-gap: clamp(40px, 5vw, 72px) !important;
row-gap: 28px !important;
align-items: start !important;
}
.product-hero .split-media{
position: sticky;
top: 110px;
}
.product-hero .split-media img{
width: 100%;
height: auto;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 20px 50px -28px rgba(11,47,89,.35);
}
.product-hero .split-body{
padding-top: 4px;
max-width: 620px;
display: flex;
flex-direction: column;
gap: 18px;
}
.product-hero .split-body > *{ margin: 0; }
.product-hero .split-body .hk-chip{ align-self: flex-start; }
.product-hero .split-body .eyebrow{ margin-top: 4px; }
/* Hero headline — must never break mid-word (fixes '專業級 Exosom / e 導入精 / 華'). */
.product-hero .split-body h1{
font-family: var(--ff-serif);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
line-height: 1.15;
letter-spacing: -0.005em;
word-break: keep-all;
overflow-wrap: break-word;
margin: 6px 0 4px;
}
html[lang="zh-Hant"] .product-hero .split-body h1{
font-family: var(--ff-serif-tc, var(--ff-serif));
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1.25;
}
.product-hero .split-body .lede{
font-size: 1.02rem;
line-height: 1.55;
color: var(--rw-ink-soft, #3A4560);
margin: 2px 0 6px;
}
.product-hero .potency-chip--hero{ margin: 4px 0 6px; }
.product-hero .price-lg{
font-family: var(--ff-serif);
font-size: 1.55rem;
color: var(--rw-red);
margin: 6px 0 4px;
display: flex;
align-items: baseline;
gap: 10px;
}
.product-hero .price-lg .size{
font-size: .92rem;
color: var(--rw-mute);
font-family: var(--ff-sans);
letter-spacing: .04em;
}
/* One-line pro-notice — compact, no uppercase cramming. */
.product-hero .pro-notice,
.pro-notice{
display: inline-block;
background: var(--rw-red);
color: var(--rw-ivory);
padding: 10px 18px;
border-radius: 4px;
font-size: .82rem;
letter-spacing: .06em;
text-transform: none;
text-align: left;
white-space: normal; /* allow wrap only at natural spaces on narrow viewports */
line-height: 1.35;
margin: 8px 0 4px;
max-width: 100%;
}
html[lang="zh-Hant"] .pro-notice{
letter-spacing: .04em;
font-size: .85rem;
}
@media (min-width: 900px){
/* On desktop, the red bar should always stay on ONE line. */
.product-hero .pro-notice{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.product-hero .hero-ctas{
display: flex;
gap: 14px;
margin: 10px 0 6px;
flex-wrap: wrap;
}
.product-hero .hero-ctas .btn{ padding: 14px 24px; font-size: .78rem; }
.product-hero .split-body > .prose{
margin-top: 10px;
padding-top: 18px;
border-top: 1px solid rgba(11,47,89,.1);
}
.product-hero .split-body > .prose p{
font-size: .98rem;
line-height: 1.7;
color: var(--rw-ink-soft, #3A4560);
}
/* Responsive — below 900px, stack image over copy. */
@media (max-width: 900px){
.product-hero > .container.split{
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.product-hero .split-media{ position: static; }
.product-hero .split-media img{ aspect-ratio: 4/3; }
.product-hero .split-body{ max-width: none; }
.product-hero .split-body h1{ font-size: clamp(1.8rem, 5.5vw, 2.4rem); }
}
/* Section-tint help CTA — a tight 1-line main + 1-line sub. */
.section-tint .help-line{
font-size: 1.02rem;
line-height: 1.7;
color: var(--rw-ink-soft, #3A4560);
max-width: 820px;
margin: 10px auto 0;
}
.section-tint h3{
font-family: var(--ff-serif);
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
color: var(--rw-navy);
margin: 0;
}
/* END ROUND 13 */
/* ============================================================================
ROUND 14 — Footer partner CTA: never clip the email pill; ZH audit grid
parity with EN version.
============================================================================ */
/* Wider partner column so the email pill never breaks. */
.site-footer .footer-grid,
footer .footer-grid{
grid-template-columns: 1.1fr .9fr .9fr 1.55fr !important;
}
@media (max-width: 960px){
.site-footer .footer-grid,
footer .footer-grid{
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 560px){
.site-footer .footer-grid,
footer .footer-grid{
grid-template-columns: 1fr !important;
}
}
.footer-partner{
padding: 22px 22px !important;
}
.footer-partner-cta{
display: inline-flex !important;
width: 100%;
justify-content: center;
align-items: center;
padding: 13px 18px !important;
font-size: .88rem !important;
letter-spacing: .01em !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
white-space: nowrap !important;
text-align: center;
box-sizing: border-box;
gap: 10px !important;
}
.footer-partner-cta svg{
flex: 0 0 auto;
width: 15px !important;
height: 15px !important;
}
html[lang="zh-Hant"] .footer-partner p{ font-size: .92rem; }
/* END ROUND 14 */
/* ============================================================================
ROUND 15 — CRITICAL FIX: bare `footer{ background: navy }` earlier in
this file bleeds into EVERY