/* ============================================================================= NEJMA — STYLESHEET Premium streetwear. Mobile-first. Clean, fast, editorial. Google Fonts: Cormorant Garamond (display) + Jost (body) ============================================================================= */ /* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap'); /* ============================================================================= CSS VARIABLES — DARK THEME (default, Black color selected) html.theme-light, body.theme-light overrides all of these for the White color / light theme. ============================================================================= */ :root { /* Color palette — dark theme */ --bg: #080808; --bg-elevated: #111111; --bg-subtle: #161616; --border: rgba(245, 240, 232, 0.08); --border-light: rgba(245, 240, 232, 0.15); --text: #f5f0e8; --text-muted: rgba(245, 240, 232, 0.45); --text-dim: rgba(245, 240, 232, 0.25); --accent: #c9a96e; --accent-light: rgba(201, 169, 110, 0.12); /* Typography */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --transition: 0.3s var(--ease); /* Layout */ --max-width: 1200px; --nav-height: 64px; /* Theme transition speed */ --theme-speed: 0.45s; } /* ============================================================================= FULL-SITE LIGHT THEME Applied to and when White color is selected. theme.js targets first (safe from scripts), then . Overrides all CSS variables — every element using var() adapts automatically. WHERE TO FIND: css/styles.css → html.theme-light, body.theme-light / html.theme-light block ============================================================================= */ /* html.theme-light: applied immediately by theme.js from before body exists. Prevents any flash of dark background before is parsed. */ html.theme-light { /* Applied immediately when theme.js runs from — before exists. Fix 6: Updated from warm cream (#f5f0e8) to clean neutral white (#f8f8f8). All warm/beige undertones removed. Slightly cool neutral white. */ background-color: #f8f8f8; --bg: #f8f8f8; --bg-elevated: #f0f0f0; --bg-subtle: #e8e8e8; --border: rgba(0, 0, 0, 0.09); --border-light: rgba(0, 0, 0, 0.15); --text: #0f0f0f; --text-muted: rgba(15, 15, 15, 0.50); --text-dim: rgba(15, 15, 15, 0.28); } /* html.theme-light, body.theme-light: applied by theme.js on DOMContentLoaded (body now exists) and by applyTheme() in script.js. This overrides all CSS variables. */ html.theme-light, body.theme-light { --bg: #f8f8f8; --bg-elevated: #f0f0f0; --bg-subtle: #e8e8e8; --border: rgba(0, 0, 0, 0.09); --border-light: rgba(0, 0, 0, 0.15); --text: #0f0f0f; --text-muted: rgba(15, 15, 15, 0.50); --text-dim: rgba(15, 15, 15, 0.28); /* --accent stays the same warm gold — works on both themes */ } /* ── RESET ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--theme-speed) var(--ease), color var(--theme-speed) var(--ease); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul { list-style: none; } /* ── UTILITIES ────────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .section-tag { display: inline-block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm); } /* ── PAGE LOAD ANIMATION ──────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .anim-fadeup { opacity: 0; animation: fadeUp 0.8s var(--ease) forwards; } .anim-fadein { opacity: 0; animation: fadeIn 0.6s var(--ease) forwards; } /* ── NAVIGATION ───────────────────────────────────────────────────────────── */ #nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 100; transition: background var(--transition), border-color var(--transition); border-bottom: 1px solid transparent; } #nav.scrolled { background: rgba(8, 8, 8, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--border); } html.theme-light #nav.scrolled, body.theme-light #nav.scrolled { background: rgba(248, 248, 248, 0.93); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Logo — text fallback */ .nav-logo { font-family: var(--font-display); font-size: 2.4rem; /* Fix 3: 50% larger than original 1.6rem */ font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); transition: color var(--transition); display: flex; align-items: center; } .nav-logo:hover { color: var(--accent); } /* Image logo — hidden by default, shown when file exists */ /* WHERE TO REPLACE LOGOS: assets/images/ui/logo-light.png (shown on dark theme) assets/images/ui/logo-dark.png (shown on light theme) Config paths: config.js → brand.logoLight / brand.logoDark */ .nav-logo-img { height: 48px; /* Fix 3: 50% larger than original 32px */ width: auto; display: none; /* JS shows this and hides text span when image loads */ } .nav-logo-text { /* text fallback, hidden when image logo is active */ } .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-links a { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); } .nav-links a:hover { color: var(--text); } .nav-cta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bg) !important; background: var(--text); padding: 0.55rem 1.2rem; border-radius: 2px; transition: background var(--transition), color var(--transition) !important; } .nav-cta:hover { background: var(--accent) !important; color: var(--bg) !important; } /* Mobile nav */ /* WHERE: nav-mobile-toggle and nav-right live here */ .nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; background: none; border: none; cursor: pointer; } .nav-mobile-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: all var(--transition); } /* RIGHT-SIDE NAV GROUP — cart icon + hamburger toggle. Always visible on both desktop and mobile. WHERE: cart placement fix — this stays outside .nav-links so it's never hidden by the mobile media query that hides .nav-links. */ .nav-right { display: flex; align-items: center; gap: var(--space-sm); } /* Cart button in nav */ .nav-cart-btn { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); text-decoration: none; position: relative; } .nav-cart-btn:hover { color: var(--text); } /* "Cart" label — hide on very small screens to save space */ .nav-cart-label { display: inline; } @media (max-width: 380px) { .nav-cart-label { display: none; } } /* Reuse existing .cart-count badge style — defined later in this file */ @media (max-width: 768px) { .nav-links { display: none; } /* nav-mobile-toggle is now inside .nav-right — it shows because nav-right is always visible */ .nav-mobile-toggle { display: flex; } #nav.menu-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(8, 8, 8, 0.97); backdrop-filter: blur(20px); padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--border); animation: fadeIn 0.2s var(--ease); } html.theme-light #nav.menu-open .nav-links, body.theme-light #nav.menu-open .nav-links { background: rgba(245, 240, 232, 0.98); } #nav.menu-open .nav-links a { font-size: 0.85rem; } } /* ── HERO ─────────────────────────────────────────────────────────────────── */ /* background: var(--bg) adapts automatically with theme switching */ #hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* centered by default — content sits in middle */ text-align: center; padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl); position: relative; overflow: hidden; background: var(--bg); transition: background-color var(--theme-speed) var(--ease); } /* Mobile: tighter padding so buttons are fully visible without scrolling */ @media (max-width: 767px) { #hero { justify-content: center; padding-top: calc(var(--nav-height) + 2.5rem); padding-bottom: 3rem; min-height: 100svh; } } /* Gold glow + bottom vignette — transparent so stars show through */ .hero-bg { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 50% at 50% 25%, rgba(201,169,110,0.06) 0%, transparent 65%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(8,8,8,0.9) 0%, transparent 100%); transition: background var(--theme-speed) var(--ease); } /* Light theme: vignette uses light color */ html.theme-light .hero-bg, body.theme-light .hero-bg { background: radial-gradient(ellipse 70% 50% at 50% 25%, rgba(201,169,110,0.07) 0%, transparent 65%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(248,248,248,0.85) 0%, transparent 100%); } .hero-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; } .hero-content { position: relative; z-index: 4; max-width: 700px; } .hero-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm); animation: fadeIn 0.6s var(--ease) 0.1s both; } .hero-title { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.01em; color: var(--text); margin-bottom: var(--space-md); animation: fadeUp 0.9s var(--ease) 0.2s both; } .hero-title em { font-style: italic; color: var(--accent); } .hero-sub { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-lg); animation: fadeUp 0.9s var(--ease) 0.35s both; } .hero-price-badge { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 100px; padding: 0.5rem 1.25rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); animation: fadeUp 0.9s var(--ease) 0.45s both; } .hero-price-badge strong { color: var(--text); font-weight: 600; font-size: 0.9rem; } .hero-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; animation: fadeUp 0.9s var(--ease) 0.55s both; } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--text); color: var(--bg); font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 2px; transition: background var(--transition), color var(--transition), transform 0.2s; border: 1px solid var(--text); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 2px; border: 1px solid var(--border-light); transition: border-color var(--transition), color var(--transition), transform 0.2s; } .btn-secondary:hover { border-color: var(--text-muted); transform: translateY(-1px); } /* ── PRODUCT SECTION ──────────────────────────────────────────────────────── */ #product { padding: var(--space-2xl) 0; scroll-margin-top: var(--nav-height); background: var(--bg); transition: background-color var(--theme-speed) var(--ease); } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; gap: var(--space-lg); } } /* ============================================================================= GALLERY — DESKTOP & MOBILE WHERE TO FIND gallery code: css/styles.css (this section) + js/script.js → initGallery() GALLERY BREAKPOINT: 768px — below = mobile dots, above = desktop thumb column ============================================================================= */ /* ── Desktop gallery: left thumb rail + right main image ── */ /* WHERE: desktop layout lives here and in JS renderThumbColumn() */ .gallery { /* 2-column: [68px thumb rail] [main image] */ display: grid; grid-template-columns: 68px 1fr; grid-template-rows: 1fr auto; column-gap: 0.5rem; row-gap: 0; position: sticky; top: calc(var(--nav-height) + 20px); max-width: 520px; /* ← increased from 460px for larger desktop image */ } /* LEFT: vertical thumbnail column (desktop only) */ /* WHERE: left thumb rail — hidden on mobile via media query below */ .gallery-thumbs-col { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0.4rem; overflow: hidden; /* JS manages which thumbs are visible */ align-self: start; /* min-height ensures the column has intrinsic height on first paint. Without this, the 1fr grid row may compute to 0px before gallery-main's aspect-ratio is resolved, making rendered thumbnails invisible. */ min-height: 340px; } /* Individual thumb in vertical column */ .thumb-col-item { width: 68px; aspect-ratio: 3/4; border-radius: 2px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); opacity: 0.45; transition: opacity var(--transition), border-color var(--transition); flex-shrink: 0; background: var(--bg-elevated); } .thumb-col-item.active, .thumb-col-item:hover { opacity: 1; border-color: var(--text-muted); } .thumb-col-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-col-item .thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: var(--text-dim); font-family: var(--font-body); background: linear-gradient(135deg, var(--bg-elevated), var(--bg-subtle)); } /* RIGHT: main image area */ /* WHERE: main image size → max-height here. Hover zoom → .gallery-main:hover img */ .gallery-main { grid-column: 2; grid-row: 1; position: relative; width: 100%; aspect-ratio: 3/4; max-height: 560px; /* ← Fix 2: increased from 490px — slightly larger desktop image */ background: var(--bg-elevated); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); transition: background var(--theme-speed) var(--ease), border-color var(--theme-speed) var(--ease); cursor: zoom-in; /* ← Fix 3: signals image is clickable to enlarge */ } .gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); display: block; } .gallery-main img.fading { opacity: 0; transform: scale(1.02); } /* Fix 4: Subtle hover zoom on desktop only */ /* WHERE: hover zoom lives here — desktop only via hover media query */ @media (hover: hover) and (min-width: 768px) { .gallery-main:hover img { transform: scale(1.04); /* gentle — not aggressive */ } /* Don't zoom while fading */ .gallery-main img.fading { transform: scale(1.02); } } /* Placeholder when no real images exist */ .gallery-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%); } .gallery-placeholder svg { opacity: 0.2; } /* BOTTOM-RIGHT ARROWS on main image (desktop only) */ /* WHERE: bottom-right arrow controls — hidden on mobile via media query */ .gallery-arrows-br { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; } .gallery-arrow-br { width: 30px; height: 30px; border-radius: 2px; background: rgba(8, 8, 8, 0.62); border: 1px solid rgba(245, 240, 232, 0.14); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background var(--transition), opacity var(--transition); font-family: inherit; } .gallery-arrow-br:not(:disabled):hover { background: rgba(8, 8, 8, 0.88); } .gallery-arrow-br:disabled { opacity: 0.25; cursor: default; pointer-events: none; } /* Light theme arrows */ html.theme-light .gallery-arrow-br, body.theme-light .gallery-arrow-br { background: rgba(248, 248, 248, 0.75); border-color: rgba(0, 0, 0, 0.14); color: #0f0f0f; } html.theme-light .gallery-arrow-br:not(:disabled):hover, body.theme-light .gallery-arrow-br:not(:disabled):hover { background: rgba(248, 248, 248, 0.95); } /* MOBILE: pagination dots row */ /* WHERE: dots sit in grid row 2, span both columns */ .gallery-dots-row { grid-column: 1 / -1; grid-row: 2; display: none; /* hidden on desktop */ justify-content: center; align-items: center; gap: 7px; padding-top: 0.75rem; } .gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); border: none; cursor: pointer; padding: 0; transition: background var(--transition), transform var(--transition); } .gallery-dot.active { background: var(--text); transform: scale(1.35); } /* ── MOBILE GALLERY — dots, no thumb column ── */ /* WHERE: 768px breakpoint controls the desktop/mobile gallery switch */ @media (max-width: 767px) { .gallery { grid-template-columns: 1fr; /* single column on mobile */ position: static; top: auto; max-width: 100%; } .gallery-thumbs-col { display: none; } /* hide vertical thumb rail */ .gallery-main { grid-column: 1; grid-row: 1; max-height: none; } .gallery-arrows-br { display: none; } /* no bottom-right arrows on mobile */ .gallery-dots-row { display: flex; } /* show dots on mobile */ } /* Panel */ .product-panel { padding-top: 0.5rem; } .product-name { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; line-height: 1.05; letter-spacing: 0.02em; margin-bottom: 0.35rem; } .product-subtitle { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); } .product-price { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-lg); transition: color var(--transition); } .product-price span { font-size: 1rem; font-weight: 300; color: var(--text-muted); } .divider { height: 1px; background: var(--border); margin: var(--space-md) 0; } /* Selectors */ .selector-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; } .selector-label .selected-value { color: var(--text); font-weight: 400; letter-spacing: 0.05em; text-transform: none; } /* Color selector */ .color-options { display: flex; gap: 0.75rem; margin-bottom: var(--space-md); } .color-option { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--transition), transform 0.2s; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .color-option:hover { transform: scale(1.08); } .color-option.active { outline-color: var(--accent); } /* Size selector */ .size-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-md); } .size-option { min-width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: 2px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; transition: all var(--transition); background: transparent; } .size-option:hover { border-color: var(--text-muted); color: var(--text); } .size-option.active { border-color: var(--text); color: var(--text); background: rgba(128,128,128,0.06); } .size-option.sold-out { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } .size-guide-note { font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.05em; margin-bottom: var(--space-md); } /* Quantity */ .qty-control { display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: 2px; width: fit-content; margin-bottom: var(--space-md); overflow: hidden; } .qty-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-muted); transition: color var(--transition), background var(--transition); flex-shrink: 0; } .qty-btn:hover { color: var(--text); background: rgba(128,128,128,0.06); } .qty-display { min-width: 52px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 500; color: var(--text); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* Buy Now button */ .btn-buy { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: var(--text); color: var(--bg); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.15rem 2rem; border-radius: 2px; border: 1px solid var(--text); transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.2s; margin-bottom: var(--space-sm); position: relative; overflow: hidden; } .btn-buy::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform 0.4s var(--ease); } .btn-buy:hover { color: var(--bg); border-color: var(--accent); } .btn-buy:hover::after { transform: translateX(0); } .btn-buy span { position: relative; z-index: 1; } .btn-buy:active { transform: scale(0.99); } .btn-buy.loading { pointer-events: none; opacity: 0.7; } /* Trust badges */ .trust-badges { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); } .trust-badge { display: flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .trust-badge svg { flex-shrink: 0; } /* Validation message */ .validation-msg { font-size: 0.7rem; color: #e07070; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: none; } .validation-msg.visible { display: block; } /* ── MOBILE STICKY BUY BAR ────────────────────────────────────────────────── */ #sticky-buy { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(8,8,8,0.95); backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 0.75rem var(--space-md); transform: translateY(100%); transition: transform 0.35s var(--ease); } html.theme-light #sticky-buy, body.theme-light #sticky-buy { background: rgba(245, 240, 232, 0.96); } #sticky-buy.visible { transform: translateY(0); } .sticky-buy-inner { display: flex; align-items: center; gap: var(--space-sm); } .sticky-buy-info { flex: 1; } .sticky-product-name { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; } .sticky-product-meta { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.05em; margin-top: 2px; } .sticky-buy-btn { flex-shrink: 0; background: var(--text); color: var(--bg); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.85rem 1.5rem; border-radius: 2px; border: none; transition: background var(--transition); } .sticky-buy-btn:hover { background: var(--accent); } @media (max-width: 768px) { #sticky-buy { display: block; } } /* ── SHIPPING SECTION ─────────────────────────────────────────────────────── */ #shipping { padding: var(--space-2xl) 0; border-top: 1px solid var(--border); scroll-margin-top: var(--nav-height); } .shipping-cards-simple { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 600px) { .shipping-cards-simple { grid-template-columns: 1fr; } } .shipping-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: var(--space-md); transition: background var(--theme-speed) var(--ease), border-color var(--theme-speed) var(--ease); } .shipping-card-icon { width: 36px; height: 36px; background: var(--accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--accent); } .shipping-card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--text); } .shipping-card-body { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); } .detail-section-title { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; line-height: 1.1; margin-bottom: var(--space-md); } /* ── BRAND STORY SECTION ──────────────────────────────────────────────────── */ #story { padding: var(--space-2xl) 0; border-top: 1px solid var(--border); text-align: center; scroll-margin-top: var(--nav-height); } .story-inner { max-width: 640px; margin: 0 auto; } .story-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; line-height: 1.05; margin-bottom: var(--space-md); } .story-title em { font-style: italic; color: var(--accent); } .story-body { font-size: 0.9rem; line-height: 1.85; color: var(--text-muted); } /* ── FOOTER ───────────────────────────────────────────────────────────────── */ #footer { border-top: 1px solid var(--border); padding: var(--space-xl) 0 var(--space-lg); } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; } .footer-brand { max-width: 280px; } .footer-logo { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; /* Fix 3: 50% larger than original 1.75rem */ letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; } .footer-tagline { font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; } .footer-links-group { display: flex; flex-direction: column; gap: var(--space-md); } .footer-links-col h4 { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.75rem; } .footer-links-col a, .footer-links-col span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; transition: color var(--transition); } .footer-links-col a:hover { color: var(--text); } .footer-social { display: flex; gap: var(--space-sm); } .footer-social a { width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: 2px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.7rem; transition: color var(--transition), border-color var(--transition); } .footer-social a:hover { color: var(--text); border-color: var(--text-muted); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border); } .footer-copy { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.08em; } .footer-legal { display: flex; gap: var(--space-md); } .footer-legal a { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.08em; transition: color var(--transition); } .footer-legal a:hover { color: var(--text-muted); } /* ── SUCCESS / CANCEL PAGES ───────────────────────────────────────────────── */ .result-page { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-xl) var(--space-md); } .result-inner { max-width: 520px; } .result-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); } .result-icon.success { background: rgba(110,201,146,0.12); color: #6ec992; } .result-icon.cancel { background: rgba(201,110,110,0.12); color: #c96e6e; } .result-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 300; margin-bottom: var(--space-sm); } .result-body { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-lg); } /* ── RESPONSIVE TWEAKS ────────────────────────────────────────────────────── */ /* ── Tablet / small laptop (769px–1024px) ── */ @media (max-width: 1024px) { .product-grid { gap: var(--space-lg); } .gallery { max-width: 440px; } } /* ── Medium breakpoint (max 768px) ── */ @media (max-width: 768px) { :root { --space-xl: 2.5rem; --space-2xl: 4rem; --nav-height: 60px; /* slightly shorter nav on mobile */ } /* Product grid stacks to single column */ .product-grid { gap: var(--space-md); } /* Gallery not sticky on mobile */ .gallery { position: static; top: auto; max-width: 100%; } /* Footer stacks */ .footer-top { flex-direction: column; gap: var(--space-md); } .footer-links-group { flex-direction: row; gap: var(--space-lg); flex-wrap: wrap; } .footer-brand { max-width: 100%; } /* Shipping cards single column */ .shipping-cards-simple { grid-template-columns: 1fr; } /* Reduce hero font on tablet */ .hero-title { font-size: clamp(2.8rem, 9vw, 5rem); } /* Product panel full-width */ .product-panel { padding-top: 0; } /* Size options wrap better */ .size-options { gap: 0.4rem; } .size-option { min-width: 46px; height: 46px; } /* Qty control */ .qty-btn { width: 42px; height: 42px; } .qty-display { min-width: 46px; height: 42px; } /* Buttons slightly more compact */ .btn-primary, .btn-secondary { padding: 0.85rem 1.5rem; font-size: 0.7rem; } .btn-buy { padding: 1rem 1.5rem; } } /* ── Mobile (max 480px) ── */ @media (max-width: 480px) { :root { --space-lg: 2rem; --space-xl: 2rem; --space-2xl: 3rem; } /* Tighter container padding on very small phones */ .container { padding: 0 1rem; } /* Hero: smaller type, tighter spacing */ .hero-title { font-size: clamp(2.4rem, 11vw, 3.5rem); line-height: 1; } .hero-sub { font-size: 0.65rem; letter-spacing: 0.15em; margin-bottom: var(--space-md); } .hero-price-badge { font-size: 0.68rem; padding: 0.45rem 1rem; } .hero-actions { gap: 0.6rem; } .btn-primary, .btn-secondary { padding: 0.8rem 1.25rem; font-size: 0.68rem; } /* Product name smaller on phones */ .product-name { font-size: clamp(1.8rem, 7vw, 2.5rem); } .product-price { font-size: 1.8rem; } /* Color swatches slightly smaller */ .color-option { width: 30px; height: 30px; } /* Size grid tighter */ .size-option { min-width: 44px; height: 44px; font-size: 0.75rem; } /* Shipping cards: reduce padding */ .shipping-card { padding: var(--space-sm); } /* Story section tighter */ .story-title { font-size: clamp(2rem, 8vw, 3rem); } /* Footer tighter */ .footer-legal { flex-direction: column; gap: 0.5rem; } .footer-logo { font-size: 1.4rem; } /* Sticky buy bar: tighter */ #sticky-buy { padding: 0.6rem 1rem; } .sticky-product-name { font-size: 0.68rem; } .sticky-buy-btn { padding: 0.75rem 1.1rem; font-size: 0.65rem; } /* Section tags smaller */ .section-tag { font-size: 0.58rem; } /* Detail section title */ .detail-section-title { font-size: 1.8rem; } } /* ── Ensure hero never clips content on short phone screens ── */ @media (max-height: 650px) and (max-width: 767px) { #hero { min-height: auto; padding-top: calc(var(--nav-height) + 1.5rem); padding-bottom: 2rem; } } /* ── Prevent horizontal overflow on all viewports ── */ html, body { max-width: 100%; overflow-x: hidden; } /* ── Ensure images never overflow containers ── */ img { max-width: 100%; height: auto; } /* ── Nav logo doesn't overflow on narrow screens ── */ .nav-logo { max-width: 50vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ── Hero actions wrap cleanly on narrow screens ── */ .hero-actions { max-width: 100%; } /* ── Gallery main image: no overflow on mobile ── */ @media (max-width: 767px) { .gallery-main { max-height: 70svh; } .gallery-dots-row { padding-top: 0.6rem; } } /* ── Product grid: intermediate single-column breakpoint ── */ @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; } .gallery { max-width: 480px; margin: 0 auto; } } /* ── Cart page responsive ── */ @media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cart-item { flex-direction: column; } .cart-item-img { width: 100%; max-width: 120px; } .cart-summary { position: static; top: auto; } } /* ── Legal pages responsive ── */ @media (max-width: 480px) { .legal-page { padding-top: calc(var(--nav-height) + 2rem); padding-bottom: 3rem; } .legal-title { font-size: clamp(1.8rem, 8vw, 2.5rem); } } /* ── Nav right group: don't let it overflow ── */ @media (max-width: 360px) { .nav-right { gap: 0.5rem; } .nav-cart-btn { font-size: 0.6rem; } } /* ── Shipping grid: 1 col below 600px ── */ @media (max-width: 600px) { .shipping-cards-simple { grid-template-columns: 1fr; } } /* ============================================================================= SPARKLE CANVAS Canvas fills the hero section. Drawn by initSparkles() in script.js. Star color adapts to theme: white stars (dark) / dark stars (light). WHERE: js/script.js → initSparkles(), draw() reads currentStarTheme ============================================================================= */ #sparkle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* ============================================================================= LIGHTBOX — click main image to enlarge Fix 3: fullscreen image viewer, keyboard/click dismissable WHERE: js/script.js → initLightbox(), openLightbox(), closeLightbox() ============================================================================= */ #lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(4, 4, 4, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: var(--space-md); animation: fadeIn 0.2s var(--ease); } #lightbox.open { display: flex; } html.theme-light #lightbox, body.theme-light #lightbox { background: rgba(235, 230, 222, 0.93); } /* Main enlarged image */ #lightbox-img { max-width: min(90vw, 700px); max-height: 88svh; width: auto; height: auto; object-fit: contain; border-radius: 3px; display: block; user-select: none; } /* Close button — top right */ #lightbox-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 40px; height: 40px; border-radius: 50%; background: rgba(8,8,8,0.6); border: 1px solid rgba(245,240,232,0.15); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition); font-family: inherit; } #lightbox-close:hover { background: rgba(8,8,8,0.9); } html.theme-light #lightbox-close, body.theme-light #lightbox-close { background: rgba(235,230,222,0.75); border-color: rgba(0,0,0,0.15); color: #111; } /* Lightbox prev/next arrows */ .lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(8,8,8,0.55); border: 1px solid rgba(245,240,232,0.12); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background var(--transition), opacity var(--transition); font-family: inherit; } .lightbox-arrow:hover { background: rgba(8,8,8,0.88); } .lightbox-arrow:disabled { opacity: 0.2; pointer-events: none; } #lightbox-prev { left: var(--space-sm); } #lightbox-next { right: var(--space-sm); } html.theme-light .lightbox-arrow, body.theme-light .lightbox-arrow { background: rgba(235,230,222,0.75); border-color: rgba(0,0,0,0.12); color: #111; } /* Image counter "3 / 10" */ #lightbox-counter { position: absolute; bottom: var(--space-sm); left: 50%; transform: translateX(-50%); font-size: 0.65rem; font-family: var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); background: rgba(8,8,8,0.45); padding: 0.3rem 0.8rem; border-radius: 100px; backdrop-filter: blur(4px); } html.theme-light #lightbox-counter, body.theme-light #lightbox-counter { background: rgba(235,230,222,0.65); } /* ============================================================================= CART ============================================================================= */ /* Cart icon badge in nav */ #cart-btn { position: relative; display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); background: none; border: none; cursor: pointer; font-family: var(--font-body); padding: 0; text-decoration: none; } #cart-btn:hover { color: var(--text); } .cart-count { display: none; min-width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 0.6rem; font-weight: 700; font-family: var(--font-body); align-items: center; justify-content: center; line-height: 1; } .cart-count.has-items { display: flex; } /* Add to Cart button — replaces Buy Now */ /* WHERE: button styles for .btn-add-to-cart */ .btn-add-to-cart { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: var(--text); color: var(--bg); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.15rem 2rem; border-radius: 2px; border: 1px solid var(--text); transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.2s; margin-bottom: var(--space-sm); position: relative; overflow: hidden; cursor: pointer; } .btn-add-to-cart::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform 0.4s var(--ease); } .btn-add-to-cart:hover { border-color: var(--accent); } .btn-add-to-cart:hover::after { transform: translateX(0); } .btn-add-to-cart span { position: relative; z-index: 1; } .btn-add-to-cart:active { transform: scale(0.99); } /* Added-to-cart flash state */ .btn-add-to-cart.added { background: var(--accent); border-color: var(--accent); pointer-events: none; } .btn-add-to-cart.added::after { transform: translateX(0); } /* View cart link shown after adding */ #view-cart-link { display: none; text-align: center; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; margin-bottom: var(--space-sm); cursor: pointer; background: none; border: none; font-family: var(--font-body); width: 100%; } #view-cart-link.visible { display: block; } /* ── SCROLLBAR ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── SELECTION ────────────────────────────────────────────────────────────── */ ::selection { background: var(--accent); color: var(--bg); }