/* Global Reset & Base Styling */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Lenis drives smooth scrolling and adds .lenis to . Native smooth is kept as the fallback for reduced-motion users and if the script fails. */ html:not(.lenis) { scroll-behavior: smooth; } body { background-color: #F5F2EC; color: #1E1E1E; font-family: 'Syne', system-ui, -apple-system, sans-serif; overflow-x: hidden; min-height: 100vh; } /* ── 00. PRICE COLLAPSE GLITCH PRELOADER ── */ .preloader { position: fixed; inset: 0; background-color: #FFFFFF; color: #1E1E1E; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: 'Outfit', sans-serif; transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1); } .preloader.preloader-hidden { opacity: 0; pointer-events: none; } html.no-preloader #preloader, html.no-preloader .preloader { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Halftone dot pattern overlay on pure white background */ .glitch-halftone { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.12; background-image: radial-gradient(#000000 15%, transparent 16%); background-size: 8px 8px; background-position: 0 0; } /* Scanlines overlay */ .glitch-scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.06; background: repeating-linear-gradient( 0deg, #000000, #000000 1px, transparent 1px, transparent 4px ); } /* Centered Glitch Container */ .glitch-wrapper { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .glitch-number { position: relative; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: clamp(90px, 20vw, 240px); letter-spacing: -0.06em; line-height: 1; color: #1E1E1E; text-transform: uppercase; user-select: none; } /* Base number */ .num-main { position: relative; display: inline-block; z-index: 3; } /* RGB Channel Separation Layers */ .num-red, .num-blue { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; opacity: 0; } .num-red { color: #8E4485; z-index: 2; mix-blend-mode: multiply; } .num-blue { color: #00B4D8; z-index: 1; mix-blend-mode: multiply; } /* Glitching Active State */ .glitch-number.is-glitching { animation: glitchJitter 0.08s infinite alternate; } .glitch-number.is-glitching .num-red { opacity: 0.85; animation: redChannelShift 0.09s infinite alternate; } .glitch-number.is-glitching .num-blue { opacity: 0.85; animation: blueChannelShift 0.07s infinite alternate; } /* Keyframes for Chromatic Aberration & Glitch Slices */ @keyframes glitchJitter { 0% { transform: translate(0, 0) scale(1) skewX(0deg); } 25% { transform: translate(-5px, 3px) scale(1.04) skewX(3deg); } 50% { transform: translate(6px, -2px) scale(0.97) skewX(-2deg); } 75% { transform: translate(-3px, -4px) scale(1.02) skewX(4deg); } 100% { transform: translate(4px, 2px) scale(0.99) skewX(-1deg); } } @keyframes redChannelShift { 0% { transform: translate(-9px, -4px); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); } 50% { transform: translate(7px, 3px); clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%); } 100% { transform: translate(-6px, 5px); clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); } } @keyframes blueChannelShift { 0% { transform: translate(8px, 5px); clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%); } 50% { transform: translate(-6px, -4px); clip-path: polygon(0 60%, 100% 60%, 100% 85%, 0 85%); } 100% { transform: translate(5px, -3px); clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } } /* Crisp Final State for 2999 */ .glitch-number.is-final { animation: none !important; transform: translate(0, 0) scale(1) !important; } .glitch-number.is-final .num-main { color: #1E1E1E; text-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(230, 57, 70, 0.25); clip-path: none !important; transform: none !important; transition: text-shadow 0.3s ease; } .glitch-number.is-final .num-red, .glitch-number.is-final .num-blue { opacity: 0 !important; animation: none !important; } /* Paper Grain Texture Overlay */ .paper-grain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 800; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23C7B299' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* Header Styling */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background-color: rgba(245, 242, 236, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(30, 30, 30, 0.08); padding: 20px 0; font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; transition: background-color 0.4s ease, padding 0.4s ease; } .header-container { max-width: 1500px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; } .header-left { grid-column: span 4; display: flex; align-items: center; gap: 20px; } .header-left a, .header-left button, .nav-link-btn { color: #1E1E1E; text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; transition: opacity 0.3s, transform 0.2s; } .header-left a:hover, .header-left button:hover, .nav-link-btn:hover { opacity: 0.6; transform: translateY(-1px); } .currency-tag { color: #8B7D6B; padding: 4px 10px; border: 1px solid rgba(30, 30, 30, 0.2); background: transparent; cursor: pointer; font-weight: bold; } .currency-tag:hover { background: #1E1E1E; color: #FFFFFF; } /* ── LOGIN BUTTON STYLING (HERO & HEADER) ── */ .nav-login-link { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; color: #1E1E1E; text-decoration: none; letter-spacing: 0.1em; padding: 6px 14px; background: #FFFFFF; border: 2px solid #000000; box-shadow: 3px 3px 0px #000000; transition: all 0.2s ease; cursor: pointer; display: inline-flex; align-items: center; pointer-events: auto !important; position: relative; z-index: 100; } .nav-login-link:hover { background: #8E4485; color: #FFFFFF; border-color: #8E4485; box-shadow: 4px 4px 0px #000000; transform: translate(-1px, -1px); } .nav-login-link-header { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: bold; color: #FFFFFF; background: #000000; text-decoration: none; letter-spacing: 0.08em; padding: 5px 12px; border: 1px solid #000000; transition: all 0.2s ease; cursor: pointer; display: inline-flex; align-items: center; margin-left: 8px; } .nav-login-link-header:hover { background: #8E4485; border-color: #8E4485; color: #FFFFFF; box-shadow: 3px 3px 0px #000000; } /* ── CUSTOMER & ADMIN AUTH MODAL OVERLAY STYLING ── */ #user-auth-modal { z-index: 10000 !important; } #user-auth-modal.active { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } .auth-modal-content { max-width: 480px !important; width: 90%; background: #F5F2EC !important; border: 3px solid #1E1E1E !important; box-shadow: 8px 8px 0px rgba(30, 30, 30, 0.9) !important; padding: 0 !important; overflow: hidden; border-radius: 0 !important; position: relative; z-index: 10001; } .auth-modal-header { display: flex; justify-content: space-between; align-items: center; background: #EBE6DC; border-bottom: 2px solid #1E1E1E; padding: 12px 18px; } .auth-modal-tabs { display: flex; gap: 8px; } .auth-tab-btn { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; padding: 6px 14px; background: transparent; border: 1px solid rgba(30, 30, 30, 0.3); color: #1E1E1E; cursor: pointer; transition: all 0.2s ease; } .auth-tab-btn.active, .auth-tab-btn:hover { background: #1E1E1E; color: #FFFFFF; border-color: #1E1E1E; } .auth-modal-body { padding: 28px; } .auth-card-badge { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: bold; letter-spacing: 0.15em; color: #8E4485; background: rgba(142, 68, 133, 0.12); display: inline-block; padding: 4px 8px; border: 1px solid rgba(142, 68, 133, 0.3); margin-bottom: 12px; } .auth-modal-title { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 900; color: #1E1E1E; margin: 0 0 6px 0; letter-spacing: -0.02em; } .auth-modal-sub { font-family: 'Space Mono', monospace; font-size: 10px; color: #666; margin: 0 0 20px 0; line-height: 1.4; } .auth-error-alert { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; color: #D9381E; background: #FCE8E6; border: 1px solid #D9381E; padding: 10px 14px; margin-bottom: 16px; } .auth-success-alert { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; color: #137333; background: #E6F4EA; border: 1px solid #137333; padding: 10px 14px; margin-bottom: 16px; line-height: 1.4; } .auth-form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .auth-label-row { display: flex; justify-content: space-between; align-items: center; } .auth-forgot-link { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #8E4485; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; transition: color 0.2s ease, transform 0.2s ease; } .auth-forgot-link:hover { color: #1E1E1E; } .auth-form-group label { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: #1E1E1E; } .auth-form-group input { font-family: 'Space Mono', monospace; font-size: 13px; padding: 12px 14px; background: #FFFFFF; border: 2px solid #1E1E1E; color: #1E1E1E; box-shadow: 2px 2px 0px rgba(30, 30, 30, 0.2); outline: none; transition: all 0.2s ease; } .auth-form-group input:focus { border-color: #8E4485; box-shadow: 4px 4px 0px #8E4485; } .password-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .password-input-wrapper input { width: 100%; padding-right: 46px !important; box-sizing: border-box; } .btn-toggle-password { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; color: #555555; transition: color 0.2s ease, transform 0.15s ease; z-index: 5; user-select: none; } .btn-toggle-password:hover { color: #8E4485; transform: translateY(-50%) scale(1.1); } .btn-toggle-password:active { transform: translateY(-50%) scale(0.95); } .btn-toggle-password svg { display: block; pointer-events: none; } .btn-auth-submit { width: 100%; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; padding: 14px; color: #FFFFFF; background: #1E1E1E; border: 2px solid #1E1E1E; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; } .btn-auth-submit:hover { background: #8E4485; border-color: #8E4485; transform: translate(-1px, -1px); box-shadow: 5px 5px 0px #000000; } .auth-footer-switch { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(30, 30, 30, 0.2); font-family: 'Space Mono', monospace; font-size: 10px; color: #666; display: flex; flex-direction: column; align-items: center; gap: 6px; } .auth-switch-link { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 800; color: #8E4485; background: none; border: none; cursor: pointer; text-decoration: underline; } .auth-switch-link:hover { color: #1E1E1E; } .header-center { grid-column: span 4; display: flex; justify-content: center; } .logo, .brand-logo { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 38px; letter-spacing: -0.06em; color: #1E1E1E !important; text-decoration: none !important; text-transform: uppercase; display: inline-block; line-height: 1; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .logo:hover, .brand-logo:hover { transform: scale(1.08); color: #E63946 !important; } .header-right { grid-column: span 4; display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .header-right a, .header-right button, .icon-link-btn { color: #1E1E1E; text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; display: flex; align-items: center; gap: 6px; transition: opacity 0.3s, transform 0.2s; } .header-right a:hover, .header-right button:hover, .icon-link-btn:hover { opacity: 0.6; transform: translateY(-1px); } .icon { width: 14px; height: 14px; } /* Hero Split Screen Layout */ .hero-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; clip-path: inset(0 0 0 0); background-color: #FFFFFF; /* Per-shoe theming, rewritten by applyShoe() in script.js as the reveal layer rotates. Declared here so the page renders identically before JS. */ --shoe-ink: rgba(30, 34, 44, 0.20); --shoe-accent: rgba(150, 166, 194, 0.30); --shoe-halo: rgba(255, 255, 255, 0.85); --shoe-rim: rgba(142, 68, 133, 0.42); --shoe-scale: 1; --shoe-fade: 420ms; --shoe-scrim: 0.42; } .split-side { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; } /* Base layer: white backdrop, always fully visible */ .left-side { left: 0; z-index: 10; background-color: #FFFFFF; } /* Unmasked wrapper — its drop-shadow lights the goo edge (the chrome rim) */ .reveal-outer { position: absolute; inset: 0; z-index: 20; pointer-events: none; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 14px var(--shoe-rim, rgba(142, 68, 133, 0.42))); transition: filter 0.45s ease; } /* The two stacked sneakers that crossfade when the mask can't be drained. Scoped to the reveal layer so the base layer's single centred img is untouched. */ .reveal-outer .sneaker-img { position: absolute; opacity: 0; transform: translateY(20px) scale(var(--shoe-scale, 1)); transition: opacity var(--shoe-fade, 420ms) ease; } .reveal-outer .sneaker-img.is-live { opacity: 1; } /* Reveal layer: per-shoe scene plate (falls back to the studio gradient) */ .right-side { left: 0; /* Scrim first so it sits over the plate — lifts the gallery out of near-black into something that belongs next to the cream header and white base. */ background: linear-gradient(rgba(255, 255, 255, var(--shoe-scrim, 0.42)), rgba(255, 255, 255, var(--shoe-scrim, 0.42))), var(--shoe-scene, none) center / cover no-repeat, linear-gradient(135deg, #EBEBEB 0%, #D6D6D6 50%, #C4C4C4 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; -webkit-mask-image: url(#reveal-mask); mask-image: url(#reveal-mask); } /* Text Overlays */ .text-overlay { position: absolute; top: 50%; transform: translateY(-50%); max-width: 500px; z-index: 25; pointer-events: none; } .left-text { left: 64px; } .grey-version h2 { color: #777777; opacity: 0.4; } .black-version h2 { color: #000000; opacity: 1; } .text-overlay h2 { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 90px; line-height: 0.85; letter-spacing: -0.05em; text-transform: uppercase; } /* Sneaker containers centered */ .sneaker-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 15; } .sneaker-img { height: 68vh; max-height: 660px; width: auto; object-fit: contain; transform: translateY(20px); transition: transform 0.5s ease; } .grayscale-img { filter: grayscale(1) contrast(1.25) brightness(0.95); } /* ═══════════════════════════════════════════════════════════ PREMIUM STAGE BACKDROP (sits behind the sneakers) ═══════════════════════════════════════════════════════════ */ .hero-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .stage-backdrop { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; --stage-size: min(74vh, 780px); } /* Right (grey) side: cold silver studio. Reads through the hero-level --shoe-* vars so applyShoe() can retint it — a property declared here would otherwise beat an inherited one. */ .stage-grey { --stage-ink: var(--shoe-ink, rgba(30, 34, 44, 0.20)); --stage-ink-soft: rgba(30, 34, 44, 0.10); --stage-lite: rgba(255, 255, 255, 0.60); --stage-accent: var(--shoe-accent, rgba(150, 166, 194, 0.30)); --stage-halo: var(--shoe-halo, rgba(255, 255, 255, 0.85)); } /* Reveal side once it carries a photographic scene plate: the technical rings fight a photograph, so drop them and keep only ring + contact shadow. */ .stage-photo .stage-grid, .stage-photo .stage-orbit, .stage-photo .stage-corner { display: none; } .stage-photo .stage-ring { opacity: 0.18; } /* Left (white) side: luminous, whisper of brand accent */ .stage-light { --stage-ink: rgba(0, 0, 0, 0.14); --stage-ink-soft: rgba(0, 0, 0, 0.06); --stage-lite: rgba(244, 246, 250, 0.95); --stage-accent: rgba(142, 68, 133, 0.10); --stage-halo: rgba(142, 68, 133, 0.30); } /* Soft key light pooling behind the product */ .stage-glow { position: absolute; top: calc(50% + 10px); left: 50%; width: calc(var(--stage-size) * 1.6); height: calc(var(--stage-size) * 1.25); transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 45%, var(--stage-lite) 0%, transparent 62%), radial-gradient(ellipse at 34% 68%, var(--stage-accent) 0%, transparent 52%); filter: blur(28px); opacity: 0.75; animation: stageBreathe 9s ease-in-out infinite alternate; } @keyframes stageBreathe { 0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.97); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } } /* Fine technical grid, faded out at the edges */ .stage-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--stage-ink-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--stage-ink-soft) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 50%, #000 10%, transparent 78%); mask-image: radial-gradient(ellipse 62% 55% at 50% 50%, #000 10%, transparent 78%); opacity: 0.85; } /* Concentric stage: rings + rotating chrome halo + orbit type */ .stage-core { position: absolute; top: calc(50% + 14px); left: 50%; width: var(--stage-size); height: var(--stage-size); transform: translate(-50%, -50%); } .stage-ring { position: absolute; top: 50%; left: 50%; border: 1px solid var(--stage-ink); border-radius: 50%; transform: translate(-50%, -50%); } .stage-ring.r1 { width: 100%; height: 100%; opacity: 0.45; } .stage-ring.r2 { width: 78%; height: 78%; opacity: 0.7; border-style: dashed; } .stage-ring.r3 { width: 54%; height: 54%; opacity: 0.35; } /* Rotating chrome sweep ring */ .stage-halo { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, var(--stage-halo) 42deg, transparent 92deg, transparent 190deg, var(--stage-halo) 232deg, transparent 288deg, transparent 360deg ); -webkit-mask-image: radial-gradient(circle, transparent 0 47%, #000 48.5%, #000 50.5%, transparent 52%); mask-image: radial-gradient(circle, transparent 0 47%, #000 48.5%, #000 50.5%, transparent 52%); filter: blur(0.4px); animation: stageSpin 26s linear infinite; } @keyframes stageSpin { to { transform: rotate(360deg); } } /* Circular running type around the product */ .stage-orbit { position: absolute; inset: -1%; width: 102%; height: 102%; animation: stageSpin 60s linear infinite reverse; } .stage-orbit text { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: 0.72em; fill: var(--stage-ink); text-transform: uppercase; } /* Editorial corner brackets framing the product */ .stage-corner { position: absolute; width: 34px; height: 34px; border: 1px solid var(--stage-ink); opacity: 0.8; } .stage-corner.c-tl { top: 6%; left: 6%; border-right: 0; border-bottom: 0; } .stage-corner.c-tr { top: 6%; right: 6%; border-left: 0; border-bottom: 0; } .stage-corner.c-bl { bottom: 6%; left: 6%; border-right: 0; border-top: 0; } .stage-corner.c-br { bottom: 6%; right: 6%; border-left: 0; border-top: 0; } /* Contact shadow under the sneaker */ .stage-floor { position: absolute; top: calc(50% + var(--stage-size) * 0.30); left: 50%; width: calc(var(--stage-size) * 0.72); height: calc(var(--stage-size) * 0.12); transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.10) 42%, transparent 72%); filter: blur(14px); } .stage-light .stage-floor { opacity: 0.55; } /* ═══════════════════════════════════════════════════════════ REVEAL HINT ═══════════════════════════════════════════════════════════ */ /* "Move to reveal" cue, killed on first pointer move */ .reveal-hint { position: absolute; z-index: 41; left: 50%; bottom: 132px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.10); backdrop-filter: blur(10px); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(0, 0, 0, 0.62); pointer-events: none; transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-hint.is-hidden { opacity: 0; transform: translateX(-50%) translateY(8px); } .hint-dot { width: 6px; height: 6px; border-radius: 50%; background: #8E4485; box-shadow: 0 0 0 0 rgba(142, 68, 133, 0.55); animation: hintPing 2s ease-out infinite; } @keyframes hintPing { 0% { box-shadow: 0 0 0 0 rgba(142, 68, 133, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(142, 68, 133, 0); } 100% { box-shadow: 0 0 0 0 rgba(142, 68, 133, 0); } } /* Center Overlay Content */ .hero-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; pointer-events: none; } .overlay-top { display: flex; justify-content: space-between; align-items: center; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); padding-top: 48px; pointer-events: auto; position: relative; z-index: 50; } .overlay-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 24px; } .headline { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 180px; letter-spacing: -0.06em; line-height: 0.9; text-transform: uppercase; } .red-text { color: #8E4485; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); } .outline-text { color: #FFFFFF; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); -webkit-text-stroke: 2px #000000; } .cta-wrapper { margin-top: 24px; pointer-events: auto; } .cta-btn { display: inline-block; padding: 14px 32px; background-color: #000000; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid #000000; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .cta-btn:hover { background-color: #FFFFFF; color: #000000; } /* ── 02. PRODUCTS SECTION & COLLECTION GRID ── */ .products-section { background-color: #F5F2EC; padding: 140px 48px; border-top: 1px solid rgba(30, 30, 30, 0.1); position: relative; z-index: 10; } .products-container { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: flex-start; } /* Sidebar navigation & filters */ .products-sidebar { width: 250px; min-width: 250px; } .sidebar-sticky { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; background: #EBE6DC; border: 1px solid rgba(30, 30, 30, 0.15); box-shadow: 4px 4px 0px rgba(30, 30, 30, 0.08); padding: 20px 16px; box-sizing: border-box; } .sidebar-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; } .clear-filters-btn { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: bold; background: #000000; color: #FFFFFF; border: none; padding: 4px 8px; cursor: pointer; letter-spacing: 0.05em; transition: background-color 0.2s ease; flex-shrink: 0; } .clear-filters-btn:hover { background-color: #8E4485; } .sidebar-num { font-family: 'Space Mono', monospace; font-size: 16px; font-weight: bold; color: #8E4485; display: block; margin-bottom: 2px; } .sidebar-title { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; color: #1E1E1E; margin-bottom: 12px; } .filter-group { margin-bottom: 14px; border-bottom: 1px rgba(30, 30, 30, 0.1) solid; padding-bottom: 10px; } .filter-group-header { width: 100%; display: flex; justify-content: space-between; align-items: center; font-family: 'Outfit', 'Space Mono', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #1E1E1E; background: none; border: none; padding: 4px 0 6px 0; cursor: pointer; text-transform: uppercase; transition: color 0.2s ease; } .filter-group-header:hover { color: #8E4485; } .accordion-arrow { font-size: 8px; transition: transform 0.3s ease; } .accordion-group.is-closed .accordion-arrow { transform: rotate(180deg); } .accordion-group.is-closed .accordion-content { display: none; } .extra-filter-items, .extra-sizes-wrapper { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; } .extra-sizes-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; grid-column: 1 / -1; } .hidden-extra { display: none !important; } .btn-toggle-more { width: 100%; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: bold; background: #DFD9CE; border: 1px dashed rgba(30, 30, 30, 0.3); color: #8E4485; padding: 6px; text-align: center; cursor: pointer; margin-top: 6px; letter-spacing: 0.05em; transition: all 0.2s ease; } .btn-toggle-more:hover { background-color: #8E4485; color: #FFFFFF; border-style: solid; } /* Brand Filter List */ .brand-filter-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; padding-right: 4px; } .brand-chip { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: bold; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); color: #1E1E1E; padding: 6px 10px; text-align: left; cursor: pointer; transition: all 0.2s ease; } .brand-chip:hover, .brand-chip.active { background-color: #8E4485; color: #FFFFFF; border-color: #8E4485; } /* Size Filter Grid */ .size-filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .size-filter-chip { font-family: 'Space Mono', monospace; font-size: 9.5px; font-weight: bold; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); color: #1E1E1E; padding: 5px; text-align: center; cursor: pointer; transition: all 0.2s ease; } .size-filter-chip[data-size-filter="all"] { grid-column: 1 / -1; } .size-filter-chip:hover, .size-filter-chip.active { background-color: #8E4485; color: #FFFFFF; border-color: #8E4485; } .filter-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .filter-btn { font-family: 'Space Mono', monospace; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); padding: 6px 10px; text-align: left; color: #1E1E1E; font-size: 10px; font-weight: bold; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; width: 100%; box-sizing: border-box; } .filter-btn:hover, .filter-btn.active { background-color: #8E4485; color: #FFFFFF; border-color: #8E4485; } .sidebar-tag { font-family: 'Space Mono', monospace; color: #8B7D6B; font-size: 10px; } /* Products main column & grid */ .products-main-col { display: flex; flex-direction: column; width: 100%; min-width: 0; } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; } .product-card { background-color: #F8F6F0; border: 1px solid rgba(30, 30, 30, 0.1); padding: 14px; position: relative; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease; cursor: pointer; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06); border-color: rgba(30, 30, 30, 0.3); } .fav-card-btn { position: absolute; top: 18px; right: 18px; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 15; transition: all 0.3s ease; } .fav-card-btn svg { width: 15px; height: 15px; } .fav-card-btn:hover, .fav-card-btn.is-fav { background-color: #8E4485; color: #FFFFFF; border-color: #8E4485; } .fav-card-btn.is-fav svg { fill: #FFFFFF; } .product-badge { position: absolute; top: 18px; left: 18px; font-family: 'Space Mono', monospace; font-size: 9.5px; font-weight: bold; letter-spacing: 0.08em; background-color: #000000; color: #FFFFFF; padding: 4px 10px; z-index: 5; } .product-img-wrapper { height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 14px; position: relative; padding: 14px; box-sizing: border-box; transition: background-color 0.3s ease; } .bg-chalk { background-color: #EFECE6; } .bg-sand { background-color: #F5F2EC; } .bg-carbon { background-color: #E0DCD6; } .bg-taupe { background-color: #E8E4DC; } .product-img { max-width: 92%; max-height: 90%; width: auto; height: auto; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .product-card:hover .product-img { transform: scale(1.05); } .product-info { margin-top: auto; } .product-meta { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 9.5px; color: #8B7D6B; margin-bottom: 6px; text-transform: uppercase; } .product-name { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; text-transform: uppercase; color: #1E1E1E; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-price-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .price-current { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: bold; color: #1E1E1E; } .add-to-bag-btn { width: 100%; background: #1E1E1E; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 10.5px; font-weight: bold; letter-spacing: 0.08em; padding: 10px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .add-to-bag-btn:hover { background-color: #8E4485; } /* ── SCROLL REVEAL ANIMATIONS ── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .reveal.reveal-visible { opacity: 1; transform: translateY(0); } /* ── INTERACTIVE DRAWERS & MODALS SYSTEM ── */ /* Overlay backdrop */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .drawer-overlay.active { opacity: 1; pointer-events: auto; } /* Base Drawer styling */ .drawer { position: fixed; top: 0; bottom: 0; width: 440px; max-width: 90vw; background-color: #F5F2EC; z-index: 1000; display: flex; flex-direction: column; padding: 32px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .drawer-left { left: 0; transform: translateX(-100%); border-right: 1px solid #1E1E1E; } .drawer-right { right: 0; transform: translateX(100%); border-left: 1px solid #1E1E1E; } .drawer.active { transform: translateX(0); } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(30, 30, 30, 0.15); margin-bottom: 24px; } .drawer-subtitle { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: bold; letter-spacing: 0.15em; color: #8E4485; } .drawer-close { background: transparent; border: 1px solid #1E1E1E; padding: 6px 14px; font-family: 'Space Mono', monospace; font-size: 11px; cursor: pointer; transition: all 0.2s; } .drawer-close:hover { background: #1E1E1E; color: #FFFFFF; } .drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* Navigation Menu Content */ .menu-nav { display: flex; flex-direction: column; gap: 16px; } .menu-link, .menu-link-btn { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 22px; color: #1E1E1E; text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 0; border-bottom: 1px solid rgba(30, 30, 30, 0.08); transition: color 0.3s, transform 0.3s; } .menu-link:hover, .menu-link-btn:hover { color: #8E4485; transform: translateX(8px); } .menu-footer { margin-top: auto; padding-top: 32px; font-family: 'Space Mono', monospace; font-size: 11px; } .menu-tag { color: #8B7D6B; display: block; margin-bottom: 16px; } .social-links { display: flex; gap: 16px; } .social-links a { color: #1E1E1E; text-decoration: none; font-size: 10px; letter-spacing: 0.1em; } .social-links a:hover { color: #8E4485; } /* Shopping Bag List & Items */ .bag-items-list, .favorites-items-list { flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 4px; } .empty-state { font-family: 'Space Mono', monospace; font-size: 12px; color: #8B7D6B; text-align: center; margin: auto; padding: 40px 0; } .bag-item, .fav-item { display: flex; gap: 16px; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.1); padding: 16px; position: relative; } .bag-item-img { width: 70px; height: 70px; object-fit: contain; object-position: center; mix-blend-mode: multiply; background: #F8F6F0; } .bag-item-details { flex: 1; display: flex; flex-direction: column; justify-content: center; } .bag-item-title { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 16px; color: #1E1E1E; margin-bottom: 4px; } .bag-item-size { font-family: 'Space Mono', monospace; font-size: 10px; color: #8B7D6B; margin-bottom: 6px; } .bag-item-price { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: bold; color: #1E1E1E; } .bag-item-controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .qty-btn { background: #F5F2EC; border: 1px solid #1E1E1E; width: 24px; height: 24px; cursor: pointer; font-family: 'Space Mono', monospace; font-weight: bold; } .qty-btn:hover { background: #1E1E1E; color: #FFFFFF; } .item-remove-btn { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: #8B7D6B; font-size: 14px; } .item-remove-btn:hover { color: #8E4485; } .bag-summary { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(30, 30, 30, 0.15); font-family: 'Space Mono', monospace; font-size: 12px; } .summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; } .total-row { font-size: 16px; font-weight: bold; border-top: 1px dashed rgba(30, 30, 30, 0.2); padding-top: 12px; margin-top: 12px; } .checkout-btn { /* Rendered as an so the new tab is opened natively. */ display: block; box-sizing: border-box; text-align: center; text-decoration: none; width: 100%; background: #8E4485; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: bold; letter-spacing: 0.15em; padding: 16px; border: none; cursor: pointer; margin-top: 16px; transition: background-color 0.3s ease; } .checkout-btn:hover { background-color: #000000; } /* ── MODALS SYSTEM ── */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .modal.active { opacity: 1; pointer-events: auto; } .modal-center .modal-content { background: #F5F2EC; border: 1px solid #1E1E1E; padding: 36px; max-width: 600px; width: 90vw; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); position: relative; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid rgba(30, 30, 30, 0.15); padding-bottom: 16px; } .modal-title { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: bold; color: #7000FF; } .modal-close { background: transparent; border: 1px solid #1E1E1E; padding: 6px 14px; font-family: 'Space Mono', monospace; font-size: 11px; cursor: pointer; } .modal-close:hover { background: #1E1E1E; color: #FFFFFF; } .categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .category-card-btn { background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); padding: 20px; display: flex; flex-direction: column; text-align: left; cursor: pointer; transition: all 0.3s ease; } .category-card-btn:hover, .category-card-btn.active { background: #1E1E1E; color: #FFFFFF; border-color: #1E1E1E; } .cat-num { font-family: 'Space Mono', monospace; font-size: 12px; color: #8E4485; margin-bottom: 6px; } .cat-name { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 18px; margin-bottom: 4px; } .cat-count { font-family: 'Space Mono', monospace; font-size: 10px; opacity: 0.6; } /* Full Screen Search Overlay */ .modal-full { background: rgba(245, 242, 236, 0.96); backdrop-filter: blur(16px); } .search-modal-container { width: 1000px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; } .search-header { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; } .search-input-wrapper { flex: 1; display: flex; align-items: center; gap: 16px; border-bottom: 3px solid #1E1E1E; padding-bottom: 12px; } .search-icon { width: 28px; height: 28px; } .search-input-wrapper input { flex: 1; background: transparent; border: none; outline: none; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 28px; color: #1E1E1E; text-transform: uppercase; } .search-results-area { overflow-y: auto; max-height: 60vh; /* Keep result cards clear of the overlay scrollbar. */ padding-right: 14px; } .search-prompt { font-family: 'Space Mono', monospace; font-size: 14px; color: #8B7D6B; text-align: center; padding: 60px 0; } .search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Product Quick View Modal */ .product-modal-content { max-width: 850px !important; width: 90vw !important; } .product-modal-close { position: absolute; top: 24px; right: 24px; z-index: 10; } .product-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .product-modal-image-col { background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.1); padding: 32px; display: flex; align-items: center; justify-content: center; position: relative; } .product-modal-badge { position: absolute; top: 16px; left: 16px; background: #000; color: #FFF; font-family: 'Space Mono', monospace; font-size: 9px; padding: 4px 10px; } .modal-img { max-height: 260px; max-width: 90%; width: auto; height: auto; object-fit: contain; object-position: center; mix-blend-mode: multiply; } .modal-title-text { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 32px; color: #1E1E1E; margin-bottom: 6px; } .modal-category { font-family: 'Space Mono', monospace; font-size: 11px; color: #8E4485; margin-bottom: 16px; } .modal-price-row { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; } .modal-price-curr { font-family: 'Space Mono', monospace; font-size: 20px; font-weight: bold; } .size-selector-area { margin-bottom: 28px; } .size-label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; display: block; margin-bottom: 10px; } .size-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .size-btn { background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.2); padding: 8px 14px; font-family: 'Space Mono', monospace; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .size-btn:hover, .size-btn.active { background: #1E1E1E; color: #FFFFFF; border-color: #1E1E1E; } .modal-actions { display: flex; gap: 12px; } .modal-add-bag-btn { flex: 1; background: #8E4485; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: bold; padding: 16px; border: none; cursor: pointer; transition: background 0.3s; } .modal-add-bag-btn:hover { background: #000000; } .modal-fav-btn { background: #FFFFFF; border: 1px solid #1E1E1E; padding: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal-fav-btn:hover, .modal-fav-btn.is-fav { background: #7000FF; border-color: #7000FF; color: #FFFFFF; } .modal-fav-btn.is-fav svg { fill: #FFFFFF; } /* ── TOAST NOTIFICATION SYSTEM ── */ .toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 2000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .toast { background: #1E1E1E; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 12px; padding: 14px 24px; border-left: 4px solid #7000FF; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 12px; pointer-events: auto; animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── COMPREHENSIVE MOBILE RESPONSIVE MEDIA QUERIES ── */ @media (max-width: 1024px) { .hero-container { height: 100vh; height: 100dvh; } .text-overlay h2 { font-size: 40px; } .headline { font-size: 80px; } .products-container { /* Single column from here down: the sidebar sits above the grid. */ grid-template-columns: 1fr; gap: 24px; } .products-sidebar { /* 1 / -1 spans whatever tracks exist; `span 12` invented implicit ones. */ grid-column: 1 / -1; margin-bottom: 16px; } .sidebar-sticky { position: relative; top: auto; } .sidebar-title { font-size: 28px; margin-bottom: 12px; } .filter-list { display: flex; flex-direction: row; overflow-x: auto; white-space: nowrap; gap: 8px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter-list::-webkit-scrollbar { display: none; } .filter-btn { flex-shrink: 0; padding: 8px 14px; font-size: 10px; } .products-grid { grid-template-columns: repeat(3, 1fr); } .product-modal-grid { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 992px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hidden-mobile { display: none; } /* 1. Mobile Header Layout & Precise Spacing */ .header { padding: 12px 0; } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; position: relative; width: 100%; } .header-left { display: flex; align-items: center; gap: 8px; position: static; } /* Hide secondary desktop links and currency tag on small mobile header to prevent crowding */ .header-left #btn-shop-all, .header-left #btn-categories, .header-left .currency-tag { display: none; } .nav-btn { font-size: 11px; padding: 5px 10px; white-space: nowrap; border: 1px solid rgba(30, 30, 30, 0.25); height: 28px; display: inline-flex; align-items: center; background: transparent; } /* Flex center logo cleanly without absolute positioning collisions */ .header-center { position: static; transform: none; display: flex; align-items: center; justify-content: center; } .logo { font-size: 24px; letter-spacing: -0.05em; line-height: 1; } .header-right { display: flex; align-items: center; gap: 12px; position: static; } /* Hide verbose text labels on small mobile screens to prevent wrapping */ .nav-text-label { display: none; } .icon-link-btn, .bag-btn { padding: 4px 2px; gap: 3px; background: transparent; border: none; display: inline-flex; align-items: center; } .badge-num { font-size: 11px; font-weight: bold; font-family: 'Space Mono', monospace; } .icon { width: 16px; height: 16px; } /* 2. Hero Split-Screen Layout on Mobile */ .hero-container { height: 100vh; height: 100dvh; } .text-overlay { position: absolute; top: 13%; transform: none; padding: 0 16px; z-index: 35; pointer-events: none; width: auto; margin-top: 0; } .left-text { left: 16px; right: auto; text-align: left; } .right-text { right: 16px; left: auto; text-align: right; } .text-overlay h2 { font-size: 22px; line-height: 0.95; opacity: 0.85; color: #000000; text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8); } .right-side { padding: 0; } .sneaker-container { transform: translateY(-40px); } .sneaker-img { width: 100vw; min-width: 100vw; max-width: 100vw; height: auto; object-fit: cover; } /* Stage backdrop: tighter, lighter on mobile */ .stage-backdrop { --stage-size: min(56vh, 380px); } .stage-core { top: calc(50% - 6px); } .stage-glow { top: calc(50% - 10px); filter: blur(20px); } .stage-grid { background-size: 44px 44px; } .stage-orbit, .stage-corner { display: none; } .stage-floor { top: calc(50% - 6px + var(--stage-size) * 0.30); } /* Thinner chrome rim so the goo edge doesn't swamp a small screen */ .reveal-outer { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px var(--shoe-rim, rgba(142, 68, 133, 0.32))); } .reveal-hint { bottom: 100px; font-size: 9px; letter-spacing: 0.16em; padding: 7px 13px; } .hero-overlay { padding: 16px 16px 24px; } .overlay-top { padding-top: 60px; font-size: 10px; letter-spacing: 0.12em; } .overlay-bottom { padding-bottom: 12px; } .headline { font-size: 44px; line-height: 0.92; letter-spacing: -0.04em; } .red-text, .outline-text { display: block; } .outline-text { -webkit-text-stroke: 1.5px #000000; } .cta-wrapper { margin-top: 14px; } .cta-btn { padding: 12px 24px; font-size: 11px; letter-spacing: 0.1em; } /* 3. Mobile Drawers & Modals */ .drawer { width: 100vw; max-width: 100vw; padding: 24px 18px; } .drawer-title { font-size: 11px; } .menu-link, .menu-link-btn { font-size: 18px; padding: 10px 0; } .modal-center .modal-content { width: 95vw; max-width: 95vw; padding: 24px 16px; max-height: 90vh; overflow-y: auto; } .product-modal-image-col { padding: 16px; } .modal-img { max-height: 190px; } .modal-title-text { font-size: 22px; } .modal-actions { flex-direction: column; } .modal-add-bag-btn { width: 100%; } .search-modal-container { width: 100%; padding: 16px; } .search-input-wrapper input { font-size: 18px; } .search-grid { grid-template-columns: 1fr; } /* 4. Toast Notifications on Mobile */ .toast-container { bottom: 20px; right: 16px; left: 16px; } .toast { width: 100%; justify-content: center; font-size: 11px; padding: 12px 16px; } } @media (max-width: 640px) { .products-section { padding: 60px 16px; } .products-grid { grid-template-columns: 1fr; gap: 20px; } .product-card { padding: 16px; } .product-img-wrapper { height: 250px; } .product-name { font-size: 20px; } .categories-grid { grid-template-columns: 1fr; } } /* ── PAGINATION CONTROLS ── */ .pagination-wrapper { grid-column: 1 / -1; margin-top: 48px; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .pagination-info { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: #8B7D6B; text-transform: uppercase; text-align: center; } .pagination-controls { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: 100%; } .page-btn { background: #FFFFFF; border: 1px solid #1E1E1E; color: #1E1E1E; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; padding: 10px 16px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 2px 2px 0px #1E1E1E; } .page-btn:hover:not(:disabled) { background: #1E1E1E; color: #FFFFFF; transform: translate(-1px, -1px); box-shadow: 3px 3px 0px #1E1E1E; } .page-btn.active { background: #1E1E1E; color: #FFFFFF; box-shadow: 0px 0px 0px #1E1E1E; } /* ── PRODUCT CARD SIZES CHIPS ── */ .product-sizes-container { margin-top: 6px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; } .sizes-title { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.08em; color: #8B7D6B; text-transform: uppercase; } .sizes-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 48px; overflow-y: auto; } .size-chip { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; padding: 3px 6px; background: #F8F6F0; border: 1px solid rgba(30, 30, 30, 0.2); color: #1E1E1E; cursor: pointer; transition: all 0.15s ease; user-select: none; } .size-chip:hover { background: #1E1E1E; color: #FFFFFF; border-color: #1E1E1E; } .size-chip.selected { background: #1E1E1E; color: #FFFFFF; border-color: #1E1E1E; } /* ── EDITORIAL PRODUCT DETAIL PAGE MODAL ── */ .product-modal-content { width: 900px; max-width: 92vw; padding: 32px; background: #F8F6F0; border: 1px solid #1E1E1E; box-shadow: 8px 8px 0px #1E1E1E; } .product-modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; cursor: pointer; } .product-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .modal-main-img-wrapper { width: 100%; height: 320px; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.15); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-img { max-height: 280px; max-width: 90%; width: auto; height: auto; object-fit: contain; object-position: center; mix-blend-mode: multiply; } .modal-thumbnails-container { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .modal-thumb { width: 60px; height: 60px; border: 1px solid rgba(30, 30, 30, 0.2); background: #FFFFFF; object-fit: contain; cursor: pointer; padding: 4px; transition: all 0.15s ease; } .modal-thumb.active, .modal-thumb:hover { border-color: #1E1E1E; transform: translateY(-2px); box-shadow: 2px 2px 0px #1E1E1E; } .size-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .size-guide-link { font-family: 'Space Mono', monospace; font-size: 10px; color: #8B7D6B; cursor: pointer; text-decoration: underline; } .modal-qty-container { display: flex; align-items: center; gap: 16px; margin-top: 16px; margin-bottom: 16px; } .qty-label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #8B7D6B; } .qty-counter { display: flex; align-items: center; border: 1px solid #1E1E1E; background: #FFFFFF; } .qty-btn { background: transparent; border: none; width: 32px; height: 32px; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; cursor: pointer; } .qty-val { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; padding: 0 12px; } .modal-specs-accordion { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(30, 30, 30, 0.15); display: flex; flex-direction: column; gap: 12px; } .spec-item { display: flex; flex-direction: column; gap: 2px; } .spec-title { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #1E1E1E; } .spec-desc { font-family: 'Outfit', sans-serif; font-size: 12px; color: #666; } /* ── STANDALONE FULL PRODUCT DETAIL PAGE LAYOUT ── */ .product-page-main { min-height: 85vh; padding: 110px 24px 48px 24px; } .product-page-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; } .product-gallery-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; } .main-photo-wrapper { width: 100%; height: 480px; border: 1px solid #1E1E1E; box-shadow: 6px 6px 0px #1E1E1E; display: flex; align-items: center; justify-content: center; padding: 32px; position: relative; } .main-photo { max-height: 400px; max-width: 90%; width: auto; height: auto; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .main-photo:hover { transform: scale(1.04); } .gallery-thumbnails-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; } .gallery-thumb { width: 80px; height: 80px; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.2); object-fit: contain; padding: 6px; cursor: pointer; transition: all 0.2s ease; } .gallery-thumb.active, .gallery-thumb:hover { border-color: #1E1E1E; box-shadow: 3px 3px 0px #1E1E1E; transform: translateY(-2px); } .product-details-col { min-width: 0; display: flex; flex-direction: column; } .details-sticky { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; } .product-meta-tags { display: flex; align-items: center; gap: 16px; font-size: 11px; color: #8B7D6B; } .product-title { font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #1E1E1E; text-transform: uppercase; } .pricing-container { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(30, 30, 30, 0.15); border-bottom: 1px solid rgba(30, 30, 30, 0.15); } .pricing-container .price-current { font-size: 28px; font-weight: 700; color: #1E1E1E; } .discount-badge { background: #8E4485; color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 4px 10px; } .sizes-section { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .sizes-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .sizes-label { font-weight: 700; color: #1E1E1E; } .size-guide { color: #8B7D6B; cursor: pointer; text-decoration: underline; } .full-page-size-chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .full-size-chip { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; padding: 10px 18px; background: #FFFFFF; border: 1px solid #1E1E1E; color: #1E1E1E; cursor: pointer; box-shadow: 2px 2px 0px #1E1E1E; transition: all 0.2s ease; line-height: 1.2; } .full-size-chip:hover, .full-size-chip.selected { background: #1E1E1E; color: #FFFFFF; transform: translate(-1px, -1px); box-shadow: 4px 4px 0px #1E1E1E; } .quantity-section { display: flex; align-items: center; gap: 20px; margin-top: 6px; } .qty-label { font-size: 11px; font-weight: 700; color: #8B7D6B; } .qty-control { display: flex; align-items: center; border: 1px solid #1E1E1E; background: #FFFFFF; box-shadow: 2px 2px 0px #1E1E1E; } .qty-control .qty-btn { background: transparent; border: none; width: 40px; height: 40px; font-size: 16px; font-weight: 700; cursor: pointer; } .qty-control .qty-num { font-size: 15px; font-weight: 700; padding: 0 16px; } .action-buttons-group { display: flex; gap: 16px; margin-top: 12px; } .add-to-cart-main-btn { flex: 1; background: #8E4485; color: #FFFFFF; border: 2px solid #1E1E1E; font-size: 14px; font-weight: 700; padding: 16px 24px; cursor: pointer; box-shadow: 4px 4px 0px #1E1E1E; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .add-to-cart-main-btn:hover { background: #1E1E1E; transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #1E1E1E; } .favorite-main-btn { background: #FFFFFF; border: 2px solid #1E1E1E; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 4px 4px 0px #1E1E1E; transition: all 0.2s ease; } .favorite-main-btn:hover, .favorite-main-btn.is-fav { background: #1E1E1E; color: #8E4485; } .favorite-main-btn.is-fav svg { fill: #8E4485; stroke: #8E4485; } .guarantee-box { margin-top: 24px; padding: 20px; background: #FFFFFF; border: 1px solid #1E1E1E; box-shadow: 4px 4px 0px #1E1E1E; display: flex; flex-direction: column; gap: 16px; } .guarantee-item { display: flex; gap: 14px; align-items: start; } .g-icon { font-size: 18px; } .g-text strong { font-size: 11px; color: #1E1E1E; display: block; } .g-text p { font-size: 12px; color: #666; margin-top: 2px; } @media (max-width: 900px) { .product-page-container { grid-template-columns: 1fr; gap: 32px; } .product-gallery-col { position: static; } .main-photo-wrapper { height: 340px; } } /* ── BRAND SHOWCASE CAROUSEL & SUB-NAV SECTION ── */ .brand-showcase-section { width: 100%; background-color: #0A0A0A; color: #FFFFFF; position: relative; overflow: hidden; border-top: 2px solid #1E1E1E; border-bottom: 2px solid #1E1E1E; } /* Category Sub-header Nav */ .subnav-bar { background-color: #000000; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 14px 24px; overflow-x: auto; scrollbar-width: none; } .subnav-bar::-webkit-scrollbar { display: none; } .subnav-container { display: flex; justify-content: center; align-items: center; gap: 36px; max-width: 1400px; margin: 0 auto; white-space: nowrap; } .subnav-link { color: #FFFFFF; text-decoration: none; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s ease, transform 0.2s ease; position: relative; padding: 4px 0; } .subnav-link:hover { color: #8E4485; } .subnav-link.subnav-sale { color: #8E4485; font-weight: 900; } .subnav-link.subnav-sale:hover { color: #9d4edd; } /* Carousel Outer Wrapper */ .carousel-wrapper { position: relative; width: 100%; padding: 0; display: flex; align-items: center; } /* Carousel Track & Cards */ .carousel-track-container { width: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .carousel-track-container::-webkit-scrollbar { display: none; } .carousel-track { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 2px; background-color: #1A1A1A; } .carousel-card { position: relative; height: 520px; overflow: hidden; cursor: pointer; background-color: #121212; } .card-image-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } .card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); filter: brightness(0.85); } .carousel-card:hover .card-img { transform: scale(1.06); filter: brightness(0.95); } .card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%); pointer-events: none; transition: opacity 0.3s ease; } /* Brand Logo Overlays Centered inside Cards */ .brand-logo-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; padding: 30px; } .logo-superkicks { font-family: 'Outfit', sans-serif; font-size: clamp(18px, 2.2vw, 32px); font-weight: 900; color: #FFFFFF; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 4px 15px rgba(0,0,0,0.7); border: 3px solid #FFFFFF; padding: 6px 14px; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); max-width: 90%; text-align: center; word-break: break-word; } .logo-nb { width: clamp(80px, 8vw, 130px); height: auto; color: #FFFFFF; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); } .logo-nike { width: clamp(90px, 9vw, 150px); height: auto; color: #FFFFFF; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); } .logo-patta { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(40px, 5vw, 72px); font-weight: 900; color: #FFFFFF; text-shadow: 0 4px 20px rgba(0,0,0,0.8); letter-spacing: -0.02em; } /* Carousel Floating Navigation Arrow Buttons */ .carousel-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.85); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .carousel-nav-btn svg { width: 22px; height: 22px; } .carousel-nav-btn:hover { background-color: #FFFFFF; color: #000000; border-color: #FFFFFF; transform: translateY(-50%) scale(1.1); } .carousel-nav-btn.prev-btn { left: 12px; } .carousel-nav-btn.next-btn { right: 12px; } /* Trending Header Container */ .trending-header-container { width: 100%; background-color: #F5F2EC; padding: 48px 20px 24px 20px; text-align: center; } .trending-title { font-family: 'Outfit', 'Syne', sans-serif; font-size: clamp(36px, 6vw, 72px); font-weight: 900; color: #1E1E1E; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; } /* Responsive adjustments for brand showcase */ @media (max-width: 1024px) { .subnav-container { gap: 20px; } .carousel-card { height: 440px; } } @media (max-width: 768px) { .carousel-track { grid-template-columns: repeat(4, 280px); width: max-content; } .carousel-card { height: 380px; } .carousel-nav-btn { width: 40px; height: 40px; } .carousel-nav-btn svg { width: 20px; height: 20px; } } /* ── FOOTER STYLING ── */ .footer { background-color: #0A0A0A; color: #F4F4F0; padding: 64px 48px 32px; border-top: 2px solid #000000; font-family: 'Space Mono', monospace; position: relative; z-index: 50; } .footer-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid #333333; } .footer-col { display: flex; flex-direction: column; gap: 16px; } .footer-logo { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 42px; letter-spacing: -0.05em; color: #FFFFFF; line-height: 1; } .footer-text { font-size: 12px; line-height: 1.6; color: #AAAAAA; max-width: 400px; letter-spacing: 0.05em; } .footer-heading { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; color: #8E4485; text-transform: uppercase; margin-bottom: 8px; } .footer-link { font-size: 12px; color: #CCCCCC; text-decoration: none; letter-spacing: 0.1em; transition: color 0.2s ease; } .footer-link:hover { color: #FFFFFF; } /* Instagram row in the footer CONTACT column: inline SVG so it needs no asset request and inherits the link colour on hover. */ .footer-social { display: inline-flex; align-items: center; gap: 8px; } .footer-social-icon { width: 15px; height: 15px; flex-shrink: 0; } .footer-social:hover .footer-social-icon { color: #8E4485; } .footer-bottom { max-width: 1400px; margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #666666; letter-spacing: 0.15em; text-transform: uppercase; } @media (max-width: 768px) { .footer { padding: 40px 24px 24px; } .footer-container { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; } } /* ── 02. COMIC BOOK VAULT STYLING ── */ .comic-vault-section { position: relative; background-color: #F5F2EC; background-image: radial-gradient(#000000 15%, transparent 16%); background-size: 16px 16px; padding: 100px 48px 80px 48px; border-top: 4px solid #000000; border-bottom: 4px solid #000000; overflow: hidden; box-sizing: border-box; scroll-margin-top: 80px; } .comic-container { max-width: 1400px; width: 100%; margin: 0 auto; position: relative; z-index: 10; box-sizing: border-box; padding: 0 12px; } .comic-header { text-align: center; margin-bottom: 56px; } .comic-issue-tag { display: inline-block; background-color: #000000; color: #F8F6F0; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.15em; padding: 6px 18px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 4px 4px 0px #FF0055; margin-bottom: 16px; } .comic-title { font-family: 'Bangers', cursive; font-size: 72px; letter-spacing: 0.04em; color: #000000; text-transform: uppercase; line-height: 1; text-shadow: 4px 4px 0px #FFFFFF, 8px 8px 0px #FF0055; display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .comic-pow-badge { font-family: 'Bangers', cursive; font-size: 28px; background-color: #FF0055; color: #FFFFFF; padding: 4px 14px; border: 3px solid #000000; border-radius: 50%; transform: rotate(12deg) scale(1.1); box-shadow: 3px 3px 0px #000000; display: inline-block; animation: comicPulse 2s infinite ease-in-out; } @keyframes comicPulse { 0%, 100% { transform: rotate(12deg) scale(1.1); } 50% { transform: rotate(18deg) scale(1.25); } } .comic-subtitle { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #000000; background: #FFFFFF; display: inline-block; padding: 4px 16px; border: 2px solid #000000; box-shadow: 3px 3px 0px #000000; } .comic-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; width: 100%; box-sizing: border-box; align-items: stretch; } @media (max-width: 1100px) { .comic-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } .comic-card { position: relative; background: #FFFFFF; border: 4px solid #000000; box-shadow: 8px 8px 0px #000000; border-radius: 0px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; } .card-tilt-left { transform: rotate(-1.2deg); } .card-tilt-right { transform: rotate(1.2deg); } .comic-card:hover { transform: translateY(-8px) rotate(0deg) scale(1.02); box-shadow: 12px 12px 0px #FF0055; z-index: 20; } .comic-badge { position: absolute; top: -16px; left: -12px; font-family: 'Bangers', cursive; font-size: 22px; padding: 4px 14px; border: 3px solid #000000; box-shadow: 3px 3px 0px #000000; z-index: 15; letter-spacing: 0.05em; transform: rotate(-8deg); } .comic-badge.badge-right { left: auto; right: -12px; transform: rotate(8deg); } .yellow-badge { background-color: #F8F6F0; color: #000000; } .red-badge { background-color: #FF0055; color: #FFFFFF; } .cyan-badge { background-color: #00F0FF; color: #000000; } .purple-badge { background-color: #A020F0; color: #FFFFFF; } .comic-sound-effect { position: absolute; bottom: 12px; right: 12px; font-family: 'Bangers', cursive; font-size: 24px; color: #FF0055; text-shadow: 2px 2px 0px #000000, -1px -1px 0px #FFFFFF; z-index: 15; pointer-events: none; transform: rotate(6deg); opacity: 0.9; } .comic-sound-effect.sound-left { right: auto; left: 12px; transform: rotate(-6deg); } .comic-img-frame { position: relative; background-color: #FFFFFF; border-bottom: 3px solid #000000; padding: 16px 12px; display: flex; align-items: center; justify-content: center; height: 210px; overflow: hidden; box-sizing: border-box; } .comic-shoe-img { width: 92%; height: 92%; max-height: 180px; object-fit: contain; object-position: center; filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.12)); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .comic-card:hover .comic-shoe-img { transform: scale(1.08) rotate(-2deg); } .comic-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; background-color: #FFFFFF; justify-content: space-between; } .comic-brand-tag { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #666666; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; } .comic-shoe-name { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.05em; color: #000000; line-height: 1.1; margin-bottom: 12px; text-transform: uppercase; min-height: 58px; display: flex; align-items: flex-start; } .comic-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; margin-top: auto; } .comic-price-curr { font-family: 'Bangers', cursive; font-size: 28px; color: #FF0055; letter-spacing: 0.05em; } .comic-add-btn { width: 100%; padding: 12px 16px; background-color: #F8F6F0; color: #000000; font-family: 'Bangers', cursive; font-size: 20px; letter-spacing: 0.08em; border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.15s ease; text-align: center; } .comic-add-btn:hover { background-color: #FF0055; color: #FFFFFF; box-shadow: 6px 6px 0px #000000; transform: translateY(-2px); } .comic-footer-cta { text-align: center; margin-top: 24px; } .comic-cta-btn { display: inline-block; background-color: #000000; color: #F8F6F0; font-family: 'Bangers', cursive; font-size: 24px; letter-spacing: 0.08em; padding: 14px 36px; border: 3px solid #000000; box-shadow: 6px 6px 0px #FF0055; text-decoration: none; transition: all 0.2s ease; } .comic-cta-btn:hover { background-color: #FF0055; color: #FFFFFF; box-shadow: 8px 8px 0px #000000; transform: translateY(-3px) scale(1.03); } @media (max-width: 768px) { .comic-vault-section { padding: 70px 10px 40px 10px; overflow: hidden; box-sizing: border-box; } .comic-container { max-width: 100%; padding: 0 2px; box-sizing: border-box; overflow: hidden; } .comic-header { margin-bottom: 24px; } .comic-issue-tag { font-size: 10px; padding: 4px 10px; margin-bottom: 8px; } .comic-title { font-size: clamp(26px, 7vw, 38px); flex-wrap: wrap; gap: 6px; text-shadow: 2px 2px 0px #FFFFFF, 4px 4px 0px #FF0055; justify-content: center; } .comic-pow-badge { font-size: 18px; padding: 2px 8px; border-width: 2px; } .comic-subtitle { font-size: 10px; letter-spacing: 0.03em; padding: 4px 8px; line-height: 1.3; max-width: 100%; box-sizing: border-box; } .comic-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; width: 100%; box-sizing: border-box; } .comic-card { border-width: 3px; box-shadow: 4px 4px 0px #000000; transform: none !important; width: 100%; box-sizing: border-box; } .card-tilt-left, .card-tilt-right { transform: none !important; } .comic-badge { top: -10px; left: 2px; font-size: 13px; padding: 2px 6px; border-width: 2px; box-shadow: 2px 2px 0px #000000; } .comic-badge.badge-right { left: auto !important; right: 2px !important; transform: rotate(6deg) !important; } .comic-sound-effect { font-size: 14px; bottom: 6px; right: 6px; text-shadow: 1px 1px 0px #000000; } .comic-sound-effect.sound-left { right: auto; left: 6px; } .comic-img-frame { height: 130px; padding: 8px 4px; border-bottom: 2px solid #000000; } .comic-shoe-img { max-height: 100px; } .comic-card-body { padding: 8px 6px; } .comic-brand-tag { font-size: 8px; margin-bottom: 2px; letter-spacing: 0.05em; } .comic-shoe-name { font-size: 14px; margin-bottom: 6px; line-height: 1.15; min-height: 34px; word-break: break-word; overflow-wrap: break-word; } .comic-price-row { gap: 4px; margin-bottom: 8px; } .comic-price-curr { font-size: 17px; } .comic-add-btn { font-size: 13px; padding: 8px 4px; border-width: 2px; box-shadow: 2px 2px 0px #000000; letter-spacing: 0.04em; } .comic-cta-btn { font-size: 16px; padding: 10px 16px; box-shadow: 4px 4px 0px #FF0055; border-width: 2px; max-width: 90%; display: inline-block; } } @media (max-width: 380px) { .comic-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .comic-card-body { padding: 6px 4px; } .comic-shoe-name { font-size: 13px; min-height: 32px; } .comic-price-curr { font-size: 15px; } .comic-add-btn { font-size: 12px; padding: 6px 2px; } } /* ── 15. ADMIN DASHBOARD STYLING ── */ .admin-body { background-color: #F8F6F0; color: #000000; min-height: 100vh; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; } .logo-sub { font-size: 14px; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; letter-spacing: 0.15em; color: #8E4485; background: #F3E8F2; padding: 2px 6px; border-radius: 2px; margin-left: 6px; } .add-product-btn-header { background-color: #8E4485; color: #FFFFFF; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-weight: 700; font-size: 13px; padding: 8px 16px; border: 2px solid #000000; box-shadow: 3px 3px 0px #000000; cursor: pointer; transition: all 0.2s ease; } .add-product-btn-header:hover { background-color: #000000; color: #FFFFFF; transform: translateY(-2px); box-shadow: 5px 5px 0px #8E4485; } /* ── ADMIN AUTHENTICATION GUARD SCREEN ── */ .admin-auth-guard { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #F8F6F0; padding: 60px 20px; box-sizing: border-box; position: relative; z-index: 1000; } .admin-auth-card { width: 100%; max-width: 480px; background: #FFFFFF; border: 3px solid #000000; box-shadow: 10px 10px 0px #000000; padding: 40px 32px; position: relative; } .auth-card-badge { display: inline-block; background: #000000; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 4px 12px; letter-spacing: 0.15em; margin-bottom: 16px; } .auth-card-title { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; color: #1E1E1E; margin: 0 0 8px 0; line-height: 1.1; } .auth-card-sub { font-family: 'Space Mono', monospace; font-size: 11px; color: #8E4485; font-weight: 700; margin-bottom: 24px; display: block; letter-spacing: 0.05em; } .auth-form-group { margin-bottom: 20px; } .auth-form-group label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #1E1E1E; display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .auth-form-group input { width: 100%; padding: 12px 14px; border: 2px solid #000000; background: #F8F6F0; font-family: 'Space Mono', monospace; font-size: 13px; color: #1E1E1E; box-sizing: border-box; transition: all 0.2s ease; } .auth-form-group input:focus { outline: none; background: #FFFFFF; border-color: #8E4485; box-shadow: 3px 3px 0px #8E4485; } .auth-error-alert { background: #FEE2E2; border: 2px solid #DC2626; color: #991B1B; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 10px 14px; margin-bottom: 20px; display: none; } .btn-auth-submit { width: 100%; padding: 14px; background: #000000; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; border: none; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; } .btn-auth-submit:hover { background: #8E4485; box-shadow: 4px 4px 0px #000000; transform: translate(-2px, -2px); } .btn-admin-logout { background: #DC2626; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; padding: 6px 14px; border: 2px solid #000000; cursor: pointer; transition: all 0.2s ease; } .btn-admin-logout:hover { background: #000000; color: #FFFFFF; } /* Hero Banner */ .admin-hero { padding: 105px 0 32px; background-color: #FFFFFF; border-bottom: 2px solid #000000; } .admin-container { max-width: 1400px; margin: 0 auto; padding: 0 32px; } .admin-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 20px; } .admin-subtitle { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: #8E4485; text-transform: uppercase; display: block; margin-bottom: 6px; } .admin-title { font-family: 'Syne', system-ui, -apple-system, sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.2; } .admin-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .primary-btn-brutalist { background-color: #000000; color: #FFFFFF; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-weight: 700; font-size: 14px; padding: 14px 24px; border: 2px solid #000000; box-shadow: 4px 4px 0px #8E4485; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .primary-btn-brutalist:hover { background-color: #8E4485; color: #FFFFFF; box-shadow: 6px 6px 0px #000000; transform: translateY(-2px); } .featured-btn-brutalist { background-color: #F3E8F2; color: #8E4485; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-weight: 700; font-size: 14px; padding: 14px 24px; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .featured-btn-brutalist:hover { background-color: #8E4485; color: #FFFFFF; box-shadow: 6px 6px 0px #000000; transform: translateY(-2px); } .hero-tab-btn { background-color: #FFFFFF; color: #000000; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-weight: 700; font-size: 14px; padding: 14px 24px; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .hero-tab-btn:hover, .hero-tab-btn.active { background-color: #8E4485; color: #FFFFFF; box-shadow: 6px 6px 0px #000000; } .admin-tab-view { transition: opacity 0.2s ease; } /* Featured Products Management Modal Styling */ .featured-modal-content { max-width: 720px; width: 90%; background-color: #FFFFFF; border: 3px solid #000000; box-shadow: 8px 8px 0px #8E4485; padding: 0; overflow: hidden; } .featured-modal-body { padding: 24px; } .featured-desc-text { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 12px; line-height: 1.5; color: #4B5563; margin-bottom: 20px; background-color: #F8F6F0; padding: 12px 16px; border-left: 4px solid #8E4485; } .featured-add-section { position: relative; margin-bottom: 24px; } .featured-add-section label { display: block; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 6px; } .featured-search-group input { width: 100%; padding: 12px 16px; border: 2px solid #000000; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 13px; outline: none; } .featured-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; max-height: 220px; overflow-y: auto; z-index: 100; display: none; } .featured-search-results.active { display: block; } .featured-result-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #E5E7EB; cursor: pointer; transition: background 0.15s; } .featured-result-item:hover { background: #F3E8F2; } .featured-result-info { display: flex; align-items: center; gap: 12px; } .featured-result-img { width: 36px; height: 36px; object-fit: contain; object-position: center; background: #FFFFFF; padding: 2px; box-sizing: border-box; border: 1px solid #000000; } .featured-result-title { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 12px; font-weight: 700; } .featured-result-cat { font-size: 10px; color: #6B7280; } .btn-add-featured-item { background-color: #000000; color: #FFFFFF; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 11px; font-weight: 700; padding: 6px 12px; border: none; cursor: pointer; } .btn-add-featured-item:hover { background-color: #8E4485; } .featured-list-wrapper { border: 2px solid #000000; background: #F8F6F0; padding: 16px; } .featured-list-header { display: flex; justify-content: space-between; align-items: center; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 12px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #000000; } .featured-hint { font-size: 10px; color: #8E4485; } .featured-items-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; } .featured-item-row { display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border: 2px solid #000000; padding: 10px 14px; } .featured-item-left { display: flex; align-items: center; gap: 12px; } .featured-item-badge { background: #000000; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 2px 8px; } .featured-item-thumb { width: 42px; height: 42px; object-fit: contain; object-position: center; background: #FFFFFF; padding: 2px; box-sizing: border-box; border: 1px solid #000000; } .featured-item-name { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 12px; font-weight: 700; } .featured-item-price { font-size: 11px; color: #8E4485; } .btn-remove-featured { background: #DC2626; color: #FFFFFF; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 11px; font-weight: 700; padding: 6px 12px; border: 1px solid #000000; cursor: pointer; } .btn-remove-featured:hover { background: #991B1B; } .secondary-btn-brutalist { background-color: #FFFFFF; color: #000000; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px; padding: 12px 24px; border: 2px solid #000000; cursor: pointer; transition: all 0.2s ease; } .secondary-btn-brutalist:hover { background-color: #F3F4F6; border-color: #000000; } .danger-btn-brutalist { background-color: #DC2626; color: #FFFFFF; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-weight: 700; font-size: 14px; padding: 12px 24px; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.2s ease; } .danger-btn-brutalist:hover { background-color: #991B1B; transform: translateY(-2px); } /* Stats Cards Grid */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .admin-stat-card { background-color: #F8F6F0; border: 2px solid #000000; padding: 20px; box-shadow: 4px 4px 0px #000000; display: flex; flex-direction: column; } .admin-stat-card.highlight-card { background-color: #000000; color: #FFFFFF; } .stat-label { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: #666666; text-transform: uppercase; margin-bottom: 8px; } .highlight-card .stat-label { color: #A1A1AA; } .stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 42px; line-height: 1; letter-spacing: 0.05em; margin-bottom: 6px; } .stat-value.text-green { color: #10B981; } .stat-meta { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 11px; color: #888888; } .highlight-card .stat-meta { color: #D4D4D8; } /* Main Section Toolbar */ .admin-main-section { padding: 32px 0 64px; } .admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .admin-search-wrapper { position: relative; flex: 1; min-width: 300px; } .admin-search-wrapper .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #666666; } .admin-search-wrapper input { width: 100%; padding: 12px 14px 12px 42px; font-family: 'Space Mono', monospace; font-size: 13px; background-color: #FFFFFF; border: 2px solid #000000; box-shadow: 3px 3px 0px #000000; outline: none; } .admin-search-wrapper input:focus { border-color: #8E4485; box-shadow: 4px 4px 0px #8E4485; } .admin-category-pills { display: flex; gap: 8px; flex-wrap: wrap; } .admin-pill { background-color: #FFFFFF; color: #000000; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 8px 14px; border: 2px solid #000000; cursor: pointer; transition: all 0.2s ease; } .admin-pill:hover, .admin-pill.active { background-color: #8E4485; color: #FFFFFF; border-color: #000000; box-shadow: 2px 2px 0px #000000; } /* Inventory Header */ .admin-inventory-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .table-title { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; margin: 0; } .inventory-count { font-family: 'Space Mono', monospace; font-size: 12px; color: #666666; } /* Data Table */ .table-responsive { width: 100%; overflow-x: auto; background-color: #FFFFFF; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; margin-bottom: 24px; } .admin-products-table { width: 100%; border-collapse: collapse; text-align: left; } .admin-products-table th { background-color: #F8F6F0; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #000000; padding: 14px 16px; border-bottom: 2px solid #000000; text-transform: uppercase; } .admin-products-table td { padding: 14px 16px; border-bottom: 1px solid #E5E7EB; vertical-align: middle; font-size: 13px; } .admin-products-table tr:hover { background-color: #FAF5F9; } .admin-thumb-img, .table-img-preview { width: 54px; height: 54px; max-width: 54px; max-height: 54px; object-fit: contain; background-color: #F3F4F6; border: 1px solid #000000; padding: 4px; display: block; } .product-id-text { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #8E4485; } .product-title-text { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14px; margin-bottom: 4px; } .admin-badge-tag { display: inline-block; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; background-color: #000000; color: #FFFFFF; padding: 2px 6px; } .category-chip { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; padding: 4px 8px; border: 1px solid #000000; background-color: #F3F4F6; } .category-chip.cat-FOOTWEAR { background-color: #E0F2FE; color: #0369A1; } .category-chip.cat-CLOTHES { background-color: #FCE7F3; color: #BE185D; } .category-chip.cat-BAGS { background-color: #FEF3C7; color: #B45309; } .category-chip.cat-WATCHES { background-color: #ECFDF5; color: #047857; } .category-chip.cat-EYEWEAR { background-color: #F3E8FF; color: #6B21A8; } .price-sale { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px; color: #000000; } .sizes-container { display: flex; gap: 4px; flex-wrap: wrap; max-width: 180px; } .admin-size-tag { font-family: 'Space Mono', monospace; font-size: 9px; background-color: #F3F4F6; border: 1px solid #D1D5DB; padding: 2px 4px; } .td-actions { white-space: nowrap; } .action-btn { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 6px 10px; border: 1px solid #000000; background-color: #FFFFFF; cursor: pointer; margin-right: 4px; transition: all 0.15s ease; } .btn-edit:hover { background-color: #8E4485; color: #FFFFFF; } .btn-delete:hover { background-color: #DC2626; color: #FFFFFF; } .btn-view:hover { background-color: #000000; color: #FFFFFF; } .loading-td, .error-td, .empty-td { text-align: center; padding: 48px !important; font-family: 'Space Mono', monospace; font-weight: 700; color: #6B7280; } .error-td { color: #DC2626; } /* Modal Form styling */ .admin-form-modal-content { width: 90%; max-width: 780px; max-height: 90vh; overflow-y: auto; padding: 32px; background-color: #FFFFFF; border: 3px solid #000000; box-shadow: 8px 8px 0px #000000; } .admin-form { margin-top: 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 6px; color: #000000; } .form-group input, .form-group select, .form-group textarea { font-family: 'Space Mono', monospace; font-size: 13px; padding: 10px 12px; border: 2px solid #000000; background-color: #F8F6F0; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #8E4485; background-color: #FFFFFF; } .img-preview-box { width: 100%; height: 120px; background-color: #F3F4F6; border: 2px dashed #000000; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .img-preview-box img { max-height: 100px; object-fit: contain; } .preview-text { position: absolute; font-family: 'Space Mono', monospace; font-size: 11px; color: #9CA3AF; } .size-preset-buttons { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .preset-btn { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; padding: 6px 10px; border: 1px solid #000000; background-color: #F3F4F6; cursor: pointer; } .preset-btn.active, .preset-btn:hover { background-color: #8E4485; color: #FFFFFF; } .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 2px solid #000000; } /* Delete Modal */ .delete-modal-content { max-width: 480px; padding: 28px; border: 3px solid #000000; box-shadow: 8px 8px 0px #DC2626; background-color: #FFFFFF; } .text-red { color: #DC2626; } .delete-item-preview { background-color: #FEF2F2; border: 1px solid #FECACA; padding: 14px; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 4px; } .delete-actions { display: flex; justify-content: flex-end; gap: 12px; } /* ── DROP DOWN SHOE BOX CATEGORY MODAL ── */ #categories-modal { perspective: 1200px; } #categories-modal .modal-content, .shoebox-modal-container { position: relative; width: 760px; max-width: 92vw; background: #F2EDE4; border: 4px solid #1A1A1A; box-shadow: 14px 14px 0px #1A1A1A, 0 30px 60px rgba(0, 0, 0, 0.4); padding: 0; overflow: hidden; border-radius: 4px; transform-origin: top center; animation: shoeboxDropDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes shoeboxDropDown { 0% { opacity: 0; transform: translateY(-50px) rotateX(-12deg) scale(0.95); } 100% { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); } } /* Shoebox Top Lid Header */ .shoebox-header-lid { background: #1A1A1A; color: #F2EDE4; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 4px solid #8E4485; position: relative; } .shoebox-lid-brand { display: flex; align-items: center; gap: 12px; } .shoebox-finger-hole-main { width: 32px; height: 18px; border-radius: 12px; background: #000000; border: 2px solid #333333; box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1); display: inline-block; } .shoebox-title-text { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; color: #FFFFFF; } .shoebox-close-btn { background: #8E4485; color: #FFFFFF; border: 2px solid #FFFFFF; padding: 6px 14px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.1em; transition: all 0.2s ease; box-shadow: 2px 2px 0px #000000; } .shoebox-close-btn:hover { background: #FFFFFF; color: #1A1A1A; } /* Container Body with Tissue Paper Texture Effect */ .shoebox-body-tray { padding: 24px; background-color: #F6F2EA; background-image: radial-gradient(#1A1A1A 0.5px, transparent 0.5px), linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 16px 16px, 100% 40px; } /* Grid of Individual Shoe Boxes */ .categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 640px) { .categories-grid { grid-template-columns: 1fr; } } /* Individual Shoe Box Category Card */ .category-card-btn { position: relative; background: #FFFFFF; border: 3px solid #1A1A1A; box-shadow: 5px 5px 0px #1A1A1A; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } /* Lid crease line at top of card */ .category-card-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #1A1A1A; } /* Finger Pull Hole on front of each box card */ .category-card-btn::after { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #1A1A1A; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.4); } .category-card-content { display: flex; flex-direction: column; padding-left: 18px; z-index: 2; } .cat-num { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #8E4485; letter-spacing: 0.1em; margin-bottom: 2px; } .cat-name { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 17px; color: #1A1A1A; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; } .cat-count { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #666666; margin-top: 4px; letter-spacing: 0.05em; } /* Decorative Barcode / Shoe Box Label on Right side of Card */ .shoebox-card-tag { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; opacity: 0.65; transition: opacity 0.2s ease; } .shoebox-barcode-lines { width: 32px; height: 14px; background: repeating-linear-gradient( 90deg, #1A1A1A 0px, #1A1A1A 2px, transparent 2px, transparent 4px, #1A1A1A 4px, #1A1A1A 7px ); } .shoebox-tag-code { font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; color: #1A1A1A; } /* Hover & Active States for Shoe Box Cards */ .category-card-btn:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0px #8E4485; border-color: #1A1A1A; background: #FFFDF9; } .category-card-btn:hover .shoebox-card-tag { opacity: 1; } .category-card-btn:hover .cat-name { color: #8E4485; } .category-card-btn.active { background: #1A1A1A; border-color: #8E4485; box-shadow: 6px 6px 0px #8E4485; } .category-card-btn.active::before { background: #8E4485; } .category-card-btn.active::after { background: #8E4485; box-shadow: inset 0 2px 4px rgba(0,0,0,0.9); } .category-card-btn.active .cat-num { color: #F2EDE4; } .category-card-btn.active .cat-name { color: #FFFFFF; } .category-card-btn.active .cat-count { color: #E2D9CC; } .category-card-btn.active .shoebox-barcode-lines { background: repeating-linear-gradient( 90deg, #FFFFFF 0px, #FFFFFF 2px, transparent 2px, transparent 4px, #FFFFFF 4px, #FFFFFF 7px ); } .category-card-btn.active .shoebox-tag-code { color: #FFFFFF; } /* ── HEADER CATEGORIES DROP DOWN BOX ── */ .categories-dropdown-wrapper { position: relative; display: inline-block; } .categories-dropdown-box { position: absolute; top: calc(100% + 14px); left: 0; width: 600px; max-width: 90vw; background: #F4EFE6; border: 4px solid #1A1A1A; box-shadow: 12px 12px 0px #1A1A1A, 0 25px 50px rgba(0, 0, 0, 0.45); border-radius: 4px; z-index: 1000; display: none; opacity: 0; transform: translateY(-10px); transition: opacity 0.22s ease, transform 0.22s ease; } .categories-dropdown-box.active { display: block; opacity: 1; transform: translateY(0); } .dropdown-shoebox-header { background: #1A1A1A; color: #FFFFFF; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 4px solid #8E4485; } .dropdown-finger-notch { width: 28px; height: 14px; border-radius: 10px; background: #000000; border: 2px solid #333333; box-shadow: inset 0 3px 5px rgba(0,0,0,0.9); } .dropdown-title-text { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #FFFFFF; } .dropdown-categories-list { padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 520px; overflow-y: auto; } @media (max-width: 640px) { .dropdown-categories-list { grid-template-columns: 1fr; } } .dropdown-cat-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #FFFFFF; border: 2px solid #1A1A1A; box-shadow: 3px 3px 0px #1A1A1A; cursor: pointer; text-align: left; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); position: relative; width: 100%; } .dropdown-cat-item::before { content: ""; position: absolute; left: 10px; width: 8px; height: 8px; border-radius: 50%; background: #1A1A1A; opacity: 0.5; } .dd-cat-num { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #8E4485; margin-left: 12px; } .dd-cat-name { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 14px; color: #1A1A1A; letter-spacing: 0.01em; text-transform: uppercase; flex-grow: 1; margin-left: 10px; line-height: 1.2; } .dd-cat-count { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #666666; } .dropdown-cat-item:hover { background: #1A1A1A; border-color: #8E4485; box-shadow: 5px 5px 0px #8E4485; transform: translateY(-3px); } .dropdown-cat-item:hover .dd-cat-num, .dropdown-cat-item:hover .dd-cat-name, .dropdown-cat-item:hover .dd-cat-count { color: #FFFFFF; } .dropdown-cat-item:hover::before { background: #8E4485; opacity: 1; } .dropdown-cat-item.active { background: #1A1A1A; border-color: #8E4485; box-shadow: 4px 4px 0px #8E4485; } .dropdown-cat-item.active .dd-cat-num { color: #8E4485; } .dropdown-cat-item.active .dd-cat-name { color: #FFFFFF; } .dropdown-cat-item.active .dd-cat-count { color: #E2D9CC; } .dropdown-cat-item.active::before { background: #8E4485; opacity: 1; } /* ── 00. COMPREHENSIVE MOBILE VIEW RESPONSIVE DESIGN (SCREENS <= 768px) ── */ @media (max-width: 768px) { /* Header & Navigation Mobile */ .header { padding: 10px 0; } .header-container { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .header-left { display: flex; align-items: center; gap: 8px; } .header-left #btn-shop-all, .header-left .currency-tag { display: none; } .logo, .brand-logo { font-size: 24px; } .header-right { display: flex; align-items: center; gap: 10px; } .nav-text-label { display: none; } .nav-btn, .nav-link-btn { font-size: 10px; letter-spacing: 0.06em; padding: 4px 6px; } /* Header Category Drop Down Box on Mobile */ .categories-dropdown-box { position: fixed; top: 56px; left: 50%; transform: translateX(-50%) translateY(-10px); width: calc(100vw - 24px); max-width: 380px; max-height: 80vh; box-shadow: 6px 6px 0px #1A1A1A, 0 15px 35px rgba(0, 0, 0, 0.5); z-index: 2000; } .categories-dropdown-box.active { transform: translateX(-50%) translateY(0); } .dropdown-categories-list { grid-template-columns: 1fr; max-height: 65vh; padding: 10px; gap: 8px; } .dropdown-cat-item { padding: 12px 14px; } .dd-cat-name { font-size: 13px; } /* Products Catalog Section on Mobile */ .products-section { padding: 60px 16px; } .products-container { grid-template-columns: 1fr; gap: 20px; } .products-sidebar { width: 100%; min-width: 100%; } .sidebar-sticky { position: relative; top: 0; } .sidebar-title { font-size: 24px; margin-bottom: 12px; } .filter-list { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; white-space: nowrap; -webkit-overflow-scrolling: touch; } .filter-btn { flex-shrink: 0; font-size: 10px; padding: 6px 12px; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .product-card { padding: 12px; } .product-img-wrapper { height: 160px; } .product-name { font-size: 14px; } /* Hero Section Mobile */ .hero-overlay { padding: 24px 16px; } .text-overlay h2 { font-size: 44px; } .headline { font-size: 56px; } .overlay-top { /* Must clear the 49px fixed header. The .hero-overlay above contributes 24px, so 36 here puts the row at 60px - the clearance an earlier rule set with padding-top:60px before this later block overrode it. */ padding-top: 36px; font-size: 9px; } .cta-btn { padding: 10px 20px; font-size: 11px; } /* Comic Vault Section Mobile 2-Column Grid */ .comic-vault-section { padding: 48px 12px; } .comic-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .comic-card { padding: 8px; border-width: 3px; box-shadow: 4px 4px 0px #000000; } .comic-badge { font-size: 13px; padding: 2px 8px; top: -10px; left: -6px; border-width: 2px; } .comic-sound-effect { font-size: 11px; padding: 2px 6px; bottom: 6px; right: 6px; } .comic-img-frame { height: 130px; } .comic-card-body { padding: 8px 4px; } .comic-brand-tag { font-size: 8px; } .comic-shoe-name { font-size: 13px; line-height: 1.1; margin: 4px 0; } .comic-price-curr { font-size: 14px; } .comic-add-btn { font-size: 10px; padding: 6px 4px; margin-top: 6px; } .comic-title { font-size: 32px; } /* Modals & Drawers Mobile */ .modal-content, .shoebox-modal-container { width: 95vw; max-height: 90vh; overflow-y: auto; } .categories-grid { grid-template-columns: 1fr; gap: 12px; } .shoebox-body-tray { padding: 14px; } .product-modal-grid { grid-template-columns: 1fr; gap: 20px; } .modal-main-img-wrapper { height: 220px; } .drawer { width: 85vw; max-width: 340px; } } /* ── Reduced motion: keep the chrome + stage, drop the movement ── */ @media (prefers-reduced-motion: reduce) { .stage-glow, .stage-halo, .stage-orbit, .hint-dot { animation: none !important; } .reveal-outer, .reveal-outer .sneaker-img { transition: none; } } /* ── ADMIN INDIVIDUAL SHOE SIZES (EURO) ── */ .shoe-euro-sizes-section { margin-bottom: 12px; background-color: #FAF8F5; border: 2px solid #1A1A1A; padding: 12px; } .shoe-sizes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .shoe-sizes-label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #1A1A1A; } .shoe-sizes-quick-actions { display: flex; gap: 8px; } .size-quick-btn { background: transparent; border: none; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #8E4485; cursor: pointer; padding: 2px 4px; } .size-quick-btn:hover { text-decoration: underline; color: #000000; } .euro-sizes-grid { display: flex; flex-wrap: wrap; gap: 8px; } .euro-size-btn { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; padding: 6px 12px; background-color: #FFFFFF; border: 2px solid #1A1A1A; color: #1A1A1A; cursor: pointer; transition: all 0.15s ease; box-shadow: 2px 2px 0px #1A1A1A; } .euro-size-btn:hover { background-color: #F0EAE1; transform: translateY(-1px); } .euro-size-btn.active { background-color: #8E4485; color: #FFFFFF; border-color: #1A1A1A; box-shadow: 2px 2px 0px #1A1A1A; } /* ── PRODUCT GALLERY & PHOTO MANAGEMENT IN ADMIN ── */ .gallery-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* ── IMAGE LOCK TOGGLE (product editor) ── */ /* Lives in the gallery header, not under the grid: with 6 photos the grid pushed it ~840px down the modal, so nobody found it. */ .img-lock-row { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 2px solid #1A1A1A; background-color: #F8F6F0; cursor: pointer; flex-shrink: 0; transition: background-color 0.15s ease, border-color 0.15s ease; } .img-lock-row:hover { background-color: #EFEBE2; } .img-lock-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: #8E4485; cursor: pointer; } .img-lock-row strong { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #1A1A1A; white-space: nowrap; } /* Locked: the purple the dashboard already uses for source/system accents. */ .img-lock-row:has(input:checked) { border-color: #8E4485; background-color: #F7EFF6; } .img-lock-row:has(input:checked) strong { color: #8E4485; } .img-lock-hint { margin: 0 0 10px 0; font-family: 'Space Mono', monospace; font-size: 10px; line-height: 1.45; color: #6B7280; } .img-lock-hint.is-locked { color: #8E4485; font-weight: 700; } @media (max-width: 768px) { /* Header stacks on a phone; keep the toggle on its own line, full width. */ .gallery-header-row { flex-wrap: wrap; gap: 8px; } .img-lock-row { width: 100%; justify-content: flex-start; } } .add-image-input-group { display: flex; gap: 8px; margin-bottom: 12px; } .add-image-input-group input { flex: 1; } .btn-add-img-url { background-color: #1A1A1A; color: #FFFFFF; border: 2px solid #1A1A1A; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 8px 14px; cursor: pointer; white-space: nowrap; box-shadow: 2px 2px 0px #8E4485; transition: all 0.15s ease; } .btn-add-img-url:hover { background-color: #8E4485; border-color: #1A1A1A; } .product-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; background-color: #FAF8F5; border: 2px dashed #1A1A1A; padding: 12px; min-height: 120px; } .no-gallery-photos { grid-column: 1 / -1; text-align: center; padding: 24px 12px; font-family: 'Space Mono', monospace; font-size: 11px; color: #666666; } .gallery-image-card { position: relative; background-color: #FFFFFF; border: 2px solid #1A1A1A; padding: 6px; box-shadow: 3px 3px 0px #1A1A1A; display: flex; flex-direction: column; align-items: center; cursor: grab; user-select: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .gallery-image-card:active { cursor: grabbing; } .gallery-image-card.dragging { opacity: 0.35; transform: scale(0.95); border: 2px dashed #8E4485; } .gallery-image-card.drag-over { border: 2px solid #8E4485; box-shadow: 0 0 12px rgba(142, 68, 133, 0.6); transform: translateY(-4px); background-color: #F0EAE1; } .drag-handle-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 3px 4px; background-color: #FAF8F5; border-bottom: 1px solid #1A1A1A; } .drag-icon { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; color: #666666; letter-spacing: 0.05em; } .gallery-img-wrapper { position: relative; width: 100%; height: 100px; background-color: #F5F2EC; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px; } .gallery-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; } .primary-badge-tag { background-color: #8E4485; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; padding: 1px 4px; border: 1px solid #1A1A1A; } .btn-remove-img { width: 100%; background-color: #FFF0F0; border: 1px solid #D93838; color: #D93838; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; padding: 4px 6px; cursor: pointer; transition: all 0.15s ease; } .btn-remove-img:hover { background-color: #D93838; color: #FFFFFF; } /* ── 16. STANDALONE FEATURED PRODUCTS ADMIN PAGE ── */ .featured-admin-search-box { background: #FFFFFF; border: 2px solid #000000; box-shadow: 4px 4px 0px #8E4485; padding: 24px; margin-bottom: 32px; position: relative; } .featured-search-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .featured-search-group-full { position: relative; width: 100%; } .featured-search-group-full input { width: 100%; padding: 14px 16px 14px 46px; background-color: #F8F6F0; border: 2px solid #000000; font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 13px; font-weight: 700; outline: none; transition: all 0.2s ease; } .featured-search-group-full input:focus { background-color: #FFFFFF; border-color: #8E4485; box-shadow: 3px 3px 0px #8E4485; } .featured-search-results-page { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border: 2px solid #000000; box-shadow: 6px 6px 0px #000000; max-height: 360px; overflow-y: auto; z-index: 200; display: none; } .featured-search-results-page.active { display: block; } .featured-search-result-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E5E7EB; cursor: pointer; transition: background 0.15s ease; } .featured-search-result-row:hover { background-color: #F3E8F2; } .featured-search-result-left { display: flex; align-items: center; gap: 14px; } .featured-result-thumb { width: 44px; height: 44px; object-fit: contain; object-position: center; background: #FFFFFF; padding: 2px; box-sizing: border-box; border: 1px solid #000000; } .featured-result-name { font-family: 'Space Mono', system-ui, -apple-system, sans-serif, monospace; font-size: 13px; font-weight: 700; } .featured-result-meta { font-size: 11px; color: #6B7280; } .badge-featured-pos { background: #000000; color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; padding: 4px 10px; border: 1px solid #000000; } .reorder-btn-group { display: flex; gap: 6px; } .btn-reorder { background: #FFFFFF; color: #000000; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; padding: 4px 8px; border: 1px solid #000000; cursor: pointer; transition: all 0.15s ease; } .btn-reorder:hover:not(:disabled) { background: #8E4485; color: #FFFFFF; } /* ── 17. BRUTALIST POP-ART SKELETON LOADER ── */ .skeleton-comic-card { pointer-events: none; border: 4px solid #000000; box-shadow: 8px 8px 0px #000000; background: #FFFFFF; } .skeleton-badge { width: 75px; height: 28px; background: #E5E7EB !important; border: 3px solid #000000 !important; box-shadow: 3px 3px 0px #000000 !important; } .skeleton-img-frame { background-color: #F3F4F6 !important; position: relative; overflow: hidden; height: 210px; } .skeleton-shimmer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, rgba(243, 244, 246, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(243, 244, 246, 0) 100% ); animation: skeletonShimmer 1.4s infinite; } @keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skeleton-line { background: #E5E7EB; border: 1px solid #D1D5DB; border-radius: 0px; margin-bottom: 8px; } .skeleton-tag { width: 45%; height: 12px; } .skeleton-title { width: 90%; height: 18px; margin-bottom: 6px; } .skeleton-title-short { width: 65%; height: 18px; margin-bottom: 12px; } .skeleton-price { width: 40%; height: 26px; } .skeleton-btn { width: 100%; height: 42px; background: #E5E7EB; border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; margin-top: 10px; } /* ── USER ACCOUNT DROPDOWN MENU STYLES (TRANSPARENT & PERFECT ALIGNMENT) ── */ .user-account-wrapper { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 0; vertical-align: middle; height: auto; } .user-account-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent !important; color: #666666 !important; border: 1px solid #CCCCCC; padding: 5px 12px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 9999px; cursor: pointer; line-height: 1; box-shadow: none !important; transition: all 0.2s ease; vertical-align: middle; } .user-account-pill:hover { color: #222222 !important; border-color: #888888; background: rgba(0, 0, 0, 0.05) !important; transform: translateY(-1px); } /* In dark hero overlay (index.html), use light silver gray border & text */ .hero-overlay .user-account-pill { border-color: rgba(255, 255, 255, 0.25); color: #AAAAAA !important; } .hero-overlay .user-account-pill:hover { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1) !important; } .user-avatar-badge { width: 18px; height: 18px; border-radius: 50%; background: #666666; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; line-height: 1; transition: background 0.2s ease; } .user-account-pill:hover .user-avatar-badge { background: #222222; } .hero-overlay .user-avatar-badge { background: #AAAAAA; color: #1E1E1E; } .hero-overlay .user-account-pill:hover .user-avatar-badge { background: #FFFFFF; color: #1E1E1E; } .user-pill-arrow { font-size: 8px; transition: transform 0.2s ease; margin-left: 2px; } .user-account-wrapper.open .user-pill-arrow { transform: rotate(180deg); } /* Dropdown Menu Container (Light Chalk Theme) */ .user-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; background: #F4F3EF; color: #1E1E1E; border: 1px solid #1E1E1E; box-shadow: 4px 10px 24px rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 14px; z-index: 3000; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .user-account-wrapper.open .user-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .user-dropdown-header { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #E2E0D8; } .user-dropdown-name { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #1E1E1E; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-dropdown-email { font-family: 'Space Mono', monospace; font-size: 10px; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; } .user-role-badge { display: inline-block; padding: 3px 8px; background: #1E1E1E; color: #FFFFFF; border: 1px solid #1E1E1E; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; border-radius: 4px; } .user-dropdown-items { display: flex; flex-direction: column; gap: 4px; } .user-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: 6px; color: #1E1E1E; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; transition: all 0.15s ease; } .user-dropdown-item:hover { background: #E6E4DD; color: #000000; } .user-dropdown-item.item-danger { color: #D32F2F; } .user-dropdown-item.item-danger:hover { background: rgba(211, 47, 47, 0.08); color: #B71C1C; } /* ── 17. VINTAGE NEWSPAPER GAZETTE SECTION STYLING ── */ .vintage-gazette-section { background-color: #F2EBD9; color: #1E1E1E; padding: 80px 20px; position: relative; border-top: 4px double #1E1E1E; border-bottom: 4px double #1E1E1E; overflow: hidden; font-family: 'Space Mono', monospace; } .gazette-container { max-width: 1300px; margin: 0 auto; } .gazette-masthead { text-align: center; margin-bottom: 48px; border-bottom: 3px double #1E1E1E; padding-bottom: 20px; } .gazette-dateline { display: flex; justify-content: space-between; align-items: center; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; border-top: 1px solid #1E1E1E; border-bottom: 1px solid #1E1E1E; padding: 6px 12px; margin-bottom: 16px; text-transform: uppercase; color: #3A352B; } .gazette-title { font-family: 'Times New Roman', 'Georgia', serif; font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: #1A1713; margin: 10px 0; line-height: 1; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8); } .gazette-tagline-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1E1E1E; padding-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #4A4337; flex-wrap: wrap; gap: 8px; } .gazette-sub-tag { background: #1E1E1E; color: #F2EBD9; padding: 3px 8px; } .gazette-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1024px) { .gazette-cards-grid { grid-template-columns: repeat(2, 1fr); } } .gazette-card { background: #EBE3D0; border: 1px solid #2B261F; box-shadow: 4px 4px 0px #2B261F; padding: 16px; display: flex; flex-direction: column; position: relative; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .gazette-card:hover { transform: translateY(-4px); box-shadow: 7px 7px 0px #2B261F; background: #E5DCB6; } .gazette-stamp-badge { position: absolute; top: 10px; right: 10px; background: #8E241E; color: #F2EBD9; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; padding: 2px 6px; border: 1px dashed #F2EBD9; letter-spacing: 0.08em; transform: rotate(3deg); z-index: 2; } .gazette-column-header { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; color: #665D4F; border-bottom: 1px solid #2B261F; padding-bottom: 4px; margin-bottom: 10px; letter-spacing: 0.08em; } .gazette-img-frame { width: 100%; height: 220px; background: #DDD5C2; border: 1px solid #2B261F; overflow: hidden; position: relative; margin-bottom: 14px; /* Centre and pad like the storefront cards - object-fit:cover cropped the product out of frame on these portrait-ish product shots. */ display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; } .gazette-shoe-img { max-width: 92%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; /* Product shots sit on white; multiply drops it into the newsprint stock. */ mix-blend-mode: multiply; filter: sepia(0.2) contrast(1.05); transition: transform 0.4s ease, filter 0.4s ease; } .gazette-card:hover .gazette-shoe-img { transform: scale(1.06); filter: sepia(0) contrast(1.1); } .gazette-card-body { display: flex; flex-direction: column; flex: 1; } .gazette-headline { font-family: 'Times New Roman', 'Georgia', serif; font-size: 15px; font-weight: 900; color: #1A1713; line-height: 1.2; margin-bottom: 6px; text-transform: uppercase; } .gazette-article-snippet { font-family: 'Space Mono', monospace; font-size: 10px; color: #554D40; line-height: 1.4; margin-bottom: 12px; flex: 1; } .gazette-price-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed #2B261F; padding-top: 10px; margin-bottom: 12px; } .gazette-price-tag { font-family: 'Space Mono', monospace; font-size: 15px; font-weight: 800; color: #1A1713; } .gazette-add-btn { width: 100%; background: #1A1713; color: #F2EBD9; border: 1px solid #1A1713; padding: 10px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; } .gazette-add-btn:hover { background: #8E241E; border-color: #8E241E; color: #FFFFFF; } .gazette-footer-cta { text-align: center; margin-top: 40px; } .gazette-cta-btn { display: inline-block; background: transparent; color: #1A1713; border: 2px solid #1A1713; padding: 12px 24px; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: all 0.2s ease; } .gazette-cta-btn:hover { background: #1A1713; color: #F2EBD9; box-shadow: 4px 4px 0px #8E241E; } /* Mobile gazette — mirrors the comic vault treatment: two columns, tighter frame, masthead scaled down so it stops eating the whole first screen. */ @media (max-width: 768px) { .vintage-gazette-section { padding: 70px 10px 40px 10px; box-sizing: border-box; } .gazette-container { max-width: 100%; padding: 0 2px; box-sizing: border-box; overflow: hidden; } .gazette-masthead { margin-bottom: 24px; padding-bottom: 14px; } /* Three columns of space-between wrapped each label onto two lines. Let them flow as one centred run instead. */ .gazette-dateline { justify-content: center; flex-wrap: wrap; gap: 2px 10px; font-size: 9px; letter-spacing: 0.04em; padding: 5px 6px; margin-bottom: 10px; } .gazette-title { font-size: clamp(26px, 8vw, 40px); letter-spacing: 0.02em; margin: 8px 0; } .gazette-tagline-bar { justify-content: center; text-align: center; font-size: 9px; letter-spacing: 0.03em; gap: 6px; padding-top: 6px; line-height: 1.3; } .gazette-sub-tag { padding: 3px 6px; } .gazette-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; box-sizing: border-box; } .gazette-card { padding: 10px; box-shadow: 3px 3px 0px #2B261F; transform: none !important; width: 100%; /* Grid items default to min-width:auto, so a wide child can push the column past its share of the row. */ min-width: 0; box-sizing: border-box; } .gazette-stamp-badge { top: 6px; right: 6px; font-size: 7px; padding: 2px 4px; letter-spacing: 0.04em; } /* The stamp badge is absolutely positioned over this row's right end; at phone width it landed on top of the text. Reserve room and let the label wrap - keeping it on one line makes the card's min-content width wider than its grid column, which the section's overflow:hidden then clips. */ .gazette-column-header { font-size: 7px; letter-spacing: 0.04em; padding-bottom: 3px; padding-right: 58px; margin-bottom: 8px; line-height: 1.25; } .gazette-img-frame { height: 130px; padding: 8px 4px; margin-bottom: 10px; } .gazette-headline { font-size: 13px; line-height: 1.15; min-height: 30px; margin-bottom: 4px; word-break: break-word; overflow-wrap: break-word; } .gazette-article-snippet { font-size: 9px; line-height: 1.35; margin-bottom: 8px; } .gazette-price-row { padding-top: 8px; margin-bottom: 8px; } .gazette-price-tag { font-size: 14px; } .gazette-add-btn { font-size: 10px; padding: 8px 4px; letter-spacing: 0.03em; } .gazette-footer-cta { margin-top: 28px; } .gazette-cta-btn { font-size: 11px; padding: 10px 16px; max-width: 90%; } } @media (max-width: 380px) { .gazette-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .gazette-card { padding: 8px; } .gazette-img-frame { height: 112px; } .gazette-headline { font-size: 12px; min-height: 28px; } .gazette-price-tag { font-size: 13px; } .gazette-add-btn { padding: 7px 2px; } } /* ── ADMIN INSPECTOR (product page, owner account only) ── */ .admin-inspector { margin-top: 28px; background: #FFFFFF; border: 1px solid #1E1E1E; box-shadow: 5px 5px 0px #1E1E1E; } .admin-inspector[hidden] { display: none; } /* Header bar */ .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; background: #1E1E1E; color: #F5F2EC; } .ai-title { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; } .ai-edit { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #1E1E1E; background: #F5F2EC; text-decoration: none; border: 1px solid #F5F2EC; padding: 7px 13px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .ai-edit:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0px rgba(245, 242, 235, 0.45); } .ai-edit:active { transform: translate(0, 0); box-shadow: none; } .ai-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; } /* Status tags */ .ai-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ai-tag { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; padding: 5px 9px; border: 1px solid #1E1E1E; background: #1E1E1E; color: #F5F2EC; white-space: nowrap; } .ai-tag-on { background: #1E1E1E; color: #F5F2EC; } .ai-tag-off { background: transparent; color: rgba(30, 30, 30, 0.45); border-color: rgba(30, 30, 30, 0.25); } /* Price */ .ai-price { padding: 14px 16px; background: #F5F2EC; border: 1px solid rgba(30, 30, 30, 0.14); } .ai-price-now { display: block; font-family: 'Space Mono', monospace; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: #1E1E1E; } /* Field grid */ .ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(30, 30, 30, 0.13); border: 1px solid rgba(30, 30, 30, 0.13); } .ai-cell { background: #FFFFFF; padding: 11px 13px; min-width: 0; } .ai-cell-wide { grid-column: 1 / -1; } .ai-cell-label { display: block; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.13em; color: rgba(30, 30, 30, 0.45); margin-bottom: 5px; } .ai-cell-value { margin: 0; font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.5; color: #1E1E1E; word-break: break-word; } .ai-cell-blank { background: #FFFFFF; } .ai-note { display: block; margin-top: 4px; font-family: 'Space Mono', monospace; font-size: 10px; font-style: normal; color: rgba(30, 30, 30, 0.45); } /* Labelled blocks */ .ai-block { display: flex; flex-direction: column; gap: 9px; } .ai-block-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.13em; color: rgba(30, 30, 30, 0.45); padding-bottom: 7px; border-bottom: 1px solid rgba(30, 30, 30, 0.13); } .ai-block-label em { font-style: normal; margin-left: 4px; padding: 1px 5px; background: rgba(30, 30, 30, 0.08); color: rgba(30, 30, 30, 0.6); } .ai-chips { display: flex; flex-wrap: wrap; gap: 5px; } .ai-chip { font-family: 'Space Mono', monospace; font-size: 11px; padding: 5px 9px; border: 1px solid rgba(30, 30, 30, 0.25); color: #1E1E1E; } /* Gallery strip */ .ai-thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .ai-thumb { position: relative; width: 46px; height: 46px; border: 1px solid rgba(30, 30, 30, 0.2); background: #F5F2EC; overflow: hidden; flex: 0 0 auto; } .ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-thumb.is-primary { border-color: #1E1E1E; box-shadow: 0 0 0 1px #1E1E1E; } .ai-thumb.is-broken img { display: none; } .ai-thumb.is-broken::after { content: "404"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 9px; color: #A61B1B; } .ai-link { font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.6; color: #1E1E1E; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .ai-link:hover { color: #A61B1B; } .ai-desc { font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.65; color: rgba(30, 30, 30, 0.75); } .ai-empty { font-family: 'Space Mono', monospace; font-size: 11px; color: rgba(30, 30, 30, 0.4); } @media (max-width: 640px) { .ai-grid { grid-template-columns: minmax(0, 1fr); } .ai-price-now { font-size: 22px; } } /* ── SEARCH RESULTS ── */ .search-count { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: #8B7D6B; padding: 4px 0 18px; border-bottom: 1px solid rgba(30, 30, 30, 0.12); margin-bottom: 20px; } .search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 20px; } .search-result-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 10px; background: #FFFFFF; border: 1px solid rgba(30, 30, 30, 0.14); cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .search-result-card:hover { border-color: #1E1E1E; transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #1E1E1E; } .search-result-img { flex: 0 0 auto; width: 72px; height: 72px; background: #F5F2EC; border: 1px solid rgba(30, 30, 30, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; } .search-result-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .search-result-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .search-result-meta { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: rgba(30, 30, 30, 0.45); text-transform: uppercase; } .search-result-name { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: #1E1E1E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result-price { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #1E1E1E; } @media (max-width: 700px) { .search-grid { grid-template-columns: 1fr; } } /* ── SEARCH RESULTS BANNER (shop-all as a results page) ── */ .search-results-banner { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid #1E1E1E; } .search-results-banner[hidden] { display: none; } .srb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .srb-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: rgba(30, 30, 30, 0.5); } .srb-clear { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: #1E1E1E; background: transparent; border: 1px solid rgba(30, 30, 30, 0.3); padding: 5px 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .srb-clear:hover { background: #1E1E1E; border-color: #1E1E1E; color: #F5F2EC; } .srb-query { font-family: 'Outfit', sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #1E1E1E; word-break: break-word; } .srb-count { margin-top: 8px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(30, 30, 30, 0.55); } /* ══════════════════════════════════════════════════════════════ MOBILE REFINEMENTS ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Flex children default to min-width:auto and refuse to shrink below their content, which pushed the whole header (and page) wider than the screen. */ .header-container > .header-left, .header-container > .header-center, .header-container > .header-right { min-width: 0; } .header-right { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; } .header-right button { white-space: nowrap; flex-shrink: 0; } /* The bag icon carries the meaning; the word does not survive at this width. */ #bag-label, .nav-text-label { display: none; } #bag-badge, #fav-badge { display: inline; font-size: 10px; } .nav-login-link-header { font-size: 10px; padding: 5px 8px; } /* Product page: the back link is the only thing on the left and it must yield rather than force the header wide. */ .product-page-header .header-left, .header-left .nav-link-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Card meta ran together as "001 / 500 PAIRSFOOTWEAR". */ .product-meta { gap: 8px; } .product-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 640px) { /* Admin product editor: two form columns do not fit, and the fixed modal padding pushed inputs 43px past the viewport. */ .form-grid { grid-template-columns: 1fr; gap: 12px; } .admin-form-modal-content { width: 94vw; max-width: 94vw; padding: 16px; } .admin-form-modal-content .modal-header { flex-wrap: wrap; gap: 8px; } .form-actions { flex-direction: column-reverse; gap: 10px; } .form-actions button { width: 100%; } .add-image-input-group { flex-direction: column; gap: 8px; } .add-image-input-group input, .add-image-input-group .btn-add-img-url { width: 100%; } } @media (max-width: 768px) { /* A fixed 38px title could not wrap far enough to fit, so it set the document width and dragged the fixed header and overlays out with it. */ .admin-title { font-size: clamp(20px, 6vw, 28px); } .admin-subtitle { font-size: 10px; } /* Drop the account name from the logout button; it is what pushed the admin header past the viewport. The title attribute still carries it. */ .logout-user { display: none; } .admin-title-row, .admin-hero-actions { gap: 12px; } /* Admin header: keep the three controls on one row and let the long logout label truncate rather than push the page wide. */ .admin-header .header-container { gap: 8px; } .admin-header .header-container > * { min-width: 0; } .admin-header .nav-link-btn, .admin-header .btn-admin-logout, #btn-admin-logout { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } /* min-width:300px is wider than a 320px screen once padding is counted. */ .admin-search-wrapper { min-width: 0; width: 100%; } /* Table scrolls inside its wrapper; make that obvious on touch. */ .table-responsive { -webkit-overflow-scrolling: touch; } .admin-tab-view { min-width: 0; } } /* ── ADMIN TABLES ON MOBILE ────────────────────────────────── Eight columns cannot fit a phone, and side-scrolling a table hides the ACTIONS column exactly when you need it. Below 768px every row becomes a stacked card: the header row is dropped and each cell carries its own label from the data-label attribute admin.js writes. Applies to all three tables - catalog, featured and orders. */ @media (max-width: 768px) { .table-responsive { overflow-x: visible; border: none; box-shadow: none; background: transparent; margin-bottom: 16px; } .admin-products-table, .admin-products-table tbody, .admin-products-table tr, .admin-products-table td { display: block; width: 100%; box-sizing: border-box; } /* Labels live on the cells now. */ .admin-products-table thead { display: none; } .admin-products-table tr.admin-product-row { background: #FFFFFF; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; margin-bottom: 14px; padding: 4px 0; } .admin-products-table tr:hover { background-color: #FFFFFF; } /* The label is positioned out of flow rather than being a flex item: cells hold several stacked divs (id + edition, name + badge, address + pin) and as flex items those lined up side by side and shot past the viewport. */ .admin-products-table td { position: relative; padding: 9px 12px 9px 38%; border-bottom: 1px solid #EFEDE8; font-size: 12px; text-align: left; } .admin-products-table tr.admin-product-row td:last-child { border-bottom: none; } .admin-products-table td::before { content: attr(data-label); position: absolute; left: 12px; top: 11px; width: 32%; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; color: #6B6459; } /* Cells with no label (colspan status rows) keep the full width. */ .admin-products-table td:not([data-label])::before { content: none; } .admin-products-table td.loading-td, .admin-products-table td.error-td, .admin-products-table td.empty-td { display: block; /* Beats the 48px !important on the base rule, which is desktop breathing room that reads as a mostly-empty screen on a phone. */ padding: 22px 14px !important; text-align: center; border: 2px solid #000000; background: #FFFFFF; } /* A thumbnail and three bracketed buttons say what they are; labelling them only costs a third of the row. */ .admin-products-table td.td-img::before, .admin-products-table td.td-actions::before { content: none; } .admin-products-table td.td-img, .admin-products-table td.td-actions, .admin-products-table td:not([data-label]) { padding-left: 12px; } .admin-products-table td.td-img { background: #FAF8F3; } .admin-thumb-img, .table-img-preview { width: 46px; height: 46px; max-width: 46px; max-height: 46px; } /* Long values need the room; the label column stays fixed. */ .admin-products-table td.td-name .product-title-text { font-size: 13px; line-height: 1.25; word-break: break-word; } .admin-products-table td.td-sizes .sizes-container, .admin-products-table td[data-label="REORDER"] .reorder-btn-group { display: flex; flex-wrap: wrap; gap: 6px; } .admin-products-table td.td-actions { display: flex; gap: 6px; background: #FAF8F3; } .admin-products-table td.td-actions .action-btn { flex: 1 1 0; min-width: 0; font-size: 10px; padding: 8px 4px; white-space: nowrap; } /* Addresses and item lists are paragraphs, not values - give them the whole card width with the label sitting above. */ .admin-products-table td.ord-address, .admin-products-table td[data-label="ITEMS"] { padding: 26px 12px 9px 12px; } .admin-products-table td.ord-address::before, .admin-products-table td[data-label="ITEMS"]::before { width: auto; } /* Title and count stacked - side by side they wrapped mid-bracket. */ .admin-inventory-header { flex-direction: column; align-items: flex-start; gap: 4px; } .table-title { font-size: 12px; line-height: 1.3; } .inventory-count { font-size: 11px; } .admin-toolbar { flex-direction: column; align-items: stretch; gap: 12px; } .admin-category-pills { gap: 6px; } .admin-pill { font-size: 10px; padding: 7px 12px; } .admin-add-product-row .primary-btn-brutalist { width: 100%; } .pagination-wrapper { flex-direction: column; gap: 10px; align-items: center; } .orders-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .orders-summary { flex-wrap: wrap; gap: 8px; } } @media (max-width: 768px) { /* Signed in, the username pill ate ~188px of a 375px header and crowded the search and bag icons. The avatar initial carries identity; the full name stays in the dropdown that opens beneath it. */ .user-pill-name { display: none; } .user-account-pill { gap: 6px; padding: 5px 8px; flex-shrink: 0; } .user-pill-arrow { font-size: 8px; } .user-avatar-badge { width: 24px; height: 24px; font-size: 11px; flex-shrink: 0; } /* The dropdown is anchored to a now-narrow pill, so pin it to the right edge and give it a usable width instead of inheriting the pill's. */ .user-dropdown-menu { right: 0; left: auto; min-width: 210px; } /* A 150px scroll box nested inside an accordion inside the page meant the first brand was always half-cut. Let the list size to its content. */ .brand-filter-list { max-height: none; overflow-y: visible; } } /* ══════════════════════════════════════════════════════════════ CHECKOUT PAGE ══════════════════════════════════════════════════════════════ */ .checkout-main { padding: 120px 24px 80px; min-height: 70vh; } .checkout-container { max-width: 1180px; margin: 0 auto; } .checkout-intro { margin-bottom: 40px; max-width: 620px; } .checkout-eyebrow { display: block; font-size: 10px; letter-spacing: 0.18em; color: #8B7D6B; margin-bottom: 10px; } .checkout-title { font-family: 'Syne', system-ui, sans-serif; font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #1E1E1E; margin-bottom: 12px; } .checkout-lede { font-size: 14px; line-height: 1.6; color: rgba(30, 30, 30, 0.7); } .checkout-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 40px; align-items: start; } .checkout-form-col, .checkout-summary-col { min-width: 0; } /* ── Form ── */ .checkout-fieldset { border: 1px solid #1E1E1E; background: #FFFFFF; box-shadow: 4px 4px 0px #1E1E1E; padding: 20px; margin-bottom: 24px; } .checkout-legend { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding: 0 8px; color: #1E1E1E; } .co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .co-group { display: flex; flex-direction: column; margin-bottom: 16px; min-width: 0; } .co-group:last-child { margin-bottom: 0; } .co-group label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: rgba(30, 30, 30, 0.6); margin-bottom: 6px; } .co-group input, .co-group textarea, .co-group select { font-family: 'Space Mono', monospace; font-size: 13px; color: #1E1E1E; background: #F5F2EC; border: 1px solid rgba(30, 30, 30, 0.25); padding: 11px 12px; width: 100%; transition: border-color 0.15s ease, background 0.15s ease; } .co-group textarea { resize: vertical; line-height: 1.5; } .co-group input:focus, .co-group textarea:focus, .co-group select:focus { outline: none; border-color: #1E1E1E; background: #FFFFFF; } .co-group input.is-invalid, .co-group textarea.is-invalid { border-color: #A61B1B; background: #FFF6F6; } .co-error { font-family: 'Space Mono', monospace; font-size: 10px; line-height: 1.4; color: #A61B1B; min-height: 13px; margin-top: 4px; } /* ── Send action ── */ .checkout-actions { margin-top: 4px; } .checkout-send-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: #FFFFFF; background: #1FA855; border: 1px solid #1E1E1E; box-shadow: 4px 4px 0px #1E1E1E; padding: 17px 20px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease; } .checkout-send-btn:hover:not(:disabled) { background: #17914a; transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #1E1E1E; } .checkout-send-btn:active:not(:disabled) { transform: translate(0, 0); box-shadow: 2px 2px 0px #1E1E1E; } .checkout-send-btn:disabled { background: #B9B4AA; cursor: not-allowed; box-shadow: 4px 4px 0px rgba(30, 30, 30, 0.35); } .wa-icon { width: 20px; height: 20px; flex-shrink: 0; } .checkout-disclaimer { margin-top: 12px; font-size: 10px; line-height: 1.5; letter-spacing: 0.08em; color: rgba(30, 30, 30, 0.5); text-align: center; } /* ── Order summary ── */ .checkout-summary { position: sticky; top: 100px; background: #FFFFFF; border: 1px solid #1E1E1E; box-shadow: 4px 4px 0px #1E1E1E; padding: 20px; } .cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #1E1E1E; } .cs-title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; } .cs-count { font-size: 10px; color: rgba(30, 30, 30, 0.5); } .cs-items { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; max-height: 40vh; overflow-y: auto; } .cs-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; } .cs-item-img { width: 52px; height: 52px; background: #F5F2EC; border: 1px solid rgba(30, 30, 30, 0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cs-item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .cs-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cs-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: #1E1E1E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cs-item-meta { font-size: 9px; letter-spacing: 0.08em; color: rgba(30, 30, 30, 0.5); } .cs-item-price { font-size: 12px; font-weight: 700; white-space: nowrap; } .cs-empty { font-size: 11px; color: rgba(30, 30, 30, 0.45); text-align: center; padding: 24px 0; } .cs-totals { border-top: 1px solid rgba(30, 30, 30, 0.15); padding-top: 14px; } .cs-row { display: flex; justify-content: space-between; gap: 10px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; padding: 5px 0; color: #1E1E1E; } .cs-row-muted { color: rgba(30, 30, 30, 0.5); } .cs-row-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid #1E1E1E; font-size: 15px; font-weight: 700; } .cs-back-link { display: block; margin-top: 16px; font-size: 10px; letter-spacing: 0.1em; color: rgba(30, 30, 30, 0.6); text-decoration: none; text-align: center; } .cs-back-link:hover { color: #1E1E1E; text-decoration: underline; } .checkout-step-tag { color: rgba(30, 30, 30, 0.5) !important; cursor: default; } @media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; gap: 28px; } /* Summary first on small screens: people want to see what they are buying before they start typing an address. */ .checkout-summary-col { order: -1; } .checkout-summary { position: static; } .cs-items { max-height: none; } } @media (max-width: 640px) { .checkout-main { padding: 90px 16px 60px; } .co-row { grid-template-columns: 1fr; gap: 0; } .checkout-fieldset { padding: 16px; } .checkout-send-btn { font-size: 12px; padding: 15px 14px; } } /* ── ADMIN ORDERS BOOK ── */ .orders-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .orders-filters { display: flex; gap: 8px; flex-wrap: wrap; } .orders-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .orders-stat { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 7px 12px; border: 1px solid #1E1E1E; background: #FFFFFF; color: #1E1E1E; } .orders-stat-warn { border-color: #A61B1B; color: #A61B1B; } .orders-stat-value { background: #1E1E1E; color: #F5F2EC; } .admin-orders-table td { vertical-align: top; font-size: 12px; } .order-row.is-paid { background: #FAFDF9; } .ord-id { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #1E1E1E; } .ord-date, .ord-sub { font-family: 'Space Mono', monospace; font-size: 10px; color: rgba(30, 30, 30, 0.55); margin-top: 2px; } .ord-sub a { color: rgba(30, 30, 30, 0.75); text-decoration: none; } .ord-sub a:hover { color: #1E1E1E; text-decoration: underline; } .ord-sheet-warn { margin-top: 4px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.06em; color: #A61B1B; } .ord-name { font-weight: 700; font-size: 13px; color: #1E1E1E; } .ord-address { max-width: 230px; line-height: 1.45; } .ord-note { margin-top: 4px; padding-left: 8px; border-left: 2px solid rgba(30, 30, 30, 0.2); font-family: 'Space Mono', monospace; font-size: 10px; color: rgba(30, 30, 30, 0.6); } .ord-item { padding: 4px 0; border-bottom: 1px dashed rgba(30, 30, 30, 0.12); max-width: 250px; } .ord-item:last-child { border-bottom: none; } .ord-item-name { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: #1E1E1E; } .ord-item-meta { display: block; font-family: 'Space Mono', monospace; font-size: 9px; color: rgba(30, 30, 30, 0.5); margin-top: 1px; } .ord-total { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; white-space: nowrap; } .pay-badge { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 9px; margin-bottom: 8px; border: 1px solid #1E1E1E; } .pay-paid { background: #1FA855; border-color: #17914a; color: #FFFFFF; } .pay-unpaid { background: transparent; border-color: #A61B1B; color: #A61B1B; } .btn-toggle-paid { display: block; white-space: nowrap; } @media (max-width: 768px) { .orders-toolbar { flex-direction: column; align-items: stretch; } .orders-summary { justify-content: space-between; } .ord-address, .ord-item { max-width: none; } } .btn-remove-order { display: block; margin-top: 6px; white-space: nowrap; color: #A61B1B; border-color: rgba(166, 27, 27, 0.4); } .btn-remove-order:hover { background: #A61B1B; border-color: #A61B1B; color: #FFFFFF; } /* Armed state: one more click actually removes it. */ .btn-remove-order.is-armed { background: #A61B1B; border-color: #A61B1B; color: #FFFFFF; font-weight: 700; } /* ── 18. TERMS & CONDITIONS PAGE ── */ .terms-main { padding: 90px 20px 80px; background-color: #F8F6F0; min-height: 70vh; } .terms-container { max-width: 860px; margin: 0 auto; } .terms-intro { border-bottom: 3px double #1E1E1E; padding-bottom: 28px; margin-bottom: 32px; } .terms-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: #8E4485; margin-bottom: 12px; } .terms-title { font-family: 'Syne', 'Outfit', sans-serif; font-size: clamp(30px, 6vw, 54px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.02; margin: 0 0 16px; color: #1A1A1A; } .terms-lede { font-size: 15px; line-height: 1.65; color: #4A4337; max-width: 62ch; margin: 0; } /* Jump list */ .terms-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; } .terms-toc-link { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 2px solid #1A1A1A; background-color: #FFFFFF; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #1A1A1A; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .terms-toc-link span { color: #8E4485; } .terms-toc-link:hover { background-color: #1A1A1A; color: #F8F6F0; } .terms-toc-link:hover span { color: #E5B8DF; } /* Sections */ .terms-section { position: relative; padding: 26px 0 28px; border-top: 1px solid #D8D2C4; scroll-margin-top: 70px; /* clears the fixed header on anchor jumps */ } .terms-num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: #8E4485; margin-bottom: 6px; } .terms-heading { font-family: 'Outfit', sans-serif; font-size: clamp(19px, 3.2vw, 26px); font-weight: 800; letter-spacing: -0.01em; color: #1A1A1A; margin: 0 0 14px; } .terms-subheading { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1A1A1A; margin: 24px 0 10px; } .terms-section p { font-size: 15px; line-height: 1.7; color: #3A352B; margin: 0 0 12px; max-width: 68ch; } .terms-list { margin: 0 0 14px; padding-left: 20px; max-width: 68ch; } .terms-list li { font-size: 15px; line-height: 1.7; color: #3A352B; margin-bottom: 7px; } .terms-list li::marker { color: #8E4485; } .terms-note { font-size: 14px !important; color: #554D40 !important; } .terms-link { color: #8E4485; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .terms-link:hover { color: #1A1A1A; } /* Callouts: CRITICAL / WARNING / POLICY */ .terms-callout { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; padding: 14px 16px; border: 2px solid #1A1A1A; background-color: #FFFFFF; box-shadow: 4px 4px 0px #1A1A1A; } .terms-callout p { margin: 0; font-weight: 600; } .terms-callout-tag { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; padding: 3px 8px; background-color: #1A1A1A; color: #FFFFFF; } .terms-callout.is-critical { border-color: #B3261E; box-shadow: 4px 4px 0px #B3261E; } .terms-callout.is-critical .terms-callout-tag { background-color: #B3261E; } .terms-callout.is-warning { border-color: #B26B00; box-shadow: 4px 4px 0px #B26B00; } .terms-callout.is-warning .terms-callout-tag { background-color: #B26B00; } .terms-callout.is-policy { border-color: #8E4485; box-shadow: 4px 4px 0px #8E4485; } .terms-callout.is-policy .terms-callout-tag { background-color: #8E4485; } /* COD worked example */ .terms-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 18px; } .terms-calc-col { border: 2px solid #1A1A1A; background-color: #FFFFFF; padding: 14px; } .terms-calc-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #8E4485; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #D8D2C4; } .terms-calc-list { margin: 0; } .terms-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; } .terms-calc-row dt { font-size: 14px; color: #3A352B; } .terms-calc-row dd { margin: 0; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: #1A1A1A; white-space: nowrap; } .terms-calc-row.is-total { border-top: 1px dashed #1A1A1A; margin-top: 4px; padding-top: 9px; } .terms-calc-row.is-total dt { font-weight: 700; color: #1A1A1A; } .terms-calc-row.is-total dd { color: #8E4485; font-size: 16px; } .terms-footnote { margin-top: 36px; padding-top: 22px; border-top: 3px double #1E1E1E; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.7; color: #554D40; } @media (max-width: 768px) { .terms-main { padding: 76px 14px 56px; } /* "CONDITIONS" is a single unbreakable word: at the old 30px clamp minimum it was 31px wider than a 320px screen and dragged the whole page into a horizontal scroll. */ .terms-title { font-size: clamp(24px, 7.5vw, 42px); overflow-wrap: break-word; } .terms-toc { gap: 6px; margin-bottom: 32px; } .terms-toc-link { font-size: 10px; padding: 6px 9px; } /* Two side-by-side money columns do not fit a phone. */ .terms-calc { grid-template-columns: 1fr; } .terms-section p, .terms-list li { font-size: 14px; } .terms-callout { box-shadow: 3px 3px 0px #1A1A1A; } .terms-callout.is-critical { box-shadow: 3px 3px 0px #B3261E; } .terms-callout.is-warning { box-shadow: 3px 3px 0px #B26B00; } .terms-callout.is-policy { box-shadow: 3px 3px 0px #8E4485; } } /* ── 19. MOBILE TOUCH TARGETS ────────────────────────────────── Measured at 375px before this block: the bag and search icon buttons were 20x24px, the add-to-bag CTAs 26px tall, footer links 18px. Comfortable minimum for a finger is ~40px. These rules only add padding / min-height, so nothing moves on desktop and the visual identity is unchanged. */ @media (max-width: 768px) { /* Keep the bar the same height as before: the 40px targets below replace the header's vertical padding rather than adding to it. .overlay-top on the hero clears a 49px header by design, and a taller bar covered it. */ .header { padding: 4px 0; } /* Header icon buttons — the smallest targets on the site. */ .bag-btn, .icon-link-btn, .nav-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 6px 8px; } /* The wordmark is a link home; give it a real target without resizing it. */ .logo, .brand-logo { display: inline-flex; align-items: center; min-height: 40px; } /* Primary product actions. */ .add-to-bag-btn, .comic-add-btn, .gazette-add-btn, .cta-btn, .comic-cta-btn, .gazette-cta-btn, .drawer-close, .btn-checkout, .primary-btn-brutalist, .secondary-btn-brutalist, .danger-btn-brutalist { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Text links in nav strips and footers: pad the row rather than the font. */ .subnav-link, .footer-link, .terms-toc-link, .cs-back-link, .nav-link-btn { display: inline-flex; align-items: center; min-height: 40px; } /* Footer columns keep their rhythm now that each link is taller. */ .footer-col .footer-link { padding: 2px 0; } /* Size chips are chosen by tapping; 28px squares are fiddly. */ .size-chip, .admin-size-tag, .euro-size-btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; } /* Favourite toggle sits over the card corner — keep it thumb-sized. */ .fav-card-btn { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; } }