/* nerochocolate · custom UI overrides */ /* =========================================================== * Category accent system * One source of truth: --cat-accent (line/text) + --cat-tint (callout bg) * Default = chocolate brand. Per-category overrides set on * by data-loader.js (products page + product-detail SPA). * Used by: .nero-cat-head bar/eyebrow, .nero-cat-note, .nero-pd-cat-line * =========================================================== */ :root { --cat-accent: #b17f4a; --cat-accent-soft: rgba(177, 127, 74, 0.35); --cat-tint: rgba(177, 127, 74, 0.08); --cat-tint-strong: rgba(177, 127, 74, 0.18); } html[data-cat="sicak-icecek"] { --cat-accent: #b17f4a; --cat-accent-soft: rgba(177, 127, 74, 0.35); --cat-tint: rgba(234, 214, 184, 0.45); --cat-tint-strong: rgba(177, 127, 74, 0.22); } html[data-cat="soguk-icecek"] { --cat-accent: #6b8a7e; --cat-accent-soft: rgba(107, 138, 126, 0.35); --cat-tint: rgba(207, 223, 217, 0.55); --cat-tint-strong: rgba(107, 138, 126, 0.28); } html[data-cat="fast-food"] { --cat-accent: #c47352; --cat-accent-soft: rgba(196, 115, 82, 0.35); --cat-tint: rgba(241, 198, 177, 0.5); --cat-tint-strong: rgba(196, 115, 82, 0.28); } html[data-cat="tatli"] { --cat-accent: #b96670; --cat-accent-soft: rgba(185, 102, 112, 0.35); --cat-tint: rgba(236, 208, 212, 0.55); --cat-tint-strong: rgba(185, 102, 112, 0.28); } html[data-cat="mesrubat"] { --cat-accent: #8a7d4d; --cat-accent-soft: rgba(138, 125, 77, 0.35); --cat-tint: rgba(227, 220, 192, 0.55); --cat-tint-strong: rgba(138, 125, 77, 0.28); } /* Dark theme: slightly brighter accents to stay readable on dark surfaces */ html[data-bs-theme="dark"][data-cat="sicak-icecek"] { --cat-accent: #d6a575; --cat-accent-soft: rgba(214, 165, 117, 0.4); } html[data-bs-theme="dark"][data-cat="soguk-icecek"] { --cat-accent: #9bb8ab; --cat-accent-soft: rgba(155, 184, 171, 0.4); } html[data-bs-theme="dark"][data-cat="fast-food"] { --cat-accent: #e09375; --cat-accent-soft: rgba(224, 147, 117, 0.4); } html[data-bs-theme="dark"][data-cat="tatli"] { --cat-accent: #d68995; --cat-accent-soft: rgba(214, 137, 149, 0.4); } html[data-bs-theme="dark"][data-cat="mesrubat"] { --cat-accent: #b3a878; --cat-accent-soft: rgba(179, 168, 120, 0.4); } /* =========================================================== * Brand logos (light = org.png on light bg, white = white.png on dark) * Used in the page header and in the sidebar header. * =========================================================== */ .nero-header-logo, .nero-sidebar-logo { display: inline-flex; align-items: center; } /* Layout-only — display is set by the theme rules below (higher specificity) */ .nero-header-logo img, .nero-sidebar-logo img { max-height: 75px; width: auto; object-fit: contain; } .nero-sidebar-logo { justify-content: center; margin-bottom: 18px; } .nero-sidebar-logo img { max-height: 60px; } /* LIGHT theme (default): org.png visible, white.png hidden. !important is used because the template's deeply-nested .sidebar selectors (e.g. `.dz-floting-sidebar.sidebar .sidebar-header .app-logo img`) have higher native specificity (0,4,1) than what compound class selectors can reach without an id, so we lock display state here. */ img.nero-logo-light { display: block !important; } img.nero-logo-dark { display: none !important; } /* DARK theme — swap */ .theme-dark img.nero-logo-light, [data-bs-theme="dark"] img.nero-logo-light { display: none !important; } .theme-dark img.nero-logo-dark, [data-bs-theme="dark"] img.nero-logo-dark { display: block !important; } /* =========================================================== * Sidebar contact block (sits between nav items and bottom) * =========================================================== */ .nero-sidebar-contact { margin: 18px 16px 8px; padding: 16px 14px; border-radius: 14px; background: rgba(177, 127, 74, 0.08); border: 1px solid rgba(177, 127, 74, 0.14); } .nero-sidebar-contact-title { font-size: 11px; font-weight: 700; color: #b17f4a; letter-spacing: 0.10em; text-transform: uppercase; margin: 0 0 10px; } .nero-sidebar-contact-line { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 12.5px; color: rgba(15, 10, 6, 0.72); line-height: 1.4; } .nero-sidebar-contact-line:last-child { margin-bottom: 0; } .nero-sidebar-contact-line i { color: #b17f4a; font-size: 14px; width: 16px; flex: 0 0 auto; text-align: center; } .nero-sidebar-contact-line a { color: inherit; text-decoration: none; transition: color 0.18s ease; } .nero-sidebar-contact-line a:hover { color: #b17f4a; } .theme-dark .nero-sidebar-contact-line a:hover, [data-bs-theme="dark"] .nero-sidebar-contact-line a:hover { color: #d4a875; } .theme-dark .nero-sidebar-contact, [data-bs-theme="dark"] .nero-sidebar-contact { background: rgba(212, 168, 117, 0.10); border-color: rgba(212, 168, 117, 0.18); } .theme-dark .nero-sidebar-contact-title, [data-bs-theme="dark"] .nero-sidebar-contact-title { color: #d4a875; } .theme-dark .nero-sidebar-contact-line, [data-bs-theme="dark"] .nero-sidebar-contact-line { color: rgba(245, 235, 222, 0.78); } .theme-dark .nero-sidebar-contact-line i, [data-bs-theme="dark"] .nero-sidebar-contact-line i { color: #d4a875; } /* =========================================================== * Product Detail Page (full-bleed media + diagonal overlay) * =========================================================== */ .nero-pd-body-bg { /* Body bg matches the stage gradient's bottom-left tone so the cross-fade between products doesn't expose a contrasting flash colour. */ background: linear-gradient(135deg, #f5ebde 0%, #b17f4a 100%); margin: 0; padding: 0; overflow-x: hidden; overscroll-behavior: none; /* prevent pull-to-refresh on the whole detail page */ -webkit-overflow-scrolling: touch; } /* Hidden adjacent-product preload elements (offscreen, no layout impact) */ .nero-pd-preload { position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; opacity: 0; } .nero-pd-preload video { width: 1px; height: 1px; } html:has(body.nero-pd-body-bg) { overscroll-behavior: none; } .nero-pd { position: relative; min-height: 100vh; min-height: 100dvh; background: #0f0a06; } /* Full-screen stage that holds media + overlay + content */ .nero-pd-stage { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: linear-gradient(135deg, #f5ebde 0%, #b17f4a 100%); -webkit-user-select: none; user-select: none; touch-action: pan-y; } /* Media layer (video / image) — bottom of stack */ .nero-pd-media { position: absolute; inset: 0; z-index: 0; } /* Carousel wrapper: viewport-width, fills the stage. The stage clips to its bounds, so the only thing that moves during a swipe is this wrapper — the gradient/text/header stay put and the body background never peeks through at the edges. */ .nero-pd-carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* Promote to its own layer so the swipe transform is GPU-driven on mobile (no stuttering on iOS Safari / older Android Chrome). */ will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Side preview layers — image-only, sit just off-screen left/right so they slide in with the carousel during a swipe. */ .nero-pd-media.nero-pd-media-side { right: auto; width: 100%; background-color: #1a1208; /* fallback for the brief moment before bg-image paints */ background-size: cover; background-position: center; pointer-events: none; } .nero-pd-media.nero-pd-media-prev { left: -100%; } .nero-pd-media.nero-pd-media-next { left: 100%; } .nero-pd-video, .nero-pd-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Subtle Ken Burns drift on still images so they don't feel static. Scale + slight pan over 18s, alternating to avoid a hard restart. */ .nero-pd-img { animation: nero-pd-kenburns 18s ease-in-out infinite alternate; transform-origin: center center; will-change: transform; } @keyframes nero-pd-kenburns { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.06) translate(-1%, -0.5%); } 100% { transform: scale(1.10) translate(1%, -1%); } } /* Diagonal white gradient overlay — runs from bottom-left (opaque) diagonally up-right (transparent). Text sits on the white side. */ .nero-pd-gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(38deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 30%, rgba(255, 255, 255, 0.78) 48%, rgba(255, 255, 255, 0.35) 64%, rgba(255, 255, 255, 0.05) 80%, transparent 100% ), linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 16% ); } /* Side hint pills — slide in from left/right edge during horizontal swipe */ .nero-pd-side-hint { position: fixed; top: 50%; z-index: 25; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(15, 10, 6, 0.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: #fff; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 32px rgba(15, 10, 6, 0.40); pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } .nero-pd-side-hint-prev { left: 14px; transform: translate(-130%, -50%); } .nero-pd-side-hint-next { right: 14px; transform: translate(130%, -50%); } .nero-pd-side-hint.show { opacity: 1; } .nero-pd-side-hint-prev.show { transform: translate(0, -50%); } .nero-pd-side-hint-next.show { transform: translate(0, -50%); } .nero-pd-side-hint-arrow { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.92); flex: 0 0 auto; } .nero-pd-side-hint-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; min-width: 0; } .nero-pd-side-hint-next .nero-pd-side-hint-body { align-items: flex-end; text-align: right; } .nero-pd-side-hint-body small { font-size: 9px; font-weight: 700; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.08em; } .nero-pd-side-hint-name { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =========================================================== * Detail-page header modifier — uses the same template HTML as index.html * but positioned over the video stage with a theme-aware gradient backdrop. * The inner .header-content / .info / .title / .text / .dz-floating-toggler * styles come from style.css (template). * =========================================================== */ header.header.nero-app-header { position: absolute; /* relative to .nero-pd-stage so it rotates with the wrapper card */ top: 0; left: 0; right: 0; z-index: 6; margin: 0 !important; padding: 14px 18px 72px !important; /* longer fade area for a truly smooth falloff */ width: 100%; max-width: 100%; /* Logo sits in the top ~32% which is nearly opaque white so the brown org.png is readable. From there the alpha decays smoothly through 11 stops to 0 — eye perceives a continuous fade with no visible band. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 10%, rgba(255, 255, 255, 0.88) 20%, rgba(255, 255, 255, 0.78) 30%, rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0.45) 53%, rgba(255, 255, 255, 0.30) 64%, rgba(255, 255, 255, 0.18) 74%, rgba(255, 255, 255, 0.09) 84%, rgba(255, 255, 255, 0.03) 93%, rgba(255, 255, 255, 0) 100%); pointer-events: none; animation: nero-app-header-in 0.5s cubic-bezier(.2,.7,.3,1) 0.05s both; color: #2a1f15; } header.header.nero-app-header .header-content, header.header.nero-app-header .left-content, header.header.nero-app-header .mid-content, header.header.nero-app-header .right-content, header.header.nero-app-header .info, header.header.nero-app-header .dz-floating-toggler { pointer-events: auto; } @keyframes nero-app-header-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Dark mode — same smooth multi-stop falloff in dark chocolate. Top is near-opaque so the white logo reads clearly. */ .theme-dark header.header.nero-app-header, [data-bs-theme="dark"] header.header.nero-app-header { background: linear-gradient(180deg, rgba(15, 10, 6, 0.94) 0%, rgba(15, 10, 6, 0.92) 10%, rgba(15, 10, 6, 0.86) 20%, rgba(15, 10, 6, 0.76) 30%, rgba(15, 10, 6, 0.60) 42%, rgba(15, 10, 6, 0.43) 53%, rgba(15, 10, 6, 0.28) 64%, rgba(15, 10, 6, 0.17) 74%, rgba(15, 10, 6, 0.08) 84%, rgba(15, 10, 6, 0.03) 93%, rgba(15, 10, 6, 0) 100%); color: #f5ebde; } .theme-dark header.header.nero-app-header .info .text, [data-bs-theme="dark"] header.header.nero-app-header .info .text { color: rgba(245, 235, 222, 0.55) !important; } .theme-dark header.header.nero-app-header .info .title, [data-bs-theme="dark"] header.header.nero-app-header .info .title { color: #f5ebde !important; } .nero-pd-back { display: inline-flex; align-items: center; gap: 6px; color: #1a1208; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding: 7px 13px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 14px rgba(15, 10, 6, 0.06); transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease; } .nero-pd-back:hover { background: rgba(255, 255, 255, 0.95); color: #1a1208; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 10, 6, 0.1); } .nero-pd-back svg { flex: 0 0 auto; opacity: 0.7; } .nero-pd-brand { font-weight: 600; font-size: 13px; color: #1a1208; letter-spacing: 0.01em; flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); opacity: 0.75; } .nero-pd-position-pill { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); color: #1a1208; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; box-shadow: 0 4px 14px rgba(15, 10, 6, 0.06); } /* Content overlay — positioned absolute over the white gradient area. Sits lower now (no tags/price taking vertical space) → more video room. */ .nero-pd-content { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 4; padding: 0 26px; max-width: 620px; animation: nero-pd-content-in 0.6s cubic-bezier(.2,.7,.3,1) 0.18s both; } @keyframes nero-pd-content-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .nero-pd-cat-line { font-size: 11px; font-weight: 700; color: var(--cat-accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; opacity: 0.9; transition: color 0.35s ease; } .nero-pd-name { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: #0f0a06; margin: 0 0 16px; max-width: 13ch; } .nero-pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .nero-pd-tags:empty { display: none; } .nero-pd-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(177, 127, 74, 0.25); color: #6a4a28; font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .nero-pd-desc { font-size: 14px; line-height: 1.65; color: rgba(15, 10, 6, 0.68); margin: 0 0 16px; max-width: 44ch; font-weight: 400; } /* Inline price line — sits between the title and the description. Minimal & modern: just bold chocolate-accent text in the content flow. No box, no border, no shadow — feels integrated, not bolted on. */ .nero-pd-price { display: inline-flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; font-variant-numeric: tabular-nums; } #nero-pd-price { font-size: 22px; font-weight: 700; color: #b17f4a; letter-spacing: -0.02em; line-height: 1; } .nero-pd-old-price { font-size: 13px; font-weight: 400; color: rgba(15, 10, 6, 0.32); text-decoration: line-through; letter-spacing: -0.005em; } .nero-pd-old-price:empty { display: none; } .theme-dark #nero-pd-price, [data-bs-theme="dark"] #nero-pd-price { color: #d4a875; } .theme-dark .nero-pd-old-price, [data-bs-theme="dark"] .nero-pd-old-price { color: rgba(245, 235, 222, 0.32); } /* =========================================================== * Pull-bar — full-width minimal CTA fixed at the bottom edge. * Inside: tiny up-arrow + "Tüm Ürünler" label, both pinned to the * bottom of the 100px area. Acts as both a tap target (opens to * peek) and a drag start (drags into peek/full progressively). * Drag also works from the sheet content once it's open. * =========================================================== */ .nero-pd-pull-handle { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; width: 100%; height: 100px; display: flex; align-items: flex-end; /* pin inner content to the bottom */ justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); cursor: grab; touch-action: none; -ms-touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; /* Soft fade from transparent at the top to a hint of cream at the bottom, so the CTA reads against any image without a hard band. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.92) 100%); pointer-events: auto; } .nero-pd-pull-handle:active { cursor: grabbing; } .nero-pd-pull-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: #0f0a06; transition: transform 0.22s cubic-bezier(.2,.7,.3,1), color 0.22s ease; } .nero-pd-pull-arrow { color: #b17f4a; animation: nero-pd-pull-arrow-bob 2.4s ease-in-out 1.2s infinite; } @keyframes nero-pd-pull-arrow-bob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-4px); opacity: 1; } } .nero-pd-pull-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(15, 10, 6, 0.72); } .nero-pd-pull-handle:hover .nero-pd-pull-inner { transform: translateY(-3px); } .nero-pd-pull-handle:hover .nero-pd-pull-arrow { animation: none; transform: translateY(-2px); color: #b17f4a; opacity: 1; } /* Dark mode */ .theme-dark .nero-pd-pull-handle, [data-bs-theme="dark"] .nero-pd-pull-handle { background: linear-gradient(180deg, rgba(15, 10, 6, 0) 0%, rgba(15, 10, 6, 0.55) 55%, rgba(15, 10, 6, 0.88) 100%); } .theme-dark .nero-pd-pull-inner, [data-bs-theme="dark"] .nero-pd-pull-inner { color: #f5ebde; } .theme-dark .nero-pd-pull-label, [data-bs-theme="dark"] .nero-pd-pull-label { color: rgba(245, 235, 222, 0.78); } .theme-dark .nero-pd-pull-arrow, [data-bs-theme="dark"] .nero-pd-pull-arrow { color: #d4a875; } /* Make space at the bottom of the stage so the CTA doesn't cover the description. */ .nero-pd-stage { padding-bottom: 96px; } /* =========================================================== * When the template's sidebar is open (body.floating-body), hide our * floating UI widgets so the slid-away "card" stays clean. * =========================================================== */ body.floating-body .nero-pd-pull-handle, body.floating-body .nero-pd-sheet, body.floating-body .nero-pd-side-hint, body.floating-body .nero-pd-demo-caption, body.floating-body .nero-pd-preload { opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } /* Sidebar close (×) — float at the top-right corner of the viewport where the hamburger lives, so the same hand position opens/closes. Only kicks in when the sidebar is open (body.floating-body). */ body.floating-body .dz-floting-sidebar .floating-close { position: fixed !important; top: calc(env(safe-area-inset-top) + 14px); right: 16px; z-index: 300; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 22px rgba(15, 10, 6, 0.20); display: inline-flex !important; align-items: center; justify-content: center; color: #1a1208; margin: 0; transition: transform 0.18s ease, background 0.18s ease; animation: nero-floating-close-in 0.32s cubic-bezier(.2,.7,.3,1) 0.12s both; } body.floating-body .dz-floting-sidebar .floating-close i { font-size: 20px !important; color: inherit !important; line-height: 1; } body.floating-body .dz-floting-sidebar .floating-close:hover { transform: scale(1.06); background: #fff; color: #1a1208; } @keyframes nero-floating-close-in { from { opacity: 0; transform: scale(0.7) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Dark mode — invert the pill */ body.floating-body.theme-dark .dz-floting-sidebar .floating-close, body.floating-body[data-bs-theme="dark"] .dz-floting-sidebar .floating-close { background: rgba(26, 18, 8, 0.92); color: #f5ebde; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } body.floating-body.theme-dark .dz-floting-sidebar .floating-close:hover, body.floating-body[data-bs-theme="dark"] .dz-floting-sidebar .floating-close:hover { background: rgba(40, 28, 18, 0.98); color: #fff; } /* When the sidebar isn't open, hide the close button entirely so it doesn't peek out of its original sidebar header position. */ body:not(.floating-body) .dz-floting-sidebar .floating-close { display: none !important; } /* =========================================================== * Global sidebar (legacy custom — no longer injected, but rules * kept in case the markup is present on older pages). * =========================================================== */ .nero-global-sidebar { position: fixed; inset: 0; z-index: 220; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .nero-global-sidebar.open { pointer-events: auto; opacity: 1; } .nero-global-sidebar-backdrop { position: absolute; inset: 0; background: rgba(15, 10, 6, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .nero-global-sidebar-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 88%; max-width: 360px; background: #fff; box-shadow: -16px 0 44px rgba(0, 0, 0, 0.18); transform: translateX(102%); transition: transform 0.34s cubic-bezier(.2,.75,.25,1); display: flex; flex-direction: column; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); overscroll-behavior: contain; } .nero-global-sidebar.open .nero-global-sidebar-panel { transform: translateX(0); } .nero-global-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; } .nero-global-sidebar-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #0f0a06; font-size: 16px; letter-spacing: -0.01em; } .nero-global-sidebar-brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: #f0e3d1; padding: 4px; } .nero-global-sidebar-close { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(15, 10, 6, 0.06); color: #1a1208; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease; } .nero-global-sidebar-close:hover { background: rgba(15, 10, 6, 0.12); } .nero-global-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; } .nero-global-sidebar-link { display: inline-flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; color: #1a1208; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: -0.005em; transition: background 0.18s ease, color 0.18s ease; } .nero-global-sidebar-link i { font-size: 18px; color: #b17f4a; width: 22px; text-align: center; flex: 0 0 auto; } .nero-global-sidebar-link:hover { background: rgba(15, 10, 6, 0.05); color: #1a1208; } .nero-global-sidebar-link.active { background: #f0e3d1; color: #6a4a28; } .nero-global-sidebar-link.active i { color: #6a4a28; } .nero-global-sidebar-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(15, 10, 6, 0.08); display: flex; flex-direction: column; gap: 14px; } .nero-global-theme-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(15, 10, 6, 0.05); border: 0; cursor: pointer; font-weight: 700; color: #1a1208; font-size: 13px; transition: background 0.18s ease; } .nero-global-theme-toggle:hover { background: rgba(15, 10, 6, 0.10); } .nero-theme-icon { color: #b17f4a; display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .nero-theme-icon-sun { display: inline-flex; } .nero-theme-icon-moon { display: none; } .theme-dark .nero-theme-icon-sun, [data-bs-theme="dark"] .nero-theme-icon-sun { display: none; } .theme-dark .nero-theme-icon-moon, [data-bs-theme="dark"] .nero-theme-icon-moon { display: inline-flex; } .nero-global-sidebar-version { display: flex; align-items: baseline; justify-content: space-between; color: rgba(15, 10, 6, 0.45); font-size: 12px; font-weight: 500; padding: 0 4px; } .nero-global-sidebar-version small { font-weight: 600; color: rgba(15, 10, 6, 0.7); } /* Dark mode for the sidebar */ .theme-dark .nero-global-sidebar-panel, [data-bs-theme="dark"] .nero-global-sidebar-panel { background: #1a1208; box-shadow: -16px 0 44px rgba(0, 0, 0, 0.55); } .theme-dark .nero-global-sidebar-brand, [data-bs-theme="dark"] .nero-global-sidebar-brand { color: #f5ebde; } .theme-dark .nero-global-sidebar-brand img, [data-bs-theme="dark"] .nero-global-sidebar-brand img { background: #2a1f15; } .theme-dark .nero-global-sidebar-close, [data-bs-theme="dark"] .nero-global-sidebar-close { background: rgba(245, 235, 222, 0.08); color: #f5ebde; } .theme-dark .nero-global-sidebar-close:hover, [data-bs-theme="dark"] .nero-global-sidebar-close:hover { background: rgba(245, 235, 222, 0.16); } .theme-dark .nero-global-sidebar-link, [data-bs-theme="dark"] .nero-global-sidebar-link { color: #f5ebde; } .theme-dark .nero-global-sidebar-link i, [data-bs-theme="dark"] .nero-global-sidebar-link i { color: #d4a875; } .theme-dark .nero-global-sidebar-link:hover, [data-bs-theme="dark"] .nero-global-sidebar-link:hover { background: rgba(245, 235, 222, 0.06); color: #fff; } .theme-dark .nero-global-sidebar-link.active, [data-bs-theme="dark"] .nero-global-sidebar-link.active { background: rgba(177, 127, 74, 0.18); color: #d4a875; } .theme-dark .nero-global-sidebar-link.active i, [data-bs-theme="dark"] .nero-global-sidebar-link.active i { color: #d4a875; } .theme-dark .nero-global-sidebar-footer, [data-bs-theme="dark"] .nero-global-sidebar-footer { border-top-color: rgba(245, 235, 222, 0.10); } .theme-dark .nero-global-theme-toggle, [data-bs-theme="dark"] .nero-global-theme-toggle { background: rgba(245, 235, 222, 0.08); color: #f5ebde; } .theme-dark .nero-global-theme-toggle:hover, [data-bs-theme="dark"] .nero-global-theme-toggle:hover { background: rgba(245, 235, 222, 0.14); } .theme-dark .nero-global-sidebar-version, [data-bs-theme="dark"] .nero-global-sidebar-version { color: rgba(245, 235, 222, 0.4); } .theme-dark .nero-global-sidebar-version small, [data-bs-theme="dark"] .nero-global-sidebar-version small { color: rgba(245, 235, 222, 0.7); } /* Pre-paint dark mode flag — applied by inline head script so the body background and gradient don't flash white on load. */ html.nero-theme-preload-dark { background: #0a0703; } /* =========================================================== * Detail page — DARK MODE adaptation * Triggered by [data-bs-theme="dark"] on or * =========================================================== */ [data-bs-theme="dark"] .nero-pd-body-bg, .theme-dark .nero-pd-body-bg { background: linear-gradient(135deg, #2a1f15 0%, #4a3520 50%, #1a1208 100%); } [data-bs-theme="dark"] .nero-pd, .theme-dark .nero-pd { background: #0a0703; } [data-bs-theme="dark"] .nero-pd-stage, .theme-dark .nero-pd-stage { background: linear-gradient(135deg, #2a1f15 0%, #4a3520 50%, #1a1208 100%); } /* Gradient fades to DARK chocolate (not white) — text on top will be light */ [data-bs-theme="dark"] .nero-pd-gradient, .theme-dark .nero-pd-gradient { background: linear-gradient(38deg, rgba(15, 10, 6, 0.98) 0%, rgba(15, 10, 6, 0.95) 30%, rgba(15, 10, 6, 0.78) 48%, rgba(15, 10, 6, 0.40) 64%, rgba(15, 10, 6, 0.08) 80%, transparent 100% ), linear-gradient(180deg, rgba(15, 10, 6, 0.55) 0%, rgba(15, 10, 6, 0) 16% ); } @media (min-width: 768px) { [data-bs-theme="dark"] .nero-pd-gradient, .theme-dark .nero-pd-gradient { background: linear-gradient(42deg, rgba(15, 10, 6, 0.98) 0%, rgba(15, 10, 6, 0.95) 32%, rgba(15, 10, 6, 0.65) 50%, rgba(15, 10, 6, 0.18) 70%, transparent 100% ), linear-gradient(180deg, rgba(15, 10, 6, 0.42) 0%, rgba(15, 10, 6, 0) 14% ); } } /* Top bar — dark glass on dark gradient */ [data-bs-theme="dark"] .nero-pd-back, .theme-dark .nero-pd-back, [data-bs-theme="dark"] .nero-pd-position-pill, .theme-dark .nero-pd-position-pill { background: rgba(245, 235, 222, 0.10); color: #f5ebde; border-color: rgba(245, 235, 222, 0.14); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } [data-bs-theme="dark"] .nero-pd-back:hover, .theme-dark .nero-pd-back:hover { background: rgba(245, 235, 222, 0.18); color: #fff; } [data-bs-theme="dark"] .nero-pd-brand, .theme-dark .nero-pd-brand { color: #f5ebde; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); opacity: 0.8; } /* Content typography — light on dark (color flows from --cat-accent now) */ [data-bs-theme="dark"] .nero-pd-cat-line, .theme-dark .nero-pd-cat-line { opacity: 0.95; } [data-bs-theme="dark"] .nero-pd-name, .theme-dark .nero-pd-name { color: #f5ebde; } [data-bs-theme="dark"] .nero-pd-desc, .theme-dark .nero-pd-desc { color: rgba(245, 235, 222, 0.72); } [data-bs-theme="dark"] .nero-pd-tag, .theme-dark .nero-pd-tag { background: rgba(177, 127, 74, 0.18); border-color: rgba(212, 168, 117, 0.30); color: #d4a875; } [data-bs-theme="dark"] .nero-pd-current-price, .theme-dark .nero-pd-current-price { color: #d4a875; } [data-bs-theme="dark"] .nero-pd-old-price, .theme-dark .nero-pd-old-price { color: rgba(245, 235, 222, 0.32); } /* Pull-bar — lighter on dark */ [data-bs-theme="dark"] .nero-pd-pull-bar, .theme-dark .nero-pd-pull-bar { background: rgba(245, 235, 222, 0.32); } [data-bs-theme="dark"] .nero-pd-pull-handle:hover .nero-pd-pull-bar, .theme-dark .nero-pd-pull-handle:hover .nero-pd-pull-bar { background: rgba(245, 235, 222, 0.55); } /* Side hint pills — already dark, but ensure they stay readable */ [data-bs-theme="dark"] .nero-pd-side-hint, .theme-dark .nero-pd-side-hint { background: rgba(40, 28, 18, 0.94); border-color: rgba(212, 168, 117, 0.22); } /* Sheet — dark background, light typography */ [data-bs-theme="dark"] .nero-pd-sheet-content, .theme-dark .nero-pd-sheet-content { background: #1a1208; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55); } [data-bs-theme="dark"] .nero-pd-sheet-grab, .theme-dark .nero-pd-sheet-grab { background: rgba(245, 235, 222, 0.22); } [data-bs-theme="dark"] .nero-pd-sheet-grab-zone:hover .nero-pd-sheet-grab, .theme-dark .nero-pd-sheet-grab-zone:hover .nero-pd-sheet-grab { background: rgba(245, 235, 222, 0.38); } [data-bs-theme="dark"] .nero-pd-sheet-titles small, .theme-dark .nero-pd-sheet-titles small { color: #d4a875; } [data-bs-theme="dark"] .nero-pd-sheet-title, .theme-dark .nero-pd-sheet-title { color: #f5ebde; } [data-bs-theme="dark"] .nero-pd-sheet-close, .theme-dark .nero-pd-sheet-close { background: rgba(245, 235, 222, 0.10); color: #f5ebde; } [data-bs-theme="dark"] .nero-pd-sheet-close:hover, .theme-dark .nero-pd-sheet-close:hover { background: rgba(245, 235, 222, 0.20); } [data-bs-theme="dark"] .nero-pd-sheet-circle, .theme-dark .nero-pd-sheet-circle { color: #f5ebde; } [data-bs-theme="dark"] .nero-pd-sheet-circle-img, .theme-dark .nero-pd-sheet-circle-img { background-color: #2a1f15; box-shadow: inset 0 0 0 2px rgba(245, 235, 222, 0.06); } [data-bs-theme="dark"] .nero-pd-sheet-circle-name, .theme-dark .nero-pd-sheet-circle-name { color: rgba(245, 235, 222, 0.70); } [data-bs-theme="dark"] .nero-pd-sheet-circle.is-active .nero-pd-sheet-circle-name, .theme-dark .nero-pd-sheet-circle.is-active .nero-pd-sheet-circle-name { color: #fff; } /* Sheet caret hint (the chocolate "↑" above the grab) — invert to lighter */ [data-bs-theme="dark"] .nero-pd-sheet-grab-zone::after, .theme-dark .nero-pd-sheet-grab-zone::after { background: url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat; } /* Sheet backdrop a touch darker for dark mode */ [data-bs-theme="dark"] .nero-pd-sheet-backdrop, .theme-dark .nero-pd-sheet-backdrop { background: rgba(0, 0, 0, 0.7); } /* =========================================================== * Arrival demo — runs once every time product-detail loads. * Two phases that perform the actual gestures on the real page, * with a floating caption above explaining what's happening: * Phase 1 — stage shifts left, next-product hint pill peeks in * Phase 2 — bottom sheet rises to peek and slides back down * No fullscreen modal, no localStorage suppression — modern apps * remind on every visit because users forget. * =========================================================== */ /* Phase 1: stage shifts left briefly and back, with the side hint pill peeking */ .nero-pd-stage.is-demo-h .nero-pd-media, .nero-pd-stage.is-demo-h .nero-pd-content, .nero-pd-stage.is-demo-h .nero-pd-gradient, .nero-pd-stage.is-demo-h .nero-pd-topbar { animation: nero-pd-demo-shift 1.4s cubic-bezier(.5,.05,.4,1) both; } @keyframes nero-pd-demo-shift { 0% { transform: translateX(0); } 32% { transform: translateX(-58px); } 58% { transform: translateX(-58px); } 100% { transform: translateX(0); } } /* "SONRAKİ" hint pill rides in alongside the stage shift to reveal the gesture's reward */ .nero-pd-stage.is-demo-h .nero-pd-side-hint-next { animation: nero-pd-demo-hint-in 1.4s ease-out both; } @keyframes nero-pd-demo-hint-in { 0% { opacity: 0; transform: translate(115%, -50%); } 30% { opacity: 1; transform: translate(0, -50%); } 62% { opacity: 1; transform: translate(0, -50%); } 100% { opacity: 0; transform: translate(115%, -50%); } } /* Phase 2: bottom sheet peeks up without locking page interactions */ .nero-pd-sheet.is-demo-peek { pointer-events: none; opacity: 1; } .nero-pd-sheet.is-demo-peek .nero-pd-sheet-backdrop { animation: nero-pd-demo-backdrop 1.7s ease-out both; } @keyframes nero-pd-demo-backdrop { 0%, 100% { opacity: 0; } 24%, 76% { opacity: 1; } } .nero-pd-sheet.is-demo-peek .nero-pd-sheet-content { animation: nero-pd-demo-peek 1.7s cubic-bezier(.4,0,.2,1) both; } /* Just a sliver so the user spots the menu exists — not a full reveal. translateY(75%) leaves ~75px of the 296px peek-height visible. */ @keyframes nero-pd-demo-peek { 0% { transform: translateY(100%); } 30% { transform: translateY(75%); } 70% { transform: translateY(75%); } 100% { transform: translateY(100%); } } /* Floating caption pill that hovers above the gesture so the user knows what's being shown */ .nero-pd-demo-caption { position: fixed; left: 50%; /* Sit clearly above the 100px-tall pull-handle so they never overlap visually on any device size. */ bottom: calc(env(safe-area-inset-bottom) + 124px); transform: translateX(-50%) translateY(6px); z-index: 30; background: rgba(15, 10, 6, 0.84); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2,.8,.3,1); } .nero-pd-demo-caption.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .nero-pd-demo-caption .arrow { display: inline-block; margin-right: 6px; color: #d4a875; font-weight: 800; } .theme-dark .nero-pd-demo-caption, [data-bs-theme="dark"] .nero-pd-demo-caption { background: rgba(245, 235, 222, 0.96); color: #1a1208; } .theme-dark .nero-pd-demo-caption .arrow, [data-bs-theme="dark"] .nero-pd-demo-caption .arrow { color: #b17f4a; } /* Honor the user's reduced-motion preference — fall back to a static caption only */ @media (prefers-reduced-motion: reduce) { .nero-pd-stage.is-demo-h .nero-pd-media, .nero-pd-stage.is-demo-h .nero-pd-content, .nero-pd-stage.is-demo-h .nero-pd-gradient, .nero-pd-stage.is-demo-h .nero-pd-topbar, .nero-pd-stage.is-demo-h .nero-pd-side-hint-next, .nero-pd-sheet.is-demo-peek .nero-pd-sheet-backdrop, .nero-pd-sheet.is-demo-peek .nero-pd-sheet-content { animation: none !important; } } /* While dragging the sheet, freeze its transitions/animations so it tracks the finger */ .nero-pd-sheet.is-dragging .nero-pd-sheet-content { transition: none !important; animation: none !important; } /* While the page is being horizontally swiped, suspend the global content entrance animation so the user's drag isn't interrupted */ .nero-pd-stage.is-swiping .nero-pd-content, .nero-pd-stage.is-swiping .nero-pd-topbar { animation: none; } /* =========================================================== * Bottom sheet (all products in current category) * =========================================================== */ .nero-pd-sheet { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .nero-pd-sheet.open { opacity: 1; pointer-events: auto; } .nero-pd-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 10, 6, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .nero-pd-sheet-content { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0; padding: 6px 0 22px; transform: translateY(100%); transition: transform 0.36s cubic-bezier(.2,.75,.25,1), height 0.36s cubic-bezier(.2,.75,.25,1); height: 296px; max-height: calc(100% - 32px); /* always leave ≥32px gap at top (close btn visible) */ overflow: hidden; box-shadow: 0 -16px 40px rgba(15, 10, 6, 0.22); will-change: transform, height; display: flex; flex-direction: column; } .nero-pd-sheet.open .nero-pd-sheet-content { transform: translateY(0); } /* When fully expanded — use parent percentage (sheet is fixed inset:0 ≈ viewport), so this respects iOS Safari's dynamic viewport without overflowing. */ .nero-pd-sheet.is-full .nero-pd-sheet-content { height: calc(100% - 32px); } .nero-pd-sheet-grab-zone { position: relative; padding: 12px 0 6px; cursor: grab; touch-action: none; flex: 0 0 auto; } .nero-pd-sheet-grab-zone:active { cursor: grabbing; } .nero-pd-sheet-grab { width: 44px; height: 5px; background: rgba(15, 10, 6, 0.18); border-radius: 999px; margin: 0 auto; transition: background 0.18s ease, width 0.18s ease, transform 0.18s ease; } /* Pulsing "drag me up" hint — only in peek mode */ @keyframes nero-pd-grab-pulse { 0%, 100% { transform: translateY(0); opacity: 0.55; width: 44px; } 50% { transform: translateY(-5px); opacity: 1; width: 54px; } } .nero-pd-sheet.open:not(.is-full) .nero-pd-sheet-grab { animation: nero-pd-grab-pulse 1.8s ease-in-out 1.3s infinite; } .nero-pd-sheet.is-full .nero-pd-sheet-grab { animation: none; width: 36px; background: rgba(15, 10, 6, 0.14); } .nero-pd-sheet-grab-zone:hover .nero-pd-sheet-grab { background: rgba(15, 10, 6, 0.32); width: 54px; } /* Subtle "swipe-up" caret above the grab when in peek mode */ .nero-pd-sheet-grab-zone::after { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -2px; background: url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat; opacity: 0; transform: translateY(0); pointer-events: none; transition: opacity 0.3s ease; } .nero-pd-sheet.open:not(.is-full) .nero-pd-sheet-grab-zone::after { animation: nero-pd-caret-hint 1.8s ease-in-out 1.3s infinite; } @keyframes nero-pd-caret-hint { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.75; transform: translateY(-6px); } } .nero-pd-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 14px; } .nero-pd-sheet-titles { display: flex; flex-direction: column; gap: 2px; } .nero-pd-sheet-titles small { font-size: 10px; font-weight: 700; color: #b17f4a; letter-spacing: 0.08em; text-transform: uppercase; } .nero-pd-sheet-title { font-size: 20px; font-weight: 800; color: #0f0a06; margin: 0; letter-spacing: -0.01em; } .nero-pd-sheet-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(15, 10, 6, 0.06); border: 0; cursor: pointer; color: #1a1208; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .nero-pd-sheet-close:hover { background: rgba(15, 10, 6, 0.12); } /* Default (peek): horizontal scrollable circle row */ .nero-pd-sheet-circles { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; padding: 4px 22px 22px; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; flex: 1 1 auto; transition: padding 0.3s ease; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nero-pd-sheet-circles::-webkit-scrollbar { display: none; } .nero-pd-sheet-circle { flex: 0 0 auto; width: 96px; text-align: center; text-decoration: none; color: #1a1208; scroll-snap-align: center; transition: transform 0.18s ease; } .nero-pd-sheet-circle:hover { transform: translateY(-3px); color: #1a1208; } .nero-pd-sheet-circle-img { display: block; width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; background-color: #f0e3d1; background-size: cover; background-position: center; box-shadow: inset 0 0 0 2px rgba(15, 10, 6, 0.05); transition: box-shadow 0.22s ease, transform 0.22s ease, border-radius 0.3s ease, width 0.3s ease, height 0.3s ease; } .nero-pd-sheet-circle.is-active .nero-pd-sheet-circle-img { box-shadow: 0 0 0 3px #b17f4a; transform: scale(1.06); } .nero-pd-sheet-circle:hover .nero-pd-sheet-circle-img { box-shadow: 0 0 0 3px rgba(177, 127, 74, 0.5); } .nero-pd-sheet-circle-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; color: rgba(15, 10, 6, 0.72); font-weight: 500; word-break: break-word; transition: font-size 0.25s ease; } .nero-pd-sheet-circle.is-active .nero-pd-sheet-circle-name { color: #0f0a06; font-weight: 700; } /* FULL state: switch to grid of square cards */ .nero-pd-sheet.is-full .nero-pd-sheet-circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; overflow-x: hidden; overflow-y: auto; padding: 6px 22px 28px; scroll-snap-type: none; overscroll-behavior: contain; } .nero-pd-sheet.is-full .nero-pd-sheet-circle { width: auto; display: flex; flex-direction: column; align-items: center; } .nero-pd-sheet.is-full .nero-pd-sheet-circle-img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 110px; margin-bottom: 8px; border-radius: 20px; /* rounded square, not circle */ } .nero-pd-sheet.is-full .nero-pd-sheet-circle-name { font-size: 11px; line-height: 1.25; -webkit-line-clamp: 2; } /* Sheet header refinement */ .nero-pd-sheet-header { flex: 0 0 auto; } /* Mobile refinements for the footer */ @media (max-width: 380px) { .nero-pd-foot-name { max-width: 22vw; font-size: 12px; } .nero-pd-foot-all { padding: 10px 16px; font-size: 12px; } .nero-pd-foot-label small { font-size: 9px; } } /* Tablet+ refinements */ @media (min-width: 768px) { .nero-pd-name { font-size: 48px; max-width: 16ch; } .nero-pd-current-price { font-size: 32px; } .nero-pd-content { padding: 0 56px; bottom: 110px; } .nero-pd-gradient { background: linear-gradient(42deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 32%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.15) 70%, transparent 100% ), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 14% ); } } /* Short screens — tighten the content stack but never clamp the description. Content is anchored bottom: long description pushes title/price upward so the full text always fits. NO internal scroll — that would clash with the bottom sheet's pull-to-open scroll. */ @media (max-height: 700px) { .nero-pd-name { font-size: 28px; margin: 0 0 10px; } .nero-pd-desc { font-size: 13px; line-height: 1.55; margin: 0 0 10px; } .nero-pd-content { bottom: 78px; } .nero-pd-current-price { font-size: 15px; } .nero-pd-cat-line { margin-bottom: 10px; } } /* Ultra-short (landscape on phones, ~360-420px tall) — go even tighter */ @media (max-height: 480px) { .nero-pd-name { font-size: 24px; margin: 0 0 8px; } .nero-pd-desc { font-size: 12.5px; line-height: 1.5; margin: 0 0 8px; } .nero-pd-content { bottom: 64px; padding: 0 18px; } } /* =========================================================== * Global autocomplete search (used on index.html) * Live dropdown of matching products beneath the search input. * =========================================================== */ .nero-search-wrap { position: relative; margin-bottom: 16px; } .nero-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid rgba(15, 10, 6, 0.06); border-radius: 18px; padding: 6px; max-height: 65vh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 22px 50px rgba(15, 10, 6, 0.18), 0 4px 12px rgba(15, 10, 6, 0.08); animation: nero-search-in 0.18s cubic-bezier(.2,.7,.3,1); } @keyframes nero-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nero-search-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.15s ease; } .nero-search-result:hover, .nero-search-result.active { background: rgba(15, 10, 6, 0.05); color: inherit; } .nero-search-result-img { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #f5ebde 0%, #e6d2b4 100%); object-fit: cover; flex: 0 0 auto; } .nero-search-result-body { flex: 1; min-width: 0; } .nero-search-result-name { font-size: 14px; font-weight: 700; color: #0f0a06; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .nero-search-result-cat { font-size: 11px; color: rgba(15, 10, 6, 0.50); margin-top: 2px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .nero-search-result-price { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #b17f4a; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .nero-search-empty, .nero-search-more { display: block; padding: 14px 12px; text-align: center; font-size: 12px; color: rgba(15, 10, 6, 0.55); border-radius: 12px; text-decoration: none; } .nero-search-more { font-weight: 600; color: #b17f4a; background: rgba(177, 127, 74, 0.06); margin-top: 4px; } .nero-search-more:hover { background: rgba(177, 127, 74, 0.12); color: #b17f4a; } /* Dark mode */ .theme-dark .nero-search-results, [data-bs-theme="dark"] .nero-search-results { background: #1a1208; border-color: rgba(245, 235, 222, 0.08); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.30); } .theme-dark .nero-search-result:hover, .theme-dark .nero-search-result.active, [data-bs-theme="dark"] .nero-search-result:hover, [data-bs-theme="dark"] .nero-search-result.active { background: rgba(245, 235, 222, 0.06); } .theme-dark .nero-search-result-name, [data-bs-theme="dark"] .nero-search-result-name { color: #f5ebde; } .theme-dark .nero-search-result-cat, [data-bs-theme="dark"] .nero-search-result-cat { color: rgba(245, 235, 222, 0.45); } .theme-dark .nero-search-result-price, [data-bs-theme="dark"] .nero-search-result-price { color: #d4a875; } .theme-dark .nero-search-empty, [data-bs-theme="dark"] .nero-search-empty { color: rgba(245, 235, 222, 0.55); } .theme-dark .nero-search-more, [data-bs-theme="dark"] .nero-search-more { background: rgba(212, 168, 117, 0.10); color: #d4a875; } .theme-dark .nero-search-more:hover, [data-bs-theme="dark"] .nero-search-more:hover { background: rgba(212, 168, 117, 0.18); } /* =========================================================== * Header search — icon button in the header that opens a * slide-down panel containing the hero-style search input. * Same autocomplete logic as the homepage search. * =========================================================== */ /* Round icon button that sits in .right-content next to the menu toggler. */ .nero-header-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: #5F5F5F; background: transparent; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .nero-header-search-btn:hover, .nero-header-search-btn:focus-visible { background: rgba(177, 127, 74, 0.10); color: #b17f4a; outline: none; } .nero-header-search-btn:active { transform: scale(0.94); } body.nero-search-open .nero-header-search-btn { background: rgba(177, 127, 74, 0.14); color: #b17f4a; } .theme-dark .nero-header-search-btn, [data-bs-theme="dark"] .nero-header-search-btn { color: #f5ebde; } .theme-dark .nero-header-search-btn:hover, .theme-dark .nero-header-search-btn:focus-visible, [data-bs-theme="dark"] .nero-header-search-btn:hover, [data-bs-theme="dark"] .nero-header-search-btn:focus-visible { background: rgba(212, 168, 117, 0.18); color: #d4a875; } .theme-dark body.nero-search-open .nero-header-search-btn, [data-bs-theme="dark"] body.nero-search-open .nero-header-search-btn { background: rgba(212, 168, 117, 0.22); color: #d4a875; } /* On product-detail the menu toggler uses currentColor (white-ish over the video). Match the search icon to the same color so the pair reads as one. */ header.header.nero-app-header .nero-header-search-btn { color: currentColor; } /* ----- Backdrop (dimmed scrim behind the panel) ----- */ .nero-header-search-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 10, 6, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } body.nero-search-open .nero-header-search-backdrop { opacity: 1; pointer-events: auto; } /* ----- Slide-down panel ----- */ .nero-header-search-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; background: #fff; box-shadow: 0 18px 40px rgba(15, 10, 6, 0.14); padding: 14px 18px 18px; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 0.36s cubic-bezier(.22,.9,.32,1.18), opacity 0.22s ease; border-radius: 0 0 22px 22px; } /* `hidden` is removed by JS as soon as we open — until then this attribute keeps the panel out of the layout entirely (so the dropdown's max-height doesn't measure off an off-screen element). The transition still plays once `hidden` flips off because we add `.is-open` on the next frame. */ .nero-header-search-panel[hidden] { display: none !important; } body.nero-search-open .nero-header-search-panel, .nero-header-search-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nero-header-search-panel-inner { max-width: 480px; margin: 0 auto; width: 100%; } .nero-header-search-panel-row { display: flex; align-items: center; gap: 10px; } .nero-header-search-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(15, 10, 6, 0.06); color: #0f0a06; flex: 0 0 auto; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .nero-header-search-close:hover, .nero-header-search-close:focus-visible { background: rgba(177, 127, 74, 0.14); color: #b17f4a; outline: none; } .nero-header-search-close:active { transform: scale(0.94); } /* Results dropdown — anchored below the input row, inside the panel. */ .nero-header-search-panel .nero-search-results { position: static; box-shadow: none; border: 0; background: transparent; padding: 6px 0 0; max-height: calc(100vh - 140px); animation: none; } /* Dark mode */ .theme-dark .nero-header-search-panel, [data-bs-theme="dark"] .nero-header-search-panel { background: #1a1208; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.50); } .theme-dark .nero-header-search-close, [data-bs-theme="dark"] .nero-header-search-close { background: rgba(245, 235, 222, 0.08); color: #f5ebde; } .theme-dark .nero-header-search-close:hover, .theme-dark .nero-header-search-close:focus-visible, [data-bs-theme="dark"] .nero-header-search-close:hover, [data-bs-theme="dark"] .nero-header-search-close:focus-visible { background: rgba(212, 168, 117, 0.20); color: #d4a875; } /* When open, lock the page from scrolling underneath the backdrop. */ body.nero-search-open { overflow: hidden; } /* =========================================================== * Products page — single category view * Big category title + subtitle, search, then 2-col grid. * No more horizontal swiper — switch categories via the sidebar. * =========================================================== */ /* Category page header — same editorial style as home section-head */ .nero-cat-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 18px 0 18px; position: relative; padding-left: 14px; } .nero-cat-head::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--cat-accent) 0%, var(--cat-accent-soft) 100%); transition: background 0.35s ease; } .nero-cat-head-eyebrow { font-size: 11px; font-weight: 600; color: var(--cat-accent); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1; transition: color 0.35s ease; } .nero-cat-head-title { font-size: 28px; font-weight: 800; letter-spacing: -0.028em; color: #0f0a06; margin: 2px 0 4px; line-height: 1.1; } .nero-cat-head-sub { font-size: 11px; color: rgba(15, 10, 6, 0.55); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .theme-dark .nero-cat-head-title, [data-bs-theme="dark"] .nero-cat-head-title { color: #f5ebde; } .theme-dark .nero-cat-head-sub, [data-bs-theme="dark"] .nero-cat-head-sub { color: rgba(245, 235, 222, 0.55); } /* Dark eyebrow / bar colors now flow from --cat-accent (see top of file) */ /* =========================================================== * Tatlı footer credits — two stacked cards under the product * grid (Callebaut chocolate provenance + Sare Bakery partner). * Editorial, modern, brand-tinted. Only rendered on the Tatlı * category via JS (see initSingleCategory). * =========================================================== */ .nero-cat-credits { display: flex; flex-direction: column; gap: 14px; margin: 36px 0 0; } .nero-cat-credits[hidden] { display: none; } .nero-credit-card { position: relative; overflow: hidden; padding: 22px 22px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(15, 10, 6, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 36px -22px rgba(15, 10, 6, 0.20); transition: transform 0.25s ease, box-shadow 0.25s ease; } .nero-credit-card::before { /* Top accent bar — uses the category accent for a unified palette */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--cat-accent) 18%, var(--cat-accent) 82%, transparent 100%); opacity: 0.7; } .nero-credit-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 22px 40px -22px rgba(15, 10, 6, 0.28); } .nero-credit-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; } .nero-credit-wordmark { display: inline-flex; align-items: baseline; gap: 1px; font-family: "Raleway", "Poppins", system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; text-transform: lowercase; color: #0f0a06; line-height: 1; padding: 8px 14px 8px 14px; border-radius: 10px; border: 1.5px solid #0f0a06; background: #fff; } .nero-credit-wordmark sup { font-size: 11px; font-weight: 600; margin-left: 2px; color: var(--cat-accent); top: -0.6em; } /* Bakery card uses a script-feel monogram instead of a hard-bordered logo. */ .nero-credit-wordmark--script { border: 0; padding: 0; background: transparent; font-family: "Poppins", system-ui, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; line-height: 1; color: var(--cat-accent); align-items: center; gap: 6px; } .nero-credit-wordmark--script em { font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(15, 10, 6, 0.55); margin-left: 2px; padding-left: 10px; border-left: 1px solid rgba(15, 10, 6, 0.18); } .nero-credit-eyebrow { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(15, 10, 6, 0.50); } .nero-credit-title { margin: 0 0 8px; font-family: "Poppins", system-ui, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: #0f0a06; line-height: 1.25; } .nero-credit-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(15, 10, 6, 0.72); font-weight: 500; letter-spacing: 0.005em; } .nero-credit-body strong { color: var(--cat-accent); font-weight: 700; } /* Dark mode */ .theme-dark .nero-credit-card, [data-bs-theme="dark"] .nero-credit-card { background: rgba(26, 18, 8, 0.85); border-color: rgba(245, 235, 222, 0.08); box-shadow: 0 1px 0 rgba(245, 235, 222, 0.04) inset, 0 18px 36px -22px rgba(0, 0, 0, 0.5); } .theme-dark .nero-credit-wordmark, [data-bs-theme="dark"] .nero-credit-wordmark { color: #f5ebde; border-color: #f5ebde; background: transparent; } .theme-dark .nero-credit-wordmark--script, [data-bs-theme="dark"] .nero-credit-wordmark--script { color: var(--cat-accent); border: 0; } .theme-dark .nero-credit-wordmark--script em, [data-bs-theme="dark"] .nero-credit-wordmark--script em { color: rgba(245, 235, 222, 0.50); border-left-color: rgba(245, 235, 222, 0.20); } .theme-dark .nero-credit-eyebrow, [data-bs-theme="dark"] .nero-credit-eyebrow { color: rgba(245, 235, 222, 0.55); } .theme-dark .nero-credit-title, [data-bs-theme="dark"] .nero-credit-title { color: #f5ebde; } .theme-dark .nero-credit-body, [data-bs-theme="dark"] .nero-credit-body { color: rgba(245, 235, 222, 0.78); } @media (max-width: 380px) { .nero-credit-card { padding: 18px 18px 20px; } .nero-credit-title { font-size: 17px; } .nero-credit-body { font-size: 13px; } .nero-credit-wordmark { font-size: 19px; padding: 7px 11px; } .nero-credit-wordmark--script { font-size: 22px; } } /* =========================================================== * Toolbar row: search + view-toggle (segmented control) * =========================================================== */ .nero-cat-toolbar { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; } .nero-cat-toolbar .search-box { flex: 1; min-width: 0; margin: 0 !important; /* override template's search-box margin */ } /* Compact dropdown — single trigger button with a popover menu. Sized to match the search input on the same row (flex stretch + 1:1). */ .nero-view-toggle { position: relative; flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; } .nero-view-trigger { align-self: stretch; aspect-ratio: 1 / 1; height: auto; min-height: 48px; border: 0; border-radius: 999px; background: rgba(15, 10, 6, 0.06); color: #b17f4a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.15s ease, color 0.18s ease; } .nero-view-trigger:hover { background: rgba(15, 10, 6, 0.12); transform: translateY(-1px); } .nero-view-toggle[data-open="true"] .nero-view-trigger { background: #b17f4a; color: #fff; } .nero-view-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 180px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 10, 6, 0.18), 0 2px 8px rgba(15, 10, 6, 0.08); border: 1px solid rgba(15, 10, 6, 0.06); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top right; transition: opacity 0.16s ease, transform 0.18s cubic-bezier(.2,.7,.3,1); pointer-events: none; } .nero-view-dropdown[hidden] { display: none; } .nero-view-toggle[data-open="true"] .nero-view-dropdown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .nero-view-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: #1a1208; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-align: left; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nero-view-option:hover { background: rgba(15, 10, 6, 0.05); } .nero-view-option.active { background: rgba(177, 127, 74, 0.12); color: #b17f4a; } .nero-view-option-icon { display: inline-flex; color: currentColor; width: 16px; height: 16px; } /* Dark mode */ .theme-dark .nero-view-trigger, [data-bs-theme="dark"] .nero-view-trigger { background: rgba(245, 235, 222, 0.08); color: #d4a875; } .theme-dark .nero-view-trigger:hover, [data-bs-theme="dark"] .nero-view-trigger:hover { background: rgba(245, 235, 222, 0.16); } .theme-dark .nero-view-toggle[data-open="true"] .nero-view-trigger, [data-bs-theme="dark"] .nero-view-toggle[data-open="true"] .nero-view-trigger { background: #b17f4a; color: #fff; } .theme-dark .nero-view-dropdown, [data-bs-theme="dark"] .nero-view-dropdown { background: #1a1208; border-color: rgba(245, 235, 222, 0.08); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30); } .theme-dark .nero-view-option, [data-bs-theme="dark"] .nero-view-option { color: #f5ebde; } .theme-dark .nero-view-option:hover, [data-bs-theme="dark"] .nero-view-option:hover { background: rgba(245, 235, 222, 0.06); } .theme-dark .nero-view-option.active, [data-bs-theme="dark"] .nero-view-option.active { background: rgba(212, 168, 117, 0.18); color: #d4a875; } /* =========================================================== * 2-column product grid (image top, info below) — default * Variants: .is-cols-1 (horizontal list), .is-cols-3 (compact) * =========================================================== */ .nero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 8px; } .nero-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* 1-column = horizontal cards (image left, info right) */ .nero-grid.is-cols-1 { grid-template-columns: 1fr; gap: 10px; } .nero-grid.is-cols-1 .nero-grid-card { flex-direction: row; align-items: stretch; } .nero-grid.is-cols-1 .nero-grid-card-media { flex: 0 0 auto; width: 120px; aspect-ratio: 1 / 1; } .nero-grid.is-cols-1 .nero-grid-card-body { padding: 12px 14px; min-width: 0; /* prevent overflow inside flex item */ } .nero-grid.is-cols-1 .nero-grid-card-name { -webkit-line-clamp: 1; font-size: 15px; } .nero-grid.is-cols-1 .nero-grid-card-desc { -webkit-line-clamp: 2; font-size: 12px; } .nero-grid.is-cols-1 .nero-grid-card-price { font-size: 16px; margin-top: 8px; } /* 3-column compact tweaks */ .nero-grid.is-cols-3 .nero-grid-card-body { padding: 8px 10px 12px; gap: 2px; } .nero-grid.is-cols-3 .nero-grid-card-name { font-size: 12px; -webkit-line-clamp: 2; } .nero-grid.is-cols-3 .nero-grid-card-desc { display: none; /* too cramped at 3 cols */ } .nero-grid.is-cols-3 .nero-grid-card-price { font-size: 13px; padding-top: 2px; } .nero-grid-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 6px 18px rgba(15, 10, 6, 0.06); transition: transform 0.22s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s ease; } .nero-grid-card:hover { transform: translateY(-3px); color: inherit; box-shadow: 0 14px 30px rgba(15, 10, 6, 0.12); } .nero-grid-card:active { transform: translateY(-1px) scale(0.99); } .nero-grid-card-media { aspect-ratio: 1 / 1; background: linear-gradient(135deg, #f5ebde 0%, #e6d2b4 100%); overflow: hidden; position: relative; } .nero-grid-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(.2,.7,.3,1); } .nero-grid-card:hover .nero-grid-card-media img { transform: scale(1.05); } .nero-grid-card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .nero-grid-card-name { font-size: 14px; font-weight: 700; color: #0f0a06; margin: 0; letter-spacing: -0.01em; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nero-grid-card-desc { font-size: 11px; color: rgba(15, 10, 6, 0.55); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nero-grid-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nero-grid-card-price { font-size: 15px; font-weight: 700; color: #b17f4a; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; } /* Minimal "detayı gör" affordance — just a tiny chevron in the foot row. No pill, no label, no background. Card-wide hover slides it slightly to signal "open detail" without competing with the price. */ .nero-grid-card-cta { display: inline-flex; align-items: center; justify-content: center; color: rgba(15, 10, 6, 0.30); flex: 0 0 auto; transition: color 0.18s ease, transform 0.22s cubic-bezier(.2,.7,.3,1); } .nero-grid-card:hover .nero-grid-card-cta { color: #b17f4a; transform: translateX(3px); } .theme-dark .nero-grid-card-cta, [data-bs-theme="dark"] .nero-grid-card-cta { color: rgba(245, 235, 222, 0.30); } .theme-dark .nero-grid-card:hover .nero-grid-card-cta, [data-bs-theme="dark"] .nero-grid-card:hover .nero-grid-card-cta { color: #d4a875; } .nero-grid-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: rgba(15, 10, 6, 0.45); font-size: 13px; } /* (Auto-3-cols on tablet removed — user now controls layout via the toggle) */ /* Dark mode */ .theme-dark .nero-grid-card, [data-bs-theme="dark"] .nero-grid-card { background: #1a1208; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .theme-dark .nero-grid-card:hover, [data-bs-theme="dark"] .nero-grid-card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); } .theme-dark .nero-grid-card-media, [data-bs-theme="dark"] .nero-grid-card-media { background: linear-gradient(135deg, #2a1f15 0%, #4a3520 100%); } .theme-dark .nero-grid-card-name, [data-bs-theme="dark"] .nero-grid-card-name { color: #f5ebde; } .theme-dark .nero-grid-card-desc, [data-bs-theme="dark"] .nero-grid-card-desc { color: rgba(245, 235, 222, 0.55); } .theme-dark .nero-grid-card-price, [data-bs-theme="dark"] .nero-grid-card-price { color: #d4a875; } .theme-dark .nero-grid-empty, [data-bs-theme="dark"] .nero-grid-empty { color: rgba(245, 235, 222, 0.4); } /* Swiper container must hide off-screen slides — otherwise all category panels stack horizontally and the page spills off the right edge. */ .dz-tabs-swiper2, .dz-custom-swiper { overflow: hidden; width: 100%; max-width: 100%; cursor: grab; } .dz-tabs-swiper2:active { cursor: grabbing; } /* Each slide takes exactly the swiper's width; grid lives inside it. */ .dz-tabs-swiper2 .swiper-slide { width: 100%; box-sizing: border-box; } /* Belt-and-suspenders: never let the page itself scroll horizontally */ body[data-page="products"] { overflow-x: hidden; } /* =========================================================== * Products page — modern light category tabs (horizontal pills) * Matches the index/detail theme — no more dark Starbucks header. * =========================================================== */ .nero-cat-tabs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 8px -16px 22px; /* extend edge-to-edge for scroll */ padding: 6px 16px 12px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .nero-cat-tabs::-webkit-scrollbar { display: none; } .nero-cat-tab { flex: 0 0 auto; background: rgba(15, 10, 6, 0.05); color: #1a1208; border: 0; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: background 0.22s ease, color 0.22s ease, transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s ease; } .nero-cat-tab:hover { background: rgba(15, 10, 6, 0.10); transform: translateY(-1px); } .nero-cat-tab.active { background: #b17f4a; color: #fff; box-shadow: 0 8px 22px rgba(177, 127, 74, 0.32); } .nero-cat-tab.active:hover { background: #c89058; transform: translateY(-1px); } /* Dark mode — invert pill resting state, active stays chocolate */ .theme-dark .nero-cat-tab, [data-bs-theme="dark"] .nero-cat-tab { background: rgba(245, 235, 222, 0.08); color: #f5ebde; } .theme-dark .nero-cat-tab:hover, [data-bs-theme="dark"] .nero-cat-tab:hover { background: rgba(245, 235, 222, 0.15); } .theme-dark .nero-cat-tab.active, [data-bs-theme="dark"] .nero-cat-tab.active { background: #b17f4a; color: #fff; box-shadow: 0 8px 22px rgba(177, 127, 74, 0.42); } /* =========================================================== * Products page compound header (Starbucks-style) — DEPRECATED * Kept as legacy in case another page references these classes; * the products page no longer uses them. * =========================================================== */ .nero-ph { position: relative; background: linear-gradient(165deg, #5a3f24 0%, #3a2a18 55%, #221608 100%); color: #fff; padding: 14px 18px 18px; border-radius: 0 0 28px 28px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); margin-bottom: 16px; } /* Decorative radial swirl behind the content (subtle) */ .nero-ph-deco { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 12%, rgba(212, 168, 117, 0.22), transparent 38%), radial-gradient(circle at 8% 88%, rgba(177, 127, 74, 0.18), transparent 45%), radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.04), transparent 55%); z-index: 0; } .nero-ph > *:not(.nero-ph-deco) { position: relative; z-index: 1; } /* --- Top row: back · brand · grid --- */ .nero-ph-top { display: flex; align-items: center; gap: 10px; min-height: 42px; } .nero-ph-back, .nero-ph-grid { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.10); color: #fff; text-decoration: none; flex: 0 0 auto; transition: background 0.15s ease; } .nero-ph-back:hover, .nero-ph-grid:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .nero-ph-back i { font-size: 18px; } .nero-ph-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .nero-ph-brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: rgba(255, 255, 255, 0.08); padding: 3px; } .nero-ph-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Tabs --- */ .nero-ph-tabs { display: flex; gap: 20px; margin-top: 16px; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.12); scrollbar-width: none; -ms-overflow-style: none; } .nero-ph-tabs::-webkit-scrollbar { display: none; } .nero-ph-tab { flex: 0 0 auto; background: transparent; border: 0; color: rgba(255, 255, 255, 0.55); padding: 12px 2px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; position: relative; transition: color 0.15s ease; white-space: nowrap; } .nero-ph-tab:hover { color: rgba(255, 255, 255, 0.85); } .nero-ph-tab.active { color: #fff; } .nero-ph-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: #d4a875; } /* --- Circle row (products in active category) --- */ .nero-ph-circles { display: flex; gap: 14px; margin: 14px -18px 0; padding: 6px 18px 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nero-ph-circles::-webkit-scrollbar { display: none; } .nero-ph-circle { flex: 0 0 auto; width: 78px; background: transparent; border: 0; padding: 0; color: #fff; cursor: pointer; text-align: center; transition: transform 0.18s ease; } .nero-ph-circle:hover { transform: translateY(-2px); } .nero-ph-circle-img { display: block; width: 70px; height: 70px; margin: 0 auto 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); transition: box-shadow 0.18s ease, transform 0.18s ease; } .nero-ph-circle:hover .nero-ph-circle-img, .nero-ph-circle.active .nero-ph-circle-img { box-shadow: inset 0 0 0 2px rgba(212, 168, 117, 0.6), 0 0 0 3px rgba(212, 168, 117, 0.85); transform: scale(1.04); } .nero-ph-circle-name { display: block; font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, 0.78); font-weight: 500; max-width: 78px; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* --- Search bar inside header --- */ .nero-ph-search { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.96); border-radius: 999px; padding: 6px 14px 6px 18px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); } .nero-ph-search svg { flex: 0 0 auto; } .nero-ph-search input { flex: 1; border: 0; background: transparent; padding: 10px 0; font-size: 14px; outline: none; color: #2b2018; } .nero-ph-search input::placeholder { color: #9c9c9c; } /* --- Main content area below the new header --- */ .nero-products-main { padding-top: 0; padding-bottom: 40px; } .nero-products-main .container { padding-top: 4px; } /* When the new header is present, hide the default fixed Ombe header rules from leaking into spacing */ body[data-page="products"] .page-content.space-top { padding-top: 0; } /* --- Section heading (home) — editorial style --- */ .nero-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 42px 0 18px; position: relative; padding-left: 14px; } /* Brand-accent vertical bar — subtle "specific area" marker */ .nero-section-head::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #b17f4a 0%, rgba(177, 127, 74, 0.35) 100%); } .nero-section-eyebrow { font-size: 11px; font-weight: 600; color: #b17f4a; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1; } .nero-section-title { font-size: 24px; font-weight: 800; color: #0f0a06; margin: 0; letter-spacing: -0.028em; line-height: 1.15; } [data-bs-theme="dark"] .nero-section-title { color: #f5ebde; } [data-bs-theme="dark"] .nero-section-eyebrow { color: #d6a575; } [data-bs-theme="dark"] .nero-section-head::before { background: linear-gradient(180deg, #d6a575 0%, rgba(214, 165, 117, 0.3) 100%); } /* First section after search has slightly less top spacing */ .nero-search-wrap + .nero-section-head { margin-top: 34px; } /* =========================================================== * Category cards — single-column, "feature card" style * Recipe-card inspired: pastel bg, big bold title, image overflow, * decorative pattern, bottom CTA pill with circular arrow button. * =========================================================== */ .nero-cat-grid { display: flex; flex-direction: column; gap: 14px; margin: 0 0 32px; } .nero-cat-card { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 188px; border-radius: 26px; padding: 20px 18px 14px 22px; overflow: hidden; text-decoration: none; color: #0f0a06; isolation: isolate; transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s ease; box-shadow: 0 8px 22px rgba(15, 10, 6, 0.06); } .nero-cat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(15, 10, 6, 0.12); color: #0f0a06; } .nero-cat-card:active { transform: scale(0.99); } /* ----- Per-category pastel palette (warm cafe-leaning) ----- */ .nero-cat-c1 { background: #ead6b8; } /* Sıcak İçecekler — latte cream */ .nero-cat-c2 { background: #cfdfd9; } /* Soğuk İçecekler — sage mist */ .nero-cat-c3 { background: #f1c6b1; } /* Fast Food — terracotta peach */ .nero-cat-c4 { background: #ecd0d4; } /* Tatlı — powder rose */ .nero-cat-c5 { background: #e3dcc0; } /* Meşrubat — warm sand */ [data-bs-theme="dark"] .nero-cat-c1 { background: #4a3a23; color: #f5ebde; } [data-bs-theme="dark"] .nero-cat-c2 { background: #2f4039; color: #e6efea; } [data-bs-theme="dark"] .nero-cat-c3 { background: #563729; color: #f9dfd1; } [data-bs-theme="dark"] .nero-cat-c4 { background: #4a2e34; color: #f5d8dc; } [data-bs-theme="dark"] .nero-cat-c5 { background: #45402d; color: #efe9cf; } [data-bs-theme="dark"] .nero-cat-card { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .nero-cat-card:hover { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5); } /* ----- Decorative pattern in the corner (subtle, tints with bg) ----- */ .nero-cat-card-deco { position: absolute; top: -12px; right: 42%; width: 110px; height: 110px; pointer-events: none; z-index: 0; color: rgba(15, 10, 6, 0.06); } .nero-cat-card-deco svg { width: 100%; height: 100%; } [data-bs-theme="dark"] .nero-cat-card-deco { color: rgba(255, 255, 255, 0.08); } /* ----- Body (left column) ----- */ .nero-cat-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; } .nero-cat-card-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: rgba(15, 10, 6, 0.08); color: rgba(15, 10, 6, 0.72); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .nero-cat-card-pill i { font-size: 12px; line-height: 1; } [data-bs-theme="dark"] .nero-cat-card-pill { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); } .nero-cat-card-title { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin: 0; color: inherit; /* allow natural 2-line wrap */ max-width: 100%; } /* ----- Bottom CTA bar (white pill + circular dark arrow button) ----- */ .nero-cat-card-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 16px; background: #ffffff; border-radius: 999px; box-shadow: 0 4px 12px rgba(15, 10, 6, 0.06); } [data-bs-theme="dark"] .nero-cat-card-cta { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .nero-cat-card-cta-label { font-size: 12.5px; font-weight: 600; color: #0f0a06; letter-spacing: -0.005em; } .nero-cat-card-cta-btn { width: 32px; height: 32px; border-radius: 50%; background: #0f0a06; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s ease, background 0.2s ease; } .nero-cat-card:hover .nero-cat-card-cta-btn { background: #b17f4a; transform: translateX(2px) rotate(-8deg); } /* ----- Media (right column) — image overflows the card on the right ----- */ .nero-cat-card-media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin: -20px -18px -14px 0; overflow: hidden; } .nero-cat-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0 26px 26px 0; /* Slight scale so the image fills the rounded slot edge-to-edge */ transform: scale(1.02); transition: transform 0.5s cubic-bezier(.2,.7,.3,1); } .nero-cat-card:hover .nero-cat-card-media img { transform: scale(1.06); } /* Fallback when no image — render the category icon as a big watermark */ .nero-cat-card-media.is-icon { align-items: center; justify-content: center; background: rgba(15, 10, 6, 0.04); border-radius: 18px; margin: 0; } .nero-cat-card-media.is-icon i { font-size: 64px; color: rgba(15, 10, 6, 0.35); } [data-bs-theme="dark"] .nero-cat-card-media.is-icon { background: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .nero-cat-card-media.is-icon i { color: rgba(255, 255, 255, 0.4); } /* Tighter on very small screens */ @media (max-width: 360px) { .nero-cat-card { grid-template-columns: 1.3fr 1fr; min-height: 170px; padding: 16px 14px 12px 18px; } .nero-cat-card-title { font-size: 22px; } .nero-cat-card-deco { width: 90px; height: 90px; right: 44%; } } /* Product card description on products page */ .nero-card-desc { color: rgba(0, 0, 0, 0.55); font-size: 12px; line-height: 1.45; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } [data-bs-theme="dark"] .nero-card-desc, .theme-dark .nero-card-desc { color: rgba(255, 255, 255, 0.6); } .nero-product-card .dz-meta { margin-top: 4px; } .nero-product-card { text-decoration: none; color: inherit; display: flex; transition: transform 0.18s ease, box-shadow 0.18s ease; } .nero-product-card:hover { color: inherit; text-decoration: none; } .nero-product-card:active { transform: scale(0.985); } /* --- Product Modal --- */ .nero-product-modal .modal-dialog { max-width: 92%; margin: auto; } @media (min-width: 576px) { .nero-product-modal .modal-dialog { max-width: 420px; } } .nero-product-modal .modal-content { border-radius: 22px; border: 0; overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); } [data-bs-theme="dark"] .nero-product-modal .modal-content { background: #1c1612; color: #f0e3d1; } .nero-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 0; display: flex; align-items: center; justify-content: center; color: #1b1b1b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0; opacity: 1; } .nero-modal-close:hover { background: #fff; } .nero-modal-close i { font-size: 18px; line-height: 1; } .nero-modal-image { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f0e3d1 0%, #e6d2b4 100%); overflow: hidden; position: relative; } .nero-modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .nero-modal-image img[src=""], .nero-modal-image img:not([src]) { opacity: 0; } .nero-modal-body { padding: 18px 22px 24px; } .nero-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .nero-modal-name { font-size: 20px; font-weight: 700; color: #1b1b1b; margin: 0; flex: 1; line-height: 1.25; } [data-bs-theme="dark"] .nero-modal-name { color: #f0e3d1; } .nero-modal-price { font-size: 18px; font-weight: 700; color: #b17f4a; white-space: nowrap; padding-top: 2px; } .nero-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .nero-modal-tags:empty { display: none; } .nero-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f0e3d1; color: #6a4a28; font-size: 11px; font-weight: 500; line-height: 1.4; } [data-bs-theme="dark"] .nero-tag { background: #2a1f15; color: #d4a875; } .nero-modal-desc { font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, 0.7); margin: 0; } [data-bs-theme="dark"] .nero-modal-desc { color: rgba(255, 255, 255, 0.7); } .nero-modal-desc:empty { display: none; }