Claire's Faire

Curiosities • Moonlight • Magic

Hidden among lavender skies and moonlit gardens, Claire's Faire welcomes wandering souls to discover handmade treasures, mystical curiosities, antique wonders, and little pieces of enchantment.

The Story

Claire's Faire began as a dream— a place where old stories, candlelight, pressed flowers, velvet ribbons, and celestial magic could live together. Inspired by whimsical autumn evenings, Victorian libraries, and enchanted forests, every collection is chosen to feel like discovering a secret hidden shop.

Upcoming Faire

Autumn Moon Market

October • Twilight until Midnight

Join us for an evening of candles, music, handmade art, tea, crystals, and moonlit magic.

Visit the Faire

/* ========================================== CLAIRE'S FAIRE Whimsigoth Theme ========================================== */ :root{ --background:#130d1d; --background2:#1d1430; --card:#2a1f42cc; --purple:#8d6bff; --lavender:#c7b3ff; --gold:#efd78c; --text:#f2ecff; --muted:#d8cfff; } /* RESET */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background: radial-gradient(circle at top,#34225b 0%,transparent 35%), radial-gradient(circle at bottom,#241536 0%,transparent 40%), linear-gradient(180deg,#130d1d,#1d1430,#130d1d); color:var(--text); font-family:'Cormorant Garamond',serif; overflow-x:hidden; } /* ======================= STARS ======================= */ .stars{ position:fixed; width:100%; height:100%; top:0; left:0; pointer-events:none; background-image: radial-gradient(white 1px,transparent 1px), radial-gradient(#d9bfff 1px,transparent 1px), radial-gradient(#fff6d0 1px,transparent 1px); background-size: 120px 120px, 180px 180px, 250px 250px; animation:twinkle 8s infinite linear; opacity:.55; z-index:-5; } @keyframes twinkle{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } 100%{ transform:translateY(0); } } /* ======================= MOON ======================= */ .moon{ position:fixed; right:80px; top:70px; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fffef8, #f2dcb7 65%, #ceb37d); box-shadow: 0 0 60px #ffeeb6, 0 0 120px rgba(255,236,150,.35); opacity:.95; z-index:-4; animation:moonFloat 10s ease-in-out infinite; } @keyframes moonFloat{ 50%{ transform:translateY(-10px); } } /* ======================= NAVIGATION ======================= */ nav{ position:fixed; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 9%; background:rgba(18,11,28,.55); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); z-index:100; } .logo{ font-family:'Cinzel Decorative',serif; /* Replace with Whimsy Breakfast later */ font-size:34px; color:var(--gold); letter-spacing:2px; text-shadow: 0 0 8px rgba(255,227,133,.5); } nav ul{ display:flex; gap:35px; list-style:none; } nav a{ text-decoration:none; font-size:18px; color:var(--muted); transition:.35s; } nav a:hover{ color:var(--gold); text-shadow:0 0 10px var(--purple); } /* ======================= HERO ======================= */ .hero{ height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; padding:120px 30px; } .hero-text{ max-width:820px; background:rgba(40,27,62,.45); backdrop-filter:blur(15px); padding:70px; border-radius:35px; border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.45); } .hero h1{ font-family:'Cinzel Decorative',serif; /* Replace with Whimsy Breakfast */ font-size:5.5rem; color:var(--gold); margin-bottom:20px; text-shadow: 0 0 15px rgba(255,236,160,.45); } .hero h2{ font-size:1.5rem; font-weight:400; letter-spacing:5px; color:var(--lavender); margin-bottom:35px; text-transform:uppercase; } .hero p{ font-size:1.35rem; line-height:2; color:#ece3ff; margin-bottom:40px; } /* ======================= BUTTON ======================= */ button{ padding:16px 42px; border:none; border-radius:50px; cursor:pointer; font-size:18px; font-family:'Cormorant Garamond',serif; background: linear-gradient( 135deg, #5c3ba8, #8d6bff ); color:white; transition:.4s; box-shadow: 0 0 25px rgba(141,107,255,.45); } button:hover{ transform:translateY(-5px); box-shadow: 0 0 35px rgba(239,215,140,.6); background: linear-gradient( 135deg, #8d6bff, #b999ff ); } section{ padding:120px 10%; }