/* ========================================================= THE ASSAM JAR — theme system 3 switchable looks: Heritage (light), Midnight (dark), Orchard (fresh). Toggled via by theme.js. Semantic tokens added on top of the primitives in styles.css: --band : dark decorative section background (strip/process/…) --on-dark : text/heading sitting on a --band / dark band --header-bg : frosted header background Everything else re-tints the existing primitives per theme. ========================================================= */ /* ---- Heritage (default) : new tokens ---- */ :root{ --band:#571619; --on-dark:#f7efe1; --header-bg:rgba(251,245,234,.82); --elev:0 18px 40px -30px rgba(61,15,17,.5); --panel-blur:none; --bg-design: radial-gradient(120% 90% at 85% -5%, rgba(193,154,75,.16), transparent 55%), radial-gradient(90% 70% at 5% 110%, rgba(87,22,25,.06), transparent 60%); } /* ---- Midnight : dark, charcoal + gold (matches the logo) ---- */ html[data-theme="midnight"]{ --paper:#161012; --cream:#1c1517; /* section surface */ --cream-2:#241b1d; /* cards / raised surface (lighter = elevated) */ --ink:#f2e9db; --ink-soft:#b7a99c; --maroon:#c9a24a; /* brand: headings, primary buttons, borders */ --maroon-2:#241a10; /* order band start */ --maroon-deep:#120c0d; /* deepest band (announce/footer/gradient end) */ --gold:#d9b45f; --gold-2:#ecd7a1; --chili:#e0673f; --line:rgba(216,189,130,.16); --shadow:0 24px 60px -28px rgba(0,0,0,.72); --band:#221619; --on-dark:#f2e9db; --header-bg:rgba(18,12,13,.85); --bg-design: radial-gradient(120% 90% at 85% -10%, rgba(201,162,74,.14), transparent 55%), radial-gradient(100% 80% at 50% 120%, rgba(90,22,25,.20), transparent 60%); } /* ---- Orchard : fresh forest green + brass ---- */ html[data-theme="orchard"]{ --paper:#f6f3ea; --cream:#eef1e6; --cream-2:#fbfaf3; --ink:#26302a; --ink-soft:#5a6b60; --maroon:#265b43; /* brand: deep forest green */ --maroon-2:#2f6b4f; --maroon-deep:#173a2b; --gold:#b6862f; /* brass */ --gold-2:#d8b66a; --chili:#c2542a; /* terracotta */ --line:rgba(38,91,67,.16); --shadow:0 24px 60px -28px rgba(19,50,35,.4); --band:#265b43; --on-dark:#eef4ea; --header-bg:rgba(246,243,234,.85); --bg-design: radial-gradient(120% 90% at 85% -5%, rgba(182,134,47,.14), transparent 55%), radial-gradient(90% 70% at 5% 110%, rgba(38,91,67,.10), transparent 60%); } /* ============================================================ GLASSMORPHISM — frosted translucent panels over colour blobs ============================================================ */ html[data-theme="glass"]{ --paper:#e9edf6; --cream:rgba(255,255,255,.45); --cream-2:rgba(255,255,255,.55); --ink:#1e2430; --ink-soft:#586074; --maroon:#8e2f4d; --maroon-2:#b23a5f; --maroon-deep:#5e1e33; --gold:#b8862f; --gold-2:#d9b46a; --chili:#e0555f; --line:rgba(255,255,255,.55); --radius:22px; --shadow:0 20px 50px -22px rgba(30,36,48,.4); --elev:0 14px 40px -18px rgba(30,36,48,.28); --band:rgba(58,24,38,.34); --on-dark:#fbf1f5; --header-bg:rgba(255,255,255,.45); --bg-design: radial-gradient(45% 45% at 12% 18%, rgba(120,160,255,.55), transparent 60%), radial-gradient(45% 45% at 88% 12%, rgba(255,140,190,.5), transparent 60%), radial-gradient(50% 50% at 75% 85%, rgba(120,230,200,.5), transparent 60%), radial-gradient(40% 40% at 25% 90%, rgba(255,205,120,.5), transparent 60%); } html[data-theme="glass"] .card, html[data-theme="glass"] .visit-card, html[data-theme="glass"] .review, html[data-theme="glass"] .faq-item, html[data-theme="glass"] .strip, html[data-theme="glass"] .strip-grid>div, html[data-theme="glass"] .process, html[data-theme="glass"] .order, html[data-theme="glass"] .cart-panel, html[data-theme="glass"] .ts-menu{ -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); } html[data-theme="glass"] .header{ -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); } html[data-theme="glass"] .footer{ background:rgba(30,36,48,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } /* ============================================================ SKEUOMORPHISM — tactile gradients, bevels & inset depth ============================================================ */ html[data-theme="skeuo"]{ --paper:#e6ddcc; --cream:#efe7d6; --cream-2:#f4ecdb; --ink:#3a2f26; --ink-soft:#6b5d4d; --maroon:#6b2f2a; --maroon-2:#7a3a2f; --maroon-deep:#3f1a16; --gold:#a9781f; --gold-2:#d3ac5f; --chili:#b6431f; --line:rgba(90,60,40,.28); --radius:14px; --shadow:0 12px 24px rgba(60,40,25,.35); --elev:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px rgba(60,40,25,.3); --band:#5a2b26; --on-dark:#f4e7d1; --header-bg:linear-gradient(180deg,#f2e9d7,#e6dcc7); --bg-design: repeating-linear-gradient(45deg, rgba(120,90,50,.05) 0 2px, transparent 2px 4px), radial-gradient(120% 90% at 50% -10%, rgba(169,120,31,.12), transparent 60%); } html[data-theme="skeuo"] .card, html[data-theme="skeuo"] .visit-card, html[data-theme="skeuo"] .review{ background:linear-gradient(180deg,#f7efdd,#e9dfc9); border:1px solid rgba(90,60,40,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 12px 22px rgba(60,40,25,.3); } html[data-theme="skeuo"] .btn-maroon{ background:linear-gradient(180deg,#8a3f38,#652924); border:1px solid #3f1a16; color:#f7e7cf; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 #3a1713, 0 8px 16px rgba(0,0,0,.35); } html[data-theme="skeuo"] .btn-gold{ background:linear-gradient(180deg,#e8c06a,#b98a2c); border:1px solid #8a6516; color:#3a2708; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #7e5c18, 0 8px 16px rgba(0,0,0,.3); } html[data-theme="skeuo"] .size, html[data-theme="skeuo"] .jar-chip, html[data-theme="skeuo"] .ci-qty{ box-shadow:inset 0 2px 4px rgba(60,40,25,.22); } html[data-theme="skeuo"] .header{ box-shadow:0 2px 0 rgba(255,255,255,.5), 0 6px 16px rgba(60,40,25,.22); } /* ============================================================ MINIMALIST — flat, monochrome, hairlines, no shadows ============================================================ */ html[data-theme="minimal"]{ --paper:#ffffff; --cream:#ffffff; --cream-2:#ffffff; --ink:#111111; --ink-soft:#6b6b6b; --maroon:#111111; --maroon-2:#111111; --maroon-deep:#000000; --gold:#111111; --gold-2:#9a9a9a; --chili:#111111; --line:rgba(0,0,0,.12); --radius:2px; --shadow:none; --elev:none; --band:#141414; --on-dark:#f2f2f2; --header-bg:rgba(255,255,255,.9); --bg-design:none; } html[data-theme="minimal"] :where(.card,.visit-card,.review,.faq-item,.hero-frame, .story-media img,.visit-media img,.masonry img,.badge,.reel,.btn,.jar-canvas){ box-shadow:none !important; } html[data-theme="minimal"] .btn-gold{ background:#111; color:#fff; } html[data-theme="minimal"] .btn-gold:hover{ background:#333; } html[data-theme="minimal"] .eyebrow{ color:var(--ink-soft); } html[data-theme="minimal"] .step-no{ color:var(--on-dark); } html[data-theme="minimal"] .story-media-accent{ display:none; } /* ============================================================ ELEGANT — editorial ivory, near-black, refined gold hairlines ============================================================ */ html[data-theme="elegant"]{ --paper:#f4f1ea; --cream:#eeeae0; --cream-2:#faf8f2; --ink:#2a2822; --ink-soft:#6f6a5f; --maroon:#1b1b18; --maroon-2:#2a2a24; --maroon-deep:#131311; --gold:#a8894f; --gold-2:#c7ab72; --chili:#8a5a2a; --line:rgba(40,38,32,.16); --radius:4px; --shadow:0 24px 60px -34px rgba(20,18,14,.35); --elev:0 16px 40px -30px rgba(20,18,14,.26); --band:#1b1b18; --on-dark:#efe7d4; --header-bg:rgba(244,241,234,.86); --bg-design:radial-gradient(90% 60% at 50% -10%, rgba(168,137,79,.10), transparent 60%); } html[data-theme="elegant"] .card, html[data-theme="elegant"] .visit-card, html[data-theme="elegant"] .review{ box-shadow:none; border:1px solid var(--line); } html[data-theme="elegant"] h1, html[data-theme="elegant"] h2, html[data-theme="elegant"] h3{ font-weight:500; letter-spacing:.005em; } html[data-theme="elegant"] .eyebrow{ color:var(--gold); } html[data-theme="elegant"] .btn{ text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; } html[data-theme="elegant"] .btn-lg{ font-size:.84rem; } /* ============================================================ VIBRANT — saturated spice-market gradients, high energy ============================================================ */ html[data-theme="vibrant"]{ --paper:#fff7ee; --cream:#ffeede; --cream-2:#ffffff; --ink:#241a2e; --ink-soft:#5c4d66; --maroon:#e0195e; --maroon-2:#ff5a36; --maroon-deep:#b3124a; --gold:#f39a12; --gold-2:#ffc24d; --chili:#ff4d2e; --line:rgba(224,25,94,.18); --radius:20px; --shadow:0 22px 45px -20px rgba(224,25,94,.45); --elev:0 16px 36px -18px rgba(224,25,94,.32); --band:#6a2cf5; --on-dark:#ffffff; --header-bg:rgba(255,247,238,.82); --bg-design: radial-gradient(45% 45% at 10% 15%, rgba(243,154,18,.5), transparent 60%), radial-gradient(45% 45% at 90% 10%, rgba(224,25,94,.45), transparent 60%), radial-gradient(50% 50% at 80% 90%, rgba(106,44,245,.4), transparent 60%), radial-gradient(45% 45% at 20% 92%, rgba(20,200,180,.4), transparent 60%); } html[data-theme="vibrant"] .btn-maroon{ background:linear-gradient(135deg,#e0195e,#ff5a36); color:#fff; border:none; } html[data-theme="vibrant"] .btn-gold{ background:linear-gradient(135deg,#f39a12,#ff5a36); color:#3a1600; } html[data-theme="vibrant"] .strip{ background:linear-gradient(135deg,#6a2cf5,#8e2ce0); } html[data-theme="vibrant"] .strip-grid>div{ background:transparent; } html[data-theme="vibrant"] .process{ background:linear-gradient(135deg,#6a2cf5,#e0195e); } html[data-theme="vibrant"] .order{ background:radial-gradient(120% 130% at 50% 0%,#e0195e,#6a2cf5); } html[data-theme="vibrant"] .card{ border-top:3px solid var(--maroon); } /* per-theme page background design (applied over --paper) */ body{ background-image:var(--bg-design); background-attachment:fixed; } /* ============================================================ Theme switcher control (client preview tool) ============================================================ */ .theme-switch{position:fixed;right:18px;bottom:18px;z-index:150; font-family:var(--sans);display:flex;flex-direction:column;align-items:flex-end;gap:.6rem} .ts-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; background:var(--band);color:var(--on-dark);border:1px solid var(--gold); border-radius:100px;padding:.7rem 1.1rem;font-size:.82rem;font-weight:600;letter-spacing:.02em; box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .ts-toggle:hover{transform:translateY(-2px)} .ts-toggle svg{width:16px;height:16px} .ts-menu{display:none;flex-direction:column;gap:.35rem;padding:.6rem; background:var(--cream-2);border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow);min-width:210px;max-height:min(70vh,560px);overflow-y:auto} .theme-switch.open .ts-menu{display:flex} .ts-menu-title{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-soft);padding:.2rem .5rem .35rem} .ts-opt{display:flex;align-items:center;gap:.7rem;cursor:pointer;text-align:left; background:transparent;border:1px solid transparent;border-radius:10px;padding:.55rem .6rem; color:var(--ink);font-size:.9rem;font-weight:500;transition:.2s} .ts-opt:hover{background:var(--cream);border-color:var(--line)} .ts-opt.active{border-color:var(--gold);background:var(--cream)} .ts-opt.active .ts-check{opacity:1} .ts-check{margin-left:auto;color:var(--maroon);opacity:0;font-weight:700} .ts-dot{width:26px;height:26px;border-radius:50%;flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .ts-dot.heritage{background:conic-gradient(#571619 0 33%,#c19a4b 33% 66%,#f7efe1 66%)} .ts-dot.midnight{background:conic-gradient(#161012 0 33%,#c9a24a 33% 66%,#f2e9db 66%)} .ts-dot.orchard{background:conic-gradient(#265b43 0 33%,#b6862f 33% 66%,#f6f3ea 66%)} .ts-dot.glass{background:conic-gradient(#9fc0ff 0 33%,#ff9ec4 33% 66%,#ffffff 66%)} .ts-dot.skeuo{background:conic-gradient(#6b2f2a 0 33%,#a9781f 33% 66%,#efe7d6 66%)} .ts-dot.minimal{background:conic-gradient(#111 0 33%,#9a9a9a 33% 66%,#fff 66%)} .ts-dot.elegant{background:conic-gradient(#1b1b18 0 33%,#a8894f 33% 66%,#f4f1ea 66%)} .ts-dot.vibrant{background:conic-gradient(#e0195e 0 33%,#f39a12 33% 66%,#6a2cf5 66%)} .ts-opt b{display:block;font-weight:600;line-height:1.1} .ts-opt small{display:block;font-size:.72rem;color:var(--ink-soft)} @media (max-width:560px){ .theme-switch{right:12px;bottom:12px} .ts-toggle span{display:none} .ts-toggle{padding:.7rem} }