/* =========================================================
COSTUMES THEME (Option A): "Midnight + Spotlight"
---------------------------------------------------------
Paste AFTER your CSS skeleton.
Includes: fonts, colors, buttons, nav, hero, cards, footer.
========================================================= */
/* Google Fonts (recommended). If you prefer in , remove @import. */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700;800&display=swap");
/* ------------------------------
Theme Tokens
------------------------------ */
:root{
--font-head: "DM Serif Display", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--bg: #fbfbfd;
--surface: #ffffff;
--surface-2: #f3f4f8;
--text: #101223;
--muted: #545a6a;
--border: #e6e7ef;
/* Brand */
--brand: #5b2cff; /* theatrical purple */
--brand-2: #14162a; /* midnight */
--brand-3: #232544; /* slate navy */
--accent: #ffb020; /* spotlight amber */
--accent-2: #ff6a3d; /* warm highlight (optional) */
/* States */
--success: #17b26a;
--danger: #ef4444;
/* Shadows */
--shadow: 0 18px 45px rgba(16,18,35,.12);
--shadow-sm: 0 10px 22px rgba(16,18,35,.10);
/* Buttons */
--btn-bg: var(--brand);
--btn-text: #ffffff;
--btn-bg-hover: #4a22e6;
--btn-secondary-bg: #ffffff;
--btn-secondary-text: var(--brand);
--btn-secondary-border: rgba(91,44,255,.25);
/* Focus ring */
--focus: rgba(91,44,255,.28);
}
/* ------------------------------
Base polish
------------------------------ */
body{
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
}
h1,h2,h3,.section-head__title,.hero__title{
font-family: var(--font-head);
letter-spacing: .2px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none; /* cleaner, more premium */
}
:focus-visible{
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 10px;
}
/* ------------------------------
Topbar adjustments
------------------------------ */
.topbar{
background: linear-gradient(180deg, #ffffff 0%, var(--surface-2) 100%);
}
/* ------------------------------
Header + Search polish
------------------------------ */
.header{
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
}
.header__search{
border-color: rgba(16,18,35,.10);
box-shadow: 0 6px 16px rgba(16,18,35,.06);
}
.header__search input::placeholder{
color: rgba(84,90,106,.85);
}
.header__search:focus-within{
border-color: rgba(91,44,255,.35);
box-shadow: 0 8px 22px rgba(91,44,255,.10);
}
/* ------------------------------
Primary Navigation (Midnight bar)
------------------------------ */
.nav{
background: var(--brand-2);
border-top: 1px solid rgba(255,255,255,.06);
}
.nav__link{
color: rgba(255,255,255,.92);
}
.nav__link:hover{
color: #fff;
}
.nav__item--highlight .nav__link{
background: var(--accent);
border-color: rgba(0,0,0,0);
color: #171717;
box-shadow: 0 10px 22px rgba(255,176,32,.18);
}
.nav__item--highlight .nav__link:hover{
filter: brightness(.98);
}
.nav__dropdown{
border-color: rgba(16,18,35,.12);
}
.nav__sublist a{
color: rgba(84,90,106,.95);
}
.nav__sublist a:hover{
color: var(--brand);
}
/* ------------------------------
Announcement strip
------------------------------ */
.announce{
background: linear-gradient(90deg, rgba(91,44,255,.10) 0%, rgba(255,176,32,.10) 100%);
border-bottom-color: rgba(91,44,255,.18);
}
.announce__cta{
color: var(--brand);
}
/* ------------------------------
Buttons (themed)
------------------------------ */
.btn{
border-radius: 999px;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
transform: translateY(-1px);
}
.btn--primary{
background: var(--btn-bg);
color: var(--btn-text);
border-color: rgba(0,0,0,0);
box-shadow: 0 12px 26px rgba(91,44,255,.22);
}
.btn--primary:hover{
background: var(--btn-bg-hover);
box-shadow: 0 16px 34px rgba(91,44,255,.26);
}
.btn--secondary{
background: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border-color: var(--btn-secondary-border);
}
.btn--secondary:hover{
border-color: rgba(91,44,255,.35);
box-shadow: 0 12px 22px rgba(16,18,35,.08);
}
.btn--ghost{
border-color: rgba(16,18,35,.12);
}
/* ------------------------------
Hero (costume premium look)
------------------------------ */
.hero__slider{
border-color: rgba(16,18,35,.12);
box-shadow: var(--shadow);
background: radial-gradient(1200px 600px at 20% 20%, rgba(91,44,255,.10) 0%, rgba(255,255,255,0) 60%),
radial-gradient(900px 520px at 85% 70%, rgba(255,176,32,.10) 0%, rgba(255,255,255,0) 60%),
var(--surface);
}
.hero__content{
background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.96) 100%);
}
.hero__badges li{
background: rgba(16,18,35,.04);
border: 1px solid rgba(16,18,35,.08);
padding: 6px 10px;
border-radius: 999px;
}
/* Hero arrows */
.hero__prev,
.hero__next{
border-color: rgba(16,18,35,.12);
background: rgba(255,255,255,.92);
}
.hero__prev:hover,
.hero__next:hover{
box-shadow: var(--shadow-sm);
}
.hero__dot.is-active{
background: var(--accent);
border-color: rgba(0,0,0,0);
}
/* ------------------------------
Tiles / Cards polish
------------------------------ */
.tile,
.range,
.theme,
.product-card,
.review,
.trust__item,
.content-block__item{
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover,
.range:hover,
.theme:hover,
.product-card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-color: rgba(91,44,255,.18);
}
/* Make tile image overlays feel “costume” */
.tile__content{
background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,1) 100%);
}
/* ------------------------------
Product cards: price & badges
------------------------------ */
.badge--sale{
background: rgba(255,176,32,.95);
border-color: rgba(0,0,0,0);
color: #171717;
font-weight: 800;
}
.price--now{
color: var(--brand);
}
.price--was{
opacity: .75;
}
/* ------------------------------
Content block (SEO section)
------------------------------ */
.content-block{
background: linear-gradient(180deg, rgba(91,44,255,.06) 0%, rgba(255,176,32,.06) 100%);
border-top-color: rgba(91,44,255,.14);
border-bottom-color: rgba(91,44,255,.14);
}
/* ------------------------------
FAQ refinements
------------------------------ */
.faq__item{
border-color: rgba(16,18,35,.10);
}
.faq__item[open]{
border-color: rgba(91,44,255,.25);
box-shadow: 0 12px 22px rgba(91,44,255,.10);
}
.faq__q{
position: relative;
}
.faq__q::after{
content: "＋";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: rgba(84,90,106,.9);
}
.faq__item[open] .faq__q::after{
content: "–";
color: var(--brand);
}
/* ------------------------------
Newsletter (spotlight feel)
------------------------------ */
.newsletter__inner{
border-color: rgba(91,44,255,.18);
box-shadow: var(--shadow-sm);
background:
radial-gradient(900px 500px at 10% 30%, rgba(91,44,255,.10) 0%, rgba(255,255,255,0) 55%),
radial-gradient(800px 480px at 90% 70%, rgba(255,176,32,.10) 0%, rgba(255,255,255,0) 55%),
var(--surface);
}
.newsletter__form input:focus{
border-color: rgba(91,44,255,.35);
box-shadow: 0 10px 20px rgba(91,44,255,.12);
}
/* ------------------------------
Footer (midnight)
------------------------------ */
.footer{
background: linear-gradient(180deg, var(--brand-2) 0%, #0b0c16 100%);
}
.footer__bottom{
border-top-color: rgba(255,255,255,.10);
}
.footer__payments img{
border: 1px solid rgba(255,255,255,.10);
}
/* ------------------------------
Utility: Seasonal accent (optional)
Use on any section when needed:
------------------------------ */
.is-season-halloween .section-head__title{
text-shadow: 0 8px 22px rgba(255,176,32,.18);
}
.is-season-halloween .btn--primary{
background: linear-gradient(90deg, var(--brand) 0%, #7c3aed 55%, var(--accent) 120%);
}
/* ------------------------------
Mobile polish: tighten paddings
------------------------------ */
@media (max-width: 767px){
.hero__content{ padding: 22px; }
.section-head__title{ font-size: 1.45rem; }
}