/** Shopify CDN: Minification failed
Line 431:152 Unexpected "/"
**/
/* ============================================================
ROSULAB — Global Theme CSS
Paste into: Online Store → Themes → Edit Code → Assets
Save as: rosulab-global.css
Then add to theme.liquid :
{{ 'rosulab-global.css' | asset_url | stylesheet_tag }}
============================================================ */
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
/* ── Design Tokens ── */
:root {
--rl-cream: #f0ece3;
--rl-warm-white: #f7f4ef;
--rl-stone-light: #e4ddd1;
--rl-stone: #c8bfaf;
--rl-stone-dark: #9a8f82;
--rl-bark: #6b5c4e;
--rl-sauna: #3d2e24;
--rl-charcoal: #1e1a17;
--rl-black: #120f0d;
--rl-gold: #c8a96e;
--rl-gold-light: #dfc28f;
--rl-white: #faf8f5;
/* Glass */
--rl-glass-bg: rgba(250, 248, 245, 0.72);
--rl-glass-border:rgba(255, 255, 255, 0.45);
--rl-glass-blur: blur(22px) saturate(1.4);
/* Dark glass */
--rl-glass-dark-bg: rgba(30, 26, 23, 0.78);
--rl-glass-dark-border:rgba(255, 255, 255, 0.08);
/* Typography */
--rl-serif: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
--rl-mono: 'Courier Prime', 'Courier New', monospace;
/* Spacing */
--rl-nav-h: 72px;
}
/* ── Body + Background Gradient ── */
body {
font-family: var(--rl-serif);
color: var(--rl-charcoal);
background-color: var(--rl-cream);
/* Sauna-rock gradient: warm cream → stone → bark → deep charcoal */
background-image:
linear-gradient(
to bottom,
#f7f4ef 0%,
#f0ece3 8%,
#e8e0d4 18%,
#d9cfc2 30%,
#c4b8a8 42%,
#a89384 54%,
#7d6656 66%,
#4a3629 78%,
#2a1f18 88%,
#1a1410 100%
);
background-attachment: fixed;
background-size: 100% 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rl-stone); border-radius: 2px; }
/* ── Selection ── */
::selection { background: var(--rl-gold); color: var(--rl-charcoal); }
/* ── LOGO — Make it bigger ── */
.header__heading-logo,
.header__heading img,
.site-header__logo img,
.header-logo img,
.logo img,
a[href="/"] img,
.header__logo img {
height: 64px !important;
width: auto !important;
max-width: 220px !important;
object-fit: contain;
filter: none;
}
/* Clarity theme specific logo selectors */
.header__logo { height: 64px !important; }
.header__heading-link img { height: 64px !important; width: auto !important; }
/* ── HEADER — Glass luxury nav ── */
.header,
.site-header,
#shopify-section-header .header,
header.header {
position: sticky !important;
top: 0 !important;
z-index: 900 !important;
height: var(--rl-nav-h) !important;
padding: 0 2.5rem !important;
display: flex !important;
align-items: center !important;
background: var(--rl-glass-bg) !important;
backdrop-filter: var(--rl-glass-blur) !important;
-webkit-backdrop-filter: var(--rl-glass-blur) !important;
border-bottom: 1px solid var(--rl-glass-border) !important;
box-shadow: 0 2px 32px rgba(30,20,14,0.08), 0 1px 0 rgba(255,255,255,0.5) inset !important;
transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
/* Scrolled state — darker glass */
.header--scrolled {
background: rgba(240, 236, 227, 0.92) !important;
box-shadow: 0 4px 40px rgba(30,20,14,0.14), 0 1px 0 rgba(255,255,255,0.4) inset !important;
}
/* Nav links */
.header__nav-item a,
.header__menu-item a,
.header__menu-item > a,
.site-nav__link,
header nav a,
.header a:not(.header__heading-link) {
font-family: var(--rl-mono) !important;
font-size: 0.65rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--rl-charcoal) !important;
opacity: 0.65 !important;
text-decoration: none !important;
transition: opacity 0.2s ease !important;
padding: 0.35rem 0.75rem !important;
border-radius: 100px !important;
transition: opacity 0.2s, background 0.2s !important;
}
.header__nav-item a:hover,
.header__menu-item a:hover,
.site-nav__link:hover,
header nav a:hover {
opacity: 1 !important;
background: rgba(200, 169, 110, 0.12) !important;
}
/* ── BUBBLE BUTTONS — The signature element ── */
/* Every button on the site becomes a luxe bubble */
.btn,
.button,
button[type="submit"],
.shopify-payment-button__button,
.cart__checkout-button,
.product-form__submit,
input[type="submit"],
.rl-bubble-btn,
.add-to-cart,
.cart-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--rl-mono) !important;
font-size: 0.68rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
padding: 0.85rem 2.2rem !important;
border-radius: 100px !important;
border: 1px solid rgba(200, 169, 110, 0.35) !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.55) 0%,
rgba(245,240,230,0.35) 40%,
rgba(200,169,110,0.18) 100%
) !important;
backdrop-filter: blur(12px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
color: var(--rl-charcoal) !important;
cursor: pointer !important;
text-decoration: none !important;
overflow: hidden !important;
transition:
transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.25s ease,
background 0.25s ease !important;
box-shadow:
0 4px 24px rgba(200,169,110,0.15),
0 1px 0 rgba(255,255,255,0.7) inset,
0 -1px 0 rgba(0,0,0,0.04) inset !important;
}
/* Bubble shimmer overlay */
.btn::before,
.button::before,
button[type="submit"]::before,
.product-form__submit::before,
.rl-bubble-btn::before {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: radial-gradient(
circle at 30% 20%,
rgba(255,255,255,0.5) 0%,
transparent 50%
) !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.3s !important;
}
.btn:hover::before,
.button:hover::before,
button[type="submit"]:hover::before,
.product-form__submit:hover::before,
.rl-bubble-btn:hover::before {
opacity: 1 !important;
}
/* Bubble hover */
.btn:hover,
.button:hover,
button[type="submit"]:hover,
.product-form__submit:hover,
.rl-bubble-btn:hover {
transform: translateY(-2px) scale(1.015) !important;
box-shadow:
0 8px 32px rgba(200,169,110,0.25),
0 1px 0 rgba(255,255,255,0.8) inset,
0 -1px 0 rgba(0,0,0,0.06) inset !important;
}
.btn:active,
.button:active,
button[type="submit"]:active,
.product-form__submit:active {
transform: translateY(0) scale(0.99) !important;
}
/* Dark primary bubble — for checkout, ATC */
.btn--primary,
.product-form__submit,
.shopify-payment-button__button--unbranded,
.cart__checkout-button {
background:
linear-gradient(
145deg,
rgba(61,46,36,0.92) 0%,
rgba(30,26,23,0.96) 60%,
rgba(18,15,13,0.98) 100%
) !important;
color: var(--rl-warm-white) !important;
border-color: rgba(200,169,110,0.25) !important;
box-shadow:
0 6px 28px rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.1) inset !important;
}
.btn--primary:hover,
.product-form__submit:hover,
.cart__checkout-button:hover {
box-shadow:
0 10px 36px rgba(0,0,0,0.4),
0 1px 0 rgba(255,255,255,0.12) inset !important;
}
/* ── CART DRAWER — Glass bubble ── */
#rl-cart-drawer,
#shopify-section-rosulab-cart-drawer .rl-gcd {
background: var(--rl-glass-bg) !important;
backdrop-filter: var(--rl-glass-blur) !important;
-webkit-backdrop-filter: var(--rl-glass-blur) !important;
border-left: 1px solid var(--rl-glass-border) !important;
}
/* ── SECTION BACKGROUNDS — adapt to gradient ── */
/* Only our RL sections get transparent — leave Clarity sections alone */
.rl-home,
.rl-cine,
.rl-srj,
.rl-layer,
.rl-scent,
.rl-rrd,
.rl-log,
.rl-journal,
.rl-bundle,
.rl-gift,
.rl-ost,
.rl-ecg,
.rl-edit,
.rl-tactile,
.rl-story,
.rl-disc,
.rl-rdj,
.rl-rbb,
.rl-grd,
.rl-srh,
.rl-srl,
.rl-ipdp,
.rl-ipd,
.rl-pdp2,
.rl-pdp3,
.rl-tfooter,
.rl-cart2 {
background: transparent !important;
}
/* Give RL section cards a glass surface — explicit classes only */
.rl-home__product,
.rl-bundle__panel,
.rl-gift__right,
.rl-ost__steps,
.rl-rrd__section,
.rl-log__section {
background: var(--rl-glass-bg) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
border-color: var(--rl-glass-border) !important;
}
/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
font-family: var(--rl-serif);
font-weight: 300;
}
/* ── PRODUCT CARDS in Clarity theme (main content only) ── */
.main-page-content .card,
.main-page-content .card-wrapper,
.grid__item .card,
.grid__item .card-wrapper,
.product-card {
background: var(--rl-glass-bg) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid var(--rl-glass-border) !important;
border-radius: 12px !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s !important;
box-shadow: 0 2px 20px rgba(30,20,14,0.06) !important;
}
.card:hover,
.card-wrapper:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 40px rgba(30,20,14,0.14) !important;
}
/* ── FORMS & INPUTS ── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
background: rgba(255,255,255,0.55) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(200,169,110,0.3) !important;
border-radius: 8px !important;
font-family: var(--rl-mono) !important;
font-size: 0.72rem !important;
letter-spacing: 0.06em !important;
color: var(--rl-charcoal) !important;
outline: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--rl-gold) !important;
box-shadow: 0 0 0 3px rgba(200,169,110,0.12) !important;
}
/* ── PRICE ── */
.price,
.product__price,
.price__regular {
font-family: var(--rl-mono) !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
}
/* ── FOOTER ── */
/* Leave Clarity footer completely alone — its black background is intentional */
/* ── SCROLL REVEAL ANIMATION ── */
@keyframes rl-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.rl-reveal {
animation: rl-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.rl-reveal-2 { animation-delay: 0.1s; }
.rl-reveal-3 { animation-delay: 0.2s; }
.rl-reveal-4 { animation-delay: 0.3s; }
/* ── GRAIN TEXTURE OVERLAY ── */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.028;
pointer-events: none;
z-index: 9999;
mix-blend-mode: multiply;
}
/* ── MOBILE ── */
@media (max-width: 768px) {
:root { --rl-nav-h: 60px; }
.header, .site-header, #shopify-section-header .header { padding: 0 1rem !important; }
.header__heading-logo img,
.header__heading-link img { height: 48px !important; }
}
/* ── SCROLL BEHAVIOUR ── */
html { scroll-behavior: smooth; }
* ── Core glass effect ───────────────────────────────────────── */
header,
.header,
.site-header,
.shopify-section-header-sticky,
[class*="header__wrapper"],
.header-wrapper {
background: rgba(245, 242, 238, 0.55) !important;
/* Glass blur — the main effect */
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
/* Thin frosted border at the bottom */
border-bottom: 0.5px solid rgba(210, 198, 188, 0.35) !important;
/* Subtle inner highlight at the top edge — gives glass depth */
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.5) inset,
0 4px 32px 0 rgba(30, 26, 23, 0.04) !important;
/* Ensure it floats above content when sticky */
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
/* ── Scrolled state: slightly more opaque ────────────────────── */
/* JavaScript below handles adding this class on scroll */
header.scrolled,
.header.scrolled,
.site-header.scrolled {
background: rgba(245, 242, 238, 0.78) !important;
border-bottom: 0.5px solid rgba(180, 166, 154, 0.4) !important;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
0 8px 40px 0 rgba(30, 26, 23, 0.07) !important;
}
/* ── Logo + nav text — ensure legibility on glass ────────────── */
header a,
.header a,
.site-header a,
.header__heading-link,
.header__menu-item {
color: #1e1a17 !important;
text-shadow: none !important;
}
header svg path,
.header svg path {
fill: #1e1a17 !important;
}
header svg use,
.header svg use {
color: #1e1a17 !important;
}
/* ── Cart icon and count bubble ──────────────────────────────── */
.cart-count-bubble,
[class*="cart__count"] {
background: rgba(30, 26, 23, 0.12) !important;
color: #1e1a17 !important;
}
/* ══════════════════════════════════════════════════════════════
SCROLL BEHAVIOUR SCRIPT
Add this to your theme.liquid just before
══════════════════════════════════════════════════════════════
*/
/* ══════════════════════════════════════════════════════════════
DARK HERO IMAGE VARIANT
If your homepage has a dark hero image behind the header,
use this override to switch to a dark glass instead.
Add class "dark-hero" to your or on those pages.
══════════════════════════════════════════════════════════════ */
.dark-hero header,
.dark-hero .header,
.dark-hero .site-header {
background: rgba(20, 17, 14, 0.45) !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
0 4px 32px 0 rgba(0, 0, 0, 0.12) !important;
}
.dark-hero header a,
.dark-hero .header a,
.dark-hero .site-header a {
color: #f0ece6 !important;
}
.dark-hero header svg path,
.dark-hero .header svg path {
fill: #f0ece6 !important;
}
/* ══════════════════════════════════════════════════════════════
MOBILE — reduce blur on low-power devices
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
header,
.header,
.site-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(245, 242, 238, 0.95) !important;
}
}
@media (max-width: 768px) {
header,
.header,
.site-header {
backdrop-filter: blur(12px) saturate(140%) !important;
-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
}