Moon Calendar

2026 Moon Collection — Lotus Sky Jewelry *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #07070f; --bg2: #0c0c1a; --bg3: #111126; --border: #1c1c36; --border2: #26264a; --gold: #c8a040; --gold-dim: #7a6028; --text: #ddd4be; --text-dim: #8a8090; --text-faint:#7a708a; --purple: #9070c0; --new-pill: #7060a0; --full-pill: #a06820; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; line-height: 1.5; min-height: 100vh; } /* ── STARS BACKGROUND ── */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 75% 45%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,0.2) 0%, transparent 100%), radial-gradient(1px 1px at 65% 60%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 42% 35%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 83% 12%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 7% 55%, rgba(255,255,255,0.2) 0%, transparent 100%); pointer-events: none; z-index: 0; } /* ── HEADER ── */ header { position: relative; text-align: center; padding: 56px 24px 44px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(80,50,140,0.18) 0%, transparent 70%); border-bottom: 1px solid var(--border); z-index: 1; } .header-ornament { font-size: 13px; letter-spacing: 12px; color: var(--gold-dim); margin-bottom: 16px; display: block; } .brand { font-family: 'Cinzel', serif; font-size: clamp(11px, 2.5vw, 13px); letter-spacing: 6px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 6vw, 42px); color: var(--gold); letter-spacing: 3px; line-height: 1.1; margin-bottom: 10px; } .sub { font-size: 12px; letter-spacing: 4px; color: var(--text-faint); text-transform: uppercase; } /* ── FILTER BAR ── */ .filters { display: flex; justify-content: center; gap: 0; padding: 0 24px; background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .filter-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 16px 28px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 3px; color: var(--text-faint); cursor: pointer; transition: color 0.2s, border-color 0.2s; text-transform: uppercase; } .filter-btn:hover { color: var(--text-dim); } .filter-btn.active { color: var(--gold); border-bottom-color: var(--gold); } /* ── GRID ── */ .grid { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; position: relative; z-index: 1; } /* ── MONTH GROUP ── */ .month-group { margin-bottom: 12px; } .month-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 5px; color: #8a7a9a; text-transform: uppercase; padding: 6px 2px 8px; } /* ── CARD ── */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.25s, background 0.25s; cursor: pointer; } .card:hover { border-color: var(--border2); } .card.open { background: var(--bg3); border-color: var(--border2); } /* ── CARD HEADER ── */ .card-header { display: flex; align-items: center; padding: 16px 18px; gap: 14px; user-select: none; } .moon-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 1px solid; } .moon-icon.new-moon { background: radial-gradient(circle, #16132e 0%, #0a0818 100%); border-color: #2a2050; } .moon-icon.full-moon { background: radial-gradient(circle, #281e10 0%, #160e06 100%); border-color: #3a2810; } .card-info { flex: 1; min-width: 0; } .card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; } .sign-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: 0.5px; } .type-pill { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; } .type-pill.new { color: #a090d0; background: rgba(100,80,160,0.15); border: 1px solid rgba(100,80,160,0.25); } .type-pill.full { color: #c09040; background: rgba(160,120,40,0.15); border: 1px solid rgba(160,120,40,0.25); } .special-pill { font-size: 8px; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; color: #c0a0e0; background: rgba(80,40,120,0.2); border: 1px solid rgba(80,40,120,0.35); } .card-date { font-size: 12px; color: #8a7a9a; letter-spacing: 1px; } .dots { display: flex; gap: 5px; flex-shrink: 0; } .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); } .chevron { font-size: 10px; color: var(--text-faint); flex-shrink: 0; transition: transform 0.3s; } .card.open .chevron { transform: rotate(180deg); } /* ── CARD BODY ── */ .card-body { display: none; padding: 0 18px 20px; border-top: 1px solid var(--border); } .card.open .card-body { display: block; } .section-label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #7a708a; margin-top: 18px; margin-bottom: 12px; } .palette-name { font-style: italic; font-size: 22px; font-weight: 300; color: var(--gold); letter-spacing: 1px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } /* ── SWATCHES ── */ .swatches { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .swatch-wrap { text-align: center; } .swatch { width: 54px; height: 54px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12); } .swatch-name { font-size: 9px; color: var(--text-faint); line-height: 1.3; width: 54px; } /* ── KEYWORDS ── */ .keywords { display: flex; flex-wrap: wrap; gap: 7px; } .kw { font-size: 12px; color: var(--purple); background: rgba(80,60,120,0.12); border: 1px solid rgba(80,60,120,0.25); padding: 5px 12px; border-radius: 20px; letter-spacing: 0.3px; } /* ── FOOTER ── */ footer { text-align: center; padding: 20px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 4px; color: var(--text-faint); border-top: 1px solid var(--border); position: relative; z-index: 1; } /* ── RESPONSIVE ── */ @media (max-width: 500px) { .filter-btn { padding: 14px 16px; font-size: 10px; letter-spacing: 2px; } .swatch { width: 46px; height: 46px; } .swatch-name { width: 46px; } .dots { display: none; } } ✦ ☽ ✦ Lotus Sky Jewelry 2026 Moon Collection June – December · 14 Drops All 🌑 New Moons 🌕 Full Moons ✦ Lotus Sky Jewelry · 2026 ✦ const moons = [ { month: "June", date: "June 14", type: "new", sign: "Gemini", symbol: "♊", paletteName: "Bright Mind", keywords: ["fresh ideas","communication","curiosity","social energy","lightness","experimenting"], colors: ["#F5C842","#87CEEB","#D8B4E2","#F0EDE8","#C0C0C0"], colorNames: ["Buttercup","Sky Blue","Pale Lavender","Pearl","Silver"], note: null }, { month: "June", date: "June 29", type: "full", sign: "Capricorn", symbol: "♑", paletteName: "Summit", keywords: ["achievement","legacy","ambition fulfilled","structure","discipline"], colors: ["#2D5016","#4A4A4A","#D4A017","#F5F0E8","#1A3A20"], colorNames: ["Dark Green","Charcoal","Gold","Cream","Deep Forest"], note: null }, { month: "July", date: "July 14", type: "new", sign: "Cancer", symbol: "♋", paletteName: "Moonpool", keywords: ["home","nurturing","emotions","intuition","comfort","protection"], colors: ["#F0EDE8","#A8C5D8","#B8D8C8","#F2C5C5","#C8C8D8"], colorNames: ["Pearl White","Soft Blue","Seafoam","Blush","Silver"], note: null }, { month: "July", date: "July 29", type: "full", sign: "Aquarius", symbol: "♒", paletteName: "Collective Light", keywords: ["community","innovation","liberation","breakthroughs","future"], colors: ["#1B6CA8","#A0A8B8","#7B2FBE","#E0E8F0","#2DC9B8"], colorNames: ["Electric Blue","Silver","Violet","Ice White","Teal"], note: null }, { month: "August", date: "August 12", type: "new", sign: "Leo", symbol: "♌", paletteName: "Golden Hour", keywords: ["creativity","self-expression","confidence","joy","authenticity","spotlight"], colors: ["#D4A017","#E8672A","#C87941","#F5F0D8","#D45080"], colorNames: ["Gold","Sunburst","Amber","Warm Cream","Bright Pink"], note: "☀️ Solar Eclipse" }, { month: "August", date: "August 28", type: "full", sign: "Pisces", symbol: "♓", paletteName: "Deep Dream", keywords: ["emotional release","spiritual surrender","healing","dreams","dissolution"], colors: ["#1A2A4A","#C3A8D1","#8EC9B8","#6A3D8A","#D0CCDC"], colorNames: ["Deep Ocean","Lavender","Seafoam","Deep Purple","Iridescent"], note: "🌕 Lunar Eclipse" }, { month: "September", date: "September 10", type: "new", sign: "Virgo", symbol: "♍", paletteName: "Clear Light", keywords: ["refinement","health","clarity","detail","practicality","healing"], colors: ["#7A9E7E","#F5F0E0","#1B3A6B","#8B6355","#C8B870"], colorNames: ["Sage","Cream","Navy","Warm Brown","Soft Gold"], note: null }, { month: "September", date: "September 26", type: "full", sign: "Aries", symbol: "♈", paletteName: "Brave Fire", keywords: ["courage","passion","action","breakthrough","boldness"], colors: ["#CC3333","#E8672A","#D4A017","#F5F0F0","#E8A090"], colorNames: ["Fiery Red","Orange","Bright Gold","White","Coral"], note: null }, { month: "October", date: "October 10", type: "new", sign: "Libra", symbol: "♎", paletteName: "Perfect Balance", keywords: ["balance","beauty","harmony","relationships","justice","grace"], colors: ["#D4A5B0","#C3A8D1","#F5F0E0","#C8B870","#F2C5C5"], colorNames: ["Dusty Rose","Soft Lavender","Warm Ivory","Pale Gold","Blush"], note: null }, { month: "October", date: "October 26", type: "full", sign: "Taurus", symbol: "♉", paletteName: "Harvest Gold", keywords: ["abundance","sensuality","gratitude","earthly pleasures","completion"], colors: ["#2D5016","#D4A017","#D4A5B0","#8B5E3C","#F5F0E0"], colorNames: ["Forest","Warm Gold","Dusty Rose","Rich Brown","Cream"], note: null }, { month: "November", date: "November 9", type: "new", sign: "Scorpio", symbol: "♏", paletteName: "Deep Water", keywords: ["transformation","depth","mystery","power","rebirth","truth"], colors: ["#6B1A1A","#1A1A1A","#4A1A5C","#8B1A1A","#A0A8B0"], colorNames: ["Burgundy","Obsidian","Dark Plum","Crimson","Silver"], note: null }, { month: "November", date: "November 24", type: "full", sign: "Gemini", symbol: "♊", paletteName: "Bright Truth", keywords: ["communication","duality","completion","messages revealed","clarity"], colors: ["#F5C842","#87CEEB","#C0C0C0","#D8B4E2","#F0EDE8"], colorNames: ["Buttercup","Sky Blue","Silver","Lavender","Pearl"], note: null }, { month: "December", date: "December 9", type: "new", sign: "Sagittarius", symbol: "♐", paletteName: "Open Horizon", keywords: ["adventure","freedom","truth-seeking","optimism","expansion","fire"], colors: ["#6B3FA0","#2D4A8A","#2DC9B8","#1B6CA8","#D4A017"], colorNames: ["Purple","Indigo","Turquoise","Royal Blue","Bright Gold"], note: null }, { month: "December", date: "December 23", type: "full", sign: "Cancer", symbol: "♋", paletteName: "Winter Tide", keywords: ["family","home","year-end release","emotional completion","nurturing"], colors: ["#1B3A6B","#A8B8C8","#E8E5E0","#8EC9B8","#C8B870"], colorNames: ["Deep Navy","Silver","Pearl","Seafoam","Soft Gold"], note: null } ]; let currentFilter = 'all'; function render() { const grid = document.getElementById('grid'); const filtered = moons.filter(m => currentFilter === 'all' ? true : currentFilter === 'new' ? m.type === 'new' : m.type === 'full' ); // Group by month const groups = {}; filtered.forEach(m => { if (!groups[m.month]) groups[m.month] = []; groups[m.month].push(m); }); grid.innerHTML = ''; Object.entries(groups).forEach(([month, items]) => { const group = document.createElement('div'); group.className = 'month-group'; const label = document.createElement('div'); label.className = 'month-label'; label.textContent = month; group.appendChild(label); items.forEach(moon => { const card = document.createElement('div'); card.className = 'card'; const dotsHtml = moon.colors.map(c => `` ).join(''); const swatchesHtml = moon.colors.map((c, i) => ` ${moon.colorNames[i]} ` ).join(''); const kwHtml = moon.keywords.map(k => `${k}`).join(''); const specialPill = moon.note ? `${moon.note}` : ''; card.innerHTML = ` ${moon.symbol} ${moon.sign} ${moon.type === 'new' ? 'New Moon' : 'Full Moon'} ${specialPill} ${moon.date}, 2026 ${dotsHtml} ▼ Collection Name "${moon.paletteName}" Palette ${swatchesHtml} Themes ${kwHtml} `; card.querySelector('.card-header').addEventListener('click', () => { card.classList.toggle('open'); }); group.appendChild(card); }); grid.appendChild(group); }); } // Filters document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentFilter = btn.dataset.filter; render(); }); }); render();

Vibe

Collections

Color

Featured

Item added to your cart

Moon Calendar

2026 Moon Collection

My LS Originals

Your cart is empty